@hirobius/design-system 0.13.1 → 0.14.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 (67) hide show
  1. package/README.md +49 -6
  2. package/dist/contexts.js +62 -60
  3. package/dist/hirobius-ui.js +4040 -3347
  4. package/dist/manifest.js +7 -7
  5. package/dist/styles.css +1 -1
  6. package/dist/tokens.css +1 -1
  7. package/dist/types/src/app/components/activity-feed.d.ts +6 -0
  8. package/dist/types/src/app/components/avatar.d.ts +1 -0
  9. package/dist/types/src/app/components/badge.d.ts +1 -0
  10. package/dist/types/src/app/components/box.d.ts +2 -2
  11. package/dist/types/src/app/components/breadcrumb.d.ts +1 -0
  12. package/dist/types/src/app/components/button.d.ts +1 -0
  13. package/dist/types/src/app/components/callout.d.ts +1 -0
  14. package/dist/types/src/app/components/card.d.ts +7 -2
  15. package/dist/types/src/app/components/checkbox.d.ts +1 -0
  16. package/dist/types/src/app/components/code-block.d.ts +1 -0
  17. package/dist/types/src/app/components/combobox.d.ts +1 -0
  18. package/dist/types/src/app/components/dialog.d.ts +5 -0
  19. package/dist/types/src/app/components/disclosure.d.ts +1 -0
  20. package/dist/types/src/app/components/divider.d.ts +4 -0
  21. package/dist/types/src/app/components/empty-state.d.ts +1 -0
  22. package/dist/types/src/app/components/field.d.ts +1 -0
  23. package/dist/types/src/app/components/form.d.ts +7 -1
  24. package/dist/types/src/app/components/icon-button.d.ts +2 -2
  25. package/dist/types/src/app/components/icon.d.ts +1 -1
  26. package/dist/types/src/app/components/inline-code.d.ts +3 -0
  27. package/dist/types/src/app/components/inline-link.d.ts +1 -0
  28. package/dist/types/src/app/components/input.d.ts +1 -0
  29. package/dist/types/src/app/components/menu.d.ts +1 -0
  30. package/dist/types/src/app/components/nav-group.d.ts +2 -2
  31. package/dist/types/src/app/components/nav-item.d.ts +1 -1
  32. package/dist/types/src/app/components/pagination.d.ts +1 -0
  33. package/dist/types/src/app/components/popover.d.ts +1 -0
  34. package/dist/types/src/app/components/progress.d.ts +1 -0
  35. package/dist/types/src/app/components/radio.d.ts +1 -0
  36. package/dist/types/src/app/components/skeleton.d.ts +1 -0
  37. package/dist/types/src/app/components/slider.d.ts +1 -0
  38. package/dist/types/src/app/components/spinner.d.ts +1 -0
  39. package/dist/types/src/app/components/stack.d.ts +1 -1
  40. package/dist/types/src/app/components/stat.d.ts +1 -0
  41. package/dist/types/src/app/components/status-list-item.d.ts +1 -0
  42. package/dist/types/src/app/components/status-tile.d.ts +1 -0
  43. package/dist/types/src/app/components/surface.d.ts +1 -1
  44. package/dist/types/src/app/components/table.d.ts +1 -0
  45. package/dist/types/src/app/components/tabs.d.ts +6 -0
  46. package/dist/types/src/app/components/tag.d.ts +1 -0
  47. package/dist/types/src/app/components/textarea.d.ts +1 -0
  48. package/dist/types/src/app/components/toast.d.ts +1 -0
  49. package/dist/types/src/app/components/toggle.d.ts +1 -0
  50. package/dist/types/src/app/context/TenantContext.d.ts +19 -5
  51. package/dist/types/src/app/context/index.d.ts +7 -7
  52. package/dist/types/src/app/design-system/generated-token-refs.d.ts +1 -1
  53. package/dist/types/src/app/design-system/generated-token-values.d.ts +1 -1
  54. package/dist/types/src/app/design-system/theme.d.ts +1 -1
  55. package/dist/types/src/app/design-system/tokens.d.ts +2 -2
  56. package/dist/types/src/app/hooks/useHdsMotion.d.ts +1 -1
  57. package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts +1 -1
  58. package/dist/types/src/app/lib/hds-search.d.ts +1 -1
  59. package/dist/types/src/brand/index.d.ts +1 -1
  60. package/dist/types/src/form/index.d.ts +3 -3
  61. package/dist/types/src/index.d.ts +116 -116
  62. package/dist/types/src/lib/env.d.ts +31 -0
  63. package/dist/types/src/lib/manifest-entry.d.ts +1 -1
  64. package/dist/types/src/scroll/index.d.ts +2 -2
  65. package/hirobius.tokens.json +3 -3
  66. package/package.json +8 -5
  67. package/public/hds-manifest.json +783 -90
@@ -21,6 +21,10 @@ import type { ReactNode } from 'react';
21
21
  * fixed HDS tone vocabulary (`neutral | danger | success | warning | info`,
22
22
  * see docs/architecture/variant-contract.md). `'error'` remains supported
23
23
  * here as a back-compat alias for `'danger'`; new code should use `tone`.
24
+ *
25
+ * @removeIn 1.0.0 — CHANGELOG 0.13.0 already states `status`/`ActivityStatus`
26
+ * go in a future major. Dropping a prop is breaking, so 1.0.0 is the first
27
+ * version that can carry it.
24
28
  */
25
29
  export type ActivityStatus = 'success' | 'error' | 'warning' | 'info' | 'neutral';
26
30
  /** @public */
@@ -40,6 +44,8 @@ export interface ActivityEvent {
40
44
  /**
41
45
  * @deprecated Use `tone` instead. Retained for back-compat; `'error'`
42
46
  * resolves to the `danger` tone.
47
+ *
48
+ * @removeIn 1.0.0 — paired with ActivityStatus above; both go together.
43
49
  */
44
50
  status?: ActivityStatus;
45
51
  action?: {
@@ -2,6 +2,7 @@
2
2
  * Avatar - user or entity image with an initials fallback.
3
3
  * @category Display
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18
5
6
  */
6
7
  import * as React from 'react';
7
8
  import { type VariantProps } from 'class-variance-authority';
@@ -2,6 +2,7 @@
2
2
  * Badge - compact feedback badge for neutral and semantic states.
3
3
  * @category Feedback
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15
5
6
  */
6
7
  import * as React from 'react';
7
8
  import { type VariantProps } from 'class-variance-authority';
@@ -27,8 +27,8 @@
27
27
  * See `box-sx.ts` for the pure resolver + hashing/injection engine.
28
28
  */
29
29
  import React from 'react';
30
- import { type SxObject } from './box-sx';
31
- export type { SxObject, SxValue, ResponsiveValue, Breakpoint } from './box-sx';
30
+ import { type SxObject } from './box-sx.js';
31
+ export type { SxObject, SxValue, ResponsiveValue, Breakpoint } from './box-sx.js';
32
32
  /** @public */
33
33
  export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
34
34
  /** Element (or component) rendered as the outer wrapper. Defaults to 'div'. */
@@ -2,6 +2,7 @@
2
2
  * Breadcrumb - hierarchical navigation trail.
3
3
  * @category Navigation
4
4
  * @tier pattern
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159
5
6
  */
6
7
  import * as React from 'react';
7
8
  declare const crumbLabelVariants: (props?: {
@@ -1,6 +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
5
  * @figma Variant=Button/Variant
5
6
  * @figma Size=Button/Size
6
7
  */
@@ -1,6 +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
5
  */
5
6
  import * as React from 'react';
6
7
  import { type VariantProps } from 'class-variance-authority';
@@ -44,8 +44,8 @@
44
44
  * for a hover/floating treatment on interactive cards.
45
45
  */
46
46
  import * as React from 'react';
47
- import hds from '../design-system/tokens';
48
- import { type PaddingOption } from './surface-padding';
47
+ import hds from '../design-system/tokens.js';
48
+ import { type PaddingOption } from './surface-padding.js';
49
49
  type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;
50
50
  /** @public */
51
51
  export type CardVariant = 'default' | 'accent';
@@ -129,6 +129,11 @@ interface CardMetricProps extends React.HTMLAttributes<HTMLDivElement> {
129
129
  tone?: CardTone;
130
130
  }
131
131
  declare const CardMetric: React.ForwardRefExoticComponent<CardMetricProps & React.RefAttributes<HTMLDivElement>>;
132
+ /**
133
+ * Tagged per-export, not on the file block: this module exports eight
134
+ * components and a file-level @figma would hand all eight this one node.
135
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11
136
+ */
132
137
  export declare const Card: CardComponent;
133
138
  export { CardHeader, CardTitle, CardDescription, CardBody, CardFooter, CardProgress, CardMetric };
134
139
  /** @internal — CVA variant helper; compose via Card props instead. */
@@ -2,6 +2,7 @@
2
2
  * HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph.
3
3
  * @category Inputs
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29
5
6
  */
6
7
  import type { InputHTMLAttributes } from 'react';
7
8
  /** HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph. */
@@ -2,6 +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
6
  */
6
7
  declare const blockContainerVariants: (props?: import("class-variance-authority/dist/types").ClassProp) => string;
7
8
  declare const inlineWrapperVariants: (props?: import("class-variance-authority/dist/types").ClassProp) => string;
@@ -2,6 +2,7 @@
2
2
  * Combobox — searchable single-select (Popover + filtered listbox).
3
3
  * @category Inputs
4
4
  * @tier pattern
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237
5
6
  * @doc-exempt: no Inputs-overlay doc page yet — add demo when created
6
7
  *
7
8
  * A select-with-search built on the HDS Popover. The trigger shows the current
@@ -69,5 +69,10 @@ interface DialogComponent extends React.FC<DialogProps> {
69
69
  Description: typeof DialogDescription;
70
70
  Close: typeof DialogClose;
71
71
  }
72
+ /**
73
+ * Tagged per-export, not on the file block: this module exports ten components
74
+ * and a file-level @figma would hand all ten this one node.
75
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27
76
+ */
72
77
  export declare const Dialog: DialogComponent;
73
78
  export { DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };
@@ -2,6 +2,7 @@
2
2
  * Disclosure - compact disclosure surface for optional explanatory content.
3
3
  * @category Layout
4
4
  * @tier pattern
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453
5
6
  */
6
7
  import React, { type CSSProperties, type ReactNode } from 'react';
7
8
  type DisclosureVariant = 'panel' | 'nav' | 'card';
@@ -2,6 +2,7 @@
2
2
  * Divider — semantic separator between content regions.
3
3
  * @category Layout
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26
5
6
  */
6
7
  import * as React from 'react';
7
8
  import { type VariantProps } from 'class-variance-authority';
@@ -17,6 +18,9 @@ export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>,
17
18
  /**
18
19
  * @deprecated Use `variant="strong"` instead. Kept for backward
19
20
  * compatibility; when set, it takes precedence over `variant`.
21
+ *
22
+ * @removeIn 1.0.0 — a boolean superseded by a variant axis. Removing it
23
+ * is breaking, so it waits for the major.
20
24
  */
21
25
  strong?: boolean;
22
26
  }
@@ -2,6 +2,7 @@
2
2
  * EmptyState — consistent no-data placeholder for lists, grids, and sections.
3
3
  * @category Display
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352
5
6
  * @ai-intent Inline empty-state placeholder so any list, grid, or section can
6
7
  * communicate "no data yet" with consistent muted typography instead of agents
7
8
  * inventing one-off `<p>No items.</p>` lines.
@@ -1,6 +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=85-81
4
5
  */
5
6
  import * as React from 'react';
6
7
  import { type VariantProps } from 'class-variance-authority';
@@ -32,7 +32,13 @@
32
32
  import * as React from 'react';
33
33
  /** @public */
34
34
  export type FormProps = React.FormHTMLAttributes<HTMLFormElement>;
35
- /** Styled `<form>` with consistent vertical field rhythm. */
35
+ /**
36
+ * Styled `<form>` with consistent vertical field rhythm.
37
+ *
38
+ * Tagged per-export: FormField and FormFieldShell share this module and have no
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
41
+ */
36
42
  export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
37
43
  /** @public */
38
44
  export interface FieldWiringInput {
@@ -1,6 +1,6 @@
1
1
  import type { LucideIcon } from 'lucide-react';
2
- import { ButtonProps } from './button';
3
- import { IconSize } from './icon';
2
+ import { ButtonProps } from './button.js';
3
+ import { IconSize } from './icon.js';
4
4
  interface IconButtonProps extends Omit<ButtonProps, 'iconOnly' | 'children' | 'size'> {
5
5
  /** Lucide icon rendered inside the button. */
6
6
  icon: LucideIcon;
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import React from 'react';
7
7
  import type { LucideIcon } from 'lucide-react';
8
- import hds from '../design-system/tokens';
8
+ import hds from '../design-system/tokens.js';
9
9
  /** @public */
10
10
  export type IconSize = keyof typeof hds.iconSize | number | string;
11
11
  export interface IconProps {
@@ -12,6 +12,9 @@ type InlineCodeProps = {
12
12
  /**
13
13
  * @deprecated Use `density="compact"` instead. Kept for backward
14
14
  * compatibility; when set, it takes precedence over `density`.
15
+ *
16
+ * @removeIn 1.0.0 — a boolean superseded by a variant axis, breaking to
17
+ * remove, so it waits for the major.
15
18
  */
16
19
  compact?: boolean;
17
20
  /** Show a copy-to-clipboard button. children must be a string when true. */
@@ -2,6 +2,7 @@
2
2
  * InlineLink ” inline navigation and external-link primitive for body copy.
3
3
  * @category Navigation
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161
5
6
  */
6
7
  import React from 'react';
7
8
  interface InlineLinkProps {
@@ -2,6 +2,7 @@
2
2
  * Input — text field primitive with label, helper, and error slots.
3
3
  * @category Inputs
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20
5
6
  */
6
7
  import * as React from 'react';
7
8
  import { type VariantProps } from 'class-variance-authority';
@@ -2,6 +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
6
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
6
7
  *
7
8
  * Radix DropdownMenu (@radix-ui/react-dropdown-menu) themed with the overlay
@@ -1,6 +1,6 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
- import { type NavLevel } from '../lib/navLevels';
3
- import { NavItem } from './nav-item';
2
+ import { type NavLevel } from '../lib/navLevels.js';
3
+ import { NavItem } from './nav-item.js';
4
4
  type NavItem = {
5
5
  path: string;
6
6
  label: string;
@@ -1,6 +1,6 @@
1
1
  import type { AnchorHTMLAttributes, MouseEvent } from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
- import { type NavLevel } from '../lib/navLevels';
3
+ import { type NavLevel } from '../lib/navLevels.js';
4
4
  declare const navItemVariants: (props?: {
5
5
  variant?: "side" | "toc";
6
6
  state?: "default" | "active" | "disabled" | "focus" | "hover";
@@ -2,6 +2,7 @@
2
2
  * Pagination - paged navigation control with truncation.
3
3
  * @category Navigation
4
4
  * @tier pattern
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194
5
6
  */
6
7
  import * as React from 'react';
7
8
  type PageToken = number | 'ellipsis';
@@ -2,6 +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
6
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
6
7
  *
7
8
  * Radix Popover (@radix-ui/react-popover) themed with role tokens. Provides
@@ -2,6 +2,7 @@
2
2
  * Progress - linear progress bar (determinate or indeterminate).
3
3
  * @category Feedback
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91
5
6
  */
6
7
  import * as React from 'react';
7
8
  import { type VariantProps } from 'class-variance-authority';
@@ -2,6 +2,7 @@
2
2
  * HdsRadio — radio button with animated selection indicator.
3
3
  * @category Inputs
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17
5
6
  */
6
7
  import type { InputHTMLAttributes } from 'react';
7
8
  /** HdsRadio — radio button with animated selection indicator. */
@@ -2,6 +2,7 @@
2
2
  * Skeleton - placeholder shimmer for content that is still loading.
3
3
  * @category Feedback
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95
5
6
  */
6
7
  import * as React from 'react';
7
8
  import { type VariantProps } from 'class-variance-authority';
@@ -2,6 +2,7 @@
2
2
  * HdsSlider — range slider with label and value display.
3
3
  * @category Inputs
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265
5
6
  */
6
7
  /** HdsSlider — range slider with label and value display. */
7
8
  interface SliderProps {
@@ -2,6 +2,7 @@
2
2
  * Spinner - indeterminate loading indicator.
3
3
  * @category Feedback
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106
5
6
  */
6
7
  import * as React from 'react';
7
8
  import { type VariantProps } from 'class-variance-authority';
@@ -6,7 +6,7 @@
6
6
  * @ai-rules Use Stack for flow spacing and simple flex alignment only. Do NOT use Stack to create card chrome, internal surface padding, or page-width constraints. Do NOT apply arbitrary margins to Stack to fake spacing between children when the gap prop should own that rhythm. Do NOT use Stack for true two-dimensional layouts that require Grid.
7
7
  */
8
8
  import React from 'react';
9
- import hds from '../design-system/tokens';
9
+ import hds from '../design-system/tokens.js';
10
10
  type SemanticGap = 'tight' | 'normal' | 'inset' | 'spacious';
11
11
  type ComponentGap = 'gap' | 'medium';
12
12
  type SubgridGap = 'hairline' | 'xs' | 'gap';
@@ -1,6 +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
5
  */
5
6
  import * as React from 'react';
6
7
  import { type VariantProps } from 'class-variance-authority';
@@ -1,6 +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
5
  */
5
6
  import * as React from 'react';
6
7
  import { type VariantProps } from 'class-variance-authority';
@@ -1,6 +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
5
  */
5
6
  import * as React from 'react';
6
7
  export type StatusTileTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
@@ -1,6 +1,6 @@
1
1
  import React, { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
- import type { PaddingOption } from './surface-padding';
3
+ import type { PaddingOption } from './surface-padding.js';
4
4
  declare const surfaceVariants: (props?: {
5
5
  padding?: "none" | "item" | "px16" | "px24" | "component";
6
6
  shadow?: boolean;
@@ -2,6 +2,7 @@
2
2
  * Table - structured data table primitive for documentation and compact UI matrices.
3
3
  * @category Display
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300
5
6
  */
6
7
  import { type ReactNode } from 'react';
7
8
  declare const tableHeaderCellVariants: (props?: {
@@ -21,6 +21,12 @@
21
21
  * @tier primitive
22
22
  */
23
23
  import * as TabsPrimitive from '@radix-ui/react-tabs';
24
+ /**
25
+ * The tab set itself. Tagged here rather than in the file block because
26
+ * TabsList and TabsContent share this module and have no Figma node of their
27
+ * own — a file-level @figma would silently claim this node for all four.
28
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89
29
+ */
24
30
  export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
25
31
  export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
26
32
  export declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
@@ -2,6 +2,7 @@
2
2
  * Tag — interactive filter and category chip.
3
3
  * @category Inputs
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11
5
6
  *
6
7
  * The outer <button> carries the accessible 44px hit target directly via the
7
8
  * size token while the inner pill keeps the visible surface compact. Colors
@@ -2,6 +2,7 @@
2
2
  * Textarea — multi-line text field primitive with label, helper, and error slots.
3
3
  * @category Inputs
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14
5
6
  *
6
7
  * Mirrors Input's shell + token skin as a native `<textarea>`. Figma parity:
7
8
  * the four states Default / Focus / Error / Disabled map to the focus-ring,
@@ -2,6 +2,7 @@
2
2
  * Toast — transient feedback notifications (Radix Toast).
3
3
  * @category Feedback
4
4
  * @tier pattern
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367
5
6
  * @doc-exempt: no Overlays/Feedback-overlay doc page yet — add demo when created
6
7
  *
7
8
  * Imperative API: wrap the app once in <ToastProvider>, then call
@@ -2,6 +2,7 @@
2
2
  * HdsToggle — boolean on/off toggle with animated thumb.
3
3
  * @category Inputs
4
4
  * @tier primitive
5
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19
5
6
  */
6
7
  import type { InputHTMLAttributes } from 'react';
7
8
  /** HdsToggle — boolean on/off toggle with animated thumb. */
@@ -7,15 +7,29 @@ interface TenantCtx {
7
7
  /**
8
8
  * TenantProvider
9
9
  *
10
- * Reads VITE_TENANT_SLUG from the Vite environment and, if set, writes
11
- * `data-tenant="<slug>"` onto `<html>` so CSS tenant-scope selectors
10
+ * Writes `data-tenant="<slug>"` onto `<html>` so CSS tenant-scope selectors
12
11
  * (e.g. `[data-tenant="acme"] .hds-button`) resolve correctly at runtime.
13
12
  *
14
- * Single-tenant deployments that never set VITE_TENANT_SLUG are unaffected:
15
- * no attribute is written and no context value is populated.
13
+ * Pass the slug in. It used to be read from `VITE_TENANT_SLUG` via
14
+ * `import.meta.env`, which the library build evaluated at HDS's build time
15
+ * rather than the consumer's — it baked to `{}` in `dist/contexts.js`, so the
16
+ * provider had been an inert no-op for every installed consumer regardless of
17
+ * what they set. Taking a prop is therefore not a behaviour change for anyone
18
+ * downstream: it is the first version that works at all.
19
+ *
20
+ * An app that still wants an env var reads it itself and passes the result,
21
+ * which is the only place that knows its own build:
22
+ *
23
+ * ```tsx
24
+ * <TenantProvider slug={import.meta.env.VITE_TENANT_SLUG as TenantSlug}>
25
+ * ```
26
+ *
27
+ * Omitting `slug` writes no attribute and populates no context value.
16
28
  */
17
- export declare function TenantProvider({ children }: {
29
+ export declare function TenantProvider({ children, slug, }: {
18
30
  children: ReactNode;
31
+ /** The active tenant, or null for a single-tenant deployment. */
32
+ slug?: TenantSlug | null;
19
33
  }): import("react/jsx-runtime").JSX.Element;
20
34
  /** Returns the active tenant slug (null in single-tenant mode). */
21
35
  export declare function useTenant(): TenantCtx;
@@ -10,10 +10,10 @@
10
10
  * {app}
11
11
  * </FontProvider></ThemeProvider></LanguageProvider></TenantProvider>
12
12
  */
13
- export * from './ThemeContext';
14
- export * from './LanguageContext';
15
- export * from './TenantContext';
16
- export * from './FontContext';
17
- export * from './DemoStateContext';
18
- export * from './TokenDisplayContext';
19
- export * from './RouterContext';
13
+ export * from './ThemeContext.js';
14
+ export * from './LanguageContext.js';
15
+ export * from './TenantContext.js';
16
+ export * from './FontContext.js';
17
+ export * from './DemoStateContext.js';
18
+ export * from './TokenDisplayContext.js';
19
+ export * from './RouterContext.js';
@@ -7,7 +7,7 @@
7
7
  * Import in tokens.ts or any component that needs a CSS var string without hardcoding.
8
8
  *
9
9
  * Usage:
10
- * import { tokenRefs } from './generated-token-refs';
10
+ * import { tokenRefs } from './generated-token-refs.js';
11
11
  * tokenRefs.semantic.typography.mono // { fontFamily: 'var(...)', ... }
12
12
  * tokenRefs.semantic.color.surface.page // 'var(--semantic-color-surface-page)'
13
13
  */
@@ -7,7 +7,7 @@
7
7
  * Import in doc pages instead of hardcoding hex strings, font names, or OKLCH values.
8
8
  *
9
9
  * Usage:
10
- * import { tokenValues } from './generated-token-values';
10
+ * import { tokenValues } from './generated-token-values.js';
11
11
  * tokenValues.primitive.color.blue['500'] // '#1e2fff'
12
12
  * tokenValues.primitive.typography.family.primary[0] // 'Clash Grotesk'
13
13
  * tokenValues.primitive.color.blue['500'] // 'oklch(0.49 0.2903 266.54)'
@@ -5,7 +5,7 @@
5
5
  * Import this wherever you need resolved colours for a given dark/light mode.
6
6
  *
7
7
  * Usage:
8
- * import { ct } from '../design-system/theme';
8
+ * import { ct } from '../design-system/theme.js';
9
9
  * const t = ct(isDark);
10
10
  * // t.bg, t.content, t.accent, etc.
11
11
  */
@@ -329,5 +329,5 @@ declare const hds: {
329
329
  };
330
330
  /** @public */
331
331
  export default hds;
332
- export { ct } from './theme';
333
- export { tokenValues } from './generated-token-values';
332
+ export { ct } from './theme.js';
333
+ export { tokenValues } from './generated-token-values.js';
@@ -11,6 +11,6 @@
11
11
  * useReducedMotion() is true, one fix point instead of a `MotionConfig`
12
12
  * wrapper per component.
13
13
  */
14
- import hds from '../design-system/tokens';
14
+ import hds from '../design-system/tokens.js';
15
15
  export type HdsMotionCategory = keyof typeof hds.motion;
16
16
  export declare function useHdsMotion<Category extends HdsMotionCategory>(category: Category): (typeof hds.motion)[Category];
@@ -1,5 +1,5 @@
1
1
  import type { ReactNode } from 'react';
2
- import { type DocLayoutContentMaxWidth } from './DocLayout';
2
+ import { type DocLayoutContentMaxWidth } from './DocLayout.js';
3
3
  /** @public */
4
4
  export declare function HdsSystemDocLayout({ contentSlot, contentMaxWidth, }: {
5
5
  contentSlot: ReactNode;
@@ -13,7 +13,7 @@
13
13
  * narrow interface): the UI shell now imports { buildIndex, rank } and owns no
14
14
  * search logic.
15
15
  */
16
- import type { ManifestSpec, RoleToken, SystemManifest } from '../data/manifest-types';
16
+ import type { ManifestSpec, RoleToken, SystemManifest } from '../data/manifest-types.js';
17
17
  export type { ManifestSpec, RoleToken, SystemManifest };
18
18
  export type ResultKind = 'component' | 'pattern' | 'template' | 'utility' | 'token' | 'section';
19
19
  export interface PaletteResult {
@@ -6,4 +6,4 @@
6
6
  * no React and no Node built-ins, so it is safe to pull into a build step or an
7
7
  * edge runtime. See ./overlay.ts and docs on the Astro consumption path.
8
8
  */
9
- export { brandOverlayVars, brandOverlayStyle, brandOverlayCss, type BrandPalette } from './overlay';
9
+ export { brandOverlayVars, brandOverlayStyle, brandOverlayCss, type BrandPalette } from './overlay.js';
@@ -25,6 +25,6 @@
25
25
  *
26
26
  * @doc-ignore subpath barrel, not an HDS component
27
27
  */
28
- export { useHdsForm } from './use-hds-form';
29
- export { HdsForm, HdsFormField } from './hds-form';
30
- export type { HdsFormProps, HdsFormFieldProps, HdsFieldRenderProps } from './hds-form';
28
+ export { useHdsForm } from './use-hds-form.js';
29
+ export { HdsForm, HdsFormField } from './hds-form.js';
30
+ export type { HdsFormProps, HdsFormFieldProps, HdsFieldRenderProps } from './hds-form.js';