@ceed/ads 0.0.14-0 → 0.0.14

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,23 @@
+import React, { ComponentProps } from "react";
+import { Table, TableBody, TableHead } from "../Table";
+declare function DataTable<T extends Record<string, unknown>>(props: {
+    data: T[];
+    showCheckbox?: boolean;
+    slots?: {
+        checkbox?: React.ElementType;
+        toolbar?: React.ElementType;
+    };
+    slotProps?: {
+        checkbox?: Partial<{
+            checked: boolean;
+            [key: string]: any;
+        }>;
+        toolbar?: Partial<{
+            [key: string]: any;
+        }>;
+    };
+} & ComponentProps<typeof Table> & Pick<ComponentProps<typeof TableHead>, "headCells"> & Pick<ComponentProps<typeof TableBody>, "cellOrder">): React.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+export { DataTable };

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,93 @@
+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;
+};
+import React, { useMemo } from "react";
+import Sheet from "../Sheet";
+import { Table, TableHead } from "../Table";
+import Checkbox from "../Checkbox";
+function useDataTableRenderer(_a) {
+    var data = _a.data, cellOrder = _a.cellOrder, headCells = _a.headCells;
+    return {
+        renderCellOrder: useMemo(function () { return cellOrder || Object.keys(data[0] || {}); }, [data, cellOrder]),
+        renderHeadCells: useMemo(function () {
+            return headCells ||
+                // fallback
+                Object.keys(data[0] || {}).map(function (key) { return ({
+                    label: key,
+                }); });
+        }, [data, headCells]),
+    };
+}
+function DataTable(props) {
+    // prop destruction
+    var data = props.data, showCheckbox = props.showCheckbox, headCells = props.headCells, cellOrder = props.cellOrder, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox : _c, Toolbar = _b.toolbar, _d = props.slotProps, _e = _d === void 0 ? {} : _d, _f = _e.checkbox, checkboxProps = _f === void 0 ? {} : _f, toolbarProps = _e.toolbar, innerProps = __rest(props, ["data", "showCheckbox", "headCells", "cellOrder", "slots", "slotProps"]);
+    // lib hooks
+    var _g = useDataTableRenderer({
+        data: data,
+        cellOrder: cellOrder,
+        headCells: headCells,
+    }), renderCellOrder = _g.renderCellOrder, renderHeadCells = _g.renderHeadCells;
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(Sheet, { variant: "outlined", sx: {
+            overflow: "auto",
+            width: "100%",
+            boxShadow: "sm",
+            borderRadius: "sm",
+        } },
+        Toolbar && React.createElement(Toolbar, __assign({}, (toolbarProps || {}))),
+        React.createElement(Table, __assign({ sx: [
+                showCheckbox
+                    ? {
+                        "& tr > *:first-of-type": {
+                            position: "sticky",
+                            left: 0,
+                            boxShadow: "1px 0 var(--TableCell-borderColor)",
+                            bgcolor: "background.surface",
+                        },
+                    }
+                    : {},
+                {
+                    "--TableCell-headBackground": "transparent",
+                    "--TableCell-selectedBackground": function (theme) {
+                        return theme.vars.palette.success.softBg;
+                    },
+                },
+            ] }, innerProps),
+            React.createElement(TableHead, { showCheckbox: showCheckbox, headCells: renderHeadCells || [] }),
+            React.createElement("tbody", null, data.map(function (row, rowIndex) { return (React.createElement("tr", { key: rowIndex },
+                showCheckbox && (React.createElement("td", { style: {
+                        textAlign: "center",
+                    } },
+                    React.createElement(RenderCheckbox
+                    // onChange={(event: any) =>
+                    //   onCheckboxChange?.(event, rowIndex)
+                    // }
+                    , __assign({}, checkboxProps)))),
+                renderCellOrder.map(function (cellKey) { return (React.createElement("td", { key: cellKey }, row[cellKey])); }))); })))));
+}
+export { DataTable };
+DataTable.displayName = "DataTable";

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+import { DataTable } from "./DataTable";
+export * from "./DataTable";
+export default DataTable;

package/dist/components/DataTable/index.js

@@ -0,0 +1,3 @@
+import { DataTable } from "./DataTable";
+export * from "./DataTable";
+export default DataTable;

package/dist/components/DialogActions/DialogActions.d.ts

@@ -6,5 +6,5 @@ declare const DialogActions: import("framer-motion").CustomDomComponent<{
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").DialogActionsSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "sx" | "buttonFlex" | "orientation" | keyof import("@mui/joy").DialogActionsSlotsAndSlotProps>>;
+}, "children" | "sx" | "orientation" | "buttonFlex" | keyof import("@mui/joy").DialogActionsSlotsAndSlotProps>>;
 export { DialogActions };

package/dist/components/InsetDrawer/InsetDrawer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { DrawerProps } from "@mui/joy";
+import { MotionProps } from "framer-motion";
+declare const InsetDrawer: {
+    (props: DrawerProps & MotionProps): React.JSX.Element;
+    displayName: string;
+};
+export { InsetDrawer };

package/dist/components/{FilterDrawer/FilterDrawer.js → InsetDrawer/InsetDrawer.js}

@@ -21,18 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import { Drawer as JoyDrawer, } from "@mui/joy";
+import { Drawer as JoyDrawer } from "@mui/joy";
 import { motion } from "framer-motion";
-import Sheet from "../Sheet";
-import DialogTitle from "../DialogTitle";
-import { ModalClose } from "../Modal";
-import Divider from "../Divider";
-import DialogContent from "../DialogContent";
 var MotionDrawer = motion(JoyDrawer);
-var FilterDrawer = function (props) {
+var InsetDrawer = function (props) {
     var _a;
     // prop destruction
-    var children = props.children, actions = props.actions, title = props.title, innerProps = __rest(props, ["children", "actions", "title"]);
+    var children = props.children, innerProps = __rest(props, ["children"]);
     // lib hooks
     // state, ref, querystring hooks
     // form hooks
@@ -44,22 +39,7 @@ var FilterDrawer = function (props) {
                     bgcolor: "transparent",
                     p: { md: 3, sm: 0 },
                     boxShadow: "none",
-                } }) }) }),
-        React.createElement(Sheet, { sx: {
-                borderRadius: "md",
-                p: 2,
-                display: "flex",
-                flexDirection: "column",
-                gap: 2,
-                height: "100%",
-                overflow: "auto",
-            } },
-            React.createElement(DialogTitle, null, title),
-            React.createElement(ModalClose, null),
-            React.createElement(Divider, { sx: { mt: "auto" } }),
-            React.createElement(DialogContent, null, children),
-            actions && React.createElement(Divider, { sx: { mt: "auto" } }),
-            actions)));
+                } }) }) }), children));
 };
-export { FilterDrawer };
-FilterDrawer.displayName = "FilterDrawer";
+export { InsetDrawer };
+InsetDrawer.displayName = "InsetDrawer";

package/dist/components/InsetDrawer/index.d.ts

@@ -0,0 +1,3 @@
+import { InsetDrawer } from "./InsetDrawer";
+export * from "./InsetDrawer";
+export default InsetDrawer;

package/dist/components/InsetDrawer/index.js

@@ -0,0 +1,3 @@
+import { InsetDrawer } from "./InsetDrawer";
+export * from "./InsetDrawer";
+export default InsetDrawer;

package/dist/components/Modal/Modal.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-declare const Modal: import("framer-motion").CustomDomComponent<Pick<import("@mui/base").ModalOwnProps, "children" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "open"> & {
+declare const Modal: import("framer-motion").CustomDomComponent<Pick<import("@mui/base").ModalOwnProps, "children" | "container" | "open" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted"> & {
     onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown" | "closeClick") => void) | undefined;
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").ModalSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "container" | "sx" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "open" | "onClose" | keyof import("@mui/joy").ModalSlotsAndSlotProps>>;
+}, "children" | "container" | "sx" | "open" | "onClose" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | keyof import("@mui/joy").ModalSlotsAndSlotProps>>;
 export { Modal };
 declare const ModalDialog: import("framer-motion").CustomDomComponent<{
     children?: React.ReactNode;
@@ -19,7 +19,7 @@ declare const ModalDialog: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").ModalDialogPropsVariantOverrides> | undefined;
 } & import("@mui/joy").ModalDialogSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "layout" | "color" | "maxWidth" | "minWidth" | "sx" | "size" | "variant" | "orientation" | "invertedColors" | keyof import("@mui/joy").ModalDialogSlotsAndSlotProps>>;
+}, "children" | "layout" | "color" | "maxWidth" | "minWidth" | "sx" | "size" | "variant" | "invertedColors" | "orientation" | keyof import("@mui/joy").ModalDialogSlotsAndSlotProps>>;
 export { ModalDialog };
 declare const ModalClose: import("framer-motion").CustomDomComponent<{
     color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").ModalClosePropsColorOverrides> | undefined;
@@ -36,3 +36,11 @@ declare const ModalOverflow: import("framer-motion").CustomDomComponent<{
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "sx" | keyof import("@mui/joy").ModalOverflowSlotsAndSlotProps>>;
 export { ModalOverflow };
+declare function ModalFrame(props: {
+    title: React.ReactNode;
+    children: React.ReactNode;
+} & React.ComponentProps<typeof ModalDialog>): React.JSX.Element;
+declare namespace ModalFrame {
+    var displayName: string;
+}
+export { ModalFrame };

package/dist/components/Modal/Modal.js

@@ -1,5 +1,30 @@
+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;
+};
+import React from "react";
 import { Modal as JoyModal, ModalDialog as JoyModalDialog, ModalClose as JoyModalClose, ModalOverflow as JoyModalOverflow, } from "@mui/joy";
 import { motion } from "framer-motion";
+import DialogTitle from "../DialogTitle";
+import DialogContent from "../DialogContent";
 var MotionModal = motion(JoyModal);
 var Modal = MotionModal;
 export { Modal };
@@ -16,3 +41,20 @@ var MotionModalOverflow = motion(JoyModalOverflow);
 var ModalOverflow = MotionModalOverflow;
 export { ModalOverflow };
 ModalOverflow.displayName = "ModalOverflow";
+function ModalFrame(props) {
+    // prop destruction
+    var title = props.title, children = props.children, innerProps = __rest(props, ["title", "children"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(ModalDialog, __assign({}, innerProps),
+        React.createElement(ModalClose, null),
+        React.createElement(DialogTitle, null, title),
+        React.createElement(DialogContent, null, children)));
+}
+export { ModalFrame };
+ModalFrame.displayName = "ModalFrame";

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

@@ -9,6 +9,8 @@ interface HeadCell {
     label: string;
     numeric?: boolean;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
 }
 declare function TableHead<D extends Record<string, unknown>>(props: {
     headCells: HeadCell[];

package/dist/components/Table/Table.js

@@ -56,6 +56,8 @@ function TableHead(props) {
                 React.createElement(RenderCheckbox, __assign({ onChange: onCheckboxChange }, checkboxProps)))),
             headCells.map(function (headCell) { return (React.createElement("th", { key: headCell.label, style: {
                     width: headCell.width,
+                    minWidth: headCell.minWidth,
+                    maxWidth: headCell.maxWidth,
                     textAlign: headCell.numeric ? "right" : "left",
                 } }, headCell.label)); }))));
 }

package/dist/components/index.d.ts

@@ -2,11 +2,12 @@ export { Box } from "./Box";
 export { Button } from "./Button";
 export { Checkbox } from "./Checkbox";
 export { Container } from "./Container";
+export { DataTable } from "./DataTable";
 export { DialogActions } from "./DialogActions";
 export { DialogContent } from "./DialogContent";
 export { DialogTitle } from "./DialogTitle";
 export { Divider } from "./Divider";
-export { FilterDrawer } from "./FilterDrawer";
+export { InsetDrawer } from "./InsetDrawer";
 export { Dropdown } from "./Dropdown";
 export { FormControl } from "./FormControl";
 export { FormHelperText } from "./FormHelperText";
@@ -15,7 +16,7 @@ export { Grid } from "./Grid";
 export { IconButton } from "./IconButton";
 export { Input } from "./Input";
 export { Menu, MenuButton, MenuItem } from "./Menu";
-export { Modal, ModalClose, ModalDialog, ModalOverflow } from "./Modal";
+export { Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame } from "./Modal";
 export { Radio, RadioGroup } from "./Radio";
 export { Select, Option } from "./Select";
 export { Sheet } from "./Sheet";

package/dist/components/index.js

@@ -2,11 +2,12 @@ export { Box } from "./Box";
 export { Button } from "./Button";
 export { Checkbox } from "./Checkbox";
 export { Container } from "./Container";
+export { DataTable } from "./DataTable";
 export { DialogActions } from "./DialogActions";
 export { DialogContent } from "./DialogContent";
 export { DialogTitle } from "./DialogTitle";
 export { Divider } from "./Divider";
-export { FilterDrawer } from "./FilterDrawer";
+export { InsetDrawer } from "./InsetDrawer";
 export { Dropdown } from "./Dropdown";
 export { FormControl } from "./FormControl";
 export { FormHelperText } from "./FormHelperText";
@@ -15,7 +16,7 @@ export { Grid } from "./Grid";
 export { IconButton } from "./IconButton";
 export { Input } from "./Input";
 export { Menu, MenuButton, MenuItem } from "./Menu";
-export { Modal, ModalClose, ModalDialog, ModalOverflow } from "./Modal";
+export { Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame } from "./Modal";
 export { Radio, RadioGroup } from "./Radio";
 export { Select, Option } from "./Select";
 export { Sheet } from "./Sheet";

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, tabsClasses, tabListClasses, tabPanelClasses, Accordion, accordionClasses, AccordionDetails, accordionDetailsClasses, AccordionGroup, accordionGroupClasses, AccordionSummary, accordionSummaryClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, Breadcrumbs, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
-export { Box, Button, Checkbox, Container, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, FilterDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+export { Box, Button, Checkbox, Container, DataTable, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, 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, tabsClasses, tabListClasses, tabPanelClasses, 
 // Pure JoyUI
 Accordion, accordionClasses, AccordionDetails, accordionDetailsClasses, AccordionGroup, accordionGroupClasses, AccordionSummary, accordionSummaryClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, Breadcrumbs, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
-export { Box, Button, Checkbox, Container, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, FilterDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+export { Box, Button, Checkbox, Container, DataTable, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";

package/framer/index.js

@@ -31835,15 +31835,207 @@ var Container = forwardRef75(function Container2(props, ref) {
 });
 Container.displayName = "Container";
 
-// src/components/DialogActions/DialogActions.tsx
+// src/components/DataTable/DataTable.tsx
+import { useMemo as useMemo32 } from "react";
+
+// src/components/Sheet/Sheet.tsx
 import { motion as motion4 } from "framer-motion";
-var MotionDialogActions = motion4(DialogActions_default);
+var MotionSheet = motion4(Sheet_default);
+var Sheet3 = MotionSheet;
+Sheet3.displayName = "Sheet";
+
+// src/components/Sheet/index.ts
+var Sheet_default2 = Sheet3;
+
+// src/components/Table/Table.tsx
+var Table3 = (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,
+          minWidth: headCell.minWidth,
+          maxWidth: headCell.maxWidth,
+          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/DataTable/DataTable.tsx
+function useDataTableRenderer({
+  data,
+  cellOrder,
+  headCells
+}) {
+  return {
+    renderCellOrder: useMemo32(
+      () => cellOrder || Object.keys(data[0] || {}),
+      [data, cellOrder]
+    ),
+    renderHeadCells: useMemo32(
+      () => headCells || // fallback
+      Object.keys(data[0] || {}).map((key) => ({
+        label: key
+      })),
+      [data, headCells]
+    )
+  };
+}
+function DataTable(props) {
+  const {
+    data,
+    showCheckbox,
+    headCells,
+    cellOrder,
+    slots: { checkbox: RenderCheckbox = Checkbox_default2, toolbar: Toolbar } = {},
+    slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps } = {},
+    ...innerProps
+  } = props;
+  const { renderCellOrder, renderHeadCells } = useDataTableRenderer({
+    data,
+    cellOrder,
+    headCells
+  });
+  return /* @__PURE__ */ jsxs2(
+    Sheet_default2,
+    {
+      variant: "outlined",
+      sx: {
+        overflow: "auto",
+        width: "100%",
+        boxShadow: "sm",
+        borderRadius: "sm"
+      },
+      children: [
+        Toolbar && /* @__PURE__ */ jsx2(Toolbar, { ...toolbarProps || {} }),
+        /* @__PURE__ */ jsxs2(
+          Table3,
+          {
+            sx: [
+              showCheckbox ? {
+                "& tr > *:first-of-type": {
+                  position: "sticky",
+                  left: 0,
+                  boxShadow: "1px 0 var(--TableCell-borderColor)",
+                  bgcolor: "background.surface"
+                }
+              } : {},
+              {
+                "--TableCell-headBackground": "transparent",
+                "--TableCell-selectedBackground": (theme) => theme.vars.palette.success.softBg
+              }
+            ],
+            ...innerProps,
+            children: [
+              /* @__PURE__ */ jsx2(
+                TableHead,
+                {
+                  showCheckbox,
+                  headCells: renderHeadCells || []
+                }
+              ),
+              /* @__PURE__ */ jsx2("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs2("tr", { children: [
+                showCheckbox && /* @__PURE__ */ jsx2(
+                  "td",
+                  {
+                    style: {
+                      textAlign: "center"
+                    },
+                    children: /* @__PURE__ */ jsx2(
+                      RenderCheckbox,
+                      {
+                        ...checkboxProps
+                      }
+                    )
+                  }
+                ),
+                renderCellOrder.map((cellKey) => /* @__PURE__ */ jsx2("td", { children: row[cellKey] }, cellKey))
+              ] }, rowIndex)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+DataTable.displayName = "DataTable";
+
+// src/components/DialogActions/DialogActions.tsx
+import { motion as motion5 } from "framer-motion";
+var MotionDialogActions = motion5(DialogActions_default);
 var DialogActions3 = MotionDialogActions;
 DialogActions3.displayName = "DialogActions";
 
 // src/components/DialogContent/DialogContent.tsx
-import { motion as motion5 } from "framer-motion";
-var MotionDialogContent = motion5(DialogContent_default);
+import { motion as motion6 } from "framer-motion";
+var MotionDialogContent = motion6(DialogContent_default);
 var DialogContent3 = MotionDialogContent;
 DialogContent3.displayName = "DialogContent";
 
@@ -31851,8 +32043,8 @@ DialogContent3.displayName = "DialogContent";
 var DialogContent_default2 = DialogContent3;
 
 // src/components/DialogTitle/DialogTitle.tsx
-import { motion as motion6 } from "framer-motion";
-var MotionDialogTitle = motion6(DialogTitle_default);
+import { motion as motion7 } from "framer-motion";
+var MotionDialogTitle = motion7(DialogTitle_default);
 var DialogTitle3 = MotionDialogTitle;
 DialogTitle3.displayName = "DialogTitle";
 
@@ -31860,47 +32052,18 @@ DialogTitle3.displayName = "DialogTitle";
 var DialogTitle_default2 = DialogTitle3;
 
 // src/components/Divider/Divider.tsx
-import { motion as motion7 } from "framer-motion";
-var MotionDivider = motion7(Divider_default);
+import { motion as motion8 } from "framer-motion";
+var MotionDivider = motion8(Divider_default);
 var Divider3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionDivider, { ...props });
 };
 Divider3.displayName = "Divider";
 
-// src/components/Divider/index.ts
-var Divider_default2 = Divider3;
-
-// src/components/FilterDrawer/FilterDrawer.tsx
-import { motion as motion10 } from "framer-motion";
-
-// src/components/Sheet/Sheet.tsx
-import { motion as motion8 } from "framer-motion";
-var MotionSheet = motion8(Sheet_default);
-var Sheet3 = MotionSheet;
-Sheet3.displayName = "Sheet";
-
-// src/components/Sheet/index.ts
-var Sheet_default2 = Sheet3;
-
-// src/components/Modal/Modal.tsx
+// src/components/InsetDrawer/InsetDrawer.tsx
 import { motion as motion9 } from "framer-motion";
-var MotionModal = motion9(Modal_default);
-var Modal3 = MotionModal;
-Modal3.displayName = "Modal";
-var MotionModalDialog = motion9(ModalDialog_default);
-var ModalDialog3 = MotionModalDialog;
-ModalDialog3.displayName = "ModalDialog";
-var MotionModalClose = motion9(ModalClose_default);
-var ModalClose3 = MotionModalClose;
-ModalClose3.displayName = "ModalClose";
-var MotionModalOverflow = motion9(ModalOverflow_default);
-var ModalOverflow3 = MotionModalOverflow;
-ModalOverflow3.displayName = "ModalOverflow";
-
-// src/components/FilterDrawer/FilterDrawer.tsx
-var MotionDrawer = motion10(Drawer_default);
-var FilterDrawer = (props) => {
-  const { children, actions, title, ...innerProps } = props;
+var MotionDrawer = motion9(Drawer_default);
+var InsetDrawer = (props) => {
+  const { children, ...innerProps } = props;
   return /* @__PURE__ */ jsx2(
     MotionDrawer,
     {
@@ -31916,97 +32079,100 @@ var FilterDrawer = (props) => {
           }
         }
       },
-      children: /* @__PURE__ */ jsxs2(
-        Sheet_default2,
-        {
-          sx: {
-            borderRadius: "md",
-            p: 2,
-            display: "flex",
-            flexDirection: "column",
-            gap: 2,
-            height: "100%",
-            overflow: "auto"
-          },
-          children: [
-            /* @__PURE__ */ jsx2(DialogTitle_default2, { children: title }),
-            /* @__PURE__ */ jsx2(ModalClose3, {}),
-            /* @__PURE__ */ jsx2(Divider_default2, { sx: { mt: "auto" } }),
-            /* @__PURE__ */ jsx2(DialogContent_default2, { children }),
-            actions && /* @__PURE__ */ jsx2(Divider_default2, { sx: { mt: "auto" } }),
-            actions
-          ]
-        }
-      )
+      children
     }
   );
 };
-FilterDrawer.displayName = "FilterDrawer";
+InsetDrawer.displayName = "InsetDrawer";
 
 // src/components/Dropdown/Dropdown.tsx
-import { motion as motion11 } from "framer-motion";
-var MotionDropdown = motion11(Dropdown);
+import { motion as motion10 } from "framer-motion";
+var MotionDropdown = motion10(Dropdown);
 var Dropdown2 = MotionDropdown;
 Dropdown2.displayName = "Dropdown";
 
 // src/components/FormControl/FormControl.tsx
-import { motion as motion12 } from "framer-motion";
-var MotionFormControl = motion12(FormControl_default);
+import { motion as motion11 } from "framer-motion";
+var MotionFormControl = motion11(FormControl_default);
 var FormControl3 = MotionFormControl;
 FormControl3.displayName = "FormControl";
 
 // src/components/FormHelperText/FormHelperText.tsx
-import { motion as motion13 } from "framer-motion";
-var MotionFormHelperText = motion13(FormHelperText_default);
+import { motion as motion12 } from "framer-motion";
+var MotionFormHelperText = motion12(FormHelperText_default);
 var FormHelperText3 = MotionFormHelperText;
 FormHelperText3.displayName = "FormHelperText";
 
 // src/components/FormLabel/FormLabel.tsx
-import { motion as motion14 } from "framer-motion";
-var MotionFormLabel = motion14(FormLabel_default);
+import { motion as motion13 } from "framer-motion";
+var MotionFormLabel = motion13(FormLabel_default);
 var FormLabel3 = MotionFormLabel;
 FormLabel3.displayName = "FormLabel";
 
 // src/components/Grid/Grid.tsx
-import { motion as motion15 } from "framer-motion";
-var MotionGrid = motion15(Grid_default);
+import { motion as motion14 } from "framer-motion";
+var MotionGrid = motion14(Grid_default);
 var Grid2 = MotionGrid;
 Grid2.displayName = "Grid";
 
 // src/components/IconButton/IconButton.tsx
-import { motion as motion16 } from "framer-motion";
-var MotionIconButton = motion16(IconButton_default);
+import { motion as motion15 } from "framer-motion";
+var MotionIconButton = motion15(IconButton_default);
 var IconButton3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionIconButton, { ...props });
 };
 IconButton3.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
-import { motion as motion17 } from "framer-motion";
-var MotionInput = motion17(Input_default);
+import { motion as motion16 } from "framer-motion";
+var MotionInput = motion16(Input_default);
 var Input3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionInput, { ...props });
 };
 Input3.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-import { motion as motion18 } from "framer-motion";
-var MotionMenu = motion18(Menu_default);
+import { motion as motion17 } from "framer-motion";
+var MotionMenu = motion17(Menu_default);
 var Menu3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionMenu, { ...props });
 };
 Menu3.displayName = "Menu";
-var MotionMenuButton = motion18(MenuButton_default);
+var MotionMenuButton = motion17(MenuButton_default);
 var MenuButton3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionMenuButton, { ...props });
 };
 MenuButton3.displayName = "MenuButton";
-var MotionMenuItem = motion18(MenuItem_default);
+var MotionMenuItem = motion17(MenuItem_default);
 var MenuItem3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionMenuItem, { ...props });
 };
 MenuItem3.displayName = "MenuItem";
 
+// src/components/Modal/Modal.tsx
+import { motion as motion18 } from "framer-motion";
+var MotionModal = motion18(Modal_default);
+var Modal3 = MotionModal;
+Modal3.displayName = "Modal";
+var MotionModalDialog = motion18(ModalDialog_default);
+var ModalDialog3 = MotionModalDialog;
+ModalDialog3.displayName = "ModalDialog";
+var MotionModalClose = motion18(ModalClose_default);
+var ModalClose3 = MotionModalClose;
+ModalClose3.displayName = "ModalClose";
+var MotionModalOverflow = motion18(ModalOverflow_default);
+var ModalOverflow3 = MotionModalOverflow;
+ModalOverflow3.displayName = "ModalOverflow";
+function ModalFrame(props) {
+  const { title, children, ...innerProps } = props;
+  return /* @__PURE__ */ jsxs2(ModalDialog3, { ...innerProps, children: [
+    /* @__PURE__ */ jsx2(ModalClose3, {}),
+    /* @__PURE__ */ jsx2(DialogTitle_default2, { children: title }),
+    /* @__PURE__ */ jsx2(DialogContent_default2, { children })
+  ] });
+}
+ModalFrame.displayName = "ModalFrame";
+
 // src/components/Radio/Radio.tsx
 import { motion as motion19 } from "framer-motion";
 var MotionRadio = motion19(Radio_default);
@@ -32072,85 +32238,6 @@ var Switch3 = (props) => {
 };
 Switch3.displayName = "Switch";
 
-// src/components/Table/Table.tsx
-var Table3 = (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/Tabs/Tabs.tsx
 import { motion as motion23 } from "framer-motion";
 var MotionTabs = motion23(Tabs_default);
@@ -32246,19 +32333,20 @@ export {
   Chip_default as Chip,
   CircularProgress_default as CircularProgress,
   Container,
+  DataTable,
   DialogActions3 as DialogActions,
   DialogContent3 as DialogContent,
   DialogTitle3 as DialogTitle,
   Divider3 as Divider,
   Drawer_default as Drawer,
   Dropdown2 as Dropdown,
-  FilterDrawer,
   FormControl3 as FormControl,
   FormHelperText3 as FormHelperText,
   FormLabel3 as FormLabel,
   Grid2 as Grid,
   IconButton3 as IconButton,
   Input3 as Input,
+  InsetDrawer,
   LinearProgress_default as LinearProgress,
   Link_default as Link,
   List_default as List,
@@ -32274,6 +32362,7 @@ export {
   Modal3 as Modal,
   ModalClose3 as ModalClose,
   ModalDialog3 as ModalDialog,
+  ModalFrame,
   ModalOverflow3 as ModalOverflow,
   Option3 as Option,
   Radio3 as Radio,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.14-0",
+  "version": "0.0.14",
   "main": "dist/index.js",
   "type": "module",
   "description": "UI tool for Ecube Labs front-end developers",
@@ -12,8 +12,7 @@
   },
   "files": [
     "dist",
-    "framer",
-    "framer-export.js"
+    "framer"
   ],
   "author": "Ecube Labs",
   "sideEffects": false,
@@ -53,6 +52,5 @@
     "type": "git",
     "url": "git+ssh://git@github.com/Ecube-Labs/hds.git"
   },
-  "packageManager": "yarn@4.1.0",
-  "stableVersion": "0.0.13"
+  "packageManager": "yarn@4.1.0"
 }

package/dist/components/FilterDrawer/FilterDrawer.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import { DrawerProps } from "@mui/joy";
-import { MotionProps } from "framer-motion";
-declare const FilterDrawer: {
-    (props: {
-        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    } & Omit<import("@mui/joy").ModalOwnProps, "children" | "keepMounted"> & import("@mui/joy").DrawerSlotsAndSlotProps & {
-        anchor?: "top" | "right" | "bottom" | "left" | undefined;
-        color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").DrawerPropsColorOverrides> | undefined;
-        invertedColors?: boolean | undefined;
-        size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").DrawerPropsSizeOverrides> | undefined;
-        variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").DrawerPropsVariantOverrides> | undefined;
-    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "color" | "container" | "component" | "sx" | "size" | "variant" | "anchor" | "invertedColors" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "open" | "onClose" | keyof import("@mui/joy").DrawerSlotsAndSlotProps> & MotionProps & {
-        title: React.ReactNode;
-        actions?: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-};
-export { FilterDrawer };

package/dist/components/FilterDrawer/index.d.ts

@@ -1,3 +0,0 @@
-import { FilterDrawer } from "./FilterDrawer";
-export * from "./FilterDrawer";
-export default FilterDrawer;

package/dist/components/FilterDrawer/index.js

@@ -1,3 +0,0 @@
-import { FilterDrawer } from "./FilterDrawer";
-export * from "./FilterDrawer";
-export default FilterDrawer;

package/framer-export.js

@@ -1,15 +0,0 @@
-import { addPropertyControls, ControlType } from "framer";
-import * as ADS from "./framer";
-
-export function Divider(props) {
-  return <ADS.Divider {...props} />;
-}
-
-// addPropertyControls(Divider, {
-// })
-
-export function withTooltip(Component) {
-  return function (props) {
-    return <ADS.Tooltip {...props} />;
-  };
-}