{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control",
  "title": "Segmented Control",
  "description": "A native single-select control for choosing between a small set of options.",
  "dependencies": [
    "@expo/ui"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/segmented-control/index.ts",
      "content": "export * from \"./segmented-control\";\nexport type {\n  SegmentedControlItemLabelProps,\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n} from \"./segmented-control.types\";\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/segmented-control/segmented-control.types.ts",
      "content": "export type SegmentedControlProps = {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  disabled?: boolean;\n  className?: string;\n  children: React.ReactNode;\n};\n\nexport type SegmentedControlItemProps = {\n  value: string;\n  children: React.ReactElement | React.ReactElement[];\n};\n\nexport type SegmentedControlItemLabelProps = {\n  children: string;\n};\n\nexport type SegmentedControlItemData = {\n  value: string;\n  label: string;\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/segmented-control/segmented-control-utils.ts",
      "content": "import { Children, isValidElement } from \"react\";\nimport type {\n  SegmentedControlItemData,\n  SegmentedControlItemLabelProps,\n  SegmentedControlItemProps,\n} from \"./segmented-control.types\";\n\nconst getChildDisplayName = (child: React.ReactNode) => {\n  if (!isValidElement(child)) {\n    return;\n  }\n\n  return (child.type as { displayName?: string }).displayName;\n};\n\nconst extractItemLabel = (children: React.ReactNode) => {\n  let label: string | undefined;\n\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (getChildDisplayName(child) === \"SegmentedControlItemLabel\") {\n      label = (child.props as SegmentedControlItemLabelProps).children;\n    }\n  }\n\n  return label;\n};\n\nexport const extractSegmentedControlItems = (children: React.ReactNode) => {\n  const items: SegmentedControlItemData[] = [];\n\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (getChildDisplayName(child) !== \"SegmentedControlItem\") {\n      continue;\n    }\n\n    const { value, children: itemChildren } =\n      child.props as SegmentedControlItemProps;\n    const label = extractItemLabel(itemChildren);\n\n    if (typeof value !== \"string\" || label === undefined) {\n      continue;\n    }\n\n    items.push({ label, value });\n  }\n\n  return items;\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/segmented-control/segmented-control.tsx",
      "content": "import type {\n  SegmentedControlItemLabelProps,\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n} from \"./segmented-control.types\";\n\nexport const SegmentedControlItemLabel = (\n  _: SegmentedControlItemLabelProps\n) => {\n  return null;\n};\n\nSegmentedControlItemLabel.displayName = \"SegmentedControlItemLabel\";\n\nexport const SegmentedControlItem = (_: SegmentedControlItemProps) => {\n  return null;\n};\n\nSegmentedControlItem.displayName = \"SegmentedControlItem\";\n\nexport const SegmentedControl = (_: SegmentedControlProps) => {\n  return null;\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/segmented-control/segmented-control.ios.tsx",
      "content": "import { Host as HostPrimitive } from \"@expo/ui\";\nimport { Picker, Text } from \"@expo/ui/swift-ui\";\nimport {\n  disabled as disabledModifier,\n  type ModifierConfig,\n  pickerStyle,\n  tag,\n  tint,\n} from \"@expo/ui/swift-ui/modifiers\";\nimport { useState } from \"react\";\nimport { useCSSVariable, withUniwind } from \"uniwind\";\nimport { cn } from \"@/lib/utils\";\nimport type {\n  SegmentedControlItemLabelProps,\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n} from \"./segmented-control.types\";\nimport { extractSegmentedControlItems } from \"./segmented-control-utils\";\n\nconst StyledHost = withUniwind(HostPrimitive);\n\nexport const SegmentedControlItemLabel = (\n  _: SegmentedControlItemLabelProps\n) => {\n  return null;\n};\n\nSegmentedControlItemLabel.displayName = \"SegmentedControlItemLabel\";\n\nexport const SegmentedControlItem = (_: SegmentedControlItemProps) => {\n  return null;\n};\n\nSegmentedControlItem.displayName = \"SegmentedControlItem\";\n\nexport const SegmentedControl = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  children,\n}: SegmentedControlProps) => {\n  const primaryColor = useCSSVariable(\"--color-primary\") as string;\n  const items = extractSegmentedControlItems(children);\n  const [internalValue, setInternalValue] = useState(\n    defaultValue ?? items.at(0)?.value ?? \"\"\n  );\n\n  const isControlled = valueProp !== undefined;\n  const value = isControlled ? valueProp : internalValue;\n\n  const handleValueChange = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onValueChange?.(nextValue);\n  };\n\n  const modifiers: ModifierConfig[] = [\n    pickerStyle(\"segmented\"),\n    tint(primaryColor),\n  ];\n\n  if (disabled) {\n    modifiers.push(disabledModifier(true));\n  }\n\n  return (\n    <StyledHost className={cn(\"w-full\", className)} matchContents>\n      <Picker\n        modifiers={modifiers}\n        onSelectionChange={(selection) => {\n          handleValueChange(String(selection));\n        }}\n        selection={value}\n      >\n        {items.map((item) => (\n          <Text key={item.value} modifiers={[tag(item.value)]}>\n            {item.label}\n          </Text>\n        ))}\n      </Picker>\n    </StyledHost>\n  );\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/segmented-control/segmented-control.android.tsx",
      "content": "import {\n  Host as HostPrimitive,\n  SegmentedButton,\n  SingleChoiceSegmentedButtonRow,\n  Text,\n} from \"@expo/ui/jetpack-compose\";\nimport { useState } from \"react\";\nimport { useCSSVariable, withUniwind } from \"uniwind\";\nimport { cn } from \"@/lib/utils\";\nimport type {\n  SegmentedControlItemLabelProps,\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n} from \"./segmented-control.types\";\nimport { extractSegmentedControlItems } from \"./segmented-control-utils\";\n\nconst StyledHost = withUniwind(HostPrimitive);\n\nexport const SegmentedControlItemLabel = (\n  _: SegmentedControlItemLabelProps\n) => {\n  return null;\n};\n\nSegmentedControlItemLabel.displayName = \"SegmentedControlItemLabel\";\n\nexport const SegmentedControlItem = (_: SegmentedControlItemProps) => {\n  return null;\n};\n\nSegmentedControlItem.displayName = \"SegmentedControlItem\";\n\nexport const SegmentedControl = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  children,\n}: SegmentedControlProps) => {\n  const primaryColor = useCSSVariable(\"--color-primary\") as string;\n  const primaryForegroundColor = useCSSVariable(\n    \"--color-primary-foreground\"\n  ) as string;\n  const foregroundColor = useCSSVariable(\"--color-foreground\") as string;\n  const mutedForegroundColor = useCSSVariable(\n    \"--color-muted-foreground\"\n  ) as string;\n\n  const items = extractSegmentedControlItems(children);\n  const [internalValue, setInternalValue] = useState(\n    defaultValue ?? items.at(0)?.value ?? \"\"\n  );\n\n  const isControlled = valueProp !== undefined;\n  const value = isControlled ? valueProp : internalValue;\n\n  const handleValueChange = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onValueChange?.(nextValue);\n  };\n\n  return (\n    <StyledHost className={cn(\"w-full\", className)} matchContents>\n      <SingleChoiceSegmentedButtonRow>\n        {items.map((item) => (\n          <SegmentedButton\n            colors={{\n              activeContainerColor: primaryColor,\n              activeContentColor: primaryForegroundColor,\n              disabledActiveContainerColor: mutedForegroundColor,\n              disabledActiveContentColor: primaryForegroundColor,\n              disabledInactiveContentColor: mutedForegroundColor,\n              inactiveContentColor: foregroundColor,\n            }}\n            enabled={!disabled}\n            key={item.value}\n            onClick={() => {\n              handleValueChange(item.value);\n            }}\n            selected={item.value === value}\n          >\n            <SegmentedButton.Label>\n              <Text>{item.label}</Text>\n            </SegmentedButton.Label>\n          </SegmentedButton>\n        ))}\n      </SingleChoiceSegmentedButtonRow>\n    </StyledHost>\n  );\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}