linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Switch/Switch.stories.jsx

@@ -0,0 +1,66 @@
+import { size, Switch, variant } from "./switch";
+export default {
+    title: "Components/Switch",
+    component: Switch,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return <Switch {...args}></Switch>; };
+export var _Switch = Template.bind({});
+_Switch.args = {
+    size: "md",
+    variant: "default",
+    defaultChecked: false,
+    onCheckedChange: function (checked) {
+        return console.log("Switch is ".concat(checked ? "on" : "off"));
+    },
+};
+_Switch.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Switch variant",
+        table: {
+            defaultValue: { summary: "default" },
+            type: { summary: "string" },
+        },
+    },
+    size: {
+        control: { type: "select" },
+        options: Object.keys(size),
+        description: "Switch size",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "string" },
+        },
+    },
+    defaultChecked: {
+        control: { type: "boolean" },
+        description: "Initial checked state for uncontrolled switch",
+        table: {
+            defaultValue: { summary: "false" },
+            type: { summary: "boolean" },
+        },
+    },
+    checked: {
+        control: { type: "boolean" },
+        description: "Controlled checked state (e.g., checked={field.value} for form libraries)",
+        table: {
+            type: { summary: "boolean" },
+        },
+    },
+    onCheckedChange: {
+        action: "checked changed",
+        description: "Callback function when switch state changes",
+        table: {
+            type: { summary: "(checked: boolean) => void" },
+        },
+    },
+    disabled: {
+        control: { type: "boolean" },
+        description: "Disables the switch",
+        table: {
+            defaultValue: { summary: "false" },
+            type: { summary: "boolean" },
+        },
+    },
+};

package/dist/src/components/Switch/switch.jsx

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+export var size = {
+    sm: "h-4 w-6",
+    md: "w-12 h-6", // default
+    lg: "h-6 w-14",
+};
+export var variant = {
+    default: "data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
+    primary: "data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
+    success: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-input focus-visible:ring-green-500",
+    danger: "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-input focus-visible:ring-red-500",
+};
+var switchVariants = cva("peer inline-flex shrink-0 items-center !rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        size: size,
+        variant: variant,
+    },
+    defaultVariants: {
+        size: "md",
+        variant: "default",
+    },
+});
+var thumbVariants = cva("pointer-events-none block !rounded-full ring-0 transition-transform", {
+    variants: {
+        size: {
+            sm: "size-3",
+            md: "size-4", // default
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+// Define translate distance for each size
+var thumbTranslateVariants = {
+    sm: "data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-2",
+    md: "data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-7",
+    lg: "data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-8",
+};
+function Switch(_a) {
+    var className = _a.className, size = _a.size, variant = _a.variant, props = __rest(_a, ["className", "size", "variant"]);
+    return (<SwitchPrimitive.Root data-slot="switch" className={cn(switchVariants({ size: size, variant: variant }), className)} {...props}>
+      <SwitchPrimitive.Thumb data-slot="switch-thumb" className={cn(thumbVariants({ size: size }), size ? thumbTranslateVariants[size] : "", "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground")}/>
+    </SwitchPrimitive.Root>);
+}
+export { Switch };

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { tableSize } from "./index";
+type TableSize = keyof typeof tableSize;
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    size?: TableSize;
+    columnMinWidth?: number;
+    columns?: Array<{
+        key: string;
+        header: string;
+    }>;
+    hasActionColumn?: boolean;
+} & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & {
+    collapsibleContent?: React.ReactNode;
+    showTrigger?: boolean;
+    data?: Record<string, unknown>;
+} & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    size?: TableSize;
+} & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/src/components/Table/Table.js

@@ -0,0 +1,186 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { tableSize, tableBodySize, tableFooterSize, collapsibleIconSize, } from "./index";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../ui/collapsible";
+import LUIcon from "../Icons/LUIcon";
+var TableSizeContext = React.createContext("sm");
+var TableSectionContext = React.createContext("body");
+var TableResponsiveContext = React.createContext({
+    visibleCount: 0,
+    totalColumns: 0,
+    columnMinWidth: 160,
+    isResponsive: false,
+    columns: [],
+    hasActionColumn: false,
+});
+var Table = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.columnMinWidth, columnMinWidth = _c === void 0 ? 160 : _c, _d = _a.columns, columns = _d === void 0 ? [] : _d, _e = _a.hasActionColumn, hasActionColumn = _e === void 0 ? false : _e, props = __rest(_a, ["className", "size", "columnMinWidth", "columns", "hasActionColumn"]);
+    var totalColumns = columns.length + (hasActionColumn ? 1 : 0);
+    var isResponsive = totalColumns > 0;
+    // Calculate initial visible count based on responsive settings
+    var getInitialVisibleCount = function () {
+        if (!isResponsive || totalColumns === 0) {
+            return totalColumns;
+        }
+        // For SSR compatibility, assume a default width if window is not available
+        var windowWidth = typeof window !== "undefined" ? window.innerWidth : 1200;
+        var calculated = Math.floor(windowWidth / columnMinWidth);
+        // Ensure at least 1 data column is visible (account for trigger column)
+        return Math.max(1, Math.min(totalColumns, calculated - 1));
+    };
+    var _f = React.useState(getInitialVisibleCount), visibleCount = _f[0], setVisibleCount = _f[1];
+    React.useEffect(function () {
+        if (!isResponsive || totalColumns === 0) {
+            setVisibleCount(totalColumns);
+            return;
+        }
+        var calculate = function () {
+            var count = Math.floor(window.innerWidth / columnMinWidth);
+            // Ensure at least 1 data column is visible (plus the trigger column)
+            setVisibleCount(Math.max(1, Math.min(totalColumns, count - 1)));
+        };
+        calculate();
+        window.addEventListener("resize", calculate);
+        return function () { return window.removeEventListener("resize", calculate); };
+    }, [isResponsive, totalColumns, columnMinWidth]);
+    return (_jsx(TableSizeContext.Provider, { value: size, children: _jsx(TableResponsiveContext.Provider, { value: {
+                visibleCount: visibleCount,
+                totalColumns: totalColumns,
+                columnMinWidth: columnMinWidth,
+                isResponsive: isResponsive,
+                columns: columns,
+                hasActionColumn: hasActionColumn,
+            }, children: _jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom", className) }, props)) }) }) }));
+});
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var headerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
+    return (_jsx(TableSectionContext.Provider, { value: "header", children: _jsx("thead", __assign({ ref: ref, className: cn("[&_tr]:border-b bg-gray-100 overflow-hidden", className), "data-table-size": headerSize }, props)) }));
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var contextSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
+    return (_jsx(TableSectionContext.Provider, { value: "body", children: _jsx("tbody", __assign({ ref: ref, className: cn(tableBodySize[contextSize], "[&_tr:last-child]:border-0 text-black", className), "data-table-body-size": contextSize }, props)) }));
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var footerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
+    return (_jsx(TableSectionContext.Provider, { value: "footer", children: _jsx("tfoot", __assign({ ref: ref, className: cn(tableFooterSize[footerSize], "border-t bg-gray-100 font-medium [&>tr]:last:border-b-0", className), "data-table-footer-size": footerSize }, props)) }));
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, collapsibleContent = _a.collapsibleContent, showTrigger = _a.showTrigger, data = _a.data, props = __rest(_a, ["className", "children", "collapsibleContent", "showTrigger", "data"]);
+    var bodySize = React.useContext(TableSizeContext);
+    var _b = useTableResponsive(), visibleCount = _b.visibleCount, isResponsive = _b.isResponsive, columns = _b.columns, hasActionColumn = _b.hasActionColumn;
+    var section = React.useContext(TableSectionContext);
+    var childrenArray = React.useMemo(function () { return React.Children.toArray(children); }, [children]);
+    var hasDefinedColumns = Array.isArray(columns) && columns.length > 0;
+    var hasHiddenColumns = hasDefinedColumns && visibleCount < columns.length;
+    var slicedChildren = React.useMemo(function () {
+        if (!isResponsive || !hasHiddenColumns)
+            return childrenArray;
+        if (hasActionColumn) {
+            // Show first (visibleCount - 1) columns + the last column (actions)
+            var firstColumns = childrenArray.slice(0, visibleCount - 1);
+            var lastColumn = childrenArray[childrenArray.length - 1];
+            return __spreadArray(__spreadArray([], firstColumns, true), [lastColumn], false);
+        }
+        return childrenArray.slice(0, visibleCount);
+    }, [
+        childrenArray,
+        isResponsive,
+        hasHiddenColumns,
+        visibleCount,
+        hasActionColumn,
+    ]);
+    // Auto-generate collapsible content for responsive tables
+    var autoCollapsibleContent = React.useMemo(function () {
+        if (!isResponsive || !data || !columns || columns.length === 0) {
+            return null;
+        }
+        var hiddenColumns;
+        if (hasActionColumn) {
+            // Hide columns from (visibleCount - 1) to (columns.length - 2), excluding the last action column
+            hiddenColumns = columns.slice(visibleCount - 1, columns.length - 1);
+        }
+        else {
+            hiddenColumns = columns.slice(visibleCount);
+        }
+        if (hiddenColumns.length === 0)
+            return null;
+        return (_jsx(Table, { className: "w-full", children: _jsx(TableBody, { children: hiddenColumns.map(function (col) { return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium w-1/3 border-r border-gray-200", children: col.header }), _jsx(TableCell, { className: "w-2/3", children: String(data[col.key]) })] }, col.key)); }) }) }));
+    }, [isResponsive, data, columns, visibleCount, hasActionColumn]);
+    var finalCollapsibleContent = collapsibleContent || autoCollapsibleContent;
+    var finalShowTrigger = showTrigger !== null && showTrigger !== void 0 ? showTrigger : autoCollapsibleContent !== null;
+    // State to track if collapsible is open
+    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    if (section === "header") {
+        return (_jsxs("tr", __assign({ ref: ref, className: cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200", className) }, props, { children: [isResponsive && hasHiddenColumns && (_jsx("th", { className: "p-2 align-middle w-[52px] bg-gray-100" })), slicedChildren] })));
+    }
+    if (finalCollapsibleContent) {
+        return (_jsx(Collapsible, { asChild: true, onOpenChange: setIsOpen, children: _jsxs(_Fragment, { children: [_jsxs("tr", __assign({ ref: ref, className: cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200 cursor-pointer transition-colors hover:bg-gray-50 data-[state=selected]:bg-gray-50 odd:bg-white even:bg-gray-50 group", className) }, props, { children: [isResponsive && (_jsx("td", { className: "p-2 align-middle w-[52px]", children: finalShowTrigger && (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx(LUIcon, { icon: isOpen ? "angle-up" : "angle-right", size: collapsibleIconSize[bodySize], color: "blue" }) })) })), slicedChildren] })), _jsx(CollapsibleContent, { asChild: true, children: _jsx("tr", { className: "bg-gray-50", children: _jsx("td", { colSpan: visibleCount + (isResponsive ? 1 : 0), className: "p-0", children: finalCollapsibleContent }) }) })] }) }));
+    }
+    return (_jsx("tr", __assign({ ref: ref, className: cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200 cursor-pointer transition-colors hover:bg-gray-50 data-[state=selected]:bg-gray-50 odd:bg-white even:bg-gray-50 group", className) }, props, { children: slicedChildren })));
+});
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, size = _a.size, children = _a.children, props = __rest(_a, ["className", "size", "children"]);
+    var contextSize = React.useContext(TableSizeContext);
+    var headSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "sm";
+    return (_jsx("th", __assign({ ref: ref, className: cn(tableSize[headSize], "py-0 px-3 text-left align-middle font-semibold text-gray-950 bg-gray-100 first:rounded-tl-lg last:rounded-tr-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className) }, props, { children: _jsx("div", { className: "flex items-center gap-2", children: children }) })));
+});
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("td", __assign({ ref: ref, className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] first-of-type:border-l-2 first-of-type:border-l-transparent group-hover:first-of-type:border-l-blue-600 group-data-[state=selected]:first-of-type:border-l-blue-600", className) }, props)));
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("caption", __assign({ ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className) }, props)));
+});
+TableCaption.displayName = "TableCaption";
+var useTableResponsive = function () {
+    var context = React.useContext(TableResponsiveContext);
+    return context;
+};
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/src/components/Table/Table.jsx

@@ -0,0 +1,221 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { tableSize, tableBodySize, tableFooterSize, collapsibleIconSize, } from "./index";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../ui/collapsible";
+import LUIcon from "../Icons/LUIcon";
+var TableSizeContext = React.createContext("sm");
+var TableSectionContext = React.createContext("body");
+var TableResponsiveContext = React.createContext({
+    visibleCount: 0,
+    totalColumns: 0,
+    columnMinWidth: 160,
+    isResponsive: false,
+    columns: [],
+    hasActionColumn: false,
+});
+var Table = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.columnMinWidth, columnMinWidth = _c === void 0 ? 160 : _c, _d = _a.columns, columns = _d === void 0 ? [] : _d, _e = _a.hasActionColumn, hasActionColumn = _e === void 0 ? false : _e, props = __rest(_a, ["className", "size", "columnMinWidth", "columns", "hasActionColumn"]);
+    var totalColumns = columns.length + (hasActionColumn ? 1 : 0);
+    var isResponsive = totalColumns > 0;
+    // Calculate initial visible count based on responsive settings
+    var getInitialVisibleCount = function () {
+        if (!isResponsive || totalColumns === 0) {
+            return totalColumns;
+        }
+        // For SSR compatibility, assume a default width if window is not available
+        var windowWidth = typeof window !== "undefined" ? window.innerWidth : 1200;
+        var calculated = Math.floor(windowWidth / columnMinWidth);
+        // Ensure at least 1 data column is visible (account for trigger column)
+        return Math.max(1, Math.min(totalColumns, calculated - 1));
+    };
+    var _f = React.useState(getInitialVisibleCount), visibleCount = _f[0], setVisibleCount = _f[1];
+    React.useEffect(function () {
+        if (!isResponsive || totalColumns === 0) {
+            setVisibleCount(totalColumns);
+            return;
+        }
+        var calculate = function () {
+            var count = Math.floor(window.innerWidth / columnMinWidth);
+            // Ensure at least 1 data column is visible (plus the trigger column)
+            setVisibleCount(Math.max(1, Math.min(totalColumns, count - 1)));
+        };
+        calculate();
+        window.addEventListener("resize", calculate);
+        return function () { return window.removeEventListener("resize", calculate); };
+    }, [isResponsive, totalColumns, columnMinWidth]);
+    return (<TableSizeContext.Provider value={size}>
+        <TableResponsiveContext.Provider value={{
+            visibleCount: visibleCount,
+            totalColumns: totalColumns,
+            columnMinWidth: columnMinWidth,
+            isResponsive: isResponsive,
+            columns: columns,
+            hasActionColumn: hasActionColumn,
+        }}>
+          <div className="relative w-full overflow-auto">
+            <table ref={ref} className={cn("w-full caption-bottom", className)} {...props}/>
+          </div>
+        </TableResponsiveContext.Provider>
+      </TableSizeContext.Provider>);
+});
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var headerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
+    return (<TableSectionContext.Provider value="header">
+      <thead ref={ref} className={cn("[&_tr]:border-b bg-gray-100 overflow-hidden", className)} data-table-size={headerSize} {...props}/>
+    </TableSectionContext.Provider>);
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var contextSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
+    return (<TableSectionContext.Provider value="body">
+      <tbody ref={ref} className={cn(tableBodySize[contextSize], "[&_tr:last-child]:border-0 text-black", className)} data-table-body-size={contextSize} {...props}/>
+    </TableSectionContext.Provider>);
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var footerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
+    return (<TableSectionContext.Provider value="footer">
+      <tfoot ref={ref} className={cn(tableFooterSize[footerSize], "border-t bg-gray-100 font-medium [&>tr]:last:border-b-0", className)} data-table-footer-size={footerSize} {...props}/>
+    </TableSectionContext.Provider>);
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, collapsibleContent = _a.collapsibleContent, showTrigger = _a.showTrigger, data = _a.data, props = __rest(_a, ["className", "children", "collapsibleContent", "showTrigger", "data"]);
+    var bodySize = React.useContext(TableSizeContext);
+    var _b = useTableResponsive(), visibleCount = _b.visibleCount, isResponsive = _b.isResponsive, columns = _b.columns, hasActionColumn = _b.hasActionColumn;
+    var section = React.useContext(TableSectionContext);
+    var childrenArray = React.useMemo(function () { return React.Children.toArray(children); }, [children]);
+    var hasDefinedColumns = Array.isArray(columns) && columns.length > 0;
+    var hasHiddenColumns = hasDefinedColumns && visibleCount < columns.length;
+    var slicedChildren = React.useMemo(function () {
+        if (!isResponsive || !hasHiddenColumns)
+            return childrenArray;
+        if (hasActionColumn) {
+            // Show first (visibleCount - 1) columns + the last column (actions)
+            var firstColumns = childrenArray.slice(0, visibleCount - 1);
+            var lastColumn = childrenArray[childrenArray.length - 1];
+            return __spreadArray(__spreadArray([], firstColumns, true), [lastColumn], false);
+        }
+        return childrenArray.slice(0, visibleCount);
+    }, [
+        childrenArray,
+        isResponsive,
+        hasHiddenColumns,
+        visibleCount,
+        hasActionColumn,
+    ]);
+    // Auto-generate collapsible content for responsive tables
+    var autoCollapsibleContent = React.useMemo(function () {
+        if (!isResponsive || !data || !columns || columns.length === 0) {
+            return null;
+        }
+        var hiddenColumns;
+        if (hasActionColumn) {
+            // Hide columns from (visibleCount - 1) to (columns.length - 2), excluding the last action column
+            hiddenColumns = columns.slice(visibleCount - 1, columns.length - 1);
+        }
+        else {
+            hiddenColumns = columns.slice(visibleCount);
+        }
+        if (hiddenColumns.length === 0)
+            return null;
+        return (<Table className="w-full">
+          <TableBody>
+            {hiddenColumns.map(function (col) { return (<TableRow key={col.key}>
+                <TableCell className="font-medium w-1/3 border-r border-gray-200">
+                  {col.header}
+                </TableCell>
+                <TableCell className="w-2/3">{String(data[col.key])}</TableCell>
+              </TableRow>); })}
+          </TableBody>
+        </Table>);
+    }, [isResponsive, data, columns, visibleCount, hasActionColumn]);
+    var finalCollapsibleContent = collapsibleContent || autoCollapsibleContent;
+    var finalShowTrigger = showTrigger !== null && showTrigger !== void 0 ? showTrigger : autoCollapsibleContent !== null;
+    // State to track if collapsible is open
+    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    if (section === "header") {
+        return (<tr ref={ref} className={cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200", className)} {...props}>
+          {isResponsive && hasHiddenColumns && (<th className="p-2 align-middle w-[52px] bg-gray-100"></th>)}
+          {slicedChildren}
+        </tr>);
+    }
+    if (finalCollapsibleContent) {
+        return (<Collapsible asChild onOpenChange={setIsOpen}>
+          <>
+            <tr ref={ref} className={cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200 cursor-pointer transition-colors hover:bg-gray-50 data-[state=selected]:bg-gray-50 odd:bg-white even:bg-gray-50 group", className)} {...props}>
+              {isResponsive && (<td className="p-2 align-middle w-[52px]">
+                  {finalShowTrigger && (<CollapsibleTrigger asChild>
+                      <LUIcon icon={isOpen ? "angle-up" : "angle-right"} size={collapsibleIconSize[bodySize]} color="blue"/>
+                    </CollapsibleTrigger>)}
+                </td>)}
+              {slicedChildren}
+            </tr>
+
+            <CollapsibleContent asChild>
+              <tr className="bg-gray-50">
+                <td colSpan={visibleCount + (isResponsive ? 1 : 0)} className="p-0">
+                  {finalCollapsibleContent}
+                </td>
+              </tr>
+            </CollapsibleContent>
+          </>
+        </Collapsible>);
+    }
+    return (<tr ref={ref} className={cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200 cursor-pointer transition-colors hover:bg-gray-50 data-[state=selected]:bg-gray-50 odd:bg-white even:bg-gray-50 group", className)} {...props}>
+        {slicedChildren}
+      </tr>);
+});
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, size = _a.size, children = _a.children, props = __rest(_a, ["className", "size", "children"]);
+    var contextSize = React.useContext(TableSizeContext);
+    var headSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "sm";
+    return (<th ref={ref} className={cn(tableSize[headSize], "py-0 px-3 text-left align-middle font-semibold text-gray-950 bg-gray-100 first:rounded-tl-lg last:rounded-tr-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)} {...props}>
+        <div className="flex items-center gap-2">{children}</div>
+      </th>);
+});
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<td ref={ref} className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] first-of-type:border-l-2 first-of-type:border-l-transparent group-hover:first-of-type:border-l-blue-600 group-data-[state=selected]:first-of-type:border-l-blue-600", className)} {...props}/>);
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props}/>);
+});
+TableCaption.displayName = "TableCaption";
+var useTableResponsive = function () {
+    var context = React.useContext(TableResponsiveContext);
+    return context;
+};
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

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

@@ -0,0 +1,51 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { Table } from "./Table";
+declare const _default: Meta<typeof Table>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, React.HTMLAttributes<HTMLTableElement> & {
+    size?: "sm" | "md" | "lg";
+    columnMinWidth?: number;
+    columns?: Array<{
+        key: string;
+        header: string;
+    }>;
+    hasActionColumn?: boolean;
+} & React.RefAttributes<HTMLTableElement>>;
+export declare const TableSizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBoxInSmallTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBoxInMediumTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBoxInLargeTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const SortingTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const BadgesInTable: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const DropdownInTable: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ActionButtonInTable: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AvatarInTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const ResponsiveTable: () => import("react/jsx-runtime").JSX.Element;