{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "type": "registry:ui",
  "title": "Item",
  "description": "Generic list/row primitive with leading media, title, description, and trailing action slots.",
  "dependencies": [
    "@radix-ui/react-slot",
    "@saasflare/ui",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/item.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Item primitive — versatile list item component with icon, label,\n * description, and action slots. Supports multiple variants (default, link, button)\n * and grouped layouts with separators. Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/item\n * @layer core\n *\n * @component\n * @example\n * import { ItemGroup, Item, ItemContent, ItemTitle } from '@saasflare/ui';\n *\n * <ItemGroup>\n *   <Item>\n *     <ItemContent>\n *       <ItemTitle>Settings</ItemTitle>\n *     </ItemContent>\n *   </Item>\n * </ItemGroup>\n */\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as Slot from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { Separator } from \"@saasflare/ui\"\n\n/**\n * Vertical container that groups related {@link Item} rows into a list.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemGroup>\n *   <Item>…</Item>\n *   <ItemSeparator />\n *   <Item>…</Item>\n * </ItemGroup>\n */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Horizontal divider between {@link Item} rows inside an {@link ItemGroup}.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemSeparator />\n */\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n      },\n      size: {\n        md: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\n/** Props for the Saasflare {@link Item} component. */\ninterface ItemProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    Omit<VariantProps<typeof itemVariants>, \"size\">,\n    SaasflareComponentProps {\n  /** Render as child element (Radix Slot pattern). */\n  asChild?: boolean\n  /** Row density. (`\"default\"` is a deprecated alias for `\"md\"`.) */\n  size?: VariantProps<typeof itemVariants>[\"size\"] | \"default\"\n}\n\n/**\n * Versatile list row with optional media, content, and action slots.\n *\n * A surfaced, rounded primitive: `surface` and `radius` resolve from the\n * provider via {@link useSaasflareProps} and are emitted as\n * `data-surface`/`data-radius` on the root for CSS theming.\n *\n * @component\n * @layer core\n *\n * @example\n * <Item variant=\"outline\">\n *   <ItemMedia variant=\"icon\"><GearIcon /></ItemMedia>\n *   <ItemContent>\n *     <ItemTitle>Settings</ItemTitle>\n *     <ItemDescription>Manage your account.</ItemDescription>\n *   </ItemContent>\n * </Item>\n */\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"md\",\n  asChild = false,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: ItemProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const Comp = asChild ? Slot.Root : \"div\"\n  const resolvedSize = size === \"default\" ? \"md\" : size\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={resolvedSize}\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(itemVariants({ variant, size: resolvedSize, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Leading media slot for an {@link Item} — icon, image, or bare children.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemMedia variant=\"icon\"><GearIcon /></ItemMedia>\n */\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\n/**\n * Primary content column of an {@link Item} — holds title and description.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemContent>\n *   <ItemTitle>Settings</ItemTitle>\n * </ItemContent>\n */\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Title line within {@link ItemContent}.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemTitle>Settings</ItemTitle>\n */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Secondary description text within {@link ItemContent}.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemDescription>Manage your account.</ItemDescription>\n */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Trailing actions slot of an {@link Item} — buttons, menus, or controls.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemActions><Button size=\"sm\">Edit</Button></ItemActions>\n */\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Full-width header row spanning the top of an {@link Item}.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemHeader><ItemTitle>Plan</ItemTitle><Badge>Pro</Badge></ItemHeader>\n */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Full-width footer row spanning the bottom of an {@link Item}.\n *\n * @component\n * @layer core\n *\n * @example\n * <ItemFooter><ItemDescription>Renews monthly.</ItemDescription></ItemFooter>\n */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n  type ItemProps,\n}\n",
      "target": "components/ui/item.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/item.json"
  }
}