{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control-glass",
  "type": "registry:component",
  "title": "Segmented Control Glass",
  "description": "Segmented Control Glass component with glass effects",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/specialized/segmented-control-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// SEGMENTED CONTROL GLASS COMPONENT\n// ========================================\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\nexport interface SegmentOption {\n  readonly value: string;\n  readonly label: string;\n}\n\nexport interface SegmentedControlGlassProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  readonly options: readonly SegmentOption[];\n  readonly value: string;\n  readonly onChange?: (value: string) => void;\n}\n\nexport const SegmentedControlGlass = forwardRef<HTMLDivElement, SegmentedControlGlassProps>(\n  ({ options = [], value, onChange, className, ...props }, ref) => {\n    const containerStyles: CSSProperties = {\n      border: '1px solid var(--segmented-container-border)',\n      background: 'var(--segmented-container-bg)',\n    };\n\n    // Early return if no options provided\n    if (!options || options.length === 0) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('inline-flex w-fit rounded-xl overflow-hidden', className)}\n        style={containerStyles}\n        role=\"tablist\"\n        {...props}\n      >\n        {options.map((opt) => {\n          const isActive = value === opt.value;\n          const buttonStyles: CSSProperties = {\n            background: isActive ? 'var(--segmented-active-bg)' : 'transparent',\n            color: isActive ? 'var(--segmented-active-text)' : 'var(--segmented-inactive-text)',\n          };\n\n          return (\n            <button\n              key={opt.value}\n              onClick={() => onChange?.(opt.value)}\n              className=\"flex-1 px-3 py-1.5 md:px-4 md:py-2 text-xs md:text-sm font-medium text-center transition-all duration-300\"\n              style={buttonStyles}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n            >\n              {opt.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSegmentedControlGlass.displayName = 'SegmentedControlGlass';\n"
    }
  ],
  "categories": [
    "specialized"
  ]
}