@taiv/ui 1.10.6 → 1.10.8

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

@@ -8,10 +8,11 @@ export interface FormModalProps {
     size?: string | number;
     modalVariant?: keyof typeof modalVariants;
     confirmButtonDisabled?: boolean;
+    confirmButtonLoading?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
     cancelLabel?: string;
     confirmLabel?: string;
 }
-export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, confirmButtonDisabled, 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, }: 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;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,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,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,iIAYvB,cAAc,4CAgGhB,CAAC"}
+{"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,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"}

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

@@ -7,7 +7,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 = "40rem", modalVariant = "info", confirmButtonDisabled = false, onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
+export const FormModal = ({ opened, onClose, icon, children, size = "40rem", modalVariant = "info", confirmButtonDisabled = false, confirmButtonLoading = false, onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
     const selectedVariant = modalVariants[modalVariant];
     const iconContainer = {
         width: "4.2rem",
@@ -55,5 +55,5 @@ export const FormModal = ({ opened, onClose, icon, children, size = "40rem", mod
             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, disabled: confirmButtonDisabled, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
+        }, 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, disabled: confirmButtonDisabled, loading: confirmButtonLoading, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
 };

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

@@ -11,5 +11,6 @@ export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const CustomLabels: Story;
 export declare const ConfirmButtonDisabled: Story;
+export declare const ConfirmButtonLoading: Story;
 export declare const CompleteExample: Story;
 //# sourceMappingURL=FormModal.stories.d.ts.map

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

@@ -1 +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,CAwFhC,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,qBAAqB,EAAE,KAgCnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC"}
+{"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,CA+FhC,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,qBAAqB,EAAE,KAgCnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAiClC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC"}

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

@@ -69,6 +69,13 @@ const meta = {
                 type: { summary: "boolean" },
             },
         },
+        confirmButtonLoading: {
+            control: false,
+            description: "Whether the modal confirm button shows a loading state.",
+            table: {
+                type: { summary: "boolean" },
+            },
+        },
         onCancel: {
             control: false,
             description: "Handler for the cancel button click.",
@@ -192,6 +199,20 @@ export const ConfirmButtonDisabled = {
         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), confirmButtonDisabled: name.trim().length === 0, children: _jsxs(Stack, { gap: "1rem", align: "center", children: [_jsx(Title, { variant: "cardSubheader", align: "center", children: "Enter your name to enable the confirm button." }), _jsx(TextInput, { label: "Name", placeholder: "Enter your name", value: name, onChange: (e) => setName(e.target.value) })] }) })] }));
     },
 };
+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 FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: handleConfirm, confirmButtonLoading: loading, children: _jsx(Title, { variant: "cardSubheader", align: "center", children: "Click OK to see the button loading state." }) })] }));
+    },
+};
 export const CompleteExample = {
     render: () => {
         const [opened, setOpened] = useState(false);

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

@@ -9,10 +9,9 @@ export interface IconButtonProps extends Omit<MantineButtonProps, 'leftIcon' | '
     toggled?: boolean;
     shadow?: boolean;
     subtle?: boolean;
-    tooltip?: string;
     children?: ReactElement<{
         size?: number;
     }>;
 }
-export declare const IconButton: ({ onClick, size, variant, toggled, shadow, subtle, tooltip, styles, children, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ onClick, size, variant, toggled, shadow, subtle, styles, children, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,IAAI,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAIvF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,0FAA0I,eAAe,4CA8DnL,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,IAAI,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAGvF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,iFAA4H,eAAe,4CA8DrK,CAAC"}

package/dist/components/Inputs/Buttons/IconButton/IconButton.js

@@ -3,8 +3,7 @@ import { Button as MantineButton } from '@mantine/core';
 import { componentSizes } from './sizes';
 import { componentVariants as baseVariants, subtleVariants } from '../shared/variants';
 import { neutral } from '../../../../constants/colors';
-import { Tooltip } from '../../../Info/Tooltips/Tooltip/Tooltip';
-export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled = false, shadow = false, subtle = false, tooltip = '', styles, children, ...props }) => {
+export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled = false, shadow = false, subtle = false, styles, children, ...props }) => {
     const selectedVariant = baseVariants[variant];
     const selectedSize = componentSizes[size];
     const getVariantStyles = () => {
@@ -49,5 +48,5 @@ export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled
         ...styles,
     };
     const Button = (_jsx(MantineButton, { styles: style, size: size, onClick: onClick, loaderPosition: "center", loaderProps: { size: selectedSize.iconSize }, ...props, children: props.loading ? _jsx(_Fragment, {}) : children }));
-    return tooltip ? _jsx(Tooltip, { text: tooltip, children: Button }) : Button;
+    return Button;
 };

package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.d.ts

@@ -6,7 +6,6 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Variants: Story;
 export declare const Subtle: Story;
-export declare const Tooltip: Story;
 export declare const Sizes: Story;
 export declare const States: Story;
 export declare const SubtleStates: Story;

package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}

package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.js

@@ -108,9 +108,6 @@ export const Variants = {
 export const Subtle = {
     render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { variant: "primary", subtle: true, children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: "secondary", subtle: true, children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: "cancel", subtle: true, children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: "success", subtle: true, children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: "warning", subtle: true, children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: "text", subtle: true, children: _jsx(IconClock2, {}) })] })),
 };
-export const Tooltip = {
-    render: () => (_jsx(Group, { gap: "1.6rem", children: _jsx(IconButton, { tooltip: "Tooltip", children: _jsx(Icon12Hours, {}) }) })),
-};
 export const Sizes = {
     render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { size: "sm", children: _jsx(Icon360View, {}) }), _jsx(IconButton, { size: "md", children: _jsx(IconAdjustments, {}) }), _jsx(IconButton, { size: "lg", children: _jsx(IconArrowsMaximize, {}) })] })),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.10.6",
+  "version": "1.10.8",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",