{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-menu-item",
  "title": "UI Command Menu Item",
  "description": "A command-palette row whose idle/hover/press/selected state is a pure function of the timeline. Leading icon + label + trailing shortcut kbd. Exports an inline CommandMenuItemRow (reused by CommandMenu) and a standalone CommandMenuItem atom; the row background, label color, and icon color are keyframed presets.",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/remocn-ui"],
  "files": [
    {
      "path": "registry/remocn-ui/command-menu-item/index.tsx",
      "content": "\"use client\";\n\nimport { mixOklch, type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport type CommandMenuItemState = \"idle\" | \"hover\" | \"press\" | \"selected\";\n\nexport interface CommandMenuItemProps {\n  state?: CommandMenuItemState;\n  style?: CommandMenuItemStyle;\n  label?: string;\n  icon?: CommandMenuIcon;\n  shortcut?: string;\n  width?: number;\n  theme?: Partial<RemocnTheme>;\n  className?: string;\n}\n\nexport type CommandMenuIcon = \"search\" | \"settings\" | \"user\" | \"file\";\n\nconst ROW_WIDTH = 360;\n\nexport interface CommandMenuItemStyle {\n  background: string;\n  labelColor: string;\n  iconColor: string;\n  scale: number;\n}\n\nexport interface CommandMenuItemStyleContext {\n  idleBg: string;\n  hoverBg: string;\n  pressBg: string;\n  selectedBg: string;\n  idleFg: string;\n  selectedFg: string;\n  idleIcon: string;\n  selectedIcon: string;\n  kbdBg: string;\n  kbdFg: string;\n  kbdBorder: string;\n}\n\nexport function commandMenuItemStyleContext(\n  theme: RemocnTheme,\n): CommandMenuItemStyleContext {\n  return {\n    idleBg: theme.popover,\n    hoverBg: theme.accent,\n    pressBg: mixOklch(theme.accent, theme.foreground, 0.08),\n    selectedBg: theme.accent,\n    idleFg: theme.popoverForeground,\n    selectedFg: theme.accentForeground,\n    idleIcon: theme.mutedForeground,\n    selectedIcon: theme.foreground,\n    kbdBg: theme.muted,\n    kbdFg: theme.mutedForeground,\n    kbdBorder: theme.border,\n  };\n}\n\nexport function commandMenuItemStyle(\n  state: CommandMenuItemState,\n  ctx: CommandMenuItemStyleContext,\n): CommandMenuItemStyle {\n  switch (state) {\n    case \"hover\":\n      return {\n        background: ctx.hoverBg,\n        labelColor: ctx.idleFg,\n        iconColor: ctx.selectedIcon,\n        scale: 1,\n      };\n    case \"press\":\n      return {\n        background: ctx.pressBg,\n        labelColor: ctx.idleFg,\n        iconColor: ctx.selectedIcon,\n        scale: 0.98,\n      };\n    case \"selected\":\n      return {\n        background: ctx.selectedBg,\n        labelColor: ctx.selectedFg,\n        iconColor: ctx.selectedIcon,\n        scale: 1,\n      };\n    default:\n      return {\n        background: ctx.idleBg,\n        labelColor: ctx.idleFg,\n        iconColor: ctx.idleIcon,\n        scale: 1,\n      };\n  }\n}\n\nconst ICON_PATHS: Record<CommandMenuIcon, string> = {\n  search: \"M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14ZM20 20l-3.5-3.5\",\n  settings:\n    \"M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM12 2v3 M12 19v3 M4.2 4.2l2.1 2.1 M17.7 17.7l2.1 2.1 M2 12h3 M19 12h3 M4.2 19.8l2.1-2.1 M17.7 6.3l2.1-2.1\",\n  user: \"M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM5 20a7 7 0 0 1 14 0\",\n  file: \"M7 3h7l4 4v14H7ZM14 3v4h4\",\n};\n\nfunction CommandMenuItemIcon({\n  icon,\n  color,\n}: {\n  icon: CommandMenuIcon;\n  color: string;\n}) {\n  return (\n    <svg width={16} height={16} viewBox=\"0 0 24 24\" fill=\"none\">\n      <path\n        d={ICON_PATHS[icon]}\n        stroke={color}\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport interface CommandMenuItemRowProps {\n  style?: CommandMenuItemStyle;\n  state?: CommandMenuItemState;\n  ctx: CommandMenuItemStyleContext;\n  label: string;\n  icon?: CommandMenuIcon;\n  shortcut?: string;\n  width: number;\n  radius: number;\n}\n\nexport function CommandMenuItemRow({\n  style,\n  state = \"idle\",\n  ctx,\n  label,\n  icon,\n  shortcut,\n  width,\n  radius,\n}: CommandMenuItemRowProps) {\n  const v = style ?? commandMenuItemStyle(state, ctx);\n  return (\n    <div\n      style={{\n        width,\n        boxSizing: \"border-box\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        gap: 12,\n        padding: \"8px 12px\",\n        borderRadius: radius,\n        transform: `scale(${v.scale})`,\n        background: v.background,\n        color: v.labelColor,\n        fontSize: 14,\n        letterSpacing: \"-0.01em\",\n      }}\n    >\n      <span\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 10,\n          minWidth: 0,\n        }}\n      >\n        {icon !== undefined && (\n          <span style={{ display: \"flex\", flexShrink: 0 }}>\n            <CommandMenuItemIcon icon={icon} color={v.iconColor} />\n          </span>\n        )}\n        <span\n          style={{\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {label}\n        </span>\n      </span>\n      {shortcut !== undefined && (\n        <kbd\n          style={{\n            flexShrink: 0,\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            gap: 2,\n            height: 20,\n            padding: \"0 6px\",\n            fontSize: 12,\n            fontFamily: \"inherit\",\n            letterSpacing: \"0.05em\",\n            color: ctx.kbdFg,\n            background: ctx.kbdBg,\n            border: `1px solid ${ctx.kbdBorder}`,\n            borderRadius: Math.max(4, radius - 4),\n          }}\n        >\n          {shortcut}\n        </kbd>\n      )}\n    </div>\n  );\n}\n\nexport function CommandMenuItem({\n  state = \"idle\",\n  style,\n  label = \"Settings\",\n  icon = \"settings\",\n  shortcut,\n  width = ROW_WIDTH,\n  theme: themeOverride,\n  className,\n}: CommandMenuItemProps) {\n  const theme = useRemocnTheme(themeOverride, \"light\");\n  const ctx = commandMenuItemStyleContext(theme);\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: \"transparent\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      <CommandMenuItemRow\n        style={style}\n        state={state}\n        ctx={ctx}\n        label={label}\n        icon={icon}\n        shortcut={shortcut}\n        width={width}\n        radius={theme.radius}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/command-menu-item.tsx"
    },
    {
      "path": "registry/remocn-ui/command-menu-item/use-command-menu-item-transition.ts",
      "content": "\"use client\";\n\nimport {\n  type CommandMenuItemState,\n  type CommandMenuItemStyle,\n  commandMenuItemStyle,\n  commandMenuItemStyleContext,\n} from \"@/components/remocn/command-menu-item\";\nimport {\n  easings,\n  mixOklch,\n  type RemocnTheme,\n  type Step,\n  useRemocnTheme,\n  useStateTransition,\n} from \"@/lib/remocn-ui\";\n\nexport const DEFAULT_DURATION = 8;\n\nexport function tweenCommandMenuItemStyle(\n  a: CommandMenuItemStyle,\n  b: CommandMenuItemStyle,\n  t: number,\n): CommandMenuItemStyle {\n  return {\n    background: mixOklch(a.background, b.background, t),\n    labelColor: mixOklch(a.labelColor, b.labelColor, t),\n    iconColor: mixOklch(a.iconColor, b.iconColor, t),\n    scale: a.scale + (b.scale - a.scale) * t,\n  };\n}\n\nexport interface CommandMenuItemTransitionOptions {\n  theme?: Partial<RemocnTheme>;\n  mode?: \"light\" | \"dark\";\n  speed?: number;\n  defaultDuration?: number;\n}\n\nexport function useCommandMenuItemTransition(\n  steps: Step<CommandMenuItemState>[],\n  opts: CommandMenuItemTransitionOptions = {},\n): CommandMenuItemStyle {\n  const {\n    theme: themeOverride,\n    mode,\n    speed = 1,\n    defaultDuration = DEFAULT_DURATION,\n  } = opts;\n  const theme = useRemocnTheme(themeOverride, mode);\n  const ctx = commandMenuItemStyleContext(theme);\n  const { from, to, progress } = useStateTransition(\n    steps,\n    \"idle\",\n    speed,\n    defaultDuration,\n  );\n  const t = easings.out(progress);\n  return tweenCommandMenuItemStyle(\n    commandMenuItemStyle(from, ctx),\n    commandMenuItemStyle(to, ctx),\n    t,\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/use-command-menu-item-transition.ts"
    }
  ],
  "type": "registry:component"
}