{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-info-list-01",
  "type": "registry:block",
  "title": "Info List without header",
  "description": "An example of the info list component without a header.",
  "dependencies": ["lucide-react", "@radix-ui/react-slot"],
  "files": [
    {
      "path": "registry/examples/info-list-01.tsx",
      "content": "import {\n  InfoList,\n  InfoListItem,\n  InfoListIcon,\n  InfoListText,\n} from \"@/registry/default/ui/info-list\"\nimport { Expand, Aperture, Palette } from \"lucide-react\"\n\nexport function ExampleInfoList01() {\n  return (\n    <InfoList className=\"grid grid-cols-1 gap-8 @md/preview:grid-cols-3\">\n      <InfoListItem>\n        <InfoListIcon className=\"text-muted-foreground\">\n          <Expand />\n        </InfoListIcon>\n        <InfoListText>\n          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam\n          eaque quidem rem.\n        </InfoListText>\n      </InfoListItem>\n\n      <InfoListItem>\n        <InfoListIcon className=\"text-muted-foreground\">\n          <Aperture />\n        </InfoListIcon>\n        <InfoListText>\n          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga porro\n          magnam expedita blanditiis recusandae excepturi veritatis repudiandae.\n        </InfoListText>\n      </InfoListItem>\n\n      <InfoListItem>\n        <InfoListIcon className=\"text-muted-foreground\">\n          <Palette />\n        </InfoListIcon>\n        <InfoListText>\n          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus\n          excepturi doloribus velit qui enim.\n        </InfoListText>\n      </InfoListItem>\n    </InfoList>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/default/ui/info-list.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nexport function InfoList({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      className={cn(\"flex flex-col gap-2\", className)}\n      data-slot=\"info-list\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      className={cn(\n        \"flex gap-4 has-[*[data-slot='header']]:flex-col\",\n        className\n      )}\n      data-slot=\"info-list-item\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">) {\n  return (\n    <header\n      className={cn(\"flex gap-4\", className)}\n      data-slot=\"info-list-header\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListIcon({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex h-[1lh] flex-none items-center [&>svg]:size-[1em]\",\n        className\n      )}\n      data-slot=\"info-list-icon\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListText({\n  className,\n  asChild,\n  ...props\n}: React.ComponentProps<\"p\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"p\"\n  return (\n    <Comp\n      className={cn(\"text-pretty\", className)}\n      data-slot=\"info-list-text\"\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui",
      "target": ""
    }
  ]
}