@hirobius/design-system 0.21.0 → 0.22.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 (90) hide show
  1. package/AGENTS.md +2 -0
  2. package/CHANGELOG.md +969 -0
  3. package/CONSUMING.md +23 -9
  4. package/MIGRATIONS.md +603 -0
  5. package/README.md +2 -0
  6. package/UPGRADING.md +222 -0
  7. package/codemods/hds-prefix.mjs +28 -13
  8. package/codemods/jsx-fold.mjs +28 -13
  9. package/codemods/lib/atomic-write.mjs +28 -0
  10. package/codemods/lib/installed-version.mjs +354 -0
  11. package/codemods/lib/project.mjs +395 -0
  12. package/codemods/lib/record.mjs +110 -0
  13. package/codemods/lib/scan.mjs +323 -0
  14. package/codemods/lib/semver.mjs +57 -0
  15. package/codemods/not-found-pattern.mjs +3 -3
  16. package/codemods/patterns-subpath.mjs +28 -12
  17. package/codemods/registry.mjs +67 -0
  18. package/codemods/tile-grid.mjs +3 -3
  19. package/codemods/upgrade.mjs +909 -0
  20. package/dist/hirobius-ui.js +1 -1
  21. package/dist/manifest.js +3 -3
  22. package/dist/styles.css +1 -1
  23. package/dist/tokens.css +1 -1
  24. package/dist/types/src/app/components/alert-dialog.d.ts +1 -1
  25. package/dist/types/src/app/components/alert.d.ts +1 -1
  26. package/dist/types/src/app/components/asset-img.d.ts +1 -1
  27. package/dist/types/src/app/components/avatar-group.d.ts +1 -1
  28. package/dist/types/src/app/components/avatar.d.ts +1 -1
  29. package/dist/types/src/app/components/badge.d.ts +1 -1
  30. package/dist/types/src/app/components/blockquote.d.ts +1 -1
  31. package/dist/types/src/app/components/breadcrumb.d.ts +1 -1
  32. package/dist/types/src/app/components/button.d.ts +1 -1
  33. package/dist/types/src/app/components/callout.d.ts +1 -1
  34. package/dist/types/src/app/components/card.d.ts +1 -1
  35. package/dist/types/src/app/components/checkbox.d.ts +1 -1
  36. package/dist/types/src/app/components/code-block.d.ts +1 -1
  37. package/dist/types/src/app/components/combobox.d.ts +1 -1
  38. package/dist/types/src/app/components/data-table-section.d.ts +1 -1
  39. package/dist/types/src/app/components/destructive-section.d.ts +1 -1
  40. package/dist/types/src/app/components/dialog.d.ts +1 -1
  41. package/dist/types/src/app/components/disclosure.d.ts +1 -1
  42. package/dist/types/src/app/components/divider.d.ts +1 -1
  43. package/dist/types/src/app/components/empty-state.d.ts +1 -1
  44. package/dist/types/src/app/components/field.d.ts +1 -1
  45. package/dist/types/src/app/components/form-actions.d.ts +1 -1
  46. package/dist/types/src/app/components/form.d.ts +1 -1
  47. package/dist/types/src/app/components/hds-tooltip.d.ts +1 -1
  48. package/dist/types/src/app/components/icon.d.ts +1 -1
  49. package/dist/types/src/app/components/inline-link.d.ts +1 -1
  50. package/dist/types/src/app/components/input.d.ts +1 -1
  51. package/dist/types/src/app/components/kbd.d.ts +1 -1
  52. package/dist/types/src/app/components/menu.d.ts +1 -1
  53. package/dist/types/src/app/components/metadata-list.d.ts +1 -1
  54. package/dist/types/src/app/components/metric-tiles.d.ts +1 -1
  55. package/dist/types/src/app/components/pagination.d.ts +1 -1
  56. package/dist/types/src/app/components/popover.d.ts +1 -1
  57. package/dist/types/src/app/components/progress.d.ts +1 -1
  58. package/dist/types/src/app/components/radio.d.ts +1 -1
  59. package/dist/types/src/app/components/select.d.ts +1 -1
  60. package/dist/types/src/app/components/skeleton.d.ts +1 -1
  61. package/dist/types/src/app/components/slider.d.ts +1 -1
  62. package/dist/types/src/app/components/spinner.d.ts +1 -1
  63. package/dist/types/src/app/components/stat.d.ts +1 -1
  64. package/dist/types/src/app/components/status-list-item.d.ts +1 -1
  65. package/dist/types/src/app/components/status-tile.d.ts +1 -1
  66. package/dist/types/src/app/components/table.d.ts +1 -1
  67. package/dist/types/src/app/components/tabs.d.ts +1 -1
  68. package/dist/types/src/app/components/tag.d.ts +1 -1
  69. package/dist/types/src/app/components/text.d.ts +1 -1
  70. package/dist/types/src/app/components/textarea.d.ts +1 -1
  71. package/dist/types/src/app/components/timestamp.d.ts +1 -1
  72. package/dist/types/src/app/components/toast.d.ts +1 -1
  73. package/dist/types/src/app/components/toggle.d.ts +1 -1
  74. package/dist/types/src/index.d.ts +79 -32
  75. package/hirobius.tokens.json +86 -39
  76. package/mcp/catalog.mjs +10 -7
  77. package/mcp/core-set.mjs +66 -0
  78. package/mcp/guide.mjs +9 -52
  79. package/package.json +23 -7
  80. package/public/hds-manifest.json +109 -109
  81. package/src/app/data/component-api.json +54 -54
  82. package/upgrade/index.json +208 -0
  83. package/upgrade/releases/0.17.0.json +962 -0
  84. package/upgrade/releases/0.18.0.json +8 -0
  85. package/upgrade/releases/0.19.0.json +233 -0
  86. package/upgrade/releases/0.19.1.json +8 -0
  87. package/upgrade/releases/0.20.0.json +5108 -0
  88. package/upgrade/releases/0.21.0.json +538 -0
  89. package/upgrade/releases/0.22.0.json +94 -0
  90. package/upgrade/schema.json +989 -0
@@ -2,7 +2,7 @@
2
2
  * AlertDialog — modal confirmation dialog on Radix AlertDialog.
3
3
  * @category Overlays
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2035-24
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2035-24
6
6
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
7
7
  *
8
8
  * Radix AlertDialog (@radix-ui/react-alert-dialog) themed with the overlay role
@@ -6,7 +6,7 @@
6
6
  * @whenNot A brief confirmation that should disappear on its own, or a status label.
7
7
  * @useInstead ToastProvider a brief confirmation that fades away
8
8
  * @useInstead Badge a short status label
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=33-34
10
10
  */
11
11
  import React from 'react';
12
12
  type AlertTone = 'success' | 'danger' | 'warning' | 'info';
@@ -3,7 +3,7 @@
3
3
  * Contexts: default, lightbox, and detail.
4
4
  * @category Display
5
5
  * @tier primitive
6
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2041-67
6
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-67
7
7
  */
8
8
  import { CSSProperties } from 'react';
9
9
  import type React from 'react';
@@ -2,7 +2,7 @@
2
2
  * AvatarGroup — an overlapping cluster of Avatars with an overflow count.
3
3
  * @category Display
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2030-63
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2030-63
6
6
  */
7
7
  import * as React from 'react';
8
8
  import { type VariantProps } from 'class-variance-authority';
@@ -6,7 +6,7 @@
6
6
  * @whenNot A generic pictogram, or a status marker.
7
7
  * @useInstead Icon a generic pictogram
8
8
  * @useInstead Badge a status marker
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18
10
10
  */
11
11
  import * as React from 'react';
12
12
  import { type VariantProps } from 'class-variance-authority';
@@ -6,7 +6,7 @@
6
6
  * @whenNot A chip people can toggle, or a message that needs a sentence.
7
7
  * @useInstead Tag an interactive filter or category chip
8
8
  * @useInstead Alert a message that needs a sentence
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15
10
10
  */
11
11
  import * as React from 'react';
12
12
  import { type VariantProps } from 'class-variance-authority';
@@ -2,7 +2,7 @@
2
2
  * Blockquote — quoted passage with an optional attribution.
3
3
  * @category Typography
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2024-18
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2024-18
6
6
  */
7
7
  import * as React from 'react';
8
8
  import { type VariantProps } from 'class-variance-authority';
@@ -6,7 +6,7 @@
6
6
  * @whenNot Switching between sibling views, or stepping through pages of results.
7
7
  * @useInstead Tabs switching between sibling views
8
8
  * @useInstead Pagination stepping through pages of results
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159
10
10
  */
11
11
  import * as React from 'react';
12
12
  /** @public */
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * @category Actions
3
3
  * @tier primitive
4
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138
4
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138
5
5
  * @figma Variant=Button/Variant
6
6
  * @figma Size=Button/Size
7
7
  */
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * @category Feedback
3
3
  * @tier primitive
4
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85
4
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85
5
5
  */
6
6
  import * as React from 'react';
7
7
  import { type VariantProps } from 'class-variance-authority';
@@ -139,7 +139,7 @@ declare const CardMetric: React.ForwardRefExoticComponent<CardMetricProps & Reac
139
139
  /**
140
140
  * Tagged per-export, not on the file block: this module exports eight
141
141
  * components and a file-level @figma would hand all eight this one node.
142
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11
142
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11
143
143
  * @usage Group related content on a raised surface with header, body, footer and metric slots, or as one selectable option.
144
144
  * @whenNot A bare padded background with no slot anatomy, or a single headline figure.
145
145
  * @useInstead Surface a padded background without slot anatomy
@@ -6,7 +6,7 @@
6
6
  * @whenNot An immediate on/off setting, or a choice of exactly one option from a set.
7
7
  * @useInstead Toggle a setting that applies as soon as it flips
8
8
  * @useInstead Radio exactly one choice from a set
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29
10
10
  */
11
11
  import type { InputHTMLAttributes } from 'react';
12
12
  /** Checkbox — custom-drawn checkbox with check / indeterminate glyph. */
@@ -2,7 +2,7 @@
2
2
  * CodeBlock - code display with copy button and optional collapsible toggle.
3
3
  * @category Display
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154
6
6
  */
7
7
  declare const blockContainerVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
8
8
  declare const inlineWrapperVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
@@ -12,7 +12,7 @@
12
12
  * @keyboard Enter Commits the active option and closes the list; with `multiple`, toggles it and keeps the list open.
13
13
  * @keyboard Escape Closes the list.
14
14
  * @keyboard Tab Stays inside the open list.
15
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237
15
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237
16
16
  * @doc-exempt: no Inputs-overlay doc page yet — add demo when created
17
17
  *
18
18
  * A select-with-search built on the HDS Popover. The trigger shows the current
@@ -2,7 +2,7 @@
2
2
  * DataTableSection - a titled table with a toolbar, row actions and an empty state.
3
3
  * @category Display
4
4
  * @tier pattern
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2075-268
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268
6
6
  */
7
7
  import * as React from 'react';
8
8
  import { type TableColumn } from './table.js';
@@ -2,7 +2,7 @@
2
2
  * DestructiveSection - the one place a screen puts an irreversible action.
3
3
  * @category Actions
4
4
  * @tier pattern
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2076-3
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3
6
6
  */
7
7
  import * as React from 'react';
8
8
  /** @public */
@@ -97,7 +97,7 @@ interface DialogComponent extends React.FC<DialogProps> {
97
97
  * @keyboard Escape Closes the dialog and returns focus to the trigger.
98
98
  * @keyboard Tab Cycles focus inside the open dialog.
99
99
  * @keyboard Shift+Tab Cycles focus backwards inside the open dialog.
100
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27
100
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27
101
101
  */
102
102
  export declare const Dialog: DialogComponent;
103
103
  export { DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };
@@ -5,7 +5,7 @@
5
5
  * @usage Hide optional explanatory content behind a heading that people can expand.
6
6
  * @whenNot Content people must see, or switching between panels.
7
7
  * @useInstead Tabs switching between panels of content
8
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453
8
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453
9
9
  */
10
10
  import React, { type CSSProperties, type ReactNode } from 'react';
11
11
  type DisclosureVariant = 'panel' | 'nav' | 'card';
@@ -6,7 +6,7 @@
6
6
  * @whenNot Spacing alone would do, or the separation needs a container.
7
7
  * @useInstead Stack gap-based spacing between siblings
8
8
  * @useInstead Surface a bounded region with its own background
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26
10
10
  */
11
11
  import * as React from 'react';
12
12
  import { type VariantProps } from 'class-variance-authority';
@@ -6,7 +6,7 @@
6
6
  * @whenNot Content that is still loading, or a full-page error.
7
7
  * @useInstead Skeleton content that is still loading
8
8
  * @useInstead Alert a message about something that went wrong
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352
10
10
  * @ai-intent Inline empty-state placeholder so any list, grid, or section can
11
11
  * communicate "no data yet" with consistent muted typography instead of agents
12
12
  * inventing one-off `<p>No items.</p>` lines.
@@ -5,7 +5,7 @@
5
5
  * @whenNot Editable input, or a single headline figure.
6
6
  * @useInstead Input an editable single-line value
7
7
  * @useInstead Card.Metric a headline figure inside a Card
8
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81
8
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81
9
9
  */
10
10
  import * as React from 'react';
11
11
  import { type VariantProps } from 'class-variance-authority';
@@ -2,7 +2,7 @@
2
2
  * FormActions - the footer row of a form: primary right-most, secondary to its left.
3
3
  * @category Actions
4
4
  * @tier pattern
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2075-87
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87
6
6
  */
7
7
  import * as React from 'react';
8
8
  /** @public */
@@ -37,7 +37,7 @@ export type FormProps = React.FormHTMLAttributes<HTMLFormElement>;
37
37
  *
38
38
  * Tagged per-export: FormField and FormFieldShell share this module and have no
39
39
  * Figma node, so a file-level @figma would claim this one for all three.
40
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94
40
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94
41
41
  */
42
42
  export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
43
43
  /** @public */
@@ -2,7 +2,7 @@
2
2
  * Tooltip — accessible hover/focus tooltip on Radix (Overlays).
3
3
  * @category Overlays
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-15
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15
6
6
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
7
7
  *
8
8
  * Radix Tooltip (@radix-ui/react-tooltip) themed with role tokens. Provides
@@ -2,7 +2,7 @@
2
2
  * Icon — semantic icon wrapper for Lucide icons.
3
3
  * @category Display
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=27-2
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2
6
6
  * @usage Draw a Lucide glyph at a size and colour from the design tokens.
7
7
  * @whenNot A control someone can activate, or a picture that carries content.
8
8
  * @useInstead Button a clickable control, with iconOnly for an icon-only one
@@ -6,7 +6,7 @@
6
6
  * @whenNot An action that changes something, or a control that needs button styling.
7
7
  * @useInstead Button an action or a link that needs button styling
8
8
  * @useInstead Text unlinked body copy
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161
10
10
  */
11
11
  import React from 'react';
12
12
  export interface InlineLinkProps {
@@ -7,7 +7,7 @@
7
7
  * @useInstead Textarea multi-line text
8
8
  * @useInstead Select a short fixed list
9
9
  * @useInstead Combobox a long fixed list that needs search
10
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20
10
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20
11
11
  */
12
12
  import * as React from 'react';
13
13
  import { type VariantProps } from 'class-variance-authority';
@@ -2,7 +2,7 @@
2
2
  * Kbd — inline keyboard key / shortcut hint rendered as a native <kbd>.
3
3
  * @category Display
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2026-9
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9
6
6
  * @usage Show a keyboard key or shortcut hint inline, as a native kbd element.
7
7
  * @whenNot Code samples, or a control that runs the shortcut.
8
8
  * @useInstead Text inline code and other typography
@@ -2,7 +2,7 @@
2
2
  * Menu — dropdown menu (shadcn baseline, compound parts).
3
3
  * @category Overlays
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59
6
6
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
7
7
  *
8
8
  * Radix DropdownMenu (@radix-ui/react-dropdown-menu) themed with the overlay
@@ -3,7 +3,7 @@
3
3
  * Owner, Updated…). The idiomatic replacement for badge-stickers-on-prose.
4
4
  * @category Display
5
5
  * @tier pattern
6
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2041-47
6
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47
7
7
  * @public
8
8
  */
9
9
  import * as React from 'react';
@@ -22,7 +22,7 @@ export interface MetricTileProps extends Omit<React.HTMLAttributes<HTMLDivElemen
22
22
  * surface at one fixed min-height. Wraps `Card.Metric` (the sibling with the
23
23
  * eyebrow / h2 / caption scale) and adds the surface and the fixed height, so a
24
24
  * tile needs no enclosing `Card`.
25
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2075-114
25
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114
26
26
  */
27
27
  export declare const MetricTile: React.ForwardRefExoticComponent<MetricTileProps & React.RefAttributes<HTMLDivElement>>;
28
28
  /** @public */
@@ -5,7 +5,7 @@
5
5
  * @usage Move between pages of a long result set, with truncated page numbers.
6
6
  * @whenNot A hierarchy trail, or a short list that fits on one page.
7
7
  * @useInstead Breadcrumb a hierarchy trail
8
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194
8
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194
9
9
  */
10
10
  import * as React from 'react';
11
11
  type PageToken = number | 'ellipsis';
@@ -2,7 +2,7 @@
2
2
  * Popover — floating surface anchored to a trigger (shadcn baseline, compound parts).
3
3
  * @category Overlays
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32
6
6
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
7
7
  *
8
8
  * Radix Popover (@radix-ui/react-popover) themed with role tokens. Provides
@@ -6,7 +6,7 @@
6
6
  * @whenNot A wait of unknown length with no bar, or content that is still loading.
7
7
  * @useInstead Spinner a wait of unknown length
8
8
  * @useInstead Skeleton placeholder shapes for loading content
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91
10
10
  */
11
11
  import * as React from 'react';
12
12
  import { type VariantProps } from 'class-variance-authority';
@@ -7,7 +7,7 @@
7
7
  * @useInstead Checkbox independent options that can be ticked together
8
8
  * @useInstead Select a long list that can collapse into a dropdown
9
9
  * @useInstead SegmentedControl a compact switch between two to five views or modes
10
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17
10
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17
11
11
  */
12
12
  import type { InputHTMLAttributes } from 'react';
13
13
  /** Radio — radio button with animated selection indicator. */
@@ -13,7 +13,7 @@
13
13
  * @keyboard Enter Commits the highlighted option and returns focus to the trigger.
14
14
  * @keyboard Escape Closes the listbox and returns focus to the trigger.
15
15
  * @keyboard Tab Does not leave the open listbox.
16
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49
16
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49
17
17
  */
18
18
  /**
19
19
  * Select — dropdown selector built on Radix Select (ADR-001 Radix convention).
@@ -6,7 +6,7 @@
6
6
  * @whenNot A task with measurable progress, or a wait with no layout to reserve.
7
7
  * @useInstead Progress a task with measurable progress
8
8
  * @useInstead Spinner a short wait with no layout to reserve
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95
10
10
  */
11
11
  import * as React from 'react';
12
12
  import { type VariantProps } from 'class-variance-authority';
@@ -5,7 +5,7 @@
5
5
  * @usage Pick a number within a known range by dragging, when the exact value matters less than the position.
6
6
  * @whenNot A precise number the person must type or read exactly.
7
7
  * @useInstead Input a precise typed value (type="number")
8
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265
8
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265
9
9
  */
10
10
  /** Slider — range slider with label and value display. */
11
11
  export interface SliderProps {
@@ -6,7 +6,7 @@
6
6
  * @whenNot A task with measurable progress, or a region whose layout is known.
7
7
  * @useInstead Progress a task with measurable progress
8
8
  * @useInstead Skeleton a region whose layout is known
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106
10
10
  */
11
11
  import * as React from 'react';
12
12
  import { type VariantProps } from 'class-variance-authority';
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * @category Display
3
3
  * @tier primitive
4
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247
4
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-247
5
5
  */
6
6
  import * as React from 'react';
7
7
  import { type VariantProps } from 'class-variance-authority';
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * @category Display
3
3
  * @tier pattern
4
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350
4
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-350
5
5
  */
6
6
  import * as React from 'react';
7
7
  import { type VariantProps } from 'class-variance-authority';
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * @category Display
3
3
  * @tier pattern
4
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292
4
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292
5
5
  */
6
6
  import * as React from 'react';
7
7
  export type StatusTileTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
@@ -6,7 +6,7 @@
6
6
  * @whenNot A single record, a short list of links, or content that reflows as cards.
7
7
  * @useInstead Field one record as label and value pairs
8
8
  * @useInstead Stack a short list of items
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300
10
10
  */
11
11
  import { type ReactNode } from 'react';
12
12
  /** @public */
@@ -29,7 +29,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
29
29
  * @whenNot A compact mode switch with no panels, or content that must all be visible.
30
30
  * @useInstead SegmentedControl a compact switch with no panels
31
31
  * @useInstead Disclosure optional content that expands in place
32
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89
32
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89
33
33
  */
34
34
  export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
35
35
  export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
@@ -5,7 +5,7 @@
5
5
  * @usage Show an interactive filter or category chip that people can toggle.
6
6
  * @whenNot A read-only status or count label.
7
7
  * @useInstead Badge a read-only status or count
8
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11
8
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11
9
9
  *
10
10
  * The outer <button> carries the accessible 44px hit target directly via the
11
11
  * size token while the inner pill keeps the visible surface compact. Colors
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * @category Typography
5
5
  * @tier primitive
6
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2022-31
6
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31
7
7
  * @usage Set any text on the type ramp, with the element chosen by `as`.
8
8
  * @whenNot Navigation links, or a keyboard hint.
9
9
  * @useInstead InlineLink a link inside body copy
@@ -5,7 +5,7 @@
5
5
  * @usage Collect multi-line free text such as a message, note or description.
6
6
  * @whenNot A single line of text, or choosing from a list.
7
7
  * @useInstead Input a single line of text
8
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14
8
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14
9
9
  *
10
10
  * Mirrors Input's shell + token skin as a native `<textarea>`. Figma parity:
11
11
  * the four states Default / Focus / Error / Disabled map to the focus-ring,
@@ -2,7 +2,7 @@
2
2
  * Timestamp — renders a date/time as a semantic <time> element.
3
3
  * @category Display
4
4
  * @tier primitive
5
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2031-11
5
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11
6
6
  */
7
7
  import * as React from 'react';
8
8
  /** @public */
@@ -6,7 +6,7 @@
6
6
  * @whenNot A message people must act on or that must stay next to its content.
7
7
  * @useInstead Alert a message that stays next to its content
8
8
  * @useInstead Dialog a message that needs a decision
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367
10
10
  * @doc-exempt: no Overlays/Feedback-overlay doc page yet — add demo when created
11
11
  *
12
12
  * Imperative API: wrap the app once in <ToastProvider>, then call
@@ -6,7 +6,7 @@
6
6
  * @whenNot A choice that only takes effect after submitting a form, or picking from several options.
7
7
  * @useInstead Checkbox a form option confirmed on submit
8
8
  * @useInstead Radio one choice from a set
9
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19
9
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19
10
10
  */
11
11
  import type { InputHTMLAttributes } from 'react';
12
12
  /** Toggle — boolean on/off toggle with animated thumb. */