@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Info/MobileDrawer/MobileDrawer.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDisclosure } from '../../../hooks/useDisclosure';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { MobileDrawer } from './MobileDrawer';
+const meta = {
+    component: MobileDrawer,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Bottom-anchored mobile sheet with a grab-handle, rounded top corners, and pinned header/footer. Use on touch viewports; pair with the right-anchored `Drawer` on desktop or use `ResponsiveDrawer` to branch automatically.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Info/MobileDrawer',
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open mobile drawer" }), _jsx(MobileDrawer, { onClose: close, opened: opened, title: 'Slide details', children: _jsxs(Stack, { children: [_jsx(Text, { children: "Grab handle at the top. Body scrolls when needed." }), _jsx(Text, { variant: 'subtle', children: "Anchored to the bottom at up to 75% viewport height." })] }) })] }));
+    },
+};
+export const WithFooter = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open with pinned footer" }), _jsx(MobileDrawer, { footer: _jsxs(Group, { grow: true, children: [_jsx(Button, { onClick: close, variant: 'cancel', children: "Cancel" }), _jsx(Button, { onClick: close, children: "Confirm" })] }), onClose: close, opened: opened, title: 'Discard changes?', children: _jsx(Text, { children: "Pinned footer keeps primary actions visible while body scrolls." }) })] }));
+    },
+};
+export const ShorterSheet = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open 60% sheet" }), _jsx(MobileDrawer, { maxHeightVh: 60, onClose: close, opened: opened, title: 'Filter', children: _jsx(Text, { children: "Custom viewport cap via `maxHeightVh`." }) })] }));
+    },
+};

package/dist/components/Info/Modals/FormModal/FormModal.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
+import type { CSSObject } from "@mantine/core";
 import { modalVariants } from "../variants";
+import { ButtonProps } from "../../../Inputs/Buttons/Button/Button";
+/** Style overrides merged into Mantine `Modal` `styles` (object form only). */
+export type FormModalStylesOverride = Partial<Record<"body" | "close" | "content" | "header" | "inner" | "overlay" | "root" | "title", CSSObject>>;
 export interface FormModalProps {
     opened: boolean;
     onClose: () => void;
@@ -13,6 +17,18 @@ export interface FormModalProps {
     onConfirm?: () => void;
     cancelLabel?: string;
     confirmLabel?: string;
+    confirmRightIcon?: React.ReactNode;
+    cancelLeftIcon?: React.ReactNode;
+    confirmVariant?: ButtonProps['variant'];
+    /** Optional destructive footer action (e.g. Delete on edit modals). Rendered before Cancel. */
+    onDelete?: () => void;
+    deleteLabel?: string;
+    deleteButtonDisabled?: boolean;
+    deleteButtonLoading?: boolean;
+    deleteLeftIcon?: React.ReactNode;
+    fullScreen?: boolean;
+    /** Merged into Mantine `Modal` `styles` (e.g. lock body scroll when children use an inner `ScrollArea`). */
+    modalStyles?: FormModalStylesOverride;
 }
-export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, confirmButtonDisabled, confirmButtonLoading, onCancel, onConfirm, cancelLabel, confirmLabel, }: FormModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, confirmButtonDisabled, confirmButtonLoading, onCancel, onConfirm, cancelLabel, confirmLabel, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel, deleteButtonDisabled, deleteButtonLoading, deleteLeftIcon, modalStyles, fullScreen, }: FormModalProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FormModal.d.ts.map

package/dist/components/Info/Modals/FormModal/FormModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,uJAavB,cAAc,4CAiGhB,CAAC"}
+{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAK/C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAU,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE5E,+EAA+E;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAC3C,MAAM,CACF,MAAM,GACN,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,EACT,SAAS,CACV,CACF,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4GAA4G;IAC5G,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC;AAED,eAAO,MAAM,SAAS,GAAI,oTAuBvB,cAAc,4CAwIhB,CAAC"}

package/dist/components/Info/Modals/FormModal/FormModal.js

@@ -8,7 +8,7 @@ import { Center } from "../../../Layout/Center/Center";
 import { modalVariants } from "../variants";
 import { Group } from "../../../Layout/Group/Group";
 import { Button } from "../../../Inputs/Buttons/Button/Button";
-export const FormModal = ({ opened, onClose, icon, children, size = "400px", modalVariant = "info", confirmButtonDisabled = false, confirmButtonLoading = false, onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
+export const FormModal = ({ opened, onClose, icon, children, size = "400px", modalVariant = "info", confirmButtonDisabled = false, confirmButtonLoading = false, onCancel, onConfirm, cancelLabel, confirmLabel, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel = "Delete", deleteButtonDisabled = false, deleteButtonLoading = false, deleteLeftIcon, modalStyles, fullScreen = false, }) => {
     const selectedVariant = modalVariants[modalVariant];
     const iconContainer = {
         width: "42px",
@@ -19,7 +19,7 @@ export const FormModal = ({ opened, onClose, icon, children, size = "400px", mod
     };
     const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
     const modalIcon = coloredIcon || (_jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: "20px" } }));
-    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: "16px", overlayProps: {
+    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, fullScreen: fullScreen, radius: "16px", overlayProps: {
             opacity: 0,
             blur: 4,
         }, size: size, transitionProps: {
@@ -33,13 +33,15 @@ export const FormModal = ({ opened, onClose, icon, children, size = "400px", mod
                 height: "18px",
             },
         }, styles: {
-            content: {
-                borderRadius: "8px",
-                border: `1px solid ${neutral[50]}`,
-                boxShadow: "0px 0px 19px 0px #00000040",
-            },
-            header: {
-                padding: spacing.sm,
+            ...modalStyles,
+            body: {
+                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                minHeight: 0,
+                overflow: "hidden",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body,
             },
             close: {
                 borderRadius: "16px",
@@ -52,9 +54,25 @@ export const FormModal = ({ opened, onClose, icon, children, size = "400px", mod
                 "&:active": {
                     transform: "none",
                 },
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.close,
             },
-            body: {
-                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+            content: {
+                borderRadius: "8px",
+                border: `1px solid ${neutral[50]}`,
+                boxShadow: "0px 0px 19px 0px #00000040",
+                display: "flex",
+                flexDirection: "column",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.content,
+            },
+            header: {
+                padding: spacing.sm,
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header,
             },
-        }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), children && (_jsx(Stack, { gap: spacing.xxs, align: "center", children: children }))] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: onConfirm, variant: selectedVariant.buttonVariant, disabled: confirmButtonDisabled, loading: confirmButtonLoading, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
+        }, children: _jsxs(Stack, { gap: "20px", w: "100%", align: "stretch", style: { minWidth: 0, flex: 1, minHeight: 0 }, children: [_jsx(Center, { mx: "auto", style: { ...iconContainer, flexShrink: 0 }, children: modalIcon }), children && (_jsx(Stack, { gap: spacing.xxs, align: "stretch", w: "100%", style: {
+                        minWidth: 0,
+                        maxWidth: "100%",
+                        flex: 1,
+                        minHeight: 0,
+                        overflow: "hidden",
+                    }, children: children })), _jsx(Center, { w: "100%", style: { flexShrink: 0 }, children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", leftIcon: cancelLeftIcon, children: cancelLabel || selectedVariant.cancelLabel }), onDelete && (_jsx(Button, { onClick: onDelete, variant: "cancel", disabled: deleteButtonDisabled, loading: deleteButtonLoading, leftIcon: deleteLeftIcon, children: deleteLabel })), _jsx(Button, { onClick: onConfirm, variant: confirmVariant || selectedVariant.buttonVariant, disabled: confirmButtonDisabled, loading: confirmButtonLoading, rightIcon: confirmRightIcon, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
 };

package/dist/components/Info/Modals/FormModalV2/FormModalV2.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import type { CSSObject } from "@mantine/core";
+import { modalVariants } from "../variants";
+import { ButtonProps } from "../../../Inputs/Buttons/Button/Button";
+/** Style overrides merged into Mantine `Modal` `styles` (object form only). */
+export type FormModalV2StylesOverride = Partial<Record<"body" | "close" | "content" | "header" | "inner" | "overlay" | "root" | "title", CSSObject>>;
+export interface FormModalV2Props {
+    opened: boolean;
+    onClose: () => void;
+    icon?: React.ReactElement;
+    /** Pinned title rendered in the header zone — stays visible while body scrolls. */
+    title?: string;
+    /** Pinned subtitle rendered below the title in the header zone. */
+    subtitle?: string;
+    /**
+     * Form content. Rendered inside a scrollable body zone — the body grows
+     * up to the available modal height, then scrolls. Consumers do NOT need to
+     * wrap children in a ScrollArea; the body owns scroll behavior.
+     */
+    children?: React.ReactNode;
+    size?: string | number;
+    modalVariant?: keyof typeof modalVariants;
+    confirmButtonDisabled?: boolean;
+    confirmButtonLoading?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    confirmRightIcon?: React.ReactNode;
+    cancelLeftIcon?: React.ReactNode;
+    confirmVariant?: ButtonProps['variant'];
+    /** Optional destructive footer action (e.g. Delete on edit modals). Rendered before Cancel. */
+    onDelete?: () => void;
+    deleteLabel?: string;
+    deleteButtonDisabled?: boolean;
+    deleteButtonLoading?: boolean;
+    deleteLeftIcon?: React.ReactNode;
+    fullScreen?: boolean;
+    /** Merged into Mantine `Modal` `styles`. Consumer overrides win. */
+    modalStyles?: FormModalV2StylesOverride;
+    /**
+     * Override for the pinned footer zone. When provided, replaces the
+     * default Cancel/Delete/Confirm button cluster entirely — useful for
+     * content pickers, multi-step wizards, or any flow whose footer doesn't
+     * map cleanly onto the three-button preset. The override is rendered in
+     * the same `flexShrink: 0` slot so layout invariants (scrollable body,
+     * pinned footer) hold either way.
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * Three-zone modal: pinned header (icon + title + subtitle), scrollable body,
+ * pinned footer (buttons). The body is the only scroll surface — consumers
+ * pass form fields as children without any wrapper.
+ *
+ * Scroll height is enforced by flex layout, so content can never render behind
+ * the footer regardless of viewport size.
+ */
+export declare const FormModalV2: ({ opened, onClose, icon, title, subtitle, children, size, modalVariant, confirmButtonDisabled, confirmButtonLoading, onCancel, onConfirm, cancelLabel, confirmLabel, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel, deleteButtonDisabled, deleteButtonLoading, deleteLeftIcon, modalStyles, fullScreen, footer, }: FormModalV2Props) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormModalV2.d.ts.map

package/dist/components/Info/Modals/FormModalV2/FormModalV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormModalV2.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModalV2/FormModalV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM/C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAU,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE5E,+EAA+E;AAC/E,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,MAAM,CACF,MAAM,GACN,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,EACT,SAAS,CACV,CACF,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,6UA0BzB,gBAAgB,4CAuLlB,CAAC"}

package/dist/components/Info/Modals/FormModalV2/FormModalV2.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Modal as MantineModal } from "@mantine/core";
+import { neutral } from "../../../../constants/colors";
+import { spacing } from "../../../../constants/spacing";
+import { Stack } from "../../../Layout/Stack/Stack";
+import { Center } from "../../../Layout/Center/Center";
+import { Title } from "../../../Typography/Title/Title";
+import { modalVariants } from "../variants";
+import { Group } from "../../../Layout/Group/Group";
+import { Button } from "../../../Inputs/Buttons/Button/Button";
+/**
+ * Three-zone modal: pinned header (icon + title + subtitle), scrollable body,
+ * pinned footer (buttons). The body is the only scroll surface — consumers
+ * pass form fields as children without any wrapper.
+ *
+ * Scroll height is enforced by flex layout, so content can never render behind
+ * the footer regardless of viewport size.
+ */
+export const FormModalV2 = ({ opened, onClose, icon, title, subtitle, children, size = "400px", modalVariant = "info", confirmButtonDisabled = false, confirmButtonLoading = false, onCancel, onConfirm, cancelLabel, confirmLabel, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel = "Delete", deleteButtonDisabled = false, deleteButtonLoading = false, deleteLeftIcon, modalStyles, fullScreen = false, footer, }) => {
+    const selectedVariant = modalVariants[modalVariant];
+    const iconContainer = {
+        width: "42px",
+        height: "42px",
+        borderRadius: "50%",
+        backgroundColor: selectedVariant.iconBackgroundColor,
+        border: `2px solid ${selectedVariant.iconColor}`,
+    };
+    const coloredIcon = icon &&
+        React.cloneElement(icon, {
+            color: icon.props.color || selectedVariant.iconColor,
+        });
+    const modalIcon = coloredIcon || (_jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: "20px" } }));
+    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, fullScreen: fullScreen, radius: "16px", overlayProps: {
+            opacity: 0,
+            blur: 4,
+        }, size: size, transitionProps: {
+            transition: "pop",
+            duration: 200,
+        }, closeButtonProps: {
+            style: {
+                borderRadius: "16px",
+                backgroundColor: neutral[50],
+                width: "18px",
+                height: "18px",
+            },
+        }, styles: {
+            ...modalStyles,
+            body: {
+                // Tighter side padding on fullScreen (mobile) — `xxl` (32px)
+                // eats ~17% of a 375px viewport and forces the form's 2-col
+                // grids to overflow the right edge.
+                padding: fullScreen
+                    ? `0 ${spacing.md} ${spacing.lg} ${spacing.md}`
+                    : `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                minHeight: 0,
+                overflow: "hidden",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body,
+            },
+            close: {
+                borderRadius: "16px",
+                backgroundColor: neutral[50],
+                width: "18px",
+                height: "18px",
+                "&:hover": {
+                    backgroundColor: neutral[50],
+                },
+                "&:active": {
+                    transform: "none",
+                },
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.close,
+            },
+            content: {
+                borderRadius: "8px",
+                border: `1px solid ${neutral[50]}`,
+                boxShadow: "0px 0px 19px 0px #00000040",
+                display: "flex",
+                flexDirection: "column",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.content,
+            },
+            header: {
+                padding: spacing.sm,
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header,
+            },
+        }, children: _jsxs(Stack, { gap: "20px", w: "100%", align: "stretch", style: { minWidth: 0, flex: 1, minHeight: 0 }, children: [_jsxs(Stack, { gap: spacing.sm, align: "center", w: "100%", style: { minWidth: 0, flexShrink: 0 }, children: [_jsx(Center, { mx: "auto", style: iconContainer, children: modalIcon }), title && (_jsx(Title, { variant: "cardHeader", align: "center", children: title })), subtitle && (_jsx(Title, { variant: "cardSubheader", align: "center", children: subtitle }))] }), children && (_jsx(Stack, { gap: spacing.lg, align: "stretch", w: "100%", style: {
+                        minWidth: 0,
+                        maxWidth: "100%",
+                        flex: 1,
+                        minHeight: 0,
+                        overflowY: "auto",
+                        overflowX: "hidden",
+                    }, children: children })), footer !== undefined ? (_jsx("div", { style: { flexShrink: 0, width: '100%' }, children: footer })) : (_jsx(Center, { w: "100%", style: { flexShrink: 0 }, children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", leftIcon: cancelLeftIcon, children: cancelLabel || selectedVariant.cancelLabel }), onDelete && (_jsx(Button, { onClick: onDelete, variant: "cancel", disabled: deleteButtonDisabled, loading: deleteButtonLoading, leftIcon: deleteLeftIcon, children: deleteLabel })), _jsx(Button, { onClick: onConfirm, variant: confirmVariant || selectedVariant.buttonVariant, disabled: confirmButtonDisabled, loading: confirmButtonLoading, rightIcon: confirmRightIcon, children: confirmLabel || selectedVariant.confirmLabel })] }) }))] }) }));
+};

package/dist/components/Info/Modals/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAGD,eAAO,MAAM,KAAK,GAAI,6DAAuE,UAAU,4CAoEtG,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAGD,eAAO,MAAM,KAAK,GAAI,6DAAuE,UAAU,4CA2EtG,CAAC"}

package/dist/components/Info/Modals/Modal/Modal.js

@@ -2,11 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal as MantineModal } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
 import { spacing } from '../../../../constants/spacing';
+import { useMobile } from '../../../../hooks/useMediaQuery';
 import { Title } from '../../../Typography/Title/Title';
 import { Stack } from '../../../Layout/Stack/Stack';
 import { Center } from '../../../Layout/Center/Center';
 // Base modal is intended to be extended and customized - use InfoModal or ConfirmationModal for common use cases
 export const Modal = ({ opened, onClose, icon, title, subtitle, children, width = '400px' }) => {
+    // On mobile the modal usually fills the viewport (consumers pass
+    // `width='100%'`), so the desktop body's 32px side padding eats real
+    // estate that grid pickers and 4-segment SegmentedControls need. Tighten
+    // to `spacing.md` (12px) on mobile so children get an extra ~40px of
+    // usable width without making desktop look cramped.
+    const isMobile = useMobile();
+    const bodyPaddingX = isMobile ? spacing.md : spacing.xxl;
     return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: '16px', overlayProps: {
             opacity: 0,
             blur: 4,
@@ -38,7 +46,7 @@ export const Modal = ({ opened, onClose, icon, title, subtitle, children, width
                 },
             },
             body: {
-                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+                padding: `0 ${bodyPaddingX} ${spacing.lg} ${bodyPaddingX}`,
             },
         }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [icon, _jsxs(Stack, { gap: spacing.xxs, align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title }), subtitle && (_jsx(Title, { variant: "cardSubheader", align: "center", children: subtitle }))] })] }), _jsx(Center, { h: "100%", w: "100%", children: children })] }) }) }));
 };

package/dist/components/Info/Modals/StepperModal/StepperModal.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+interface StepperModalProps {
+    opened: boolean;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    width?: string | number;
+    stepLabels?: string[];
+    children: React.ReactNode[];
+    onConfirm: () => void;
+    cancelLabel?: string;
+    backLabel?: string;
+    nextLabel?: string;
+    confirmLabel?: string;
+    confirmButtonDisabled?: boolean;
+    confirmButtonLoading?: boolean;
+    nextButtonDisabled?: boolean;
+}
+export declare const StepperModal: ({ opened, onClose, title, subtitle, width, stepLabels, children, onConfirm, cancelLabel, backLabel, nextLabel, confirmLabel, confirmButtonDisabled, confirmButtonLoading, nextButtonDisabled, }: StepperModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepperModal.d.ts.map

package/dist/components/Info/Modals/StepperModal/StepperModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/StepperModal/StepperModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,GAAI,iMAgB1B,iBAAiB,4CAkHnB,CAAC"}

package/dist/components/Info/Modals/StepperModal/StepperModal.js

@@ -0,0 +1,50 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Modal as MantineModal } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { neutral } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
+import { Button } from '../../../Inputs/Buttons/Button/Button';
+import { Center } from '../../../Layout/Center/Center';
+import { Group } from '../../../Layout/Group/Group';
+import { Stack } from '../../../Layout/Stack/Stack';
+import { Text } from '../../../Typography/Text/Text';
+import { Title } from '../../../Typography/Title/Title';
+import { Badge } from '../../Badge/Badge';
+export const StepperModal = ({ opened, onClose, title, subtitle, width = '500px', stepLabels, children, onConfirm, cancelLabel = 'Cancel', backLabel = 'Back', nextLabel = 'Next', confirmLabel = 'Confirm', confirmButtonDisabled = false, confirmButtonLoading = false, nextButtonDisabled = false, }) => {
+    const [activeStep, setActiveStep] = useState(0);
+    const stepCount = children.length;
+    useEffect(() => {
+        if (!opened)
+            setActiveStep(0);
+    }, [opened]);
+    return (_jsx(MantineModal, { centered: true, closeButtonProps: {
+            style: {
+                backgroundColor: neutral[50],
+                borderRadius: '16px',
+                height: '18px',
+                width: '18px',
+            },
+        }, onClose: onClose, opened: opened, overlayProps: {
+            blur: 4,
+            opacity: 0,
+        }, radius: '16px', size: width, styles: {
+            body: {
+                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+            },
+            close: {
+                '&:active': { transform: 'none' },
+                '&:hover': { backgroundColor: neutral[50] },
+            },
+            content: {
+                border: `1px solid ${neutral[50]}`,
+                borderRadius: '8px',
+                boxShadow: '0px 0px 19px 0px #00000040',
+            },
+            header: {
+                padding: spacing.sm,
+            },
+        }, transitionProps: {
+            duration: 200,
+            transition: 'pop',
+        }, children: _jsx(Center, { h: '100%', w: '100%', children: _jsxs(Stack, { gap: '20px', h: '100%', w: '100%', children: [_jsxs(Group, { align: 'center', gap: '8px', children: [_jsxs(Badge, { variant: 'outline', children: ["Step ", activeStep + 1, " of ", stepCount] }), (stepLabels === null || stepLabels === void 0 ? void 0 : stepLabels[activeStep]) && (_jsxs(Text, { size: 'sm', children: ["\u2014 ", stepLabels[activeStep]] }))] }), _jsx(Stack, { align: 'center', children: _jsxs(Stack, { align: 'center', children: [_jsx(Title, { align: 'center', variant: 'cardHeader', children: title }), subtitle && (_jsx(Title, { align: 'center', variant: 'cardSubheader', children: subtitle }))] }) }), _jsx(Center, { h: '100%', w: '100%', children: children[activeStep] }), _jsx(Center, { children: _jsxs(Group, { align: 'center', gap: '10px', children: [activeStep === 0 ? (_jsx(Button, { onClick: onClose, variant: 'secondary', children: cancelLabel })) : (_jsx(Button, { onClick: () => setActiveStep((step) => step - 1), variant: 'secondary', children: backLabel })), activeStep === stepCount - 1 ? (_jsx(Button, { disabled: confirmButtonDisabled, loading: confirmButtonLoading, onClick: onConfirm, variant: 'primary', children: confirmLabel })) : (_jsx(Button, { disabled: nextButtonDisabled, onClick: () => setActiveStep((step) => step + 1), variant: 'primary', children: nextLabel }))] }) })] }) }) }));
+};

package/dist/components/Info/Modals/StepperModal/StepperModal.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { StepperModal } from './StepperModal';
+declare const meta: Meta<typeof StepperModal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TwoSteps: Story;
+export declare const ConfirmButtonLoading: Story;
+export declare const CustomLabels: Story;
+//# sourceMappingURL=StepperModal.stories.d.ts.map

package/dist/components/Info/Modals/StepperModal/StepperModal.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperModal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/StepperModal/StepperModal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAoGnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsClC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAC"}

package/dist/components/Info/Modals/StepperModal/StepperModal.stories.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../../Inputs/Buttons/Button/Button';
+import { NumberInput } from '../../../Inputs/TextInputs/NumberInput/NumberInput';
+import { TextInput } from '../../../Inputs/TextInputs/TextInput/TextInput';
+import { Center } from '../../../Layout/Center/Center';
+import { Stack } from '../../../Layout/Stack/Stack';
+import { Title } from '../../../Typography/Title/Title';
+import { StepperModal } from './StepperModal';
+const meta = {
+    argTypes: {
+        backLabel: {
+            control: { type: 'text' },
+            description: 'Label for the back button on middle and final steps.',
+            table: {
+                defaultValue: { summary: "'Back'" },
+                type: { summary: 'string' },
+            },
+        },
+        cancelLabel: {
+            control: { type: 'text' },
+            description: 'Label for the cancel button on the first step.',
+            table: {
+                defaultValue: { summary: "'Cancel'" },
+                type: { summary: 'string' },
+            },
+        },
+        children: {
+            control: false,
+            description: 'Array of ReactNode, one per step. Only the active step is mounted — lift form state to the parent to preserve values across navigation.',
+            table: { type: { summary: 'ReactNode[]' } },
+        },
+        confirmButtonDisabled: {
+            control: false,
+            description: 'Whether the confirm button is disabled.',
+            table: { type: { summary: 'boolean' } },
+        },
+        confirmButtonLoading: {
+            control: false,
+            description: 'Whether the confirm button shows a loading state.',
+            table: { type: { summary: 'boolean' } },
+        },
+        confirmLabel: {
+            control: { type: 'text' },
+            description: 'Label for the confirm button on the final step.',
+            table: {
+                defaultValue: { summary: "'Confirm'" },
+                type: { summary: 'string' },
+            },
+        },
+        nextButtonDisabled: {
+            control: false,
+            description: 'Whether the next button is disabled.',
+            table: { type: { summary: 'boolean' } },
+        },
+        nextLabel: {
+            control: { type: 'text' },
+            description: 'Label for the next button on non-final steps.',
+            table: {
+                defaultValue: { summary: "'Next'" },
+                type: { summary: 'string' },
+            },
+        },
+        onClose: {
+            control: false,
+            description: 'Called when the modal is dismissed (X button or Cancel).',
+            table: { type: { summary: '() => void' } },
+        },
+        onConfirm: {
+            control: false,
+            description: 'Called when the Confirm button is clicked on the final step.',
+            table: { type: { summary: '() => void' } },
+        },
+        opened: {
+            control: false,
+            description: 'Controls whether the modal is open.',
+            table: { type: { summary: 'boolean' } },
+        },
+        stepLabels: {
+            control: { type: 'object' },
+            description: 'Labels shown next to the step badge. One string per step.',
+            table: { type: { summary: 'string[]' } },
+        },
+        subtitle: {
+            control: { type: 'text' },
+            description: 'Optional subtitle below the title.',
+            table: { type: { summary: 'string' } },
+        },
+        title: {
+            control: { type: 'text' },
+            description: 'Modal title.',
+            table: { type: { summary: 'string' } },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Modal width override.',
+            table: {
+                defaultValue: { summary: "'500px'" },
+                type: { summary: 'string | number' },
+            },
+        },
+    },
+    component: StepperModal,
+    parameters: {
+        layout: 'centered',
+    },
+    title: 'Components/Info/Modals/StepperModal',
+};
+export default meta;
+export const Default = {
+    args: {
+        backLabel: 'Back',
+        cancelLabel: 'Cancel',
+        confirmLabel: 'Create Account',
+        nextLabel: 'Continue',
+        stepLabels: ['Your Info', 'Contact', 'Additional Info'],
+        subtitle: 'Complete all steps to get started',
+        title: 'Create Account',
+        width: '500px',
+    },
+    render: (args) => {
+        const [opened, setOpened] = useState(false);
+        const [name, setName] = useState('');
+        const [email, setEmail] = useState('');
+        const [age, setAge] = useState(18);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open StepperModal" }) }), _jsx(StepperModal, { ...args, onClose: () => setOpened(false), onConfirm: () => setOpened(false), opened: opened, children: [
+                        _jsx(Stack, { align: 'center', gap: '12px', w: '100%', children: _jsx(TextInput, { label: 'Full Name', onChange: (e) => setName(e.target.value), placeholder: 'Jane Smith', value: name }) }, 'step-0'),
+                        _jsxs(Stack, { align: 'center', gap: '12px', w: '100%', children: [_jsx(Title, { align: 'center', variant: 'cardSubheader', children: "How can we reach you?" }), _jsx(TextInput, { label: 'Email Address', onChange: (e) => setEmail(e.target.value), placeholder: 'jane@example.com', value: email })] }, 'step-1'),
+                        _jsxs(Stack, { align: 'center', gap: '12px', w: '100%', children: [_jsx(Title, { align: 'center', variant: 'cardSubheader', children: "A few more details." }), _jsx(NumberInput, { label: 'Age', max: 120, min: 1, onChange: (val) => setAge(val !== null && val !== void 0 ? val : 18), value: age })] }, 'step-2'),
+                    ] })] }));
+    },
+};
+export const TwoSteps = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        const [value, setValue] = useState('');
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open 2-Step Modal" }) }), _jsx(StepperModal, { onClose: () => setOpened(false), onConfirm: () => setOpened(false), opened: opened, stepLabels: ['Configure', 'Confirm'], title: 'Quick Setup', children: [
+                        _jsx(Stack, { align: 'center', gap: '12px', w: '100%', children: _jsx(TextInput, { label: 'Configuration Value', onChange: (e) => setValue(e.target.value), placeholder: 'Enter value...', value: value }) }, 'step-0'),
+                        _jsxs(Stack, { align: 'center', gap: '8px', w: '100%', children: [_jsx(Title, { align: 'center', variant: 'cardSubheader', children: "You entered:" }), _jsx(Title, { align: 'center', variant: 'cardHeader', children: value || '(empty)' })] }, 'step-1'),
+                    ] })] }));
+    },
+};
+export const ConfirmButtonLoading = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        const [loading, setLoading] = useState(false);
+        const handleConfirm = () => {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setOpened(false);
+            }, 2000);
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open StepperModal" }) }), _jsx(StepperModal, { confirmButtonLoading: loading, onClose: () => setOpened(false), onConfirm: handleConfirm, opened: opened, stepLabels: ['Prepare', 'Submit'], title: 'Submit Data', children: [
+                        _jsx(Title, { align: 'center', variant: 'cardSubheader', children: "Click Next to proceed." }, 'step-0'),
+                        _jsx(Title, { align: 'center', variant: 'cardSubheader', children: "Click Confirm to submit and see the loading state." }, 'step-1'),
+                    ] })] }));
+    },
+};
+export const CustomLabels = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open StepperModal" }) }), _jsx(StepperModal, { backLabel: 'Previous', cancelLabel: 'Dismiss', confirmLabel: 'Submit', nextLabel: 'Continue', onClose: () => setOpened(false), onConfirm: () => setOpened(false), opened: opened, stepLabels: ['Step 1', 'Step 2', 'Step 3'], title: 'Custom Button Labels', children: [
+                        _jsx(Title, { align: 'center', variant: 'cardSubheader', children: "First step \u2014 notice the Dismiss button." }, 'step-0'),
+                        _jsx(Title, { align: 'center', variant: 'cardSubheader', children: "Middle step \u2014 Previous and Continue." }, 'step-1'),
+                        _jsx(Title, { align: 'center', variant: 'cardSubheader', children: "Final step \u2014 Previous and Submit." }, 'step-2'),
+                    ] })] }));
+    },
+};