{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu-item",
  "title": "UI Dropdown Menu Item",
  "description": "A dropdown menu action row whose idle/hover/press state is a pure function of the timeline; the row background and label color are keyframed presets. Composed inside the DropdownMenu panel.",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/remocn-ui"],
  "files": [
    {
      "path": "registry/remocn-ui/dropdown-menu-item/index.tsx",
      "content": "\"use client\";\n\nimport { mixOklch, type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport type DropdownMenuItemState = \"idle\" | \"hover\" | \"press\";\n\nexport interface DropdownMenuItemStyle {\n  background: string;\n  labelColor: string;\n  scale: number;\n}\n\nexport interface DropdownMenuItemStyleContext {\n  idleBg: string;\n  hoverBg: string;\n  pressBg: string;\n  idleFg: string;\n}\n\nexport function dropdownMenuItemStyleContext(\n  theme: RemocnTheme,\n): DropdownMenuItemStyleContext {\n  return {\n    idleBg: theme.popover,\n    hoverBg: theme.accent,\n    pressBg: mixOklch(theme.accent, theme.foreground, 0.08),\n    idleFg: theme.popoverForeground,\n  };\n}\n\nexport function dropdownMenuItemStyle(\n  state: DropdownMenuItemState,\n  ctx: DropdownMenuItemStyleContext,\n): DropdownMenuItemStyle {\n  switch (state) {\n    case \"hover\":\n      return { background: ctx.hoverBg, labelColor: ctx.idleFg, scale: 1 };\n    case \"press\":\n      return { background: ctx.pressBg, labelColor: ctx.idleFg, scale: 0.98 };\n    default:\n      return { background: ctx.idleBg, labelColor: ctx.idleFg, scale: 1 };\n  }\n}\n\nconst ROW_WIDTH = 240;\n\nexport interface DropdownMenuItemRowProps {\n  style?: DropdownMenuItemStyle;\n  state?: DropdownMenuItemState;\n  label?: string;\n  width?: number;\n  theme?: Partial<RemocnTheme>;\n}\n\nexport function DropdownMenuItemRow({\n  style,\n  state = \"idle\",\n  label = \"Profile\",\n  width = ROW_WIDTH,\n  theme: themeOverride,\n}: DropdownMenuItemRowProps) {\n  const theme = useRemocnTheme(themeOverride, \"light\");\n  const ctx = dropdownMenuItemStyleContext(theme);\n  const v = style ?? dropdownMenuItemStyle(state, ctx);\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        width,\n        padding: \"8px 12px\",\n        borderRadius: theme.radius,\n        background: v.background,\n        color: v.labelColor,\n        transform: `scale(${v.scale})`,\n        fontSize: 14,\n        letterSpacing: \"-0.01em\",\n        boxSizing: \"border-box\",\n      }}\n    >\n      <span>{label}</span>\n    </div>\n  );\n}\n\nexport interface DropdownMenuItemProps extends DropdownMenuItemRowProps {\n  className?: string;\n}\n\nexport function DropdownMenuItem({\n  style,\n  state = \"idle\",\n  label = \"Profile\",\n  width = ROW_WIDTH,\n  theme: themeOverride,\n  className,\n}: DropdownMenuItemProps) {\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      <DropdownMenuItemRow\n        style={style}\n        state={state}\n        label={label}\n        width={width}\n        theme={themeOverride}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/dropdown-menu-item.tsx"
    },
    {
      "path": "registry/remocn-ui/dropdown-menu-item/use-dropdown-menu-item-transition.ts",
      "content": "\"use client\";\n\nimport {\n  type DropdownMenuItemState,\n  type DropdownMenuItemStyle,\n  dropdownMenuItemStyle,\n  dropdownMenuItemStyleContext,\n} from \"@/components/remocn/dropdown-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 tweenDropdownMenuItemStyle(\n  a: DropdownMenuItemStyle,\n  b: DropdownMenuItemStyle,\n  t: number,\n): DropdownMenuItemStyle {\n  return {\n    scale: a.scale + (b.scale - a.scale) * t,\n    background: mixOklch(a.background, b.background, t),\n    labelColor: mixOklch(a.labelColor, b.labelColor, t),\n  };\n}\n\nexport interface DropdownMenuItemTransitionOptions {\n  theme?: Partial<RemocnTheme>;\n  mode?: \"light\" | \"dark\";\n  primary?: string;\n  speed?: number;\n  defaultDuration?: number;\n}\n\nexport function useDropdownMenuItemTransition(\n  steps: Step<DropdownMenuItemState>[],\n  opts: DropdownMenuItemTransitionOptions = {},\n): DropdownMenuItemStyle {\n  const {\n    theme: themeOverride,\n    mode,\n    primary,\n    speed = 1,\n    defaultDuration = DEFAULT_DURATION,\n  } = opts;\n  const theme = useRemocnTheme(\n    { ...themeOverride, ...(primary ? { primary } : {}) },\n    mode,\n  );\n  const ctx = dropdownMenuItemStyleContext(theme);\n  const { from, to, progress } = useStateTransition(\n    steps,\n    \"idle\",\n    speed,\n    defaultDuration,\n  );\n  const t = easings.out(progress);\n  return tweenDropdownMenuItemStyle(\n    dropdownMenuItemStyle(from, ctx),\n    dropdownMenuItemStyle(to, ctx),\n    t,\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/use-dropdown-menu-item-transition.ts"
    }
  ],
  "type": "registry:component"
}