@taiv/ui 1.9.0 → 1.10.0

package/dist/components/Info/Badge/Badge.d.ts

@@ -1,11 +1,13 @@
+import React from 'react';
 import { BadgeProps as MantineBadgeProps } from '@mantine/core';
-import { colors } from '../../../constants/colors';
-interface BadgeProps extends Omit<MantineBadgeProps, 'color'> {
-    size?: 'sm' | 'md' | 'lg';
-    color?: keyof typeof colors;
-    variant?: 'outline' | 'filled' | 'gradient';
+import type { BadgeSize } from './sizes';
+import type { BadgeColor, BadgeVariant } from './variants';
+interface BadgeProps extends Omit<MantineBadgeProps, 'color' | 'leftSection'> {
+    size?: BadgeSize;
+    color?: BadgeColor;
+    variant?: BadgeVariant;
+    leftIcon?: React.ReactElement;
 }
-declare const Badge: ({ styles, color, variant, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-export { Badge };
-export type { BadgeProps };
+declare const Badge: ({ styles, color, variant, size, leftIcon, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/Info/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvF,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,UAAU,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;CAC7C;AAED,QAAA,MAAM,KAAK,GAAI,4CAA2E,UAAU,4CA8DnG,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3D,UAAU,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,aAAa,CAAC;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,QAAA,MAAM,KAAK,GAAI,sDAAqF,UAAU,4CAoC7G,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}

package/dist/components/Info/Badge/Badge.js

@@ -1,54 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Badge as MantineBadge } from '@mantine/core';
-import { fontBase, inputFontSize } from '../../../constants/font';
-import { colors } from '../../../constants/colors';
-const Badge = ({ styles, color = 'primary', variant = 'outline', size = 'md', ...props }) => {
-    const sizes = {
-        sm: {
-            mantineSize: 'md',
-            padding: '0.4rem 0.8rem',
-            height: '1.5rem',
-            fontSize: inputFontSize['sm'],
-        },
-        md: {
-            mantineSize: 'lg',
-            padding: '0.4rem 0.8rem',
-            height: '2.5rem',
-            fontSize: inputFontSize['md'],
-        },
-        lg: {
-            mantineSize: 'xl',
-            padding: '0.4rem 0.8rem',
-            height: '3rem',
-            fontSize: inputFontSize['lg'],
-        },
-    };
-    const variants = {
-        outline: {
-            border: `1.5px solid ${colors[color][200]}`,
-            color: colors[color][200],
-            backgroundColor: 'transparent',
-            borderRadius: '8px',
-            padding: '0.4rem 0.8rem',
-        },
-        filled: {
-            backgroundColor: colors[color][50],
-            color: colors[color][200],
-        },
-        gradient: {
-            background: `linear-gradient(to right, ${colors[color][50]}, ${colors[color][200]})`,
-            color: 'white',
-            borderRadius: '16px',
-            padding: '0.4rem 0.8rem',
-        },
-    };
-    const selectedSize = sizes[size];
-    const selectedVariant = variants[variant];
+import { fontBase } from '../../../constants/font';
+import { badgeSizes } from './sizes';
+import { getVariantStyles } from './variants';
+const Badge = ({ styles, color = 'primary', variant = 'outline', size = 'md', leftIcon, ...props }) => {
+    const selectedSize = badgeSizes[size];
+    const variantStyles = getVariantStyles(color);
+    const selectedVariant = variantStyles[variant];
     const style = {
         root: {
             padding: selectedSize.padding,
             height: selectedSize.height,
             cursor: 'default',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             ...selectedVariant,
         },
         inner: {
@@ -57,8 +24,19 @@ const Badge = ({ styles, color = 'primary', variant = 'outline', size = 'md', ..
             textTransform: 'none',
             cursor: 'default',
         },
+        leftSection: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        rightSection: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
         ...styles,
     };
-    return _jsx(MantineBadge, { size: selectedSize.mantineSize, styles: style, ...props });
+    const badgeIcon = leftIcon ? React.cloneElement(leftIcon, { size: selectedSize.iconSize, color: selectedVariant.color }) : leftIcon;
+    return _jsx(MantineBadge, { size: selectedSize.mantineSize, styles: style, leftSection: badgeIcon, ...props });
 };
 export { Badge };

package/dist/components/Info/Badge/Badge.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { BadgeProps } from './Badge';
+type LeftIconChoice = 'none' | 'IconCheck' | 'IconCircleFilled';
+type BadgeStoryArgs = Omit<BadgeProps, 'leftIcon'> & {
+    leftIcon?: LeftIconChoice;
+};
+declare const meta: Meta<BadgeStoryArgs>;
+export default meta;
+type Story = StoryObj<BadgeStoryArgs>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Colors: Story;
+export declare const Sizes: Story;
+export declare const WithLeftIcon: Story;
+//# sourceMappingURL=Badge.stories.d.ts.map

package/dist/components/Info/Badge/Badge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,KAAK,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEhE,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwD9B,CAAC;AAQF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC"}

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCheck, IconCircleFilled } from '@tabler/icons-react';
+import { Badge } from './Badge';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+const meta = {
+    title: 'Components/Info/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A customizable badge built on Mantine Badge. Supports sizes (sm, md, lg), design system colors, and outline, filled, or gradient variants.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['outline', 'filled', 'gradient'],
+            description: 'Visual style of the badge',
+            table: {
+                type: { summary: "'outline' | 'filled' | 'gradient'" },
+                defaultValue: { summary: "'outline'" },
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Badge size (height and font size)',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['primary', 'success', 'warning', 'error', 'neutral', 'white'],
+            description: 'Design system color',
+            table: {
+                type: { summary: 'keyof typeof colors' },
+                defaultValue: { summary: "'primary'" },
+            },
+        },
+        children: {
+            control: { type: 'text' },
+            description: 'Badge label or content',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        leftIcon: {
+            control: { type: 'select' },
+            options: ['none', 'IconCheck', 'IconCircleFilled'],
+            description: 'Icon shown to the left of the label',
+            table: {
+                type: { summary: "'IconCheck' | 'IconCircleFilled' | 'etc'" },
+            },
+        },
+    },
+};
+const leftIconMap = {
+    none: undefined,
+    IconCheck: _jsx(IconCheck, {}),
+    IconCircleFilled: _jsx(IconCircleFilled, {}),
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Badge',
+        variant: 'outline',
+        size: 'md',
+        color: 'primary',
+        leftIcon: 'none',
+    },
+    render: (args) => {
+        const { leftIcon = 'none', ...badgeProps } = args;
+        return _jsx(Badge, { ...badgeProps, leftIcon: leftIconMap[leftIcon] });
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Outline" }), _jsx(Badge, { variant: "filled", color: "primary", children: "Filled" }), _jsx(Badge, { variant: "gradient", color: "primary", children: "Gradient" })] })),
+};
+export const Colors = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", style: { flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Badge, { variant: "outline", color: "success", children: "Success" }), _jsx(Badge, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Badge, { variant: "outline", color: "error", children: "Error" }), _jsx(Badge, { variant: "outline", color: "neutral", children: "Neutral" })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", align: "flex-end", children: [_jsx(Badge, { size: "sm", color: "primary", children: "Small" }), _jsx(Badge, { size: "md", color: "primary", children: "Medium" }), _jsx(Badge, { size: "lg", color: "primary", children: "Large" })] })),
+};
+export const WithLeftIcon = {
+    render: () => (_jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { size: "sm", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "sm", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "sm", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { size: "lg", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "lg", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "lg", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] })] })),
+};

package/dist/components/Info/Badge/sizes.d.ts

@@ -0,0 +1,34 @@
+export declare const badgeSizes: {
+    sm: {
+        mantineSize: string;
+        padding: string;
+        height: string;
+        fontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        iconSize: number;
+    };
+    md: {
+        mantineSize: string;
+        padding: string;
+        height: string;
+        fontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        iconSize: number;
+    };
+    lg: {
+        mantineSize: string;
+        padding: string;
+        height: string;
+        fontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        iconSize: number;
+    };
+};
+export type BadgeSize = keyof typeof badgeSizes;
+//# sourceMappingURL=sizes.d.ts.map

package/dist/components/Info/Badge/sizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/sizes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/components/Info/Badge/sizes.js

@@ -0,0 +1,24 @@
+import { inputFontSize } from '../../../constants/font';
+export const badgeSizes = {
+    sm: {
+        mantineSize: 'md',
+        padding: '0.4rem 0.8rem',
+        height: '1.5rem',
+        fontSize: inputFontSize['sm'],
+        iconSize: 10,
+    },
+    md: {
+        mantineSize: 'lg',
+        padding: '0.4rem 0.8rem',
+        height: '2.5rem',
+        fontSize: inputFontSize['md'],
+        iconSize: 14,
+    },
+    lg: {
+        mantineSize: 'xl',
+        padding: '0.4rem 0.8rem',
+        height: '3rem',
+        fontSize: inputFontSize['lg'],
+        iconSize: 16,
+    },
+};

package/dist/components/Info/Badge/variants.d.ts

@@ -0,0 +1,6 @@
+import type { CSSObject } from '@mantine/styles';
+import { colors } from '../../../constants/colors';
+export type BadgeVariant = 'outline' | 'filled' | 'gradient';
+export type BadgeColor = keyof typeof colors;
+export declare function getVariantStyles(color: BadgeColor): Record<BadgeVariant, CSSObject>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/Info/Badge/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAoBnF"}

package/dist/components/Info/Badge/variants.js

@@ -0,0 +1,22 @@
+import { colors } from '../../../constants/colors';
+export function getVariantStyles(color) {
+    return {
+        outline: {
+            border: `1.5px solid ${colors[color][200]}`,
+            color: colors[color][200],
+            backgroundColor: 'transparent',
+            borderRadius: '8px',
+            padding: '0.4rem 0.8rem',
+        },
+        filled: {
+            backgroundColor: colors[color][50],
+            color: colors[color][200],
+        },
+        gradient: {
+            background: `linear-gradient(to right, ${colors[color][50]}, ${colors[color][200]})`,
+            color: 'white',
+            borderRadius: '16px',
+            padding: '0.4rem 0.8rem',
+        },
+    };
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { modalVariants } from "../variants";
+export interface FormModalProps {
+    opened: boolean;
+    onClose: () => void;
+    icon?: React.ReactElement;
+    children?: React.ReactNode;
+    size?: string | number;
+    modalVariant?: keyof typeof modalVariants;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    cancelLabel?: string;
+    confirmLabel?: string;
+}
+export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, onCancel, onConfirm, cancelLabel, confirmLabel, }: FormModalProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,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,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,0GAWvB,cAAc,4CA+FhB,CAAC"}

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

@@ -0,0 +1,59 @@
+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 { Stack } from "../../../Layout/Stack/Stack";
+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 = "40rem", modalVariant = "info", onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
+    const selectedVariant = modalVariants[modalVariant];
+    const iconContainer = {
+        width: "4.2rem",
+        height: "4.2rem",
+        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: "2rem" } }));
+    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: "16px", overlayProps: {
+            opacity: 0,
+            blur: 4,
+        }, size: size, transitionProps: {
+            transition: "pop",
+            duration: 200,
+        }, closeButtonProps: {
+            style: {
+                borderRadius: "16px",
+                backgroundColor: neutral[50],
+                width: "1.8rem",
+                height: "1.8rem",
+            },
+        }, styles: {
+            content: {
+                borderRadius: "8px",
+                border: `1px solid ${neutral[50]}`,
+                boxShadow: "0px 0px 19px 0px #00000040",
+            },
+            header: {
+                padding: "0.8rem",
+            },
+            close: {
+                borderRadius: "16px",
+                backgroundColor: neutral[50],
+                width: "1.8rem",
+                height: "1.8rem",
+                "&:hover": {
+                    backgroundColor: neutral[50],
+                },
+                "&:active": {
+                    transform: "none",
+                },
+            },
+            body: {
+                padding: "0 3.2rem 1.6rem 3.2rem",
+            },
+        }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), children && (_jsx(Stack, { gap: "0.25rem", align: "center", children: children }))] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: onConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
+};

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FormModal } from "./FormModal";
+declare const meta: Meta<typeof FormModal>;
+export default meta;
+type Story = StoryObj<typeof FormModal>;
+export declare const Default: Story;
+export declare const WithCustomIcon: Story;
+export declare const WithCustomIconColor: Story;
+export declare const WithTextInput: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const CustomLabels: Story;
+export declare const CompleteExample: Story;
+//# sourceMappingURL=FormModal.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormModal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAyDrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuBjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyCnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC"}

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

@@ -0,0 +1,187 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FormModal } from "./FormModal";
+import { Button } from "../../../Inputs/Buttons/Button/Button";
+import { primary, red } from "../../../../constants/colors";
+import { IconFlask, IconShoppingCart } from "@tabler/icons-react";
+import { TextInput } from "../../../Inputs/TextInputs/TextInput/TextInput";
+import { NumberInput } from "../../../Inputs/TextInputs/NumberInput/NumberInput";
+import { Stack } from "../../../Layout/Stack/Stack";
+import { Title } from "../../../Typography/Title/Title";
+import { Group } from "../../../Layout/Group/Group";
+import { Center } from "../../../Layout/Center/Center";
+import { modalVariants } from "../variants";
+const meta = {
+    title: "Components/Info/Modals/FormModal",
+    component: FormModal,
+    argTypes: {
+        opened: {
+            control: false,
+            description: "Whether the modal is open.",
+            table: {
+                type: { summary: "boolean" },
+            },
+        },
+        onClose: {
+            control: false,
+            description: "Called when the modal is closed (e.g. overlay click, close button).",
+            table: {
+                type: { summary: "() => void" },
+            },
+        },
+        icon: {
+            control: false,
+            description: "Custom icon to display above the content. If not provided, the default variant icon is used.",
+            table: {
+                type: { summary: "ReactNode" },
+            },
+        },
+        children: {
+            control: false,
+            description: "Modal body content (messages, forms, inputs, etc.).",
+            table: {
+                type: { summary: "ReactNode" },
+            },
+        },
+        size: {
+            control: { type: "text" },
+            description: "Modal size (CSS value or number in px).",
+            table: {
+                type: { summary: "string | number" },
+                defaultValue: { summary: "'40rem'" },
+            },
+        },
+        modalVariant: {
+            control: { type: "select" },
+            options: Object.keys(modalVariants),
+            description: "Visual variant (provides default icon, button style, and labels).",
+            table: {
+                type: {
+                    summary: "'confirm' | 'info' | 'success' | 'error' | 'warning' | 'cancel'",
+                },
+                defaultValue: { summary: "'info'" },
+            },
+        },
+        onCancel: {
+            control: false,
+            description: "Handler for the cancel button click.",
+            table: {
+                type: { summary: "() => void" },
+            },
+        },
+        onConfirm: {
+            control: false,
+            description: "Handler for the confirm button click.",
+            table: {
+                type: { summary: "() => void" },
+            },
+        },
+        cancelLabel: {
+            control: { type: "text" },
+            description: "Override cancel button label. Omit to use variant default.",
+            table: { type: { summary: "string" } },
+        },
+        confirmLabel: {
+            control: { type: "text" },
+            description: "Override confirm button label. Omit to use variant default.",
+            table: { type: { summary: "string" } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        modalVariant: "info",
+        size: "40rem",
+        cancelLabel: "",
+        confirmLabel: "",
+    },
+    render: (args) => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { ...args, opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), children: _jsx(Title, { variant: "cardSubheader", align: "center", children: "Example message." }) })] }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `const [opened, setOpened] = useState(false);
+
+return (
+  <>
+    <Center>
+      <Button onClick={() => setOpened(true)}>Open FormModal</Button>
+    </Center>
+    <FormModal
+      opened={opened}
+      onClose={() => setOpened(false)}
+      onCancel={() => setOpened(false)}
+      onConfirm={() => setOpened(false)}
+      modalVariant='info'
+      size='40rem'
+      children={
+        <Title variant="cardSubheader" align="center">
+          Example message.
+        </Title>
+      }
+    />
+  </>
+);`,
+            },
+        },
+    },
+};
+export const WithCustomIcon = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), icon: _jsx(IconFlask, { color: primary[200] }), children: _jsx(Title, { variant: "cardSubheader", align: "center", children: "Example message." }) })] }));
+    },
+};
+export const WithCustomIconColor = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), icon: _jsx(IconFlask, { color: red[200] }), children: _jsx(Title, { variant: "cardSubheader", align: "center", children: "Example message." }) })] }));
+    },
+};
+export const WithTextInput = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { children: _jsx(TextInput, { label: "Full Name", placeholder: "Enter your full name", onChange: () => { } }), opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false) })] }));
+    },
+};
+export const Variants = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        const [variant, setVariant] = useState("info");
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Group, { gap: "1rem", children: Object.keys(modalVariants).map((v) => (_jsx(Button, { onClick: () => {
+                                setVariant(v);
+                                setOpened(true);
+                            }, children: v }, v))) }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: variant, children: _jsx(Title, { variant: "cardSubheader", align: "center", children: modalVariants[variant].message }) })] }));
+    },
+};
+export const Sizes = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        const [size, setSize] = useState("40rem");
+        const sizes = [
+            { label: "30rem", value: "30rem" },
+            { label: "40rem (Default)", value: "40rem" },
+            { label: "60rem", value: "60rem" },
+        ];
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Group, { gap: "1rem", children: sizes.map(({ label, value }) => (_jsx(Button, { onClick: () => {
+                                setSize(value);
+                                setOpened(true);
+                            }, children: label }, value))) }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), size: size, children: _jsxs(Title, { variant: "cardSubheader", align: "center", children: ["Modal size: ", size] }) })] }));
+    },
+};
+export const CustomLabels = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), cancelLabel: "No, go back", confirmLabel: "Yes, continue", children: _jsx(Title, { variant: "cardSubheader", align: "center", children: "Custom cancel and confirm button labels." }) })] }));
+    },
+};
+export const CompleteExample = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        const [quantity, setQuantity] = useState(1);
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Add to Cart" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: "confirm", icon: _jsx(IconShoppingCart, { color: primary[200] }), cancelLabel: "Cancel", confirmLabel: "Add to Cart", children: _jsxs(Stack, { gap: "1rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: "Add Item to Cart" }), _jsx(Title, { variant: "cardSubheader", align: "center", children: "Select the quantity you would like to add." }), _jsx(NumberInput, { label: "Quantity", value: quantity, onChange: (val) => setQuantity(val !== null && val !== void 0 ? val : 1), min: 1, max: 99, step: 1 })] }) })] }));
+    },
+};

package/dist/components/Inputs/Buttons/Button/Button.d.ts

@@ -1,10 +1,10 @@
 import { ButtonProps as MantineButtonProps } from '@mantine/core';
 import { componentSizes } from './sizes';
-import { buttonVariants } from '../shared/variants';
+import { componentVariants } from '../shared/variants';
 export interface ButtonProps extends MantineButtonProps {
     onClick?: () => void;
     size?: keyof typeof componentSizes;
-    variant?: keyof typeof buttonVariants;
+    variant?: keyof typeof componentVariants;
     fullWidth?: boolean;
     toggled?: boolean;
     shadow?: boolean;

package/dist/components/Inputs/Buttons/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,GAAI,0EAAqH,WAAW,4CAmCtJ,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,GAAI,0EAAqH,WAAW,4CAkCtJ,CAAC"}