@hirobius/design-system 0.19.1 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (175) hide show
  1. package/AGENTS.md +123 -0
  2. package/CONSUMING.md +11 -6
  3. package/DESIGN.md +34 -21
  4. package/NOTICE.md +1 -1
  5. package/README.md +48 -13
  6. package/codemods/hds-prefix.mjs +231 -0
  7. package/codemods/jsx-fold.mjs +515 -0
  8. package/codemods/not-found-pattern.mjs +71 -0
  9. package/codemods/patterns-subpath.mjs +242 -81
  10. package/codemods/patterns-subpath.names.json +41 -15
  11. package/codemods/removed-0.20.json +194 -0
  12. package/codemods/tile-grid.mjs +283 -0
  13. package/codemods/unrewritable.mjs +291 -0
  14. package/dist/chunks/DemoStateContext-Cz5TmrYu.js +32 -0
  15. package/dist/chunks/empty-state-DNoThgfV.js +1227 -0
  16. package/dist/chunks/form-By82qZcC.js +66 -0
  17. package/dist/contexts.js +157 -78
  18. package/dist/fonts/geist-mono-400.woff2 +0 -0
  19. package/dist/fonts/satoshi-400.woff2 +0 -0
  20. package/dist/fonts/satoshi-500.woff2 +0 -0
  21. package/dist/fonts/satoshi-700.woff2 +0 -0
  22. package/dist/fonts.css +53 -0
  23. package/dist/form.js +1 -1
  24. package/dist/hirobius-ui.js +1600 -5354
  25. package/dist/manifest.js +12 -13
  26. package/dist/patterns.js +796 -510
  27. package/dist/styles.css +2 -2
  28. package/dist/tokens.css +1 -1
  29. package/dist/tokens.js +165 -65
  30. package/dist/types/src/app/components/alert-dialog.d.ts +5 -0
  31. package/dist/types/src/app/components/asset-img.d.ts +1 -0
  32. package/dist/types/src/app/components/avatar-group.d.ts +2 -2
  33. package/dist/types/src/app/components/badge.d.ts +8 -3
  34. package/dist/types/src/app/components/blockquote.d.ts +2 -2
  35. package/dist/types/src/app/components/box-sx.d.ts +110 -13
  36. package/dist/types/src/app/components/box.d.ts +6 -3
  37. package/dist/types/src/app/components/breadcrumb.d.ts +0 -5
  38. package/dist/types/src/app/components/button.d.ts +35 -4
  39. package/dist/types/src/app/components/card.d.ts +10 -10
  40. package/dist/types/src/app/components/combobox.d.ts +47 -11
  41. package/dist/types/src/app/components/container.d.ts +2 -2
  42. package/dist/types/src/app/components/data-table-section.d.ts +2 -1
  43. package/dist/types/src/app/components/destructive-section.d.ts +1 -0
  44. package/dist/types/src/app/components/dialog.d.ts +8 -1
  45. package/dist/types/src/app/components/disclosure.d.ts +1 -5
  46. package/dist/types/src/app/components/error-pattern.d.ts +6 -1
  47. package/dist/types/src/app/components/field.d.ts +1 -2
  48. package/dist/types/src/app/components/form-actions.d.ts +1 -0
  49. package/dist/types/src/app/components/form-control.d.ts +10 -0
  50. package/dist/types/src/app/components/grid.d.ts +15 -6
  51. package/dist/types/src/app/components/hds-tooltip.d.ts +12 -2
  52. package/dist/types/src/app/components/icon.d.ts +1 -0
  53. package/dist/types/src/app/components/inline-code.d.ts +1 -2
  54. package/dist/types/src/app/components/input.d.ts +8 -5
  55. package/dist/types/src/app/components/kbd.d.ts +2 -2
  56. package/dist/types/src/app/components/metadata-list.d.ts +2 -2
  57. package/dist/types/src/app/components/metric-tiles.d.ts +1 -0
  58. package/dist/types/src/app/components/page-header.d.ts +0 -2
  59. package/dist/types/src/app/components/popover.d.ts +8 -0
  60. package/dist/types/src/app/components/progress.d.ts +33 -6
  61. package/dist/types/src/app/components/segmented-control.d.ts +2 -26
  62. package/dist/types/src/app/components/select.d.ts +10 -1
  63. package/dist/types/src/app/components/skeleton.d.ts +3 -4
  64. package/dist/types/src/app/components/spinner.d.ts +1 -2
  65. package/dist/types/src/app/components/stack.d.ts +4 -1
  66. package/dist/types/src/app/components/stat.d.ts +5 -5
  67. package/dist/types/src/app/components/status-list-item.d.ts +1 -2
  68. package/dist/types/src/app/components/status-tile.d.ts +3 -2
  69. package/dist/types/src/app/components/surface.d.ts +2 -3
  70. package/dist/types/src/app/components/switcher.d.ts +1 -1
  71. package/dist/types/src/app/components/table.d.ts +6 -15
  72. package/dist/types/src/app/components/tag.d.ts +0 -6
  73. package/dist/types/src/app/components/text.d.ts +54 -8
  74. package/dist/types/src/app/components/textarea.d.ts +1 -2
  75. package/dist/types/src/app/components/timestamp.d.ts +1 -0
  76. package/dist/types/src/app/components/toast.d.ts +1 -2
  77. package/dist/types/src/app/components/tooltip.d.ts +1 -1
  78. package/dist/types/src/app/context/DemoStateContext.d.ts +1 -1
  79. package/dist/types/src/app/context/RouterContext.d.ts +5 -5
  80. package/dist/types/src/app/data/manifest-types.d.ts +10 -5
  81. package/dist/types/src/app/design-system/generated-token-refs.d.ts +45 -28
  82. package/dist/types/src/app/design-system/generated-token-values.d.ts +4 -0
  83. package/dist/types/src/app/design-system/tokens.d.ts +139 -18
  84. package/dist/types/src/icons.d.ts +1 -1
  85. package/dist/types/src/index.d.ts +76 -164
  86. package/dist/types/src/patterns.d.ts +20 -25
  87. package/dist/variables.css +47 -33
  88. package/docs/CONSUMING.md +80 -48
  89. package/hirobius.tokens.json +125 -88
  90. package/llms.txt +166 -59
  91. package/mcp/catalog.mjs +366 -0
  92. package/mcp/guide.mjs +315 -0
  93. package/mcp/hds-mcp.mjs +49 -0
  94. package/mcp/server.mjs +94 -0
  95. package/package.json +48 -27
  96. package/public/hds-manifest.json +2667 -6705
  97. package/public/llms/components.txt +45 -426
  98. package/public/llms/layout.txt +5 -5
  99. package/public/llms-full.txt +245 -506
  100. package/public/llms.txt +166 -59
  101. package/scripts/eslint-plugin-hds/index.d.mts +29 -0
  102. package/scripts/eslint-plugin-hds/index.mjs +55 -0
  103. package/scripts/eslint-plugin-hds/package.json +30 -0
  104. package/scripts/eslint-plugin-hds/rules/no-raw-controls.mjs +47 -0
  105. package/scripts/eslint-plugin-hds/rules/no-raw-hex.mjs +70 -0
  106. package/scripts/eslint-plugin-hds/rules/no-raw-px-spacing.mjs +125 -0
  107. package/scripts/eslint-plugin-hds/rules/prefer-hds-layout-primitive.mjs +54 -0
  108. package/scripts/eslint-plugin-hds/rules/sx-token-first.mjs +111 -0
  109. package/scripts/eslint-plugin-hds/rules/utils.mjs +66 -0
  110. package/src/app/data/component-api.json +1082 -2913
  111. package/dist/chunks/LanguageContext-BxdCwiFg.js +0 -95
  112. package/dist/chunks/TokenDisplayContext-DKYJMVWk.js +0 -26
  113. package/dist/chunks/activity-feed-BGQ6v3wc.js +0 -22040
  114. package/dist/chunks/form-COP3vK9_.js +0 -66
  115. package/dist/types/src/app/components/activity-feed.d.ts +0 -73
  116. package/dist/types/src/app/components/app-shell.d.ts +0 -40
  117. package/dist/types/src/app/components/aspect-ratio.d.ts +0 -25
  118. package/dist/types/src/app/components/bleed.d.ts +0 -39
  119. package/dist/types/src/app/components/button-group.d.ts +0 -22
  120. package/dist/types/src/app/components/calendar.d.ts +0 -22
  121. package/dist/types/src/app/components/carousel.d.ts +0 -26
  122. package/dist/types/src/app/components/center.d.ts +0 -36
  123. package/dist/types/src/app/components/cinematic-link.d.ts +0 -18
  124. package/dist/types/src/app/components/circular-progress.d.ts +0 -28
  125. package/dist/types/src/app/components/cluster.d.ts +0 -39
  126. package/dist/types/src/app/components/command-palette.d.ts +0 -46
  127. package/dist/types/src/app/components/component-instance-matrix.d.ts +0 -27
  128. package/dist/types/src/app/components/context-menu.d.ts +0 -78
  129. package/dist/types/src/app/components/cover.d.ts +0 -43
  130. package/dist/types/src/app/components/date-input.d.ts +0 -31
  131. package/dist/types/src/app/components/date-range-input.d.ts +0 -34
  132. package/dist/types/src/app/components/date-time-input.d.ts +0 -30
  133. package/dist/types/src/app/components/doc-link-card.d.ts +0 -32
  134. package/dist/types/src/app/components/error-boundary.d.ts +0 -25
  135. package/dist/types/src/app/components/file-input.d.ts +0 -30
  136. package/dist/types/src/app/components/foundation-swatch.d.ts +0 -45
  137. package/dist/types/src/app/components/frame.d.ts +0 -38
  138. package/dist/types/src/app/components/heading-stack.d.ts +0 -52
  139. package/dist/types/src/app/components/history-card.d.ts +0 -12
  140. package/dist/types/src/app/components/hover-card.d.ts +0 -46
  141. package/dist/types/src/app/components/icon-button.d.ts +0 -22
  142. package/dist/types/src/app/components/image-lightbox.d.ts +0 -14
  143. package/dist/types/src/app/components/input-group.d.ts +0 -23
  144. package/dist/types/src/app/components/multi-selector.d.ts +0 -40
  145. package/dist/types/src/app/components/nav-group.d.ts +0 -29
  146. package/dist/types/src/app/components/nav-item.d.ts +0 -33
  147. package/dist/types/src/app/components/not-found-pattern.d.ts +0 -1
  148. package/dist/types/src/app/components/overflow-list.d.ts +0 -21
  149. package/dist/types/src/app/components/selectable-card.d.ts +0 -29
  150. package/dist/types/src/app/components/side-nav.d.ts +0 -23
  151. package/dist/types/src/app/components/sketch.d.ts +0 -19
  152. package/dist/types/src/app/components/stacked-card-rail.d.ts +0 -32
  153. package/dist/types/src/app/components/status-dot.d.ts +0 -25
  154. package/dist/types/src/app/components/stepper-field.d.ts +0 -12
  155. package/dist/types/src/app/components/stepper.d.ts +0 -33
  156. package/dist/types/src/app/components/text-lockup.d.ts +0 -38
  157. package/dist/types/src/app/components/tile-grid.d.ts +0 -17
  158. package/dist/types/src/app/components/time-input.d.ts +0 -24
  159. package/dist/types/src/app/components/toggle-button.d.ts +0 -32
  160. package/dist/types/src/app/components/token.d.ts +0 -90
  161. package/dist/types/src/app/components/tokenUtils.d.ts +0 -38
  162. package/dist/types/src/app/components/tokenizer.d.ts +0 -24
  163. package/dist/types/src/app/components/toolbar.d.ts +0 -36
  164. package/dist/types/src/app/components/top-nav.d.ts +0 -23
  165. package/dist/types/src/app/components/tree-list.d.ts +0 -30
  166. package/dist/types/src/app/data/nav-model.d.ts +0 -39
  167. package/dist/types/src/app/hooks/useFocusVisible.d.ts +0 -9
  168. package/dist/types/src/app/layouts/CaseStudyLayout.d.ts +0 -20
  169. package/dist/types/src/app/layouts/DocLayout.d.ts +0 -14
  170. package/dist/types/src/app/layouts/EmbeddedDocLayoutContext.d.ts +0 -6
  171. package/dist/types/src/app/layouts/HdsDocsShell.d.ts +0 -72
  172. package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts +0 -14
  173. package/dist/types/src/app/lib/hds-search.d.ts +0 -45
  174. package/dist/types/src/app/lib/nav-active.d.ts +0 -16
  175. package/dist/types/src/app/lib/navLevels.d.ts +0 -4
@@ -1,72 +0,0 @@
1
- /**
2
- * HdsDocsShell — three-region docs shell (left nav rail, content, right TOC
3
- * rail), driven by grid columns that default to 0 and are set per breakpoint.
4
- * @category Layout
5
- * @tier pattern
6
- * @public
7
- *
8
- * hds#280 slice: this is the SHELL MECHANICS ONLY — the smallest shippable
9
- * piece of the docs-shell epic. It ships:
10
- *
11
- * - A 3-column grid (`leftRail | content | rightRail`), both rail columns
12
- * defaulting to `0px` and set to `semantic.space.sidebar.railWidth`
13
- * (hds#280 token, our own 280px — not HeroUI's 268px) per breakpoint via
14
- * Tailwind's arbitrary-property + responsive-variant syntax, the same
15
- * technique Fumadocs/HeroUI uses. `md768:` brings in the left rail,
16
- * `xl1280:` brings in the right rail — matching the three-stage table in
17
- * hds#280.
18
- * - Each rail is `position: sticky` and scrolls independently of content
19
- * and of the other rail, clipped to the viewport minus `topOffset`.
20
- * - `topOffset` composes (it is one CSS length a caller supplies, e.g. its
21
- * own sticky header's height token) rather than a hardcoded pixel value —
22
- * the first stage of the row-cascade pattern hds#280 asks for. A second
23
- * region (a tabs row, hds#280's PR-comment addendum) would extend this by
24
- * adding its own height into the same `calc()` chain, not by hardcoding a
25
- * second offset.
26
- *
27
- * Deliberately NOT in this slice (tracked as proposed follow-up issues, not
28
- * filed — see the PR/commit this ships in):
29
- * - Below the TOC breakpoint, `rightRail` is omitted from the grid rather
30
- * than becoming a reachable popover. The DoD explicitly wants a popover,
31
- * not "merely hidden" — that is real, separate UI work (a sticky
32
- * current-section breadcrumb bar), not shell mechanics.
33
- * - Left-rail collapsible groups (chevron, active-section pill) and
34
- * right-rail active-anchor styling (vertical rule, filled pill) are
35
- * content the caller supplies via `leftRail`/`rightRail` — this shell
36
- * does not build SideNav/Disclosure/NavItem composition for the caller.
37
- * - `check-rendered-geometry` verification at every breakpoint in the DoD's
38
- * table (needs a built Storybook + a live run, not exercised here).
39
- * - Named CSS `grid-template-areas` (the DoD's literal ask) — this ships a
40
- * 3-column grid with DOM order instead, which is behaviorally identical
41
- * for a single linear row of regions and needs no separate stylesheet.
42
- * Areas earn their keep once a 4th region (a tabs row spanning full
43
- * width) is added — call out then, not before.
44
- */
45
- import * as React from 'react';
46
- /** @public */
47
- export interface HdsDocsShellProps {
48
- /** Left nav rail. Hidden below the `md768` breakpoint (grid column width 0). */
49
- leftRail?: React.ReactNode;
50
- /** Main content column. Always rendered, always fluid. */
51
- children: React.ReactNode;
52
- /**
53
- * Right "on this page" rail. Hidden below the `xl1280` breakpoint (grid
54
- * column width 0) — see the deferred-popover note above; it is REMOVED
55
- * from the grid at that breakpoint, not merely visually hidden, so no
56
- * hidden interactive content sits in the DOM unreachable.
57
- */
58
- rightRail?: React.ReactNode;
59
- /**
60
- * CSS length a caller supplies for a sticky header ABOVE this shell (e.g.
61
- * TopNav's height token), so each rail's sticky offset and scrollable
62
- * height compose against it instead of assuming the shell owns the whole
63
- * viewport. Defaults to `'0px'`.
64
- */
65
- topOffset?: string;
66
- /** Escape hatch: only for narrow layout adjustments that don't belong in the primitive API. */
67
- className?: string;
68
- /** Escape hatch: only for narrow layout adjustments that don't belong in the primitive API. */
69
- style?: React.CSSProperties;
70
- }
71
- /** @public */
72
- export declare const HdsDocsShell: React.ForwardRefExoticComponent<HdsDocsShellProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,14 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import { type DocLayoutContentMaxWidth } from './DocLayout.js';
3
- /**
4
- * HdsSystemDocLayout — single centered content column for documentation pages.
5
- * Thin wrapper around DocLayout: takes only `contentSlot` and `contentMaxWidth`,
6
- * with no sidebar or nav region to pass one into. Not the three-column docs
7
- * shell (left rail + content + right rail) — that is tracked as its own shell
8
- * component (hds#280).
9
- * @public
10
- */
11
- export declare function HdsSystemDocLayout({ contentSlot, contentMaxWidth, }: {
12
- contentSlot: ReactNode;
13
- contentMaxWidth?: DocLayoutContentMaxWidth;
14
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,45 +0,0 @@
1
- /** @internal — search engine behind the CommandPalette; not part of the public API. */
2
- /**
3
- * hds-search — the manifest search engine extracted from CommandPalette.
4
- *
5
- * A dependency-free subsequence + position scorer (think micro-fzf) over four
6
- * corpora drawn from `virtual:hds-manifest`: component specs, utilities, role
7
- * tokens, and curated foundation sections. Pure and side-effect-free — the
8
- * manifest is passed in, never read from a module global — so it is unit-tested
9
- * directly (see scripts/../tests/hds-search.test.ts) rather than through a
10
- * component test hook.
11
- *
12
- * Lifted from command-palette.tsx per ADR-011's review (deep module behind a
13
- * narrow interface): the UI shell now imports { buildIndex, rank } and owns no
14
- * search logic.
15
- */
16
- import type { ManifestSpec, RoleToken, SystemManifest } from '../data/manifest-types.js';
17
- export type { ManifestSpec, RoleToken, SystemManifest };
18
- export type ResultKind = 'component' | 'pattern' | 'template' | 'utility' | 'token' | 'section';
19
- export interface PaletteResult {
20
- id: string;
21
- label: string;
22
- description: string;
23
- kind: ResultKind;
24
- /** Where Enter/click navigates — relative React Router path. */
25
- to: string;
26
- /** Source string used for fuzzy matching (lowercased). */
27
- haystack: string;
28
- }
29
- export declare const KIND_LABEL: Record<ResultKind, string>;
30
- export declare const MAX_RESULTS = 30;
31
- export declare function sanitize(text: string): string;
32
- /** Build the searchable index from a manifest. Pure — pass the manifest in. */
33
- export declare function buildIndex(manifest: SystemManifest): PaletteResult[];
34
- /**
35
- * Subsequence + position scorer:
36
- * - Every char in `query` must appear in order inside `haystack`.
37
- * - Earlier matches score higher (heavy weight on first hit).
38
- * - Adjacent-char streaks score higher (clustered matches).
39
- * - Word-start hits get a bonus.
40
- *
41
- * Returns -Infinity if `query` is not a subsequence of `haystack`.
42
- */
43
- export declare function fuzzyScore(query: string, haystack: string): number;
44
- /** Rank items against a query. Empty query → a stable starter set. */
45
- export declare function rank(query: string, items: PaletteResult[]): PaletteResult[];
@@ -1,16 +0,0 @@
1
- /**
2
- * nav-active — the single active-state rule for navigation items.
3
- *
4
- * Previously this 3-line predicate was copy-pasted in three places (NavGroup,
5
- * and HDSLayout's NestedNavGroup + SideNavItem). Centralized here so "is this
6
- * nav item active?" has exactly one definition (ADR-017, Phase 4).
7
- */
8
- /**
9
- * Whether a nav item is active for the current path.
10
- *
11
- * - `exact`: the route must match precisely (e.g. `/` or a landing page that
12
- * shares a prefix with its children).
13
- * - otherwise: active when the current path equals the item path OR is a
14
- * descendant route (`/components` is active on `/components/actions`).
15
- */
16
- export declare function isNavItemActive(currentPath: string, itemPath: string, exact?: boolean): boolean;
@@ -1,4 +0,0 @@
1
- export type NavLevel = 'root' | 'section' | 'nested' | 'deep';
2
- export declare function getNavLevelInset(level: NavLevel): string;
3
- export declare function getNavLevelLeadingPadding(level: NavLevel): string;
4
- export declare function getNextNavLevel(level: NavLevel): NavLevel;