@ceed/ads 0.0.60 → 0.0.62

package/framer/index.js

@@ -35980,9 +35980,50 @@ function Accordions(props) {
 }
 Accordions.displayName = "Accordions";
 
-// src/components/Box/Box.tsx
+// src/components/FormControl/FormControl.tsx
 import { motion as motion2 } from "framer-motion";
-var MotionBox = motion2(Box_default);
+var MotionFormControl = motion2(FormControl_default);
+var FormControl3 = MotionFormControl;
+FormControl3.displayName = "FormControl";
+
+// src/components/FormControl/index.ts
+var FormControl_default2 = FormControl3;
+
+// src/components/FormLabel/FormLabel.tsx
+import { motion as motion3 } from "framer-motion";
+var MotionFormLabel = motion3(FormLabel_default);
+var FormLabel3 = MotionFormLabel;
+FormLabel3.displayName = "FormLabel";
+
+// src/components/FormLabel/index.ts
+var FormLabel_default2 = FormLabel3;
+
+// src/components/FormHelperText/FormHelperText.tsx
+import { motion as motion4 } from "framer-motion";
+var MotionFormHelperText = motion4(FormHelperText_default);
+var FormHelperText3 = MotionFormHelperText;
+FormHelperText3.displayName = "FormHelperText";
+
+// src/components/FormHelperText/index.ts
+var FormHelperText_default2 = FormHelperText3;
+
+// src/components/Autocomplete/Autocomplete.tsx
+function Autocomplete3(props) {
+  const _a = props, { label, error, helperText, color: color2, size } = _a, innerProps = __objRest(_a, ["label", "error", "helperText", "color", "size"]);
+  if (label) {
+    return /* @__PURE__ */ jsxs2(FormControl_default2, { color: color2, size, error, children: [
+      /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
+      /* @__PURE__ */ jsx2(Autocomplete_default, __spreadValues({}, innerProps)),
+      helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2(Autocomplete_default, __spreadProps(__spreadValues({}, innerProps), { color: color2, size }));
+}
+Autocomplete3.displayName = "Autocomplete";
+
+// src/components/Box/Box.tsx
+import { motion as motion5 } from "framer-motion";
+var MotionBox = motion5(Box_default);
 var Box2 = MotionBox;
 Box2.displayName = "Box";
 
@@ -35991,8 +36032,8 @@ var Box_default2 = Box2;
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef79 } from "react";
-import { motion as motion3 } from "framer-motion";
-var MotionButton = motion3(Button_default);
+import { motion as motion6 } from "framer-motion";
+var MotionButton = motion6(Button_default);
 var Button3 = forwardRef79(
   (props, ref) => {
     return /* @__PURE__ */ jsx2(
@@ -36991,11 +37032,11 @@ var ChevronRight_default = createSvgIcon2(/* @__PURE__ */ _jsx107("path", {
 }), "ChevronRight");
 
 // src/components/Calendar/Calendar.tsx
-import { AnimatePresence, motion as motion6 } from "framer-motion";
+import { AnimatePresence, motion as motion9 } from "framer-motion";
 
 // src/components/Typography/Typography.tsx
-import { motion as motion4 } from "framer-motion";
-var MotionTypography = motion4(Typography_default);
+import { motion as motion7 } from "framer-motion";
+var MotionTypography = motion7(Typography_default);
 var Typography3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionTypography, __spreadValues({}, props));
 };
@@ -37075,8 +37116,8 @@ var isSameMonth = (date1, date2) => {
 };
 
 // src/components/IconButton/IconButton.tsx
-import { motion as motion5 } from "framer-motion";
-var MotionIconButton = motion5(IconButton_default);
+import { motion as motion8 } from "framer-motion";
+var MotionIconButton = motion8(IconButton_default);
 var IconButton3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionIconButton, __spreadValues({}, props));
 };
@@ -37405,18 +37446,17 @@ var CalendarHeader = styled_default2("div", {
 var CalendarViewContainer = styled_default2("div", {
   name: "Calendar",
   slot: "viewContainer"
-})(({ theme }) => ({
+})(({ theme, viewType }) => ({
   paddingLeft: theme.spacing(1),
   paddingRight: theme.spacing(1),
   position: "relative",
   overflow: "hidden",
-  minHeight: "250px"
+  minHeight: viewType === "day" ? "250px" : "unset"
 }));
-var CalendarViewTable = styled_default2(motion6.table, {
+var CalendarViewTable = styled_default2(motion9.table, {
   name: "Calendar",
   slot: "viewTable"
 })(({ theme }) => ({
-  position: "absolute",
   borderSpacing: 0,
   "& td, & th": {
     padding: 0
@@ -37568,12 +37608,14 @@ var variants = {
     };
   },
   center: {
+    position: "relative",
     zIndex: 1,
     x: 0,
     opacity: 1
   },
   exit: (direction) => {
     return {
+      position: "absolute",
       zIndex: 0,
       x: direction < 0 ? 300 : -300,
       opacity: 0
@@ -37595,7 +37637,7 @@ var PickerDays = (props) => {
     () => getWeekdayNames(ownerState.locale || "default"),
     [ownerState.locale]
   );
-  return /* @__PURE__ */ jsx2(CalendarViewContainer, { children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx2(CalendarViewContainer, { viewType: "day", children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsxs2(
     CalendarViewTable,
     {
       custom: ownerState.direction,
@@ -37674,7 +37716,7 @@ var PickerMonths = (props) => {
     },
     [[]]
   );
-  return /* @__PURE__ */ jsx2(CalendarViewContainer, { children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2(CalendarViewContainer, { viewType: "month", children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsx2(
     CalendarViewTable,
     {
       custom: ownerState.direction,
@@ -37781,8 +37823,8 @@ Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
 // src/components/Checkbox/Checkbox.tsx
-import { motion as motion7 } from "framer-motion";
-var MotionCheckbox = motion7(Checkbox_default);
+import { motion as motion10 } from "framer-motion";
+var MotionCheckbox = motion10(Checkbox_default);
 var Checkbox3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionCheckbox, __spreadValues({}, props));
 };
@@ -37838,8 +37880,8 @@ import {
 } from "react";
 
 // src/components/Sheet/Sheet.tsx
-import { motion as motion8 } from "framer-motion";
-var MotionSheet = motion8(Sheet_default);
+import { motion as motion11 } from "framer-motion";
+var MotionSheet = motion11(Sheet_default);
 var Sheet3 = MotionSheet;
 Sheet3.displayName = "Sheet";
 
@@ -37930,8 +37972,8 @@ function TableBody(props) {
 TableBody.displayName = "TableBody";
 
 // src/components/Stack/Stack.tsx
-import { motion as motion9 } from "framer-motion";
-var MotionStack = motion9(Stack_default);
+import { motion as motion12 } from "framer-motion";
+var MotionStack = motion12(Stack_default);
 var Stack2 = MotionStack;
 Stack2.displayName = "Stack";
 
@@ -37939,6 +37981,21 @@ Stack2.displayName = "Stack";
 var Stack_default2 = Stack2;
 
 // src/components/DataTable/DataTable.tsx
+var OverlayWrapper = styled_default2("tr", {
+  name: "DataTable",
+  slot: "overlayWrapper"
+})({
+  position: "sticky",
+  top: `calc(var(--unstable_TableCell-height, 32px))`,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  "& > td": {
+    height: 0,
+    padding: 0,
+    border: "none !important"
+  }
+});
 var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
 function TablePagination(props) {
   const {
@@ -38206,11 +38263,14 @@ function DataTable(props) {
     rowCount: _4,
     columns: __,
     onPaginationModelChange: ___,
+    paginationMode: ____,
     paginationModel: paginationModel,
+    loading,
     slots: {
       checkbox: RenderCheckbox = Checkbox_default2,
       toolbar: Toolbar,
-      footer: Footer
+      footer: Footer,
+      loadingOverlay: LoadingOverlay = () => /* @__PURE__ */ jsx2(LinearProgress_default, {})
     } = {},
     slotProps: {
       checkbox: checkboxProps = {},
@@ -38228,7 +38288,10 @@ function DataTable(props) {
     // columns is used in useDataTableRenderer
     "onPaginationModelChange",
     // onPaginationModelChange is used in useDataTableRenderer
+    "paginationMode",
+    // paginationMode is used in useDataTableRenderer
     "paginationModel",
+    "loading",
     "slots",
     "slotProps"
   ]);
@@ -38272,14 +38335,14 @@ function DataTable(props) {
               ] }),
               /* @__PURE__ */ jsxs2(Button_default2, { size: "sm", variant: "plain", onClick: onTotalSelect, children: [
                 "Select all ",
-                numberFormatter(rows.length),
+                numberFormatter(rowCount != null ? rowCount : rows.length),
                 " items"
               ] })
             ] }),
             isTotalSelected && /* @__PURE__ */ jsxs2(Stack_default2, { direction: "row", spacing: 1, alignItems: "center", children: [
               /* @__PURE__ */ jsxs2(Typography_default2, { level: "body-xs", children: [
                 "All ",
-                numberFormatter(rows.length),
+                numberFormatter(rowCount != null ? rowCount : rows.length),
                 " items are selected."
               ] }),
               /* @__PURE__ */ jsx2(
@@ -38336,50 +38399,65 @@ function DataTable(props) {
               c.field
             ))
           ] }) }),
-          /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
-            const rowId = `${rowIndex + (page - 1) * pageSize2}`;
-            return /* @__PURE__ */ jsxs2(
-              "tr",
+          /* @__PURE__ */ jsxs2("tbody", { children: [
+            /* @__PURE__ */ jsx2(OverlayWrapper, { children: !!loading && /* @__PURE__ */ jsx2("td", { children: /* @__PURE__ */ jsx2(
+              Box_default2,
               {
-                role: checkboxSelection ? "checkbox" : void 0,
-                tabIndex: checkboxSelection ? -1 : void 0,
-                onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
-                "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
-                children: [
-                  checkboxSelection && /* @__PURE__ */ jsx2(
-                    "th",
-                    {
-                      scope: "row",
-                      style: {
-                        textAlign: "center"
-                      },
-                      children: /* @__PURE__ */ jsx2(
-                        RenderCheckbox,
-                        __spreadValues({
-                          onChange: (e) => onCheckboxChange(e, rowId),
-                          checked: isSelectedRow(rowId)
-                        }, checkboxProps)
-                      )
-                    }
-                  ),
-                  columns.map((column2) => {
-                    var _a2, _b;
-                    return /* @__PURE__ */ jsx2(
-                      "td",
+                sx: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0
+                },
+                children: /* @__PURE__ */ jsx2(LoadingOverlay, {})
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx2(OverlayWrapper, {}),
+            dataInPage.map((row, rowIndex) => {
+              const rowId = `${rowIndex + (page - 1) * pageSize2}`;
+              return /* @__PURE__ */ jsxs2(
+                "tr",
+                {
+                  role: checkboxSelection ? "checkbox" : void 0,
+                  tabIndex: checkboxSelection ? -1 : void 0,
+                  onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
+                  "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
+                  children: [
+                    checkboxSelection && /* @__PURE__ */ jsx2(
+                      "th",
                       {
+                        scope: "row",
                         style: {
-                          textAlign: column2.type === "number" ? "end" : "start"
+                          textAlign: "center"
                         },
-                        children: (_b = (_a2 = column2.renderCell) == null ? void 0 : _a2.call(column2, { row, value: row[column2.field] })) != null ? _b : row[column2.field]
-                      },
-                      column2.field
-                    );
-                  })
-                ]
-              },
-              rowId
-            );
-          }) }),
+                        children: /* @__PURE__ */ jsx2(
+                          RenderCheckbox,
+                          __spreadValues({
+                            onChange: (e) => onCheckboxChange(e, rowId),
+                            checked: isSelectedRow(rowId)
+                          }, checkboxProps)
+                        )
+                      }
+                    ),
+                    columns.map((column2) => {
+                      var _a2, _b;
+                      return /* @__PURE__ */ jsx2(
+                        "td",
+                        {
+                          style: {
+                            textAlign: column2.type === "number" ? "end" : "start"
+                          },
+                          children: (_b = (_a2 = column2.renderCell) == null ? void 0 : _a2.call(column2, { row, value: row[column2.field] })) != null ? _b : row[column2.field]
+                        },
+                        column2.field
+                      );
+                    })
+                  ]
+                },
+                rowId
+              );
+            })
+          ] }),
           Footer && /* @__PURE__ */ jsx2(Footer, {})
         ] }))
       })
@@ -41997,35 +42075,6 @@ var CalendarToday_default = createSvgIcon2(/* @__PURE__ */ _jsx108("path", {
 
 // src/components/Input/Input.tsx
 import { motion as motion13 } from "framer-motion";
-
-// src/components/FormControl/FormControl.tsx
-import { motion as motion10 } from "framer-motion";
-var MotionFormControl = motion10(FormControl_default);
-var FormControl3 = MotionFormControl;
-FormControl3.displayName = "FormControl";
-
-// src/components/FormControl/index.ts
-var FormControl_default2 = FormControl3;
-
-// src/components/FormLabel/FormLabel.tsx
-import { motion as motion11 } from "framer-motion";
-var MotionFormLabel = motion11(FormLabel_default);
-var FormLabel3 = MotionFormLabel;
-FormLabel3.displayName = "FormLabel";
-
-// src/components/FormLabel/index.ts
-var FormLabel_default2 = FormLabel3;
-
-// src/components/FormHelperText/FormHelperText.tsx
-import { motion as motion12 } from "framer-motion";
-var MotionFormHelperText = motion12(FormHelperText_default);
-var FormHelperText3 = MotionFormHelperText;
-FormHelperText3.displayName = "FormHelperText";
-
-// src/components/FormHelperText/index.ts
-var FormHelperText_default2 = FormHelperText3;
-
-// src/components/Input/Input.tsx
 var MotionInput = motion13(Input_default);
 var Input3 = (props) => {
   const _a = props, { label, helperText, error, style: style4, size, color: color2 } = _a, innerProps = __objRest(_a, ["label", "helperText", "error", "style", "size", "color"]);
@@ -42895,6 +42944,19 @@ Tooltip3.displayName = "Tooltip";
 // src/components/Autocomplete/Autocomplete.framer.ts
 import { ControlType } from "framer";
 var autocompletePropertyControls = {
+  label: {
+    title: "Label",
+    type: ControlType.String
+  },
+  helperText: {
+    title: "Helper Text",
+    type: ControlType.String
+  },
+  error: {
+    title: "Error",
+    type: ControlType.Boolean,
+    defaultValue: false
+  },
   options: {
     title: "Options",
     type: ControlType.Array,
@@ -43288,6 +43350,10 @@ var dataTablePropertyControls = {
     type: ControlType10.Boolean,
     defaultValue: false
   },
+  loading: {
+    type: ControlType10.Boolean,
+    defaultValue: false
+  },
   onPaginationModelChange: {
     type: ControlType10.EventHandler
   },
@@ -43950,12 +44016,12 @@ var textareaPropertyControls = {
 // src/components/Typography/Typography.framer.ts
 import { ControlType as ControlType27 } from "framer";
 var typographyPropertyControls = {
-  // color: {
-  //     title: "Color",
-  //     type: ControlType.Enum,
-  //     options: ["primary", "neutral", "danger", "success", "warning"],
-  //     optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-  // },
+  textAlign: {
+    title: "Text Align",
+    type: ControlType27.Enum,
+    options: ["start", "center", "end"],
+    defaultValue: "start"
+  },
   level: {
     title: "Level",
     type: ControlType27.Enum,
@@ -44010,7 +44076,7 @@ export {
   AccordionSummary3 as AccordionSummary,
   Accordions,
   AspectRatio_default as AspectRatio,
-  Autocomplete_default as Autocomplete,
+  Autocomplete3 as Autocomplete,
   AutocompleteListbox_default as AutocompleteListbox,
   AutocompleteOption_default as AutocompleteOption,
   Avatar_default as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",