@vkzstudio/muza-ui 1.0.22 → 1.0.25

package/dist/components/Calendar/Calendar.d.ts

@@ -5,7 +5,11 @@ import * as React from 'react';
  * Discriminated union on `mode`: `'single'` for picking one date, `'range'` for a start-end range.
  */
 export type CalendarProps = CalendarBaseProps & (CalendarSingleProps | CalendarRangeProps);
-/** Shared props for the Calendar component, common to both single and range modes. */
+/**
+ * Shared props for the Calendar component, common to both single and range modes.
+ *
+ * These props are also inherited by {@link DatePickerProps} — see DatePicker for wrapper-specific props.
+ */
 export type CalendarBaseProps = {
     /** Number of months displayed side by side. */
     numberOfMonths: 1 | 2;
@@ -45,6 +49,28 @@ export type CalendarBaseProps = {
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /** Excludes disabled dates from range selections. */
     excludeDisabled?: boolean;
+    /** Hides the previous/next month navigation arrows. @default false */
+    hideNavigation?: boolean;
+    /** Hides the month/year caption header entirely. @default false */
+    hideCaption?: boolean;
+    /** Custom formatters for DayPicker elements (month caption, weekday names, etc.). */
+    formatters?: React.ComponentProps<typeof DayPicker>['formatters'];
+    /** Hides the weekday name headers (Mo, Tu, We…). @default false */
+    hideWeekdays?: boolean;
+    /** Shows days from adjacent months to fill the grid. @default true */
+    showOutsideDays?: boolean;
+    /** Hides the date/placeholder text in the bottom bar. @default false */
+    hideBottomText?: boolean;
+    /** Hides the reset button in the bottom bar. @default false */
+    hideResetButton?: boolean;
+    /** Earliest month for navigation. Navigation arrows are disabled before this month. */
+    startMonth?: Date;
+    /** Latest month for navigation. Navigation arrows are disabled after this month. */
+    endMonth?: Date;
+    /** Minimum number of days in a range selection. Passed directly to react-day-picker. */
+    min?: number;
+    /** When true, a selection is always required and the calendar cannot be deselected. @default true */
+    required?: boolean;
 };
 /** Props for date range selection mode. */
 export type CalendarRangeProps = {
@@ -52,8 +78,8 @@ export type CalendarRangeProps = {
     mode: 'range';
     /** Currently selected date range. */
     selected?: DateRange | undefined;
-    /** Fires when the selected range changes. */
-    onSelect?: (range: DateRange) => void;
+    /** Fires when the selected range changes, or `undefined` when deselected (requires `required={false}`). */
+    onSelect?: (range: DateRange | undefined) => void;
 };
 /** Props for single date selection mode. */
 export type CalendarSingleProps = {
@@ -61,11 +87,14 @@ export type CalendarSingleProps = {
     mode: 'single';
     /** Currently selected date. */
     selected?: Date | undefined;
-    /** Fires when a single date is selected. */
-    onSelect?: (date: Date) => void;
+    /** Fires when a single date is selected, or `undefined` when deselected (requires `required={false}`). */
+    onSelect?: (date: Date | undefined) => void;
 };
-declare const Calendar: ({ leftPanelChildren, defaultMonth, numberOfMonths, mode, selected, onSelect, onReset, onConfirm, resetButtonText: resetButtonTextProp, confirmButtonText: confirmButtonTextProp, renderResetButton, renderConfirmButton, bottomTextDefault: bottomTextDefaultProp, dateFormatter, dateRangeFormatter, disabledDates, weekStartsOn, excludeDisabled, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
-declare const CalendarBase: ({ className, classNames, showOutsideDays, captionLayout, formatters, components, locale, ...props }: React.ComponentProps<typeof DayPicker>) => import("react/jsx-runtime").JSX.Element;
+declare const Calendar: ({ leftPanelChildren, defaultMonth, numberOfMonths, mode, selected, onSelect, onReset, onConfirm, resetButtonText: resetButtonTextProp, confirmButtonText: confirmButtonTextProp, renderResetButton, renderConfirmButton, bottomTextDefault: bottomTextDefaultProp, dateFormatter, dateRangeFormatter, disabledDates, weekStartsOn, excludeDisabled, hideNavigation, hideCaption, formatters, hideWeekdays, showOutsideDays, hideBottomText, hideResetButton, startMonth, endMonth, min, required, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarBase: ({ className, classNames, showOutsideDays, captionLayout, formatters, components, locale, hideCaption, hideWeekdays, ...props }: React.ComponentProps<typeof DayPicker> & {
+    hideCaption?: boolean;
+    hideWeekdays?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 declare const CalendarDayButton: ({ className, day, modifiers, children, disabled, ...props }: React.ComponentProps<typeof DayButton>) => import("react/jsx-runtime").JSX.Element;
 export { Calendar, CalendarBase, CalendarDayButton };
 //# sourceMappingURL=Calendar.d.ts.map

package/dist/components/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,KAAK,SAAS,EACd,SAAS,EACT,SAAS,EACT,KAAK,OAAO,EAEb,MAAM,kBAAkB,CAAA;AAazB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,CAAC,mBAAmB,GAAG,kBAAkB,CAAC,CAAA;AAE5C,sFAAsF;AACtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+CAA+C;IAC/C,cAAc,EAAE,CAAC,GAAG,CAAC,CAAA;IACrB,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,wDAAwD;IACxD,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,gDAAgD;IAChD,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACzC,iFAAiF;IACjF,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gEAAgE;IAChE,mBAAmB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAA;IACjD,0HAA0H;IAC1H,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,wGAAwG;IACxG,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,GAAG,SAAS,CAAA;IAC/C,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,2CAA2C;AAC3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oCAAoC;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAChC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,4CAA4C;AAC5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,qCAAqC;IACrC,IAAI,EAAE,QAAQ,CAAA;IACd,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC3B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,QAAA,MAAM,QAAQ,GAAI,uVAmBf,aAAa,4CAmFf,CAAA;AAED,QAAA,MAAM,YAAY,GAAI,qGASnB,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,4CAqNxC,CAAA;AAED,QAAA,MAAM,iBAAiB,GAAI,6DAOxB,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,4CAqDxC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"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"}

package/dist/components/Calendar/Calendar.js

@@ -1,121 +1,165 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import * as _ from "react";
-import { formatDate as L } from "./utils/formatDate.js";
-import { formatDateRange as R } from "./utils/formatDateRange.js";
-import { useMuzaTranslationContext as S } from "../../translations/TranslationContext.js";
-import { Button as k } from "../Button/Button.js";
-import { getDefaultClassNames as N } from "../../node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.js";
-import { DayPicker as q } from "../../node_modules/react-day-picker/dist/esm/DayPicker.js";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import * as R from "react";
+import { formatDate as I } from "./utils/formatDate.js";
+import { formatDateRange as J } from "./utils/formatDateRange.js";
+import { useMuzaTranslationContext as K } from "../../translations/TranslationContext.js";
+import { Button as W } from "../Button/Button.js";
+import { getDefaultClassNames as E } from "../../node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.js";
+import { DayPicker as P } from "../../node_modules/react-day-picker/dist/esm/DayPicker.js";
 import { cn as e } from "../../utils/cn.js";
-import { Typography as p, typographyVariants as y } from "../Typography/Typography.js";
-import { AltArrowLeftOutline as W, AltArrowRightOutline as Y, AltArrowDownOutline as E } from "@solar-icons/react-perf";
-const U = ({
-  leftPanelChildren: u,
-  defaultMonth: c,
-  numberOfMonths: o,
-  mode: l,
-  selected: a,
-  onSelect: m,
-  onReset: s,
-  onConfirm: f,
-  resetButtonText: t,
-  confirmButtonText: b,
-  renderResetButton: n,
-  renderConfirmButton: d,
-  bottomTextDefault: i,
-  dateFormatter: D = L,
-  dateRangeFormatter: j = R,
-  disabledDates: w,
-  weekStartsOn: h = 1,
-  excludeDisabled: C
+import { Typography as x, typographyVariants as v } from "../Typography/Typography.js";
+import { AltArrowLeftOutline as Q, AltArrowRightOutline as U, AltArrowDownOutline as X } from "@solar-icons/react-perf";
+const se = ({
+  leftPanelChildren: m,
+  defaultMonth: f,
+  numberOfMonths: n,
+  mode: i,
+  selected: d,
+  onSelect: g,
+  onReset: l,
+  onConfirm: c,
+  resetButtonText: u,
+  confirmButtonText: y,
+  renderResetButton: t,
+  renderConfirmButton: b,
+  bottomTextDefault: a,
+  dateFormatter: o = I,
+  dateRangeFormatter: s = J,
+  disabledDates: h,
+  weekStartsOn: _ = 1,
+  excludeDisabled: F,
+  hideNavigation: k,
+  hideCaption: N,
+  formatters: z,
+  hideWeekdays: j,
+  showOutsideDays: D,
+  hideBottomText: C,
+  hideResetButton: T,
+  startMonth: A,
+  endMonth: B,
+  min: G,
+  required: L = !0
 }) => {
-  const { translations: x, dateFnsLocale: v } = S(), T = t ?? x.calendar.resetButton, B = b ?? x.calendar.confirmButton, A = i ?? x.calendar.bottomTextDefault;
-  return /* @__PURE__ */ g("div", { className: "flex", children: [
-    u && /* @__PURE__ */ r("div", { className: "flex flex-col border-r border-stroke-base-primary py-sm", children: u }),
-    /* @__PURE__ */ g("div", { className: "mt-2xl flex flex-col justify-between", children: [
-      l === "range" ? /* @__PURE__ */ r(
-        z,
+  const { translations: w, dateFnsLocale: S } = K(), V = u ?? w.calendar.resetButton, q = y ?? w.calendar.confirmButton, H = a ?? w.calendar.bottomTextDefault;
+  return /* @__PURE__ */ p("div", { className: "flex", children: [
+    m && /* @__PURE__ */ r("div", { className: "flex flex-col border-r border-stroke-base-primary py-sm", children: m }),
+    /* @__PURE__ */ p("div", { className: "mt-2xl flex flex-col justify-between", children: [
+      i === "range" ? /* @__PURE__ */ r(
+        Y,
         {
-          numberOfMonths: o,
-          defaultMonth: c,
+          numberOfMonths: n,
+          defaultMonth: f,
           mode: "range",
-          selected: a,
-          onSelect: m,
-          required: !0,
-          weekStartsOn: h,
-          disabled: w,
-          excludeDisabled: C,
-          locale: v
+          selected: d,
+          onSelect: g,
+          required: L,
+          weekStartsOn: _,
+          disabled: h,
+          excludeDisabled: F,
+          locale: S,
+          hideNavigation: k,
+          hideCaption: N,
+          hideWeekdays: j,
+          showOutsideDays: D,
+          formatters: z,
+          startMonth: A,
+          endMonth: B,
+          min: G
         }
       ) : /* @__PURE__ */ r(
-        z,
+        Y,
         {
-          numberOfMonths: o,
-          defaultMonth: c,
+          numberOfMonths: n,
+          defaultMonth: f,
           mode: "single",
-          selected: a,
-          onSelect: m,
-          required: !0,
-          weekStartsOn: h,
-          disabled: w,
-          locale: v
+          selected: d,
+          onSelect: g,
+          required: L,
+          weekStartsOn: _,
+          disabled: h,
+          locale: S,
+          hideNavigation: k,
+          hideCaption: N,
+          hideWeekdays: j,
+          showOutsideDays: D,
+          startMonth: A,
+          endMonth: B,
+          formatters: z
         }
       ),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ p(
         "div",
         {
           className: e(
             "mx-xl mt-lg mb-4 flex items-center justify-between",
-            "max-lg:flex-col max-lg:items-start max-lg:border-t max-lg:border-stroke-base-primary max-lg:pt-lg"
+            {
+              "flex-col items-start border-t border-stroke-base-primary pt-lg": n === 1
+            },
+            {
+              "max-lg:flex-col max-lg:items-start max-lg:border-t max-lg:border-stroke-base-primary max-lg:pt-lg": n !== 1
+            }
           ),
           children: [
-            /* @__PURE__ */ r(
-              p,
+            !C && /* @__PURE__ */ r(
+              x,
               {
                 component: "span",
                 variant: "body",
                 weight: "medium",
                 size: "base",
-                children: l === "range" && (a != null && a.from) && (a != null && a.to) ? j(a) : l === "single" && a ? D(a) : A
+                children: i === "range" && (d != null && d.from) ? s(d) : i === "single" && d ? o(d) : H
               }
             ),
-            /* @__PURE__ */ g("div", { className: "flex gap-2xl max-lg:w-full max-lg:justify-between max-lg:gap-0 max-lg:pt-lg", children: [
-              n ? n() : /* @__PURE__ */ r(k, { variant: "link", onClick: s, children: T }),
-              d ? d() : /* @__PURE__ */ r(k, { variant: "primary", size: "sm", onClick: f, children: B })
-            ] })
+            /* @__PURE__ */ p(
+              "div",
+              {
+                className: e("flex gap-2xl", {
+                  "w-full justify-between gap-0": n === 1,
+                  "pt-lg": n === 1 && !C,
+                  "max-lg:w-full max-lg:justify-between max-lg:gap-0 max-lg:pt-lg": n !== 1,
+                  "justify-end": T
+                }),
+                children: [
+                  !T && (t ? t() : /* @__PURE__ */ r(W, { variant: "link", onClick: l, children: V })),
+                  b ? b() : /* @__PURE__ */ r(W, { variant: "primary", size: "sm", onClick: c, children: q })
+                ]
+              }
+            )
           ]
         }
       )
     ] })
   ] });
-}, z = ({
-  className: u,
-  classNames: c,
-  showOutsideDays: o = !0,
-  captionLayout: l = "label",
-  formatters: a,
-  components: m,
-  locale: s,
-  ...f
+}, Y = ({
+  className: m,
+  classNames: f,
+  showOutsideDays: n = !0,
+  captionLayout: i = "label",
+  formatters: d,
+  components: g,
+  locale: l,
+  hideCaption: c,
+  hideWeekdays: u,
+  ...y
 }) => {
-  const t = N(), b = (s == null ? void 0 : s.code) ?? "default";
+  const t = E(), b = (l == null ? void 0 : l.code) ?? "default";
   return /* @__PURE__ */ r(
-    q,
+    P,
     {
-      showOutsideDays: o,
-      locale: s,
+      showOutsideDays: n,
+      locale: l,
       className: e(
         "[[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        u
+        m
       ),
-      captionLayout: l,
+      captionLayout: i,
       formatters: {
-        formatMonthDropdown: (n) => n.toLocaleString(b, { month: "short" }),
-        formatWeekdayName: (n) => n.toLocaleString(b, { weekday: "short" }),
-        formatCaption: (n) => n.toLocaleString(b, { month: "long", year: "numeric" }),
-        ...a
+        formatMonthDropdown: (a) => a.toLocaleString(b, { month: "short" }),
+        formatWeekdayName: (a) => a.toLocaleString(b, { weekday: "short" }),
+        formatCaption: (a) => a.toLocaleString(b, { month: "long", year: "numeric" }),
+        ...d
       },
       classNames: {
         root: e("w-fit", t.root),
@@ -125,7 +169,8 @@ const U = ({
         ),
         month: e("flex flex-col w-full gap-lg px-lg", t.month),
         nav: e(
-          "flex px-lg items-center gap-1 w-full absolute top-0 inset-x-0 justify-between pb-md border-b border-stroke-base-primary",
+          "flex px-lg items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          !c && "pb-md border-b border-stroke-base-primary",
           t.nav
         ),
         button_previous: e(
@@ -138,6 +183,7 @@ const U = ({
         ),
         month_caption: e(
           "flex items-center justify-center pb-md w-full",
+          c && "hidden",
           t.month_caption
         ),
         dropdowns: e(
@@ -153,7 +199,7 @@ const U = ({
           t.dropdown
         ),
         caption_label: e(
-          y({
+          v({
             variant: "title",
             weight: "medium",
             size: "md",
@@ -163,9 +209,13 @@ const U = ({
           t.caption_label
         ),
         table: "w-full border-collapse",
-        weekdays: e("flex mb-sm", t.weekdays),
+        weekdays: e(
+          "flex mb-sm",
+          u && "hidden",
+          t.weekdays
+        ),
         weekday: e(
-          y({
+          v({
             variant: "body",
             weight: "medium",
             size: "caption"
@@ -186,7 +236,7 @@ const U = ({
           t.week_number
         ),
         day: e(
-          y({
+          v({
             variant: "body",
             weight: "regular",
             size: "base"
@@ -215,98 +265,126 @@ const U = ({
           t.disabled
         ),
         hidden: e("invisible", t.hidden),
-        ...c
+        ...f
       },
       components: {
         Root: ({
-          className: n,
-          rootRef: d,
-          ...i
+          className: a,
+          rootRef: o,
+          ...s
         }) => /* @__PURE__ */ r(
           "div",
           {
             "data-slot": "calendar",
-            ref: d,
-            className: n,
-            ...i
+            ref: o,
+            className: a,
+            ...s
           }
         ),
         Chevron: ({
-          className: n,
-          orientation: d,
-          ...i
-        }) => d === "left" ? /* @__PURE__ */ r(
-          p,
+          className: a,
+          orientation: o,
+          ...s
+        }) => o === "left" ? /* @__PURE__ */ r(
+          x,
           {
             component: "span",
             variant: "title",
             weight: "medium",
             size: "md",
             children: /* @__PURE__ */ r(
-              W,
+              Q,
               {
                 className: e(
                   "inline size-comp-calendar-ico-size text-comp-select-icon-brand-def",
-                  n
+                  a
                 ),
-                ...i
+                ...s
               }
             )
           }
-        ) : d === "right" ? /* @__PURE__ */ r(
-          p,
+        ) : o === "right" ? /* @__PURE__ */ r(
+          x,
           {
             component: "span",
             variant: "title",
             weight: "medium",
             size: "md",
             children: /* @__PURE__ */ r(
-              Y,
+              U,
               {
                 className: e(
                   "inline size-comp-calendar-ico-size text-comp-select-icon-brand-def",
-                  n
+                  a
                 ),
-                ...i
+                ...s
               }
             )
           }
         ) : /* @__PURE__ */ r(
-          E,
+          X,
           {
-            className: e("size-comp-calendar-ico-size", n),
-            ...i
+            className: e("size-comp-calendar-ico-size", a),
+            ...s
           }
         ),
-        DayButton: F,
-        WeekNumber: ({ children: n, ...d }) => /* @__PURE__ */ r("td", { ...d, children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center text-center", children: n }) }),
-        ...m
+        DayButton: Z,
+        WeekNumber: ({ children: a, ...o }) => /* @__PURE__ */ r("td", { ...o, children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center text-center", children: a }) }),
+        ...g,
+        // When weekdays are hidden, replace the table-based layout (table > tbody > tr > td)
+        // with a CSS Grid to create a continuous day flow. Without this, months starting
+        // mid-week have invisible gap cells from outside days. The grid approach:
+        // - MonthGrid: table → div (keeps className for DayPicker styling)
+        // - Weeks: tbody → 7-column CSS grid (discards original className)
+        // - Week: tr → display:contents (children flow directly into parent grid)
+        // - Day: td → div, outside days hidden via display:none (no gap cells)
+        // Spread after `...components` so the grid layout always takes effect.
+        ...u && {
+          MonthGrid: ({
+            className: a,
+            ...o
+          }) => /* @__PURE__ */ r("div", { className: a, role: "grid", ...o }),
+          Weeks: ({
+            className: a,
+            ...o
+          }) => /* @__PURE__ */ r("div", { className: "grid grid-cols-7", ...o }),
+          Week: ({
+            week: a,
+            className: o,
+            ...s
+          }) => /* @__PURE__ */ r("div", { className: "contents", ...s }),
+          Day: ({
+            day: a,
+            modifiers: o,
+            ...s
+          }) => a.outside ? /* @__PURE__ */ r("div", { className: "hidden" }) : /* @__PURE__ */ r("div", { ...s })
+        }
       },
-      ...f
+      ...y
     }
   );
-}, F = ({
-  className: u,
-  day: c,
-  modifiers: o,
-  children: l,
-  disabled: a,
-  ...m
+}, Z = ({
+  className: m,
+  day: f,
+  modifiers: n,
+  children: i,
+  disabled: d,
+  ...g
 }) => {
-  const s = N(), f = _.useRef(null);
-  return _.useEffect(() => {
-    var t;
-    o.focused && ((t = f.current) == null || t.focus());
-  }, [o.focused]), /* @__PURE__ */ r(
+  const l = E(), c = R.useRef(null);
+  return R.useEffect(() => {
+    var u;
+    n.focused && ((u = c.current) == null || u.focus());
+  }, [n.focused]), /* @__PURE__ */ r(
     "button",
     {
-      ref: f,
-      "data-day": c.date.toLocaleDateString(),
-      "data-selected-single": o.selected && !o.range_start && !o.range_end && !o.range_middle,
-      "data-range-start": o.range_start,
-      "data-range-end": o.range_end,
-      "data-range-middle": o.range_middle,
-      disabled: a,
+      ref: c,
+      "data-day": f.date.toLocaleDateString(),
+      "data-selected-single": n.selected && !n.range_start && !n.range_end && !n.range_middle,
+      "data-range-start": n.range_start,
+      "data-range-end": n.range_end,
+      "data-range-middle": n.range_middle,
+      disabled: d,
       className: e(
         "relative size-full",
         'before:absolute before:inset-0 before:rounded-full before:transition-colors before:content-[""]',
@@ -318,14 +396,14 @@ const U = ({
         "group-data-[focused=true]/day:z-10",
         "outline-0",
         {
-          "hover:text-text-brand-def hover:before:bg-surface-brand-brand-tertiary focus-visible:text-text-brand-def focus-visible:focus-default focus-visible:before:bg-surface-brand-brand-tertiary": !a
+          "hover:text-text-brand-def hover:before:bg-surface-brand-brand-tertiary focus-visible:text-text-brand-def focus-visible:focus-default focus-visible:before:bg-surface-brand-brand-tertiary": !d
         },
-        s.day,
-        u
+        l.day,
+        m
       ),
-      ...m,
+      ...g,
       children: /* @__PURE__ */ r(
-        p,
+        x,
         {
           variant: "body",
           weight: "regular",
@@ -333,14 +411,14 @@ const U = ({
           component: "span",
           fixY: !0,
           className: "relative z-1 block transition-colors",
-          children: l
+          children: i
         }
       )
     }
   );
 };
 export {
-  U as Calendar,
-  z as CalendarBase,
-  F as CalendarDayButton
+  se as Calendar,
+  Y as CalendarBase,
+  Z as CalendarDayButton
 };

package/dist/components/Calendar/CalendarBase.stories.d.ts

@@ -10,4 +10,6 @@ export declare const RangeCrossMonthSelection: Story;
 export declare const DisabledDates: Story;
 export declare const DisabledDateRange: Story;
 export declare const CustomWeekStartsOnMonday: Story;
+export declare const HiddenNavigation: Story;
+export declare const DayGridOnly: Story;
 //# sourceMappingURL=CalendarBase.stories.d.ts.map

package/dist/components/Calendar/CalendarBase.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarBase.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/CalendarBase.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAyEnC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAE1C,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA2BnB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KA4BtC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiC3B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA8B/B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAyBtC,CAAA"}
+{"version":3,"file":"CalendarBase.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/CalendarBase.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAyEnC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAE1C,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA2BnB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KA4BtC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiC3B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA8B/B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAyBtC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAA"}

package/dist/components/Calendar/utils/formatDateRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatDateRange.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/utils/formatDateRange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,SAAS,WAE/C,CAAA"}
+{"version":3,"file":"formatDateRange.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/utils/formatDateRange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,SAAS,WAI/C,CAAA"}

package/dist/components/Calendar/utils/formatDateRange.js

@@ -1,8 +1,5 @@
-import { format as y } from "date-fns";
-const e = (t) => {
-  var o, r;
-  return `${y(t.from ?? "", ((o = t.from) == null ? void 0 : o.getFullYear()) === ((r = t.to) == null ? void 0 : r.getFullYear()) ? "d. M." : "d. M. yyyy")} - ${y(t.to ?? "", "d. M. yyyy")}`;
-};
+import { format as o } from "date-fns";
+const r = (t) => t.from ? t.to ? `${o(t.from, t.from.getFullYear() === t.to.getFullYear() ? "d. M." : "d. M. yyyy")} - ${o(t.to, "d. M. yyyy")}` : o(t.from, "d. M. yyyy") : "";
 export {
-  e as formatDateRange
+  r as formatDateRange
 };