{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segment-group",
  "title": "Segment Group",
  "description": "A shadcn-style segment group component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/segment-group.tsx",
      "content": "\"use client\";\n\nimport {\n  SegmentGroup as SegmentGroupPrimitive,\n  useSegmentGroup,\n  useSegmentGroupContext,\n} from \"@ark-ui/react/segment-group\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport { useSegmentGroup, useSegmentGroupContext };\n\nexport type TabsVariant = \"default\" | \"underline\";\n\nexport const SegmentGroupRoot = ({\n  orientation = \"horizontal\",\n  variant = \"default\",\n  className,\n  ...props\n}: SegmentGroupPrimitive.RootProps & { variant?: TabsVariant }) => (\n  <SegmentGroupPrimitive.Root\n    data-slot=\"segment-group\"\n    orientation={orientation}\n    data-variant={variant}\n    className={cn(\"group/segment-group\", className)}\n    {...props}\n  />\n);\n\nexport const SegmentGroup = ({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 border border-transparent text-muted-foreground\",\n        \"group-data-[orientation=vertical]/segment-group:flex-col\",\n        \"group-data-[variant=default]/segment-group:rounded-lg group-data-[variant=default]/segment-group:bg-muted group-data-[variant=default]/segment-group:p-0.5 group-data-[variant=default]/segment-group:text-muted-foreground/72\",\n        \"group-data-[orientation=vertical]/segment-group:px-1 group-data-[orientation=horizontal]/segment-group:py-1\",\n        \"group-data-invalid/segment-group:border-destructive/36 dark:group-data-invalid/segment-group:border-destructive/50\",\n        \"group-data-invalid/segment-group:has-focus-visible:ring-[3px] group-data-invalid/segment-group:has-focus-visible:ring-destructive/20 dark:group-data-invalid/segment-group:has-focus-visible:ring-destructive/40\",\n        className,\n      )}\n      data-slot=\"segment-group-item\"\n    >\n      {children}\n      <SegmentGroupPrimitive.Indicator\n        className={cn(\n          \"absolute left-(--left) h-(--height) w-(--width) transition-[width,height,left,top] duration-200 ease-in-out\",\n          \"group-data-[variant=default]/segment-group:top-(--top) group-data-[variant=default]/segment-group:right-(--left)\",\n          \"group-data-[variant=default]/segment-group:-z-1 group-data-[variant=default]/segment-group:rounded-md group-data-[variant=default]/segment-group:bg-background group-data-[variant=default]/segment-group:shadow-sm/5 group-data-[variant=default]/segment-group:dark:bg-input\",\n          \"group-data-[variant=underline]/segment-group:bottom-0 group-data-[variant=underline]/segment-group:z-10 group-data-[variant=underline]/segment-group:bg-primary\",\n          \"group-data-[variant=underline]/segment-group:group-data-[orientation=horizontal]/segment-group:h-0.5 group-data-[variant=underline]/segment-group:group-data-[orientation=horizontal]/segment-group:translate-y-px\",\n          \"group-data-[variant=underline]/segment-group:group-data-[orientation=vertical]/segment-group:w-0.5 group-data-[variant=underline]/segment-group:group-data-[orientation=vertical]/segment-group:left-[calc(var(--left)/2)] group-data-[variant=underline]/segment-group:group-data-[orientation=vertical]/segment-group:-translate-x-px\",\n        )}\n        data-slot=\"segment-group-indicator\"\n      />\n    </div>\n  );\n};\n\nexport const Segment = ({\n  className,\n  children,\n  ...props\n}: SegmentGroupPrimitive.ItemProps) => {\n  return (\n    <SegmentGroupPrimitive.Item\n      className={cn(\n        \"relative flex min-h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"segment-group-item\"\n      {...props}\n    >\n      {typeof children === \"string\" ? (\n        <SegmentGroupPrimitive.ItemText>\n          {children}\n        </SegmentGroupPrimitive.ItemText>\n      ) : (\n        children\n      )}\n      <SegmentGroupPrimitive.ItemControl className={\"hidden\"} />\n      <SegmentGroupPrimitive.ItemHiddenInput />\n    </SegmentGroupPrimitive.Item>\n  );\n};\n\nexport const SegmentGroupRootProvider = ({\n  children,\n  className,\n  variant = \"default\",\n  ...props\n}: SegmentGroupPrimitive.RootProviderProps & { variant?: TabsVariant }) => {\n  return (\n    <SegmentGroupPrimitive.RootProvider\n      className={cn(\"group/segment-group\", className)}\n      data-variant={variant}\n      {...props}\n    >\n      {children}\n    </SegmentGroupPrimitive.RootProvider>\n  );\n};\nexport const SegmentGroupContext = ({\n  ...props\n}: SegmentGroupPrimitive.ContextProps) => {\n  return <SegmentGroupPrimitive.Context {...props} />;\n};\n",
      "type": "registry:ui",
      "target": "src/components/ui/segment-group.tsx"
    }
  ],
  "type": "registry:ui"
}