@irozon/design-system-react 0.1.0

package/README.md

@@ -0,0 +1,119 @@
+# @irozon/design-system-react
+
+Canonical React components for the Irozon Design System — thin,
+accessible wrappers over [`@irozon/design-system`](https://www.npmjs.com/package/@irozon/design-system)'s
+framework-neutral `iz-*` CSS.
+
+```text
+@irozon/design-tokens
+  ↓
+@irozon/design-system         framework-neutral CSS primitives
+  ↓
+@irozon/design-system-react   canonical React components  ← you are here
+  ↓
+Irozon React applications
+```
+
+## Why this exists
+
+`@irozon/design-system` ships CSS, not React — every product that needed
+a `<Button>` was hand-rolling its own thin wrapper around `.iz-button`
+with its own prop names (`variant="danger"`, `size="sm"`, …). This
+package is the single canonical React API, so that stops happening: one
+`<Button variant="destructive" size="small">`, not N slightly-different
+re-implementations of the same markup.
+
+**This package owns presentation and accessibility wiring only.** It has
+no visual styling of its own (zero CSS shipped — every class it renders
+comes from `@irozon/design-system`), no business/domain logic, and no
+app-specific state (a toast's auto-dismiss *timing* is here because every
+known consumer wants the same default; the toast *list* — what's
+currently showing — is the app's own state. See each component's own
+doc comment for where that line is drawn).
+
+## Installation
+
+```bash
+npm install @irozon/design-system-react @irozon/design-system
+```
+
+`react` and `react-dom` (>=18) are peer dependencies — this package
+never bundles its own copy of React.
+
+You still need the CSS import from `@irozon/design-system` once per app
+(see that package's own README) — this package only supplies the
+components that render the classes it defines.
+
+## Usage
+
+```tsx
+import { Button, FormField, Input } from "@irozon/design-system-react";
+
+function SaveButton() {
+  return (
+    <Button variant="primary" onClick={handleSave}>
+      Save
+    </Button>
+  );
+}
+
+function EmailField() {
+  return (
+    <FormField label="Email" hint="We'll never share it">
+      <Input type="email" name="email" />
+    </FormField>
+  );
+}
+```
+
+## Components
+
+| Component | Wraps |
+| --- | --- |
+| `Button` | `.iz-button` |
+| `Loader` | `.iz-loader` |
+| `Input`, `Textarea` | `.iz-input`, `.iz-textarea` |
+| `Select` | `.iz-select-wrap` / `.iz-select` |
+| `FormField` | `.iz-field` |
+| `Dialog`, `DialogHeader`, `DialogBody`, `DialogFooter` | `.iz-dialog` |
+| `ConfirmDialog` | composes `Dialog` + `Button` |
+| `Toast`, `ToastRegion` | `.iz-toast`, `.iz-toast-region` |
+| `ThemeToggle` | `.iz-theme-toggle` |
+| `Nav`, `NavGroup`, `NavItem` | `.iz-nav`, `.iz-nav-group`, `.iz-nav-item` |
+
+Full prop reference: each component's own `.tsx` doc comment, and the
+"React usage" section on the matching page at
+[branding.irozon.se/components](https://branding.irozon.se/components/overview.html) —
+that site remains the canonical visual/behavioral reference; this
+package is the implementation of the same contract.
+
+### Routed navigation
+
+`NavItem` renders a plain `<a>` by default. Pass your router's own Link
+component via `as` to get real client-side navigation while keeping this
+component's markup/classes/accessibility:
+
+```tsx
+import { Link } from "@tanstack/react-router";
+import { NavItem } from "@irozon/design-system-react";
+
+<NavItem as={Link} to="/invoice" active={pathname === "/invoice"}>
+  Invoices
+</NavItem>;
+```
+
+## Canonical API, not per-app aliases
+
+Prop names and values match the CSS package's own vocabulary exactly —
+`variant="destructive"`, not `variant="danger"`; `size="small"`, not
+`size="sm"`. Product apps migrating from a local wrapper should adopt
+these names at the call sites, not keep a permanent translation layer.
+
+## What this package deliberately does not do
+
+- No CSS of its own — if a component looks wrong, the fix belongs in
+  `@irozon/design-system`, not here.
+- No app state: toast list contents, dialog open/closed state, theme
+  persistence, form validation — all owned by the consuming app.
+- No business/domain logic — nothing here knows what an "invoice" or a
+  "proposal" is.

package/dist/Button.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonHTMLAttributes } from "react";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "destructive";
+export type ButtonSize = "small" | "default" | "large";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Square hit area, no visible label — an accessible name is still
+     * required (aria-label), never conveyed by icon shape alone. */
+    iconOnly?: boolean;
+    /** Sets aria-busy and renders the built-in .iz-button__spinner (an
+     * .iz-loader), which button.css shows/hides purely from that attribute
+     * — no extra prop needed to control it. */
+    loading?: boolean;
+    /** Opt in only when the trailing icon is actually directional (e.g. a
+     * "Continue" → arrow). */
+    iconHint?: "end";
+}
+/** Canonical `.iz-button` — see button.css for the full state/variant
+ * contract this renders. */
+export declare function Button({ variant, size, iconOnly, loading, iconHint, className, children, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./internal/cx.js";
+/** Canonical `.iz-button` — see button.css for the full state/variant
+ * contract this renders. */
+export function Button({ variant = "primary", size = "default", iconOnly, loading, iconHint, className, children, ...rest }) {
+    return (_jsxs("button", { className: cx("iz-button", className), "data-variant": variant, "data-size": size === "default" ? undefined : size, "data-icon-only": iconOnly || undefined, "data-icon-hint": iconHint, "aria-busy": loading || undefined, ...rest, children: [loading && (_jsx("span", { className: "iz-button__spinner", "aria-hidden": "true", children: _jsx("span", { className: "iz-loader", "data-size": "small" }) })), children] }));
+}

package/dist/ConfirmDialog.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface ConfirmDialogProps {
+    open: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Renders the confirm action as `data-variant="destructive"` — the
+     * common case (delete/discard); set false for a neutral confirmation. */
+    destructive?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+/** A single-purpose composition of Dialog for the "are you sure?" case —
+ * not a second design-system primitive, the same Dialog v1 markup wired
+ * to confirm/cancel callbacks. */
+export declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/ConfirmDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button.js";
+import { Dialog, DialogBody, DialogFooter, DialogHeader } from "./Dialog.js";
+/** A single-purpose composition of Dialog for the "are you sure?" case —
+ * not a second design-system primitive, the same Dialog v1 markup wired
+ * to confirm/cancel callbacks. */
+export function ConfirmDialog({ open, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = true, onConfirm, onCancel, }) {
+    return (_jsxs(Dialog, { open: open, onClose: onCancel, "aria-labelledby": "iz-confirm-dialog-title", children: [_jsx(DialogHeader, { children: _jsx("h2", { id: "iz-confirm-dialog-title", children: title }) }), description && (_jsx(DialogBody, { children: _jsx("p", { style: { margin: 0 }, children: description }) })), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "tertiary", onClick: onCancel, children: cancelLabel }), _jsx(Button, { type: "button", variant: destructive ? "destructive" : "primary", onClick: onConfirm, children: confirmLabel })] })] }));
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> {
+    open: boolean;
+    /** Called for both an explicit close and native dismissal (Escape, or
+     * the backdrop where the browser supports it) — one source of truth
+     * for "this should now be closed," matching the native `cancel` event
+     * semantics rather than re-deriving it per consumer. */
+    onClose: () => void;
+    variant?: "sheet";
+    children: ReactNode;
+}
+/** Canonical `.iz-dialog` — built on the native `<dialog>` element, so
+ * focus trapping, Escape-to-dismiss, and the `::backdrop` come from the
+ * browser for free. Compose with DialogHeader/DialogBody/DialogFooter. */
+export declare function Dialog({ open, onClose, variant, className, children, ...rest }: DialogProps): import("react").JSX.Element;
+export declare function DialogHeader({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function DialogBody({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function DialogFooter({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/Dialog.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "./internal/cx.js";
+/** Canonical `.iz-dialog` — built on the native `<dialog>` element, so
+ * focus trapping, Escape-to-dismiss, and the `::backdrop` come from the
+ * browser for free. Compose with DialogHeader/DialogBody/DialogFooter. */
+export function Dialog({ open, onClose, variant, className, children, ...rest }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open)
+            dialog.showModal();
+        else if (!open && dialog.open)
+            dialog.close();
+    }, [open]);
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        const handleCancel = (event) => {
+            event.preventDefault();
+            onClose();
+        };
+        dialog.addEventListener("cancel", handleCancel);
+        return () => dialog.removeEventListener("cancel", handleCancel);
+    }, [onClose]);
+    return (_jsx("dialog", { ref: ref, className: cx("iz-dialog", className), "data-variant": variant, ...rest, children: children }));
+}
+export function DialogHeader({ children }) {
+    return _jsx("header", { className: "iz-dialog__header", children: children });
+}
+export function DialogBody({ children }) {
+    return _jsx("div", { className: "iz-dialog__body", children: children });
+}
+export function DialogFooter({ children }) {
+    return _jsx("footer", { className: "iz-dialog__footer", children: children });
+}

package/dist/FormField.d.ts

@@ -0,0 +1,25 @@
+import type { ReactElement, ReactNode } from "react";
+export interface FormFieldProps {
+    label: ReactNode;
+    /** Marks the field as not required (e.g. "Phone (optional)") — no
+     * asterisk is auto-generated for required fields; see field.css. */
+    optional?: boolean;
+    hint?: ReactNode;
+    /** Presence alone marks the control aria-invalid and switches the
+     * helper text to the error style; hint is hidden while an error shows. */
+    error?: ReactNode;
+    /** The control — an `<input>`/`<textarea>`/`<select>` or an Input/
+     * Textarea/Select from this package. Its `id` is used if already set,
+     * otherwise one is generated and injected so label/control stay
+     * associated without every call site managing its own id. */
+    children: ReactElement<{
+        id?: string;
+        "aria-invalid"?: boolean;
+    }>;
+    className?: string;
+}
+/** Canonical `.iz-field` — label + control + hint/error composition. Owns
+ * layout and the accessibility relationships only; it has no validation
+ * logic of its own — `error` is whatever the caller's own validation
+ * already decided. */
+export declare function FormField({ label, optional, hint, error, children, className }: FormFieldProps): import("react").JSX.Element;

package/dist/FormField.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId } from "react";
+import { cx } from "./internal/cx.js";
+/** Canonical `.iz-field` — label + control + hint/error composition. Owns
+ * layout and the accessibility relationships only; it has no validation
+ * logic of its own — `error` is whatever the caller's own validation
+ * already decided. */
+export function FormField({ label, optional, hint, error, children, className }) {
+    const generatedId = useId();
+    const controlId = children.props.id ?? generatedId;
+    const control = isValidElement(children)
+        ? cloneElement(children, {
+            id: controlId,
+            "aria-invalid": error ? true : children.props["aria-invalid"],
+        })
+        : children;
+    return (_jsxs("div", { className: cx("iz-field", className), children: [_jsxs("label", { className: "iz-field__label", htmlFor: controlId, children: [label, optional && _jsx("span", { className: "iz-field__optional", children: " (optional)" })] }), control, error ? (_jsx("p", { className: "iz-field__error", role: "alert", children: error })) : (hint && _jsx("p", { className: "iz-field__hint", children: hint }))] }));
+}

package/dist/Input.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+/** Canonical `.iz-input` — a native `<input>`. State (disabled, readonly,
+ * aria-invalid) is read from native/ARIA attributes, never a class. */
+export declare function Input({ className, ...rest }: InputProps): import("react").JSX.Element;
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** Canonical `.iz-textarea` — same surface as Input, naturally variable
+ * height (resizes vertically only). */
+export declare function Textarea({ className, ...rest }: TextareaProps): import("react").JSX.Element;

package/dist/Input.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./internal/cx.js";
+/** Canonical `.iz-input` — a native `<input>`. State (disabled, readonly,
+ * aria-invalid) is read from native/ARIA attributes, never a class. */
+export function Input({ className, ...rest }) {
+    return _jsx("input", { className: cx("iz-input", className), ...rest });
+}
+/** Canonical `.iz-textarea` — same surface as Input, naturally variable
+ * height (resizes vertically only). */
+export function Textarea({ className, ...rest }) {
+    return _jsx("textarea", { className: cx("iz-textarea", className), ...rest });
+}

package/dist/Loader.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "react";
+export interface LoaderProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: "small" | "default" | "large";
+    /** Accessible name — defaults to "Loading". Pass `aria-hidden` instead
+     * via className/props when the loader sits beside its own visible text
+     * (e.g. "Loading invoices…") so the state isn't announced twice. */
+    label?: string;
+}
+/** Canonical `.iz-loader` — the Irozon Orbit. Monochrome (currentColor),
+ * so surrounding text/button color decides its color. */
+export declare function Loader({ size, label, className, ...rest }: LoaderProps): import("react").JSX.Element;

package/dist/Loader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./internal/cx.js";
+/** Canonical `.iz-loader` — the Irozon Orbit. Monochrome (currentColor),
+ * so surrounding text/button color decides its color. */
+export function Loader({ size = "default", label = "Loading", className, ...rest }) {
+    return (_jsx("span", { className: cx("iz-loader", className), "data-size": size === "default" ? undefined : size, role: "status", "aria-label": rest["aria-hidden"] ? undefined : label, ...rest }));
+}

package/dist/Nav.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from "react";
+export interface NavProps extends HTMLAttributes<HTMLElement> {
+    /** true = every NavItem inside becomes an icon-only square slot. */
+    collapsed?: boolean;
+    children: ReactNode;
+}
+/** Canonical `.iz-nav` — a vertical nav rail container. */
+export declare function Nav({ collapsed, className, children, ...rest }: NavProps): import("react").JSX.Element;
+export interface NavGroupProps {
+    label?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/** Canonical `.iz-nav-group` — an optional labeled section of nav items. */
+export declare function NavGroup({ label, children, className }: NavGroupProps): import("react").JSX.Element;
+export interface NavItemOwnProps {
+    /** The element/component actually rendered — defaults to a plain
+     * `<a>`. Pass a router's own Link component here (e.g. TanStack
+     * Router's `Link`, React Router's `Link`) to get real client-side
+     * navigation while keeping this component's markup/classes/a11y. */
+    as?: ElementType;
+    icon?: ReactNode;
+    /** Adds the trailing ↗ mark and expects the caller to also set
+     * `target="_blank" rel="noopener noreferrer"` — this component doesn't
+     * add those for you, since a router Link's props for them may differ. */
+    external?: boolean;
+    active?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+export type NavItemProps<T extends ElementType = "a"> = NavItemOwnProps & Omit<ComponentPropsWithoutRef<T>, keyof NavItemOwnProps>;
+/** Canonical `.iz-nav-item` — a real destination link, not a button.
+ * `active` sets native `aria-current="page"`, the sole "current route"
+ * signal (a side accent bar in CSS, never a class). The icon slot takes
+ * a Lucide-style SVG, a plain glyph, or an `<img>` brand logo — a logo
+ * gets its own fixed-light backdrop automatically from the CSS, and the
+ * slot itself is always a fixed square regardless of content. */
+export declare function NavItem<T extends ElementType = "a">({ as, icon, external, active, children, className, ...rest }: NavItemProps<T>): import("react").JSX.Element;

package/dist/Nav.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./internal/cx.js";
+/** Canonical `.iz-nav` — a vertical nav rail container. */
+export function Nav({ collapsed, className, children, ...rest }) {
+    return (_jsx("nav", { className: cx("iz-nav", className), "data-collapsed": collapsed, ...rest, children: children }));
+}
+/** Canonical `.iz-nav-group` — an optional labeled section of nav items. */
+export function NavGroup({ label, children, className }) {
+    return (_jsxs("div", { className: cx("iz-nav-group", className), children: [label && _jsx("p", { className: "iz-nav-group__label", children: label }), children] }));
+}
+/** Canonical `.iz-nav-item` — a real destination link, not a button.
+ * `active` sets native `aria-current="page"`, the sole "current route"
+ * signal (a side accent bar in CSS, never a class). The icon slot takes
+ * a Lucide-style SVG, a plain glyph, or an `<img>` brand logo — a logo
+ * gets its own fixed-light backdrop automatically from the CSS, and the
+ * slot itself is always a fixed square regardless of content. */
+export function NavItem({ as, icon, external, active, children, className, ...rest }) {
+    const Component = as ?? "a";
+    return (_jsxs(Component, { className: cx("iz-nav-item", className), "aria-current": active ? "page" : undefined, ...rest, children: [icon && (_jsx("span", { className: "iz-nav-item__icon", "aria-hidden": "true", children: icon })), _jsxs("span", { className: "iz-nav-item__label", children: [children, external && (_jsx("span", { className: "iz-nav-item__external", "aria-hidden": "true", children: "\u2197" }))] })] }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,8 @@
+import type { SelectHTMLAttributes } from "react";
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+/** Canonical `.iz-select-wrap` / `.iz-select` — a native `<select>` with
+ * only the closed-state chrome normalized; the decorative chevron is a
+ * real SVG layered on top with pointer-events:none, so the native control
+ * still owns the whole box (full keyboard/mobile-picker/forms behavior
+ * unchanged). */
+export declare function Select({ className, children, ...rest }: SelectProps): import("react").JSX.Element;

package/dist/Select.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./internal/cx.js";
+/** Canonical `.iz-select-wrap` / `.iz-select` — a native `<select>` with
+ * only the closed-state chrome normalized; the decorative chevron is a
+ * real SVG layered on top with pointer-events:none, so the native control
+ * still owns the whole box (full keyboard/mobile-picker/forms behavior
+ * unchanged). */
+export function Select({ className, children, ...rest }) {
+    return (_jsxs("div", { className: "iz-select-wrap", children: [_jsx("select", { className: cx("iz-select", className), ...rest, children: children }), _jsx("svg", { className: "iz-select-chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M6 9l6 6 6-6" }) })] }));
+}

package/dist/ThemeToggle.d.ts

@@ -0,0 +1,12 @@
+export interface ThemeToggleProps {
+    isDark: boolean;
+    onToggle: () => void;
+    /** Base label before the target-state suffix — e.g. "Switch to". */
+    label?: string;
+}
+/** Canonical `.iz-theme-toggle`. Presentation only — no localStorage, no
+ * `prefers-color-scheme` sync, no cross-tab event bus: those are
+ * per-application decisions (does this app persist per-user, per-device,
+ * follow the OS by default?) that don't belong in a design-system
+ * component. The caller owns `isDark` and what happens on toggle. */
+export declare function ThemeToggle({ isDark, onToggle, label }: ThemeToggleProps): import("react").JSX.Element;

package/dist/ThemeToggle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Canonical `.iz-theme-toggle`. Presentation only — no localStorage, no
+ * `prefers-color-scheme` sync, no cross-tab event bus: those are
+ * per-application decisions (does this app persist per-user, per-device,
+ * follow the OS by default?) that don't belong in a design-system
+ * component. The caller owns `isDark` and what happens on toggle. */
+export function ThemeToggle({ isDark, onToggle, label = "Switch to" }) {
+    const target = isDark ? "light" : "dark";
+    return (_jsx("button", { type: "button", className: "iz-theme-toggle", "aria-pressed": isDark, "aria-label": `${label} ${target} theme`, title: `${label} ${target} theme`, onClick: onToggle, children: _jsx("span", { className: "iz-theme-toggle__track", "aria-hidden": "true", children: _jsx("span", { className: "iz-theme-toggle__indicator" }) }) }));
+}

package/dist/Toast.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+/** Matches Badge/Status's exact semantic set — "neutral" (the implicit
+ * default, no data-variant) rather than an app-specific alias like
+ * "info". */
+export type ToastVariant = "neutral" | "success" | "warning" | "error";
+export interface ToastItem {
+    id: number | string;
+    message: ReactNode;
+    variant?: ToastVariant;
+    /** Defaults to a variant-appropriate glyph; pass `null` for no icon. */
+    icon?: ReactNode | null;
+}
+export interface ToastProps {
+    item: ToastItem;
+    onClose: () => void;
+    /** Auto-dismiss delay in ms before the exit transition starts. */
+    duration?: number;
+}
+/** Canonical `.iz-toast` — a single toast. Presentation and motion only:
+ * auto-dismiss timing is driven here only because every known consumer
+ * wants it, but the toast list itself (what's currently showing, in what
+ * order) is the consuming app's state — see ToastRegion below. */
+export declare function Toast({ item, onClose, duration }: ToastProps): import("react").JSX.Element;
+export interface ToastRegionProps {
+    toasts: ToastItem[];
+    onDismiss: (id: ToastItem["id"]) => void;
+    duration?: number;
+}
+/** Canonical `.iz-toast-region` — one per page/app shell. `aria-live` +
+ * `aria-atomic` announce each toast's text as it's inserted. */
+export declare function ToastRegion({ toasts, onDismiss, duration }: ToastRegionProps): import("react").JSX.Element;

package/dist/Toast.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+const DEFAULT_ICON = {
+    neutral: "ℹ",
+    success: "✓",
+    warning: "!",
+    error: "✕",
+};
+/** Canonical `.iz-toast` — a single toast. Presentation and motion only:
+ * auto-dismiss timing is driven here only because every known consumer
+ * wants it, but the toast list itself (what's currently showing, in what
+ * order) is the consuming app's state — see ToastRegion below. */
+export function Toast({ item, onClose, duration = 2800 }) {
+    const [visible, setVisible] = useState(false);
+    const variant = item.variant ?? "neutral";
+    useEffect(() => {
+        const raf = requestAnimationFrame(() => setVisible(true));
+        const timer = setTimeout(() => {
+            setVisible(false);
+            setTimeout(onClose, 300);
+        }, duration);
+        return () => {
+            cancelAnimationFrame(raf);
+            clearTimeout(timer);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onClose, duration]);
+    return (_jsxs("div", { className: "iz-toast", "data-variant": variant === "neutral" ? undefined : variant, "data-visible": visible || undefined, role: "status", children: [item.icon !== null && (_jsx("span", { className: "iz-toast__icon", "aria-hidden": "true", children: item.icon ?? DEFAULT_ICON[variant] })), _jsx("span", { className: "iz-toast__message", children: item.message })] }));
+}
+/** Canonical `.iz-toast-region` — one per page/app shell. `aria-live` +
+ * `aria-atomic` announce each toast's text as it's inserted. */
+export function ToastRegion({ toasts, onDismiss, duration }) {
+    return (_jsx("div", { className: "iz-toast-region", "aria-live": "polite", "aria-atomic": "true", children: toasts.map((item) => (_jsx(Toast, { item: item, duration: duration, onClose: () => onDismiss(item.id) }, item.id))) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+export { Button } from "./Button.js";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.js";
+export { Loader } from "./Loader.js";
+export type { LoaderProps } from "./Loader.js";
+export { Input, Textarea } from "./Input.js";
+export type { InputProps, TextareaProps } from "./Input.js";
+export { Select } from "./Select.js";
+export type { SelectProps } from "./Select.js";
+export { FormField } from "./FormField.js";
+export type { FormFieldProps } from "./FormField.js";
+export { Dialog, DialogHeader, DialogBody, DialogFooter } from "./Dialog.js";
+export type { DialogProps } from "./Dialog.js";
+export { ConfirmDialog } from "./ConfirmDialog.js";
+export type { ConfirmDialogProps } from "./ConfirmDialog.js";
+export { Toast, ToastRegion } from "./Toast.js";
+export type { ToastProps, ToastRegionProps, ToastItem, ToastVariant } from "./Toast.js";
+export { ThemeToggle } from "./ThemeToggle.js";
+export type { ThemeToggleProps } from "./ThemeToggle.js";
+export { Nav, NavGroup, NavItem } from "./Nav.js";
+export type { NavProps, NavGroupProps, NavItemProps } from "./Nav.js";

package/dist/index.js

@@ -0,0 +1,10 @@
+export { Button } from "./Button.js";
+export { Loader } from "./Loader.js";
+export { Input, Textarea } from "./Input.js";
+export { Select } from "./Select.js";
+export { FormField } from "./FormField.js";
+export { Dialog, DialogHeader, DialogBody, DialogFooter } from "./Dialog.js";
+export { ConfirmDialog } from "./ConfirmDialog.js";
+export { Toast, ToastRegion } from "./Toast.js";
+export { ThemeToggle } from "./ThemeToggle.js";
+export { Nav, NavGroup, NavItem } from "./Nav.js";

package/dist/internal/cx.d.ts

@@ -0,0 +1,3 @@
+/** Joins class names, dropping falsy values — no external dependency for
+ * something this small. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/internal/cx.js

@@ -0,0 +1,5 @@
+/** Joins class names, dropping falsy values — no external dependency for
+ * something this small. */
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@irozon/design-system-react",
+  "version": "0.1.0",
+  "description": "Canonical React components for the Irozon Design System — thin, accessible wrappers over @irozon/design-system's framework-neutral iz-* CSS. No independent visual styling of its own; the CSS package stays the single source of truth for how these look.",
+  "license": "MIT",
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "irozon"
+  ],
+  "homepage": "https://github.com/irozon/irozon-branding/tree/main/packages/design-system-react#readme",
+  "bugs": {
+    "url": "https://github.com/irozon/irozon-branding/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/irozon/irozon-branding.git",
+    "directory": "packages/design-system-react"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "npm run build && node --experimental-strip-types --test test/smoke.test.ts"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@irozon/design-system": "^0.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}