@bug-on/m3-expressive 1.3.4 → 1.3.6

package/dist/pickers.mjs

@@ -2147,7 +2147,7 @@ var IconComponent = React6.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -2210,7 +2210,7 @@ var IconComponent = React6.forwardRef(
 );
 IconComponent.displayName = "Icon";
 var Icon = React6.memo(IconComponent);
-var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary";
+var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary whitespace-nowrap select-none min-w-0";
 var CalendarHeader = ({
   displayedMonthMs,
   activeSelector,
@@ -2236,57 +2236,70 @@ var CalendarHeader = ({
     timeZone: "UTC"
   }).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:--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: "xs",
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onToggleSelector("month"),
-          "aria-expanded": activeSelector === "month",
-          "aria-controls": "date-picker-selection",
-          className: cn(
-            selectorClassName,
-            activeSelector === "month" && "bg-m3-on-surface/8"
-          ),
-          children: [
-            monthLabel,
-            /* @__PURE__ */ jsx(
-              Icon,
-              {
-                name: "arrow_drop_down",
-                className: cn(
-                  "text-[20px] transition-transform duration-200",
-                  activeSelector === "month" && "rotate-180"
-                )
-              }
-            )
-          ]
-        }
-      ),
-      activeSelector === null && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: onNext,
-          "aria-label": "Next month",
-          disabled: !canNavigateNext,
-          size: "xs",
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-4 sm:px-6 pb-3 pt-5 w-full", 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 truncate", children: title }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mb-2 leading-tight text-[26px] sm:text-[32px] font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant truncate",
+        title: typeof headline === "string" ? headline : void 0,
+        children: headline
+      }
+    ),
+    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-10 items-center justify-between gap-0.5 w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 min-w-0 shrink", children: [
+        activeSelector === null && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onPrev,
+            "aria-label": "Previous month",
+            disabled: !canNavigatePrev,
+            size: "xs",
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggleSelector("month"),
+            "aria-expanded": activeSelector === "month",
+            "aria-controls": "date-picker-selection",
+            className: cn(
+              selectorClassName,
+              "min-w-0 max-w-[125px] shrink",
+              activeSelector === "month" && "bg-m3-on-surface/8"
+            ),
+            title: monthLabel,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: monthLabel }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "arrow_drop_down",
+                  className: cn(
+                    "text-[20px] shrink-0 transition-transform duration-200",
+                    activeSelector === "month" && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        activeSelector === null && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onNext,
+            "aria-label": "Next month",
+            disabled: !canNavigateNext,
+            size: "xs",
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5 shrink-0", children: [
         activeSelector === null && /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -2294,6 +2307,7 @@ var CalendarHeader = ({
             "aria-label": "Previous year",
             disabled: !canNavigatePreviousYear,
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
           }
         ),
@@ -2306,16 +2320,18 @@ var CalendarHeader = ({
             "aria-controls": "date-picker-selection",
             className: cn(
               selectorClassName,
+              "shrink-0",
               activeSelector === "year" && "bg-m3-on-surface/8"
             ),
+            title: yearLabel,
             children: [
-              yearLabel,
+              /* @__PURE__ */ jsx("span", { children: yearLabel }),
               /* @__PURE__ */ jsx(
                 Icon,
                 {
                   name: "arrow_drop_down",
                   className: cn(
-                    "text-[20px] transition-transform duration-200",
+                    "text-[20px] shrink-0 transition-transform duration-200",
                     activeSelector === "year" && "rotate-180"
                   )
                 }
@@ -2330,6 +2346,7 @@ var CalendarHeader = ({
             "aria-label": "Next year",
             disabled: !canNavigateNextYear,
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
           }
         ),
@@ -2339,6 +2356,7 @@ var CalendarHeader = ({
             onClick: onToggleMode,
             "aria-label": "Switch to text input",
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsx(Icon, { name: "keyboard" })
           }
         )
@@ -2350,7 +2368,7 @@ var CalendarHeader = ({
         onClick: onToggleMode,
         "aria-label": "Switch to calendar",
         size: "xs",
-        className: "self-end",
+        className: "self-end shrink-0",
         children: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" })
       }
     ),
@@ -2397,14 +2415,14 @@ var MonthPickerList = ({
             onClick: () => onMonthSelect(month),
             className: cn(
               "flex min-h-12 w-full items-center gap-4 px-6 text-left",
-              "text-[length:var(--md-typescale-body-large-size,16px)]",
+              "text-(length:--md-typescale-body-large-size,16px)",
               "text-m3-on-surface transition-m3-fast-effects",
               "hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary",
               isSelected && "bg-m3-secondary-container text-m3-on-secondary-container"
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "w-6", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-[20px]" }) }),
-              getMonthLabel(month, locale.locale)
+              /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-[20px]" }) }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: getMonthLabel(month, locale.locale) })
             ]
           },
           month
@@ -2482,7 +2500,9 @@ var DatePicker = ({
   showModeToggle = true,
   title,
   headline,
-  className
+  className,
+  width,
+  maxWidth
 }) => {
   const {
     selectedDateMs,
@@ -2563,7 +2583,10 @@ var DatePicker = ({
     "fieldset",
     {
       className: cn("flex flex-col select-none", className),
-      style: { width: "min(100%, 360px)" },
+      style: {
+        width: typeof width === "number" ? `${width}px` : width != null ? width : "min(100%, 360px)",
+        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
       "aria-label": computedAriaLabel,
       children: [
         /* @__PURE__ */ jsx("legend", { className: "sr-only", children: computedAriaLabel }),
@@ -2931,45 +2954,64 @@ var DialogOverlay = React6.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React6.forwardRef((_a, ref) => {
-  var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
-  return /* @__PURE__ */ jsx(
-    RadixDialog.Content,
-    __spreadProps(__spreadValues({
-      ref,
-      asChild: true,
-      "aria-describedby": void 0
-    }, props), {
-      children: /* @__PURE__ */ jsxs(
-        m.div,
-        __spreadProps(__spreadValues({
-          className: cn(
-            "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
-            "w-[calc(100%-2rem)] max-w-140",
-            "rounded-[28px] bg-m3-surface-container-high p-6",
-            "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
-            className
-          ),
-          role: "dialog"
-        }, MD3_CONTENT_ANIM), {
-          children: [
-            children,
-            !hideCloseButton && /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                size: "sm",
-                colorStyle: "filled",
-                className: "absolute right-4 top-4",
-                "aria-label": "Close",
-                children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
-              }
-            ) })
-          ]
-        })
-      )
-    })
-  );
-});
+var DEFAULT_CLOSE_BTN_PROPS = {
+  size: "sm",
+  colorStyle: "standard",
+  className: "absolute right-4 top-4",
+  "aria-label": "Close"
+};
+var DialogContent = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      hideCloseButton = false,
+      closeButtonProps,
+      closeButton
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "hideCloseButton",
+      "closeButtonProps",
+      "closeButton"
+    ]);
+    const closeAriaLabel = (() => {
+      var _a2, _b2, _c;
+      if (closeButton == null) {
+        return (_a2 = closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) != null ? _a2 : DEFAULT_CLOSE_BTN_PROPS["aria-label"];
+      }
+      const el = closeButton;
+      return (_c = (_b2 = el == null ? void 0 : el.props) == null ? void 0 : _b2["aria-label"]) != null ? _c : "Close";
+    })();
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        asChild: true,
+        "aria-describedby": void 0
+      }, props), {
+        children: /* @__PURE__ */ jsxs(
+          m.div,
+          __spreadProps(__spreadValues({
+            className: cn(
+              "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+              "w-[calc(100%-2rem)] max-w-140",
+              "rounded-[28px] bg-m3-surface-container-high p-6",
+              "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+              className
+            ),
+            role: "dialog"
+          }, MD3_CONTENT_ANIM), {
+            children: [
+              children,
+              closeButton != null ? /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": closeAriaLabel, children: closeButton }) : !hideCloseButton ? /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": closeAriaLabel, children: /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_CLOSE_BTN_PROPS), closeButtonProps), { children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" }) })) }) : null
+            ]
+          })
+        )
+      })
+    );
+  }
+);
 DialogContent.displayName = "DialogContent";
 var DialogIcon = React6.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
@@ -3036,6 +3078,8 @@ var DialogFullScreenContent = React6.forwardRef(
       title,
       actionLabel,
       onAction,
+      actionButtonProps,
+      closeButtonProps,
       showDivider
     } = _b, props = __objRest(_b, [
       "className",
@@ -3043,8 +3087,11 @@ var DialogFullScreenContent = React6.forwardRef(
       "title",
       "actionLabel",
       "onAction",
+      "actionButtonProps",
+      "closeButtonProps",
       "showDivider"
     ]);
+    var _a2;
     return /* @__PURE__ */ jsx(
       RadixDialog.Content,
       __spreadProps(__spreadValues({
@@ -3064,16 +3111,33 @@ var DialogFullScreenContent = React6.forwardRef(
           }, MD3_FULLSCREEN_ANIM), {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center px-4 h-14 gap-2 bg-m3-surface", children: [
-                /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", colorStyle: "filled", "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" }) }) }),
+                /* @__PURE__ */ jsx(
+                  RadixDialog.Close,
+                  {
+                    asChild: true,
+                    "aria-label": (_a2 = closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) != null ? _a2 : "Close",
+                    children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      __spreadProps(__spreadValues({
+                        size: "sm",
+                        colorStyle: "standard",
+                        "aria-label": "Close"
+                      }, closeButtonProps), {
+                        children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
+                      })
+                    )
+                  }
+                ),
                 title && /* @__PURE__ */ jsx(DialogTitle, { className: "flex-1 text-[22px] leading-7 font-medium truncate pr-2", children: title }),
                 actionLabel && onAction && /* @__PURE__ */ jsx(
                   "button",
-                  {
+                  __spreadProps(__spreadValues({
                     type: "button",
                     onClick: onAction,
-                    className: "text-sm font-medium text-m3-primary px-3 py-2 rounded-full hover:bg-m3-primary/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary transition-colors whitespace-nowrap",
+                    className: "text-sm font-medium text-m3-primary px-3 py-2 rounded-full hover:bg-m3-primary/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary transition-colors whitespace-nowrap disabled:opacity-[0.38] disabled:pointer-events-none"
+                  }, actionButtonProps), {
                     children: actionLabel
-                  }
+                  })
                 )
               ] }),
               showDivider && /* @__PURE__ */ jsx("hr", { className: "border-m3-outline-variant w-full shrink-0 m-0" }),
@@ -3101,7 +3165,9 @@ var DatePickerDialog = ({
   dismissButton,
   children,
   className,
-  title = "Select date"
+  title = "Select date",
+  width,
+  maxWidth
 }) => {
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => !v && onDismiss(), children: /* @__PURE__ */ jsxs(DialogPortal, { open, children: [
     /* @__PURE__ */ jsx(RadixDialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
@@ -3137,7 +3203,10 @@ var DatePickerDialog = ({
               "elevation-3",
               className
             ),
-            style: { width: "min(calc(100vw - 32px), 360px)" },
+            style: {
+              width: typeof width === "number" ? `${width}px` : width != null ? width : "min(calc(100vw - 32px), 360px)",
+              maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+            },
             initial: PICKER_CONTENT_ANIM.initial,
             animate: PICKER_CONTENT_ANIM.animate,
             exit: PICKER_CONTENT_ANIM.exit,
@@ -3161,7 +3230,9 @@ var DateRangePicker = ({
   state,
   showModeToggle = false,
   title,
-  className
+  className,
+  width,
+  maxWidth
 }) => {
   const {
     selectedStartMs,
@@ -3233,7 +3304,10 @@ var DateRangePicker = ({
     "fieldset",
     {
       className: cn("flex flex-col select-none", className),
-      style: { width: "min(100%, 360px)" },
+      style: {
+        width: typeof width === "number" ? `${width}px` : width != null ? width : "min(100%, 360px)",
+        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
       "aria-label": computedAriaLabel,
       children: [
         /* @__PURE__ */ jsx("legend", { className: "sr-only", children: computedAriaLabel }),
@@ -4059,21 +4133,13 @@ var normalizeAngle = (angle) => {
   return a;
 };
 var angleToHour12 = (angle) => {
-  const hourOffset = RADIANS_PER_HOUR / 2;
-  const totalOffset = hourOffset + QUARTER_CIRCLE;
-  const hour = Math.round((angle + totalOffset) / RADIANS_PER_HOUR) % 12;
+  const normalized = normalizeAngle(angle + QUARTER_CIRCLE);
+  const hour = Math.round(normalized / RADIANS_PER_HOUR) % 12;
   return hour === 0 ? 12 : hour;
 };
-var angleToMinute = (angle, snap = true) => {
-  if (snap) {
-    const minuteOffset = RADIANS_PER_MINUTE / 2;
-    const totalOffset = minuteOffset + QUARTER_CIRCLE;
-    const raw2 = Math.round((angle + totalOffset) / RADIANS_PER_MINUTE) % 60;
-    return raw2 < 0 ? raw2 + 60 : raw2;
-  }
+var angleToMinute = (angle, _snap = true) => {
   const normalized = normalizeAngle(angle + QUARTER_CIRCLE);
-  const raw = Math.round(normalized / FULL_CIRCLE * 60) % 60;
-  return raw < 0 ? raw + 60 : raw;
+  return Math.round(normalized / RADIANS_PER_MINUTE) % 60;
 };
 var getSelectorPosition = (angle, selection, is24hour, isPm) => {
   const useInner = is24hour && isPm && selection === "hour";