pixelize-design-library 2.4.2-beta.58 → 2.4.2-beta.60

package/dist/Components/Tabs/useTabAppearance.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabAppearance = void 0;
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const color_1 = require("../../Theme/tokens/builders/color");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const iconBox_1 = require("../Common/iconBox");
+const tabStyles_1 = require("./tabStyles");
+const TabsContext_1 = require("./TabsContext");
+const useTabAppearance = (isSelected, isDisabled) => {
+    var _a, _b, _c;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    const canvas = colors.backgroundColor.main;
+    const scale = (0, tabStyles_1.scaleForColorScheme)(colors, ctx.colorScheme);
+    const style = (0, tabStyles_1.resolveTabStyle)(colors, scale, canvas, ctx.variant, isSelected);
+    const spec = controlSizes_1.BUTTON_SIZES[ctx.size];
+    // The list scrolls on both axes, so an outer ring is clipped into arcs; a negative offset draws it
+    // inside the tab, clear of its own border rather than thickening it.
+    const focusRing = {
+        outline: `1px solid ${(0, outlineRung_1.liftToContrast)(colors.primary[500], 
+        // subtle/ghost fills are translucent tints; contrast has no meaning until they are flattened.
+        style.bg === "transparent" ? canvas : (0, color_1.compositeOver)(style.bg, canvas), outlineRung_1.AA_NON_TEXT)}`,
+        outlineOffset: "-2px",
+    };
+    const borderProps = ctx.variant === "outline"
+        ? { border: "1px solid", borderColor: (_a = style.border) !== null && _a !== void 0 ? _a : "transparent" }
+        : isLine
+            ? isVertical
+                ? { borderLeft: "0.125rem solid", borderLeftColor: (_b = style.indicator) !== null && _b !== void 0 ? _b : "transparent" }
+                : { borderBottom: "0.125rem solid", borderBottomColor: (_c = style.indicator) !== null && _c !== void 0 ? _c : "transparent" }
+            : {};
+    const boxProps = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.375rem",
+        flexShrink: 0,
+        flex: ctx.isFitted ? 1 : undefined,
+        w: isVertical ? "100%" : undefined,
+        h: isVertical ? "auto" : spec.height,
+        minH: spec.height,
+        py: isVertical ? "0.5rem" : undefined,
+        px: spec.paddingX,
+        fontSize: spec.fontSize,
+        fontWeight: isSelected ? 600 : 500,
+        whiteSpace: "nowrap",
+        textDecoration: "none",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.5 : 1,
+        borderRadius: isLine ? "none" : "lg",
+        bg: style.bg,
+        color: style.color,
+        ...borderProps,
+        transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color"]),
+        sx: { _focusVisible: focusRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: focusRing, ...(0, motion_2.reducedMotionSx)() },
+        _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor, textDecoration: "none" } : undefined,
+    };
+    return { ctx, colors, canvas, scale, style, iconSize: spec.iconSize, iconSx: (0, iconBox_1.iconBoxSx)(spec.iconSize), boxProps };
+};
+exports.useTabAppearance = useTabAppearance;

package/dist/Components/Tag/Tag.js

@@ -7,6 +7,7 @@ const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tagDot_1 = require("./tagDot");
 // NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
 const LabelText = ({ children, title }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
 const ICON_SIZE = {
@@ -15,10 +16,19 @@ const ICON_SIZE = {
     md: "1em",
     lg: "1.1em",
 };
+const DOT_FONT_SIZE = {
+    xs: "0.75rem",
+    sm: "0.8125rem",
+    md: "0.875rem",
+    lg: "0.9375rem",
+};
 /** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
+const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onTagClick;
+    if (display === "dot") {
+        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? 0.5 : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? (0, focusRing_styles_1.focusVisibleStyles)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: (0, tagDot_1.dotColor)(colors, tone, colorScheme) }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+    }
     return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: tone ? tone_1.toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && (0, jsx_runtime_1.jsx)(react_1.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
                 (onIconClick ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
                         e.stopPropagation();

package/dist/Components/Tag/TagProps.d.ts

@@ -7,6 +7,8 @@ export type TagColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "re
 export type TagSize = "xs" | "sm" | "md" | "lg";
 /** "solid" for emphasis, "outline" on dense/colored surfaces, "subtle" (default) for everyday chips. */
 export type TagVariant = "solid" | "outline" | "subtle";
+/** "chip" is the filled/outlined pill; "dot" is a tone dot beside plain text. */
+export type TagDisplay = "chip" | "dot";
 /** Props for the pill-shaped status/filter Tag chip — see Tag.tsx for interactive/icon behavior. */
 export interface TagProps {
     label: string;
@@ -26,6 +28,8 @@ export interface TagProps {
     maxW?: BoxProps["maxW"];
     size?: TagSize;
     variant?: TagVariant;
+    /** "dot" renders an 8px tone dot plus plain label for quiet rows; variant and icons are ignored. Default "chip". */
+    display?: TagDisplay;
     /** Dims the tag and disables its button(s) (native disabled); no effect on a purely static tag. */
     isDisabled?: boolean;
     /** Test hook on the root; the remove button gets `${"$"}{testId}-remove`. */

package/dist/Components/Tag/tagDot.d.ts

@@ -0,0 +1,3 @@
+import type { Tone } from "../../Theme/tokens/builders/tone";
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const dotColor: (colors: PaletteProps, tone: Tone | undefined, colorScheme: string) => string;

package/dist/Components/Tag/tagDot.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dotColor = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const dotColor = (colors, tone, colorScheme) => {
+    const surfaces = [colors.background[50], colors.backgroundColor.main];
+    if (tone === "neutral")
+        return colors.textMuted;
+    const scale = tone
+        ? colors.semantic[tone_1.toneToSemantic[tone]]
+        : SCALE_KEYS.includes(colorScheme)
+            ? colors[colorScheme]
+            : colors.gray;
+    return surfaces.reduce((ink, surface) => (0, outlineRung_1.liftToContrast)(ink, surface), scale[500]);
+};
+exports.dotColor = dotColor;

package/dist/Components/WizardDialog/WizardDialog.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { WizardDialogProps, WizardProps } from "./WizardDialogProps";
+export { wizardTransition, firstInvalidStep, INITIAL_WIZARD_STATE } from "./wizardSteps";
+export type { WizardAction, WizardState, StepValidator } from "./wizardSteps";
+/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
+export declare const WizardDialog: React.FC<WizardDialogProps>;
+/** The same wizard inline, for a full-page flow rather than a modal. */
+export declare const Wizard: React.FC<WizardProps>;
+export default WizardDialog;

package/dist/Components/WizardDialog/WizardDialog.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = exports.WizardDialog = exports.INITIAL_WIZARD_STATE = exports.firstInvalidStep = exports.wizardTransition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const StageProgress_1 = __importDefault(require("../StageProgress/StageProgress"));
+const DescriptionList_1 = __importDefault(require("../DescriptionList/DescriptionList"));
+const useWizardFlow_1 = require("./useWizardFlow");
+var wizardSteps_1 = require("./wizardSteps");
+Object.defineProperty(exports, "wizardTransition", { enumerable: true, get: function () { return wizardSteps_1.wizardTransition; } });
+Object.defineProperty(exports, "firstInvalidStep", { enumerable: true, get: function () { return wizardSteps_1.firstInvalidStep; } });
+Object.defineProperty(exports, "INITIAL_WIZARD_STATE", { enumerable: true, get: function () { return wizardSteps_1.INITIAL_WIZARD_STATE; } });
+const DEFAULT_LABELS = {
+    back: "Back",
+    next: "Continue",
+    finish: "Finish",
+    cancel: "Cancel",
+    stepOf: (current, total) => `Step ${current} of ${total}`,
+    fixErrors: "Fix the following to continue",
+    review: "Review",
+};
+const WizardBody = ({ flow, steps, labels, testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const headingRef = (0, react_1.useRef)(null);
+    const previousStep = (0, react_1.useRef)(flow.step.id);
+    const reviewed = steps.filter((candidate) => candidate.summary !== undefined);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (previousStep.current === flow.step.id)
+            return;
+        previousStep.current = flow.step.id;
+        (_a = headingRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [flow.step.id]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, "data-step": flow.step.id, children: [(0, jsx_runtime_1.jsx)(StageProgress_1.default, { variant: "stepper", size: "sm", showCheck: true, stages: steps.map((candidate, index) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    isDisabled: index > flow.furthest,
+                })), value: flow.step.id, onChange: (_id, _stage, index) => flow.goto(index) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: labels.stepOf(flow.index + 1, steps.length) }), (0, jsx_runtime_1.jsx)(react_2.Heading, { ref: headingRef, tabIndex: -1, as: "h3", fontSize: "md", fontWeight: 600, color: colors.header[900], _focus: { outline: "none" }, children: flow.step.label })] }), flow.errors.length ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", role: "alert", "data-testid": "wizard-errors", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertTitle, { fontSize: "sm", children: labels.fixErrors }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { fontSize: "sm", children: (0, jsx_runtime_1.jsx)(react_2.UnorderedList, { mt: 1, children: flow.errors.map((message) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, { children: message }, message))) }) })] })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { children: flow.step.content }), flow.isLast && reviewed.length ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "wizard-review", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h4", fontSize: "sm", fontWeight: 600, mb: 2, color: colors.header[900], children: labels.review }), (0, jsx_runtime_1.jsx)(DescriptionList_1.default, { layout: "inline", columns: { base: 1 }, items: reviewed.map((candidate) => ({
+                            label: candidate.label,
+                            value: candidate.summary,
+                        })) })] })) : null] }));
+};
+const WizardFooter = ({ flow, labels, isFinishing, onCancel }) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, loadingText: labels.finish, "data-testid": "wizard-finish" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
+const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    const guardedClose = () => {
+        if (!isFinishing)
+            onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: guardedClose }) })] }));
+};
+exports.WizardDialog = WizardDialog;
+/** The same wizard inline, for a full-page flow rather than a modal. */
+const Wizard = ({ steps, onFinish, isFinishing = false, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: onCancel })] }));
+};
+exports.Wizard = Wizard;
+exports.default = exports.WizardDialog;

package/dist/Components/WizardDialog/WizardDialogProps.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+/** One step of a wizard: its stepper label, body, validation and review summary. */
+export type WizardStep = {
+    id: string;
+    /** Stepper label and the heading shown above the step content. */
+    label: string;
+    content: ReactNode;
+    /** Messages that block leaving this step; [] = valid. Must be pure (runs in the reducer). */
+    validate?: () => string[];
+    /** One line shown in the review on the last step; steps without it are not reviewed. */
+    summary?: ReactNode;
+};
+/** Visible strings; every key falls back to its English default. */
+export type WizardLabels = Partial<{
+    back: string;
+    next: string;
+    finish: string;
+    cancel: string;
+    stepOf: (current: number, total: number) => string;
+    fixErrors: string;
+    review: string;
+}>;
+/** Props for the modal wizard: Modal + stepper + per-step validation + review on the last step. */
+export interface WizardDialogProps {
+    isOpen: boolean;
+    /** Ignored while `isFinishing`. */
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    steps: WizardStep[];
+    /** Called after every step re-validates; a failing step is jumped to with its errors. */
+    onFinish: () => void;
+    /** Shows the Finish spinner and disables close, Esc, Back and Cancel. */
+    isFinishing?: boolean;
+    /** Controlled step; omit for uncontrolled (resets to the first step on close). */
+    stepId?: string;
+    /** Fires whenever the visible step changes, controlled or not. */
+    onStepChange?: (stepId: string) => void;
+    /** Modal width; default "3xl". */
+    size?: "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    labels?: WizardLabels;
+    "data-testid"?: string;
+}
+/** Same flow inline (a page section, not a modal) — for full-page wizards. */
+export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size"> {
+    /** Renders a Cancel button in the footer when provided. */
+    onCancel?: () => void;
+}

package/dist/Components/WizardDialog/WizardDialogProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/WizardDialog/useWizardFlow.d.ts

@@ -0,0 +1,22 @@
+import type { WizardStep } from "./WizardDialogProps";
+type FlowOptions = {
+    steps: WizardStep[];
+    stepId?: string;
+    onStepChange?: (stepId: string) => void;
+    onFinish: () => void;
+    resetWhen?: boolean;
+};
+export declare function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }: FlowOptions): {
+    index: number;
+    furthest: number;
+    errors: string[];
+    step: WizardStep;
+    isFirst: boolean;
+    isLast: boolean;
+    next: () => void;
+    back: () => void;
+    goto: (target: number) => void;
+    finish: () => void;
+};
+export type WizardFlow = ReturnType<typeof useWizardFlow>;
+export {};

package/dist/Components/WizardDialog/useWizardFlow.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWizardFlow = useWizardFlow;
+const react_1 = require("react");
+const wizardSteps_1 = require("./wizardSteps");
+function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }) {
+    const [state, setState] = (0, react_1.useState)(wizardSteps_1.INITIAL_WIZARD_STATE);
+    const validators = steps.map((step) => step.validate);
+    const controlledIndex = stepId === undefined ? -1 : steps.findIndex((s) => s.id === stepId);
+    const isControlled = stepId !== undefined;
+    const index = Math.min(isControlled ? Math.max(controlledIndex, 0) : state.index, Math.max(steps.length - 1, 0));
+    const furthest = Math.max(state.furthest, index);
+    (0, react_1.useEffect)(() => {
+        if (resetWhen)
+            setState(wizardSteps_1.INITIAL_WIZARD_STATE);
+    }, [resetWhen]);
+    const dispatch = (0, react_1.useCallback)((action) => {
+        const base = { ...state, index, furthest };
+        const next = (0, wizardSteps_1.wizardTransition)(base, action, validators);
+        setState(next);
+        if (next.index !== index)
+            onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(steps[next.index].id);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, index, furthest, steps, onStepChange]);
+    const finish = (0, react_1.useCallback)(() => {
+        const invalid = (0, wizardSteps_1.firstInvalidStep)(validators);
+        if (invalid) {
+            dispatch({ type: "fail", ...invalid });
+            return;
+        }
+        onFinish();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch, steps, onFinish]);
+    return {
+        index,
+        furthest,
+        errors: state.errors,
+        step: steps[index],
+        isFirst: index === 0,
+        isLast: index === steps.length - 1,
+        next: () => dispatch({ type: "next" }),
+        back: () => dispatch({ type: "back" }),
+        goto: (target) => dispatch({ type: "goto", index: target }),
+        finish,
+    };
+}

package/dist/Components/WizardDialog/wizardSteps.d.ts

@@ -0,0 +1,31 @@
+export type StepValidator = () => string[];
+/** Reducer state: current step, the furthest validly reached step, and the blocking messages. */
+export type WizardState = {
+    index: number;
+    /** Furthest step the user has validly reached; stages beyond it stay locked. */
+    furthest: number;
+    errors: string[];
+};
+/** Actions `wizardTransition` understands. */
+export type WizardAction = {
+    type: "next";
+} | {
+    type: "back";
+} | {
+    type: "goto";
+    index: number;
+} | {
+    type: "fail";
+    index: number;
+    errors: string[];
+} | {
+    type: "reset";
+};
+export declare const INITIAL_WIZARD_STATE: WizardState;
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+export declare function wizardTransition(state: WizardState, action: WizardAction, validators: (StepValidator | undefined)[]): WizardState;
+/** First step whose validator reports errors, or null when every step is valid. */
+export declare function firstInvalidStep(validators: (StepValidator | undefined)[]): {
+    index: number;
+    errors: string[];
+} | null;

package/dist/Components/WizardDialog/wizardSteps.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INITIAL_WIZARD_STATE = void 0;
+exports.wizardTransition = wizardTransition;
+exports.firstInvalidStep = firstInvalidStep;
+exports.INITIAL_WIZARD_STATE = { index: 0, furthest: 0, errors: [] };
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+function wizardTransition(state, action, validators) {
+    var _a, _b;
+    const last = validators.length - 1;
+    switch (action.type) {
+        case "next": {
+            const errors = (_b = (_a = validators[state.index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+            if (errors.length)
+                return { ...state, errors };
+            const index = Math.min(state.index + 1, last);
+            return { index, furthest: Math.max(state.furthest, index), errors: [] };
+        }
+        case "back":
+            return { ...state, index: Math.max(state.index - 1, 0), errors: [] };
+        case "goto":
+            if (action.index < 0 || action.index > state.furthest)
+                return state;
+            return { ...state, index: action.index, errors: [] };
+        case "fail":
+            return { ...state, index: action.index, errors: action.errors };
+        case "reset":
+            return exports.INITIAL_WIZARD_STATE;
+    }
+}
+/** First step whose validator reports errors, or null when every step is valid. */
+function firstInvalidStep(validators) {
+    var _a, _b;
+    for (let index = 0; index < validators.length; index += 1) {
+        const errors = (_b = (_a = validators[index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+        if (errors.length)
+            return { index, errors };
+    }
+    return null;
+}

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -8,6 +8,7 @@ import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { liftToContrast, neutralStep, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import Kbd from "../Kbd/Kbd.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
@@ -190,7 +191,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "full", px: 1.5, py: 0.5, children: hint }))] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);

package/dist/esm/Components/AppSwitcher/AppSwitcherProps.js

@@ -42,12 +42,14 @@ export const matchesShortcut = (event, shortcut, isApple = typeof navigator !==
 };
 const APPLE_SYMBOLS = { mod: "⌘", cmd: "⌘", meta: "⌘", ctrl: "⌃", shift: "⇧", alt: "⌥" };
 const OTHER_LABELS = { mod: "Ctrl", cmd: "Win", meta: "Win", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
-export const formatShortcut = (shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+const isAppleNow = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+export const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
     const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
     const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
-    const rendered = parts.map((p, i) => { var _a; return i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase()); });
-    return isApple ? rendered.join("") : rendered.join("+");
+    return parts.map((p, i) => { var _a; return (i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase())); });
 };
+export const formatShortcut = (shortcut, isApple = isAppleNow()) => shortcutKeys(shortcut, isApple).join(isApple ? "" : "+");
 /**
  * Derives every app's origin from the host the consumer is already served on, so one deployment
  * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.