{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "description-list",
  "title": "Description List",
  "description": "Labels and values on a real dl, as ruled rows, two columns, single lines or tiles, with a slot for a copy button and long values that wrap.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/miseui/ui/description-list.tsx",
      "content": "import type * as React from \"react\"\nimport { createContext, useContext } from \"react\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\ntype DescriptionListVariant = \"stacked\" | \"columns\" | \"inline\" | \"card\"\n\nconst ROOT_CLASS: Record<DescriptionListVariant, string> = {\n  stacked: \"grid grid-cols-[minmax(0,1fr)] divide-y\",\n  columns: \"grid grid-cols-2 gap-x-6 gap-y-4\",\n  inline: \"grid grid-cols-[minmax(0,1fr)] gap-2\",\n  card: \"grid grid-cols-[repeat(auto-fit,minmax(min(100%,8rem),1fr))] gap-2\",\n}\n\nconst ITEM_CLASS: Record<DescriptionListVariant, string> = {\n  stacked: \"grid content-start gap-1 py-3 first:pt-0 last:pb-0\",\n  columns: \"grid content-start gap-1\",\n  inline: \"flex items-baseline justify-between gap-4\",\n  card: \"grid content-start gap-1 rounded-lg border bg-background p-3\",\n}\n\nconst TERM_CLASS: Record<DescriptionListVariant, string> = {\n  stacked: \"\",\n  columns: \"\",\n  inline: \"max-w-1/2 shrink-0\",\n  card: \"\",\n}\n\nconst DETAIL_CLASS: Record<DescriptionListVariant, string> = {\n  stacked: \"text-sm leading-5\",\n  columns: \"text-sm leading-5\",\n  inline: \"justify-end text-right text-sm leading-5\",\n  card: \"text-[15px] leading-6 font-medium\",\n}\n\n/**\n * Quiet until the row is hovered or focused, and always there on touch, where hover does not exist. The negative\n * margin lets a 32 or 40 px control sit on a 20 px line without making its row taller than the ones around it.\n */\nconst ACTION_CLASS = cn(\n  \"-my-1.5 flex shrink-0 items-center pointer-coarse:-my-2.5\",\n  \"opacity-0 transition-opacity duration-(--duration-fast) ease-(--ease-mise)\",\n  \"group-hover/item:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100\",\n)\n\nconst DescriptionListContext = createContext<DescriptionListVariant>(\"stacked\")\n\ntype DescriptionListProps = React.ComponentProps<\"dl\"> & {\n  /** `stacked` ruled rows, `columns` a two column grid, `inline` label and value on one line, `card` a tile per item. */\n  variant?: DescriptionListVariant\n}\n\nfunction DescriptionList({ variant = \"stacked\", className, ...props }: DescriptionListProps) {\n  return (\n    <DescriptionListContext.Provider value={variant}>\n      <dl data-slot=\"description-list\" data-variant={variant} className={cn(\"w-full min-w-0\", ROOT_CLASS[variant], className)} {...props} />\n    </DescriptionListContext.Provider>\n  )\n}\n\ntype DescriptionItemProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  label: React.ReactNode\n  /** The value. Long text wraps inside the item and never widens the list. */\n  children: React.ReactNode\n  /** A small control after the value, usually a copy button. */\n  action?: React.ReactNode\n}\n\nfunction DescriptionItem({ label, children, action, className, ...props }: DescriptionItemProps) {\n  const variant = useContext(DescriptionListContext)\n  return (\n    <div data-slot=\"description-item\" className={cn(\"group/item min-w-0\", ITEM_CLASS[variant], className)} {...props}>\n      <dt data-slot=\"description-term\" className={cn(\"text-[13px] leading-5 text-muted-foreground\", TERM_CLASS[variant])}>\n        {label}\n      </dt>\n      <dd data-slot=\"description-detail\" className={cn(\"flex min-w-0 items-start gap-2 text-foreground\", DETAIL_CLASS[variant])}>\n        <div data-slot=\"description-value\" className=\"min-w-0 wrap-anywhere\">\n          {children}\n        </div>\n        {action ? (\n          <div data-slot=\"description-action\" className={ACTION_CLASS}>\n            {action}\n          </div>\n        ) : null}\n      </dd>\n    </div>\n  )\n}\n\nexport { DescriptionList, DescriptionItem, type DescriptionListProps, type DescriptionItemProps, type DescriptionListVariant }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}