@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.
- package/README.md +49 -6
- package/dist/contexts.js +62 -60
- package/dist/hirobius-ui.js +4040 -3347
- package/dist/manifest.js +7 -7
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/types/src/app/components/activity-feed.d.ts +6 -0
- package/dist/types/src/app/components/avatar.d.ts +1 -0
- package/dist/types/src/app/components/badge.d.ts +1 -0
- package/dist/types/src/app/components/box.d.ts +2 -2
- package/dist/types/src/app/components/breadcrumb.d.ts +1 -0
- package/dist/types/src/app/components/button.d.ts +1 -0
- package/dist/types/src/app/components/callout.d.ts +1 -0
- package/dist/types/src/app/components/card.d.ts +7 -2
- package/dist/types/src/app/components/checkbox.d.ts +1 -0
- package/dist/types/src/app/components/code-block.d.ts +1 -0
- package/dist/types/src/app/components/combobox.d.ts +1 -0
- package/dist/types/src/app/components/dialog.d.ts +5 -0
- package/dist/types/src/app/components/disclosure.d.ts +1 -0
- package/dist/types/src/app/components/divider.d.ts +4 -0
- package/dist/types/src/app/components/empty-state.d.ts +1 -0
- package/dist/types/src/app/components/field.d.ts +1 -0
- package/dist/types/src/app/components/form.d.ts +7 -1
- package/dist/types/src/app/components/icon-button.d.ts +2 -2
- package/dist/types/src/app/components/icon.d.ts +1 -1
- package/dist/types/src/app/components/inline-code.d.ts +3 -0
- package/dist/types/src/app/components/inline-link.d.ts +1 -0
- package/dist/types/src/app/components/input.d.ts +1 -0
- package/dist/types/src/app/components/menu.d.ts +1 -0
- package/dist/types/src/app/components/nav-group.d.ts +2 -2
- package/dist/types/src/app/components/nav-item.d.ts +1 -1
- package/dist/types/src/app/components/pagination.d.ts +1 -0
- package/dist/types/src/app/components/popover.d.ts +1 -0
- package/dist/types/src/app/components/progress.d.ts +1 -0
- package/dist/types/src/app/components/radio.d.ts +1 -0
- package/dist/types/src/app/components/skeleton.d.ts +1 -0
- package/dist/types/src/app/components/slider.d.ts +1 -0
- package/dist/types/src/app/components/spinner.d.ts +1 -0
- package/dist/types/src/app/components/stack.d.ts +1 -1
- package/dist/types/src/app/components/stat.d.ts +1 -0
- package/dist/types/src/app/components/status-list-item.d.ts +1 -0
- package/dist/types/src/app/components/status-tile.d.ts +1 -0
- package/dist/types/src/app/components/surface.d.ts +1 -1
- package/dist/types/src/app/components/table.d.ts +1 -0
- package/dist/types/src/app/components/tabs.d.ts +6 -0
- package/dist/types/src/app/components/tag.d.ts +1 -0
- package/dist/types/src/app/components/textarea.d.ts +1 -0
- package/dist/types/src/app/components/toast.d.ts +1 -0
- package/dist/types/src/app/components/toggle.d.ts +1 -0
- package/dist/types/src/app/context/TenantContext.d.ts +19 -5
- package/dist/types/src/app/context/index.d.ts +7 -7
- package/dist/types/src/app/design-system/generated-token-refs.d.ts +1 -1
- package/dist/types/src/app/design-system/generated-token-values.d.ts +1 -1
- package/dist/types/src/app/design-system/theme.d.ts +1 -1
- package/dist/types/src/app/design-system/tokens.d.ts +2 -2
- package/dist/types/src/app/hooks/useHdsMotion.d.ts +1 -1
- package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts +1 -1
- package/dist/types/src/app/lib/hds-search.d.ts +1 -1
- package/dist/types/src/brand/index.d.ts +1 -1
- package/dist/types/src/form/index.d.ts +3 -3
- package/dist/types/src/index.d.ts +116 -116
- package/dist/types/src/lib/env.d.ts +31 -0
- package/dist/types/src/lib/manifest-entry.d.ts +1 -1
- package/dist/types/src/scroll/index.d.ts +2 -2
- package/hirobius.tokens.json +3 -3
- package/package.json +8 -5
- 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?: {
|
|
@@ -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.
|
|
@@ -32,7 +32,13 @@
|
|
|
32
32
|
import * as React from 'react';
|
|
33
33
|
/** @public */
|
|
34
34
|
export type FormProps = React.FormHTMLAttributes<HTMLFormElement>;
|
|
35
|
-
/**
|
|
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 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
|
-
*
|
|
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
|
-
*
|
|
15
|
-
*
|
|
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';
|