{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "type": "registry:ui",
  "title": "Item",
  "description": "List row with media, content, and trailing actions.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json",
    "https://control-ui.dev/r/separator.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/item-knobs.ts",
      "target": "@components/control-ui/knob-contracts/item-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/item.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const itemKnobs = [\n  \"--cui-item-radius\",\n  \"--cui-item-hover-background\",\n  \"--cui-item-hover-border-color\",\n  \"--cui-item-border-width\",\n  \"--cui-item-active-scale\",\n] as const;\nexport type ItemKnobStyle = Partial<Record<(typeof itemKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/item.css",
      "target": "@components/control-ui/styles/recipes/item.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"item\"][data-slot=\"root\"]) {\n    --cui-item-radius: var(--radius-lg);\n    --cui-item-hover-background: transparent;\n    --cui-item-hover-border-color: var(--_item-border-color);\n    --cui-item-border-width: 0px;\n    --cui-item-active-scale: 1;\n    --_item-background: transparent;\n    --_item-border-color: transparent;\n    outline: var(--cui-item-border-width) solid var(--_item-border-color);\n    outline-offset: calc(-1 * var(--cui-item-border-width));\n    border-radius: var(--cui-item-radius);\n    background: var(--_item-background);\n    box-shadow: none;\n    color: var(--foreground);\n    transition-property: background-color, box-shadow, color, outline-color, scale;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"root\"][data-variant=\"outline\"]) {\n    --_item-border-color: var(--border);\n    --cui-item-border-width: 1px;\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"root\"][data-variant=\"muted\"]) {\n    --_item-background: oklch(from var(--muted) l c h / 0.5);\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"root\"]:is(a, button, [href], [role=\"button\"]):hover) {\n    outline-color: var(--cui-item-hover-border-color);\n    background: var(--cui-item-hover-background);\n    box-shadow: none;\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"root\"]:is(a, button, [href], [role=\"button\"]):active) {\n    scale: var(--cui-item-active-scale);\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"footer\"]) {\n    font-size: var(--text-caption);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"description\"]) {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"title\"]) {\n    font-size: var(--text-sm);\n    font-weight: var(--font-weight-medium);\n    line-height: 1;\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"item\"][data-slot=\"media\"]) {\n    color: var(--muted-foreground);\n  }\n}\n\n@property --cui-item-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-item-hover-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-item-hover-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-item-border-width {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-item-active-scale {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 1;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/item.tsx",
      "target": "@components/control-ui/ui/item.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport type { RenderProp } from \"@/components/control-ui/control-props\";\nimport type { ItemKnobStyle } from \"@/components/control-ui/knob-contracts/item-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { Separator } from \"@/components/control-ui/ui/separator\";\n\nexport const itemVariants = [\"default\", \"outline\", \"muted\"] as const;\n\nexport type ItemVariant = (typeof itemVariants)[number];\n\nexport type ItemProps = Omit<\n  ComponentProps<\"div\"> & {\n    variant?: ItemVariant;\n    render?: RenderProp<ComponentProps<\"div\">>;\n  },\n  \"style\"\n> & { style?: CSSProperties & ItemKnobStyle };\n\nexport type ItemDescriptionProps = Omit<ComponentProps<\"p\">, \"style\"> & { style?: CSSProperties & ItemKnobStyle };\n\nexport type ItemFooterProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & ItemKnobStyle };\n\nexport type ItemMediaProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & ItemKnobStyle };\n\nexport type ItemTitleProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & ItemKnobStyle };\n\nexport type ItemGroupProps = ComponentProps<\"div\"> & { style?: CSSProperties & ItemKnobStyle };\n\nexport type ItemSeparatorProps = ComponentProps<\"div\">;\n\nexport function ItemGroup({ className, ...props }: ItemGroupProps) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: Item may render as a link or button, so a ul would require invalid wrappers.\n    <div\n      role=\"list\"\n      data-control-ui=\"item\"\n      data-control-family=\"item\"\n      data-slot=\"group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n  return <Separator data-control-ui=\"item\" data-slot=\"separator\" orientation=\"horizontal\" className={cn(\"my-0\", className)} {...props} />;\n}\n\nexport function Item({ variant = \"default\", render, className, children, ...props }: ItemProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: {\n      ...props,\n      \"data-control-ui\": \"item\",\n      \"data-control-family\": \"item\",\n      \"data-slot\": \"root\",\n      \"data-variant\": variant,\n      className: cn(\"flex items-center gap-3 p-3 [&[href]]:cursor-pointer\", className),\n      children,\n    },\n  });\n}\n\nexport function ItemMedia({ className, ...props }: ItemMediaProps) {\n  return (\n    <div\n      data-control-ui=\"item\"\n      data-control-family=\"item\"\n      data-slot=\"media\"\n      className={cn(\"flex shrink-0 items-center justify-center self-start [&>svg]:size-5 [&>svg]:shrink-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemContent({ className, ...props }: ComponentProps<\"div\"> & { style?: CSSProperties & ItemKnobStyle }) {\n  return (\n    <div\n      data-control-ui=\"item\"\n      data-control-family=\"item\"\n      data-slot=\"content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemTitle({ className, ...props }: ItemTitleProps) {\n  return (\n    <div\n      data-control-ui=\"item\"\n      data-control-family=\"item\"\n      data-slot=\"title\"\n      className={cn(\"flex w-fit items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemDescription({ className, ...props }: ItemDescriptionProps) {\n  return (\n    <p data-control-ui=\"item\" data-control-family=\"item\" data-slot=\"description\" className={cn(\"line-clamp-2\", className)} {...props} />\n  );\n}\n\n// never shrinks, so long content column cannot squeeze actions\nexport function ItemActions({ className, ...props }: ComponentProps<\"div\"> & { style?: CSSProperties & ItemKnobStyle }) {\n  return (\n    <div\n      data-control-ui=\"item\"\n      data-control-family=\"item\"\n      data-slot=\"actions\"\n      className={cn(\"flex shrink-0 items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemHeader({ className, ...props }: ComponentProps<\"div\"> & { style?: CSSProperties & ItemKnobStyle }) {\n  return (\n    <div\n      data-control-ui=\"item\"\n      data-control-family=\"item\"\n      data-slot=\"header\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemFooter({ className, ...props }: ItemFooterProps) {\n  return (\n    <div\n      data-control-ui=\"item\"\n      data-control-family=\"item\"\n      data-slot=\"footer\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/item.css\"": {}
  },
  "meta": {}
}