@cerberus-design/react 0.18.4 → 0.19.1

package/build/legacy/components/date-picker/index.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/date-picker/index.ts
 var date_picker_exports = {};
@@ -59,159 +61,160 @@ module.exports = __toCommonJS(date_picker_exports);
 
 // src/components/date-picker/primitives.tsx
 var import_date_picker = require("@ark-ui/react/date-picker");
-var import_css = require("styled-system/css");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
+var import_css = require("styled-system/css");
 var import_jsx_runtime = require("react/jsx-runtime");
-function DatePickerLabel(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.Label,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.label, props.className)
-    }
-  );
-}
-function DatePickerControl(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.Control,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.control, props.className)
-    }
-  );
-}
-function DatePickerInputEl(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.Input,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.input, props.className)
-    }
-  );
-}
-function DatePickerTrigger(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.Trigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.trigger, props.className)
-    }
-  );
-}
-function DatePickerContent(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.Content,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.content, props.className)
-    }
-  );
-}
-function DatePickerViewControl(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.Control,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.viewControl, props.className)
-    }
-  );
-}
-function DatePickerRangeText(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.RangeText,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.rangeText, props.className)
-    }
-  );
-}
-function DatePickerTable(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.Table,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.table, props.className)
-    }
-  );
-}
-function DatePickerTableHeader(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.TableHeader,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.tableHeader, props.className)
-    }
-  );
-}
-function DatePickerTableCell(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.TableCell,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.tableCell, props.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function DatePickerTableCellTrigger(props) {
-  const styles = (0, import_recipes.datePicker)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_date_picker.DatePicker.TableCellTrigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.tableCellTrigger, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
-}
-function DatePickerRoot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.Root, { ...props });
-}
-function DatePickerClearTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.ClearTrigger, { ...props });
-}
-function DatePickerPositioner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.Positioner, { ...props });
-}
-function DatePickerYearSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.YearSelect, { ...props });
-}
-function DatePickerMonthSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.MonthSelect, { ...props });
-}
-function DatePickerView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.View, { ...props });
-}
-function DatePickerContext(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.Context, { ...props });
-}
-function DatePickerPrevTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.PrevTrigger, { ...props });
-}
-function DatePickerNextTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.NextTrigger, { ...props });
-}
-function DatePickerViewTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.ViewTrigger, { ...props });
-}
-function DatePickerTableHead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.TableHead, { ...props });
-}
-function DatePickerTableRow(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.TableRow, { ...props });
-}
-function DatePickerTableBody(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePicker.TableBody, { ...props });
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/date-picker/primitives.tsx
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes.datePicker);
+var DatePickerLabel = withSlotRecipe(import_date_picker.DatePicker.Label, "label");
+var DatePickerControl = withSlotRecipe(import_date_picker.DatePicker.Control, "control");
+var DatePickerInputEl = withSlotRecipe(import_date_picker.DatePicker.Input, "input");
+var DatePickerTrigger = withSlotRecipe(import_date_picker.DatePicker.Trigger, "trigger");
+var DatePickerContent = withSlotRecipe(import_date_picker.DatePicker.Content, "content");
+var DatePickerViewControl = withSlotRecipe(
+  import_date_picker.DatePicker.Control,
+  "viewControl"
+);
+var DatePickerRangeText = withSlotRecipe(
+  import_date_picker.DatePicker.RangeText,
+  "rangeText"
+);
+var DatePickerTable = withSlotRecipe(import_date_picker.DatePicker.Table, "table");
+var DatePickerTableHeader = withSlotRecipe(
+  import_date_picker.DatePicker.TableHeader,
+  "tableHeader"
+);
+var DatePickerTableCell = withSlotRecipe(
+  import_date_picker.DatePicker.TableCell,
+  "tableCell"
+);
+var DatePickerTableCellTrigger = withSlotRecipe(
+  import_date_picker.DatePicker.TableCellTrigger,
+  "tableCellTrigger"
+);
+var DatePickerRoot = withNoRecipe(import_date_picker.DatePicker.Root);
+var DatePickerClearTrigger = withNoRecipe(import_date_picker.DatePicker.ClearTrigger);
+var DatePickerPositioner = withNoRecipe(import_date_picker.DatePicker.Positioner);
+var DatePickerYearSelect = withNoRecipe(import_date_picker.DatePicker.YearSelect);
+var DatePickerMonthSelect = withNoRecipe(import_date_picker.DatePicker.MonthSelect);
+var DatePickerView = withNoRecipe(import_date_picker.DatePicker.View);
+var DatePickerContext = import_date_picker.DatePicker.Context;
+var DatePickerPrevTrigger = withNoRecipe(import_date_picker.DatePicker.PrevTrigger);
+var DatePickerNextTrigger = withNoRecipe(import_date_picker.DatePicker.NextTrigger);
+var DatePickerViewTrigger = withNoRecipe(import_date_picker.DatePicker.ViewTrigger);
+var DatePickerTableHead = withNoRecipe(import_date_picker.DatePicker.TableHead);
+var DatePickerTableRow = withNoRecipe(import_date_picker.DatePicker.TableRow);
+var DatePickerTableBody = withNoRecipe(import_date_picker.DatePicker.TableBody);
+
 // src/components/date-picker/parts.ts
 var DatePickerParts = {
   Root: DatePickerRoot,
@@ -266,28 +269,17 @@ function useCerberusContext() {
   return context;
 }
 
-// src/components/IconButton.tsx
+// src/components/icon-button/primitives.ts
 var import_factory = require("@ark-ui/react/factory");
-var import_css2 = require("styled-system/css");
 var import_recipes2 = require("styled-system/recipes");
+var { withRecipe } = createCerberusPrimitive(import_recipes2.iconButton);
+var IconButtonRoot = withRecipe(import_factory.ark.button);
+
+// src/components/icon-button/button.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function IconButton(props) {
-  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_factory.ark.button,
-    {
-      ...nativeProps,
-      "aria-label": ariaLabel ?? "Icon Button",
-      className: (0, import_css2.cx)(
-        nativeProps.className,
-        (0, import_recipes2.iconButton)({
-          palette,
-          usage,
-          size
-        })
-      )
-    }
-  );
+  const { ariaLabel, ...rootProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButtonRoot, { ...rootProps, "aria-label": ariaLabel ?? "Icon Button" });
 }
 
 // src/components/date-picker/trigger.tsx
@@ -343,78 +335,67 @@ function RangePickerInput(props) {
   ] });
 }
 
-// src/components/Portal.tsx
+// src/components/portal/portal.tsx
 var import_react2 = require("@ark-ui/react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function Portal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react2.Portal, { ...props });
-}
+var Portal = import_react2.Portal;
 
 // src/components/date-picker/content.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function DatePickerContent2(props) {
-  const { withModal, ...contentProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DatePickerParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DatePickerParts.Content, { ...contentProps }) }) });
+  const { withModal, container, ...contentProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Portal, { disabled: withModal ?? false, container, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DatePickerParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DatePickerParts.Content, { ...contentProps }) }) });
 }
 
+// src/components/date-picker/view-control-group.tsx
+var import_css2 = require("styled-system/css");
+
 // src/components/button/button.tsx
-var import_factory2 = require("@ark-ui/react/factory");
 var import_react3 = require("react");
-var import_css3 = require("styled-system/css");
-var import_recipes3 = require("styled-system/recipes");
 var import_jsx = require("styled-system/jsx");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/components/button/primitives.tsx
+var import_factory2 = require("@ark-ui/react/factory");
+var import_recipes3 = require("styled-system/recipes");
+var { withRecipe: withRecipe2 } = createCerberusPrimitive(import_recipes3.button);
+var ButtonRoot = withRecipe2(import_factory2.ark.button);
+
+// src/components/button/button.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ButtonContext = (0, import_react3.createContext)({
   pending: false
 });
 function Button(props) {
-  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const { pending = false, ...nativeProps } = props;
   const value = (0, import_react3.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_factory2.ark.button,
-    {
-      ...nativeProps,
-      disabled: pending || nativeProps.disabled,
-      className: (0, import_css3.cx)(
-        nativeProps.className,
-        (0, import_recipes3.button)({
-          palette,
-          usage,
-          shape,
-          size
-        })
-      )
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
 }
 
 // src/components/date-picker/view-control-group.tsx
-var import_css4 = require("styled-system/css");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function DatePickerViewControlGroup(props) {
   const { icons } = useCerberusContext();
   const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DatePickerParts.ViewControl, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PrevIcon, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DatePickerParts.ViewControl, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PrevIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Button,
       {
-        className: (0, import_css4.css)({
+        className: (0, import_css2.css)({
           h: "2rem",
           paddingInline: "md"
         }),
         shape: "rounded",
         size: "sm",
         usage: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.RangeText, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.RangeText, {})
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NextIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NextIcon, {}) }) })
   ] });
 }
 
 // src/components/date-picker/day-view.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function DatePickerDayView(props) {
   function isToday(date) {
     const today2 = /* @__PURE__ */ new Date();
@@ -432,11 +413,11 @@ function DatePickerDayView(props) {
     if (isPastDay(date)) return "past";
     return "future";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.View, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.Context, { children: (datePickerData) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DatePickerParts.Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableRow, { children: datePickerData.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableHeader, { children: weekDay.narrow }, id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableBody, { children: datePickerData.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.View, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.Context, { children: (datePickerData) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DatePickerParts.Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableRow, { children: datePickerData.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableBody, { children: datePickerData.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         DatePickerParts.TableCellTrigger,
         {
           "data-date": getDayValue(day),
@@ -448,30 +429,30 @@ function DatePickerDayView(props) {
 }
 
 // src/components/date-picker/month-view.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function DatePickerMonthView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.Context, { children: (datePicker2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableBody, { children: datePicker2.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.Context, { children: (datePicker2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableBody, { children: datePicker2.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 
 // src/components/date-picker/year-view.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function DatePickerYearView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerParts.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerParts.Context, { children: (datePicker2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerParts.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerParts.TableBody, { children: datePicker2.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerParts.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerParts.TableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerParts.TableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.Context, { children: (datePicker2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableBody, { children: datePicker2.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 
 // src/components/date-picker/calendar.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DatePickerCalendar(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DatePickerContent2, { withModal: props.withModal, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DatePickerDayView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DatePickerMonthView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DatePickerYearView, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DatePickerContent2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerDayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerMonthView, { view: "month" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerYearView, { view: "year" })
   ] });
 }