@ceed/ads 0.0.7 → 0.0.8

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

@@ -1,8 +1,60 @@
 import React from "react";
 import { TableProps } from "@mui/joy";
-import { MotionProps } from "framer-motion";
 declare const Table: {
-    (props: TableProps & MotionProps): React.JSX.Element;
+    (props: TableProps): React.JSX.Element;
     displayName: string;
 };
 export { Table };
+interface HeadCell {
+    label: string;
+    numeric?: boolean;
+    width?: string;
+}
+declare function TableHead<D extends Record<string, unknown>>(props: {
+    headCells: HeadCell[];
+    /**
+     * Show Checkbox to select all rows
+     */
+    showCheckbox?: boolean;
+    onCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Inject custom component
+     */
+    slots?: {
+        checkbox?: React.ElementType;
+    };
+    slotProps?: {
+        checkbox?: Partial<{
+            checked: boolean;
+            indeterminate: boolean;
+            [key: string]: any;
+        }>;
+    };
+}): React.JSX.Element;
+declare namespace TableHead {
+    var displayName: string;
+}
+export { TableHead };
+interface TableBodyProps<D extends Record<string, unknown>> {
+    rows: D[];
+    cellOrder: (keyof D)[];
+    rowOptions?: Partial<Record<keyof D, {
+        numeric?: boolean;
+    }>>;
+    showCheckbox?: boolean;
+    onCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>, rowIndex: number) => void;
+    slots?: {
+        checkbox?: React.ElementType;
+    };
+    slotProps?: {
+        checkbox?: Partial<{
+            checked: boolean;
+            [key: string]: any;
+        }>;
+    };
+}
+declare function TableBody<D extends Record<string, unknown>>(props: TableBodyProps<D>): React.JSX.Element;
+declare namespace TableBody {
+    var displayName: string;
+}
+export { TableBody };

package/dist/components/Table/Table.js

@@ -9,12 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+};
 import React from "react";
 import { Table as JoyTable } from "@mui/joy";
-import { motion } from "framer-motion";
-var MotionTable = motion(JoyTable);
+import Checkbox from "../Checkbox";
 var Table = function (props) {
     // prop destruction
+    var children = props.children, inheritProps = __rest(props, ["children"]);
     // lib hooks
     // state, ref, querystring hooks
     // form hooks
@@ -22,7 +33,55 @@ var Table = function (props) {
     // calculated values
     // effects
     // handlers
-    return React.createElement(MotionTable, __assign({}, props));
+    return React.createElement(JoyTable, __assign({}, inheritProps), children);
 };
 export { Table };
 Table.displayName = "Table";
+function TableHead(props) {
+    // prop destruction
+    var headCells = props.headCells, showCheckbox = props.showCheckbox, onCheckboxChange = props.onCheckboxChange, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox : _c, _d = props.slotProps, _e = _d === void 0 ? {} : _d, _f = _e.checkbox, checkboxProps = _f === void 0 ? {} : _f;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement("thead", null,
+        React.createElement("tr", null,
+            showCheckbox && (React.createElement("th", { style: {
+                    width: "40px",
+                    textAlign: "center",
+                } },
+                React.createElement(RenderCheckbox, __assign({ onChange: onCheckboxChange }, checkboxProps)))),
+            headCells.map(function (headCell) { return (React.createElement("th", { key: headCell.label, style: {
+                    width: headCell.width,
+                    textAlign: headCell.numeric ? "right" : "left",
+                } }, headCell.label)); }))));
+}
+TableHead.displayName = "TableHead";
+export { TableHead };
+function TableBody(props) {
+    // prop destruction
+    var rows = props.rows, cellOrder = props.cellOrder, rowOptions = props.rowOptions, showCheckbox = props.showCheckbox, onCheckboxChange = props.onCheckboxChange, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox : _c, _d = props.slotProps, _e = _d === void 0 ? {} : _d, _f = _e.checkbox, checkboxProps = _f === void 0 ? {} : _f;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement("tbody", null, rows.map(function (row, rowIndex) { return (React.createElement("tr", { key: rowIndex },
+        showCheckbox && (React.createElement("td", { style: {
+                textAlign: "center",
+            } },
+            React.createElement(RenderCheckbox, __assign({ onChange: function (event) { return onCheckboxChange === null || onCheckboxChange === void 0 ? void 0 : onCheckboxChange(event, rowIndex); } }, checkboxProps)))),
+        cellOrder.map(function (cellKey) {
+            var _a;
+            return (React.createElement("td", { key: cellKey, style: {
+                    textAlign: ((_a = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions[cellKey]) === null || _a === void 0 ? void 0 : _a.numeric) ? "right" : "left",
+                } }, row[cellKey]));
+        }))); })));
+}
+TableBody.displayName = "TableBody";
+export { TableBody };

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 declare function ThemeProvider(props: {
     children?: React.ReactNode;
 }): React.JSX.Element;

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,7 +1,27 @@
-import React from 'react';
-import { CssBaseline, CssVarsProvider, extendTheme } from '@mui/joy';
+import React from "react";
+import { CssBaseline, CssVarsProvider, checkboxClasses, extendTheme, } from "@mui/joy";
 var defaultTheme = extendTheme({
-    cssVarPrefix: 'ceed',
+    cssVarPrefix: "ceed",
+    components: {
+        JoyTable: {
+            defaultProps: {
+                size: "sm",
+                borderAxis: "bothBetween",
+            },
+            styleOverrides: {
+                root: function (_a) {
+                    var _b;
+                    var theme = _a.theme;
+                    return (_b = {},
+                        // "--TableRow-hoverBackground": theme.palette.primary.outlinedHoverBg,
+                        _b["& .".concat(checkboxClasses.root)] = {
+                            verticalAlign: "middle",
+                        },
+                        _b);
+                },
+            },
+        },
+    },
 });
 function ThemeProvider(props) {
     return (React.createElement(React.Fragment, null,
@@ -10,4 +30,4 @@ function ThemeProvider(props) {
             props.children)));
 }
 export { ThemeProvider };
-ThemeProvider.displayName = 'ThemeProvider';
+ThemeProvider.displayName = "ThemeProvider";

package/dist/components/index.d.ts

@@ -19,7 +19,7 @@ export { Select, Option } from "./Select";
 export { Sheet } from "./Sheet";
 export { Stack } from "./Stack";
 export { Switch } from "./Switch";
-export { Table } from "./Table";
+export { Table, TableHead, TableBody } from "./Table";
 export { Textarea } from "./Textarea";
 export { ThemeProvider } from "./ThemeProvider";
 export { Tooltip } from "./Tooltip";

package/dist/components/index.js

@@ -19,7 +19,7 @@ export { Select, Option } from "./Select";
 export { Sheet } from "./Sheet";
 export { Stack } from "./Stack";
 export { Switch } from "./Switch";
-export { Table } from "./Table";
+export { Table, TableHead, TableBody } from "./Table";
 export { Textarea } from "./Textarea";
 export { ThemeProvider } from "./ThemeProvider";
 export { Tooltip } from "./Tooltip";

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, Chip, chipClasses, } from "@mui/joy";
-export { Box, Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, Modal, ModalClose, ModalDialog, ModalOverflow, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+export { Box, Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, Modal, ModalClose, ModalDialog, ModalOverflow, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";

package/dist/index.js

@@ -3,4 +3,4 @@ export {
 boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, 
 // Pure JoyUI
 Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, Chip, chipClasses, } from "@mui/joy";
-export { Box, Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, Modal, ModalClose, ModalDialog, ModalOverflow, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+export { Box, Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, Modal, ModalClose, ModalDialog, ModalOverflow, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";

package/framer/index.js

@@ -24372,6 +24372,9 @@ var Checkbox3 = (props) => {
 };
 Checkbox3.displayName = "Checkbox";
 
+// src/components/Checkbox/index.ts
+var Checkbox_default2 = Checkbox3;
+
 // src/components/DialogActions/DialogActions.tsx
 import { motion as motion4 } from "framer-motion";
 var MotionDialogActions = motion4(DialogActions_default);
@@ -24549,16 +24552,87 @@ var Switch3 = (props) => {
 Switch3.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import { motion as motion22 } from "framer-motion";
-var MotionTable = motion22(Table_default);
 var Table3 = (props) => {
-  return /* @__PURE__ */ jsx2(MotionTable, { ...props });
+  const { children, ...inheritProps } = props;
+  return /* @__PURE__ */ jsx2(Table_default, { ...inheritProps, children });
 };
 Table3.displayName = "Table";
+function TableHead(props) {
+  const {
+    headCells,
+    showCheckbox,
+    onCheckboxChange,
+    slots: { checkbox: RenderCheckbox = Checkbox_default2 } = {},
+    slotProps: { checkbox: checkboxProps = {} } = {}
+  } = props;
+  return /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+    showCheckbox && /* @__PURE__ */ jsx2(
+      "th",
+      {
+        style: {
+          width: "40px",
+          textAlign: "center"
+        },
+        children: /* @__PURE__ */ jsx2(RenderCheckbox, { onChange: onCheckboxChange, ...checkboxProps })
+      }
+    ),
+    headCells.map((headCell) => /* @__PURE__ */ jsx2(
+      "th",
+      {
+        style: {
+          width: headCell.width,
+          textAlign: headCell.numeric ? "right" : "left"
+        },
+        children: headCell.label
+      },
+      headCell.label
+    ))
+  ] }) });
+}
+TableHead.displayName = "TableHead";
+function TableBody(props) {
+  const {
+    rows,
+    cellOrder,
+    rowOptions,
+    showCheckbox,
+    onCheckboxChange,
+    slots: { checkbox: RenderCheckbox = Checkbox_default2 } = {},
+    slotProps: { checkbox: checkboxProps = {} } = {}
+  } = props;
+  return /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs2("tr", { children: [
+    showCheckbox && /* @__PURE__ */ jsx2(
+      "td",
+      {
+        style: {
+          textAlign: "center"
+        },
+        children: /* @__PURE__ */ jsx2(
+          RenderCheckbox,
+          {
+            onChange: (event) => onCheckboxChange?.(event, rowIndex),
+            ...checkboxProps
+          }
+        )
+      }
+    ),
+    cellOrder.map((cellKey) => /* @__PURE__ */ jsx2(
+      "td",
+      {
+        style: {
+          textAlign: rowOptions?.[cellKey]?.numeric ? "right" : "left"
+        },
+        children: row[cellKey]
+      },
+      cellKey
+    ))
+  ] }, rowIndex)) });
+}
+TableBody.displayName = "TableBody";
 
 // src/components/Textarea/Textarea.tsx
-import { motion as motion23 } from "framer-motion";
-var MotionTextarea = motion23(Textarea_default);
+import { motion as motion22 } from "framer-motion";
+var MotionTextarea = motion22(Textarea_default);
 var Textarea3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionTextarea, { ...props });
 };
@@ -24566,7 +24640,23 @@ Textarea3.displayName = "Textarea";
 
 // src/components/ThemeProvider/ThemeProvider.tsx
 var defaultTheme4 = extendTheme({
-  cssVarPrefix: "ceed"
+  cssVarPrefix: "ceed",
+  components: {
+    JoyTable: {
+      defaultProps: {
+        size: "sm",
+        borderAxis: "bothBetween"
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          // "--TableRow-hoverBackground": theme.palette.primary.outlinedHoverBg,
+          [`& .${checkboxClasses_default.root}`]: {
+            verticalAlign: "middle"
+          }
+        })
+      }
+    }
+  }
 });
 function ThemeProvider4(props) {
   return /* @__PURE__ */ jsx2(Fragment12, { children: /* @__PURE__ */ jsxs2(CssVarsProvider, { theme: defaultTheme4, children: [
@@ -24577,16 +24667,16 @@ function ThemeProvider4(props) {
 ThemeProvider4.displayName = "ThemeProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import { motion as motion24 } from "framer-motion";
-var MotionTooltip = motion24(Tooltip_default);
+import { motion as motion23 } from "framer-motion";
+var MotionTooltip = motion23(Tooltip_default);
 var Tooltip3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionTooltip, { ...props });
 };
 Tooltip3.displayName = "Tooltip";
 
 // src/components/Typography/Typography.tsx
-import { motion as motion25 } from "framer-motion";
-var MotionTypography = motion25(Typography_default);
+import { motion as motion24 } from "framer-motion";
+var MotionTypography = motion24(Typography_default);
 var Typography3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionTypography, { ...props });
 };
@@ -24622,6 +24712,8 @@ export {
   Stack2 as Stack,
   Switch3 as Switch,
   Table3 as Table,
+  TableBody,
+  TableHead,
   Textarea3 as Textarea,
   ThemeProvider4 as ThemeProvider,
   Tooltip3 as Tooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "type": "module",
   "description": "UI tool for Ecube Labs front-end developers",
@@ -42,14 +42,10 @@
     "@storybook/react-webpack5": "^7.6.13",
     "@storybook/test": "^7.6.13",
     "@storybook/theming": "^7.6.13",
-    "@types/tmp": "^0",
     "esbuild": "^0.20.1",
-    "postcss": "^8.4.35",
-    "postcss-modules": "^6.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.6.13",
-    "tmp": "^0.2.1",
     "typescript": "^5.3.3"
   },
   "repository": {