linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Table/{Table.stories.js → Table.stories.jsx}

@@ -18,8 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
+import React, { useState, useMemo } from "react";
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableButton, TableCellPadded, TableFooter, } from "./Table";
 import { tableSize } from ".";
 import { Checkbox } from "../Checkbox/checkbox";
@@ -84,10 +83,25 @@ var Template = function (args) {
             role: "Member",
         },
     ];
-    return (_jsxs(Table, __assign({}, args, { columns: columns, children: [_jsx(TableCaption, { children: "Example users table" }), _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row, rowIndex) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: row[col.key] }, col.key)); }) }, rowIndex)); }) })] })));
+    return (<Table {...args} columns={columns}>
+      <TableCaption>Example users table</TableCaption>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map(function (row, rowIndex) { return (<TableRow key={rowIndex} data={row}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {row[col.key]}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 export var Default = Template.bind({});
-export var TableSizes = function () { return (_jsx("div", { className: "flex flex-col space-y-2", children: Object.keys(tableSize).map(function (size) {
+export var TableSizes = function () { return (<div className="flex flex-col space-y-2">
+    {Object.keys(tableSize).map(function (size) {
         var columns = [
             { key: "name", header: "Name" },
             { key: "email", header: "Email" },
@@ -105,8 +119,23 @@ export var TableSizes = function () { return (_jsx("div", { className: "flex fle
                 role: "Member",
             },
         ];
-        return (_jsxs(Table, { size: size, columns: columns, children: [_jsx(TableCaption, { children: "Table Size: ".concat(size) }), _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row, rowIndex) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: row[col.key] }, col.key)); }) }, rowIndex)); }) })] }, size));
-    }) })); };
+        return (<Table key={size} size={size} columns={columns}>
+          <TableCaption>{"Table Size: ".concat(size)}</TableCaption>
+          <TableHeader>
+            <TableRow>
+              {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map(function (row, rowIndex) { return (<TableRow key={rowIndex} data={row}>
+                {columns.map(function (col) { return (<TableCell key={col.key}>
+                    {row[col.key]}
+                  </TableCell>); })}
+              </TableRow>); })}
+          </TableBody>
+        </Table>);
+    })}
+  </div>); };
 export var DisabledRowClickTable = function () {
     var users = [
         {
@@ -127,7 +156,20 @@ export var DisabledRowClickTable = function () {
         { key: "email", header: "Email" },
         { key: "role", header: "Role" },
     ];
-    return (_jsxs(Table, { columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: users.map(function (user) { return (_jsx(TableRow, { data: user, disableClick: true, children: columns.map(function (col) { return (_jsx(TableCell, { children: user[col.key] }, col.key)); }) }, user.id)); }) })] }));
+    return (<Table columns={columns}>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) { return (<TableRow key={user.id} data={user} disableClick>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {user[col.key]}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 export var CheckBoxInSmallTable = function () {
     var users = [
@@ -171,12 +213,33 @@ export var CheckBoxInSmallTable = function () {
         { key: "email", header: "Email" },
         { key: "role", header: "Role" },
     ];
-    return (_jsxs(Table, { columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.key === "name" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: allChecked, onCheckedChange: toggleAll, "aria-checked": allChecked, size: "sm" }), "Name"] })) : (col.header) }, col.key)); }) }) }), _jsx(TableBody, { children: users.map(function (user) {
-                    var isChecked = selected.has(user.id);
-                    return (_jsx(TableRow, { data: user, children: columns.map(function (col) { return (_jsx(TableCell, { children: col.key === "name" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: isChecked, onCheckedChange: function (c) {
-                                            return toggleOne(user.id, c);
-                                        }, size: "sm" }), user.name] })) : (user[col.key]) }, col.key)); }) }, user.id));
-                }) })] }));
+    return (<Table columns={columns}>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>
+              {col.key === "name" ? (<div className="flex items-center gap-2">
+                  <Checkbox checked={allChecked} onCheckedChange={toggleAll} aria-checked={allChecked} size="sm"/>
+                  Name
+                </div>) : (col.header)}
+            </TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) {
+            var isChecked = selected.has(user.id);
+            return (<TableRow key={user.id} data={user}>
+              {columns.map(function (col) { return (<TableCell key={col.key}>
+                  {col.key === "name" ? (<div className="flex items-center gap-2">
+                      <Checkbox checked={isChecked} onCheckedChange={function (c) {
+                            return toggleOne(user.id, c);
+                        }} size="sm"/>
+                      {user.name}
+                    </div>) : (user[col.key])}
+                </TableCell>); })}
+            </TableRow>);
+        })}
+      </TableBody>
+    </Table>);
 };
 export var CheckBoxInMediumTable = function () {
     var users = [
@@ -220,12 +283,33 @@ export var CheckBoxInMediumTable = function () {
         { key: "email", header: "Email" },
         { key: "role", header: "Role" },
     ];
-    return (_jsxs(Table, { size: "md", columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.key === "name" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: allChecked, onCheckedChange: toggleAll, "aria-checked": allChecked, size: "md" }), "Name"] })) : (col.header) }, col.key)); }) }) }), _jsx(TableBody, { children: users.map(function (user) {
-                    var isChecked = selected.has(user.id);
-                    return (_jsx(TableRow, { data: user, children: columns.map(function (col) { return (_jsx(TableCell, { children: col.key === "name" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: isChecked, onCheckedChange: function (c) {
-                                            return toggleOne(user.id, c);
-                                        }, size: "md" }), user.name] })) : (user[col.key]) }, col.key)); }) }, user.id));
-                }) })] }));
+    return (<Table size="md" columns={columns}>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>
+              {col.key === "name" ? (<div className="flex items-center gap-2">
+                  <Checkbox checked={allChecked} onCheckedChange={toggleAll} aria-checked={allChecked} size="md"/>
+                  Name
+                </div>) : (col.header)}
+            </TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) {
+            var isChecked = selected.has(user.id);
+            return (<TableRow key={user.id} data={user}>
+              {columns.map(function (col) { return (<TableCell key={col.key}>
+                  {col.key === "name" ? (<div className="flex items-center gap-2">
+                      <Checkbox checked={isChecked} onCheckedChange={function (c) {
+                            return toggleOne(user.id, c);
+                        }} size="md"/>
+                      {user.name}
+                    </div>) : (user[col.key])}
+                </TableCell>); })}
+            </TableRow>);
+        })}
+      </TableBody>
+    </Table>);
 };
 export var CheckBoxInLargeTable = function () {
     var users = [
@@ -269,12 +353,33 @@ export var CheckBoxInLargeTable = function () {
         { key: "email", header: "Email" },
         { key: "role", header: "Role" },
     ];
-    return (_jsxs(Table, { size: "lg", columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.key === "name" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: allChecked, onCheckedChange: toggleAll, "aria-checked": allChecked, size: "lg" }), "Name"] })) : (col.header) }, col.key)); }) }) }), _jsx(TableBody, { children: users.map(function (user) {
-                    var isChecked = selected.has(user.id);
-                    return (_jsx(TableRow, { data: user, children: columns.map(function (col) { return (_jsx(TableCell, { children: col.key === "name" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: isChecked, onCheckedChange: function (c) {
-                                            return toggleOne(user.id, c);
-                                        }, size: "lg" }), user.name] })) : (user[col.key]) }, col.key)); }) }, user.id));
-                }) })] }));
+    return (<Table size="lg" columns={columns}>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>
+              {col.key === "name" ? (<div className="flex items-center gap-2">
+                  <Checkbox checked={allChecked} onCheckedChange={toggleAll} aria-checked={allChecked} size="lg"/>
+                  Name
+                </div>) : (col.header)}
+            </TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) {
+            var isChecked = selected.has(user.id);
+            return (<TableRow key={user.id} data={user}>
+              {columns.map(function (col) { return (<TableCell key={col.key}>
+                  {col.key === "name" ? (<div className="flex items-center gap-2">
+                      <Checkbox checked={isChecked} onCheckedChange={function (c) {
+                            return toggleOne(user.id, c);
+                        }} size="lg"/>
+                      {user.name}
+                    </div>) : (user[col.key])}
+                </TableCell>); })}
+            </TableRow>);
+        })}
+      </TableBody>
+    </Table>);
 };
 export var SortingTable = function () {
     var users = useMemo(function () { return [
@@ -346,7 +451,29 @@ export var SortingTable = function () {
         { key: "role", header: "Role" },
         { key: "joinDate", header: "Join Date" },
     ];
-    return (_jsxs(Table, { size: "sm", columns: columns, children: [_jsx(TableCaption, { children: "Sortable table - Click on Name or Role" }), _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.key === "name" ? (_jsxs("div", { className: "flex items-center gap-2", children: ["Name", _jsx(IconButton, { "aria-label": "Toggle sort by Name", onClick: function () { return handleSort("name"); }, size: "sm", variant: "ghost", icon: "sort", color: "gray" })] })) : col.key === "role" ? (_jsxs("div", { className: "flex items-center gap-2", children: ["Role", _jsx(IconButton, { "aria-label": "Toggle sort by Role", onClick: function () { return handleSort("role"); }, size: "sm", variant: "ghost", icon: "sort", color: "gray" })] })) : (col.header) }, col.key)); }) }) }), _jsx(TableBody, { children: sorted.map(function (user) { return (_jsx(TableRow, { data: user, children: columns.map(function (col) { return (_jsx(TableCell, { children: user[col.key] }, col.key)); }) }, user.id)); }) })] }));
+    return (<Table size="sm" columns={columns}>
+      <TableCaption>Sortable table - Click on Name or Role</TableCaption>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>
+              {col.key === "name" ? (<div className="flex items-center gap-2">
+                  Name
+                  <IconButton aria-label="Toggle sort by Name" onClick={function () { return handleSort("name"); }} size="sm" variant="ghost" icon="sort" color="gray"/>
+                </div>) : col.key === "role" ? (<div className="flex items-center gap-2">
+                  Role
+                  <IconButton aria-label="Toggle sort by Role" onClick={function () { return handleSort("role"); }} size="sm" variant="ghost" icon="sort" color="gray"/>
+                </div>) : (col.header)}
+            </TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {sorted.map(function (user) { return (<TableRow key={user.id} data={user}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {user[col.key]}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 export var BadgesInTable = function () {
     var columns = [
@@ -368,7 +495,23 @@ export var BadgesInTable = function () {
             role: "Member",
         },
     ];
-    return (_jsxs(Table, { size: "sm", columns: columns, children: [_jsx(TableCaption, { children: "Tasks with Status Badges" }), _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: col.key === "status" ? (_jsx(Badge, { color: row.status === "Completed" ? "light-green" : "light-blue", size: "sm", endIcon: row.status === "Completed" ? "check" : undefined, children: row.status })) : (row[col.key]) }, col.key)); }) }, row.id)); }) })] }));
+    return (<Table size="sm" columns={columns}>
+      <TableCaption>Tasks with Status Badges</TableCaption>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map(function (row) { return (<TableRow key={row.id} data={row}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {col.key === "status" ? (<Badge color={row.status === "Completed" ? "light-green" : "light-blue"} size="sm" endIcon={row.status === "Completed" ? "check" : undefined}>
+                    {row.status}
+                  </Badge>) : (row[col.key])}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 BadgesInTable.parameters = {
     docs: {
@@ -407,7 +550,23 @@ export var DropdownInTable = function () {
             joinDate: "2023-02-10",
         },
     ];
-    return (_jsxs(Table, { size: "sm", columns: columns, children: [_jsx(TableCaption, { children: "Table with Dropdown Actions" }), _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: col.key === "actions" ? (_jsx("div", { className: "w-48", children: _jsx(Combobox, { size: "sm", placeholder: "Actions", options: ["Edit", "Share", "Delete"], isSearch: false, isMulti: false, onSelect: function (v) { return console.log("selected", v); } }) })) : (row[col.key]) }, col.key)); }) }, row.id)); }) })] }));
+    return (<Table size="sm" columns={columns}>
+      <TableCaption>Table with Dropdown Actions</TableCaption>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map(function (row) { return (<TableRow key={row.id} data={row}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {col.key === "actions" ? (<div className="w-48">
+                    <Combobox size="sm" placeholder="Actions" options={["Edit", "Share", "Delete"]} isSearch={false} isMulti={false} onSelect={function (v) { return console.log("selected", v); }}/>
+                  </div>) : (row[col.key])}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 DropdownInTable.parameters = {
     docs: {
@@ -443,12 +602,32 @@ export var ActionButtonInTable = function () {
             joinDate: "2023-03-22",
         },
     ];
-    return (_jsx("div", { className: "w-full", children: _jsxs(Table, { className: "w-full", columnMinWidth: columnMinWidth, columns: headerColumns, hasActionColumn: true, children: [_jsx(TableCaption, { children: "Table with Action Buttons" }), _jsx(TableHeader, { children: _jsx(TableRow, { data: {}, children: headerColumns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: users.map(function (user) {
-                        var userWithActions = __assign(__assign({}, user), { actions: (_jsxs(TableButton, { children: [_jsx(IconButton, { onClick: function () { return alert("Editing ".concat(user.name)); }, color: "light-green", icon: "pen", size: "sm" }), _jsx(IconButton, { onClick: function () { return alert("Deleting ".concat(user.name)); }, color: "light-red", icon: "trash", size: "sm" }), _jsx(IconButton, { onClick: function () { return alert("Downloading ".concat(user.name)); }, color: "light-blue", icon: "download", size: "sm" })] })) });
-                        return (_jsx(TableRow, { data: userWithActions, children: headerColumns.map(function (col) { return (_jsx(TableCell, { children: col.key === "actions"
-                                    ? userWithActions.actions
-                                    : userWithActions[col.key] }, col.key)); }) }, user.id));
-                    }) })] }) }));
+    return (<div className="w-full">
+      <Table className="w-full" columnMinWidth={columnMinWidth} columns={headerColumns} hasActionColumn={true}>
+        <TableCaption>Table with Action Buttons</TableCaption>
+        <TableHeader>
+          <TableRow data={{}}>
+            {headerColumns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {users.map(function (user) {
+            var userWithActions = __assign(__assign({}, user), { actions: (<TableButton>
+                  <IconButton onClick={function () { return alert("Editing ".concat(user.name)); }} color="light-green" icon="pen" size="sm"/>
+                  <IconButton onClick={function () { return alert("Deleting ".concat(user.name)); }} color="light-red" icon="trash" size="sm"/>
+                  <IconButton onClick={function () { return alert("Downloading ".concat(user.name)); }} color="light-blue" icon="download" size="sm"/>
+                </TableButton>) });
+            return (<TableRow key={user.id} data={userWithActions}>
+                {headerColumns.map(function (col) { return (<TableCell key={col.key}>
+                    {col.key === "actions"
+                        ? userWithActions.actions
+                        : userWithActions[col.key]}
+                  </TableCell>); })}
+              </TableRow>);
+        })}
+        </TableBody>
+      </Table>
+    </div>);
 };
 ActionButtonInTable.parameters = {
     docs: {
@@ -482,7 +661,24 @@ export var AvatarInTable = function () {
             joinDate: "2023-03-22",
         },
     ];
-    return (_jsxs(Table, { columns: columns, children: [_jsx(TableCaption, { children: "Table with Avatars" }), _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: col.key === "avatar" ? (_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { alt: "Avatar", src: row.image }), _jsx(AvatarFallback, { children: "AB" })] })) : (row[col.key]) }, col.key)); }) }, row.id)); }) })] }));
+    return (<Table columns={columns}>
+      <TableCaption>Table with Avatars</TableCaption>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map(function (row) { return (<TableRow key={row.id} data={row}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {col.key === "avatar" ? (<Avatar size="sm">
+                    <AvatarImage alt="Avatar" src={row.image}/>
+                    <AvatarFallback>AB</AvatarFallback>
+                  </Avatar>) : (row[col.key])}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 export var ResponsiveTable = function () {
     var columnMinWidth = 120;
@@ -528,7 +724,20 @@ export var ResponsiveTable = function () {
             data: "Some data",
         },
     ];
-    return (_jsxs(Table, { className: "w-full", columnMinWidth: columnMinWidth, columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row, rowIndex) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: row[col.key] }, col.key)); }) }, rowIndex)); }) })] }));
+    return (<Table className="w-full" columnMinWidth={columnMinWidth} columns={columns}>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map(function (row, rowIndex) { return (<TableRow key={rowIndex} data={row}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {row[col.key]}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 export var ResponsiveTableWithBadgeAndButton = function () {
     var columns = [
@@ -573,11 +782,28 @@ export var ResponsiveTableWithBadgeAndButton = function () {
             data: "Some data",
         },
     ];
-    return (_jsxs(Table, { className: "w-full", columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row, rowIndex) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: col.key === "status" ? (_jsx(Badge, { color: row.status === "Active"
-                                ? "light-green"
-                                : row.status === "Pending"
-                                    ? "light-blue"
-                                    : "light-gray", size: "sm", endIcon: row.status === "Active" ? "check" : undefined, children: row.status })) : col.key === "data" ? (_jsx(Button, { size: "sm", onClick: function () { return alert("Button clicked for ".concat(row.name)); }, children: row.data })) : (row[col.key]) }, col.key)); }) }, rowIndex)); }) })] }));
+    return (<Table className="w-full" columns={columns}>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map(function (row, rowIndex) { return (<TableRow key={rowIndex} data={row}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {col.key === "status" ? (<Badge color={row.status === "Active"
+                        ? "light-green"
+                        : row.status === "Pending"
+                            ? "light-blue"
+                            : "light-gray"} size="sm" endIcon={row.status === "Active" ? "check" : undefined}>
+                    {row.status}
+                  </Badge>) : col.key === "data" ? (<Button size="sm" onClick={function () { return alert("Button clicked for ".concat(row.name)); }}>
+                    {row.data}
+                  </Button>) : (row[col.key])}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
 };
 export var PaddedTableWithFooter = function () {
     var columnMinWidth = 150;
@@ -604,8 +830,36 @@ export var PaddedTableWithFooter = function () {
             joinDate: "2023-03-22",
         },
     ];
-    return (_jsxs(Table, { variant: "padded", columnMinWidth: columnMinWidth, columns: columns, hasActionColumn: true, children: [_jsx(TableHeader, { className: "[&_tr]:border-none", children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { className: cn("first:rounded-l-lg last:rounded-r-lg", col === null || col === void 0 ? void 0 : col.className), children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: users.map(function (user) {
-                    var userWithActions = __assign(__assign({}, user), { actions: (_jsxs(TableButton, { children: [_jsx(IconButton, { onClick: function () { return alert("Editing ".concat(user.name)); }, color: "light-green", icon: "pen", size: "sm" }), _jsx(IconButton, { onClick: function () { return alert("Deleting ".concat(user.name)); }, color: "light-red", icon: "trash", size: "sm" })] })) });
-                    return (_jsx(TableRow, { data: userWithActions, disableClick: true, className: "even:bg-white", children: columns.map(function (col) { return (_jsx(TableCellPadded, { children: userWithActions[col.key] }, col.key)); }) }, user.id));
-                }) }), _jsx(TableFooter, { children: _jsxs(TableRow, { disableClick: true, className: "[&>td]:first-of-type:border-l-0", children: [_jsx(TableCell, { colSpan: columns.length - 1, className: "px-4", children: "Total" }), _jsxs(TableCell, { className: "text-center px-9", children: [users.length, " Users"] })] }) })] }));
+    return (<Table variant="padded" columnMinWidth={columnMinWidth} columns={columns} hasActionColumn>
+      <TableHeader className="[&_tr]:border-none">
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key} className={cn("first:rounded-l-lg last:rounded-r-lg", col === null || col === void 0 ? void 0 : col.className)}>
+              {col.header}
+            </TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) {
+            var userWithActions = __assign(__assign({}, user), { actions: (<TableButton>
+                <IconButton onClick={function () { return alert("Editing ".concat(user.name)); }} color="light-green" icon="pen" size="sm"/>
+                <IconButton onClick={function () { return alert("Deleting ".concat(user.name)); }} color="light-red" icon="trash" size="sm"/>
+              </TableButton>) });
+            return (<TableRow key={user.id} data={userWithActions} disableClick className="even:bg-white">
+              {columns.map(function (col) { return (<TableCellPadded key={col.key}>
+                  {userWithActions[col.key]}
+                </TableCellPadded>); })}
+            </TableRow>);
+        })}
+      </TableBody>
+      <TableFooter>
+        <TableRow disableClick className="[&>td]:first-of-type:border-l-0">
+          <TableCell colSpan={columns.length - 1} className="px-4">
+            Total
+          </TableCell>
+          <TableCell className="text-center px-9">
+            {users.length} Users
+          </TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>);
 };

package/dist/src/components/Table/{Table.test.js → Table.test.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./Table";
 describe("Table Component", function () {
@@ -12,7 +11,21 @@ describe("Table Component", function () {
         { name: "John Doe", email: "john.doe@example.com", role: "Member" },
     ];
     it("renders table with header, body, and caption", function () {
-        render(_jsxs(Table, { columns: columns, children: [_jsx(TableCaption, { children: "Users Table" }), _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row, idx) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: row[col.key] }, col.key)); }) }, idx)); }) })] }));
+        render(<Table columns={columns}>
+        <TableCaption>Users Table</TableCaption>
+        <TableHeader>
+          <TableRow>
+            {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map(function (row, idx) { return (<TableRow key={idx} data={row}>
+              {columns.map(function (col) { return (<TableCell key={col.key}>
+                  {row[col.key]}
+                </TableCell>); })}
+            </TableRow>); })}
+        </TableBody>
+      </Table>);
         expect(screen.getByText("Users Table")).toBeInTheDocument();
         columns.forEach(function (col) {
             expect(screen.getByText(col.header)).toBeInTheDocument();
@@ -24,11 +37,30 @@ describe("Table Component", function () {
         });
     });
     it("renders table footer when provided", function () {
-        render(_jsx(Table, { columns: columns, children: _jsx(TableFooter, { children: _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, children: "Footer Content" }) }) }) }));
+        render(<Table columns={columns}>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={3}>Footer Content</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>);
         expect(screen.getByText("Footer Content")).toBeInTheDocument();
     });
     it("renders correct number of rows and cells", function () {
-        render(_jsxs(Table, { columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row, idx) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: row[col.key] }, col.key)); }) }, idx)); }) })] }));
+        render(<Table columns={columns}>
+        <TableHeader>
+          <TableRow>
+            {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map(function (row, idx) { return (<TableRow key={idx} data={row}>
+              {columns.map(function (col) { return (<TableCell key={col.key}>
+                  {row[col.key]}
+                </TableCell>); })}
+            </TableRow>); })}
+        </TableBody>
+      </Table>);
         // 1 header row + 2 data rows
         expect(screen.getAllByRole("row")).toHaveLength(3);
         // 3 header cells
@@ -37,15 +69,15 @@ describe("Table Component", function () {
         expect(screen.getAllByRole("cell")).toHaveLength(6);
     });
     it("renders TableHead with children", function () {
-        render(_jsx(TableHead, { children: "Header" }));
+        render(<TableHead>Header</TableHead>);
         expect(screen.getByText("Header")).toBeInTheDocument();
     });
     it("renders TableCell with children", function () {
-        render(_jsx(TableCell, { children: "Cell Content" }));
+        render(<TableCell>Cell Content</TableCell>);
         expect(screen.getByText("Cell Content")).toBeInTheDocument();
     });
     it("renders TableCaption with children", function () {
-        render(_jsx(TableCaption, { children: "Caption Content" }));
+        render(<TableCaption>Caption Content</TableCaption>);
         expect(screen.getByText("Caption Content")).toBeInTheDocument();
     });
 });

package/dist/src/components/Tabs/{Tabs.stories.js → Tabs.stories.jsx}

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 export default {
     title: "Components/Tabs",
@@ -6,11 +6,18 @@ export default {
     tags: ["autodocs"],
 };
 var Template = function (args) {
-    return _jsx(_Fragment, { children: args.children });
+    return <>{args.children}</>;
 };
 export var _Tabs = Template.bind({});
 _Tabs.args = {
-    children: (_jsxs(Tabs, { defaultValue: "account", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "account", children: "Account" }), _jsx(TabsTrigger, { value: "password", children: "Password" })] }), _jsx(TabsContent, { value: "account", children: "Account Settings" }), _jsx(TabsContent, { value: "password", children: "Change Password" })] })),
+    children: (<Tabs defaultValue="account">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">Account Settings</TabsContent>
+      <TabsContent value="password">Change Password</TabsContent>
+    </Tabs>),
 };
 _Tabs.argTypes = {
     children: {

package/dist/src/components/Tabs/tabs.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/src/components/Tabs/tabs.jsx

@@ -0,0 +1,32 @@
+"use client";
+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 TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/utils";
+function Tabs(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-6", className)} {...props}/>);
+}
+function TabsList(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<TabsPrimitive.List data-slot="tabs-list" className={cn("bg-blue-100 !p-1 rounded-lg", className)} {...props}/>);
+}
+function TabsTrigger(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<TabsPrimitive.Trigger data-slot="tabs-trigger" className={cn("!py-2 !px-3 transition-all !rounded-sm !text-sm !font-normal !leading-5 w-1/2 max-sm:w-full", "data-[state=active]:bg-blue-600 data-[state=active]:text-blue-50", "data-[state=inactive]:bg-blue-100 data-[state=inactive]:text-blue-600", className)} {...props}/>);
+}
+function TabsContent(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props}/>);
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -1,2 +1,2 @@
 import { TimePickerProps } from "./types";
-export declare function TimePicker({ className, variant, size, color, shape, time, onChange, placeholder, disabled, startIcon, endIcon, shadow, triggerClassName, ...props }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimePicker({ className, variant, size, color, shape, time, onChange, placeholder, disabled, startIcon, endIcon, shadow, triggerClassName, ...props }: TimePickerProps): import("react").JSX.Element;