{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-list",
  "title": "Data List",
  "description": "Semantic key-value metadata layout for displaying labels with values.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/data-list/data-list.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\nconst dataListVariants = cva(\n  \"grid rounded-xl border bg-card text-card-foreground\",\n  {\n    defaultVariants: {\n      density: \"default\",\n    },\n    variants: {\n      density: {\n        compact: \"divide-y\",\n        default: \"divide-y\",\n      },\n    },\n  },\n);\n\nconst dataListItemVariants = cva(\n  \"grid gap-1 p-4 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4 sm:px-5\",\n  {\n    defaultVariants: {\n      density: \"default\",\n    },\n    variants: {\n      density: {\n        compact: \"py-3\",\n        default: \"py-4\",\n      },\n    },\n  },\n);\n\ntype DataListContextValue = {\n  density: NonNullable<VariantProps<typeof dataListVariants>[\"density\"]>;\n};\n\nconst DataListContext = React.createContext<DataListContextValue>({\n  density: \"default\",\n});\n\nexport type DataListProps = React.HTMLAttributes<HTMLDListElement> &\n  VariantProps<typeof dataListVariants>;\n\nconst DataList = ({\n  className,\n  density,\n  ref: reference,\n  ...props\n}: DataListProps & { ref?: React.Ref<HTMLDListElement> }) => {\n  const resolvedDensity = density ?? \"default\";\n  const contextValue = React.useMemo<DataListContextValue>(\n    () => ({ density: resolvedDensity }),\n    [resolvedDensity],\n  );\n\n  return (\n    <DataListContext.Provider value={contextValue}>\n      <dl\n        className={cn(\n          dataListVariants({ density: resolvedDensity }),\n          className,\n        )}\n        ref={reference}\n        {...props}\n      />\n    </DataListContext.Provider>\n  );\n};\n\nDataList.displayName = \"DataList\";\n\nexport type DataListItemProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof dataListItemVariants>;\n\nconst DataListItem = ({\n  className,\n  density,\n  ref: reference,\n  ...props\n}: DataListItemProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const context = React.use(DataListContext);\n\n  return (\n    <div\n      className={cn(\n        dataListItemVariants({ density: density ?? context.density }),\n        className,\n      )}\n      ref={reference}\n      {...props}\n    />\n  );\n};\n\nDataListItem.displayName = \"DataListItem\";\n\nconst DataListLabel = ({\n  className,\n  ref: reference,\n  ...props\n}: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => (\n  <dt\n    className={cn(\"text-sm font-medium text-muted-foreground\", className)}\n    ref={reference}\n    {...props}\n  />\n);\n\nDataListLabel.displayName = \"DataListLabel\";\n\nconst DataListValue = ({\n  className,\n  ref: reference,\n  ...props\n}: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => (\n  <dd\n    className={cn(\"m-0 text-sm leading-6 text-foreground\", className)}\n    ref={reference}\n    {...props}\n  />\n);\n\nDataListValue.displayName = \"DataListValue\";\n\nexport {\n  DataList,\n  DataListItem,\n  dataListItemVariants,\n  DataListLabel,\n  DataListValue,\n  dataListVariants,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}