{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "title": "Item",
  "description": "A row of a list: an icon or picture, a title and description, and actions at the end.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/separator"
  ],
  "files": [
    {
      "path": "registry/macos/ui/item.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/macos/ui/separator\"\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 w-full flex-col gap-2 has-data-[size=xs]:gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot=\"item-separator\" orientation=\"horizontal\" className={cn(\"my-1\", className)} {...props} />\n}\n\n// A row of a list: an icon or picture, a title and description, and\n// actions at the end.\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-[10px] text-mac-body text-mac-label transition-colors duration-100 outline-none focus-visible:mac-focus-ring [a]:hover:bg-mac-fill-tertiary\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        outline: \"shadow-[inset_0_0_0_1px_var(--mac-grid)]\",\n        muted: \"bg-mac-fill-quaternary\",\n      },\n      size: {\n        default: \"gap-3 px-3 py-2.5\",\n        sm: \"gap-2.5 px-2.5 py-2\",\n        xs: \"gap-2 px-2 py-1.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"default\" },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">({ className: cn(itemVariants({ variant, size, className })) }, props),\n    render,\n    state: { slot: \"item\", variant, size },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 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-[8px] bg-mac-fill-secondary text-mac-label-secondary [&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-[8px] group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  }\n)\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return <div data-slot=\"item-media\" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\"flex flex-1 flex-col gap-0.5 [&+[data-slot=item-content]]:flex-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\"line-clamp-1 flex w-fit items-center gap-2 text-mac-body leading-4 font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\"line-clamp-2 text-left text-mac-subheadline text-mac-label-secondary [&>a]:text-mac-link [&>a:hover]:underline\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-actions\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-header\" className={cn(\"flex basis-full items-center justify-between gap-2\", className)} {...props} />\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-footer\" className={cn(\"flex basis-full items-center justify-between gap-2\", className)} {...props} />\n}\n\nexport { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}