{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toggle-group","type":"registry:ui","title":"Toggle Group","description":"A set of toggles: one at a time, like text alignment, or any of them, like Bold, Italic, Underline.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/toggle.json"],"files":[{"path":"registry/dashral/toggle-group.tsx","type":"registry:file","target":"components/dashral/toggle-group.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants, type ToggleColor, type ToggleSize, type ToggleVariant } from \"./toggle\"\n\ntype ToggleGroupItem = {\n  value: string\n  label?: React.ReactNode\n  icon?: React.ReactNode\n  /** Needed when there's only an icon. */\n  \"aria-label\"?: string\n  disabled?: boolean\n}\n\ntype ToggleGroupOwnProps = {\n  /** The toggles: { value, label, icon, aria-label, disabled }. */\n  items: ToggleGroupItem[]\n  variant?: ToggleVariant\n  size?: ToggleSize\n  /** The tint of a pressed toggle: neutral grey (the default, as a segmented control), or a soft primary. */\n  color?: ToggleColor\n  /** Joined into one bar, as a toolbar's Bold / Italic / Underline; otherwise they stand apart. */\n  attached?: boolean\n  className?: string\n  classNames?: { item?: string }\n}\n\n/** Single: one pressed at a time (alignment). Multiple: any of them (Bold, Italic, Underline). */\ntype ToggleGroupProps =\n  | (ToggleGroupOwnProps & Omit<React.ComponentProps<typeof ToggleGroupPrimitive.Root>, \"type\" | \"children\" | \"value\" | \"defaultValue\" | \"onValueChange\"> & { type: \"single\"; value?: string; defaultValue?: string; onValueChange?: (value: string) => void })\n  | (ToggleGroupOwnProps & Omit<React.ComponentProps<typeof ToggleGroupPrimitive.Root>, \"type\" | \"children\" | \"value\" | \"defaultValue\" | \"onValueChange\"> & { type: \"multiple\"; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void })\n\n/**\n * A set of toggles in one tag: type=\"single\" for one at a time (text alignment, a view), \"multiple\" for any of them\n * (Bold, Italic, Underline). attached joins them into one bar. The arrow keys move between them.\n */\nfunction ToggleGroup({ items, variant = \"ghost\", size, color = \"neutral\", attached = false, className, classNames, ...props }: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      className={cn(\n        \"inline-flex w-fit items-center\",\n        attached ? (variant === \"outline\" ? \"rounded-md border border-input shadow-xs\" : \"rounded-md\") : \"gap-1\",\n        className\n      )}\n      {...(props as React.ComponentProps<typeof ToggleGroupPrimitive.Root>)}\n    >\n      {items.map((item) => (\n        <ToggleGroupPrimitive.Item\n          key={item.value}\n          value={item.value}\n          disabled={item.disabled}\n          aria-label={item[\"aria-label\"]}\n          data-slot=\"toggle-group-item\"\n          className={toggleVariants({\n            variant: attached ? \"ghost\" : variant,\n            size,\n            color,\n            className: cn(attached && \"rounded-none first:rounded-s-md last:rounded-e-md\", attached && variant === \"outline\" && \"border-s border-input first:border-s-0\", classNames?.item),\n          })}\n        >\n          {item.icon}\n          {item.label}\n        </ToggleGroupPrimitive.Item>\n      ))}\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nexport { ToggleGroup, type ToggleGroupProps, type ToggleGroupItem }\n"}]}