{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-command",
  "title": "Glass Command",
  "description": "A searchable command list that filters as you type, alone or in a launcher dialog.",
  "dependencies": [
    "@radix-ui/react-dialog",
    "clsx",
    "cmdk"
  ],
  "registryDependencies": [
    "@glassyui/glass-panel"
  ],
  "files": [
    {
      "path": "registry/glassyui/glass-command.tsx",
      "content": "'use client';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport clsx from 'clsx';\nimport { forwardRef, useRef } from 'react';\nimport type { HTMLAttributes } from 'react';\nimport { GlassPanel } from './glass-panel';\n\n/**\n * A searchable list with arrow-key navigation. Typing filters the items; Enter runs the one\n * that is highlighted. Built on cmdk, so its props (`filter`, `shouldFilter`, `loop`) apply.\n */\nexport const GlassCommand = forwardRef<\n  React.ComponentRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, forwardedRef) => (\n  <CommandPrimitive {...props} ref={forwardedRef} className={clsx('lg-command', className)} />\n));\n\nGlassCommand.displayName = 'GlassCommand';\n\nexport type GlassCommandDialogProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Root\n> & {\n  className?: string;\n  /** Names the dialog for assistive technology. It is not shown. */\n  title?: string;\n};\n\n/** A command list in a dialog near the top of the page, the way a launcher opens. */\nexport function GlassCommandDialog({\n  children,\n  className,\n  title = 'Command menu',\n  ...props\n}: GlassCommandDialogProps) {\n  // A launcher opens from anywhere, often a shortcut, so it hands focus back to whatever had it.\n  const openedFrom = useRef<HTMLElement | null>(null);\n\n  return (\n    <DialogPrimitive.Root {...props}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay className=\"lg-dialog-overlay\" />\n        <DialogPrimitive.Content\n          aria-describedby={undefined}\n          asChild\n          onCloseAutoFocus={(event) => {\n            event.preventDefault();\n            openedFrom.current?.focus();\n            openedFrom.current = null;\n          }}\n          onOpenAutoFocus={() => {\n            openedFrom.current =\n              document.activeElement instanceof HTMLElement ? document.activeElement : null;\n          }}\n        >\n          <GlassPanel\n            className={clsx('lg-dialog-content lg-command-dialog', className)}\n            elevation=\"raised\"\n            lens\n            preset=\"prominent\"\n            refraction=\"none\"\n            variant=\"panel\"\n          >\n            <DialogPrimitive.Title className=\"lg-visually-hidden\">{title}</DialogPrimitive.Title>\n            {children}\n          </GlassPanel>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport const GlassCommandInput = forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, forwardedRef) => (\n  <div className=\"lg-command-search\">\n    <svg aria-hidden viewBox=\"0 0 20 20\">\n      <circle cx=\"9\" cy=\"9\" r=\"5.25\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.7\" />\n      <path\n        d=\"m13 13 3.5 3.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1.7\"\n      />\n    </svg>\n    <CommandPrimitive.Input\n      {...props}\n      ref={forwardedRef}\n      className={clsx('lg-command-input', className)}\n    />\n  </div>\n));\n\nGlassCommandInput.displayName = 'GlassCommandInput';\n\nexport const GlassCommandList = forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, forwardedRef) => (\n  <CommandPrimitive.List\n    {...props}\n    ref={forwardedRef}\n    className={clsx('lg-command-list', className)}\n  />\n));\n\nGlassCommandList.displayName = 'GlassCommandList';\n\nexport const GlassCommandEmpty = forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, forwardedRef) => (\n  <CommandPrimitive.Empty\n    {...props}\n    ref={forwardedRef}\n    className={clsx('lg-command-empty', className)}\n  />\n));\n\nGlassCommandEmpty.displayName = 'GlassCommandEmpty';\n\nexport const GlassCommandGroup = forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, forwardedRef) => (\n  <CommandPrimitive.Group\n    {...props}\n    ref={forwardedRef}\n    className={clsx('lg-command-group', className)}\n  />\n));\n\nGlassCommandGroup.displayName = 'GlassCommandGroup';\n\nexport const GlassCommandItem = forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, forwardedRef) => (\n  <CommandPrimitive.Item\n    {...props}\n    ref={forwardedRef}\n    className={clsx('lg-command-item', className)}\n  />\n));\n\nGlassCommandItem.displayName = 'GlassCommandItem';\n\nexport type GlassCommandSeparatorProps = HTMLAttributes<HTMLDivElement> & {\n  /** Keeps the line while a search is typed. By default it goes, as the groups it divides fold. */\n  alwaysRender?: boolean;\n};\n\n/**\n * A divider between groups. It is decorative and hidden from assistive technology, because a\n * listbox may own only options and groups.\n */\nexport const GlassCommandSeparator = forwardRef<HTMLDivElement, GlassCommandSeparatorProps>(\n  ({ alwaysRender = false, className, ...props }, forwardedRef) => {\n    const idle = useCommandState((state) => !state.search);\n\n    if (!alwaysRender && !idle) return null;\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        aria-hidden\n        className={clsx('lg-command-separator', className)}\n      />\n    );\n  },\n);\n\nGlassCommandSeparator.displayName = 'GlassCommandSeparator';\n\n/** A shortcut hint, pushed to the end of the item. Put `GlassKbd` keys inside. */\nexport const GlassCommandShortcut = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  ({ className, ...props }, forwardedRef) => (\n    <span {...props} ref={forwardedRef} className={clsx('lg-command-shortcut', className)} />\n  ),\n);\n\nGlassCommandShortcut.displayName = 'GlassCommandShortcut';\n",
      "type": "registry:ui",
      "target": "components/glassyui/glass-command.tsx"
    }
  ],
  "meta": {
    "sourceModules": [
      "command"
    ]
  },
  "type": "registry:ui"
}