{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-command",
  "title": "Glass Command",
  "description": "Glass Command with five variants: clear, frosted, subtle, liquid, and liquid-refract",
  "registryDependencies": [
    "@glasscn/utils",
    "@glasscn/command",
    "@glasscn/glass-variants",
    "@glasscn/liquid-glass"
  ],
  "files": [
    {
      "path": "components/ui/glasscn/glass-command.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { type FrostGlassVariant, type FrostGlassVariantProp, glassVariantStyles } from \"@/lib/glass-variants\";\nimport { cn } from \"@/lib/utils\";\n\nimport { Command, CommandDialog, CommandInput } from \"../command\";\nimport { LiquidGlass } from \"./liquid-glass\";\n\nconst GlassCommandVariantContext = React.createContext<FrostGlassVariant>(\"liquid-refract\");\n\ntype GlassCommandProps = React.ComponentProps<typeof Command> & FrostGlassVariantProp;\n\ntype GlassCommandDialogProps = React.ComponentProps<typeof CommandDialog> & FrostGlassVariantProp;\n\nconst commandSurfaceStyles =\n  \"border border-white/35 bg-white/75 text-foreground shadow-2xl ring-1 ring-white/25 dark:border-white/12 dark:bg-black/70 dark:ring-white/10\";\n\nconst commandRefractSurfaceStyles =\n  \"border-white/40 bg-white/[0.34] shadow-[0_18px_50px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.65),inset_0_-18px_28px_-20px_rgba(255,255,255,0.85)] dark:border-white/15 dark:bg-black/55 dark:shadow-[0_24px_60px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-18px_28px_-20px_rgba(180,210,255,0.35)]\";\n\nconst commandStateStyles = [\n  \"[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:border-white/30\",\n  \"[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:bg-white/50\",\n  \"dark:[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:border-white/10\",\n  \"dark:[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:bg-black/35\",\n  \"[&_[data-slot=command-input]]:placeholder:text-help-foreground\",\n  \"[&_[data-slot=command-item][data-selected=true]]:bg-white/70\",\n  \"[&_[data-slot=command-item][data-selected=true]]:text-black\",\n  \"dark:[&_[data-slot=command-item][data-selected=true]]:bg-white/12\",\n  \"dark:[&_[data-slot=command-item][data-selected=true]]:text-white\",\n  \"[&_[data-slot=command-separator]]:bg-white/25\",\n  \"dark:[&_[data-slot=command-separator]]:bg-white/10\",\n].join(\" \");\n\nfunction GlassCommand({ className, glassVariant = \"liquid-refract\", ...props }: GlassCommandProps) {\n  if (glassVariant === \"liquid-refract\") {\n    return (\n      <GlassCommandVariantContext.Provider value={glassVariant}>\n        <LiquidGlass className={cn(\"rounded-xl\", commandRefractSurfaceStyles, commandStateStyles, className)}>\n          <Command\n            data-slot=\"glass-command\"\n            data-glass-variant={glassVariant}\n            className=\"border-0 bg-transparent shadow-none ring-0\"\n            {...props}\n          />\n        </LiquidGlass>\n      </GlassCommandVariantContext.Provider>\n    );\n  }\n\n  const command = (\n    <Command\n      data-slot=\"glass-command\"\n      data-glass-variant={glassVariant}\n      className={cn(glassVariantStyles[glassVariant], commandSurfaceStyles, commandStateStyles, className)}\n      {...props}\n    />\n  );\n\n  return <GlassCommandVariantContext.Provider value={glassVariant}>{command}</GlassCommandVariantContext.Provider>;\n}\n\nfunction GlassCommandDialog({\n  className,\n  children,\n  glassVariant = \"liquid-refract\",\n  ...props\n}: GlassCommandDialogProps) {\n  if (glassVariant === \"liquid-refract\") {\n    return (\n      <GlassCommandVariantContext.Provider value={glassVariant}>\n        <CommandDialog\n          data-slot=\"glass-command-dialog\"\n          className={cn(\"border-0 bg-transparent p-0 shadow-none ring-0\", className)}\n          {...props}\n        >\n          <LiquidGlass className={cn(\"rounded-xl\", commandRefractSurfaceStyles, commandStateStyles)}>\n            <div className=\"overflow-hidden rounded-xl\">{children}</div>\n          </LiquidGlass>\n        </CommandDialog>\n      </GlassCommandVariantContext.Provider>\n    );\n  }\n\n  const content = <div className={cn(\"overflow-hidden rounded-xl\", commandStateStyles)}>{children}</div>;\n\n  return (\n    <GlassCommandVariantContext.Provider value={glassVariant}>\n      <CommandDialog\n        data-slot=\"glass-command-dialog\"\n        className={cn(glassVariantStyles[glassVariant], commandSurfaceStyles, className)}\n        {...props}\n      >\n        {content}\n      </CommandDialog>\n    </GlassCommandVariantContext.Provider>\n  );\n}\n\nfunction GlassCommandInput({ className, ...props }: React.ComponentProps<typeof CommandInput>) {\n  const variant = React.useContext(GlassCommandVariantContext);\n\n  return (\n    <CommandInput\n      className={cn(variant === \"liquid-refract\" && \"placeholder:text-help-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { GlassCommand, GlassCommandDialog, GlassCommandInput };\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "theme": {
      "--color-help-foreground": "var(--help-foreground)"
    },
    "light": {
      "--help-foreground": "oklch(0.38 0 0)"
    },
    "dark": {
      "--help-foreground": "oklch(0.82 0 0)"
    }
  },
  "type": "registry:component"
}