{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "type": "registry:ui",
  "registryDependencies": [
    "@gc-solid/separator"
  ],
  "files": [
    {
      "path": "ui/item.tsx",
      "content": "import type { ComponentProps, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport { Polymorphic, type PolymorphicProps } from \"@kobalte/core\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction ItemGroup(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"group/item-group flex flex-col\", local.class)}\n      data-slot=\"item-group\"\n      role=\"list\"\n      {...others}\n    />\n  )\n}\n\nfunction ItemSeparator(props: ComponentProps<typeof Separator>) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <Separator\n      class={cn(\"my-0\", local.class)}\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      {...others}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 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        default: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n)\n\ntype ItemProps<T extends ValidComponent = \"div\"> = PolymorphicProps<\n  T,\n  ComponentProps<\"div\"> & VariantProps<typeof itemVariants>\n>\n\nfunction Item<T extends ValidComponent = \"div\">(props: ItemProps<T>) {\n  const [local, others] = splitProps(props, [\"class\", \"variant\", \"size\"])\n  return (\n    <Polymorphic\n      as=\"div\"\n      class={cn(itemVariants({ variant: local.variant, size: local.size }), local.class)}\n      data-size={local.size}\n      data-slot=\"item\"\n      data-variant={local.variant}\n      {...others}\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: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n)\n\ntype ItemMediaProps = ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>\n\nfunction ItemMedia(props: ItemMediaProps) {\n  const [local, others] = splitProps(props, [\"class\", \"variant\"])\n  return (\n    <div\n      class={cn(itemMediaVariants({ variant: local.variant }), local.class)}\n      data-slot=\"item-media\"\n      data-variant={local.variant}\n      {...others}\n    />\n  )\n}\n\nfunction ItemContent(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", local.class)}\n      data-slot=\"item-content\"\n      {...others}\n    />\n  )\n}\n\nfunction ItemTitle(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex w-fit items-center gap-2 font-medium text-sm leading-snug\", local.class)}\n      data-slot=\"item-title\"\n      {...others}\n    />\n  )\n}\n\nfunction ItemDescription(props: ComponentProps<\"p\">) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <p\n      class={cn(\n        \"line-clamp-2 text-balance font-normal text-muted-foreground text-sm leading-normal\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        local.class\n      )}\n      data-slot=\"item-description\"\n      {...others}\n    />\n  )\n}\n\nfunction ItemActions(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div class={cn(\"flex items-center gap-2\", local.class)} data-slot=\"item-actions\" {...others} />\n  )\n}\n\nfunction ItemHeader(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex basis-full items-center justify-between gap-2\", local.class)}\n      data-slot=\"item-header\"\n      {...others}\n    />\n  )\n}\n\nfunction ItemFooter(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex basis-full items-center justify-between gap-2\", local.class)}\n      data-slot=\"item-footer\"\n      {...others}\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}\n",
      "type": "registry:ui"
    }
  ]
}