@cerberus-design/react 0.14.2 → 0.15.0

package/build/legacy/components/DatePicker.client.cjs

@@ -27,11 +27,13 @@ __export(DatePicker_client_exports, {
   DatePickerDayView: () => DatePickerDayView,
   DatePickerInput: () => DatePickerInput,
   DatePickerMonthView: () => DatePickerMonthView,
+  DatePickerTrigger: () => DatePickerTrigger,
+  DatePickerViewControlGroup: () => DatePickerViewControlGroup,
   DatePickerYearView: () => DatePickerYearView,
   RangePickerInput: () => RangePickerInput
 });
 module.exports = __toCommonJS(DatePicker_client_exports);
-var import_react4 = require("@ark-ui/react");
+var import_react5 = require("@ark-ui/react");
 
 // src/components/Portal.tsx
 var import_react = require("@ark-ui/react");
@@ -55,188 +57,72 @@ function useFieldContext() {
 
 // src/components/DatePicker.server.tsx
 var import_react3 = require("@ark-ui/react");
-var import_css3 = require("@cerberus/styled-system/css");
-var import_recipes3 = require("@cerberus/styled-system/recipes");
-
-// src/config/cerbIcons.ts
-var import_icons = require("@cerberus/icons");
-
-// src/config/icons/checkbox.icons.tsx
+var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function CheckmarkIcon(props) {
+var datePickerStyles = (0, import_recipes.datePicker)();
+function DatePickerViewControl(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
+    import_react3.DatePicker.Control,
     {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      role: "img",
-      viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
-        }
-      )
+      className: (0, import_css.cx)(props.className, datePickerStyles.viewControl)
     }
   );
 }
-function IndeterminateIcon(props) {
+function DatePickerTable(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
+    import_react3.DatePicker.Table,
     {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
-      fill: "none",
-      viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+      className: (0, import_css.cx)(props.className, datePickerStyles.table)
     }
   );
 }
-
-// src/components/AnimatingUploadIcon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function AnimatingUploadIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "svg",
+function DatePickerTableHeader(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react3.DatePicker.TableHeader,
     {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: props.size ?? "1em",
-      height: props.size ?? "1em",
-      viewBox: "0 0 24 24",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "g",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "square",
-          strokeLinejoin: "round",
-          strokeWidth: 1.5,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "path",
-              {
-                "data-name": "animating-trail",
-                strokeDasharray: "2 4",
-                strokeDashoffset: 6,
-                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "animate",
-                  {
-                    attributeName: "stroke-dashoffset",
-                    dur: "0.45s",
-                    repeatCount: "indefinite",
-                    values: "6;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "path",
-              {
-                "data-name": "half-circle",
-                strokeDasharray: 32,
-                strokeDashoffset: 32,
-                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "animate",
-                  {
-                    fill: "freeze",
-                    attributeName: "stroke-dashoffset",
-                    begin: "0.075s",
-                    dur: "0.3s",
-                    values: "32;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "svg",
-              {
-                "aria-hidden": "true",
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "0.8em",
-                height: "0.8em",
-                x: "27%",
-                y: "27%",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "polygon",
-                  {
-                    fill: "currentColor",
-                    stroke: "currentColor",
-                    strokeWidth: 0.8,
-                    opacity: "1",
-                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "animate",
-                      {
-                        fill: "freeze",
-                        attributeName: "opacity",
-                        values: "1;0;1",
-                        dur: "2s",
-                        repeatCount: "indefinite"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
+      ...props,
+      className: (0, import_css.cx)(props.className, datePickerStyles.tableHeader)
     }
   );
 }
-
-// src/config/cerbIcons.ts
-var defaultIcons = {
-  accordionIndicator: import_icons.ChevronDown,
-  avatar: import_icons.UserFilled,
-  calendar: import_icons.Calendar,
-  calendarPrev: import_icons.ChevronLeft,
-  calendarNext: import_icons.ChevronRight,
-  checkbox: CheckmarkIcon,
-  close: import_icons.Close,
-  confirmModal: import_icons.Information,
-  delete: import_icons.TrashCan,
-  promptModal: import_icons.Information,
-  waitingFileUploader: import_icons.CloudUpload,
-  fileUploader: AnimatingUploadIcon,
-  indeterminate: IndeterminateIcon,
-  infoNotification: import_icons.Information,
-  successNotification: import_icons.CheckmarkOutline,
-  warningNotification: import_icons.WarningAlt,
-  dangerNotification: import_icons.WarningFilled,
-  invalid: import_icons.WarningFilled,
-  invalidAlt: import_icons.Warning,
-  redo: import_icons.Restart,
-  selectArrow: import_icons.ChevronDown,
-  toggleChecked: import_icons.Checkmark
-};
-
-// src/config/defineIcons.ts
-var $cerberusIcons = defaultIcons;
+function DatePickerTableCell(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react3.DatePicker.TableCell,
+    {
+      ...props,
+      className: (0, import_css.cx)(props.className, datePickerStyles.tableCell)
+    }
+  );
+}
+function DatePickerTableCellTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react3.DatePicker.TableCellTrigger,
+    {
+      ...props,
+      className: (0, import_css.cx)(props.className, datePickerStyles.tableCellTrigger)
+    }
+  );
+}
+var DatePickerView = import_react3.DatePicker.View;
+var DatePickerContext = import_react3.DatePicker.Context;
 
 // src/components/IconButton.tsx
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_css2 = require("@cerberus/styled-system/css");
+var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       ...nativeProps,
       "aria-label": ariaLabel ?? "Icon Button",
-      className: (0, import_css.cx)(
+      className: (0, import_css2.cx)(
         nativeProps.className,
-        (0, import_recipes.iconButton)({
+        (0, import_recipes2.iconButton)({
           palette,
           usage,
           size
@@ -247,18 +133,18 @@ function IconButton(props) {
 }
 
 // src/components/Button.tsx
-var import_css2 = require("@cerberus/styled-system/css");
-var import_recipes2 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Button(props) {
   const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       ...nativeProps,
-      className: (0, import_css2.cx)(
+      className: (0, import_css3.cx)(
         nativeProps.className,
-        (0, import_recipes2.button)({
+        (0, import_recipes3.button)({
           palette,
           usage,
           shape
@@ -268,117 +154,81 @@ function Button(props) {
   );
 }
 
-// src/components/DatePicker.server.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var datePickerStyles = (0, import_recipes3.datePicker)();
-function DatePickerTrigger(props) {
-  const { calendar: CalendarIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react3.DatePicker.Trigger,
-    {
-      ...props,
-      className: (0, import_css3.cx)(
-        props.className,
-        (0, import_recipes3.iconButton)({
-          size: "sm",
-          usage: "ghost"
-        }),
-        datePickerStyles.trigger
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarIcon, {})
-    }
-  );
+// src/context/cerberus.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CerberusContext = (0, import_react4.createContext)(null);
+function useCerberusContext() {
+  const context = (0, import_react4.useContext)(CerberusContext);
+  if (!context) {
+    throw new Error("useCerberus must be used within a CerberusProvider");
+  }
+  return context;
 }
-function DatePickerViewControl(props) {
+
+// src/components/DatePicker.client.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var datePickerStyles2 = (0, import_recipes4.datePicker)();
+function DatePicker(props) {
+  const states = useFieldContext();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react3.DatePicker.Control,
+    import_react5.DatePicker.Root,
     {
       ...props,
-      className: (0, import_css3.cx)(props.className, datePickerStyles.viewControl)
+      ...states,
+      positioning: {
+        placement: "bottom-start"
+      }
     }
   );
 }
 function DatePickerViewControlGroup(props) {
-  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons;
+  const { icons } = useCerberusContext();
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DatePickerViewControl, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PrevIcon, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PrevIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Button,
       {
-        className: (0, import_css3.css)({
+        className: (0, import_css4.css)({
           h: "2rem",
           paddingInline: "md"
         }),
         shape: "rounded",
         size: "sm",
         usage: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.RangeText, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.RangeText, {})
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NextIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NextIcon, {}) }) })
   ] });
 }
-function DatePickerTable(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react3.DatePicker.Table,
-    {
-      ...props,
-      className: (0, import_css3.cx)(props.className, datePickerStyles.table)
-    }
-  );
-}
-function DatePickerTableHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react3.DatePicker.TableHeader,
-    {
-      ...props,
-      className: (0, import_css3.cx)(props.className, datePickerStyles.tableHeader)
-    }
-  );
-}
-function DatePickerTableCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react3.DatePicker.TableCell,
-    {
-      ...props,
-      className: (0, import_css3.cx)(props.className, datePickerStyles.tableCell)
-    }
-  );
-}
-function DatePickerTableCellTrigger(props) {
+function DatePickerTrigger(props) {
+  const { icons } = useCerberusContext();
+  const { calendar: CalendarIcon } = icons;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react3.DatePicker.TableCellTrigger,
-    {
-      ...props,
-      className: (0, import_css3.cx)(props.className, datePickerStyles.tableCellTrigger)
-    }
-  );
-}
-var DatePickerView = import_react3.DatePicker.View;
-var DatePickerContext = import_react3.DatePicker.Context;
-
-// src/components/DatePicker.client.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var datePickerStyles2 = (0, import_recipes4.datePicker)();
-function DatePicker(props) {
-  const states = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react4.DatePicker.Root,
+    import_react5.DatePicker.Trigger,
     {
       ...props,
-      ...states,
-      positioning: {
-        placement: "bottom-start"
-      }
+      className: (0, import_css4.cx)(
+        props.className,
+        (0, import_recipes4.iconButton)({
+          size: "sm",
+          usage: "ghost"
+        }),
+        datePickerStyles2.trigger
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarIcon, {})
     }
   );
 }
 function DatePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react4.DatePicker.Control, { className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react4.DatePicker.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react5.DatePicker.Control, { className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react5.DatePicker.Input,
       {
         ...props,
         ...fieldStates,
@@ -392,28 +242,33 @@ function DatePickerInput(props) {
 }
 function RangePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react4.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react4.DatePicker.Input,
+  const { defaultValue, ...nativeProps } = props;
+  const startDate = (0, import_react6.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
+  const endDate = (0, import_react6.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react5.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react5.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
+        defaultValue: startDate,
         className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11,
         index: 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react4.DatePicker.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react5.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
+        defaultValue: endDate,
         "data-range-end-input": true,
         className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
@@ -424,9 +279,9 @@ function RangePickerInput(props) {
   ] });
 }
 function DatePickerContent(props) {
-  const { children, ...contentProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react4.DatePicker.Content,
+  const { children, withModal, ...contentProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react5.DatePicker.Content,
     {
       ...contentProps,
       className: (0, import_css4.cx)(contentProps.className, datePickerStyles2.content),
@@ -451,11 +306,11 @@ function DatePickerDayView(props) {
     if (isPastDay(date)) return "past";
     return "future";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DatePickerTable, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DatePickerTable, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         DatePickerTableCellTrigger,
         {
           "data-date": getDayValue(day),
@@ -466,22 +321,22 @@ function DatePickerDayView(props) {
   ] }) }) });
 }
 function DatePickerMonthView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerYearView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
-function DatePickerCalendar() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DatePickerContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerDayView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerMonthView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerYearView, {})
+function DatePickerCalendar(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DatePickerContent, { withModal: props.withModal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerDayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerMonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerYearView, {})
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -492,6 +347,8 @@ function DatePickerCalendar() {
   DatePickerDayView,
   DatePickerInput,
   DatePickerMonthView,
+  DatePickerTrigger,
+  DatePickerViewControlGroup,
   DatePickerYearView,
   RangePickerInput
 });