{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-list",
  "title": "Data List",
  "description": "A semantic, responsive list of labeled values with horizontal and vertical layouts.",
  "files": [
    {
      "path": "registry/rivetui/components/data-list/data-list.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype DataListOrientation = \"horizontal\" | \"vertical\";\ntype DataListSize = \"sm\" | \"md\" | \"lg\";\n\ntype DataListProps = React.ComponentProps<\"dl\"> & {\n  orientation?: DataListOrientation;\n  size?: DataListSize;\n};\n\nconst orientationClasses: Record<DataListOrientation, string> = {\n  horizontal:\n    \"[&>[data-slot=data-list-item]]:grid [&>[data-slot=data-list-item]]:grid-cols-1 [&>[data-slot=data-list-item]]:gap-1.5 sm:[&>[data-slot=data-list-item]]:grid-cols-[minmax(8rem,0.35fr)_minmax(0,1fr)] sm:[&>[data-slot=data-list-item]]:gap-6\",\n  vertical:\n    \"[&>[data-slot=data-list-item]]:flex [&>[data-slot=data-list-item]]:flex-col [&>[data-slot=data-list-item]]:gap-1.5\",\n};\n\nconst sizeClasses: Record<DataListSize, string> = {\n  sm: \"[--data-list-padding-x:0.75rem] [--data-list-padding-y:0.625rem] [--data-list-value-size:0.75rem]\",\n  md: \"[--data-list-padding-x:1rem] [--data-list-padding-y:0.875rem] [--data-list-value-size:0.875rem]\",\n  lg: \"[--data-list-padding-x:1.25rem] [--data-list-padding-y:1.125rem] [--data-list-value-size:1rem]\",\n};\n\nfunction DataList({ className, orientation = \"horizontal\", size = \"md\", ...props }: DataListProps) {\n  return (\n    <dl\n      data-slot=\"data-list\"\n      data-orientation={orientation}\n      data-size={size}\n      className={cn(\n        \"w-full border border-border bg-background text-foreground\",\n        orientationClasses[orientation],\n        sizeClasses[size],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataListItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-list-item\"\n      className={cn(\n        \"min-w-0 border-b border-border px-[var(--data-list-padding-x)] py-[var(--data-list-padding-y)] last:border-b-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataListLabel({ className, ...props }: React.ComponentProps<\"dt\">) {\n  return (\n    <dt\n      data-slot=\"data-list-label\"\n      className={cn(\n        \"min-w-0 font-mono text-[0.6875rem] font-medium uppercase leading-5 tracking-[0.12em] text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataListValue({ className, ...props }: React.ComponentProps<\"dd\">) {\n  return (\n    <dd\n      data-slot=\"data-list-value\"\n      className={cn(\n        \"min-w-0 break-words text-[length:var(--data-list-value-size)] leading-5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type { DataListOrientation, DataListProps, DataListSize };\nexport { DataList, DataListItem, DataListLabel, DataListValue };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}