{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "description-list",
  "title": "Description List",
  "description": "Labeled facts with responsive alignment and optional actions.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "button",
    "https://uaiblocks.dev/r/uai-theme.json",
    "https://uaiblocks.dev/r/uai-utils.json"
  ],
  "files": [
    {
      "path": "src/registry/uai/components/description-list.tsx",
      "content": "\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { type ComponentProps, createContext, useContext } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/uai-utils\";\n\nexport const DESCRIPTION_LIST_VARIANTS = [\"inline\", \"stacked\", \"grid\"] as const;\nexport type DescriptionListVariant = (typeof DESCRIPTION_LIST_VARIANTS)[number];\nexport type DescriptionListProps = ComponentProps<\"dl\"> & { variant?: DescriptionListVariant };\n\nconst Context = createContext<DescriptionListVariant | null>(null);\nfunction useVariant(part: string) {\n  const variant = useContext(Context);\n  if (!variant) throw new Error(`${part} must be used within DescriptionList`);\n  return variant;\n}\n\nconst descriptionListVariants = cva(\"m-0 grid min-w-0 text-[13px]/[18px] text-foreground\", {\n  variants: {\n    variant: {\n      inline: \"grid-cols-[minmax(0,1fr)] gap-0\",\n      stacked: \"grid-cols-[minmax(0,1fr)] gap-0\",\n      grid: \"grid-cols-[repeat(auto-fit,minmax(min(100%,180px),1fr))] gap-2\",\n    },\n  },\n});\n\nexport function DescriptionList({ variant = \"inline\", className, ...props }: DescriptionListProps) {\n  return (\n    <Context.Provider value={variant}>\n      <dl\n        data-slot=\"description-list\"\n        data-variant={variant}\n        className={cn(descriptionListVariants({ variant }), className)}\n        {...props}\n      />\n    </Context.Provider>\n  );\n}\n\nconst descriptionListItemVariants = cva(\"flex min-w-0 flex-wrap gap-x-4\", {\n  variants: {\n    variant: {\n      inline:\n        \"flex-row items-baseline gap-y-1 rounded-none border-b bg-transparent py-2.25 last:border-b-0\",\n      stacked:\n        \"flex-col items-stretch gap-y-0.5 rounded-none border-b bg-transparent py-2.5 last:border-b-0\",\n      grid: \"flex-col items-stretch gap-y-1 rounded-[10px] bg-muted px-3 py-2.5\",\n    },\n  },\n});\n\nexport function DescriptionListItem({ className, ...props }: ComponentProps<\"div\">) {\n  const variant = useVariant(\"DescriptionListItem\");\n  return (\n    <div\n      data-slot=\"description-list-item\"\n      className={cn(descriptionListItemVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport function DescriptionListTerm({ className, ...props }: ComponentProps<\"dt\">) {\n  const variant = useVariant(\"DescriptionListTerm\");\n  return (\n    <dt\n      data-slot=\"description-list-term\"\n      className={cn(\n        \"font-normal\",\n        variant === \"inline\"\n          ? \"max-w-50 flex-[1_1_140px] text-[12.5px]/[18px] text-muted-foreground\"\n          : \"text-[11.5px]/4 text-subtle-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DescriptionListDetails({ className, ...props }: ComponentProps<\"dd\">) {\n  const variant = useVariant(\"DescriptionListDetails\");\n  return (\n    <dd\n      data-slot=\"description-list-details\"\n      className={cn(\n        \"m-0 flex min-w-0 items-center justify-between gap-2 font-medium wrap-anywhere\",\n        variant === \"inline\" && \"min-h-7 flex-[999_1_220px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DescriptionListAction({ className, ...props }: ComponentProps<\"button\">) {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      data-slot=\"description-list-action\"\n      className={cn(\n        \"inline-flex h-6.5 min-w-6.5 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-full border-0 bg-transparent px-2.5 text-[12px] font-medium text-muted-foreground transition-[background-color,color,scale] duration-[120ms,120ms,140ms] ease-[ease-out,ease-out,cubic-bezier(0.23,1,0.32,1)] hover:bg-accent hover:text-foreground focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid active:scale-[0.97] has-[>svg]:px-2.5 motion-reduce:transition-none motion-reduce:active:scale-100 dark:hover:bg-accent [&_svg:not([class*='size-'])]:size-auto\",\n        className,\n      )}\n      {...props}\n      type=\"button\"\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "@ui/uai/description-list.tsx"
    }
  ],
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}