@hirobius/design-system 0.16.0 → 0.17.0

package/dist/types/src/app/components/inline-code.d.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const inlineCodeVariants: (props?: {
-    density?: "compact" | "comfortable";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const inlineCodeVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type InlineCodeVariantProps = VariantProps<typeof inlineCodeVariants>;
 export type InlineCodeProps = {
     children: ReactNode;

package/dist/types/src/app/components/input-group.d.ts

@@ -5,9 +5,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const inputGroupVariants: (props?: {
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const inputGroupVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type InputGroupVariantProps = VariantProps<typeof inputGroupVariants>;
 /** @public */
 export interface InputGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, InputGroupVariantProps {

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

@@ -6,11 +6,11 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const inputVariants: (props?: {
-    size?: "sm" | "md" | "lg";
-    textStyle?: "body" | "mono";
-    invalid?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    textStyle?: "body" | "mono" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type InputFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
 /** @public */
 export type InputSize = NonNullable<VariantProps<typeof inputVariants>['size']>;

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

@@ -5,9 +5,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const kbdVariants: (props?: {
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const kbdVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type KbdVariantProps = VariantProps<typeof kbdVariants>;
 /** @public */
 export interface KbdProps extends React.HTMLAttributes<HTMLElement>, KbdVariantProps {

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

@@ -7,9 +7,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const metadataListVariants: (props?: {
-    orientation?: "horizontal" | "vertical";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const metadataListVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type MetadataListVariantProps = VariantProps<typeof metadataListVariants>;
 /** A single term/description pair rendered by MetadataList. */
 export interface MetadataListItem {

package/dist/types/src/app/components/nav-group.d.ts

@@ -7,9 +7,9 @@ type NavItem = {
     disabled?: boolean;
 };
 type NavGroupVariant = 'side' | 'toc';
-declare const navGroupLabelVariants: (props?: {
-    variant?: "side" | "toc";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const navGroupLabelVariants: (props?: ({
+    variant?: "side" | "toc" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export type NavGroupProps = {
     label?: string;
     variant?: NavGroupVariant;

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

@@ -1,13 +1,13 @@
 import type { AnchorHTMLAttributes, MouseEvent } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type NavLevel } from '../lib/navLevels.js';
-declare const navItemVariants: (props?: {
-    variant?: "side" | "toc";
-    state?: "default" | "active" | "disabled" | "focus" | "hover";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const navIndicatorVariants: (props?: {
-    state?: "default" | "active" | "disabled" | "focus" | "hover";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const navItemVariants: (props?: ({
+    variant?: "side" | "toc" | null | undefined;
+    state?: "default" | "active" | "disabled" | "focus" | "hover" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const navIndicatorVariants: (props?: ({
+    state?: "default" | "active" | "disabled" | "focus" | "hover" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type NavItemVariantProps = VariantProps<typeof navItemVariants>;
 type NavVariant = NonNullable<NavItemVariantProps['variant']>;
 type NavNativeProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'onClick'>;
@@ -25,7 +25,9 @@ export interface NavProps extends NavNativeProps {
     /** Navigation callback fired before the browser follows the link. */
     onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
-/** @public */
+/**
+ * @public
+ */
 export declare function NavItem({ variant, label, href, active, disabled, level, onNavigate, className, style, onFocus, onMouseEnter, onMouseLeave, onPointerDown, onPointerUp, onPointerCancel, onBlur, ...rest }: NavProps): import("react/jsx-runtime").JSX.Element;
 /** @internal — CVA variant helpers; compose via NavItem props instead. */
 export { navItemVariants, navIndicatorVariants };

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

@@ -15,5 +15,7 @@ export interface OverflowListProps extends React.HTMLAttributes<HTMLDivElement>
     /** Custom renderer for the overflow node. Defaults to a muted `+N` chip. */
     renderOverflow?: (count: number) => React.ReactNode;
 }
-/** Renders up to `max` children followed by a `+N` overflow chip (or custom node). */
+/**
+ * Renders up to `max` children followed by a `+N` overflow chip (or custom node).
+ */
 export declare const OverflowList: React.ForwardRefExoticComponent<OverflowListProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -38,6 +38,8 @@ export interface PageProps {
     style?: CSSProperties;
     className?: string;
 }
-/** @public */
+/**
+ * @public
+ */
 export declare function Page({ children, maxWidth, paddingY, style, className, }: PageProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,9 +6,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const progressTrackVariants: (props?: {
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ProgressVariantProps = VariantProps<typeof progressTrackVariants>;
 /** @public */
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'>, ProgressVariantProps {

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

@@ -1,11 +1,11 @@
 /**
- * HdsRadio — radio button with animated selection indicator.
+ * Radio — radio button with animated selection indicator.
  * @category Inputs
  * @tier primitive
  * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17
  */
 import type { InputHTMLAttributes } from 'react';
-/** HdsRadio — radio button with animated selection indicator. */
+/** Radio — radio button with animated selection indicator. */
 export type HdsRadioDemoState = 'rest' | 'hover' | 'focused' | 'pressed' | 'disabled';
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
     /** Radio label displayed next to the control. */
@@ -15,4 +15,4 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** Called when the radio changes. */
     onChange: (v: boolean) => void;
 }
-export declare const HdsRadio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -26,5 +26,7 @@ export interface RevealProps {
     /** Element rendered as the wrapper. Defaults to 'div'. */
     as?: React.ElementType;
 }
-/** @public */
+/**
+ * @public
+ */
 export declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,35 +1,35 @@
 import { type VariantProps } from 'class-variance-authority';
-declare const segmentedControlWrapperVariants: (props?: {
-    fullWidth?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const segmentedControlRailVariants: (props?: {
-    variant?: "primary" | "secondary";
-    fullWidth?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const segmentedControlItemVariants: (props?: {
-    size?: "sm" | "md";
-    fullWidth?: boolean;
-    variant?: "primary" | "secondary";
-    active?: boolean;
-    interaction?: "rest" | "hover" | "pressed";
-    disabled?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const segmentedControlIndicatorVariants: (props?: {
-    variant?: "primary" | "secondary";
-    active?: boolean;
-    interaction?: "rest" | "hover" | "pressed";
-    disabled?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const segmentedControlDescriptionVariants: (props?: {
-    variant?: "primary" | "secondary";
-    active?: boolean;
-    interaction?: "rest" | "hover" | "pressed";
-    disabled?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const segmentedControlFocusRingVariants: (props?: {
-    variant?: "primary" | "secondary";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const segmentedControlLabelVariants: (props?: import("class-variance-authority/dist/types").ClassProp) => string;
+declare const segmentedControlWrapperVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const segmentedControlRailVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const segmentedControlItemVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    variant?: "primary" | "secondary" | null | undefined;
+    active?: boolean | null | undefined;
+    interaction?: "rest" | "hover" | "pressed" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const segmentedControlIndicatorVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    active?: boolean | null | undefined;
+    interaction?: "rest" | "hover" | "pressed" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const segmentedControlDescriptionVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    active?: boolean | null | undefined;
+    interaction?: "rest" | "hover" | "pressed" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const segmentedControlFocusRingVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const segmentedControlLabelVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 type SegmentedItemVariantProps = VariantProps<typeof segmentedControlItemVariants>;
 interface HdsSegmentedOption {
     /** Value submitted when this option is selected. */

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

@@ -1,11 +1,11 @@
 /**
- * HdsSelect — dropdown selector built on Radix Select.
+ * Select — dropdown selector built on Radix Select.
  * @category Inputs
  * @tier primitive
  * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49
  */
 /**
- * HdsSelect — dropdown selector built on Radix Select (ADR-001 Radix convention).
+ * Select — dropdown selector built on Radix Select (ADR-001 Radix convention).
  * Radix owns the listbox a11y contract: managed focus + active-descendant, typeahead,
  * full keyboard (Home/End/PageUp-Down/wrap), Popper collision/flip positioning, and
  * dismissal. The HDS surface is styled with the token-backed Tailwind idiom used by
@@ -26,4 +26,4 @@ export interface SelectProps {
     /** Called when the user picks a different option. */
     onChange: (v: string) => void;
 }
-export declare const HdsSelect: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/src/app/components/selectable-card.d.ts

@@ -10,9 +10,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const selectableCardVariants: (props?: {
-    selected?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const selectableCardVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type SelectableCardVariantProps = VariantProps<typeof selectableCardVariants>;
 /** @public */
 export interface SelectableCardProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onSelect'>, Omit<SelectableCardVariantProps, 'selected'> {

package/dist/types/src/app/components/side-nav.d.ts

@@ -12,10 +12,12 @@ export interface SideNavProps {
     indent?: boolean | number;
     onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
-declare const sideNavVariants: (props?: {
-    level?: "root" | "nested";
-    state?: "default" | "active" | "disabled" | "focus" | "hover";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const sideNavVariants: (props?: ({
+    level?: "root" | "nested" | null | undefined;
+    state?: "default" | "active" | "disabled" | "focus" | "hover" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+/**
+ */
 export declare function SideNav({ label, href, active, disabled, titleLabel, level, indent, onNavigate, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
 /** @internal — CVA variant helper; compose via SideNav props instead. */
 export { sideNavVariants };

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

@@ -6,9 +6,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const skeletonVariants: (props?: {
-    variant?: "text" | "rectangular" | "circular";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const skeletonVariants: (props?: ({
+    variant?: "text" | "rectangular" | "circular" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
 /** @public */
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, SkeletonVariantProps {

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

@@ -1,10 +1,10 @@
 /**
- * HdsSlider — range slider with label and value display.
+ * Slider — 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. */
+/** Slider — range slider with label and value display. */
 export interface SliderProps {
     /** Slider label. */
     label: string;
@@ -19,4 +19,4 @@ export interface SliderProps {
     /** Called when the slider value changes. */
     onChange: (v: number) => void;
 }
-export declare const HdsSlider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -6,9 +6,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const spinnerVariants: (props?: {
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;
 /** @public */
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, SpinnerVariantProps {

package/dist/types/src/app/components/stacked-card-rail.d.ts

@@ -0,0 +1,32 @@
+/**
+ * StackedCardRail — horizontally-scrolling stacked card carousel.
+ *
+ * Scroll mechanism: vertical scroll on an absolutely-positioned inner container
+ * is mapped to horizontal scroll on a sticky inner strip via a single scroll
+ * event listener. Cards use CSS scroll-driven animation (animation-timeline:
+ * view(x …)) for the stack/unstack effect where the browser supports it;
+ * a plain horizontal rail is the graceful fallback.
+ *
+ * Browser compat note:
+ *   - animation-timeline: view() — Chrome 115+, Firefox 110+ (behind flag until
+ *     v114), Safari 18+ (TP only as of 2025). The @supports guard ensures the
+ *     stacking animation is only applied when the feature is available; all other
+ *     browsers get a clean scrollable row.
+ *   - :has() selector (neighbour shift on hover) — Chrome 105+, FF 121+, Safari 15.4+.
+ *     Gated with @supports selector(:has(+ *)).
+ *
+ * @category Display
+ * @tier pattern
+ */
+export interface StackedCardRailCard {
+    id: string;
+    title: string;
+    category?: string;
+    coverImage?: string;
+    href?: string;
+}
+export interface StackedCardRailProps {
+    cards: StackedCardRailCard[];
+}
+export declare function StackedCardRail({ cards }: StackedCardRailProps): import("react/jsx-runtime").JSX.Element;
+export default StackedCardRail;

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

@@ -5,9 +5,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const statVariants: (props?: {
-    tone?: "success" | "danger" | "warning" | "info" | "neutral";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const statVariants: (props?: ({
+    tone?: "success" | "danger" | "warning" | "info" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type StatVariantProps = VariantProps<typeof statVariants>;
 /** @public */
 export interface StatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, StatVariantProps {

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

@@ -5,10 +5,10 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const statusDotVariants: (props?: {
-    tone?: "success" | "danger" | "warning" | "info" | "neutral" | "inProgress";
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const statusDotVariants: (props?: ({
+    tone?: "success" | "danger" | "warning" | "info" | "neutral" | "inProgress" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type StatusDotVariantProps = VariantProps<typeof statusDotVariants>;
 /** @public */
 export interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>, StatusDotVariantProps {

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

@@ -5,9 +5,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const statusListItemDotVariants: (props?: {
-    tone?: "success" | "danger" | "warning" | "info" | "neutral";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const statusListItemDotVariants: (props?: ({
+    tone?: "success" | "danger" | "warning" | "info" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type StatusListItemVariantProps = VariantProps<typeof statusListItemDotVariants>;
 /** @public */
 export type StatusListItemTone = NonNullable<StatusListItemVariantProps['tone']>;

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

@@ -6,9 +6,9 @@
  */
 import * as React from 'react';
 /** @internal */
-declare const stepMarkerVariants: (props?: {
-    state?: "current" | "complete" | "upcoming";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const stepMarkerVariants: (props?: ({
+    state?: "current" | "complete" | "upcoming" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export interface Step {
     /** Visible label for the step. */
@@ -25,7 +25,9 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
     /** Layout direction. Defaults to 'horizontal'. */
     orientation?: 'horizontal' | 'vertical';
 }
-/** Step indicator for multi-step flows. Purely presentational — no navigation. */
+/**
+ * Step indicator for multi-step flows. Purely presentational — no navigation.
+ */
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
 /** @internal — CVA variant helper; compose via Stepper's internal state instead. */
 export { stepMarkerVariants };

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

@@ -1,10 +1,10 @@
 import React, { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 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;
+declare const surfaceVariants: (props?: ({
+    padding?: "none" | "item" | "px16" | "px24" | "component" | null | undefined;
+    shadow?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type SurfaceVariantProps = VariantProps<typeof surfaceVariants>;
 export interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'>, Omit<SurfaceVariantProps, 'shadow'> {
     /** Surface content. */

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

@@ -5,23 +5,34 @@
  * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300
  */
 import { type ReactNode } from 'react';
-declare const tableHeaderCellVariants: (props?: {
-    align?: "left" | "right" | "center";
-    density?: "compact" | "comfortable";
-    sticky?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const tableDataCellVariants: (props?: {
-    align?: "left" | "right" | "center";
-    density?: "compact" | "comfortable";
-    divider?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const tableHeaderCellVariants: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+    density?: "compact" | "comfortable" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const tableSortButtonVariants: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const tableDataCellVariants: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+    density?: "compact" | "comfortable" | null | undefined;
+    divider?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export type TableColumnAlign = 'left' | 'center' | 'right';
+/** @public */
+export type TableSortDirection = 'ascending' | 'descending' | 'none';
 export type TableColumn = {
     key: string;
     label: ReactNode;
     width?: string;
     align?: TableColumnAlign;
+    /** Renders the header as a button and sets `aria-sort` on the header cell. */
+    sortable?: boolean;
+    /** Current sort state for this column; defaults to `'none'` when `sortable`. */
+    sortDirection?: TableSortDirection;
+    /** Called when the sort button is activated (click, Enter, or Space). */
+    onSort?: () => void;
 };
 export type TableCellSlot = 'label' | 'value' | 'description' | 'token' | 'code' | 'custom' | 'icon' | 'badge' | 'action';
 export type TableCell = {
@@ -49,4 +60,4 @@ export declare function Table({ columns, rows, caption, captionAction, descripti
     stickyHeader?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 /** @internal — CVA variant helpers; compose via Table props instead. */
-export { tableHeaderCellVariants, tableDataCellVariants };
+export { tableHeaderCellVariants, tableDataCellVariants, tableSortButtonVariants };

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

@@ -17,10 +17,10 @@
  * contract expects, just keyed by selection instead of tone/size/density.
  */
 import * as React from 'react';
-declare const tagButtonVariants: (props?: import("class-variance-authority/dist/types").ClassProp) => string;
-declare const tagPillVariants: (props?: {
-    selected?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const tagButtonVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+declare const tagPillVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export interface TagProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     /** Tag content displayed inside the pill. */

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

@@ -7,9 +7,9 @@
  */
 import { type CSSProperties, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const textVariants: (props?: {
-    variant?: "display" | "caption" | "body" | "heading1" | "heading2" | "heading3" | "ui" | "eyebrow" | "technical" | "badge" | "docLede" | "docBody" | "docSmall" | "docCode";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const textVariants: (props?: ({
+    variant?: "display" | "caption" | "body" | "heading1" | "heading2" | "heading3" | "ui" | "eyebrow" | "technical" | "badge" | "docLede" | "docBody" | "docSmall" | "docCode" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type TextVariantProps = VariantProps<typeof textVariants>;
 type TextVariant = NonNullable<TextVariantProps['variant']>;
 type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';

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

@@ -10,10 +10,10 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const textareaVariants: (props?: {
-    resize?: "none" | "both" | "vertical";
-    invalid?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const textareaVariants: (props?: ({
+    resize?: "none" | "both" | "vertical" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export type TextareaResize = NonNullable<VariantProps<typeof textareaVariants>['resize']>;
 export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled'> {

package/dist/types/src/app/components/time-input.d.ts

@@ -11,9 +11,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const hdsTimeInputVariants: (props?: {
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const hdsTimeInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type TimeInputVariantProps = VariantProps<typeof hdsTimeInputVariants>;
 /** @public */
 export interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, TimeInputVariantProps {

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

@@ -21,9 +21,9 @@
 import * as React from 'react';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { type VariantProps } from 'class-variance-authority';
-declare const toastIconVariants: (props?: {
-    tone?: "success" | "danger" | "warning" | "info" | "neutral";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const toastIconVariants: (props?: ({
+    tone?: "success" | "danger" | "warning" | "info" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ToastIconVariantProps = VariantProps<typeof toastIconVariants>;
 /** @public */
 export type ToastTone = NonNullable<ToastIconVariantProps['tone']>;