@pibit.ai/cure-design-system 0.6.4 → 0.6.5

package/dist/applications/date-picker/cell.js

@@ -1,80 +1,87 @@
-import { jsx as y, jsxs as M } from "react/jsx-runtime";
-import { getDayOfWeek as N, isToday as T, getLocalTimeZone as B } from "@internationalized/date";
-import { useLocale as E, useSlottedContext as W, RangeCalendarContext as F, CalendarCell as I } from "react-aria-components";
+import { jsx as x, jsxs as N } from "react/jsx-runtime";
+import { getDayOfWeek as T, isToday as B, getLocalTimeZone as W } from "@internationalized/date";
+import { useLocale as q, useSlottedContext as F, RangeCalendarContext as I, CalendarCell as Z } from "react-aria-components";
 import { cx as u } from "../../utils/cn.js";
-const H = ({
-  date: e,
-  isHighlighted: p,
-  size: m = "sm",
+import { dayCellSizes as $ } from "./sizes.js";
+const K = ({
+  date: t,
+  isHighlighted: y,
+  size: d = "xs",
   onDateSelect: g,
   ...O
 }) => {
-  var b, x;
-  const { locale: R } = E(), h = N(e, R), o = W(F), n = !!o, a = (b = o == null ? void 0 : o.value) == null ? void 0 : b.start, s = (x = o == null ? void 0 : o.value) == null ? void 0 : x.end, z = a ? e.compare(a) > 0 : !0, C = s ? e.compare(s) < 0 : !0, L = a && e.compare(a) >= 0, k = s && e.compare(s) <= 0, w = L && k, _ = new Date(e.year, e.month, 0).getDate(), j = e.day === _, A = e.day === 1, v = T(e, B());
-  return /* @__PURE__ */ y(
-    I,
+  var b, p;
+  const { locale: C } = q(), h = T(t, C), o = F(I), n = !!o, f = (b = o == null ? void 0 : o.value) == null ? void 0 : b.start, l = (p = o == null ? void 0 : o.value) == null ? void 0 : p.end, R = f ? t.compare(f) > 0 : !0, w = l ? t.compare(l) < 0 : !0, k = f && t.compare(f) >= 0, L = l && t.compare(l) <= 0, _ = k && L, j = new Date(t.year, t.month, 0).getDate(), z = t.day === j, A = t.day === 1, v = B(t, W());
+  return /* @__PURE__ */ x(
+    Z,
     {
       ...O,
-      date: e,
+      date: t,
       className: ({
-        isDisabled: t,
-        isFocusVisible: i,
-        isSelectionStart: f,
-        isSelectionEnd: l,
+        isDisabled: e,
+        isFocusVisible: c,
+        isSelectionStart: a,
+        isSelectionEnd: s,
         isSelected: r,
-        isOutsideMonth: c
-      }) => u(
-        "relative focus:outline-none",
-        m === "xs" ? "size-7" : "size-10",
-        (f || h === 0) && "rounded-l-full",
-        (l || h === 6) && "rounded-r-full",
-        w && t && "bg-active",
-        r && n && "bg-active",
-        t ? "pointer-events-none" : "cursor-pointer",
-        i ? "z-10" : "z-0",
-        n && c && "hidden",
-        // Show gradient on last day of month if it's within the selected range.
-        j && r && C && n && "after:absolute after:inset-0 after:translate-x-full after:bg-gradient-to-l after:from-transparent after:to-bg-active in-[[role=gridcell]:last-child]:after:hidden",
-        // Show gradient on first day of month if it's within the selected range.
-        A && r && z && n && "after:absolute after:inset-0 after:-translate-x-full after:bg-gradient-to-r after:from-transparent after:to-bg-active in-[[role=gridcell]:first-child]:after:hidden"
-      ),
+        isOutsideMonth: m
+      }) => {
+        const i = a || h === 0, M = s || h === 6;
+        return u(
+          "relative focus:outline-none",
+          "w-full",
+          $[d],
+          i && "rounded-l-full",
+          M && "rounded-r-full",
+          _ && e && "bg-active",
+          // The cell can be wider than its circle, so the band starts and stops at
+          // the circle's centre on the range ends instead of filling the whole cell.
+          r && n && (a && s ? "" : a ? "bg-gradient-to-r from-transparent from-50% to-bg-active to-50%" : s ? "bg-gradient-to-l from-transparent from-50% to-bg-active to-50%" : "bg-active"),
+          e ? "pointer-events-none" : "cursor-pointer",
+          c ? "z-10" : "z-0",
+          n && m && "hidden",
+          // Show gradient on last day of month if it's within the selected range.
+          z && r && w && n && "after:absolute after:inset-0 after:translate-x-full after:bg-gradient-to-l after:from-transparent after:to-bg-active in-[[role=gridcell]:last-child]:after:hidden",
+          // Show gradient on first day of month if it's within the selected range.
+          A && r && R && n && "after:absolute after:inset-0 after:-translate-x-full after:bg-gradient-to-r after:from-transparent after:to-bg-active in-[[role=gridcell]:first-child]:after:hidden"
+        );
+      },
       children: ({
-        isDisabled: t,
-        isFocusVisible: i,
-        isSelectionStart: f,
-        isSelectionEnd: l,
+        isDisabled: e,
+        isFocusVisible: c,
+        isSelectionStart: a,
+        isSelectionEnd: s,
         isSelected: r,
-        formattedDate: c
+        formattedDate: m
       }) => {
-        const d = f || l || r && !t && !n;
-        return /* @__PURE__ */ M(
+        const i = a || s || r && !e && !n;
+        return /* @__PURE__ */ N(
           "div",
           {
             onClick: () => {
-              !t && g && g(e);
+              !e && g && g(t);
             },
             className: u(
-              "relative flex size-full items-center justify-center rounded-full",
-              m === "xs" ? "text-xs" : "text-sm",
+              "relative mx-auto flex aspect-square h-full items-center justify-center rounded-full",
+              d === "xs" ? "text-xs" : "text-sm",
               // Disabled state.
-              t ? "text-disabled" : "text-secondary hover:text-secondary_hover",
+              e ? "text-disabled" : "text-secondary hover:text-secondary_hover",
               // Focus ring, visible while the cell has keyboard focus.
-              i ? "outline-2 outline-offset-2 outline-focus-ring" : "",
+              c ? "outline-2 outline-offset-2 outline-focus-ring" : "",
               // Hover state for cells in the middle of the range.
-              r && !t && n ? "font-medium" : "",
-              d && "bg-brand-solid font-medium text-white hover:bg-brand-solid_hover hover:text-white",
+              r && !e && n ? "font-medium" : "",
+              i && "bg-brand-solid font-medium text-white hover:bg-brand-solid_hover hover:text-white",
               // Hover state for non-selected cells.
-              !r && !t ? "hover:bg-primary_hover hover:font-medium!" : "",
+              !r && !e ? "hover:bg-primary_hover hover:font-medium!" : "",
               !r && v ? "bg-active font-medium hover:bg-secondary_hover" : ""
             ),
             children: [
-              c,
-              (p || v) && /* @__PURE__ */ y(
+              m,
+              (y || v) && /* @__PURE__ */ x(
                 "div",
                 {
                   className: u(
                     "absolute bottom-1 left-1/2 size-1.25 -translate-x-1/2 rounded-full",
-                    t ? "bg-fg-disabled" : d ? "bg-fg-white" : "bg-fg-brand-primary"
+                    e ? "bg-fg-disabled" : i ? "bg-fg-white" : "bg-fg-brand-primary"
                   )
                 }
               )
@@ -86,5 +93,5 @@ const H = ({
   );
 };
 export {
-  H as CalendarCell
+  K as CalendarCell
 };

package/dist/applications/date-picker/date-input.d.ts

@@ -1,7 +1,7 @@
 import { DateInputProps as AriaDateInputProps } from 'react-aria-components';
 export interface DateInputProps extends Omit<AriaDateInputProps, "children"> {
-    /** Input size: "sm" (compact) or "md" (default). */
-    size?: "sm" | "md";
+    /** Input size: "xs" (28px, 12px text; default), "sm" (32px, 14px text) or "md" (40px). */
+    size?: "xs" | "sm" | "md";
 }
 export declare const DateInput: ({ size, ...props }: DateInputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=date-input.d.ts.map

package/dist/applications/date-picker/date-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../../src/applications/date-picker/date-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AA0BlF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC1E,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oBAA2B,cAAc,4CAiClE,CAAC"}
+{"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../../src/applications/date-picker/date-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AA0BlF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC1E,0FAA0F;IAC1F,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAQD,eAAO,MAAM,SAAS,GAAI,oBAA2B,cAAc,4CA+BlE,CAAC"}

package/dist/applications/date-picker/date-input.js

@@ -1,27 +1,31 @@
-import { jsx as a } from "react/jsx-runtime";
-import { DateInput as s, DateSegment as i } from "react-aria-components";
-import { cx as n } from "../../utils/cn.js";
-const d = /* @__PURE__ */ new Set(["day", "month", "hour"]);
-function c(r) {
-  const { type: e, text: t, isPlaceholder: o } = r;
-  return o || !d.has(e) ? t : t.length === 1 && /^\d$/.test(t) ? `0${t}` : t;
+import { jsx as o } from "react/jsx-runtime";
+import { DateInput as i, DateSegment as d } from "react-aria-components";
+import { cx as s } from "../../utils/cn.js";
+const c = /* @__PURE__ */ new Set(["day", "month", "hour"]);
+function x(r) {
+  const { type: e, text: t, isPlaceholder: a } = r;
+  return a || !c.has(e) ? t : t.length === 1 && /^\d$/.test(t) ? `0${t}` : t;
 }
-const p = ({ size: r = "md", ...e }) => /* @__PURE__ */ a(
-  s,
+const n = {
+  xs: { root: "px-2 py-[5px] text-xs rounded-md", segment: "text-xs" },
+  sm: { root: "px-2 py-1.5 text-sm rounded-md", segment: "text-sm" },
+  md: { root: "px-2.5 py-2.5 text-md", segment: "text-sm" }
+}, u = ({ size: r = "xs", ...e }) => /* @__PURE__ */ o(
+  i,
   {
     ...e,
-    className: n(
+    className: s(
       "flex rounded-lg bg-primary shadow-xs ring-1 ring-secondary ring-inset focus-within:ring-2 focus-within:ring-brand",
-      r === "sm" ? "px-2 py-1.5 text-sm rounded-md" : "px-2.5 py-2 text-md",
+      n[r].root,
       typeof e.className == "string" && e.className
     ),
-    children: (t) => /* @__PURE__ */ a(
-      i,
+    children: (t) => /* @__PURE__ */ o(
+      d,
       {
         segment: t,
-        className: n(
+        className: s(
           "rounded px-0.5 text-primary caret-transparent focus:bg-brand-solid focus:font-medium focus:text-white focus:outline-hidden",
-          r === "sm" ? "text-xs" : "text-sm",
+          n[r].segment,
           // The placeholder segment.
           t.isPlaceholder && "text-placeholder uppercase",
           // The separator "/" segment.
@@ -29,11 +33,11 @@ const p = ({ size: r = "md", ...e }) => /* @__PURE__ */ a(
           // "pm" rather than "PM", matching the time list.
           t.type === "dayPeriod" && !t.isPlaceholder && "lowercase"
         ),
-        children: c(t)
+        children: x(t)
       }
     )
   }
 );
 export {
-  p as DateInput
+  u as DateInput
 };

package/dist/applications/date-picker/date-picker.d.ts

@@ -20,7 +20,10 @@ declare const sizes: {
 };
 export type DatePickerSize = keyof typeof sizes;
 export interface DatePickerProps extends AriaDatePickerProps<DateValue> {
-    /** Trigger size: "xs" (text-xs, xs button), "sm" (text-sm, xs button), "md" (text-md, sm button). Defaults to "xs". */
+    /**
+     * Size of the trigger and of everything in the popover (calendar, inputs, footer buttons).
+     * "xs" (28px days, 12px text), "sm" (36px days, 14px text) or "md" (40px days). Defaults to "xs".
+     */
     size?: DatePickerSize;
     /** The function to call when the apply button is clicked. */
     onApply?: (value?: DateValue) => void;

package/dist/applications/date-picker/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/applications/date-picker/date-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EACV,eAAe,IAAI,mBAAmB,EACtC,SAAS,EACT,SAAS,EACV,MAAM,uBAAuB,CAAC;AAe/B,mFAAmF;AACnF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;CAIA,CAAC;AAEZ,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,KAAK,CAAC;AAEhD,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,CAAC,SAAS,CAAC;IACrE,uHAAuH;IACvH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uGAAuG;IACvG,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAiCD,eAAO,MAAM,UAAU,GAAI,oRAsBxB,eAAe,4CAqPjB,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/applications/date-picker/date-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EACV,eAAe,IAAI,mBAAmB,EACtC,SAAS,EACT,SAAS,EACV,MAAM,uBAAuB,CAAC;AAuB/B,mFAAmF;AACnF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;CAIA,CAAC;AAEZ,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,KAAK,CAAC;AAEhD,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,CAAC,SAAS,CAAC;IACrE;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uGAAuG;IACvG,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAiCD,eAAO,MAAM,UAAU,GAAI,oRAsBxB,eAAe,4CA+PjB,CAAC"}

package/dist/applications/date-picker/date-picker.js

@@ -1,118 +1,122 @@
-import { jsx as e, jsxs as m, Fragment as W } from "react/jsx-runtime";
-import { getLocalTimeZone as E, toCalendarDateTime as Y, today as A } from "@internationalized/date";
-import { useControlledState as ee } from "@react-stately/utils";
-import { Calendar as $, XClose as te } from "@untitledui/icons";
-import { useState as oe, useCallback as ne, useEffect as re } from "react";
-import { useDateFormatter as ie, I18nProvider as le } from "react-aria";
-import { DatePicker as ae, Group as se, ButtonContext as de, Popover as ce, Dialog as me } from "react-aria-components";
-import { cx as r, sortCx as ue } from "../../utils/cn.js";
-import { ControlledCalendarContextProvider as he, Calendar as q } from "./calendar.js";
-import { Button as g } from "../../primitives/button/button.js";
-import { DateTimeCalendar as fe } from "./date-time-calendar.js";
-const P = [A(E())], s = ue({
+import { jsx as e, jsxs as u, Fragment as A } from "react/jsx-runtime";
+import { getLocalTimeZone as F, toCalendarDateTime as ee, today as te } from "@internationalized/date";
+import { useControlledState as oe } from "@react-stately/utils";
+import { Calendar as $, XClose as ne } from "@untitledui/icons";
+import { useState as re, useCallback as ie, useEffect as le } from "react";
+import { useDateFormatter as ae, I18nProvider as se } from "react-aria";
+import { DatePicker as de, Group as ce, ButtonContext as me, Popover as ue, Dialog as he } from "react-aria-components";
+import { cx as r, sortCx as fe } from "../../utils/cn.js";
+import { ControlledCalendarContextProvider as pe, Calendar as q } from "./calendar.js";
+import { Button as y } from "../../primitives/button/button.js";
+import { DateTimeCalendar as ge } from "./date-time-calendar.js";
+const S = [te(F())], E = {
+  xs: "py-[5px]",
+  sm: "py-1.5",
+  md: void 0
+}, d = fe({
   xs: { button: "xs", text: "text-xs", icon: "size-3!" },
   sm: { button: "xs", text: "text-sm", icon: "size-3.5!" },
   md: { button: "sm", text: "text-md", icon: "size-4!" }
-}), pe = (t) => t === "hour" || t === "minute" || t === "second", S = (t) => t && !("hour" in t) ? Y(t) : t;
-function ge({
+}), ye = (t) => t === "hour" || t === "minute" || t === "second", k = (t) => t && !("hour" in t) ? ee(t) : t;
+function xe({
   committedValue: t,
-  onSync: y
+  onSync: x
 }) {
-  return re(() => {
-    y(t);
+  return le(() => {
+    x(t);
   }, []), null;
 }
-const Oe = ({
+const Te = ({
   value: t,
-  defaultValue: y,
-  onChange: F,
+  defaultValue: x,
+  onChange: I,
   onApply: b,
-  onCancel: x,
+  onCancel: v,
   className: C,
-  showFooter: v = !0,
-  triggerClassName: k,
-  clearable: I = !1,
-  endAdornment: w,
+  showFooter: w = !0,
+  triggerClassName: z,
+  clearable: U = !1,
+  endAdornment: N,
   isDisabled: O,
   size: i = "xs",
-  granularity: u,
+  granularity: h,
   minValue: T,
   maxValue: V,
   isDateUnavailable: j,
-  firstDayOfWeek: z,
-  hourCycle: U,
-  timeStep: X,
-  defaultTime: Z,
-  ...G
+  firstDayOfWeek: _,
+  hourCycle: X,
+  timeStep: Z,
+  defaultTime: H,
+  ...B
 }) => {
-  const n = pe(u), L = {
+  const l = ye(h), n = i, G = {
     minValue: T,
     maxValue: V,
     isDateUnavailable: j,
-    firstDayOfWeek: z,
-    isReadOnly: G.isReadOnly
-  }, h = U ?? (n ? 12 : void 0), _ = ie({
+    firstDayOfWeek: _,
+    isReadOnly: B.isReadOnly
+  }, f = X ?? (l ? 12 : void 0), J = ae({
     month: "short",
     day: "numeric",
     year: "numeric",
-    ...n && {
+    ...l && {
       hour: "numeric",
       minute: "2-digit",
-      second: u === "second" ? "2-digit" : void 0,
-      hourCycle: h === 24 ? "h23" : h === 12 ? "h12" : void 0
+      second: h === "second" ? "2-digit" : void 0,
+      hourCycle: f === 24 ? "h23" : f === 12 ? "h12" : void 0
     }
-  }), [d, c] = ee(
+  }), [c, m] = oe(
     t,
-    y || null,
-    F
-  ), D = d ?? null, [f, N] = oe(
+    x || null,
+    I
+  ), D = c ?? null, [p, P] = re(
     D
-  ), o = v, l = o ? D : d, H = o ? () => {
-  } : c, B = l ? _.format(l.toDate(E())) : n ? "Select date and time" : "Select date", p = typeof C == "string" && C.includes("w-full"), J = (a) => {
-    o && (c(f), b == null || b(f ?? void 0)), a();
-  }, K = ne(() => {
-    c(null);
-  }, [c]), M = I && D != null && !O, R = w ? "pr-8" : void 0;
-  return /* @__PURE__ */ e(le, { locale: "en-US", children: /* @__PURE__ */ m(
-    ae,
+  ), o = w, a = o ? D : c, K = o ? () => {
+  } : m, L = a ? J.format(a.toDate(F())) : l ? "Select date and time" : "Select date", g = typeof C == "string" && C.includes("w-full"), Q = (s) => {
+    o && (m(p), b == null || b(p ?? void 0)), s();
+  }, W = ie(() => {
+    m(null);
+  }, [m]), M = U && D != null && !O, R = N ? "pr-8" : void 0;
+  return /* @__PURE__ */ e(se, { locale: "en-US", children: /* @__PURE__ */ u(
+    de,
     {
-      shouldCloseOnSelect: !v && !n,
-      ...G,
+      shouldCloseOnSelect: !w && !l,
+      ...B,
       minValue: T,
       maxValue: V,
       isDateUnavailable: j,
-      firstDayOfWeek: z,
-      granularity: u,
-      hourCycle: h,
+      firstDayOfWeek: _,
+      granularity: h,
+      hourCycle: f,
       isDisabled: O,
       className: C,
-      value: n ? S(o ? l : d) : o ? l : d,
-      onChange: H,
+      value: l ? k(o ? a : c) : o ? a : c,
+      onChange: K,
       children: [
-        /* @__PURE__ */ m(se, { className: r("relative", p && "w-full"), children: [
-          M ? /* @__PURE__ */ m(
+        /* @__PURE__ */ u(ce, { className: r("relative", g && "w-full"), children: [
+          M ? /* @__PURE__ */ u(
             "div",
             {
               className: r(
                 "flex min-w-0 overflow-hidden rounded-md bg-primary ring-1 ring-secondary ring-inset border border-secondary",
-                p && "w-full"
+                g && "w-full"
               ),
               children: [
                 /* @__PURE__ */ e(
-                  g,
+                  y,
                   {
-                    size: s[i].button,
+                    size: d[i].button,
                     color: "secondary",
                     iconLeading: $,
                     className: r(
                       "min-w-0 flex-1 rounded-none ring-0 shadow-none",
-                      s[i].text,
-                      p && "justify-start",
+                      d[i].text,
+                      g && "justify-start",
                       R,
-                      k
+                      z
                     ),
-                    leadingClassName: s[i].icon,
-                    children: B
+                    leadingClassName: d[i].icon,
+                    children: L
                   }
                 ),
                 /* @__PURE__ */ e(
@@ -120,107 +124,123 @@ const Oe = ({
                   {
                     type: "button",
                     "aria-label": "Clear date",
-                    onClick: K,
+                    onClick: W,
                     className: r(
                       "flex w-9 shrink-0 items-center justify-center bg-primary text-fg-quaternary",
                       "transition-colors hover:bg-primary_hover hover:text-secondary",
                       "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-inset"
                     ),
-                    children: /* @__PURE__ */ e(te, { "aria-hidden": !0, className: "size-4 shrink-0" })
+                    children: /* @__PURE__ */ e(ne, { "aria-hidden": !0, className: "size-4 shrink-0" })
                   }
                 )
               ]
             }
           ) : /* @__PURE__ */ e(
-            g,
+            y,
             {
-              size: s[i].button,
+              size: d[i].button,
               color: "secondary",
               iconLeading: $,
               className: r(
-                s[i].text,
-                p && "w-full min-w-0 justify-start",
+                d[i].text,
+                g && "w-full min-w-0 justify-start",
                 R,
-                k
+                z
               ),
-              leadingClassName: s[i].icon,
-              children: B
+              leadingClassName: d[i].icon,
+              children: L
             }
           ),
-          w ? /* @__PURE__ */ e(de.Provider, { value: null, children: /* @__PURE__ */ e(
+          N ? /* @__PURE__ */ e(me.Provider, { value: null, children: /* @__PURE__ */ e(
             "div",
             {
               className: r(
                 "absolute top-1/2 z-10 -translate-y-1/2",
                 M ? "right-9" : "right-1"
               ),
-              children: w
+              children: N
             }
           ) }) : null
         ] }),
         /* @__PURE__ */ e(
-          ce,
+          ue,
           {
             offset: 8,
             placement: "bottom right",
-            containerPadding: 16,
-            className: ({ isEntering: a, isExiting: Q }) => r(
-              "origin-(--trigger-anchor-point) will-change-transform overflow-y-auto",
-              a && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
-              Q && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5"
+            containerPadding: 8,
+            className: ({ isEntering: s, isExiting: Y }) => r(
+              "origin-(--trigger-anchor-point) will-change-transform overflow-y-auto rounded-2xl border border-secondary bg-primary shadow-[0_0_24px_rgba(10,13,18,0.12)]",
+              s && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+              Y && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5"
             ),
-            children: /* @__PURE__ */ e(me, { className: "rounded-2xl bg-primary shadow-xl border border-secondary", children: ({ close: a }) => /* @__PURE__ */ m(W, { children: [
+            children: /* @__PURE__ */ e(he, { className: "rounded-2xl outline-hidden", children: ({ close: s }) => /* @__PURE__ */ u(A, { children: [
               o && /* @__PURE__ */ e(
-                ge,
+                xe,
                 {
-                  committedValue: n ? S(l) ?? null : l,
-                  onSync: N
+                  committedValue: l ? k(a) ?? null : a,
+                  onSync: P
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "flex px-6 py-5", children: n ? /* @__PURE__ */ e(
-                fe,
+              /* @__PURE__ */ e(
+                "div",
                 {
-                  value: o ? f : S(d) ?? null,
-                  onChange: o ? N : c,
-                  ...L,
-                  highlightedDates: P,
-                  timeStep: X,
-                  hourCycle: h,
-                  timeGranularity: u,
-                  defaultTime: Z
-                }
-              ) : o ? /* @__PURE__ */ e(
-                he,
-                {
-                  value: f,
-                  onChange: N,
-                  children: /* @__PURE__ */ e(
+                  className: r("flex", n === "md" ? "p-5" : "p-4"),
+                  children: l ? /* @__PURE__ */ e(
+                    ge,
+                    {
+                      value: o ? p : k(c) ?? null,
+                      onChange: o ? P : m,
+                      ...G,
+                      highlightedDates: S,
+                      timeStep: Z,
+                      hourCycle: f,
+                      timeGranularity: h,
+                      defaultTime: H,
+                      size: n
+                    }
+                  ) : o ? /* @__PURE__ */ e(
+                    pe,
+                    {
+                      value: p,
+                      onChange: P,
+                      children: /* @__PURE__ */ e(
+                        q,
+                        {
+                          ...G,
+                          highlightedDates: S,
+                          size: n
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ e(
                     q,
                     {
-                      ...L,
-                      highlightedDates: P
+                      highlightedDates: S,
+                      size: n
                     }
                   )
                 }
-              ) : /* @__PURE__ */ e(q, { highlightedDates: P }) }),
-              v && /* @__PURE__ */ m("div", { className: "grid grid-cols-2 gap-3 border-t border-secondary p-4", children: [
+              ),
+              w && /* @__PURE__ */ u("div", { className: "grid grid-cols-2 gap-2 border-t border-secondary px-4 py-3", children: [
                 /* @__PURE__ */ e(
-                  g,
+                  y,
                   {
-                    size: "md",
+                    size: n,
+                    className: E[n],
                     color: "secondary",
                     onClick: () => {
-                      x == null || x(), a();
+                      v == null || v(), s();
                     },
                     children: "Cancel"
                   }
                 ),
                 /* @__PURE__ */ e(
-                  g,
+                  y,
                   {
-                    size: "md",
+                    size: n,
+                    className: E[n],
                     color: "primary",
-                    onClick: () => J(a),
+                    onClick: () => Q(s),
                     children: "Apply"
                   }
                 )
@@ -233,5 +253,5 @@ const Oe = ({
   ) });
 };
 export {
-  Oe as DatePicker
+  Te as DatePicker
 };

package/dist/applications/date-picker/date-range-picker.d.ts

@@ -36,6 +36,10 @@ export interface DateRangePickerProps extends AriaDateRangePickerProps<DateValue
         endTime: string;
     }) => void;
     showFieldDropdown?: boolean;
+    /**
+     * Size of the trigger and of everything in the popover (calendars, presets, inputs, footer buttons).
+     * "xs" (28px days, 12px text), "sm" (36px days, 14px text), "md" or "lg" (40px days). Defaults to "xs".
+     */
     size?: "xs" | "sm" | "md" | "lg";
     buttonClassName?: string;
     iconClassName?: string;