{
  "name": "resource-list",
  "type": "registry:ui",
  "title": "Resource List",
  "description": "Compact entity lists with structured status, content and metadata but no tabular header.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0"
  ],
  "files": [
    {
      "path": "src/components/ui/resource-list.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useResolvedDensity } from \"@/components/ui/siteplane-provider\";\n\nexport type ResourceListDensity = \"default\" | \"compact\";\nexport type ResourceListVariant = \"default\" | \"soft\";\nexport type ResourceListIndicatorTone =\n  | \"chart-1\"\n  | \"chart-2\"\n  | \"chart-3\"\n  | \"chart-4\"\n  | \"chart-5\"\n  | \"error\"\n  | \"info\"\n  | \"muted\"\n  | \"success\"\n  | \"warning\";\nexport type ResourceListIndicatorShape = \"bar\" | \"diamond\" | \"dot\" | \"ring\";\n\nexport interface ResourceListProps extends useRender.ComponentProps<\"div\"> {\n  density?: ResourceListDensity;\n  variant?: ResourceListVariant;\n}\n\nexport interface ResourceListItemProps extends useRender.ComponentProps<\"div\"> {\n  active?: boolean;\n  disabled?: boolean;\n  interactive?: boolean;\n  selected?: boolean;\n}\n\nexport interface ResourceListIndicatorProps\n  extends useRender.ComponentProps<\"span\"> {\n  icon?: React.ReactNode;\n  label?: string;\n  shape?: ResourceListIndicatorShape;\n  tone?: ResourceListIndicatorTone;\n}\n\nconst resourceListIndicatorShapeClassNames = {\n  bar: \"h-4 w-1 rounded-full\",\n  diamond: \"size-2 rotate-45 rounded-[2px]\",\n  dot: \"size-1.5 rounded-full\",\n  ring: \"size-2.5 rounded-full border-2 border-current bg-transparent\",\n} as const satisfies Record<ResourceListIndicatorShape, string>;\n\nexport function ResourceList({\n  className,\n  density,\n  render,\n  variant = \"default\",\n  ...props\n}: ResourceListProps): React.ReactElement {\n  const resolvedDensity = useResolvedDensity(density);\n  const defaultProps = {\n    \"data-density\": resolvedDensity,\n    \"data-slot\": \"resource-list\",\n    \"data-variant\": variant,\n    className: cn(\n      \"grid min-w-0 gap-1 data-[density=compact]:gap-0.5 data-[variant=soft]:rounded-xl data-[variant=soft]:bg-surface-subtle data-[variant=soft]:p-1\",\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function ResourceListItem({\n  active = false,\n  className,\n  disabled = false,\n  interactive = false,\n  render,\n  selected = false,\n  ...props\n}: ResourceListItemProps): React.ReactElement {\n  const defaultProps = {\n    \"aria-current\": active || undefined,\n    \"aria-disabled\": disabled || undefined,\n    \"data-active\": active || undefined,\n    \"data-disabled\": disabled || undefined,\n    \"data-interactive\": interactive || undefined,\n    \"data-selected\": selected || undefined,\n    \"data-slot\": \"resource-list-item\",\n    className: cn(\n      \"grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm outline-none transition-colors data-active:bg-state-selected data-selected:bg-state-selected data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-64 data-[interactive=true]:cursor-pointer data-[interactive=true]:hover:bg-state-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 in-data-[density=compact]:py-2\",\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function ResourceListIndicator({\n  children,\n  className,\n  icon,\n  label,\n  render,\n  shape = \"dot\",\n  tone = \"muted\",\n  ...props\n}: ResourceListIndicatorProps): React.ReactElement {\n  const defaultProps = {\n    \"aria-hidden\": label ? undefined : true,\n    \"aria-label\": label,\n    children: icon ?? children,\n    \"data-slot\": \"resource-list-indicator\",\n    \"data-shape\": shape,\n    \"data-tone\": tone,\n    className: cn(\n      \"inline-flex shrink-0 items-center justify-center\",\n      resourceListIndicatorShapeClassNames[shape],\n      icon && \"size-5 rounded-full text-primary-foreground [&>svg]:size-3\",\n      tone === \"success\" && \"bg-success\",\n      tone === \"muted\" && \"bg-muted-foreground/30\",\n      tone === \"warning\" && \"bg-warning\",\n      tone === \"error\" && \"bg-destructive\",\n      tone === \"info\" && \"bg-info\",\n      tone === \"chart-1\" && \"bg-chart-1\",\n      tone === \"chart-2\" && \"bg-chart-2\",\n      tone === \"chart-3\" && \"bg-chart-3\",\n      tone === \"chart-4\" && \"bg-chart-4\",\n      tone === \"chart-5\" && \"bg-chart-5\",\n      className,\n    ),\n    role: label ? \"img\" : undefined,\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function ResourceListContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    \"data-slot\": \"resource-list-content\",\n    className: cn(\"grid min-w-0 gap-0.5\", className),\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function ResourceListTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\">): React.ReactElement {\n  const defaultProps = {\n    \"data-slot\": \"resource-list-title\",\n    className: cn(\"truncate font-medium text-foreground\", className),\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function ResourceListDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\">): React.ReactElement {\n  const defaultProps = {\n    \"data-slot\": \"resource-list-description\",\n    className: cn(\"truncate text-muted-foreground text-xs\", className),\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function ResourceListMeta({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\">): React.ReactElement {\n  const defaultProps = {\n    \"data-slot\": \"resource-list-meta\",\n    className: cn(\n      \"justify-self-end whitespace-nowrap text-muted-foreground text-sm in-data-[density=compact]:text-xs\",\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n"
    }
  ],
  "categories": [
    "data-display"
  ],
  "docs": "# Resource List\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Resource List for compact entity collections such as contacts, tasks, leads or files that do not need a tabular header and strict columns.\n\n## Import\n\n```tsx\nimport {\n  ResourceList,\n  ResourceListContent,\n  ResourceListDescription,\n  ResourceListIndicator,\n  ResourceListItem,\n  ResourceListMeta,\n  ResourceListTitle,\n} from \"@/components/ui/resource-list\";\n```\n\n## Public API\n\n- `ResourceList` accepts `density=\"default\" | \"compact\"` and `variant=\"default\" | \"soft\"`.\n- Compose `ResourceListItem`, `ResourceListIndicator`, `ResourceListContent`, `ResourceListTitle`, `ResourceListDescription` and `ResourceListMeta`.\n- `ResourceListItem` accepts `interactive`, `selected`, `active`, `disabled` and Base UI's `render` prop for a semantic button or link.\n- `ResourceListIndicator` supports `muted`, `success`, `warning`, `info`, `error` and `chart-1` through `chart-5`, plus `bar`, `diamond`, `dot` and `ring` shapes.\n\n## Public Motion\n\n- Resource List uses quiet hover, active and selected state changes without row lift or entry animation.\n- Indicator and selection changes do not alter row measurements; reduced motion requires no extra behavior.\n\n## Public Accessibility\n\n- Interactive rows must render as semantic buttons or links and retain visible keyboard focus.\n- Color indicators are supplementary. Provide status text, an icon label or another non-color explanation.\n- Keep title, description and metadata in their named slots so reading order stays predictable.\n\n## Public Agent Guidance\n\n- Use Table for genuine column comparison and Resource List for lighter entity scanning.\n- Use all available indicator tones through the documented `tone` prop instead of adding local colors.\n- Do not simulate interactive rows with click handlers on non-focusable containers.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/data-display/resource-list)\n\n- [Registry source](https://ui.siteplane.io/r/resource-list.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/data-display/resource-list",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}