cosscom__coss/apps/ui/public/r/toggle-group.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "type": "registry:ui",
  "dependencies": ["@base-ui-components/react"],
  "registryDependencies": ["@coss/separator", "@coss/toggle"],
  "files": [
    {
      "path": "registry/default/ui/toggle-group.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui-components/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui-components/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  Toggle as ToggleComponent,\n  toggleVariants,\n} from \"@/registry/default/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      orientation={orientation}\n      className={cn(\n        \"flex w-fit *:focus-visible:z-10\",\n        orientation === \"horizontal\"\n          ? \"*:pointer-coarse:after:min-w-auto\"\n          : \"*:pointer-coarse:after:min-h-auto\",\n        variant === \"default\"\n          ? \"gap-0.5\"\n          : orientation === \"horizontal\"\n            ? \"*:not-first:rounded-s-none *:not-first:border-s-0 *:not-last:rounded-e-none *:not-last:border-e-0 *:not-first:before:-start-[0.5px] *:not-first:before:rounded-s-none *:not-last:before:-end-[0.5px] *:not-last:before:rounded-e-none\"\n            : \"flex-col *:not-first:rounded-t-none *:not-first:border-t-0 *:not-last:rounded-b-none *:not-last:border-b-0 *:not-first:before:-top-[0.5px] *:not-first:before:rounded-t-none *:not-last:before:-bottom-[0.5px] *:not-last:before:hidden *:not-last:before:rounded-b-none dark:*:first:before:block dark:*:last:before:hidden\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction Toggle({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  const resolvedVariant = context.variant || variant\n  const resolvedSize = context.size || size\n\n  return (\n    <ToggleComponent\n      data-variant={resolvedVariant}\n      data-size={resolvedSize}\n      className={className}\n      variant={resolvedVariant}\n      size={resolvedSize}\n      {...props}\n    >\n      {children}\n    </ToggleComponent>\n  )\n}\n\nfunction ToggleGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: {\n  className?: string\n} & React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator orientation={orientation} className={className} {...props} />\n  )\n}\n\nexport { ToggleGroup, Toggle, Toggle as ToggleGroupItem, ToggleGroupSeparator }\n",
      "type": "registry:ui"
    }
  ]
}