{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "type": "registry:ui",
  "title": "Item",
  "description": "Composable list item primitives for Tile UI.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/item/item.tsx",
      "type": "registry:ui",
      "target": "components/ui/item/item.tsx",
      "content": "import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { getItemMediaVariantKey, getItemSizeKey, getItemVariantKey, itemStyleKeys } from '../lib/core';\nimport type { ItemBaseProps, ItemMediaBaseProps } from '../lib/core';\nimport styles from './item.module.scss';\n\nexport interface ItemGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} role=\"list\" data-slot=\"item-group\" className={`${styles[itemStyleKeys.group]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nItemGroup.displayName = 'ItemGroup';\n\nexport interface ItemSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ItemSeparator = React.forwardRef<HTMLDivElement, ItemSeparatorProps>(({ className = '', ...props }, ref) => {\n\treturn <div ref={ref} role=\"separator\" aria-orientation=\"horizontal\" data-slot=\"item-separator\" className={`${styles[itemStyleKeys.separator]} ${className}`} {...props} />;\n});\nItemSeparator.displayName = 'ItemSeparator';\n\nexport interface ItemProps extends React.HTMLAttributes<HTMLDivElement>, ItemBaseProps {}\n\nconst Item = React.forwardRef<HTMLDivElement, ItemProps>(({ className = '', variant = 'default', size = 'default', asChild = false, children, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'div';\n\tconst variantKey = getItemVariantKey(variant);\n\tconst sizeKey = getItemSizeKey(size);\n\tconst classes = [styles[itemStyleKeys.item], styles[variantKey], styles[sizeKey], className].filter(Boolean).join(' ');\n\n\treturn (\n\t\t<Comp ref={ref} data-slot=\"item\" data-variant={variant} data-size={size} className={classes} {...props}>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n});\nItem.displayName = 'Item';\n\nexport interface ItemMediaProps extends React.HTMLAttributes<HTMLDivElement>, ItemMediaBaseProps {}\n\nconst ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(({ className = '', variant = 'default', children, ...props }, ref) => {\n\tconst variantKey = getItemMediaVariantKey(variant);\n\tconst classes = [styles[itemStyleKeys.media], styles[variantKey], className].filter(Boolean).join(' ');\n\n\treturn (\n\t\t<div ref={ref} data-slot=\"item-media\" data-variant={variant} className={classes} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nItemMedia.displayName = 'ItemMedia';\n\nexport interface ItemContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ItemContent = React.forwardRef<HTMLDivElement, ItemContentProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"item-content\" className={`${styles[itemStyleKeys.content]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nItemContent.displayName = 'ItemContent';\n\nexport interface ItemTitleProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ItemTitle = React.forwardRef<HTMLDivElement, ItemTitleProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"item-title\" className={`${styles[itemStyleKeys.title]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nItemTitle.displayName = 'ItemTitle';\n\nexport interface ItemDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst ItemDescription = React.forwardRef<HTMLParagraphElement, ItemDescriptionProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<p ref={ref} data-slot=\"item-description\" className={`${styles[itemStyleKeys.description]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</p>\n\t);\n});\nItemDescription.displayName = 'ItemDescription';\n\nexport interface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ItemActions = React.forwardRef<HTMLDivElement, ItemActionsProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"item-actions\" className={`${styles[itemStyleKeys.actions]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nItemActions.displayName = 'ItemActions';\n\nexport interface ItemHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ItemHeader = React.forwardRef<HTMLDivElement, ItemHeaderProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"item-header\" className={`${styles[itemStyleKeys.header]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nItemHeader.displayName = 'ItemHeader';\n\nexport interface ItemFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ItemFooter = React.forwardRef<HTMLDivElement, ItemFooterProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"item-footer\" className={`${styles[itemStyleKeys.footer]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nItemFooter.displayName = 'ItemFooter';\n\nexport { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter };\nexport default Item;\n"
    },
    {
      "path": "packages/styles/scss/components/item.module.scss",
      "type": "registry:file",
      "target": "components/ui/item/item.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n// Item 组容器\n.group {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n// 条目分隔线\n.separator {\n\tflex-shrink: 0;\n\theight: 1px;\n\twidth: 100%;\n\tbackground-color: var(--tile-item-line, $border);\n}\n\n// 条目根容器\n.item {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tborder-radius: var(--tile-item-radius, $radius);\n\tborder: 1px solid transparent;\n\tfont-size: $text-sm;\n\ttransition: background-color $transition-fast;\n\toutline: none;\n\n\t&:focus-visible {\n\t\tborder-color: $ring;\n\t\tbox-shadow: var(--tile-item-focus-shadow, 0 0 0 3px color-mix(in srgb, $ring 50%, transparent));\n\t}\n\n\ta {\n\t\ttransition: background-color $transition-fast;\n\t}\n\n\ta:hover {\n\t\tbackground-color: color-mix(in srgb, $accent 50%, transparent);\n\t}\n\n\t// 样式变体\n\t&.variantDefault {\n\t\tbackground-color: transparent;\n\t}\n\n\t&.variantOutline {\n\t\tborder-color: var(--tile-item-line, $border);\n\t}\n\n\t&.variantMuted {\n\t\tbackground-color: var(--tile-item-muted-background, color-mix(in srgb, $muted 50%, transparent));\n\t}\n\n\t// 尺寸变体\n\t&.sizeDefault {\n\t\tgap: $spacing-4;\n\t\tpadding: var(--tile-item-padding, $spacing-4);\n\t}\n\n\t&.sizeSm {\n\t\tgap: $spacing-2_5;\n\t\tpadding: var(--tile-item-sm-padding, $spacing-3 $spacing-4);\n\t}\n}\n\n// 媒体区\n.media {\n\tdisplay: flex;\n\tflex-shrink: 0;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: $spacing-2;\n\n\tsvg {\n\t\tpointer-events: none;\n\t\tflex-shrink: 0;\n\t\twidth: $spacing-4;\n\t\theight: $spacing-4;\n\t}\n\n\t// 变体\n\t&.variantDefault {\n\t\tbackground-color: transparent;\n\t}\n\n\t&.variantIcon {\n\t\twidth: $spacing-8;\n\t\theight: $spacing-8;\n\t\tborder-radius: $radius-sm;\n\t\tborder: 1px solid $border;\n\t\tbackground-color: var(--tile-item-media-background, $muted);\n\n\t\tsvg {\n\t\t\twidth: $spacing-4;\n\t\t\theight: $spacing-4;\n\t\t}\n\t}\n\n\t&.variantImage {\n\t\twidth: $spacing-10;\n\t\theight: $spacing-10;\n\t\toverflow: hidden;\n\t\tborder-radius: $radius-sm;\n\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: cover;\n\t\t}\n\t}\n}\n\n// 内容区\n.content {\n\tdisplay: flex;\n\tflex: 1;\n\tflex-direction: column;\n\tgap: $spacing-1;\n}\n\n// 相邻的第二个内容区不参与 flex 拉伸\n.content + .content {\n\tflex: none;\n}\n\n// 标题\n.title {\n\tdisplay: flex;\n\twidth: fit-content;\n\talign-items: center;\n\tgap: $spacing-2;\n\tfont-size: $text-sm;\n\tline-height: $leading-tight;\n\tfont-weight: $font-medium;\n}\n\n// 描述\n.description {\n\tdisplay: -webkit-box;\n\t-webkit-box-orient: vertical;\n\t-webkit-line-clamp: 2;\n\toverflow: hidden;\n\tfont-size: $text-sm;\n\tline-height: $leading-normal;\n\tfont-weight: $font-normal;\n\tcolor: var(--tile-item-description-color, $muted-foreground);\n\ttext-wrap: balance;\n\n\ta {\n\t\ttext-decoration: underline;\n\t\ttext-underline-offset: 4px;\n\t}\n\n\ta:hover {\n\t\tcolor: $primary;\n\t}\n}\n\n// 操作区\n.actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: $spacing-2;\n}\n\n// 头部 / 底部\n.header,\n.footer {\n\tdisplay: flex;\n\tflex-basis: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: $spacing-2;\n}\n"
    },
    {
      "path": "packages/react/src/components/item/index.ts",
      "type": "registry:ui",
      "target": "components/ui/item/index.ts",
      "content": "export {\n\tItem,\n\tItemMedia,\n\tItemContent,\n\tItemActions,\n\tItemGroup,\n\tItemSeparator,\n\tItemTitle,\n\tItemDescription,\n\tItemHeader,\n\tItemFooter,\n\ttype ItemProps,\n\ttype ItemGroupProps,\n\ttype ItemSeparatorProps,\n\ttype ItemMediaProps,\n\ttype ItemContentProps,\n\ttype ItemTitleProps,\n\ttype ItemDescriptionProps,\n\ttype ItemActionsProps,\n\ttype ItemHeaderProps,\n\ttype ItemFooterProps,\n} from './item';\n"
    }
  ]
}