{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-107",
  "type": "registry:component",
  "title": "Comp 107",
  "description": "Comp 107",
  "files": [
    {
      "path": "registry/ui-basic/comp-107.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport {\n\tAlignCenterIcon,\n\tAlignJustifyIcon,\n\tAlignLeftIcon,\n\tAlignRightIcon,\n} from \"lucide-react\";\n\nexport default function Component() {\n\tconst [value, setValue] = useState<string>(\"center\");\n\n\treturn (\n\t\t<ToggleGroup\n\t\t\tclassName=\"divide-background inline-flex divide-x\"\n\t\t\ttype=\"single\"\n\t\t\tvalue={value}\n\t\t\tonValueChange={(value) => {\n\t\t\t\tif (value) setValue(value);\n\t\t\t}}\n\t\t>\n\t\t\t<ToggleGroupItem\n\t\t\t\tclassName=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n\t\t\t\taria-label=\"Align Left\"\n\t\t\t\tvalue=\"left\"\n\t\t\t>\n\t\t\t\t<AlignLeftIcon size={16} aria-hidden=\"true\" />\n\t\t\t</ToggleGroupItem>\n\t\t\t<ToggleGroupItem\n\t\t\t\tclassName=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n\t\t\t\taria-label=\"Align Center\"\n\t\t\t\tvalue=\"center\"\n\t\t\t>\n\t\t\t\t<AlignCenterIcon size={16} aria-hidden=\"true\" />\n\t\t\t</ToggleGroupItem>\n\t\t\t<ToggleGroupItem\n\t\t\t\tclassName=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n\t\t\t\taria-label=\"Align Right\"\n\t\t\t\tvalue=\"right\"\n\t\t\t>\n\t\t\t\t<AlignRightIcon size={16} aria-hidden=\"true\" />\n\t\t\t</ToggleGroupItem>\n\t\t\t<ToggleGroupItem\n\t\t\t\tclassName=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n\t\t\t\taria-label=\"Align Justify\"\n\t\t\t\tvalue=\"justify\"\n\t\t\t>\n\t\t\t\t<AlignJustifyIcon size={16} aria-hidden=\"true\" />\n\t\t\t</ToggleGroupItem>\n\t\t</ToggleGroup>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/toggle-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { toggleVariants } from \"@/components/ui/toggle\";\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nconst ToggleGroupContext = React.createContext<\n\tVariantProps<typeof toggleVariants>\n>({\n\tsize: \"default\",\n\tvariant: \"default\",\n});\n\nfunction ToggleGroup({\n\tclassName,\n\tvariant,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n\tVariantProps<typeof toggleVariants>) {\n\treturn (\n\t\t<ToggleGroupPrimitive.Root\n\t\t\tdata-slot=\"toggle-group\"\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-2xs\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ToggleGroupContext.Provider value={{ variant, size }}>\n\t\t\t\t{children}\n\t\t\t</ToggleGroupContext.Provider>\n\t\t</ToggleGroupPrimitive.Root>\n\t);\n}\n\nfunction ToggleGroupItem({\n\tclassName,\n\tchildren,\n\tvariant,\n\tsize,\n\t...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n\tVariantProps<typeof toggleVariants>) {\n\tconst context = React.useContext(ToggleGroupContext);\n\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tdata-slot=\"toggle-group-item\"\n\t\t\tdata-variant={context.variant || variant}\n\t\t\tdata-size={context.size || size}\n\t\t\tclassName={cn(\n\t\t\t\ttoggleVariants({\n\t\t\t\t\tvariant: context.variant || variant,\n\t\t\t\t\tsize: context.size || size,\n\t\t\t\t}),\n\t\t\t\t\"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</ToggleGroupPrimitive.Item>\n\t);\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/toggle.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst toggleVariants = cva(\n\t\"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-transparent\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-10 px-3\",\n\t\t\t\tsm: \"h-9 px-2.5\",\n\t\t\t\tlg: \"h-11 px-5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t}\n);\n\nconst Toggle = React.forwardRef<\n\tReact.ElementRef<typeof TogglePrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n\t\tVariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n\t<TogglePrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(toggleVariants({ variant, size, className }))}\n\t\t{...props}\n\t/>\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}