{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"data-list","title":"Data List","description":"Show the details of one record as label and value rows, side by side or stacked. Search terms: description list, detail list, key value, properties, dl.","dependencies":[],"registryDependencies":["@siteplane/base"],"files":[{"path":"packages/ui/src/components/data-list/data-list.tsx","content":"import type * as React from \"react\";\n\nimport { cn } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\n\nexport type DataListOrientation = \"horizontal\" | \"vertical\";\n\nexport interface DataListProps extends React.ComponentProps<\"dl\"> {\n  /**\n   * Draws the kit's hairline between two items, with 12 px above and below\n   * it. The first and the last item keep no space outside their content.\n   */\n  dividers?: boolean;\n  /**\n   * `horizontal` (the default) sets each label beside its value, in a label\n   * column that all items share. `vertical` sets each label above its value.\n   */\n  orientation?: DataListOrientation;\n}\n\n/**\n * Label and value rows, rendered as a description list (`dl`). In the\n * horizontal orientation the labels share one column: as wide as the widest\n * label, up to 40% of the list, or as wide as `--data-list-label-width` sets\n * it. Long labels and values wrap (rulebook K5). The layout and the text are\n * the rules in design-rework.css.\n */\nexport function DataList({\n  className,\n  dividers = false,\n  orientation = \"horizontal\",\n  ...props\n}: DataListProps): React.ReactElement {\n  return (\n    <dl\n      className={cn(slotClass(\"data-list\", props), className)}\n      data-dividers={dividers || undefined}\n      data-orientation={orientation}\n      data-slot=\"data-list\"\n      {...props}\n    />\n  );\n}\n\n/** One row: a `DataListLabel` and its `DataListValue`. */\nexport function DataListItem({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(slotClass(\"data-list-item\", props), className)}\n      data-slot=\"data-list-item\"\n      {...props}\n    />\n  );\n}\n\n/** The name of a value, rendered as a `dt`. */\nexport function DataListLabel({\n  className,\n  ...props\n}: React.ComponentProps<\"dt\">): React.ReactElement {\n  return (\n    <dt\n      className={cn(slotClass(\"data-list-label\", props), className)}\n      data-slot=\"data-list-label\"\n      {...props}\n    />\n  );\n}\n\n/**\n * The value of a label, rendered as a `dd`. It holds text or inline parts, such\n * as a Badge, a Code or a link.\n */\nexport function DataListValue({\n  className,\n  ...props\n}: React.ComponentProps<\"dd\">): React.ReactElement {\n  return (\n    <dd\n      className={cn(slotClass(\"data-list-value\", props), className)}\n      data-slot=\"data-list-value\"\n      {...props}\n    />\n  );\n}\n","type":"registry:ui","target":"~/src/siteplane/components/data-list/data-list.tsx"},{"path":"packages/ui/src/components/data-list/index.ts","content":"export * from \"./data-list\";\n","type":"registry:ui","target":"~/src/siteplane/components/data-list/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/data-list.md","categories":["Data display"],"meta":{"avoidWhen":["Avoid for data that people sort, filter or compare across many records; use Table.","Avoid for editable settings; use Settings List with a control in each row."],"description":"Show the details of one record as label and value rows, side by side or stacked.","knownLimitations":["The horizontal label column is as wide as the widest label, up to 40% of the list; set --data-list-label-width for a fixed column.","The list renders dl, dt and dd; put one label and one value in each DataListItem."],"providerNotes":[],"releaseStatus":"stable","searchTerms":["data-list","data list","description list","detail list","key value","properties","dl"],"useWhen":["Use to show the properties of one record, such as an account's plan, renewal date and seats.","Use in a card or a detail drawer, with dividers when the rows need more separation."]}}