@bug-on/m3-expressive 1.2.1 → 1.2.3

package/dist/pickers.mjs

@@ -44,6 +44,97 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/ui/shared/motion-tokens.ts
+var FAST_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 800,
+  damping: 33.94
+};
+var DEFAULT_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 31.19
+};
+var FAST_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 3800,
+  damping: 123.29
+};
+var DEFAULT_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 1600,
+  damping: 80
+};
+
+// src/ui/date-time-pickers/shared/animation-tokens.ts
+var PICKER_OVERLAY_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: [0, 0, 0, 1] }
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var PICKER_CONTENT_ANIM = {
+  initial: { opacity: 0, scale: 0.85, y: 16 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: DEFAULT_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 8,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var CALENDAR_SLIDE_VARIANTS = {
+  enterFromRight: {
+    x: "100%",
+    opacity: 0
+  },
+  enterFromLeft: {
+    x: "-100%",
+    opacity: 0
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+    transition: FAST_SPATIAL_SPRING
+  },
+  exitToLeft: {
+    x: "-100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  },
+  exitToRight: {
+    x: "100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var PICKER_SELECTOR_ANIM = {
+  initial: { opacity: 0, scale: 0.95, y: -6 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: DEFAULT_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 6,
+    transition: { duration: 0.1, ease: "easeIn" }
+  }
+};
+var DAY_CELL_STATE_TRANSITION = FAST_EFFECTS_SPRING;
+
 // src/ui/date-time-pickers/shared/calendar-model.ts
 var startOfDayUTC = (ms) => {
   const d = new Date(ms);
@@ -235,82 +326,6 @@ var DatePickerInput = ({
   ] }) }) });
 };
 DatePickerInput.displayName = "DatePickerInput";
-
-// src/ui/shared/motion-tokens.ts
-var FAST_SPATIAL_SPRING = {
-  type: "spring",
-  stiffness: 800,
-  damping: 33.94
-};
-var DEFAULT_SPATIAL_SPRING = {
-  type: "spring",
-  stiffness: 380,
-  damping: 31.19
-};
-var FAST_EFFECTS_SPRING = {
-  type: "spring",
-  stiffness: 3800,
-  damping: 123.29
-};
-var DEFAULT_EFFECTS_SPRING = {
-  type: "spring",
-  stiffness: 1600,
-  damping: 80
-};
-
-// src/ui/date-time-pickers/shared/animation-tokens.ts
-var PICKER_OVERLAY_ANIM = {
-  initial: { opacity: 0 },
-  animate: {
-    opacity: 1,
-    transition: { duration: 0.2, ease: [0, 0, 0, 1] }
-  },
-  exit: {
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var PICKER_CONTENT_ANIM = {
-  initial: { opacity: 0, scale: 0.85, y: 16 },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    transition: DEFAULT_SPATIAL_SPRING
-  },
-  exit: {
-    opacity: 0,
-    scale: 0.95,
-    y: 8,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var CALENDAR_SLIDE_VARIANTS = {
-  enterFromRight: {
-    x: "100%",
-    opacity: 0
-  },
-  enterFromLeft: {
-    x: "-100%",
-    opacity: 0
-  },
-  center: {
-    x: 0,
-    opacity: 1,
-    transition: FAST_SPATIAL_SPRING
-  },
-  exitToLeft: {
-    x: "-100%",
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  },
-  exitToRight: {
-    x: "100%",
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var DAY_CELL_STATE_TRANSITION = FAST_EFFECTS_SPRING;
 var DayCell = ({
   day,
   selectedMs,
@@ -1466,7 +1481,10 @@ function useRippleState(options = {}) {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+      const rippleSize = Math.max(
+        Math.hypot(rect.width, rect.height) * 2.5,
+        320
+      );
       setRipples((prev) => [
         ...prev,
         { id: Date.now(), x, y, size: rippleSize }
@@ -1497,12 +1515,39 @@ function TouchTarget() {
     }
   );
 }
-var SIZE_STYLES = {
-  xs: "h-8 w-8",
-  sm: "h-10 w-10",
-  md: "h-14 w-14",
-  lg: "h-24 w-24",
-  xl: "h-[8.5rem] w-[8.5rem]"
+var SIZE_HEIGHT_STYLES = {
+  xs: "h-8",
+  sm: "h-10",
+  md: "h-14",
+  lg: "h-24",
+  xl: "h-[8.5rem]"
+};
+var WIDTH_SIZE_STYLES = {
+  xs: {
+    default: "w-8",
+    narrow: "w-8",
+    wide: "w-12"
+  },
+  sm: {
+    default: "w-10",
+    narrow: "w-12",
+    wide: "w-[3.25rem]"
+  },
+  md: {
+    default: "w-14",
+    narrow: "w-12",
+    wide: "w-[4.5rem]"
+  },
+  lg: {
+    default: "w-24",
+    narrow: "w-16",
+    wide: "w-32"
+  },
+  xl: {
+    default: "w-[8.5rem]",
+    narrow: "w-[6.5rem]",
+    wide: "w-[11.5rem]"
+  }
 };
 var SIZE_ICON = {
   xs: { cls: "size-5", px: 20 },
@@ -1603,8 +1648,10 @@ var IconButtonComponent = React13.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
@@ -1619,8 +1666,10 @@ var IconButtonComponent = React13.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
@@ -1630,7 +1679,7 @@ var IconButtonComponent = React13.forwardRef(
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
     const resolvedColorClass = React13.useMemo(
@@ -1661,6 +1710,8 @@ var IconButtonComponent = React13.forwardRef(
     const defaultIconPx = sizeIcon.px;
     const iconPx = iconSize != null ? iconSize : defaultIconPx;
     const isCustomSize = iconSize != null && iconSize !== "inherit";
+    const heightClass = (_c = SIZE_HEIGHT_STYLES[size]) != null ? _c : SIZE_HEIGHT_STYLES.sm;
+    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[widthVariant]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
     const needsTouchTarget = size === "xs" || size === "sm";
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
@@ -1723,7 +1774,7 @@ var IconButtonComponent = React13.forwardRef(
           transition: SPRING_TRANSITION,
           "aria-hidden": "true",
           className: cn(
-            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]",
             iconSize != null ? void 0 : iconClass
           ),
           style: {
@@ -1731,9 +1782,9 @@ var IconButtonComponent = React13.forwardRef(
             width: isCustomSize ? `${iconSize}px` : void 0,
             height: isCustomSize ? `${iconSize}px` : void 0
           },
-          children: asChild ? React13.Children.only(children).props.children : children
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React13.Children.only(children).props.children : children
         }),
-        "content"
+        isSelected && selectedIcon ? "selected-content" : "content"
       ) })
     ] });
     const containerClassName = cn(
@@ -1742,7 +1793,8 @@ var IconButtonComponent = React13.forwardRef(
       outlineWidthClass,
       disabledBgClass,
       "overflow-hidden",
-      SIZE_STYLES[size],
+      heightClass,
+      widthClass,
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
     );
@@ -1759,7 +1811,9 @@ var IconButtonComponent = React13.forwardRef(
           onClick: handleClick,
           onPointerDown,
           onKeyDown: handleKeyDown,
-          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          style: __spreadProps(__spreadValues({}, style), {
+            borderRadius: `${animateRadius}px`
+          }),
           className: containerClassName
         }, restProps), {
           children: React13.cloneElement(child, { children: innerContent })
@@ -1890,16 +1944,16 @@ var CalendarHeader = ({
   }).format(date);
   const yearLabel = String(date.getUTCFullYear());
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-6 pb-4 pt-5", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[length:var(--md-typescale-label-large-size,14px)] font-[number:var(--md-typescale-label-large-weight,500)] text-m3-on-surface-variant", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "mb-2 leading-tight text-[length:var(--md-typescale-headline-large-size,32px)] font-[number:var(--md-typescale-headline-large-weight,400)] text-m3-on-surface-variant", children: headline }),
-    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "-mx-2 flex min-h-10 items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-(length:--md-typescale-label-large-size,14px) font-(--md-typescale-label-large-weight,500) text-m3-on-surface-variant", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "mb-2 leading-tight text-(length:--md-typescale-headline-large-size,32px) font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant", children: headline }),
+    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-10 items-center gap-0.5", children: [
       activeSelector === null && /* @__PURE__ */ jsx(
         IconButton,
         {
           onClick: onPrev,
           "aria-label": "Previous month",
           disabled: !canNavigatePrev,
-          size: "sm",
+          size: "xs",
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
         }
       ),
@@ -1921,7 +1975,7 @@ var CalendarHeader = ({
               {
                 name: "arrow_drop_down",
                 className: cn(
-                  "text-[20px]",
+                  "text-[20px] transition-transform duration-200",
                   activeSelector === "month" && "rotate-180"
                 )
               }
@@ -1935,7 +1989,7 @@ var CalendarHeader = ({
           onClick: onNext,
           "aria-label": "Next month",
           disabled: !canNavigateNext,
-          size: "sm",
+          size: "xs",
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
         }
       ),
@@ -1946,7 +2000,7 @@ var CalendarHeader = ({
             onClick: onPreviousYear,
             "aria-label": "Previous year",
             disabled: !canNavigatePreviousYear,
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
           }
         ),
@@ -1968,7 +2022,7 @@ var CalendarHeader = ({
                 {
                   name: "arrow_drop_down",
                   className: cn(
-                    "text-[20px]",
+                    "text-[20px] transition-transform duration-200",
                     activeSelector === "year" && "rotate-180"
                   )
                 }
@@ -1982,7 +2036,7 @@ var CalendarHeader = ({
             onClick: onNextYear,
             "aria-label": "Next year",
             disabled: !canNavigateNextYear,
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
           }
         ),
@@ -1991,7 +2045,7 @@ var CalendarHeader = ({
           {
             onClick: onToggleMode,
             "aria-label": "Switch to text input",
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsx(Icon, { name: "keyboard" })
           }
         )
@@ -2002,7 +2056,7 @@ var CalendarHeader = ({
       {
         onClick: onToggleMode,
         "aria-label": "Switch to calendar",
-        size: "sm",
+        size: "xs",
         className: "self-end",
         children: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" })
       }
@@ -2265,9 +2319,12 @@ var DatePicker = ({
                 "input-mode"
               )
             ) : activeSelector === "month" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   MonthPickerList,
@@ -2280,9 +2337,12 @@ var DatePicker = ({
               },
               "month-list"
             ) : activeSelector === "year" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   YearPickerList,
@@ -2915,9 +2975,12 @@ var DateRangePicker = ({
             className: "relative flex-1 overflow-hidden",
             style: { minHeight: "296px" },
             children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeSelector === "month" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   MonthPickerList,
@@ -2930,9 +2993,12 @@ var DateRangePicker = ({
               },
               "month-list"
             ) : activeSelector === "year" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   YearPickerList,
@@ -4101,7 +4167,7 @@ var TimePickerDialog = ({
 TimePickerDialog.displayName = "TimePickerDialog";
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 var isValidHourInput = (h, is24hour) => is24hour ? h >= 0 && h <= 23 : h >= 1 && h <= 12;
-var isValidMinuteInput = (m11) => m11 >= 0 && m11 <= 59;
+var isValidMinuteInput = (m13) => m13 >= 0 && m13 <= 59;
 var to24Hour = (hour12, isPm) => {
   if (isPm) {
     return hour12 === 12 ? 12 : hour12 + 12;
@@ -4137,8 +4203,8 @@ var useTimePickerState = (options) => {
     },
     [is24hour]
   );
-  const setMinute = useCallback((m11) => {
-    const clamped = clamp(m11, 0, 59);
+  const setMinute = useCallback((m13) => {
+    const clamped = clamp(m13, 0, 59);
     setMinuteState(clamped);
     setMinuteInputState(clamped);
   }, []);
@@ -4152,10 +4218,10 @@ var useTimePickerState = (options) => {
     },
     [is24hour, isPm]
   );
-  const setMinuteInput = useCallback((m11) => {
-    setMinuteInputState(m11);
-    if (isValidMinuteInput(m11)) {
-      setMinuteState(m11);
+  const setMinuteInput = useCallback((m13) => {
+    setMinuteInputState(m13);
+    if (isValidMinuteInput(m13)) {
+      setMinuteState(m13);
     }
   }, []);
   const setSelection = useCallback((mode) => {