{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "type": "registry:block",
  "title": "Combobox",
  "description": "Combobox with Crafter styling. Explore the live example and use the source in your project.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "class-variance-authority@^0.7.1",
    "cn@^0.2.6",
    "lucide-react@^1.42.0"
  ],
  "files": [
    {
      "path": "components/ui/button.tsx",
      "type": "registry:ui",
      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-[var(--control-height,2rem)] gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
    },
    {
      "path": "components/ui/combobox.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport { cn } from \"cn\";\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from \"@/components/ui/input-group\";\nconst Combobox = ComboboxPrimitive.Root;\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n    return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props}/>;\n}\nfunction ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {\n    return (<ComboboxPrimitive.Trigger data-slot=\"combobox-trigger\" className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)} {...props}>\n      {children}\n      <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\"/>\n    </ComboboxPrimitive.Trigger>);\n}\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n    return (<ComboboxPrimitive.Clear data-slot=\"combobox-clear\" render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\"/>} className={cn(className)} {...props}>\n      <XIcon className=\"pointer-events-none\"/>\n    </ComboboxPrimitive.Clear>);\n}\nfunction ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }: ComboboxPrimitive.Input.Props & {\n    showTrigger?: boolean;\n    showClear?: boolean;\n}) {\n    return (<InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled}/>} {...props}/>\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (<InputGroupButton size=\"icon-xs\" variant=\"ghost\" render={<ComboboxTrigger />} data-slot=\"input-group-button\" className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\" disabled={disabled}/>)}\n        {showClear && <ComboboxClear disabled={disabled}/>}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>);\n}\nfunction ComboboxContent({ className, side = \"bottom\", sideOffset = 6, align = \"start\", alignOffset = 0, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\">) {\n    return (<ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner side={side} sideOffset={sideOffset} align={align} alignOffset={alignOffset} anchor={anchor} className=\"isolate z-50\">\n        <ComboboxPrimitive.Popup data-slot=\"combobox-content\" data-chips={!!anchor} className={cn(\"group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", className)} {...props}/>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>);\n}\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n    return (<ComboboxPrimitive.List data-slot=\"combobox-list\" className={cn(\"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\", className)} {...props}/>);\n}\nfunction ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\n    return (<ComboboxPrimitive.Item data-slot=\"combobox-item\" className={cn(\"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\", className)} {...props}>\n      {children}\n      <ComboboxPrimitive.ItemIndicator render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\"/>}>\n        <CheckIcon className=\"pointer-events-none\"/>\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>);\n}\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n    return (<ComboboxPrimitive.Group data-slot=\"combobox-group\" className={cn(className)} {...props}/>);\n}\nfunction ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {\n    return (<ComboboxPrimitive.GroupLabel data-slot=\"combobox-label\" className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)} {...props}/>);\n}\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n    return (<ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props}/>);\n}\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n    return (<ComboboxPrimitive.Empty data-slot=\"combobox-empty\" className={cn(\"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\", className)} {...props}/>);\n}\nfunction ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {\n    return (<ComboboxPrimitive.Separator data-slot=\"combobox-separator\" className={cn(\"-mx-1 my-1 h-px bg-border\", className)} {...props}/>);\n}\nfunction ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {\n    return (<ComboboxPrimitive.Chips data-slot=\"combobox-chips\" className={cn(\"flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/30 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\", className)} {...props}/>);\n}\nfunction ComboboxChip({ className, children, showRemove = true, ...props }: ComboboxPrimitive.Chip.Props & {\n    showRemove?: boolean;\n}) {\n    return (<ComboboxPrimitive.Chip data-slot=\"combobox-chip\" className={cn(\"flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\", className)} {...props}>\n      {children}\n      {showRemove && (<ComboboxPrimitive.ChipRemove render={<Button variant=\"ghost\" size=\"icon-xs\"/>} className=\"-ml-1 opacity-50 hover:opacity-100\" data-slot=\"combobox-chip-remove\">\n          <XIcon className=\"pointer-events-none\"/>\n        </ComboboxPrimitive.ChipRemove>)}\n    </ComboboxPrimitive.Chip>);\n}\nfunction ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {\n    return (<ComboboxPrimitive.Input data-slot=\"combobox-chip-input\" className={cn(\"min-w-16 flex-1 outline-none\", className)} {...props}/>);\n}\nfunction useComboboxAnchor() {\n    return React.useRef<HTMLDivElement | null>(null);\n}\nexport { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };\n"
    },
    {
      "path": "components/ui/input-group.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"cn\";\nimport type * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (<div data-slot=\"input-group\" role=\"group\" className={cn(\"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\", className)} {...props}/>);\n}\nconst inputGroupAddonVariants = cva(\"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\", {\n    variants: {\n        align: {\n            \"inline-start\": \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n            \"inline-end\": \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n            \"block-start\": \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n            \"block-end\": \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n        },\n    },\n    defaultVariants: {\n        align: \"inline-start\",\n    },\n});\nfunction InputGroupAddon({ className, align = \"inline-start\", ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n    return (<div role=\"group\" data-slot=\"input-group-addon\" data-align={align} className={cn(inputGroupAddonVariants({ align }), className)} onClick={(e) => {\n            if ((e.target as HTMLElement).closest(\"button\")) {\n                return;\n            }\n            e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n        }} {...props}/>);\n}\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n    variants: {\n        size: {\n            xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n            sm: \"\",\n            \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n            \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n        },\n    },\n    defaultVariants: {\n        size: \"xs\",\n    },\n});\nfunction InputGroupButton({ className, type = \"button\", variant = \"ghost\", size = \"xs\", ...props }: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> & VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\";\n}) {\n    return (<Button type={type} data-size={size} variant={variant} className={cn(inputGroupButtonVariants({ size }), className)} {...props}/>);\n}\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n    return (<span className={cn(\"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\", className)} {...props}/>);\n}\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<\"input\">) {\n    return (<Input data-slot=\"input-group-control\" className={cn(\"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\", className)} {...props}/>);\n}\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n    return (<Textarea data-slot=\"input-group-control\" className={cn(\"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\", className)} {...props}/>);\n}\nexport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };\n"
    },
    {
      "path": "components/ui/input.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\nimport { cn } from \"cn\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
    },
    {
      "path": "components/ui/textarea.tsx",
      "type": "registry:ui",
      "content": "import { cn } from \"cn\";\nimport type * as React from \"react\";\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n    return (<textarea data-slot=\"textarea\" className={cn(\"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\", className)} {...props}/>);\n}\nexport { Textarea };\n"
    }
  ],
  "cssVars": {
    "light": {
      "background": "#ffffff",
      "foreground": "#141414",
      "card": "#ffffff",
      "card-foreground": "#141414",
      "popover": "#ffffff",
      "popover-foreground": "#141414",
      "secondary": "#f5f5f5",
      "secondary-foreground": "#141414",
      "muted": "#f5f5f5",
      "muted-foreground": "#6b6b6b",
      "accent": "#f0f0f0",
      "accent-foreground": "#141414",
      "border": "#e6e6e6",
      "input": "#cccccc",
      "destructive": "#b91c1c",
      "syntax-text": "#242424",
      "syntax-keyword": "#754399",
      "syntax-string": "#326348",
      "syntax-function": "#315d89",
      "syntax-number": "#86551f",
      "syntax-comment": "#6b6b6b",
      "syntax-punctuation": "#616161",
      "syntax-type": "#7c464c",
      "syntax-background": "#f8f8f8",
      "sidebar": "#f5f5f5",
      "sidebar-foreground": "#141414",
      "sidebar-primary": "#141414",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#f0f0f0",
      "sidebar-accent-foreground": "#141414",
      "sidebar-border": "#e6e6e6",
      "sidebar-ring": "#141414",
      "chart-1": "#141414",
      "chart-2": "#525252",
      "chart-3": "#737373",
      "chart-4": "#a3a3a3",
      "chart-5": "#d4d4d4",
      "primary": "#141414",
      "primary-foreground": "#ffffff",
      "ring": "#141414",
      "radius": "0rem",
      "font-sans": "ui-sans-serif, system-ui, sans-serif",
      "control-height": "2rem"
    },
    "dark": {
      "background": "#141414",
      "foreground": "#fafafa",
      "card": "#1c1c1c",
      "card-foreground": "#fafafa",
      "popover": "#1c1c1c",
      "popover-foreground": "#fafafa",
      "secondary": "#262626",
      "secondary-foreground": "#fafafa",
      "muted": "#262626",
      "muted-foreground": "#a3a3a3",
      "accent": "#303030",
      "accent-foreground": "#fafafa",
      "border": "#404040",
      "input": "#404040",
      "destructive": "#ff9d9d",
      "syntax-text": "#ededed",
      "syntax-keyword": "#c6a3df",
      "syntax-string": "#98c4a4",
      "syntax-function": "#9cbedf",
      "syntax-number": "#d7b27d",
      "syntax-comment": "#a3a3a3",
      "syntax-punctuation": "#b0b0b0",
      "syntax-type": "#dda2aa",
      "syntax-background": "#1b1b1b",
      "sidebar": "#262626",
      "sidebar-foreground": "#fafafa",
      "sidebar-primary": "#fafafa",
      "sidebar-primary-foreground": "#141414",
      "sidebar-accent": "#303030",
      "sidebar-accent-foreground": "#fafafa",
      "sidebar-border": "#404040",
      "sidebar-ring": "#fafafa",
      "chart-1": "#fafafa",
      "chart-2": "#d4d4d4",
      "chart-3": "#a3a3a3",
      "chart-4": "#737373",
      "chart-5": "#525252",
      "primary": "#fafafa",
      "primary-foreground": "#141414",
      "ring": "#fafafa",
      "radius": "0rem",
      "font-sans": "ui-sans-serif, system-ui, sans-serif",
      "control-height": "2rem"
    }
  }
}