{"name":"toggle","type":"registry:ui","files":[{"path":"toggle.tsx","type":"registry:ui","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 { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst toggleVariants = cva(\n  \"box-border inline-flex w-auto shrink-0 cursor-pointer items-center justify-center rounded-[var(--hui-radius-1)] border-[0.5px] border-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-secondary)] p-[var(--hui-space-1)] text-[var(--hui-color-foreground-base-secondary)] outline-none [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] [transition:color_var(--hui-duration-normal)_var(--hui-ease-out)] hover:text-[var(--hui-color-foreground-base-primary)] data-pressed:text-[var(--hui-color-foreground-base-primary)] data-disabled:pointer-events-auto data-disabled:cursor-not-allowed data-disabled:opacity-50 focus-visible:[outline:var(--hui-focus-ring)] [&:hover>[data-slot=toggle-content]]:bg-[var(--hui-color-background-base-primary-hover)] data-pressed:[&>[data-slot=toggle-content]]:bg-[var(--hui-color-background-neutral-secondary)] data-pressed:[&>[data-slot=toggle-content]]:shadow-[var(--hui-shadow-inset)] data-pressed:[&:hover>[data-slot=toggle-content]]:bg-[var(--hui-color-background-neutral-secondary-hover)] [&[data-disabled]:not([data-pressed]):hover]:text-[var(--hui-color-foreground-base-secondary)] [&[data-disabled]:not([data-pressed]):hover>[data-slot=toggle-content]]:bg-transparent [&[data-disabled]:not([data-pressed]):hover>[data-slot=toggle-content]]:shadow-none [&[data-disabled][data-pressed]:hover>[data-slot=toggle-content]]:bg-[var(--hui-color-background-neutral-secondary)]\",\n  {\n    variants: {\n      variant: {\n        default: null,\n        outline: null,\n      },\n      size: {\n        \"1\": \"h-[var(--hui-space-4)] min-w-[var(--hui-space-4)]\",\n        \"2\": \"h-[var(--hui-space-5)] min-w-[var(--hui-space-5)]\",\n        \"3\": \"h-[var(--hui-space-6)] min-w-[var(--hui-space-6)]\",\n        \"4\": \"h-[var(--hui-space-7)] min-w-[var(--hui-space-7)]\",\n        sm: \"h-[var(--hui-space-6)] min-w-[var(--hui-space-6)]\",\n        default: \"h-[var(--hui-space-7)] min-w-[var(--hui-space-7)]\",\n        lg: \"h-[var(--hui-space-7)] min-w-[var(--hui-space-7)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst ToggleGroupContext =\n  React.createContext<VariantProps<typeof toggleVariants> | null>(null)\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    <TogglePrimitive\n      data-slot=\"toggle\"\n      data-variant={resolvedVariant}\n      data-size={resolvedSize}\n      className={cn(\n        toggleVariants({ variant: resolvedVariant, size: resolvedSize }),\n        context &&\n          \"rounded-none border-0 bg-transparent focus-visible:outline-offset-[var(--hui-focus-ring-offset-inset-border)] hover:bg-[var(--hui-color-background-base-primary-hover)] data-pressed:bg-[var(--hui-color-background-base-primary)] data-pressed:shadow-[var(--hui-shadow-inset)] data-pressed:[&>[data-slot=toggle-content]]:bg-transparent data-pressed:[&>[data-slot=toggle-content]]:shadow-none data-pressed:[&:hover>[data-slot=toggle-content]]:bg-transparent data-disabled:not-data-pressed:hover:bg-transparent data-disabled:not-data-pressed:hover:shadow-none motion-safe:[transition:color_var(--hui-duration-normal)_var(--hui-ease-out),background-color_var(--hui-duration-fast)_var(--hui-ease-out),box-shadow_var(--hui-duration-fast)_var(--hui-ease-out)]\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"toggle-content\"\n        className=\"flex h-full min-w-0 flex-1 items-center justify-center rounded-[var(--hui-radius-1)] motion-safe:[transition:background-color_var(--hui-duration-fast)_var(--hui-ease-out),box-shadow_var(--hui-duration-fast)_var(--hui-ease-out)] [&>svg]:max-h-full [&>svg]:max-w-full [&>svg]:shrink-0\"\n      >\n        {children}\n      </span>\n    </TogglePrimitive>\n  )\n}\n\nfunction ToggleGroup({\n  className,\n  variant = \"default\",\n  size = \"default\",\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      className={cn(\n        \"inline-flex w-fit items-center gap-px overflow-clip rounded-[var(--hui-radius-1)] border-[0.5px] border-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-secondary)] p-[var(--hui-space-1)] data-[orientation=vertical]:flex-col data-disabled:pointer-events-auto data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupSeparator({ className, ...props }: { className?: string }) {\n  return <Separator orientation=\"vertical\" className={className} {...props} />\n}\n\nexport {\n  Toggle,\n  ToggleGroup,\n  Toggle as ToggleGroupItem,\n  ToggleGroupSeparator,\n  toggleVariants,\n}\n","target":"components/ui/toggle.tsx"}],"dependencies":["@base-ui-components/react","class-variance-authority"],"registryDependencies":["https://www.honestui.com/r/separator.json"]}