@taiv/ui 1.7.0 → 1.9.0

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberInput } from './NumberInput';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/TextInputs/NumberInput',
+    component: NumberInput,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the number input size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Number input label',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Error message',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        required: {
+            control: { type: 'boolean' },
+            description: 'Required field',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Full width of container',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        min: {
+            control: { type: 'number' },
+            description: 'Minimum value',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        max: {
+            control: { type: 'number' },
+            description: 'Maximum value',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        step: {
+            control: { type: 'number' },
+            description: 'Step value for increment/decrement',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '1' },
+            },
+        },
+        precision: {
+            control: { type: 'number' },
+            description: 'Number of decimal places',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(value: number | string) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Age',
+        placeholder: 'Enter your age',
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        step: 1,
+        min: 0,
+        max: 120,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<NumberInput
+  label="Age"
+  placeholder="Enter your age"
+  min={0}
+  max={120}
+  step={1}
+  value={age}
+  onChange={setAge}
+/>`,
+            },
+        },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Basic Number Input" }), _jsx(NumberInput, { label: "With Placeholder", placeholder: "Enter a value" }), _jsx(NumberInput, { label: "With Description", description: "Enter a value between 0 and 100", min: 0, max: 100 })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { size: "sm", label: "Small Number Input", placeholder: "Small value" }), _jsx(NumberInput, { size: "md", label: "Medium Number Input (Default)", placeholder: "Medium value" }), _jsx(NumberInput, { size: "lg", label: "Large Number Input", placeholder: "Large value" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<NumberInput size="sm" label="Small Number Input" placeholder="Small value" />
+<NumberInput size="lg" label="Large Number Input" placeholder="Large value" />`,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Normal Number Input" }), _jsx(NumberInput, { label: "Disabled Number Input", disabled: true }), _jsx(NumberInput, { label: "Required Number Input", required: true }), _jsx(NumberInput, { label: "Number Input with Description", description: "Please enter a numeric value" }), _jsx(NumberInput, { label: "Number Input with Error", error: "Value is required" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const AdditionalFunctionality = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Step of 1", placeholder: "Integer values", step: 1 }), _jsx(NumberInput, { label: "Step of 0.5", placeholder: "Decimal values", step: 0.5, precision: 1 }), _jsx(NumberInput, { label: "With Min/Max", placeholder: "Between 0 and 10", min: 0, max: 10, step: 1 }), _jsx(NumberInput, { label: "Custom Width", placeholder: "Custom width", width: "300rem" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<NumberInput
+  label="Step of 0.5"
+  placeholder="Decimal values"
+  step={0.5}
+  precision={1}
+  value={amount}
+  onChange={setAmount}
+/>
+
+<NumberInput
+  label="With Min/Max"
+  placeholder="Between 0 and 10"
+  min={0}
+  max={10}
+  step={1}
+  value={count}
+  onChange={setCount}
+/>`,
+            },
+        },
+    },
+};
+export const CustomStyling = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Custom Styled Number Input", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(NumberInput, { label: "Another Custom Style", styles: {
+                    input: {
+                        backgroundColor: '#f8f9fa',
+                        borderColor: '#4CAF50',
+                        '&:focus': {
+                            borderColor: '#4CAF50',
+                            boxShadow: '0 0 0 2px rgba(76, 175, 80, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,kBAAkB,IAAI,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASjD,KAAK,kBAAkB,GAAG,yBAAyB,GAAG;IACpD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,2DAA6F,kBAAkB,4CAyCrI,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,kBAAkB,IAAI,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASjD,KAAK,kBAAkB,GAAG,yBAAyB,GAAG;IACpD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,2DAA6F,kBAAkB,4CAsDrI,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PasswordInput as MantinePasswordInput } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 // Workaround for Icon sizing since we dont have a Provider setup
@@ -21,6 +21,12 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
             height: `${selectedSize.height}rem`,
             fontSize: selectedSize.fontSize,
             padding: '0 1rem',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,
@@ -30,6 +36,7 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
         error: {
             ...fontBase,
             fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200],
         },
         innerInput: {
             ...fontBase,
@@ -37,6 +44,12 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
             height: `${selectedSize.height}rem`,
             fontSize: selectedSize.fontSize,
             padding: '0 1rem',
+            '&[data-invalid]': {
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         visibilityToggle: {
             color: neutral[200],

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CA4B7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextInput } from '../TextInput/TextInput';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props }) => {
@@ -15,6 +15,13 @@ const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props })
             borderRadius: '8px',
             height: `${selectedSize.height}rem`,
             transition: 'all 200ms ease-in-out',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         ...styles,
     };

package/dist/components/Inputs/TextInputs/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CA4B3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/TextArea/TextArea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Textarea as MantineTextarea } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
@@ -16,6 +16,13 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
             resize: 'vertical',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,
@@ -25,6 +32,7 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
         error: {
             ...fontBase,
             fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200],
         },
         ...styles,
     };

package/dist/components/Inputs/TextInputs/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiC,cAAc,IAAI,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CA2B7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiC,cAAc,IAAI,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/TextInput/TextInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextInput as MantineTextInput } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
@@ -15,6 +15,13 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,
@@ -24,6 +31,7 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
         error: {
             ...fontBase,
             fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200]
         },
         ...styles,
     };

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

@@ -0,0 +1,15 @@
+import React, { CSSProperties } from 'react';
+interface ColumnConfig {
+    heading?: string;
+    style?: CSSProperties;
+}
+interface TableProps<T> {
+    columnConfigs: ColumnConfig[];
+    data: T[];
+    ListItem: React.ComponentType<{
+        data: T;
+    }>;
+}
+declare const Table: <T>({ columnConfigs, data, ListItem }: 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

@@ -0,0 +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;CAC5C;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,mCAAmC,UAAU,CAAC,CAAC,CAAC,4CAsElE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,48 @@
+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 }) => {
+    const tableRef = useRef(null);
+    /**
+     * Apply column styles to the table cells.
+     */
+    useEffect(() => {
+        const table = tableRef.current;
+        if (!table)
+            return;
+        const tbody = table.querySelector('tbody');
+        if (!tbody)
+            return;
+        const rows = tbody.querySelectorAll('tr');
+        if (!rows || !rows.length)
+            return;
+        rows.forEach((row) => {
+            const cells = row.querySelectorAll('td');
+            cells.forEach((cell, columnIndex) => {
+                var _a;
+                const columnStyle = (_a = columnConfigs[columnIndex]) === null || _a === void 0 ? void 0 : _a.style;
+                if (columnStyle) {
+                    Object.assign(cell.style, columnStyle);
+                }
+            });
+        });
+    }, [columnConfigs, data]);
+    return (_jsx(Box, { sx: {
+            borderTopLeftRadius: '8px',
+            borderTopRightRadius: '8px',
+            boxShadow: '0px 2px 6px -3px #AFAFAF',
+            overflow: 'hidden',
+        }, children: _jsxs("table", { ref: tableRef, style: {
+                width: '100%',
+            }, children: [_jsx("thead", { children: _jsx("tr", { children: columnConfigs.map((column, index) => (_jsx("th", { style: {
+                                backgroundColor: neutral[50],
+                                color: neutral[300],
+                                fontSize: '14px',
+                                fontWeight: fontWeight.bold,
+                                paddingBottom: '9px',
+                                paddingTop: '9px',
+                                ...column.style,
+                            }, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: data.map((item) => (_jsx(ListItem, { data: item }, String(item).slice(0, 10)))) })] }) }));
+};
+export { Table };

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from './Table';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BasicTable: Story;
+export declare const TableWithCustomComponents: Story;
+export declare const TableWithProgressBars: Story;
+export declare const StyledColumns: Story;
+//# sourceMappingURL=Table.stories.d.ts.map

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

@@ -0,0 +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;AAKhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAiB5B,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"}