@hirobius/design-system 0.13.0 → 0.14.0

package/dist/types/src/app/design-system/tokens.d.ts

@@ -329,5 +329,5 @@ declare const hds: {
 };
 /** @public */
 export default hds;
-export { ct } from './theme';
-export { tokenValues } from './generated-token-values';
+export { ct } from './theme.js';
+export { tokenValues } from './generated-token-values.js';

package/dist/types/src/app/hooks/useHdsMotion.d.ts

@@ -0,0 +1,16 @@
+/** @internal — reactive `hds.motion.*` accessor; not part of the public API. */
+/**
+ * useHdsMotion — the reactive read path for `hds.motion.*` (#190).
+ *
+ * `hds.motion.*` (src/app/design-system/tokens.ts) resolves duration as a
+ * static JS number computed once at module load, so a component that spreads
+ * it straight into a motion/react `transition` never collapses under
+ * `prefers-reduced-motion: reduce` — only the CSS custom-property path
+ * (Layer 1, theme.css) reacts automatically. Call this hook instead of
+ * reading `hds.motion.<category>` directly: it zeroes `duration` while
+ * useReducedMotion() is true, one fix point instead of a `MotionConfig`
+ * wrapper per component.
+ */
+import hds from '../design-system/tokens.js';
+export type HdsMotionCategory = keyof typeof hds.motion;
+export declare function useHdsMotion<Category extends HdsMotionCategory>(category: Category): (typeof hds.motion)[Category];

package/dist/types/src/app/hooks/useReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare function useReducedMotion(): boolean;

package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type DocLayoutContentMaxWidth } from './DocLayout';
+import { type DocLayoutContentMaxWidth } from './DocLayout.js';
 /** @public */
 export declare function HdsSystemDocLayout({ contentSlot, contentMaxWidth, }: {
     contentSlot: ReactNode;

package/dist/types/src/app/lib/hds-search.d.ts

@@ -13,7 +13,7 @@
  * narrow interface): the UI shell now imports { buildIndex, rank } and owns no
  * search logic.
  */
-import type { ManifestSpec, RoleToken, SystemManifest } from '../data/manifest-types';
+import type { ManifestSpec, RoleToken, SystemManifest } from '../data/manifest-types.js';
 export type { ManifestSpec, RoleToken, SystemManifest };
 export type ResultKind = 'component' | 'pattern' | 'template' | 'utility' | 'token' | 'section';
 export interface PaletteResult {

package/dist/types/src/brand/index.d.ts

@@ -6,4 +6,4 @@
  * no React and no Node built-ins, so it is safe to pull into a build step or an
  * edge runtime. See ./overlay.ts and docs on the Astro consumption path.
  */
-export { brandOverlayVars, brandOverlayStyle, brandOverlayCss, type BrandPalette } from './overlay';
+export { brandOverlayVars, brandOverlayStyle, brandOverlayCss, type BrandPalette } from './overlay.js';

package/dist/types/src/form/index.d.ts

@@ -25,6 +25,6 @@
  *
  * @doc-ignore  subpath barrel, not an HDS component
  */
-export { useHdsForm } from './use-hds-form';
-export { HdsForm, HdsFormField } from './hds-form';
-export type { HdsFormProps, HdsFormFieldProps, HdsFieldRenderProps } from './hds-form';
+export { useHdsForm } from './use-hds-form.js';
+export { HdsForm, HdsFormField } from './hds-form.js';
+export type { HdsFormProps, HdsFormFieldProps, HdsFieldRenderProps } from './hds-form.js';

package/dist/types/src/index.d.ts

@@ -1,114 +1,114 @@
-export * from './app/components/alert';
-export * from './app/components/asset-img';
-export * from './app/components/avatar';
-export * from './app/components/badge';
-export * from './app/components/box';
-export * from './app/components/button';
-export * from './app/components/callout';
-export * from './app/components/field';
-export * from './app/components/stat';
-export * from './app/components/status-list-item';
-export * from './app/components/card';
-export * from './app/components/cinematic-link';
-export * from './app/components/code-block';
-export * from './app/components/component-instance-matrix';
-export * from './app/components/container';
-export * from './app/components/dialog';
-export * from './app/components/divider';
-export * from './app/components/menu';
-export * from './app/components/popover';
-export * from './app/components/hds-tooltip';
-export * from './app/components/doc-link-card';
-export * from './app/components/grid';
-export * from './app/components/heading-stack';
-export * from './app/components/history-card';
-export * from './app/components/icon';
-export * from './app/components/inline-code';
-export * from './app/components/inline-link';
-export * from './app/components/input';
-export * from './app/components/textarea';
-export * from './app/components/checkbox';
-export * from './app/components/radio';
-export * from './app/components/slider';
-export * from './app/components/toggle';
-export * from './app/components/nav-item';
-export * from './app/components/progress';
-export * from './app/components/skeleton';
-export * from './app/components/spinner';
-export * from './app/components/segmented-control';
-export * from './app/components/stack';
-export * from './app/components/surface';
-export * from './app/components/table';
-export * from './app/components/tag';
-export * from './app/components/text';
-export * from './app/components/token';
-export * from './app/components/kbd';
-export * from './app/components/status-dot';
-export * from './app/components/timestamp';
-export * from './app/components/blockquote';
-export * from './app/components/visually-hidden';
-export * from './app/components/avatar-group';
-export * from './app/components/button-group';
-export * from './app/components/input-group';
-export * from './app/components/circular-progress';
-export * from './app/components/toggle-button';
-export * from './app/components/aspect-ratio';
-export * from './app/components/alert-dialog';
-export * from './app/components/hover-card';
-export * from './app/components/context-menu';
-export * from './app/components/side-nav';
-export * from './app/components/command-palette';
-export * from './app/components/image-lightbox';
-export * from './app/components/metadata-list';
-export * from './app/components/overflow-list';
-export * from './app/components/top-nav';
-export * from './app/components/app-shell';
-export * from './app/components/selectable-card';
-export * from './app/components/tokenizer';
-export * from './app/components/file-input';
-export * from './app/components/multi-selector';
-export * from './app/components/toolbar';
-export * from './app/components/tree-list';
-export * from './app/components/stepper';
-export * from './app/components/carousel';
-export * from './app/components/calendar';
-export * from './app/components/time-input';
-export * from './app/components/date-input';
-export * from './app/components/date-range-input';
-export * from './app/components/date-time-input';
-export * from './app/components/cluster';
-export * from './app/components/center';
-export * from './app/components/sidebar';
-export * from './app/components/switcher';
-export * from './app/components/cover';
-export * from './app/components/frame';
-export * from './app/components/bleed';
-export * from './app/components/reveal';
-export * from './app/components/pin';
-export * from './app/components/page';
-export * from './app/components/empty-state';
-export * from './app/components/error-boundary';
-export * from './app/components/not-found-pattern';
-export * from './app/components/tabs';
-export * from './app/components/tile-grid';
-export * from './app/components/status-tile';
-export * from './app/components/activity-feed';
-export * from './app/components/breadcrumb';
-export * from './app/components/combobox';
-export * from './app/components/disclosure';
-export * from './app/components/form';
-export * from './app/components/foundation-swatch';
-export * from './app/components/icon-button';
-export * from './app/components/nav-group';
-export * from './app/components/pagination';
-export * from './app/components/sketch';
-export * from './app/components/stepper-field';
-export * from './app/components/text-lockup';
-export * from './app/components/toast';
-export * from './app/layouts/CaseStudyLayout';
-export * from './app/components/error-pattern';
-export * from './app/layouts/HdsSystemDocLayout';
-export { default as hds } from './app/design-system/tokens';
+export * from './app/components/alert.js';
+export * from './app/components/asset-img.js';
+export * from './app/components/avatar.js';
+export * from './app/components/badge.js';
+export * from './app/components/box.js';
+export * from './app/components/button.js';
+export * from './app/components/callout.js';
+export * from './app/components/field.js';
+export * from './app/components/stat.js';
+export * from './app/components/status-list-item.js';
+export * from './app/components/card.js';
+export * from './app/components/cinematic-link.js';
+export * from './app/components/code-block.js';
+export * from './app/components/component-instance-matrix.js';
+export * from './app/components/container.js';
+export * from './app/components/dialog.js';
+export * from './app/components/divider.js';
+export * from './app/components/menu.js';
+export * from './app/components/popover.js';
+export * from './app/components/hds-tooltip.js';
+export * from './app/components/doc-link-card.js';
+export * from './app/components/grid.js';
+export * from './app/components/heading-stack.js';
+export * from './app/components/history-card.js';
+export * from './app/components/icon.js';
+export * from './app/components/inline-code.js';
+export * from './app/components/inline-link.js';
+export * from './app/components/input.js';
+export * from './app/components/textarea.js';
+export * from './app/components/checkbox.js';
+export * from './app/components/radio.js';
+export * from './app/components/slider.js';
+export * from './app/components/toggle.js';
+export * from './app/components/nav-item.js';
+export * from './app/components/progress.js';
+export * from './app/components/skeleton.js';
+export * from './app/components/spinner.js';
+export * from './app/components/segmented-control.js';
+export * from './app/components/stack.js';
+export * from './app/components/surface.js';
+export * from './app/components/table.js';
+export * from './app/components/tag.js';
+export * from './app/components/text.js';
+export * from './app/components/token.js';
+export * from './app/components/kbd.js';
+export * from './app/components/status-dot.js';
+export * from './app/components/timestamp.js';
+export * from './app/components/blockquote.js';
+export * from './app/components/visually-hidden.js';
+export * from './app/components/avatar-group.js';
+export * from './app/components/button-group.js';
+export * from './app/components/input-group.js';
+export * from './app/components/circular-progress.js';
+export * from './app/components/toggle-button.js';
+export * from './app/components/aspect-ratio.js';
+export * from './app/components/alert-dialog.js';
+export * from './app/components/hover-card.js';
+export * from './app/components/context-menu.js';
+export * from './app/components/side-nav.js';
+export * from './app/components/command-palette.js';
+export * from './app/components/image-lightbox.js';
+export * from './app/components/metadata-list.js';
+export * from './app/components/overflow-list.js';
+export * from './app/components/top-nav.js';
+export * from './app/components/app-shell.js';
+export * from './app/components/selectable-card.js';
+export * from './app/components/tokenizer.js';
+export * from './app/components/file-input.js';
+export * from './app/components/multi-selector.js';
+export * from './app/components/toolbar.js';
+export * from './app/components/tree-list.js';
+export * from './app/components/stepper.js';
+export * from './app/components/carousel.js';
+export * from './app/components/calendar.js';
+export * from './app/components/time-input.js';
+export * from './app/components/date-input.js';
+export * from './app/components/date-range-input.js';
+export * from './app/components/date-time-input.js';
+export * from './app/components/cluster.js';
+export * from './app/components/center.js';
+export * from './app/components/sidebar.js';
+export * from './app/components/switcher.js';
+export * from './app/components/cover.js';
+export * from './app/components/frame.js';
+export * from './app/components/bleed.js';
+export * from './app/components/reveal.js';
+export * from './app/components/pin.js';
+export * from './app/components/page.js';
+export * from './app/components/empty-state.js';
+export * from './app/components/error-boundary.js';
+export * from './app/components/not-found-pattern.js';
+export * from './app/components/tabs.js';
+export * from './app/components/tile-grid.js';
+export * from './app/components/status-tile.js';
+export * from './app/components/activity-feed.js';
+export * from './app/components/breadcrumb.js';
+export * from './app/components/combobox.js';
+export * from './app/components/disclosure.js';
+export * from './app/components/form.js';
+export * from './app/components/foundation-swatch.js';
+export * from './app/components/icon-button.js';
+export * from './app/components/nav-group.js';
+export * from './app/components/pagination.js';
+export * from './app/components/sketch.js';
+export * from './app/components/stepper-field.js';
+export * from './app/components/text-lockup.js';
+export * from './app/components/toast.js';
+export * from './app/layouts/CaseStudyLayout.js';
+export * from './app/components/error-pattern.js';
+export * from './app/layouts/HdsSystemDocLayout.js';
+export { default as hds } from './app/design-system/tokens.js';
 /** Raw DTCG design tokens (the contents of `hirobius.tokens.json`). */
 export declare const tokens: {
     $schema: string;
@@ -652,13 +652,13 @@ export declare const tokens: {
                         value: number;
                         unit: string;
                     };
+                    $description: string;
                 };
-                "7xl": {
+                "6xl": {
                     $value: {
                         value: number;
                         unit: string;
                     };
-                    $description: string;
                 };
             };
             weight: {
@@ -1158,6 +1158,66 @@ export declare const tokens: {
                         };
                     };
                 };
+                hover: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                pressed: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                selected: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                muted: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                sunken: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
             };
             content: {
                 primary: {
@@ -1206,6 +1266,7 @@ export declare const tokens: {
                 };
                 accent: {
                     $value: string;
+                    $description: string;
                     $extensions: {
                         "com.figma.variables": {
                             modes: {
@@ -1217,6 +1278,43 @@ export declare const tokens: {
                 };
                 onAccent: {
                     $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                success: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                warning: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                danger: {
+                    $value: string;
+                    $description: string;
                     $extensions: {
                         "com.figma.variables": {
                             modes: {
@@ -1239,6 +1337,18 @@ export declare const tokens: {
                         };
                     };
                 };
+                interactive: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
                 subdued: {
                     $value: string;
                     $extensions: {
@@ -1275,6 +1385,31 @@ export declare const tokens: {
                 };
                 accent: {
                     $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                success: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                warning: {
+                    $value: string;
+                    $description: string;
                     $extensions: {
                         "com.figma.variables": {
                             modes: {
@@ -2419,8 +2554,8 @@ export declare const tokens: {
         };
     };
 };
-export { cn } from './lib/utils';
-export { HdsThemeProvider, useHdsTheme } from './app/context/hds-theme';
-export type { HdsTheme, HdsDensity, HdsThemeValue, HdsThemeProviderProps, } from './app/context/hds-theme';
-export { HdsRouterProvider, useHdsRouter } from './app/context/RouterContext';
-export type { HdsRouterAdapter, HdsRouterProviderProps, HdsLinkComponent, HdsLinkProps, HdsNavigateOptions, } from './app/context/RouterContext';
+export { cn } from './lib/utils.js';
+export { HdsThemeProvider, useHdsTheme } from './app/context/hds-theme.js';
+export type { HdsTheme, HdsDensity, HdsThemeValue, HdsThemeProviderProps, } from './app/context/hds-theme.js';
+export { HdsRouterProvider, useHdsRouter } from './app/context/RouterContext.js';
+export type { HdsRouterAdapter, HdsRouterProviderProps, HdsLinkComponent, HdsLinkProps, HdsNavigateOptions, } from './app/context/RouterContext.js';

package/dist/types/src/lib/env.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Build-environment checks that survive being published.
+ *
+ * Shipped library code must never read `import.meta.env`. Vite's library build
+ * evaluates it at HDS's build time, not the consumer's, so `import.meta.env.DEV`
+ * bakes to `false` and `.PROD` to `true` inside `dist/` — turning every guard
+ * written against them into a constant for everyone who installs the package.
+ *
+ * `process.env.NODE_ENV` is the replacement because consumer bundlers
+ * substitute that exact member expression at THEIR build time, which is the
+ * moment that actually knows the answer. Vite, webpack, Next and esbuild all do
+ * it by default; plain Rollup needs `@rollup/plugin-replace` configured, so this
+ * is a convention rather than a guarantee, and the fallback below is what makes
+ * it safe when nobody substituted anything.
+ *
+ * READ THE SHAPE BEFORE CHANGING IT. The substitution replaces the member
+ * expression and nothing around it, so wrapping the read in `typeof process !==
+ * 'undefined' && ...` leaves a runtime check that a browser bundle always fails,
+ * inverting the answer in a production build. The bare read inside a `try` is
+ * substituted cleanly and the `catch` covers the one runtime that has no
+ * `process` at all: native ESM in a browser with no bundler. That runtime is
+ * always a real page, never a dev build, so it resolves to production and gets
+ * no warnings. Measured output and the reasoning live in `env.test.ts`, which
+ * fails if this shape is undone.
+ *
+ * Guarded by `src/lib/env.test.ts` and `tests/no-shipped-import-meta-env.test.ts`.
+ */
+/** True when the CONSUMER built for production, or when there is no build at all. */
+export declare function isProduction(): boolean;
+/** True outside a consumer production build — the gate for dev-only warnings. */
+export declare function isDevelopment(): boolean;

package/dist/types/src/lib/manifest-entry.d.ts

@@ -1,3 +1,3 @@
-import type { SystemManifest } from '../app/data/manifest-types';
+import type { SystemManifest } from '../app/data/manifest-types.js';
 declare const manifest: SystemManifest;
 export default manifest;

package/dist/types/src/scroll/index.d.ts

@@ -11,6 +11,6 @@
  * - `useScrollProgress` — Motion-based 0→1 scroll progress for a target element
  *   (no new dependency; works with or without `SmoothScroll`).
  */
-export { SmoothScroll, type SmoothScrollProps, type SmoothScrollOptions } from './smooth-scroll';
-export { useScrollProgress, type UseScrollProgressOptions, type ScrollOffset, } from './use-scroll-progress';
+export { SmoothScroll, type SmoothScrollProps, type SmoothScrollOptions } from './smooth-scroll.js';
+export { useScrollProgress, type UseScrollProgressOptions, type ScrollOffset, } from './use-scroll-progress.js';
 export { useLenis } from 'lenis/react';