{
  "name": "UDS — Urban Design System",
  "version": "0.3",
  "docsUrl": "https://udsdocs.com/",
  "description": "Token-first design system with a framework-agnostic Web Components component API and React wrappers.",
  "architecture": {
    "tokens": "Semantic CSS custom properties from the UDS CSS bundle.",
    "components": "Web Components with the udc- tag prefix.",
    "react": "React wrappers render the same Web Components; React is not a separate implementation.",
    "transitionNote": "The old class-based examples are not the target public API."
  },
  "install": {
    "css": "import './uds/uds.css';",
    "webComponents": "import { registerUdsComponents } from '@uds/web-components'; registerUdsComponents();",
    "react": "import { UdsButton, UdsTextInput } from '@uds/react';"
  },
  "criticalRules": [
    "Never use --uds-primitive-* tokens in product UI.",
    "Use semantic tokens: --uds-color-*, --uds-space-*, --uds-font-*, --uds-border-*, --uds-shadow-*.",
    "Never hardcode colors, spacing, radii, shadows, or fonts.",
    "Use <udc-*> Web Component tags where UDS has a component.",
    "Use @uds/react wrappers in React apps; do not recreate component internals."
  ],
  "requiredFonts": {
    "families": "<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poppins:wght@400;500;700&family=Roboto:wght@400;500;700&family=Lexend:wght@400;500;700&display=swap\" rel=\"stylesheet\" />",
    "icons": "<link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" rel=\"stylesheet\" />"
  },
  "componentApi": {
    "prefix": "udc-",
    "publicSurface": ["attributes", "properties", "slots", "events", "CSS parts"],
    "events": ["udc-change", "udc-input", "udc-dismiss", "udc-tab-change", "udc-page-change", "udc-close"]
  },
  "components": [
    { "id": "button", "tag": "udc-button", "react": "UdsButton", "example": "<udc-button variant=\"primary\">Save</udc-button>" },
    { "id": "link", "tag": "udc-link", "react": "UdsLink", "example": "<udc-link href=\"/leases\">View leases</udc-link>" },
    { "id": "label", "tag": "udc-label", "react": "UdsLabel", "example": "<udc-label for=\"email\" required>Email</udc-label>" },
    { "id": "text-input", "tag": "udc-text-input", "react": "UdsTextInput", "example": "<udc-text-input label=\"Email\" type=\"email\" required></udc-text-input>" },
    { "id": "text-area", "tag": "udc-text-area", "react": "UdsTextArea", "example": "<udc-text-area label=\"Notes\" max-length=\"500\"></udc-text-area>" },
    { "id": "checkbox", "tag": "udc-checkbox", "react": "UdsCheckbox", "example": "<udc-checkbox name=\"terms\">Accept terms</udc-checkbox>" },
    { "id": "radio", "tag": "udc-radio-group, udc-radio", "react": "UdsRadioGroup, UdsRadio", "example": "<udc-radio-group name=\"contact\"><udc-radio value=\"email\">Email</udc-radio></udc-radio-group>" },
    { "id": "dropdown", "tag": "udc-dropdown, udc-dropdown-item", "react": "UdsDropdown, UdsDropdownItem", "example": "<udc-dropdown label=\"Property\"><udc-dropdown-item value=\"riverbend\">Riverbend</udc-dropdown-item></udc-dropdown>" },
    { "id": "combobox", "tag": "udc-combobox, udc-combobox-option", "react": "UdsCombobox, UdsComboboxOption", "example": "<udc-combobox label=\"Property\"><udc-combobox-option value=\"riverbend\">Riverbend</udc-combobox-option></udc-combobox>" },
    { "id": "date-picker", "tag": "udc-date-picker", "react": "UdsDatePicker", "example": "<udc-date-picker label=\"Move-in date\"></udc-date-picker>" },
    { "id": "toggle", "tag": "udc-toggle", "react": "UdsToggle", "example": "<udc-toggle name=\"notifications\">Email notifications</udc-toggle>" },
    { "id": "search", "tag": "udc-search", "react": "UdsSearch", "example": "<udc-search label=\"Search tenants\"></udc-search>" },
    { "id": "badge", "tag": "udc-badge", "react": "UdsBadge", "example": "<udc-badge tone=\"success\">Active</udc-badge>" },
    { "id": "chip", "tag": "udc-chip", "react": "UdsChip", "example": "<udc-chip variant=\"filter\" selected>Active</udc-chip>" },
    { "id": "divider", "tag": "udc-divider", "react": "UdsDivider", "example": "<udc-divider></udc-divider>" },
    { "id": "icon-wrapper", "tag": "udc-icon-wrapper", "react": "UdsIconWrapper", "example": "<udc-icon-wrapper icon=\"info\" label=\"Information\"></udc-icon-wrapper>" },
    { "id": "spacer", "tag": "udc-spacer", "react": "UdsSpacer", "example": "<udc-spacer size=\"md\"></udc-spacer>" },
    { "id": "breadcrumb", "tag": "udc-breadcrumb", "react": "UdsBreadcrumb", "example": "<udc-breadcrumb><a href=\"/\">Home</a><span aria-current=\"page\">Current</span></udc-breadcrumb>" },
    { "id": "tabs", "tag": "udc-tabs, udc-tab, udc-tab-panel", "react": "UdsTabs, UdsTab, UdsTabPanel", "example": "<udc-tabs><udc-tab panel=\"overview\">Overview</udc-tab><udc-tab-panel panel=\"overview\">Content</udc-tab-panel></udc-tabs>" },
    { "id": "nav-header", "tag": "udc-nav-header", "react": "UdsNavHeader", "example": "<udc-nav-header><span slot=\"brand\">Boardroom</span></udc-nav-header>" },
    { "id": "nav-vertical", "tag": "udc-nav-vertical, udc-nav-item", "react": "UdsNavVertical, UdsNavItem", "example": "<udc-nav-vertical><udc-nav-item href=\"/dashboard\" current>Dashboard</udc-nav-item></udc-nav-vertical>" },
    { "id": "pagination", "tag": "udc-pagination", "react": "UdsPagination", "example": "<udc-pagination page=\"1\" total-pages=\"10\"></udc-pagination>" },
    { "id": "tile", "tag": "udc-tile", "react": "UdsTile", "example": "<udc-tile label=\"Upload CSV\" description=\"Import tenants\" selectable></udc-tile>" },
    { "id": "list", "tag": "udc-list, udc-list-item", "react": "UdsList, UdsListItem", "example": "<udc-list><udc-list-item value=\"dashboard\">Dashboard</udc-list-item></udc-list>" },
    { "id": "data-table", "tag": "udc-data-table", "react": "UdsDataTable", "example": "<udc-data-table><table><thead><tr><th>Name</th></tr></thead><tbody><tr><td>Brian Smith</td></tr></tbody></table></udc-data-table>" },
    { "id": "data-view", "tag": "udc-data-view", "react": "UdsDataView", "example": "<udc-data-view><span slot=\"header\">Summary</span>Content</udc-data-view>" },
    { "id": "notification", "tag": "udc-notification", "react": "UdsNotification", "example": "<udc-notification tone=\"info\" dismissible>3 invoices are pending review.</udc-notification>" },
    { "id": "dialog", "tag": "udc-dialog", "react": "UdsDialog", "example": "<udc-dialog heading=\"Confirm\" open>Are you sure?</udc-dialog>" },
    { "id": "tooltip", "tag": "udc-tooltip", "react": "UdsTooltip", "example": "<udc-tooltip><button slot=\"trigger\">Info</button>More information</udc-tooltip>" }
  ],
  "tokens": {
    "surface": ["--uds-color-surface-main", "--uds-color-surface-page-main", "--uds-color-surface-subtle", "--uds-color-surface-alt", "--uds-color-surface-interactive-default"],
    "text": ["--uds-color-text-primary", "--uds-color-text-secondary", "--uds-color-text-inverse", "--uds-color-text-interactive", "--uds-color-text-error"],
    "border": ["--uds-color-border-primary", "--uds-color-border-secondary", "--uds-color-border-interactive", "--uds-color-border-outline-focus-visible"],
    "space": ["--uds-space-050", "--uds-space-100", "--uds-space-150", "--uds-space-200", "--uds-space-300", "--uds-space-400", "--uds-space-600"],
    "type": ["--uds-font-family", "--uds-font-size-base", "--uds-font-weight-medium", "--uds-font-weight-bold"],
    "radius": ["--uds-border-radius-input", "--uds-border-radius-container-md", "--uds-border-radius-container-full"]
  },
  "theming": {
    "applyTo": "html",
    "attributes": {
      "data-color-scheme": ["dark"],
      "data-theme": ["resman", "anyonehome", "inhabit"],
      "data-font": ["poppins", "roboto", "lexend"],
      "data-font-scale": ["smaller", "larger"],
      "data-density": ["comfortable"]
    }
  },
  "doNot": [
    "Do not output the old button class API as the target API.",
    "Do not use --uds-primitive-* tokens.",
    "Do not hardcode #hex colors, px spacing, or font-family values.",
    "Do not build React-only UDS components that duplicate Web Component internals."
  ]
}