@bug-on/m3-expressive 1.3.5 → 1.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/forms.d.mts +2 -2
  3. package/dist/forms.d.ts +2 -2
  4. package/dist/forms.js +16 -6
  5. package/dist/forms.js.map +1 -1
  6. package/dist/forms.mjs +16 -6
  7. package/dist/forms.mjs.map +1 -1
  8. package/dist/index.d.mts +4 -4
  9. package/dist/index.d.ts +4 -4
  10. package/dist/index.js +722 -187
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mjs +718 -188
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/{md3-expressive-shapes-CPcfl_Hf.d.mts → md3-expressive-shapes-wk_98LJh.d.mts} +20 -1
  15. package/dist/{md3-expressive-shapes-CPcfl_Hf.d.ts → md3-expressive-shapes-wk_98LJh.d.ts} +20 -1
  16. package/dist/navigation.d.mts +1 -1
  17. package/dist/navigation.d.ts +1 -1
  18. package/dist/navigation.js +73 -20
  19. package/dist/navigation.js.map +1 -1
  20. package/dist/navigation.mjs +73 -20
  21. package/dist/navigation.mjs.map +1 -1
  22. package/dist/overlays.d.mts +4 -2
  23. package/dist/overlays.d.ts +4 -2
  24. package/dist/overlays.js +84 -43
  25. package/dist/overlays.js.map +1 -1
  26. package/dist/overlays.mjs +84 -43
  27. package/dist/overlays.mjs.map +1 -1
  28. package/dist/pickers.js +88 -55
  29. package/dist/pickers.js.map +1 -1
  30. package/dist/pickers.mjs +88 -55
  31. package/dist/pickers.mjs.map +1 -1
  32. package/dist/shapes.d.mts +141 -15
  33. package/dist/shapes.d.ts +141 -15
  34. package/dist/shapes.js +618 -126
  35. package/dist/shapes.js.map +1 -1
  36. package/dist/shapes.mjs +614 -127
  37. package/dist/shapes.mjs.map +1 -1
  38. package/dist/{side-sheet-modal-64FGhDxL.d.mts → side-sheet-modal-BycxrabB.d.mts} +70 -0
  39. package/dist/{side-sheet-modal-Bd5Qqvp9.d.ts → side-sheet-modal-Cw4vemKx.d.ts} +70 -0
  40. package/dist/{text-field-4OlT9o8s.d.mts → text-field-B1fLh5Sh.d.mts} +22 -3
  41. package/dist/{text-field-DARNdj14.d.ts → text-field-C0VQLp8Y.d.ts} +22 -3
  42. package/llms-full.txt +7 -0
  43. package/package.json +1 -1
package/dist/pickers.mjs CHANGED
@@ -2954,45 +2954,64 @@ var DialogOverlay = React6.forwardRef((_a, ref) => {
2954
2954
  ) }));
2955
2955
  });
2956
2956
  DialogOverlay.displayName = "DialogOverlay";
2957
- var DialogContent = React6.forwardRef((_a, ref) => {
2958
- var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
2959
- return /* @__PURE__ */ jsx(
2960
- RadixDialog.Content,
2961
- __spreadProps(__spreadValues({
2962
- ref,
2963
- asChild: true,
2964
- "aria-describedby": void 0
2965
- }, props), {
2966
- children: /* @__PURE__ */ jsxs(
2967
- m.div,
2968
- __spreadProps(__spreadValues({
2969
- className: cn(
2970
- "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
2971
- "w-[calc(100%-2rem)] max-w-140",
2972
- "rounded-[28px] bg-m3-surface-container-high p-6",
2973
- "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
2974
- className
2975
- ),
2976
- role: "dialog"
2977
- }, MD3_CONTENT_ANIM), {
2978
- children: [
2979
- children,
2980
- !hideCloseButton && /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(
2981
- IconButton,
2982
- {
2983
- size: "sm",
2984
- colorStyle: "filled",
2985
- className: "absolute right-4 top-4",
2986
- "aria-label": "Close",
2987
- children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
2988
- }
2989
- ) })
2990
- ]
2991
- })
2992
- )
2993
- })
2994
- );
2995
- });
2957
+ var DEFAULT_CLOSE_BTN_PROPS = {
2958
+ size: "sm",
2959
+ colorStyle: "standard",
2960
+ className: "absolute right-4 top-4",
2961
+ "aria-label": "Close"
2962
+ };
2963
+ var DialogContent = React6.forwardRef(
2964
+ (_a, ref) => {
2965
+ var _b = _a, {
2966
+ className,
2967
+ children,
2968
+ hideCloseButton = false,
2969
+ closeButtonProps,
2970
+ closeButton
2971
+ } = _b, props = __objRest(_b, [
2972
+ "className",
2973
+ "children",
2974
+ "hideCloseButton",
2975
+ "closeButtonProps",
2976
+ "closeButton"
2977
+ ]);
2978
+ const closeAriaLabel = (() => {
2979
+ var _a2, _b2, _c;
2980
+ if (closeButton == null) {
2981
+ return (_a2 = closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) != null ? _a2 : DEFAULT_CLOSE_BTN_PROPS["aria-label"];
2982
+ }
2983
+ const el = closeButton;
2984
+ return (_c = (_b2 = el == null ? void 0 : el.props) == null ? void 0 : _b2["aria-label"]) != null ? _c : "Close";
2985
+ })();
2986
+ return /* @__PURE__ */ jsx(
2987
+ RadixDialog.Content,
2988
+ __spreadProps(__spreadValues({
2989
+ ref,
2990
+ asChild: true,
2991
+ "aria-describedby": void 0
2992
+ }, props), {
2993
+ children: /* @__PURE__ */ jsxs(
2994
+ m.div,
2995
+ __spreadProps(__spreadValues({
2996
+ className: cn(
2997
+ "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
2998
+ "w-[calc(100%-2rem)] max-w-140",
2999
+ "rounded-[28px] bg-m3-surface-container-high p-6",
3000
+ "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
3001
+ className
3002
+ ),
3003
+ role: "dialog"
3004
+ }, MD3_CONTENT_ANIM), {
3005
+ children: [
3006
+ children,
3007
+ 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
3008
+ ]
3009
+ })
3010
+ )
3011
+ })
3012
+ );
3013
+ }
3014
+ );
2996
3015
  DialogContent.displayName = "DialogContent";
2997
3016
  var DialogIcon = React6.forwardRef((_a, ref) => {
2998
3017
  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
@@ -3059,6 +3078,8 @@ var DialogFullScreenContent = React6.forwardRef(
3059
3078
  title,
3060
3079
  actionLabel,
3061
3080
  onAction,
3081
+ actionButtonProps,
3082
+ closeButtonProps,
3062
3083
  showDivider
3063
3084
  } = _b, props = __objRest(_b, [
3064
3085
  "className",
@@ -3066,8 +3087,11 @@ var DialogFullScreenContent = React6.forwardRef(
3066
3087
  "title",
3067
3088
  "actionLabel",
3068
3089
  "onAction",
3090
+ "actionButtonProps",
3091
+ "closeButtonProps",
3069
3092
  "showDivider"
3070
3093
  ]);
3094
+ var _a2;
3071
3095
  return /* @__PURE__ */ jsx(
3072
3096
  RadixDialog.Content,
3073
3097
  __spreadProps(__spreadValues({
@@ -3087,16 +3111,33 @@ var DialogFullScreenContent = React6.forwardRef(
3087
3111
  }, MD3_FULLSCREEN_ANIM), {
3088
3112
  children: [
3089
3113
  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center px-4 h-14 gap-2 bg-m3-surface", children: [
3090
- /* @__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" }) }) }),
3114
+ /* @__PURE__ */ jsx(
3115
+ RadixDialog.Close,
3116
+ {
3117
+ asChild: true,
3118
+ "aria-label": (_a2 = closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) != null ? _a2 : "Close",
3119
+ children: /* @__PURE__ */ jsx(
3120
+ IconButton,
3121
+ __spreadProps(__spreadValues({
3122
+ size: "sm",
3123
+ colorStyle: "standard",
3124
+ "aria-label": "Close"
3125
+ }, closeButtonProps), {
3126
+ children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
3127
+ })
3128
+ )
3129
+ }
3130
+ ),
3091
3131
  title && /* @__PURE__ */ jsx(DialogTitle, { className: "flex-1 text-[22px] leading-7 font-medium truncate pr-2", children: title }),
3092
3132
  actionLabel && onAction && /* @__PURE__ */ jsx(
3093
3133
  "button",
3094
- {
3134
+ __spreadProps(__spreadValues({
3095
3135
  type: "button",
3096
3136
  onClick: onAction,
3097
- 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",
3137
+ 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"
3138
+ }, actionButtonProps), {
3098
3139
  children: actionLabel
3099
- }
3140
+ })
3100
3141
  )
3101
3142
  ] }),
3102
3143
  showDivider && /* @__PURE__ */ jsx("hr", { className: "border-m3-outline-variant w-full shrink-0 m-0" }),
@@ -4092,21 +4133,13 @@ var normalizeAngle = (angle) => {
4092
4133
  return a;
4093
4134
  };
4094
4135
  var angleToHour12 = (angle) => {
4095
- const hourOffset = RADIANS_PER_HOUR / 2;
4096
- const totalOffset = hourOffset + QUARTER_CIRCLE;
4097
- const hour = Math.round((angle + totalOffset) / RADIANS_PER_HOUR) % 12;
4136
+ const normalized = normalizeAngle(angle + QUARTER_CIRCLE);
4137
+ const hour = Math.round(normalized / RADIANS_PER_HOUR) % 12;
4098
4138
  return hour === 0 ? 12 : hour;
4099
4139
  };
4100
- var angleToMinute = (angle, snap = true) => {
4101
- if (snap) {
4102
- const minuteOffset = RADIANS_PER_MINUTE / 2;
4103
- const totalOffset = minuteOffset + QUARTER_CIRCLE;
4104
- const raw2 = Math.round((angle + totalOffset) / RADIANS_PER_MINUTE) % 60;
4105
- return raw2 < 0 ? raw2 + 60 : raw2;
4106
- }
4140
+ var angleToMinute = (angle, _snap = true) => {
4107
4141
  const normalized = normalizeAngle(angle + QUARTER_CIRCLE);
4108
- const raw = Math.round(normalized / FULL_CIRCLE * 60) % 60;
4109
- return raw < 0 ? raw + 60 : raw;
4142
+ return Math.round(normalized / RADIANS_PER_MINUTE) % 60;
4110
4143
  };
4111
4144
  var getSelectorPosition = (angle, selection, is24hour, isPm) => {
4112
4145
  const useInner = is24hour && isPm && selection === "hour";