@hirobius/design-system 0.13.1 → 0.15.0

package/dist/types/src/app/components/segmented-control.d.ts

@@ -39,7 +39,7 @@ interface HdsSegmentedOption {
     /** Optional supporting description shown below the label. */
     description?: string;
 }
-interface SegmentedControlProps {
+export interface SegmentedControlProps {
     /** Accessible label for the control. */
     label?: string;
     /** Accessible label when no visible label should be rendered. */

package/dist/types/src/app/components/sidebar.d.ts

@@ -22,7 +22,7 @@
 import React from 'react';
 type SidebarSide = 'start' | 'end';
 type LayoutGap = 'tight' | 'normal' | 'inset' | 'spacious';
-interface SidebarProps {
+export interface SidebarProps {
     /** Exactly two children: the rail first, the fluid content second (DOM order — `side` only changes visual order). */
     children: [React.ReactNode, React.ReactNode];
     /** Which visual edge the rail renders on. Defaults to 'start'. */

package/dist/types/src/app/components/skeleton.d.ts

@@ -2,6 +2,7 @@
  * Skeleton - placeholder shimmer for content that is still loading.
  * @category Feedback
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

package/dist/types/src/app/components/slider.d.ts

@@ -2,9 +2,10 @@
  * HdsSlider — range slider with label and value display.
  * @category Inputs
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265
  */
 /** HdsSlider — range slider with label and value display. */
-interface SliderProps {
+export interface SliderProps {
     /** Slider label. */
     label: string;
     /** Minimum value in the range. */
@@ -19,4 +20,3 @@ interface SliderProps {
     onChange: (v: number) => void;
 }
 export declare const HdsSlider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/types/src/app/components/spinner.d.ts

@@ -2,6 +2,7 @@
  * Spinner - indeterminate loading indicator.
  * @category Feedback
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

package/dist/types/src/app/components/stack.d.ts

@@ -6,7 +6,7 @@
  * @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.
  */
 import React from 'react';
-import hds from '../design-system/tokens';
+import hds from '../design-system/tokens.js';
 type SemanticGap = 'tight' | 'normal' | 'inset' | 'spacious';
 type ComponentGap = 'gap' | 'medium';
 type SubgridGap = 'hairline' | 'xs' | 'gap';
@@ -14,7 +14,7 @@ type SectionGap = 'stack';
 type GapOption = SemanticGap | ComponentGap | SubgridGap | SectionGap | keyof typeof hds.space;
 type FlexAlign = 'start' | 'center' | 'end' | 'stretch';
 type FlexJustify = 'start' | 'center' | 'end' | 'space-between';
-interface StackProps {
+export interface StackProps {
     /** Stack content rendered inside the flex wrapper. */
     children: React.ReactNode;
     /** Flex direction for the stack. */

package/dist/types/src/app/components/stat.d.ts

@@ -1,6 +1,7 @@
 /**
  * @category Display
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

package/dist/types/src/app/components/status-list-item.d.ts

@@ -1,6 +1,7 @@
 /**
  * @category Display
  * @tier pattern
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

package/dist/types/src/app/components/status-tile.d.ts

@@ -1,6 +1,7 @@
 /**
  * @category Display
  * @tier pattern
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292
  */
 import * as React from 'react';
 export type StatusTileTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';

package/dist/types/src/app/components/stepper-field.d.ts

@@ -1,4 +1,4 @@
-interface StepperFieldProps {
+export interface StepperFieldProps {
     label: string;
     value: number;
     min: number;
@@ -10,4 +10,3 @@ interface StepperFieldProps {
 }
 /** @public */
 export declare function StepperField({ label, value, min, max, step, onChange, inputStep, precision, }: StepperFieldProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/src/app/components/surface.d.ts

@@ -1,12 +1,12 @@
 import React, { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
-import type { PaddingOption } from './surface-padding';
+import type { PaddingOption } from './surface-padding.js';
 declare const surfaceVariants: (props?: {
     padding?: "none" | "item" | "px16" | "px24" | "component";
     shadow?: boolean;
 } & import("class-variance-authority/dist/types").ClassProp) => string;
 type SurfaceVariantProps = VariantProps<typeof surfaceVariants>;
-interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'>, Omit<SurfaceVariantProps, 'shadow'> {
+export interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'>, Omit<SurfaceVariantProps, 'shadow'> {
     /** Surface content. */
     children?: ReactNode;
     /** Padding: 'component' (24px, default) | 'item' (16px) | primitive px values | 'none' (0px). */

package/dist/types/src/app/components/switcher.d.ts

@@ -20,7 +20,7 @@
  */
 import React from 'react';
 type LayoutGap = 'tight' | 'normal' | 'inset' | 'spacious';
-interface SwitcherProps {
+export interface SwitcherProps {
     /** Switcher content — peer items that flip between row and column as a unit. */
     children: React.ReactNode;
     /** Container width below which items stack vertically (CSS length, e.g. '30rem'). Defaults to '30rem'. */

package/dist/types/src/app/components/table.d.ts

@@ -2,6 +2,7 @@
  * Table - structured data table primitive for documentation and compact UI matrices.
  * @category Display
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300
  */
 import { type ReactNode } from 'react';
 declare const tableHeaderCellVariants: (props?: {

package/dist/types/src/app/components/tabs.d.ts

@@ -21,6 +21,12 @@
  * @tier primitive
  */
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+/**
+ * The tab set itself. Tagged here rather than in the file block because
+ * TabsList and TabsContent share this module and have no Figma node of their
+ * own — a file-level @figma would silently claim this node for all four.
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89
+ */
 export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
 export declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/app/components/tag.d.ts

@@ -2,6 +2,7 @@
  * Tag — interactive filter and category chip.
  * @category Inputs
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11
  *
  * The outer <button> carries the accessible 44px hit target directly via the
  * size token while the inner pill keeps the visible surface compact. Colors

package/dist/types/src/app/components/textarea.d.ts

@@ -2,6 +2,7 @@
  * Textarea — multi-line text field primitive with label, helper, and error slots.
  * @category Inputs
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14
  *
  * Mirrors Input's shell + token skin as a native `<textarea>`. Figma parity:
  * the four states Default / Focus / Error / Disabled map to the focus-ring,

package/dist/types/src/app/components/toast.d.ts

@@ -2,6 +2,7 @@
  * Toast — transient feedback notifications (Radix Toast).
  * @category Feedback
  * @tier pattern
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367
  * @doc-exempt: no Overlays/Feedback-overlay doc page yet — add demo when created
  *
  * Imperative API: wrap the app once in <ToastProvider>, then call

package/dist/types/src/app/components/toggle.d.ts

@@ -2,11 +2,12 @@
  * HdsToggle — boolean on/off toggle with animated thumb.
  * @category Inputs
  * @tier primitive
+ * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19
  */
 import type { InputHTMLAttributes } from 'react';
 /** HdsToggle — boolean on/off toggle with animated thumb. */
 export type HdsToggleDemoState = 'rest' | 'hover' | 'focused' | 'pressed' | 'disabled';
-interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
     /** Toggle label displayed next to the control. */
     label: string;
     /** Current checked state. */
@@ -15,4 +16,3 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
     onChange: (v: boolean) => void;
 }
 export declare const HdsToggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/types/src/app/components/token.d.ts

@@ -69,7 +69,7 @@ type TokenDiagramProps = TokenBaseProps & {
     rawValue?: React.ReactNode;
     onClick?: () => void;
 };
-type TokenProps = TokenNodeSurfaceProps | TokenDiagramProps;
+export type TokenProps = TokenNodeSurfaceProps | TokenDiagramProps;
 /**
  * Token - unified token component.
  *

package/dist/types/src/app/context/TenantContext.d.ts

@@ -7,15 +7,29 @@ interface TenantCtx {
 /**
  * TenantProvider
  *
- * Reads VITE_TENANT_SLUG from the Vite environment and, if set, writes
- * `data-tenant="<slug>"` onto `<html>` so CSS tenant-scope selectors
+ * Writes `data-tenant="<slug>"` onto `<html>` so CSS tenant-scope selectors
  * (e.g. `[data-tenant="acme"] .hds-button`) resolve correctly at runtime.
  *
- * Single-tenant deployments that never set VITE_TENANT_SLUG are unaffected:
- * no attribute is written and no context value is populated.
+ * Pass the slug in. It used to be read from `VITE_TENANT_SLUG` via
+ * `import.meta.env`, which the library build evaluated at HDS's build time
+ * rather than the consumer's — it baked to `{}` in `dist/contexts.js`, so the
+ * provider had been an inert no-op for every installed consumer regardless of
+ * what they set. Taking a prop is therefore not a behaviour change for anyone
+ * downstream: it is the first version that works at all.
+ *
+ * An app that still wants an env var reads it itself and passes the result,
+ * which is the only place that knows its own build:
+ *
+ * ```tsx
+ * <TenantProvider slug={import.meta.env.VITE_TENANT_SLUG as TenantSlug}>
+ * ```
+ *
+ * Omitting `slug` writes no attribute and populates no context value.
  */
-export declare function TenantProvider({ children }: {
+export declare function TenantProvider({ children, slug, }: {
     children: ReactNode;
+    /** The active tenant, or null for a single-tenant deployment. */
+    slug?: TenantSlug | null;
 }): import("react/jsx-runtime").JSX.Element;
 /** Returns the active tenant slug (null in single-tenant mode). */
 export declare function useTenant(): TenantCtx;

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

@@ -10,10 +10,10 @@
  *     {app}
  *   </FontProvider></ThemeProvider></LanguageProvider></TenantProvider>
  */
-export * from './ThemeContext';
-export * from './LanguageContext';
-export * from './TenantContext';
-export * from './FontContext';
-export * from './DemoStateContext';
-export * from './TokenDisplayContext';
-export * from './RouterContext';
+export * from './ThemeContext.js';
+export * from './LanguageContext.js';
+export * from './TenantContext.js';
+export * from './FontContext.js';
+export * from './DemoStateContext.js';
+export * from './TokenDisplayContext.js';
+export * from './RouterContext.js';

package/dist/types/src/app/design-system/generated-token-refs.d.ts

@@ -7,7 +7,7 @@
  * Import in tokens.ts or any component that needs a CSS var string without hardcoding.
  *
  * Usage:
- *   import { tokenRefs } from './generated-token-refs';
+ *   import { tokenRefs } from './generated-token-refs.js';
  *   tokenRefs.semantic.typography.mono          // { fontFamily: 'var(...)', ... }
  *   tokenRefs.semantic.color.surface.page       // 'var(--semantic-color-surface-page)'
  */

package/dist/types/src/app/design-system/generated-token-values.d.ts

@@ -7,7 +7,7 @@
  * Import in doc pages instead of hardcoding hex strings, font names, or OKLCH values.
  *
  * Usage:
- *   import { tokenValues } from './generated-token-values';
+ *   import { tokenValues } from './generated-token-values.js';
  *   tokenValues.primitive.color.blue['500']        // '#1e2fff'
  *   tokenValues.primitive.typography.family.primary[0]   // 'Clash Grotesk'
  *   tokenValues.primitive.color.blue['500']        // 'oklch(0.49 0.2903 266.54)'

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

@@ -5,7 +5,7 @@
  * Import this wherever you need resolved colours for a given dark/light mode.
  *
  * Usage:
- *   import { ct } from '../design-system/theme';
+ *   import { ct } from '../design-system/theme.js';
  *   const t = ct(isDark);
  *   // t.bg, t.content, t.accent, etc.
  */

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

@@ -11,6 +11,6 @@
  * useReducedMotion() is true, one fix point instead of a `MotionConfig`
  * wrapper per component.
  */
-import hds from '../design-system/tokens';
+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/layouts/CaseStudyLayout.d.ts

@@ -10,12 +10,11 @@
  *   contentSlot → full-width (maxWidth="max")  — chapters, galleries, learnings
  */
 import type { ReactNode } from 'react';
-interface CaseStudyLayoutProps {
+export interface CaseStudyLayoutProps {
     heroSlot: ReactNode;
     introSlot: ReactNode;
     metricsSlot?: ReactNode;
     contentSlot: ReactNode;
 }
 /** @public */
-export declare function CaseStudyLayout({ heroSlot, introSlot, metricsSlot, contentSlot }: CaseStudyLayoutProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function CaseStudyLayout({ heroSlot, introSlot, metricsSlot, contentSlot, }: CaseStudyLayoutProps): import("react/jsx-runtime").JSX.Element;

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';