{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toggle","type":"registry:ui","title":"Toggle","description":"A button that stays pressed: Bold, Pin, Mute.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/toggle.tsx","type":"registry:file","target":"components/dashral/toggle.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\ntype ToggleVariant = \"ghost\" | \"outline\"\ntype ToggleSize = \"sm\" | \"default\" | \"lg\"\ntype ToggleColor = \"primary\" | \"neutral\" | \"none\"\n\n// On: a soft tint of the color. Every class is written out in full so Tailwind finds it.\nconst onColors: Record<ToggleColor, { fill: string; border: string }> = {\n  primary: { fill: \"data-[state=on]:bg-primary/12 data-[state=on]:text-primary-text data-[state=on]:hover:bg-primary/18 data-[state=on]:hover:text-primary-text\", border: \"data-[state=on]:border-primary/40\" },\n  neutral: { fill: \"data-[state=on]:bg-accent data-[state=on]:text-foreground data-[state=on]:hover:bg-accent\", border: \"data-[state=on]:border-ring/40\" },\n  // No tint: what's inside shows it's on (a reaction's icon, filled in its own color).\n  none: { fill: \"data-[state=on]:text-foreground\", border: \"\" },\n}\n\n/** The background a toggle takes when on, for an element drawing it apart (the motion edition's). */\nconst toggleOnFill: Record<ToggleColor, string> = { primary: \"bg-primary/12\", neutral: \"bg-accent\", none: \"\" }\n\nconst sizes: Record<ToggleSize, string> = {\n  sm: \"h-8 min-w-8 px-2 text-xs\",\n  default: \"h-9 min-w-9 px-2.5 text-sm\",\n  lg: \"h-10 min-w-10 px-3 text-sm\",\n}\n\n/** The classes for a toggle, for ToggleGroup's items and anything that should look like one. */\nfunction toggleVariants({\n  variant = \"ghost\",\n  size = \"default\",\n  color = \"primary\",\n  className,\n}: { variant?: ToggleVariant; size?: ToggleSize; color?: ToggleColor; className?: string } = {}) {\n  return cn(\n    \"inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent/60 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    onColors[color].fill,\n    variant === \"outline\" && [\"border border-input shadow-xs\", onColors[color].border],\n    sizes[size],\n    className\n  )\n}\n\ntype ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  /** ghost (the default) is quiet until it's on; outline has a border all the time. */\n  variant?: ToggleVariant\n  size?: ToggleSize\n  /** The tint when it's on: a soft primary (the default), neutral grey for a busy toolbar, or none when what's inside shows it (a reaction's filled icon). */\n  color?: ToggleColor\n}\n\n/**\n * A button that stays pressed: Bold in a toolbar, Pin, Mute. pressed and onPressedChange control it; an icon alone\n * needs an aria-label.\n */\nfunction Toggle({ variant, size, color, className, ...props }: ToggleProps) {\n  return <TogglePrimitive.Root data-slot=\"toggle\" className={toggleVariants({ variant, size, color, className })} {...props} />\n}\n\nexport { Toggle, toggleVariants, toggleOnFill, type ToggleProps, type ToggleVariant, type ToggleSize, type ToggleColor }\n"}],"cssVars":{"theme":{"color-primary-text":"var(--primary-text, var(--primary))"},"light":{},"dark":{}}}