@hirobius/design-system 0.16.0 → 0.18.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 +41 -69
- package/codemods/patterns-subpath.mjs +254 -0
- package/codemods/patterns-subpath.names.json +26 -0
- package/dist/chunks/LanguageContext-CH_bwzCq.js +83 -0
- package/dist/chunks/TokenDisplayContext-evZi_214.js +18 -0
- package/dist/chunks/activity-feed-C8_e-Btq.js +19955 -0
- package/dist/contexts.js +17 -16
- package/dist/hirobius-ui.js +3652 -23311
- package/dist/manifest.js +5 -5
- package/dist/patterns.js +423 -0
- package/dist/static.css +4 -4
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.js +34 -13
- package/dist/types/src/app/components/activity-feed.d.ts +6 -4
- package/dist/types/src/app/components/app-shell.d.ts +6 -4
- package/dist/types/src/app/components/asset-img.d.ts +3 -1
- package/dist/types/src/app/components/avatar-group.d.ts +3 -3
- package/dist/types/src/app/components/avatar.d.ts +3 -3
- package/dist/types/src/app/components/badge.d.ts +3 -3
- package/dist/types/src/app/components/blockquote.d.ts +3 -3
- package/dist/types/src/app/components/breadcrumb.d.ts +3 -3
- package/dist/types/src/app/components/button-group.d.ts +3 -3
- package/dist/types/src/app/components/button.d.ts +6 -6
- package/dist/types/src/app/components/calendar.d.ts +3 -1
- package/dist/types/src/app/components/callout.d.ts +4 -4
- package/dist/types/src/app/components/card.d.ts +5 -5
- package/dist/types/src/app/components/carousel.d.ts +6 -4
- package/dist/types/src/app/components/checkbox.d.ts +3 -3
- package/dist/types/src/app/components/circular-progress.d.ts +3 -3
- package/dist/types/src/app/components/code-block.d.ts +20 -18
- package/dist/types/src/app/components/command-palette.d.ts +9 -9
- package/dist/types/src/app/components/component-instance-matrix.d.ts +1 -1
- package/dist/types/src/app/components/disclosure.d.ts +3 -3
- package/dist/types/src/app/components/divider.d.ts +4 -4
- package/dist/types/src/app/components/doc-link-card.d.ts +6 -4
- package/dist/types/src/app/components/error-pattern.d.ts +3 -1
- package/dist/types/src/app/components/field.d.ts +4 -4
- package/dist/types/src/app/components/file-input.d.ts +7 -5
- package/dist/types/src/app/components/hds-tooltip.d.ts +11 -11
- package/dist/types/src/app/components/heading-stack.d.ts +6 -6
- package/dist/types/src/app/components/hover-card.d.ts +1 -1
- package/dist/types/src/app/components/image-lightbox.d.ts +2 -0
- package/dist/types/src/app/components/inline-code.d.ts +3 -3
- package/dist/types/src/app/components/input-group.d.ts +3 -3
- package/dist/types/src/app/components/input.d.ts +5 -5
- package/dist/types/src/app/components/kbd.d.ts +3 -3
- package/dist/types/src/app/components/metadata-list.d.ts +3 -3
- package/dist/types/src/app/components/nav-group.d.ts +3 -3
- package/dist/types/src/app/components/nav-item.d.ts +10 -8
- package/dist/types/src/app/components/overflow-list.d.ts +3 -1
- package/dist/types/src/app/components/page.d.ts +3 -1
- package/dist/types/src/app/components/progress.d.ts +3 -3
- package/dist/types/src/app/components/radio.d.ts +3 -3
- package/dist/types/src/app/components/reveal.d.ts +3 -1
- package/dist/types/src/app/components/segmented-control.d.ts +31 -31
- package/dist/types/src/app/components/select.d.ts +3 -3
- package/dist/types/src/app/components/selectable-card.d.ts +3 -3
- package/dist/types/src/app/components/side-nav.d.ts +6 -4
- package/dist/types/src/app/components/skeleton.d.ts +3 -3
- package/dist/types/src/app/components/slider.d.ts +3 -3
- package/dist/types/src/app/components/spinner.d.ts +3 -3
- package/dist/types/src/app/components/stacked-card-rail.d.ts +32 -0
- package/dist/types/src/app/components/stat.d.ts +3 -3
- package/dist/types/src/app/components/status-dot.d.ts +4 -4
- package/dist/types/src/app/components/status-list-item.d.ts +3 -3
- package/dist/types/src/app/components/stepper.d.ts +6 -4
- package/dist/types/src/app/components/surface.d.ts +4 -4
- package/dist/types/src/app/components/table.d.ts +22 -11
- package/dist/types/src/app/components/tag.d.ts +4 -4
- package/dist/types/src/app/components/text.d.ts +3 -3
- package/dist/types/src/app/components/textarea.d.ts +4 -4
- package/dist/types/src/app/components/time-input.d.ts +3 -3
- package/dist/types/src/app/components/toast.d.ts +3 -3
- package/dist/types/src/app/components/toggle-button.d.ts +4 -4
- package/dist/types/src/app/components/toggle.d.ts +3 -3
- package/dist/types/src/app/components/token.d.ts +16 -16
- package/dist/types/src/app/components/toolbar.d.ts +1 -1
- package/dist/types/src/app/components/tooltip.d.ts +2 -2
- package/dist/types/src/app/components/top-nav.d.ts +3 -1
- package/dist/types/src/app/components/tree-list.d.ts +3 -1
- package/dist/types/src/app/design-system/generated-token-refs.d.ts +36 -0
- package/dist/types/src/app/design-system/generated-token-values.d.ts +10 -10
- package/dist/types/src/app/design-system/tokens.d.ts +16 -0
- package/dist/types/src/index.d.ts +193 -8
- package/dist/types/src/patterns.d.ts +37 -0
- package/dist/variables.css +42 -22
- package/hirobius.tokens.json +178 -57
- package/package.json +21 -11
- package/public/hds-manifest.json +473 -445
- package/dist/chunks/TokenDisplayContext-B3gxyQN7.js +0 -96
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
import * as React from 'react';
|
|
16
16
|
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
17
17
|
import { type VariantProps } from 'class-variance-authority';
|
|
18
|
-
declare const hdsToggleButtonVariants: (props?: {
|
|
19
|
-
variant?: "secondary" | "ghost";
|
|
20
|
-
size?: "sm" | "md" | "lg";
|
|
21
|
-
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
18
|
+
declare const hdsToggleButtonVariants: (props?: ({
|
|
19
|
+
variant?: "secondary" | "ghost" | null | undefined;
|
|
20
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
21
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
22
22
|
type ToggleButtonVariantProps = VariantProps<typeof hdsToggleButtonVariants>;
|
|
23
23
|
/** @public */
|
|
24
24
|
export interface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, ToggleButtonVariantProps {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Toggle — boolean on/off toggle with animated thumb.
|
|
3
3
|
* @category Inputs
|
|
4
4
|
* @tier primitive
|
|
5
5
|
* @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19
|
|
6
6
|
*/
|
|
7
7
|
import type { InputHTMLAttributes } from 'react';
|
|
8
|
-
/**
|
|
8
|
+
/** Toggle — boolean on/off toggle with animated thumb. */
|
|
9
9
|
export type HdsToggleDemoState = 'rest' | 'hover' | 'focused' | 'pressed' | 'disabled';
|
|
10
10
|
export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
|
|
11
11
|
/** Toggle label displayed next to the control. */
|
|
@@ -15,4 +15,4 @@ export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
|
|
|
15
15
|
/** Called when the toggle changes. */
|
|
16
16
|
onChange: (v: boolean) => void;
|
|
17
17
|
}
|
|
18
|
-
export declare const
|
|
18
|
+
export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -12,22 +12,22 @@
|
|
|
12
12
|
* custom properties, same pixels, no CSS module.
|
|
13
13
|
*/
|
|
14
14
|
import React from 'react';
|
|
15
|
-
declare const tokenShellVariants: (props?: {
|
|
16
|
-
variant?: "node" | "diagram";
|
|
17
|
-
sourceNode?: boolean;
|
|
18
|
-
selected?: boolean;
|
|
19
|
-
fullWidth?: boolean;
|
|
20
|
-
asButton?: boolean;
|
|
21
|
-
nowrap?: boolean;
|
|
22
|
-
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
23
|
-
declare const tokenNodeInlineVariants: (props?: {
|
|
24
|
-
sourceNode?: boolean;
|
|
25
|
-
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
26
|
-
declare const tokenLabelVariants: (props?: {
|
|
27
|
-
sourceNode?: boolean;
|
|
28
|
-
truncateFromStart?: boolean;
|
|
29
|
-
selected?: boolean;
|
|
30
|
-
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
15
|
+
declare const tokenShellVariants: (props?: ({
|
|
16
|
+
variant?: "node" | "diagram" | null | undefined;
|
|
17
|
+
sourceNode?: boolean | null | undefined;
|
|
18
|
+
selected?: boolean | null | undefined;
|
|
19
|
+
fullWidth?: boolean | null | undefined;
|
|
20
|
+
asButton?: boolean | null | undefined;
|
|
21
|
+
nowrap?: boolean | null | undefined;
|
|
22
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
23
|
+
declare const tokenNodeInlineVariants: (props?: ({
|
|
24
|
+
sourceNode?: boolean | null | undefined;
|
|
25
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
26
|
+
declare const tokenLabelVariants: (props?: ({
|
|
27
|
+
sourceNode?: boolean | null | undefined;
|
|
28
|
+
truncateFromStart?: boolean | null | undefined;
|
|
29
|
+
selected?: boolean | null | undefined;
|
|
30
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
31
31
|
type TokenBaseProps = {
|
|
32
32
|
className?: string;
|
|
33
33
|
fullWidth?: boolean;
|
|
@@ -20,7 +20,7 @@ declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<ToolbarPrim
|
|
|
20
20
|
declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
|
|
21
21
|
declare const ToolbarToggleItem: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarToggleItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
22
22
|
declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
23
|
-
interface ToolbarComponent extends React.FC<React.ComponentProps<typeof ToolbarPrimitive.Root>> {
|
|
23
|
+
export interface ToolbarComponent extends React.FC<React.ComponentProps<typeof ToolbarPrimitive.Root>> {
|
|
24
24
|
Button: typeof ToolbarButton;
|
|
25
25
|
Separator: typeof ToolbarSeparator;
|
|
26
26
|
ToggleGroup: typeof ToolbarToggleGroup;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @tier utility
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* ExpandTooltip — HDS image interaction tooltip
|
|
7
7
|
*
|
|
8
8
|
* A pill-shaped label (brand blue / white text) that indicates an image
|
|
9
9
|
* is expandable. Supports two render modes:
|
|
@@ -29,5 +29,5 @@ interface TooltipProps {
|
|
|
29
29
|
/** Cursor Y position in client coordinates. */
|
|
30
30
|
y?: number;
|
|
31
31
|
}
|
|
32
|
-
export declare function
|
|
32
|
+
export declare function ExpandTooltip({ visible, mode, label, x, y }: TooltipProps): import("react/jsx-runtime").JSX.Element | null;
|
|
33
33
|
export {};
|
|
@@ -17,5 +17,7 @@ export interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
17
17
|
/** Pins the bar to the top of its scroll container. */
|
|
18
18
|
sticky?: boolean;
|
|
19
19
|
}
|
|
20
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* Top navigation bar with brand, nav, and trailing action slots.
|
|
22
|
+
*/
|
|
21
23
|
export declare const TopNav: React.ForwardRefExoticComponent<TopNavProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -24,5 +24,7 @@ export interface TreeListProps extends Omit<React.HTMLAttributes<HTMLUListElemen
|
|
|
24
24
|
/** Called with a node's id when its label row is clicked. */
|
|
25
25
|
onSelect?: (id: string) => void;
|
|
26
26
|
}
|
|
27
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* Renders a hierarchical `role="tree"` list; nodes with children get an expand/collapse toggle.
|
|
29
|
+
*/
|
|
28
30
|
export declare const TreeList: React.ForwardRefExoticComponent<TreeListProps & React.RefAttributes<HTMLUListElement>>;
|
|
@@ -252,6 +252,7 @@ export declare const tokenRefs: {
|
|
|
252
252
|
readonly duration: "var(--hds-motion-exit-duration)";
|
|
253
253
|
readonly easing: "var(--hds-motion-exit-easing)";
|
|
254
254
|
};
|
|
255
|
+
readonly distance: "var(--semantic-motion-distance)";
|
|
255
256
|
};
|
|
256
257
|
readonly color: {
|
|
257
258
|
readonly surface: {
|
|
@@ -304,6 +305,19 @@ export declare const tokenRefs: {
|
|
|
304
305
|
};
|
|
305
306
|
};
|
|
306
307
|
readonly space: {
|
|
308
|
+
readonly scale: {
|
|
309
|
+
readonly xs: "var(--semantic-space-scale-xs)";
|
|
310
|
+
readonly sm: "var(--semantic-space-scale-sm)";
|
|
311
|
+
readonly md: "var(--semantic-space-scale-md)";
|
|
312
|
+
readonly lg: "var(--semantic-space-scale-lg)";
|
|
313
|
+
readonly xl: "var(--semantic-space-scale-xl)";
|
|
314
|
+
};
|
|
315
|
+
readonly surface: {
|
|
316
|
+
readonly padding: "var(--semantic-space-surface-padding)";
|
|
317
|
+
};
|
|
318
|
+
readonly region: {
|
|
319
|
+
readonly gutter: "var(--semantic-space-region-gutter)";
|
|
320
|
+
};
|
|
307
321
|
readonly subgrid: {
|
|
308
322
|
readonly hairline: "var(--semantic-space-subgrid-hairline)";
|
|
309
323
|
readonly xs: "var(--semantic-space-subgrid-xs)";
|
|
@@ -451,6 +465,7 @@ export declare const tokenRefs: {
|
|
|
451
465
|
};
|
|
452
466
|
readonly radius: {
|
|
453
467
|
readonly action: "var(--semantic-radius-action)";
|
|
468
|
+
readonly control: "var(--semantic-radius-control)";
|
|
454
469
|
};
|
|
455
470
|
readonly borderWidth: {
|
|
456
471
|
readonly default: "var(--semantic-borderWidth-default)";
|
|
@@ -483,6 +498,27 @@ export declare const tokenRefs: {
|
|
|
483
498
|
readonly border: "var(--semantic-elevation-overlay-border)";
|
|
484
499
|
};
|
|
485
500
|
};
|
|
501
|
+
readonly size: {
|
|
502
|
+
readonly control: {
|
|
503
|
+
readonly sm: "var(--semantic-size-control-sm)";
|
|
504
|
+
readonly md: "var(--semantic-size-control-md)";
|
|
505
|
+
readonly lg: "var(--semantic-size-control-lg)";
|
|
506
|
+
};
|
|
507
|
+
readonly icon: {
|
|
508
|
+
readonly sm: "var(--semantic-size-icon-sm)";
|
|
509
|
+
readonly md: "var(--semantic-size-icon-md)";
|
|
510
|
+
readonly lg: "var(--semantic-size-icon-lg)";
|
|
511
|
+
};
|
|
512
|
+
readonly avatar: "var(--semantic-size-avatar)";
|
|
513
|
+
readonly row: {
|
|
514
|
+
readonly compact: "var(--semantic-size-row-compact)";
|
|
515
|
+
readonly comfortable: "var(--semantic-size-row-comfortable)";
|
|
516
|
+
};
|
|
517
|
+
};
|
|
518
|
+
readonly zIndex: {
|
|
519
|
+
readonly control: "var(--semantic-zIndex-control)";
|
|
520
|
+
readonly sticky: "var(--semantic-zIndex-sticky)";
|
|
521
|
+
};
|
|
486
522
|
};
|
|
487
523
|
readonly component: {
|
|
488
524
|
readonly nav: {
|
|
@@ -139,16 +139,16 @@ export declare const tokenValues: {
|
|
|
139
139
|
readonly mono: readonly ["Geist Mono", "Courier New", "monospace"];
|
|
140
140
|
};
|
|
141
141
|
readonly size: {
|
|
142
|
-
readonly xs: "
|
|
143
|
-
readonly sm: "
|
|
144
|
-
readonly base: "
|
|
145
|
-
readonly lg: "
|
|
146
|
-
readonly xl: "
|
|
147
|
-
readonly "2xl": "
|
|
148
|
-
readonly "3xl": "
|
|
149
|
-
readonly "4xl": "
|
|
150
|
-
readonly "5xl": "
|
|
151
|
-
readonly "6xl": "
|
|
142
|
+
readonly xs: "12px";
|
|
143
|
+
readonly sm: "14px";
|
|
144
|
+
readonly base: "16px";
|
|
145
|
+
readonly lg: "18px";
|
|
146
|
+
readonly xl: "20px";
|
|
147
|
+
readonly "2xl": "24px";
|
|
148
|
+
readonly "3xl": "30px";
|
|
149
|
+
readonly "4xl": "36px";
|
|
150
|
+
readonly "5xl": "48px";
|
|
151
|
+
readonly "6xl": "60px";
|
|
152
152
|
};
|
|
153
153
|
readonly weight: {
|
|
154
154
|
readonly regular: "400";
|
|
@@ -105,19 +105,35 @@ declare const hds: {
|
|
|
105
105
|
};
|
|
106
106
|
};
|
|
107
107
|
space: {
|
|
108
|
+
scale: {
|
|
109
|
+
xs: string;
|
|
110
|
+
sm: string;
|
|
111
|
+
md: string;
|
|
112
|
+
lg: string;
|
|
113
|
+
xl: string;
|
|
114
|
+
};
|
|
115
|
+
surface: {
|
|
116
|
+
padding: string;
|
|
117
|
+
};
|
|
118
|
+
region: {
|
|
119
|
+
gutter: string;
|
|
120
|
+
};
|
|
108
121
|
subgrid: {
|
|
109
122
|
gap: string;
|
|
110
123
|
hairline: string;
|
|
111
124
|
xs: string;
|
|
112
125
|
};
|
|
113
126
|
component: {
|
|
127
|
+
/** @deprecated hds#206 — use `semantic.space.surface.padding`. */
|
|
114
128
|
padding: string;
|
|
129
|
+
/** @deprecated hds#206 — use `semantic.space.scale.xs`. */
|
|
115
130
|
gap: string;
|
|
116
131
|
};
|
|
117
132
|
stack: {
|
|
118
133
|
gap: string;
|
|
119
134
|
};
|
|
120
135
|
layout: {
|
|
136
|
+
/** @deprecated hds#206 — use `semantic.space.region.gutter`. */
|
|
121
137
|
gutter: string;
|
|
122
138
|
gap: string;
|
|
123
139
|
section: string;
|
|
@@ -600,48 +600,56 @@ export declare const tokens: {
|
|
|
600
600
|
value: number;
|
|
601
601
|
unit: string;
|
|
602
602
|
};
|
|
603
|
+
$description: string;
|
|
603
604
|
};
|
|
604
605
|
sm: {
|
|
605
606
|
$value: {
|
|
606
607
|
value: number;
|
|
607
608
|
unit: string;
|
|
608
609
|
};
|
|
610
|
+
$description: string;
|
|
609
611
|
};
|
|
610
612
|
base: {
|
|
611
613
|
$value: {
|
|
612
614
|
value: number;
|
|
613
615
|
unit: string;
|
|
614
616
|
};
|
|
617
|
+
$description: string;
|
|
615
618
|
};
|
|
616
619
|
lg: {
|
|
617
620
|
$value: {
|
|
618
621
|
value: number;
|
|
619
622
|
unit: string;
|
|
620
623
|
};
|
|
624
|
+
$description: string;
|
|
621
625
|
};
|
|
622
626
|
xl: {
|
|
623
627
|
$value: {
|
|
624
628
|
value: number;
|
|
625
629
|
unit: string;
|
|
626
630
|
};
|
|
631
|
+
$description: string;
|
|
627
632
|
};
|
|
628
633
|
"2xl": {
|
|
629
634
|
$value: {
|
|
630
635
|
value: number;
|
|
631
636
|
unit: string;
|
|
632
637
|
};
|
|
638
|
+
$description: string;
|
|
633
639
|
};
|
|
634
640
|
"3xl": {
|
|
635
641
|
$value: {
|
|
636
642
|
value: number;
|
|
637
643
|
unit: string;
|
|
638
644
|
};
|
|
645
|
+
$description: string;
|
|
639
646
|
};
|
|
640
647
|
"4xl": {
|
|
641
648
|
$value: {
|
|
642
649
|
value: number;
|
|
643
650
|
unit: string;
|
|
644
651
|
};
|
|
652
|
+
$description: string;
|
|
645
653
|
};
|
|
646
654
|
"5xl": {
|
|
647
655
|
$value: {
|
|
@@ -655,6 +663,7 @@ export declare const tokens: {
|
|
|
655
663
|
value: number;
|
|
656
664
|
unit: string;
|
|
657
665
|
};
|
|
666
|
+
$description: string;
|
|
658
667
|
};
|
|
659
668
|
};
|
|
660
669
|
weight: {
|
|
@@ -1069,6 +1078,11 @@ export declare const tokens: {
|
|
|
1069
1078
|
};
|
|
1070
1079
|
$description: string;
|
|
1071
1080
|
};
|
|
1081
|
+
distance: {
|
|
1082
|
+
$type: string;
|
|
1083
|
+
$value: string;
|
|
1084
|
+
$description: string;
|
|
1085
|
+
};
|
|
1072
1086
|
};
|
|
1073
1087
|
color: {
|
|
1074
1088
|
$type: string;
|
|
@@ -1535,6 +1549,43 @@ export declare const tokens: {
|
|
|
1535
1549
|
space: {
|
|
1536
1550
|
$type: string;
|
|
1537
1551
|
$description: string;
|
|
1552
|
+
scale: {
|
|
1553
|
+
$description: string;
|
|
1554
|
+
xs: {
|
|
1555
|
+
$value: string;
|
|
1556
|
+
$description: string;
|
|
1557
|
+
};
|
|
1558
|
+
sm: {
|
|
1559
|
+
$value: string;
|
|
1560
|
+
$description: string;
|
|
1561
|
+
};
|
|
1562
|
+
md: {
|
|
1563
|
+
$value: string;
|
|
1564
|
+
$description: string;
|
|
1565
|
+
};
|
|
1566
|
+
lg: {
|
|
1567
|
+
$value: string;
|
|
1568
|
+
$description: string;
|
|
1569
|
+
};
|
|
1570
|
+
xl: {
|
|
1571
|
+
$value: string;
|
|
1572
|
+
$description: string;
|
|
1573
|
+
};
|
|
1574
|
+
};
|
|
1575
|
+
surface: {
|
|
1576
|
+
$description: string;
|
|
1577
|
+
padding: {
|
|
1578
|
+
$value: string;
|
|
1579
|
+
$description: string;
|
|
1580
|
+
};
|
|
1581
|
+
};
|
|
1582
|
+
region: {
|
|
1583
|
+
$description: string;
|
|
1584
|
+
gutter: {
|
|
1585
|
+
$value: string;
|
|
1586
|
+
$description: string;
|
|
1587
|
+
};
|
|
1588
|
+
};
|
|
1538
1589
|
subgrid: {
|
|
1539
1590
|
hairline: {
|
|
1540
1591
|
$value: string;
|
|
@@ -1553,6 +1604,7 @@ export declare const tokens: {
|
|
|
1553
1604
|
gap: {
|
|
1554
1605
|
$value: string;
|
|
1555
1606
|
$description: string;
|
|
1607
|
+
$deprecated: string;
|
|
1556
1608
|
};
|
|
1557
1609
|
medium: {
|
|
1558
1610
|
$value: string;
|
|
@@ -1561,28 +1613,34 @@ export declare const tokens: {
|
|
|
1561
1613
|
padding: {
|
|
1562
1614
|
$value: string;
|
|
1563
1615
|
$description: string;
|
|
1616
|
+
$deprecated: string;
|
|
1564
1617
|
};
|
|
1565
1618
|
};
|
|
1566
1619
|
layout: {
|
|
1567
1620
|
tight: {
|
|
1568
1621
|
$value: string;
|
|
1569
1622
|
$description: string;
|
|
1623
|
+
$deprecated: string;
|
|
1570
1624
|
};
|
|
1571
1625
|
normal: {
|
|
1572
1626
|
$value: string;
|
|
1573
1627
|
$description: string;
|
|
1628
|
+
$deprecated: string;
|
|
1574
1629
|
};
|
|
1575
1630
|
gutter: {
|
|
1576
1631
|
$value: string;
|
|
1577
1632
|
$description: string;
|
|
1633
|
+
$deprecated: string;
|
|
1578
1634
|
};
|
|
1579
1635
|
inset: {
|
|
1580
1636
|
$value: string;
|
|
1581
1637
|
$description: string;
|
|
1638
|
+
$deprecated: string;
|
|
1582
1639
|
};
|
|
1583
1640
|
spacious: {
|
|
1584
1641
|
$value: string;
|
|
1585
1642
|
$description: string;
|
|
1643
|
+
$deprecated: string;
|
|
1586
1644
|
};
|
|
1587
1645
|
};
|
|
1588
1646
|
section: {
|
|
@@ -1779,10 +1837,7 @@ export declare const tokens: {
|
|
|
1779
1837
|
caption: {
|
|
1780
1838
|
$value: {
|
|
1781
1839
|
fontFamily: string;
|
|
1782
|
-
fontSize:
|
|
1783
|
-
value: number;
|
|
1784
|
-
unit: string;
|
|
1785
|
-
};
|
|
1840
|
+
fontSize: string;
|
|
1786
1841
|
fontWeight: string;
|
|
1787
1842
|
letterSpacing: string;
|
|
1788
1843
|
lineHeight: string;
|
|
@@ -1945,6 +2000,11 @@ export declare const tokens: {
|
|
|
1945
2000
|
$value: string;
|
|
1946
2001
|
$description: string;
|
|
1947
2002
|
};
|
|
2003
|
+
control: {
|
|
2004
|
+
$type: string;
|
|
2005
|
+
$value: string;
|
|
2006
|
+
$description: string;
|
|
2007
|
+
};
|
|
1948
2008
|
};
|
|
1949
2009
|
borderWidth: {
|
|
1950
2010
|
default: {
|
|
@@ -1978,7 +2038,7 @@ export declare const tokens: {
|
|
|
1978
2038
|
flat: {
|
|
1979
2039
|
$value: {
|
|
1980
2040
|
surface: string;
|
|
1981
|
-
shadow:
|
|
2041
|
+
shadow: null;
|
|
1982
2042
|
border: string;
|
|
1983
2043
|
};
|
|
1984
2044
|
$description: string;
|
|
@@ -1987,7 +2047,7 @@ export declare const tokens: {
|
|
|
1987
2047
|
$value: {
|
|
1988
2048
|
surface: string;
|
|
1989
2049
|
shadow: string;
|
|
1990
|
-
border:
|
|
2050
|
+
border: null;
|
|
1991
2051
|
};
|
|
1992
2052
|
$description: string;
|
|
1993
2053
|
};
|
|
@@ -1995,7 +2055,7 @@ export declare const tokens: {
|
|
|
1995
2055
|
$value: {
|
|
1996
2056
|
surface: string;
|
|
1997
2057
|
shadow: string;
|
|
1998
|
-
border:
|
|
2058
|
+
border: null;
|
|
1999
2059
|
};
|
|
2000
2060
|
$description: string;
|
|
2001
2061
|
};
|
|
@@ -2003,8 +2063,69 @@ export declare const tokens: {
|
|
|
2003
2063
|
$value: {
|
|
2004
2064
|
surface: string;
|
|
2005
2065
|
shadow: string;
|
|
2006
|
-
border:
|
|
2066
|
+
border: null;
|
|
2067
|
+
};
|
|
2068
|
+
$description: string;
|
|
2069
|
+
};
|
|
2070
|
+
};
|
|
2071
|
+
size: {
|
|
2072
|
+
$type: string;
|
|
2073
|
+
$description: string;
|
|
2074
|
+
control: {
|
|
2075
|
+
$description: string;
|
|
2076
|
+
sm: {
|
|
2077
|
+
$value: string;
|
|
2078
|
+
$description: string;
|
|
2079
|
+
};
|
|
2080
|
+
md: {
|
|
2081
|
+
$value: string;
|
|
2082
|
+
$description: string;
|
|
2083
|
+
};
|
|
2084
|
+
lg: {
|
|
2085
|
+
$value: string;
|
|
2086
|
+
$description: string;
|
|
2087
|
+
};
|
|
2088
|
+
};
|
|
2089
|
+
icon: {
|
|
2090
|
+
$description: string;
|
|
2091
|
+
sm: {
|
|
2092
|
+
$value: string;
|
|
2093
|
+
$description: string;
|
|
2007
2094
|
};
|
|
2095
|
+
md: {
|
|
2096
|
+
$value: string;
|
|
2097
|
+
$description: string;
|
|
2098
|
+
};
|
|
2099
|
+
lg: {
|
|
2100
|
+
$value: string;
|
|
2101
|
+
$description: string;
|
|
2102
|
+
};
|
|
2103
|
+
};
|
|
2104
|
+
avatar: {
|
|
2105
|
+
$value: string;
|
|
2106
|
+
$description: string;
|
|
2107
|
+
};
|
|
2108
|
+
row: {
|
|
2109
|
+
$description: string;
|
|
2110
|
+
compact: {
|
|
2111
|
+
$value: string;
|
|
2112
|
+
$description: string;
|
|
2113
|
+
};
|
|
2114
|
+
comfortable: {
|
|
2115
|
+
$value: string;
|
|
2116
|
+
$description: string;
|
|
2117
|
+
};
|
|
2118
|
+
};
|
|
2119
|
+
};
|
|
2120
|
+
zIndex: {
|
|
2121
|
+
$type: string;
|
|
2122
|
+
$description: string;
|
|
2123
|
+
control: {
|
|
2124
|
+
$value: string;
|
|
2125
|
+
$description: string;
|
|
2126
|
+
};
|
|
2127
|
+
sticky: {
|
|
2128
|
+
$value: string;
|
|
2008
2129
|
$description: string;
|
|
2009
2130
|
};
|
|
2010
2131
|
};
|
|
@@ -2551,3 +2672,67 @@ export { HdsThemeProvider, useHdsTheme } from './app/context/hds-theme.js';
|
|
|
2551
2672
|
export type { HdsTheme, HdsDensity, HdsThemeValue, HdsThemeProviderProps, } from './app/context/hds-theme.js';
|
|
2552
2673
|
export { HdsRouterProvider, useHdsRouter } from './app/context/RouterContext.js';
|
|
2553
2674
|
export type { HdsRouterAdapter, HdsRouterProviderProps, HdsLinkComponent, HdsLinkProps, HdsNavigateOptions, } from './app/context/RouterContext.js';
|
|
2675
|
+
import { ActivityFeed as _ActivityFeed254 } from './app/components/activity-feed.js';
|
|
2676
|
+
import { AssetImg as _AssetImg254 } from './app/components/asset-img.js';
|
|
2677
|
+
import { Calendar as _Calendar254 } from './app/components/calendar.js';
|
|
2678
|
+
import { CodeBlock as _CodeBlock254 } from './app/components/code-block.js';
|
|
2679
|
+
import { DocLinkCard as _DocLinkCard254 } from './app/components/doc-link-card.js';
|
|
2680
|
+
import { ErrorPattern as _ErrorPattern254 } from './app/components/error-pattern.js';
|
|
2681
|
+
import { Lightbox as _Lightbox254 } from './app/components/image-lightbox.js';
|
|
2682
|
+
import { NavItem as _NavItem254 } from './app/components/nav-item.js';
|
|
2683
|
+
import { Page as _Page254 } from './app/components/page.js';
|
|
2684
|
+
import { SideNav as _SideNav254 } from './app/components/side-nav.js';
|
|
2685
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2686
|
+
export declare const ActivityFeed: typeof _ActivityFeed254;
|
|
2687
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2688
|
+
export declare const AppShell: import("react").ForwardRefExoticComponent<import("./app/components/app-shell.js").AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
2689
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. `ops` is a current importer of this component — its codemod is tracked under hds#124 before this is dropped. */
|
|
2690
|
+
export declare const AssetImg: typeof _AssetImg254;
|
|
2691
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2692
|
+
export declare const Calendar: typeof _Calendar254;
|
|
2693
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2694
|
+
export declare const Carousel: import("react").ForwardRefExoticComponent<import("./app/components/carousel.js").CarouselProps & import("react").RefAttributes<HTMLElement>>;
|
|
2695
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2696
|
+
export declare const CodeBlock: typeof _CodeBlock254;
|
|
2697
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2698
|
+
export declare const CommandPalette: import("react").ForwardRefExoticComponent<import("./app/components/command-palette.js").CommandPaletteProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
2699
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2700
|
+
export declare const DocLinkCard: typeof _DocLinkCard254;
|
|
2701
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2702
|
+
export declare const ErrorPattern: typeof _ErrorPattern254;
|
|
2703
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2704
|
+
export declare const FileInput: import("react").ForwardRefExoticComponent<import("./app/components/file-input.js").FileInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
2705
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2706
|
+
export declare const Form: import("react").ForwardRefExoticComponent<import("./app/components/form.js").FormProps & import("react").RefAttributes<HTMLFormElement>>;
|
|
2707
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2708
|
+
export declare const Lightbox: typeof _Lightbox254;
|
|
2709
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2710
|
+
export declare const NavItem: typeof _NavItem254;
|
|
2711
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2712
|
+
export declare const OverflowList: import("react").ForwardRefExoticComponent<import("./app/components/overflow-list.js").OverflowListProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
2713
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2714
|
+
export declare const Page: typeof _Page254;
|
|
2715
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2716
|
+
export declare const Reveal: import("react").ForwardRefExoticComponent<import("./app/components/reveal.js").RevealProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
2717
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2718
|
+
export declare const SideNav: typeof _SideNav254;
|
|
2719
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2720
|
+
export declare const Stepper: import("react").ForwardRefExoticComponent<import("./app/components/stepper.js").StepperProps & import("react").RefAttributes<HTMLOListElement>>;
|
|
2721
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2722
|
+
export declare const Toolbar: import("./app/components/toolbar.js").ToolbarComponent;
|
|
2723
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2724
|
+
export declare const TopNav: import("react").ForwardRefExoticComponent<import("./app/components/top-nav.js").TopNavProps & import("react").RefAttributes<HTMLElement>>;
|
|
2725
|
+
/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
|
|
2726
|
+
export declare const TreeList: import("react").ForwardRefExoticComponent<import("./app/components/tree-list.js").TreeListProps & import("react").RefAttributes<HTMLUListElement>>;
|
|
2727
|
+
/** @deprecated Use `Checkbox` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
|
|
2728
|
+
export { Checkbox as HdsCheckbox } from './app/components/checkbox.js';
|
|
2729
|
+
/** @deprecated Use `Radio` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
|
|
2730
|
+
export { Radio as HdsRadio } from './app/components/radio.js';
|
|
2731
|
+
/** @deprecated Use `Select` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
|
|
2732
|
+
export { Select as HdsSelect } from './app/components/select.js';
|
|
2733
|
+
/** @deprecated Use `Slider` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
|
|
2734
|
+
export { Slider as HdsSlider } from './app/components/slider.js';
|
|
2735
|
+
/** @deprecated Use `Toggle` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
|
|
2736
|
+
export { Toggle as HdsToggle } from './app/components/toggle.js';
|
|
2737
|
+
/** @deprecated Use `Tooltip` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
|
|
2738
|
+
export { Tooltip as HdsTooltip } from './app/components/hds-tooltip.js';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @hirobius/design-system/patterns
|
|
3
|
+
*
|
|
4
|
+
* The 22 `pattern`-tier components (hds#254 disposition table, ratified
|
|
5
|
+
* 2026-09-26): composed, higher-level surfaces (nav shells, feeds, rails,
|
|
6
|
+
* pickers) as opposed to the `core` primitives the main barrel is trending
|
|
7
|
+
* toward. Split into their own subpath so a consumer that only needs
|
|
8
|
+
* primitives doesn't pull in this tier's weight.
|
|
9
|
+
*
|
|
10
|
+
* Every one of these is STILL re-exported from the package root today —
|
|
11
|
+
* hds#254 keeps the root re-export for one minor with a `@deprecated` /
|
|
12
|
+
* `@removeIn` notice on each component (see the JSDoc in each module under
|
|
13
|
+
* `src/app/components/`). Prefer importing from here; the root re-export is
|
|
14
|
+
* scheduled for removal at the next major once ops has a codemod (hds#124).
|
|
15
|
+
*/
|
|
16
|
+
export * from './app/components/calendar.js';
|
|
17
|
+
export * from './app/components/file-input.js';
|
|
18
|
+
export * from './app/components/form.js';
|
|
19
|
+
export * from './app/components/app-shell.js';
|
|
20
|
+
export * from './app/components/overflow-list.js';
|
|
21
|
+
export * from './app/components/page.js';
|
|
22
|
+
export * from './app/components/activity-feed.js';
|
|
23
|
+
export * from './app/components/asset-img.js';
|
|
24
|
+
export * from './app/components/carousel.js';
|
|
25
|
+
export * from './app/components/code-block.js';
|
|
26
|
+
export * from './app/components/stacked-card-rail.js';
|
|
27
|
+
export * from './app/components/doc-link-card.js';
|
|
28
|
+
export * from './app/components/nav-item.js';
|
|
29
|
+
export * from './app/components/side-nav.js';
|
|
30
|
+
export * from './app/components/stepper.js';
|
|
31
|
+
export * from './app/components/top-nav.js';
|
|
32
|
+
export * from './app/components/tree-list.js';
|
|
33
|
+
export * from './app/components/error-pattern.js';
|
|
34
|
+
export * from './app/components/toolbar.js';
|
|
35
|
+
export * from './app/components/command-palette.js';
|
|
36
|
+
export * from './app/components/image-lightbox.js';
|
|
37
|
+
export * from './app/components/reveal.js';
|