@taiv/ui 1.10.0 → 1.10.2

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

@@ -7,10 +7,11 @@ export interface FormModalProps {
     children?: React.ReactNode;
     size?: string | number;
     modalVariant?: keyof typeof modalVariants;
+    confirmButtonDisabled?: boolean;
     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;
+export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, confirmButtonDisabled, 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,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"}
+{"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"}

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", onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
+export const FormModal = ({ opened, onClose, icon, children, size = "40rem", modalVariant = "info", confirmButtonDisabled = 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, 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, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
 };

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

@@ -10,5 +10,6 @@ export declare const WithTextInput: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const CustomLabels: Story;
+export declare const ConfirmButtonDisabled: 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,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"}
+{"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"}

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

@@ -62,6 +62,13 @@ const meta = {
                 defaultValue: { summary: "'info'" },
             },
         },
+        confirmButtonDisabled: {
+            control: false,
+            description: "Whether the modal confirm button is disabled.",
+            table: {
+                type: { summary: "boolean" },
+            },
+        },
         onCancel: {
             control: false,
             description: "Handler for the cancel button click.",
@@ -178,6 +185,13 @@ export const CustomLabels = {
         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 ConfirmButtonDisabled = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        const [name, setName] = useState("");
+        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 CompleteExample = {
     render: () => {
         const [opened, setOpened] = useState(false);

package/dist/components/Layout/Table/Table.d.ts

@@ -11,7 +11,8 @@ interface TableProps<T> {
     }>;
     placeholder?: React.ReactNode;
     shadow?: boolean;
+    divider?: boolean;
 }
-declare const Table: <T>({ columnConfigs, data, ListItem, placeholder, shadow }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: <T>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Table, type ColumnConfig, type TableProps };
 //# sourceMappingURL=Table.d.ts.map

package/dist/components/Layout/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAIhE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,UAAU,CAAC,CAAC;IACpB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,wDAAgE,UAAU,CAAC,CAAC,CAAC,4CAsE/F,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAIhE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,UAAU,CAAC,CAAC;IACpB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,iEAAgF,UAAU,CAAC,CAAC,CAAC,4CA4E/G,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}

package/dist/components/Layout/Table/Table.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { Box } from '../Box/Box';
 import { fontWeight, neutral } from '../../../constants';
-const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) => {
+const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false, divider = true }) => {
     const tableRef = useRef(null);
     /**
      * Apply column styles to the table cells.
@@ -17,7 +17,7 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) =
         const rows = tbody.querySelectorAll('tr');
         if (!rows || !rows.length)
             return;
-        rows.forEach((row) => {
+        rows.forEach((row, rowIndex) => {
             const cells = row.querySelectorAll('td');
             cells.forEach((cell, columnIndex) => {
                 var _a;
@@ -26,8 +26,11 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) =
                     Object.assign(cell.style, columnStyle);
                 }
             });
+            const showDivider = divider && rowIndex < rows.length - 1;
+            const borderStyle = { borderBottom: showDivider ? `1px solid ${neutral[100]}` : 'none' };
+            Object.assign(row.style, borderStyle);
         });
-    }, [columnConfigs, data]);
+    }, [columnConfigs, data, divider]);
     return (_jsx(Box, { sx: {
             borderTopLeftRadius: '8px',
             borderTopRightRadius: '8px',
@@ -35,6 +38,7 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) =
             overflow: 'hidden',
         }, children: _jsxs("table", { ref: tableRef, style: {
                 width: '100%',
+                borderCollapse: 'collapse',
             }, children: [_jsx("thead", { children: _jsx("tr", { children: columnConfigs.map((column, index) => (_jsx("th", { style: {
                                 backgroundColor: neutral[50],
                                 color: neutral[300],

package/dist/components/Layout/Table/Table.stories.d.ts

@@ -10,4 +10,5 @@ export declare const StyledColumns: Story;
 export declare const TableWithPlaceholder: Story;
 export declare const TableWithoutPlaceholder: Story;
 export declare const TableWithShadow: Story;
+export declare const TableWithoutDivider: Story;
 //# sourceMappingURL=Table.stories.d.ts.map

package/dist/components/Layout/Table/Table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAyB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyPnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}
+{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyPnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}

package/dist/components/Layout/Table/Table.stories.js

@@ -31,6 +31,10 @@ const meta = {
             control: { type: 'boolean' },
             description: 'Adds shadow to the table',
         },
+        divider: {
+            control: { type: 'boolean' },
+            description: 'Adds divider between rows to the table',
+        },
     },
 };
 export default meta;
@@ -314,3 +318,17 @@ export const TableWithShadow = {
         shadow: true,
     },
 };
+export const TableWithoutDivider = {
+    args: {
+        columnConfigs: [
+            { heading: 'Name', style: { width: '25%', paddingLeft: '20px', fontWeight: '600' } },
+            { heading: 'Email', style: { width: '30%', textAlign: 'left' } },
+            { heading: 'Role', style: { width: '20%', textAlign: 'center' } },
+            { heading: 'Status', style: { width: '15%', textAlign: 'center' } },
+            { heading: 'Last Login', style: { width: '10%', textAlign: 'right', paddingRight: '20px' } },
+        ],
+        data: userData,
+        ListItem: UserListItem,
+        divider: false,
+    },
+};

package/package.json

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