@toteat-eng/ds-react 2026.6.10 → 2026.6.11

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+import type { IconNameType } from "../Icon";
+export type BannerVariant = "info" | "success" | "warning" | "error" | "neutral";
+export interface BannerProps {
+    variant?: BannerVariant;
+    icon?: IconNameType;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    "data-testid"?: string;
+}
+export declare function Banner({ variant, icon, onDismiss, dismissLabel, action, children, className, "data-testid": testId, }: BannerProps): React.ReactElement;

package/dist/components/Banner/__stories__/Banner.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Banner } from "../Banner";
+declare const meta: Meta<typeof Banner>;
+export default meta;
+type Story = StoryObj<typeof Banner>;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Neutral: Story;
+export declare const WithIcon: Story;
+export declare const WithDismiss: Story;
+export declare const WithAction: Story;
+export declare const WithDismissAndAction: Story;
+export declare const AllVariants: Story;
+export declare const BothThemes: Story;

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export type { BannerProps, BannerVariant } from "./Banner";
+export { Banner } from "./Banner";

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,14 +1,12 @@
+import type React from "react";
 export interface BreadcrumbItem {
-    id: string;
     label: string;
     href?: string;
 }
 export interface BreadcrumbProps {
     items: BreadcrumbItem[];
-    onBack?: () => void;
-    backLabel?: string;
-    label?: string;
+    "aria-label"?: string;
     className?: string;
     "data-testid"?: string;
 }
-export declare function Breadcrumb({ items, onBack, backLabel, label, className, "data-testid": testId, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Breadcrumb({ items, "aria-label": ariaLabel, className, "data-testid": testId, }: BreadcrumbProps): React.ReactElement | null;

package/dist/components/Breadcrumb/__stories__/Breadcrumb.stories.d.ts

@@ -3,12 +3,9 @@ import { Breadcrumb } from "../Breadcrumb";
 declare const meta: Meta<typeof Breadcrumb>;
 export default meta;
 type Story = StoryObj<typeof Breadcrumb>;
+export declare const Default: Story;
+export declare const TwoLevels: Story;
+export declare const DeepHierarchy: Story;
 export declare const SingleItem: Story;
-export declare const MultipleItems: Story;
-export declare const WithBackButton: Story;
-export declare const WithoutBackButton: Story;
-export declare const ItemsWithHref: Story;
-export declare const ItemsWithHrefAndBack: Story;
-export declare const ThemeVue3: Story;
-export declare const ThemeAngularLegacy: Story;
+export declare const CustomLabel: Story;
 export declare const BothThemes: Story;

package/dist/components/CloseButton/CloseButton.d.ts

@@ -0,0 +1,18 @@
+export interface CloseButtonProps {
+    onClick?: () => void;
+    /** Accessible name for the dismiss button. */
+    label?: string;
+    /** Icon size in px (also drives the rendered close glyph size). */
+    size?: number;
+    /** Consumer class applied alongside the zero-specificity baseline, so the
+     * host component's exact look is preserved. */
+    className?: string;
+    "data-testid"?: string;
+}
+/**
+ * Internal dismiss-button primitive. NOT part of the public API — used to
+ * de-duplicate the bespoke close buttons across Dialog, Toast, UserNotification and
+ * OverlayMessage. Renders a single native `<button>` containing the canonical
+ * `close-outline` icon.
+ */
+export declare function CloseButton({ onClick, label, size, className, "data-testid": testId, }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CloseButton/index.d.ts

@@ -0,0 +1,2 @@
+export type { CloseButtonProps } from "./CloseButton";
+export { CloseButton } from "./CloseButton";

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -15,6 +15,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, info: ErrorInfo): void;
     handleRetry: () => void;
-    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 }
 export {};

package/dist/components/ExtrasDialog/index.d.ts

@@ -1,2 +1,2 @@
-export type { ExtrasDialogProps } from "./ExtrasDialog";
+export type { ExtrasCategoryType, ExtrasDialogProps, SelectedExtraType } from "./ExtrasDialog";
 export { ExtrasDialog } from "./ExtrasDialog";

package/dist/components/GroupedButtons/GroupedButtons.d.ts

@@ -7,6 +7,8 @@ export interface GroupedButtonOption {
     label: string;
     disabled?: boolean;
     icon?: IconName;
+    /** Forwarded to this option's `<button>` for use as a test/Playwright locator. */
+    "data-testid"?: string;
 }
 export interface GroupedButtonsProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, "onChange"> {
     label: string;

package/dist/components/Icon/__stories__/Icon.stories.d.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Icon } from "../Icon";
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Primary: Story;
+/**
+ * Gallery of every icon in the sprite. Use the search box / Ctrl+F to find one,
+ * then copy its name into the `name` prop. Names map 1:1 to the `IconNameType` union.
+ */
+export declare const AllIcons: Story;
+/** The `size` prop accepts a number (px) or any CSS length string. */
+export declare const Sizes: Story;
+/**
+ * Color is driven by `currentColor` by default — set `color` on a parent and the
+ * icon follows. The `color` prop maps a token suffix to `var(--color-<token>)`
+ * and only applies to `-outline` / `-filled` icons.
+ */
+export declare const Colors: Story;
+/**
+ * `currentColor` inheritance: no `color` prop is set on the icons below — they
+ * each inherit the text color of their wrapper, which is the recommended way to
+ * keep icons in sync with surrounding text.
+ */
+export declare const CurrentColorInheritance: Story;
+/**
+ * Accessibility:
+ * - **Decorative (default):** with no `aria-label`, the icon is `aria-hidden="true"`
+ *   and removed from the accessibility tree. Use this when the icon merely
+ *   decorates adjacent text (e.g. a labelled button).
+ * - **Meaningful:** pass `aria-label` to expose the icon as `role="img"` with an
+ *   accessible name. Use this when the icon is the only conveyor of meaning
+ *   (e.g. an icon-only button).
+ */
+export declare const Accessibility: Story;

package/dist/components/Icon/icons.d.ts

@@ -15,8 +15,8 @@ export declare const ICON_ARROW_UP_OUTLINE: readonly ["<path fill-rule='evenodd'
 export declare const ICON_BARCODE_OUTLINE: readonly ["<path d='M13.76 8a.48.48 0 0 1-.48.48H2.72a.48.48 0 1 1 0-.96h.96v-2.4h.96v2.4h.96v-2.4h.96v2.4h.96v-2.4h.96v2.4h.96v-2.4h.96v2.4h.96v-2.4h.96v2.4h.96a.48.48 0 0 1 .48.48ZM4.64 10.88h-.96V9.44h.96v1.44ZM12.32 10.88h-.96V9.44h.96v1.44ZM6.56 10.4H5.6v-.96h.96v.96ZM8.48 10.4h-.96v-.96h.96v.96ZM10.4 10.4h-.96v-.96h.96v.96ZM1.28 5.12V3.68c0-.794.646-1.44 1.44-1.44h1.44a.48.48 0 1 1 0 .96H2.72a.48.48 0 0 0-.48.48v1.44a.48.48 0 1 1-.96 0ZM14.72 3.68v1.44a.48.48 0 1 1-.96 0V3.68a.48.48 0 0 0-.48-.48h-1.44a.48.48 0 1 1 0-.96h1.44c.794 0 1.44.646 1.44 1.44ZM4.64 13.28a.48.48 0 0 1-.48.48H2.72c-.794 0-1.44-.646-1.44-1.44v-1.44a.48.48 0 1 1 .96 0v1.44c0 .265.215.48.48.48h1.44a.48.48 0 0 1 .48.48ZM14.72 10.88v1.44c0 .794-.646 1.44-1.44 1.44h-1.44a.48.48 0 1 1 0-.96h1.44a.48.48 0 0 0 .48-.48v-1.44a.48.48 0 1 1 .96 0Z'/>", "0 0 16 16"];
 export declare const ICON_BELL_OUTLINE: readonly ["<path d='M13.98 12.667h-.525V8.139c0-2.424-1.483-4.488-3.563-5.288V1.96C9.892.877 9.042 0 7.995 0 6.95 0 6.103.88 6.103 1.96v.885C4.025 3.643 2.54 5.71 2.54 8.136v4.53h-.525a.526.526 0 0 0-.515.534c0 .293.232.533.515.533H5.45C5.64 15.013 6.708 16 8 16s2.36-.987 2.549-2.267h3.436c.283 0 .515-.24.515-.533a.53.53 0 0 0-.52-.533M7.132 1.96A.88.88 0 0 1 8 1.067c.476 0 .862.4.862.893v.608a5 5 0 0 0-.872-.08c-.294 0-.577.032-.858.077zM8 14.8c-.72 0-1.216-.376-1.39-1.067h2.812C9.249 14.424 8.72 14.8 8 14.8m-4.297-2.3V8.139C3.703 5.613 5.895 3.8 8 3.8s4.203 1.813 4.203 4.339V12.5z'/>", "0 0 16 16"];
 export declare const ICON_CALENDAR_ALT_OUTLINE: readonly ["<path d='M7.47 10.14a.842.842 0 0 1-.205-.724c.01-.053.025-.102.04-.15.02-.048.045-.096.07-.14.03-.042.06-.085.095-.122a.617.617 0 0 1 .245-.171.662.662 0 0 1 .57 0c.045.015.09.042.13.069.04.032.08.064.115.102.035.037.065.08.095.123.025.043.05.09.065.14a.777.777 0 0 1 .06.305c0 .208-.08.417-.22.567-.034.038-.075.07-.115.102-.04.027-.085.054-.13.075a1.1 1.1 0 0 1-.14.043.636.636 0 0 1-.29 0c-.05-.01-.095-.027-.14-.043a1.048 1.048 0 0 1-.13-.075 1.07 1.07 0 0 1-.115-.102Zm3.335 2.951a.77.77 0 0 0 .165.262c.035.038.075.07.115.103.04.026.085.053.13.075.045.015.09.032.14.042a.725.725 0 0 0 .675-.22.699.699 0 0 0 .16-.262.777.777 0 0 0 .045-.46.737.737 0 0 0-.045-.15.694.694 0 0 0-.16-.263.716.716 0 0 0-.675-.22.624.624 0 0 0-.14.049.617.617 0 0 0-.245.171 1.19 1.19 0 0 0-.095.123c-.025.043-.05.091-.07.14-.014.048-.03.096-.04.15a.777.777 0 0 0 0 .31c.01.054.025.102.04.15Zm-3.5 0c.02.048.045.097.07.14.03.042.06.085.095.123a.621.621 0 0 0 .245.171.624.624 0 0 0 .285.064.636.636 0 0 0 .284-.064.61.61 0 0 0 .131-.07c.04-.032.08-.064.115-.101a.699.699 0 0 0 .16-.262.777.777 0 0 0 .06-.305.843.843 0 0 0-.22-.569.607.607 0 0 0-.246-.171.663.663 0 0 0-.57 0 .617.617 0 0 0-.244.171.843.843 0 0 0-.165.873Zm3.5-3.214a.77.77 0 0 0 .165.263c.035.037.075.069.115.101.04.027.085.054.13.075.045.016.09.032.14.043a.636.636 0 0 0 .29 0c.05-.01.095-.027.14-.043a1.02 1.02 0 0 0 .13-.075c.04-.032.08-.064.115-.102a.699.699 0 0 0 .16-.263.777.777 0 0 0 .045-.46.737.737 0 0 0-.045-.15.697.697 0 0 0-.16-.262.716.716 0 0 0-1.06 0 .806.806 0 0 0-.165.262c-.014.048-.03.097-.04.15a.777.777 0 0 0 0 .31c.01.054.025.103.04.15Zm-6.305.498c.195 0 .39-.086.53-.236s.22-.353.22-.567a.843.843 0 0 0-.22-.568c-.28-.3-.78-.3-1.06 0a.843.843 0 0 0 0 1.135c.14.15.33.236.53.236ZM15 4.215v10.178c0 .886-.673 1.607-1.5 1.607h-11c-.827 0-1.5-.721-1.5-1.607V4.214c0-.886.673-1.607 1.5-1.607H4V1.536C4 1.24 4.224 1 4.5 1s.5.24.5.536v1.071h6V1.536c0-.296.224-.536.5-.536s.5.24.5.536v1.071h1.5c.827 0 1.5.721 1.5 1.607Zm-1 3.214H2v6.964c0 .295.224.536.5.536h11c.276 0 .5-.24.5-.536V7.429Zm0-3.215c0-.295-.224-.535-.5-.535H12V4.75c0 .296-.224.536-.5.536s-.5-.24-.5-.536V3.679H5V4.75c0 .296-.224.536-.5.536S4 5.046 4 4.75V3.679H2.5c-.276 0-.5.24-.5.535v2.143h12V4.214ZM4.5 13.59c.2 0 .39-.085.53-.235.14-.15.22-.354.22-.568a.833.833 0 0 0-.22-.568.737.737 0 0 0-1.06 0 .833.833 0 0 0-.22.568c0 .214.08.418.22.568.14.15.33.235.53.235Z'/>", "0 0 16 16"];
-export declare const ICON_CALENDAR_LOCKED_OUTLINE: readonly ["<path d='M15 4.214v10.179c0 .886-.673 1.607-1.5 1.607h-11c-.827 0-1.5-.721-1.5-1.607V4.214c0-.886.673-1.607 1.5-1.607h11c.827 0 1.5.721 1.5 1.607Zm-1 3.214H2v6.965c0 .295.224.535.5.535h11c.276 0 .5-.24.5-.535V7.428Zm0-3.214c0-.295-.224-.536-.5-.536H12V4.75c0 .296-.224.536-.5.536s-.5-.24-.5-.536V3.678H6V4.75c0 .296-.224.536-.5.536S5 5.046 5 4.75V3.678H2.5c-.276 0-.5.24-.5.536v2.143h12V4.214Z'/><path d='M5.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5M11.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5'/><path d='M10.063 10.25h-.376v-.375A1.877 1.877 0 0 0 7.813 8a1.877 1.877 0 0 0-1.875 1.875v.375h-.375a.375.375 0 0 0-.375.375v3c0 .207.167.375.375.375h4.5a.375.375 0 0 0 .374-.375v-3a.375.375 0 0 0-.374-.375Zm-3.376-.375a1.125 1.125 0 0 1 2.25 0v.375h-2.25v-.375Zm3 3.375h-3.75V11h3.75v2.25Z'/><path d='M7.813 12.5a.375.375 0 1 0 0-.75.375.375 0 0 0 0 .75Z'/>", "0 0 16 16"];
-export declare const ICON_CALENDAR_OUTLINE: readonly ["<path d='M7.47 10.14a.843.843 0 0 1-.205-.724c.01-.054.025-.102.04-.15.02-.048.045-.097.07-.14.03-.042.06-.085.095-.123a.616.616 0 0 1 .245-.171.662.662 0 0 1 .57 0c.045.016.09.043.13.07.04.032.08.064.115.101a.697.697 0 0 1 .16.262.777.777 0 0 1 .06.305c0 .21-.08.42-.22.57-.034.037-.075.069-.115.1-.04.028-.085.054-.13.076a1.1 1.1 0 0 1-.14.043.636.636 0 0 1-.29 0 1.08 1.08 0 0 1-.14-.043 1.048 1.048 0 0 1-.13-.075 1.07 1.07 0 0 1-.115-.102Zm3.335 2.951a.767.767 0 0 0 .28.364c.04.027.085.054.13.075.045.016.09.032.14.043a.725.725 0 0 0 .675-.22.696.696 0 0 0 .16-.263.778.778 0 0 0 .045-.46.74.74 0 0 0-.045-.15.696.696 0 0 0-.16-.262.716.716 0 0 0-.675-.22.624.624 0 0 0-.14.048.617.617 0 0 0-.245.172 1.19 1.19 0 0 0-.095.123c-.025.043-.05.091-.07.14-.014.047-.03.096-.04.15a.777.777 0 0 0 0 .31c.01.054.025.102.04.15Zm-3.5 0c.02.048.045.096.07.14.03.042.06.085.095.123a.617.617 0 0 0 .245.171.624.624 0 0 0 .285.064.636.636 0 0 0 .284-.064.607.607 0 0 0 .131-.07c.04-.032.08-.064.115-.101a.696.696 0 0 0 .16-.263.778.778 0 0 0 .06-.305.843.843 0 0 0-.22-.568c-.034-.038-.075-.07-.115-.102a.607.607 0 0 0-.13-.07.663.663 0 0 0-.57 0 .617.617 0 0 0-.13.07c-.04.032-.08.064-.115.102a.843.843 0 0 0-.205.723c.01.053.025.102.04.15Zm3.5-3.214a.77.77 0 0 0 .165.263c.035.037.075.069.115.101.04.027.085.053.13.075.045.016.09.032.14.043a.636.636 0 0 0 .29 0c.05-.01.095-.027.14-.043.045-.022.09-.048.13-.075.04-.032.08-.064.115-.102a.699.699 0 0 0 .16-.263.777.777 0 0 0 .045-.46.737.737 0 0 0-.045-.15.697.697 0 0 0-.16-.263.716.716 0 0 0-.675-.22c-.05.012-.095.028-.14.044-.045.021-.09.048-.13.075-.04.032-.08.064-.115.101a.806.806 0 0 0-.165.263c-.014.048-.03.096-.04.15a.777.777 0 0 0 0 .31c.01.054.025.102.04.15Zm-6.305.498c.195 0 .39-.086.53-.236s.22-.353.22-.568a.843.843 0 0 0-.22-.568c-.28-.3-.78-.3-1.06 0a.843.843 0 0 0 0 1.136c.14.15.33.236.53.236ZM15 4.215v10.178c0 .886-.673 1.607-1.5 1.607h-11c-.827 0-1.5-.721-1.5-1.607V4.214c0-.886.673-1.607 1.5-1.607h11c.827 0 1.5.721 1.5 1.607Zm-1 3.213H2v6.965c0 .295.224.535.5.535h11c.276 0 .5-.24.5-.535V7.428Zm0-3.214c0-.295-.224-.536-.5-.536H12V4.75c0 .296-.224.536-.5.536s-.5-.24-.5-.536V3.678H6V4.75c0 .296-.224.536-.5.536S5 5.046 5 4.75V3.678H2.5c-.276 0-.5.24-.5.536v2.143h12V4.214ZM4.5 13.59c.2 0 .39-.086.53-.236s.22-.353.22-.567a.833.833 0 0 0-.22-.568.737.737 0 0 0-1.06 0 .833.833 0 0 0-.22.568c0 .214.08.417.22.567.14.15.33.236.53.236Z'/><path d='M5.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5M11.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5'/>", "0 0 16 16"];
+export declare const ICON_CALENDAR_LOCKED_OUTLINE: readonly ["<path d='M15 4.214v10.179c0 .886-.673 1.607-1.5 1.607h-11c-.827 0-1.5-.721-1.5-1.607V4.214c0-.886.673-1.607 1.5-1.607h11c.827 0 1.5.721 1.5 1.607Zm-1 3.214H2v6.965c0 .295.224.535.5.535h11c.276 0 .5-.24.5-.535V7.428Zm0-3.214c0-.295-.224-.536-.5-.536H12V4.75c0 .296-.224.536-.5.536s-.5-.24-.5-.536V3.678H6V4.75c0 .296-.224.536-.5.536S5 5.046 5 4.75V3.678H2.5c-.276 0-.5.24-.5.536v2.143h12V4.214Z'/><path stroke='currentColor' d='M5.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5M11.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5'/><path d='M10.063 10.25h-.376v-.375A1.877 1.877 0 0 0 7.813 8a1.877 1.877 0 0 0-1.875 1.875v.375h-.375a.375.375 0 0 0-.375.375v3c0 .207.167.375.375.375h4.5a.375.375 0 0 0 .374-.375v-3a.375.375 0 0 0-.374-.375Zm-3.376-.375a1.125 1.125 0 0 1 2.25 0v.375h-2.25v-.375Zm3 3.375h-3.75V11h3.75v2.25Z'/><path d='M7.813 12.5a.375.375 0 1 0 0-.75.375.375 0 0 0 0 .75Z'/>", "0 0 16 16"];
+export declare const ICON_CALENDAR_OUTLINE: readonly ["<path d='M7.47 10.14a.843.843 0 0 1-.205-.724c.01-.054.025-.102.04-.15.02-.048.045-.097.07-.14.03-.042.06-.085.095-.123a.616.616 0 0 1 .245-.171.662.662 0 0 1 .57 0c.045.016.09.043.13.07.04.032.08.064.115.101a.697.697 0 0 1 .16.262.777.777 0 0 1 .06.305c0 .21-.08.42-.22.57-.034.037-.075.069-.115.1-.04.028-.085.054-.13.076a1.1 1.1 0 0 1-.14.043.636.636 0 0 1-.29 0 1.08 1.08 0 0 1-.14-.043 1.048 1.048 0 0 1-.13-.075 1.07 1.07 0 0 1-.115-.102Zm3.335 2.951a.767.767 0 0 0 .28.364c.04.027.085.054.13.075.045.016.09.032.14.043a.725.725 0 0 0 .675-.22.696.696 0 0 0 .16-.263.778.778 0 0 0 .045-.46.74.74 0 0 0-.045-.15.696.696 0 0 0-.16-.262.716.716 0 0 0-.675-.22.624.624 0 0 0-.14.048.617.617 0 0 0-.245.172 1.19 1.19 0 0 0-.095.123c-.025.043-.05.091-.07.14-.014.047-.03.096-.04.15a.777.777 0 0 0 0 .31c.01.054.025.102.04.15Zm-3.5 0c.02.048.045.096.07.14.03.042.06.085.095.123a.617.617 0 0 0 .245.171.624.624 0 0 0 .285.064.636.636 0 0 0 .284-.064.607.607 0 0 0 .131-.07c.04-.032.08-.064.115-.101a.696.696 0 0 0 .16-.263.778.778 0 0 0 .06-.305.843.843 0 0 0-.22-.568c-.034-.038-.075-.07-.115-.102a.607.607 0 0 0-.13-.07.663.663 0 0 0-.57 0 .617.617 0 0 0-.13.07c-.04.032-.08.064-.115.102a.843.843 0 0 0-.205.723c.01.053.025.102.04.15Zm3.5-3.214a.77.77 0 0 0 .165.263c.035.037.075.069.115.101.04.027.085.053.13.075.045.016.09.032.14.043a.636.636 0 0 0 .29 0c.05-.01.095-.027.14-.043.045-.022.09-.048.13-.075.04-.032.08-.064.115-.102a.699.699 0 0 0 .16-.263.777.777 0 0 0 .045-.46.737.737 0 0 0-.045-.15.697.697 0 0 0-.16-.263.716.716 0 0 0-.675-.22c-.05.012-.095.028-.14.044-.045.021-.09.048-.13.075-.04.032-.08.064-.115.101a.806.806 0 0 0-.165.263c-.014.048-.03.096-.04.15a.777.777 0 0 0 0 .31c.01.054.025.102.04.15Zm-6.305.498c.195 0 .39-.086.53-.236s.22-.353.22-.568a.843.843 0 0 0-.22-.568c-.28-.3-.78-.3-1.06 0a.843.843 0 0 0 0 1.136c.14.15.33.236.53.236ZM15 4.215v10.178c0 .886-.673 1.607-1.5 1.607h-11c-.827 0-1.5-.721-1.5-1.607V4.214c0-.886.673-1.607 1.5-1.607h11c.827 0 1.5.721 1.5 1.607Zm-1 3.213H2v6.965c0 .295.224.535.5.535h11c.276 0 .5-.24.5-.535V7.428Zm0-3.214c0-.295-.224-.536-.5-.536H12V4.75c0 .296-.224.536-.5.536s-.5-.24-.5-.536V3.678H6V4.75c0 .296-.224.536-.5.536S5 5.046 5 4.75V3.678H2.5c-.276 0-.5.24-.5.536v2.143h12V4.214ZM4.5 13.59c.2 0 .39-.086.53-.236s.22-.353.22-.567a.833.833 0 0 0-.22-.568.737.737 0 0 0-1.06 0 .833.833 0 0 0-.22.568c0 .214.08.417.22.567.14.15.33.236.53.236Z'/><path stroke='currentColor' d='M5.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5M11.5 4V2c0-.333-.2-1-1-1s-1 .667-1 1v1.5'/>", "0 0 16 16"];
 export declare const ICON_CARROT_FILLED: readonly ["<path d='M1.4 22.116c1.812 1.632 13.968-5.604 15.768-8.652.864-1.464-.156-3.612-1.824-5.328 1.896-1.26 3.564 2.664 5.148 1.836.72-.384 1.188-1.572.84-2.304-.624-1.296-2.7-1.296-4.104-1.452.996-.24 3.384-1.26 3.432-2.7.048-1.104-1.356-2.364-2.46-2.232-1.452.168-1.98 2.256-2.472 3.6-.06-.852-.24-2.724-1.176-3.54-1.248-1.092-2.748-.06-2.784 1.26-.048 1.596 3.384 2.484 2.304 4.404C12.248 5.604 10.1 4.836 8.72 5.64c-.588.372-1.26 1.092-1.956 2.028 1.068 1.128 2.544 2.484 3.708 3.264.24.168.312.504.132.744a.53.53 0 0 1-.744.144c-1.188-.804-2.64-2.136-3.72-3.252a32.183 32.183 0 0 0-1.608 2.676c1.02 1.032 2.316 2.196 3.348 2.892.24.168.3.504.132.744a.541.541 0 0 1-.756.144c-1.02-.696-2.232-1.776-3.252-2.784C1.88 16.428.32 21.156 1.4 22.116Z'/>", "0 0 24 24"];
 export declare const ICON_CHECK_OUTLINE: readonly ["<path d='M14.04 4.04a.65.65 0 0 1 .92.92l-9 9a.651.651 0 0 1-.968-.054l-4-5-.071-.11A.65.65 0 0 1 1.915 8l.093.094 3.546 4.431L14.04 4.04Z'/>", "0 0 16 16"];
 export declare const ICON_CHECKBOX_CHECKED: readonly ["<path fill='#1B1B1B' d='M11 0H1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1Zm-6 8.75L2.5 6.271l.795-.771L5 7.173 8.704 3.5l.796.788L5 8.75Z'/>", "0 0 12 12"];
@@ -37,10 +37,10 @@ export declare const ICON_COPY_SQUARE_OUTLINE: readonly ["<path d='M11.77 4.23A2
 export declare const ICON_DELETE_OUTLINE: readonly ["<path d='M3.098 3.297a.634.634 0 0 0-.634.638v9.543c0 1.046.86 1.907 1.907 1.907h7.639c1.046 0 1.907-.86 1.907-1.907V3.935a.637.637 0 0 0-.635-.638H3.098Zm.638 1.272h8.907v8.909a.623.623 0 0 1-.634.634H4.371a.623.623 0 0 1-.634-.634V4.569Z'/><path d='M1.825 3.3a.636.636 0 0 0 0 1.272h12.731a.638.638 0 0 0 0-1.272H1.825Z'/><path d='M5.644.117c-1.047 0-1.908.86-1.908 1.907v1.911a.637.637 0 0 0 1.274 0V2.024c0-.359.275-.634.634-.634h5.093c.359 0 .634.275.634.634v1.911a.64.64 0 0 0 .639.634.636.636 0 0 0 .634-.634V2.024c0-1.047-.861-1.907-1.908-1.907H5.644ZM6.283 5.845a.64.64 0 0 0-.639.634v5.725a.64.64 0 0 0 1.088.45.635.635 0 0 0 .185-.45V6.479a.636.636 0 0 0-.634-.634ZM10.102 5.845a.64.64 0 0 0-.639.634v5.725a.64.64 0 0 0 1.088.45.632.632 0 0 0 .185-.45V6.479a.636.636 0 0 0-.634-.634Z'/>", "0 0 16 16"];
 export declare const ICON_DISCOUNT_OUTLINE: readonly ["<path d='M9.273 9.91a.636.636 0 1 0 0-1.274.636.636 0 0 0 0 1.273ZM6.727 7.364a.636.636 0 1 0 0-1.273.636.636 0 0 0 0 1.273ZM6.546 9.91a.455.455 0 0 1-.322-.778L9.127 6.23a.455.455 0 1 1 .643.643L6.868 9.776a.453.453 0 0 1-.322.133Z'/><path d='M8 15a1.93 1.93 0 0 1-1.369-.566l-.665-.665a.853.853 0 0 0-.607-.251h-.941a1.94 1.94 0 0 1-1.936-1.936v-.942a.852.852 0 0 0-.252-.606l-.665-.666a1.94 1.94 0 0 1 0-2.737l.665-.666a.852.852 0 0 0 .252-.606v-.942a1.94 1.94 0 0 1 1.935-1.935h.942a.853.853 0 0 0 .606-.252l.666-.665a1.94 1.94 0 0 1 2.738 0l.665.665a.853.853 0 0 0 .607.251h.942a1.94 1.94 0 0 1 1.935 1.936v.942a.854.854 0 0 0 .252.606l.665.666a1.94 1.94 0 0 1 0 2.737l-.665.665a.855.855 0 0 0-.252.607v.942a1.94 1.94 0 0 1-1.935 1.935h-.942a.85.85 0 0 0-.607.252l-.665.665A1.93 1.93 0 0 1 8 15ZM8 2.077a.857.857 0 0 0-.607.251l-.665.664a1.924 1.924 0 0 1-1.368.567h-.942a.86.86 0 0 0-.858.858v.942a1.924 1.924 0 0 1-.567 1.368l-.666.666a.86.86 0 0 0 0 1.214l.665.665a1.924 1.924 0 0 1 .567 1.368v.942a.86.86 0 0 0 .859.858h.942a1.925 1.925 0 0 1 1.368.567l.665.665a.86.86 0 0 0 1.214 0l.666-.665a1.923 1.923 0 0 1 1.368-.567h.941a.86.86 0 0 0 .859-.858v-.942a1.924 1.924 0 0 1 .567-1.368l.665-.665a.86.86 0 0 0 0-1.214l-.665-.666a1.925 1.925 0 0 1-.567-1.368v-.941a.86.86 0 0 0-.858-.859h-.942a1.924 1.924 0 0 1-1.368-.566l-.666-.666A.857.857 0 0 0 8 2.077Z'/>", "0 0 16 16"];
 export declare const ICON_DOCUMENT_GENERIC_OUTLINE: readonly ["<path d='M5.703 4.333a.417.417 0 0 0 0 .834h4.53a.417.417 0 0 0 0-.834h-4.53ZM5.286 7.678c0-.23.187-.416.417-.416h4.53a.417.417 0 0 1 0 .833h-4.53a.417.417 0 0 1-.417-.417ZM5.703 10.167a.417.417 0 1 0 0 .833H8.41a.417.417 0 1 0 0-.833H5.703Z'/><path d='M3 2.667C3 1.747 3.746 1 4.667 1h6.666C12.253 1 13 1.746 13 2.667v10c0 .92-.746 1.666-1.667 1.666H4.667c-.92 0-1.667-.746-1.667-1.666v-10Zm8.333-.834H4.667a.833.833 0 0 0-.834.834v10c0 .46.373.833.834.833h6.666c.46 0 .834-.373.834-.833v-10a.833.833 0 0 0-.834-.834Z'/>", "0 0 16 16"];
-export declare const ICON_DOCUMENT_HISTORY_ALT_OUTLINE: readonly ["<path stroke-linecap='round' stroke-linejoin='round' d='M7.5 5v4H11'/><circle cx='8' cy='8' r='6.4' stroke-width='1.2'/>", "0 0 16 16"];
-export declare const ICON_DOCUMENT_HISTORY_OUTLINE: readonly ["<path d='M14.17 3.44A6.928 6.928 0 1 1 3.264 11.99a.533.533 0 1 1 .839-.658 5.884 5.884 0 1 0-1.207-4.246s-.077.117-.308.298l-.81-.098.095-.526A6.922 6.922 0 0 1 14.169 3.44Z'/><path d='m.486 5.994 4.531-.29a.289.289 0 0 1 .252.458L3.177 9.026a.289.289 0 0 1-.442.029L.295 6.48a.289.289 0 0 1 .191-.486Z'/><path stroke-linecap='round' stroke-linejoin='round' d='M8 5v4h4'/>", "0 0 16 16"];
+export declare const ICON_DOCUMENT_HISTORY_ALT_OUTLINE: readonly ["<path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M7.5 5v4H11'/><circle cx='8' cy='8' r='6.4' stroke='currentColor' stroke-width='1.2'/>", "0 0 16 16"];
+export declare const ICON_DOCUMENT_HISTORY_OUTLINE: readonly ["<path d='M14.17 3.44A6.928 6.928 0 1 1 3.264 11.99a.533.533 0 1 1 .839-.658 5.884 5.884 0 1 0-1.207-4.246s-.077.117-.308.298l-.81-.098.095-.526A6.922 6.922 0 0 1 14.169 3.44Z'/><path d='m.486 5.994 4.531-.29a.289.289 0 0 1 .252.458L3.177 9.026a.289.289 0 0 1-.442.029L.295 6.48a.289.289 0 0 1 .191-.486Z'/><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M8 5v4h4'/>", "0 0 16 16"];
 export declare const ICON_DOCUMENT_LIST_OUTLINE: readonly ["<path d='M7.524 4.333a.417.417 0 0 0 0 .834h2.708a.417.417 0 0 0 0-.834H7.524ZM7.107 7.678c0-.23.187-.416.417-.416h2.708a.417.417 0 0 1 0 .833H7.524a.417.417 0 0 1-.417-.417ZM7.524 10.167a.417.417 0 1 0 0 .833h2.708a.417.417 0 1 0 0-.833H7.524Z'/><path d='M3 2.667C3 1.747 3.746 1 4.667 1h6.666C12.253 1 13 1.746 13 2.667v10c0 .92-.746 1.666-1.667 1.666H4.667c-.92 0-1.667-.746-1.667-1.666v-10Zm8.333-.834H4.667a.833.833 0 0 0-.834.834v10c0 .46.373.833.834.833h6.666c.46 0 .834-.373.834-.833v-10a.833.833 0 0 0-.834-.834Z'/><path d='M5.5 4.333a.417.417 0 0 0 0 .834h.292a.417.417 0 0 0 0-.834H5.5ZM5.5 7.262a.417.417 0 1 0 0 .833h.292a.417.417 0 0 0 0-.833H5.5ZM5.5 10.167a.417.417 0 1 0 0 .833h.292a.417.417 0 1 0 0-.833H5.5Z'/>", "0 0 16 16"];
-export declare const ICON_DRAG_HANDLE_OUTLINE: readonly ["<circle cx='5' cy='4' r='1.25'/><circle cx='5' cy='8' r='1.25'/><circle cx='5' cy='12' r='1.25'/><circle cx='11' cy='4' r='1.25'/><circle cx='11' cy='8' r='1.25'/><circle cx='11' cy='12' r='1.25'/>", "0 0 16 16"];
+export declare const ICON_DRAG_HANDLE_OUTLINE: readonly ["<path d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/>", "0 0 24 24"];
 export declare const ICON_ERROR_FILLED_RED: readonly ["<path fill='#E12845' fill-rule='evenodd' d='M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14ZM3.353 3.044a.571.571 0 0 0-.185.933L6.192 7l-3.024 3.023a.572.572 0 0 0 .809.81L7 7.807l3.024 3.024a.573.573 0 0 0 .808-.809L7.808 7l3.024-3.023a.571.571 0 1 0-.809-.81L7 6.193 3.977 3.168a.571.571 0 0 0-.624-.124Z' clip-rule='evenodd'/>", "0 0 14 14"];
 export declare const ICON_ERROR_OUTLINE: readonly ["<path fill-rule='evenodd' d='M7 13A6 6 0 1 0 7 1a6 6 0 0 0 0 12Zm0 1A7 7 0 1 0 7 0a7 7 0 0 0 0 14Z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M4.164 4.13a.5.5 0 0 1 .706.034l5 5.5a.5.5 0 1 1-.74.672l-5-5.5a.5.5 0 0 1 .034-.706Z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M9.836 4.13a.5.5 0 0 0-.706.034l-5 5.5a.5.5 0 1 0 .74.672l5-5.5a.5.5 0 0 0-.034-.706Z' clip-rule='evenodd'/>", "0 0 14 14"];
 export declare const ICON_EXCLAMATION_OUTLINE: readonly ["<path fill-rule='evenodd' d='M8 15.2A7.2 7.2 0 1 0 8 .8a7.2 7.2 0 0 0 0 14.4Zm0 .8A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z' clip-rule='evenodd'/><path d='M7.53 12.8v-1.056h.94V12.8h-.94Zm0-2.304V2.784h.94v7.712h-.94Z'/><path fill-rule='evenodd' d='M8 15.04A7.04 7.04 0 1 0 8 .96a7.04 7.04 0 0 0 0 14.08ZM8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z' clip-rule='evenodd'/>", "0 0 16 16"];

package/dist/components/PermissionGate/PermissionGate.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+export interface PermissionGateProps {
+    /** Permission decision resolved by the consumer app. When false, renders fallback. */
+    allowed: boolean;
+    /** Rendered when allowed is true. */
+    children: ReactNode;
+    /** Rendered when allowed is false. @default null */
+    fallback?: ReactNode;
+    /**
+     * Accepted to satisfy the DS `data-testid` convention and to let consumers spread
+     * a testid coming from a parent without a TypeScript error. It is intentionally
+     * UNUSED: this component renders a React fragment with no DOM root to attach it to
+     * (identical to `React.Fragment`, which also ignores `data-testid`). If you need a
+     * testable DOM node, put it on the children you pass in.
+     */
+    "data-testid"?: string;
+}
+/**
+ * PermissionGate — a purely PRESENTATIONAL / STRUCTURAL primitive.
+ *
+ * It contains NO RBAC logic: no scopes, no bitwise actions, no hooks, no stores.
+ * Each consumer app computes the permission decision and passes it in as the
+ * `allowed` boolean. When `allowed` is true the `children` are rendered, otherwise
+ * the `fallback` (default `null`) is rendered.
+ *
+ * It renders a React fragment with NO DOM wrapper, so it never injects an anonymous
+ * layout node into a flex/grid container. There is no `.module.css` for this
+ * component because it has no visual surface of its own.
+ */
+export declare function PermissionGate({ allowed, children, fallback }: PermissionGateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/PermissionGate/__stories__/PermissionGate.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PermissionGate } from "../PermissionGate";
+declare const meta: Meta<typeof PermissionGate>;
+export default meta;
+type Story = StoryObj<typeof PermissionGate>;
+export declare const Allowed: Story;
+export declare const Denied_: Story;
+export declare const DeniedNoFallback: Story;
+export declare const DynamicToggle: Story;
+export declare const BothThemes: Story;

package/dist/components/PermissionGate/index.d.ts

@@ -0,0 +1,2 @@
+export type { PermissionGateProps } from "./PermissionGate";
+export { PermissionGate } from "./PermissionGate";

package/dist/components/ProductTile/index.d.ts

@@ -1,2 +1,2 @@
-export type { ProductTileProps } from "./ProductTile";
+export type { ProductTileProps, ProductTileType, StockStatusType } from "./ProductTile";
 export { ProductTile } from "./ProductTile";

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,13 +1,32 @@
-export interface SearchInputProps {
-    value: string;
-    onChange: (value: string) => void;
+import type { InputHTMLAttributes } from "react";
+export type SearchInputSize = "sm" | "md" | "lg";
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /**
+     * Fired on every input change, debounced by `debounceMs`.
+     *
+     * Controlled-mode note: when a `value` prop is provided the component is
+     * controlled and the clear button also fires the debounced `onSearch("")`,
+     * but it CANNOT reset the input itself — the consumer owns `value`. Reset it
+     * in your `onClear`/`onSearch` handler, otherwise the field keeps its value.
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Fired when the clear button is pressed.
+     *
+     * Uncontrolled: the internal value is reset to "" before this fires.
+     * Controlled (a `value` prop is provided): the component does NOT (and
+     * cannot) reset the input — you own `value`. Reset it here (or in
+     * `onSearch`) to actually clear the field; the click already fired the
+     * debounced `onSearch("")` for you.
+     */
     onClear?: () => void;
-    placeholder?: string;
-    label: string;
-    id?: string;
-    disabled?: boolean;
+    /** Debounce window for `onSearch`, in milliseconds. Defaults to 300. */
+    debounceMs?: number;
+    /** Visual size of the field. Maps to `data-size` on the root. */
+    size?: SearchInputSize;
+    /** Accessible label for the clear button. */
     clearLabel?: string;
     className?: string;
     "data-testid"?: string;
 }
-export declare function SearchInput({ value, onChange, onClear, placeholder, label, id: idProp, disabled, clearLabel, className, "data-testid": testId, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchInput({ onSearch, onClear, debounceMs, size, clearLabel, className, value, defaultValue, onChange, disabled, "data-testid": testId, ...rest }: SearchInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchInput/__stories__/SearchInput.stories.d.ts

@@ -3,9 +3,10 @@ import { SearchInput } from "../SearchInput";
 declare const meta: Meta<typeof SearchInput>;
 export default meta;
 type Story = StoryObj<typeof SearchInput>;
-export declare const Empty: Story;
+export declare const Default: Story;
 export declare const WithValue: Story;
+export declare const Small: Story;
+export declare const Large: Story;
 export declare const Disabled: Story;
-export declare const DisabledWithValue: Story;
-export declare const CustomPlaceholder: Story;
+export declare const AllSizes: Story;
 export declare const BothThemes: Story;

package/dist/components/SearchInput/index.d.ts

@@ -1,2 +1,2 @@
-export type { SearchInputProps } from "./SearchInput";
+export type { SearchInputProps, SearchInputSize } from "./SearchInput";
 export { SearchInput } from "./SearchInput";

package/dist/components/StatusBanner/StatusBanner.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+import type { IconNameType } from "../Icon";
+export type StatusBannerVariant = "info" | "success" | "warning" | "error" | "neutral";
+export interface StatusBannerProps {
+    variant?: StatusBannerVariant;
+    icon?: IconNameType;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    "data-testid"?: string;
+}
+/**
+ * Persistent, non-dismissable status surface (e.g. POS connectivity).
+ * Shares the notification surface with UserNotification but never renders a
+ * dismiss control. Uses `aria-atomic="true"` so assistive tech re-announces the
+ * full message when its content changes.
+ */
+export declare function StatusBanner({ variant, icon, action, children, className, "data-testid": testId, }: StatusBannerProps): React.ReactElement;

package/dist/components/StatusBanner/__stories__/StatusBanner.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StatusBanner } from "../StatusBanner";
+/**
+ * Persistent, non-dismissable status surface (e.g. POS connectivity).
+ *
+ * a11y note: when `variant="error"` the root is `role="alert"` /
+ * `aria-live="assertive"` / `aria-atomic="true"`. Do NOT mutate `children` on
+ * every render in an error/alert banner — each change re-announces the full
+ * message and floods screen-reader users. Update the text only when the
+ * underlying status actually changes.
+ */
+declare const meta: Meta<typeof StatusBanner>;
+export default meta;
+type Story = StoryObj<typeof StatusBanner>;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Neutral: Story;
+export declare const WithIcon: Story;
+export declare const WithAction: Story;
+export declare const AllVariants: Story;
+export declare const BothThemes: Story;

package/dist/components/StatusBanner/index.d.ts

@@ -0,0 +1,2 @@
+export type { StatusBannerProps, StatusBannerVariant } from "./StatusBanner";
+export { StatusBanner } from "./StatusBanner";

package/dist/components/Stepper/Stepper.d.ts

@@ -1,17 +1,16 @@
+import type React from "react";
 export interface StepperProps {
     value: number;
     onChange: (value: number) => void;
-    /** Lower bound (inclusive). Must be ≤ `max`. @default 0 */
     min?: number;
-    /** Upper bound (inclusive). Must be ≥ `min`. @default Number.MAX_SAFE_INTEGER */
     max?: number;
-    /** Increment size. Must be > 0. @default 1 */
     step?: number;
     disabled?: boolean;
-    "aria-label"?: string;
     decrementLabel?: string;
     incrementLabel?: string;
     className?: string;
+    /** Accessible name for the `role="group"` container. Required — an unnamed group is an a11y violation. */
+    "aria-label": string;
     "data-testid"?: string;
 }
-export declare function Stepper({ value, onChange, min, max, step, disabled, "aria-label": ariaLabel, decrementLabel, incrementLabel, className, "data-testid": testId, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stepper({ value, onChange, min, max, step, disabled, decrementLabel, incrementLabel, className, "aria-label": ariaLabel, "data-testid": testId, }: StepperProps): React.ReactElement;

package/dist/components/Stepper/__stories__/Stepper.stories.d.ts

@@ -4,8 +4,8 @@ declare const meta: Meta<typeof Stepper>;
 export default meta;
 type Story = StoryObj<typeof Stepper>;
 export declare const Default: Story;
-export declare const AtMin: Story;
-export declare const AtMax: Story;
-export declare const FullyDisabled: Story;
+export declare const WithMax: Story;
 export declare const CustomStep: Story;
+export declare const AtMinBound: Story;
+export declare const Disabled: Story;
 export declare const BothThemes: Story;

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,36 @@
+import type { GroupedButtonSize } from "../GroupedButtons";
+import type { IconName } from "../Icon";
+export type TabValue = string | number;
+export type TabSelectedColor = "primary" | "secondary" | "tertiary" | "neutral-100";
+export interface TabItem {
+    value: TabValue;
+    label: string;
+    disabled?: boolean;
+    icon?: IconName;
+    /** Forwarded to this tab's `<button>` for use as a test/Playwright locator. */
+    "data-testid"?: string;
+}
+export interface TabProps {
+    /** Tabs to render as a segmented control. */
+    tabs: TabItem[];
+    /** Accessible label for the tablist / button group. */
+    label: string;
+    /** Controlled selected value. When provided the caller owns selection. */
+    selectedTab?: TabValue;
+    /** Size of the control. Defaults to "medium". */
+    size?: GroupedButtonSize;
+    /** Stretch the control to fill its container. Defaults to true (Vue3 parity). */
+    fullWidth?: boolean;
+    /** Color applied to the selected pill. Defaults to "secondary". */
+    selectedColor?: TabSelectedColor;
+    /** Fired whenever a (non-disabled) tab is selected. */
+    onChange?: (value: TabValue) => void;
+    /** Fired on tab click with the full tab descriptor. */
+    onTabClick?: (tab: {
+        value: TabValue;
+        label: string;
+    }) => void;
+    className?: string;
+    "data-testid"?: string;
+}
+export declare function Tab({ tabs, label, selectedTab, size, fullWidth, selectedColor, onChange, onTabClick, className, "data-testid": testId, }: TabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tab/__stories__/Tab.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tab } from "../Tab";
+declare const meta: Meta<typeof Tab>;
+export default meta;
+type Story = StoryObj<typeof Tab>;
+export declare const Default: Story;
+export declare const ControlledExample: Story;
+export declare const Sizes: Story;
+export declare const FitContent: Story;
+export declare const WithIcons: Story;
+export declare const DisabledTab: Story;
+export declare const SelectedColors: Story;
+export declare const BothThemes: Story;

package/dist/components/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export type { TabItem, TabProps, TabSelectedColor, TabValue } from "./Tab";
+export { Tab } from "./Tab";

package/dist/components/TextInput/TextInput.d.ts

@@ -1,9 +1,55 @@
-import { type InputHTMLAttributes } from "react";
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import type { IconNameType } from "../Icon/icons";
 export type TextInputSize = "small" | "medium" | "large";
+/**
+ * Validation state, mirroring the Vue3 DS `TextInput`. `default` is the resting
+ * state; `success` / `warning` / `error` drive the field border, optional status
+ * icon, and (for `error`) `aria-invalid`. The legacy `error` boolean prop is kept
+ * for backward compatibility and is treated as `validationState="error"`.
+ */
+export type TextInputValidationState = "default" | "success" | "warning" | "error";
 export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Control height / typography scale. */
+    size?: TextInputSize;
+    /**
+     * Legacy shorthand for an error look. Equivalent to `validationState="error"`.
+     * Kept for backward compatibility — existing consumers pass `error`.
+     */
     error?: boolean;
+    /** Renders an eye toggle for `type="password"` fields. */
     showPasswordToggle?: boolean;
-    size?: TextInputSize;
+    /** Visible `<label>` associated with the input. */
+    label?: ReactNode;
+    /** Shows a red `*` after the label and sets `aria-required`. */
+    required?: boolean;
+    /** Validation state. Takes precedence over the legacy `error` boolean. */
+    validationState?: TextInputValidationState;
+    /** Error message; shown only when the resolved state is `error`. Wires `aria-describedby`. */
+    errorMessage?: ReactNode;
+    /** Helper / hint text shown below the field. Wires `aria-describedby`. */
+    helperText?: ReactNode;
+    /** Alignment of the helper text relative to the character counter. */
+    helperTextAlign?: "left" | "right";
+    /** Icon rendered before the input. */
+    prefixIcon?: IconNameType;
+    /** Icon rendered after the input (suppressed when clear / password / status icon shows). */
+    suffixIcon?: IconNameType;
+    /** Shows a clear (×) button when the field has a value. Requires `value` + `onChange`. */
+    clearable?: boolean;
+    /** Callback fired when the clear button is pressed (after clearing the value). */
+    onClear?: () => void;
+    /** Accessible label for the clear button. @default "Limpiar" */
+    clearLabel?: string;
+    /** Accessible label for the password-reveal button while the password is hidden. @default "Mostrar contraseña" */
+    showPasswordLabel?: string;
+    /** Accessible label for the password-reveal button while the password is shown. @default "Ocultar contraseña" */
+    hidePasswordLabel?: string;
+    /** Shows a character counter. Implicitly enabled when `maxLength` is set. */
+    showCounter?: boolean;
+    /** Renders the status icon (success / warning / error) inside the field. Defaults to `true`. */
+    showValidationIcon?: boolean;
+    /** Makes the field span the full width of its container. */
+    fullWidth?: boolean;
     "data-testid"?: string;
 }
 export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TextInput/__stories__/TextInput.stories.d.ts

@@ -11,4 +11,15 @@ export declare const EmailInput: Story;
 export declare const PasswordInput: Story;
 export declare const PasswordWithToggle: Story;
 export declare const SearchInput: Story;
+export declare const WithLabel: Story;
+export declare const Required: Story;
+export declare const WithHelperText: Story;
+export declare const WithErrorMessage: Story;
+export declare const ValidationStates: Story;
+export declare const WithPrefixIcon: Story;
+export declare const WithSuffixIcon: Story;
+export declare const Clearable: Story;
+export declare const WithCounter: Story;
+export declare const Sizes: Story;
+export declare const FullWidth: Story;
 export declare const States: Story;

package/dist/components/TextInput/index.d.ts

@@ -1,2 +1,2 @@
-export type { TextInputProps } from "./TextInput";
+export type { TextInputProps, TextInputSize, TextInputValidationState } from "./TextInput";
 export { TextInput } from "./TextInput";

package/dist/components/UserNotification/NotificationBase.d.ts

@@ -0,0 +1,41 @@
+import type React from "react";
+import type { IconNameType } from "../Icon";
+/**
+ * Shared presentational/ARIA shell for notification-surface primitives
+ * (UserNotification, StatusBanner). INTERNAL — never exported from any index.ts.
+ *
+ * Owns only structure + ARIA. Each caller supplies its own CSS-module root
+ * class (`rootClassName`) so visual variance (e.g. enter animation, inline-flex
+ * vs flex) lives entirely in the caller's module.css.
+ */
+export type NotificationVariant = "info" | "success" | "warning" | "error" | "neutral";
+export interface NotificationBaseProps {
+    variant: NotificationVariant;
+    /**
+     * Caller's CSS-module root class (e.g. styles.notification / styles.statusBanner).
+     * Typed loosely because CSS-module lookups widen to `string | undefined` under
+     * `noUncheckedIndexedAccess`.
+     */
+    rootClassName: string | undefined;
+    /** Caller's content span class. */
+    contentClassName: string | undefined;
+    /** Caller's action span class. */
+    actionClassName: string | undefined;
+    icon?: IconNameType;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+    /** Extra consumer-supplied className, merged after the module root class. */
+    className?: string;
+    "data-testid"?: string;
+    /**
+     * Trailing control (e.g. UserNotification passes <CloseButton/>).
+     * StatusBanner omits it — no element is rendered when undefined.
+     */
+    dismissSlot?: React.ReactNode;
+    /**
+     * Adds aria-atomic="true" to the root. Opt-in so callers that must keep a
+     * frozen DOM (UserNotification) are unaffected.
+     */
+    ariaAtomic?: boolean;
+}
+export declare function NotificationBase({ variant, rootClassName, contentClassName, actionClassName, icon, action, children, className, "data-testid": testId, dismissSlot, ariaAtomic, }: NotificationBaseProps): React.ReactElement;

package/dist/components/UserNotification/UserNotification.d.ts

@@ -0,0 +1,15 @@
+import type React from "react";
+import type { IconNameType } from "../Icon";
+export type UserNotificationVariant = "info" | "success" | "warning" | "error" | "neutral";
+export interface UserNotificationProps {
+    variant?: UserNotificationVariant;
+    icon?: IconNameType;
+    /** Required — a user notification is always dismissable. */
+    onDismiss: () => void;
+    dismissLabel?: string;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    "data-testid"?: string;
+}
+export declare function UserNotification({ variant, icon, onDismiss, dismissLabel, action, children, className, "data-testid": testId, }: UserNotificationProps): React.ReactElement;