@bug-on/m3-expressive 1.3.4 → 1.3.5

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 (60) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +31 -7
  3. package/dist/assets/material-symbols-cdn.css +17 -23
  4. package/dist/buttons.js +129 -35
  5. package/dist/buttons.js.map +1 -1
  6. package/dist/buttons.mjs +129 -35
  7. package/dist/buttons.mjs.map +1 -1
  8. package/dist/{core-COvZHQ_k.d.ts → core-Cckt8qEm.d.ts} +10 -4
  9. package/dist/{core-CRkixy1y.d.mts → core-DDfG4pym.d.mts} +10 -4
  10. package/dist/core.d.mts +2 -2
  11. package/dist/core.d.ts +2 -2
  12. package/dist/core.js +6 -5
  13. package/dist/core.js.map +1 -1
  14. package/dist/core.mjs +6 -5
  15. package/dist/core.mjs.map +1 -1
  16. package/dist/fading-blur-mask--uZbBKLj.d.mts +77 -0
  17. package/dist/fading-blur-mask--uZbBKLj.d.ts +77 -0
  18. package/dist/feedback.js +1 -1
  19. package/dist/feedback.js.map +1 -1
  20. package/dist/feedback.mjs +1 -1
  21. package/dist/feedback.mjs.map +1 -1
  22. package/dist/forms.js +1 -1
  23. package/dist/forms.js.map +1 -1
  24. package/dist/forms.mjs +1 -1
  25. package/dist/forms.mjs.map +1 -1
  26. package/dist/index.d.mts +5 -4
  27. package/dist/index.d.ts +5 -4
  28. package/dist/index.js +266 -122
  29. package/dist/index.js.map +1 -1
  30. package/dist/index.mjs +266 -122
  31. package/dist/index.mjs.map +1 -1
  32. package/dist/layout.d.mts +5 -3
  33. package/dist/layout.d.ts +5 -3
  34. package/dist/layout.js +61 -6
  35. package/dist/layout.js.map +1 -1
  36. package/dist/layout.mjs +61 -7
  37. package/dist/layout.mjs.map +1 -1
  38. package/dist/material-symbols-cdn.css +17 -23
  39. package/dist/navigation.d.mts +25 -83
  40. package/dist/navigation.d.ts +25 -83
  41. package/dist/navigation.js +22 -9
  42. package/dist/navigation.js.map +1 -1
  43. package/dist/navigation.mjs +22 -9
  44. package/dist/navigation.mjs.map +1 -1
  45. package/dist/overlays.js +1 -1
  46. package/dist/overlays.js.map +1 -1
  47. package/dist/overlays.mjs +1 -1
  48. package/dist/overlays.mjs.map +1 -1
  49. package/dist/pickers.d.mts +12 -0
  50. package/dist/pickers.d.ts +12 -0
  51. package/dist/pickers.js +98 -65
  52. package/dist/pickers.js.map +1 -1
  53. package/dist/pickers.mjs +98 -65
  54. package/dist/pickers.mjs.map +1 -1
  55. package/dist/{typography-339RV6v7.d.mts → typography-CKTjvlZ4.d.mts} +25 -0
  56. package/dist/{typography-339RV6v7.d.ts → typography-CKTjvlZ4.d.ts} +25 -0
  57. package/dist/typography.css +1 -1
  58. package/llms-full.txt +17 -13
  59. package/llms.txt +11 -6
  60. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @bug-on/m3-expressive
2
2
 
3
+ ## 1.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - 3aa2839: - **FadingBlurMask**: Added `FadingBlurMask` component export to layout entry with directional fading blur masks and seamless app bar backdrop blur support.
8
+ - **Date & Time Pickers**: Improved responsive sizing, calendar header controls, and month-picker list alignment.
9
+ - **Search**: Enhanced docked and fullscreen search view interactions, keyboard navigation, and avatar support.
10
+ - **FAB & Navigation**: Refined FAB expansion animations and border radius transitions in navigation rails.
11
+ - **Typography & Icons**: Enhanced font axes playground, CDN preconnect helpers, and updated typography tokens.
12
+ - **Tailwind & Fonts**: Updated theme utilities, font definitions, and documentation demos.
13
+ - Updated dependencies [3aa2839]
14
+ - @bug-on/m3-tailwind@1.2.3
15
+
3
16
  ## 1.3.4
4
17
 
5
18
  ### Patch Changes
package/README.md CHANGED
@@ -56,22 +56,41 @@ Import the required stylesheets into your application's root CSS entry point (e.
56
56
  @import "@bug-on/m3-expressive/typography.css";
57
57
  ```
58
58
 
59
- ### Icon Font Setup (Material Symbols Outlined)
59
+ ### Icon Font Setup (Material Symbols)
60
60
 
61
- The `<Icon />` component renders **Material Symbols Outlined** variable font glyphs:
61
+ The `<Icon />` component renders **Material Symbols** (defaulting to **Material Symbols Rounded**) variable font glyphs:
62
62
 
63
63
  #### Option A: Google Fonts CDN (Recommended for Web)
64
64
 
65
+ **1. For React + Vite:** Add stylesheet and preconnect tags to `index.html` inside `<head>` (using `display=block` prevents ligature text flashing), and import the base CSS in your main stylesheet:
66
+
67
+ ```html
68
+ <!-- index.html -->
69
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
70
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
71
+ <link
72
+ rel="stylesheet"
73
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
74
+ />
75
+ ```
76
+
77
+ ```css
78
+ /* src/index.css */
79
+ @import "@bug-on/m3-expressive/material-symbols-cdn.css";
80
+ ```
81
+
82
+ **2. For Next.js (App Router):** Place `<MaterialSymbolsPreconnect />` inside `<head>` in `app/layout.tsx`, and import the base CSS in `globals.css`:
83
+
65
84
  ```tsx
66
85
  // app/layout.tsx
67
- import "@bug-on/m3-expressive/material-symbols-cdn.css";
68
86
  import { MaterialSymbolsPreconnect } from "@bug-on/m3-expressive";
87
+ import "./globals.css";
69
88
 
70
89
  export default function RootLayout({ children }: { children: React.ReactNode }) {
71
90
  return (
72
91
  <html lang="en">
73
92
  <head>
74
- <MaterialSymbolsPreconnect />
93
+ <MaterialSymbolsPreconnect variants={["rounded"]} display="block" />
75
94
  </head>
76
95
  <body>{children}</body>
77
96
  </html>
@@ -79,6 +98,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
79
98
  }
80
99
  ```
81
100
 
101
+ ```css
102
+ /* app/globals.css */
103
+ @import "@bug-on/m3-expressive/material-symbols-cdn.css";
104
+ ```
105
+
82
106
  #### Option B: Offline / Self-Hosted Assets
83
107
 
84
108
  For air-gapped networks, enterprise privacy, or offline PWAs, install `@bug-on/m3-fonts`:
@@ -100,13 +124,13 @@ Optimize your bundle size and tree-shaking by importing directly from modular su
100
124
 
101
125
  | Subpath Import | Module Contents |
102
126
  | :--- | :--- |
103
- | `@bug-on/m3-expressive/core` | `MD3ThemeProvider`, `createMd3ExpressiveTheme`, `generateM3Theme`, `applyTheme`, `useTheme`, `useThemeMode`, `Icon`, `Ripple`, `MaterialSymbolsPreconnect`, `cn` |
127
+ | `@bug-on/m3-expressive/core` | `MD3ThemeProvider`, `createMd3ExpressiveTheme`, `generateM3Theme`, `applyTheme`, `resolveMode`, `useTheme`, `useThemeMode`, `Icon`, `Ripple`, `MaterialSymbolsPreconnect`, `useMediaQuery`, `useDOMRipple` |
104
128
  | `@bug-on/m3-expressive/buttons` | `Button`, `IconButton`, `FAB`, `ExtendedFAB`, `FABMenu`, `SplitButton`, `ButtonGroup`, `ButtonDistribute` |
105
- | `@bug-on/m3-expressive/forms` | `TextField`, `Checkbox`, `TriStateCheckbox`, `RadioButton`, `RadioGroup`, `Switch`, `Slider`, `RangeSlider`, `Select`, `Chip`, `Search` |
129
+ | `@bug-on/m3-expressive/forms` | `TextField`, `Checkbox`, `TriStateCheckbox`, `RadioButton`, `RadioGroup`, `Switch`, `Slider`, `RangeSlider`, `Select`, `Chip` |
106
130
  | `@bug-on/m3-expressive/navigation` | `NavigationBar`, `NavigationRail`, `NavigationDrawer`, `Tabs`, `Tab`, `TabsList`, `TabsContent`, `SmallAppBar`, `MediumFlexibleAppBar`, `LargeFlexibleAppBar`, `BottomAppBar`, `DockedToolbar`, `HorizontalFloatingToolbar`, `VerticalFloatingToolbar`, `Menu`, `ContextMenu`, `VerticalMenu`, `Search` |
107
131
  | `@bug-on/m3-expressive/overlays` | `Dialog`, `DialogFullScreenContent`, `Drawer`, `BottomSheet`, `BottomSheetModal`, `SideSheet`, `SideSheetModal` |
108
132
  | `@bug-on/m3-expressive/feedback` | `Snackbar`, `SnackbarProvider`, `useSnackbar`, `ProgressIndicator` (linear, circular, wavy), `LoadingIndicator`, `Badge`, `BadgedBox`, `PlainTooltip`, `RichTooltip` |
109
- | `@bug-on/m3-expressive/layout` | `Card`, `Carousel` (Morphing layout, Multi-browse, Uncontained), `Divider`, `List`, `ListItem`, `ListDivider`, `ScrollArea`, `CodeBlock`, `TableOfContents`, `Text`, `Typography` |
133
+ | `@bug-on/m3-expressive/layout` | `Card`, `Carousel` (Morphing layout, Multi-browse, Uncontained), `Divider`, `List`, `ListItem`, `ListDivider`, `ScrollArea`, `CodeBlock`, `TableOfContents`, `Text`, `Typography`, `FadingBlurMask` |
110
134
  | `@bug-on/m3-expressive/pickers` | `DatePicker`, `DatePickerDialog`, `DatePickerInput`, `DateRangePicker`, `TimePicker`, `TimePickerDialog`, `TimeInput`, `useDatePickerState`, `useDateRangePickerState`, `useTimePickerState` |
111
135
  | `@bug-on/m3-expressive/shapes` | `ShapeMedia`, `ShapeSvg`, `ShapeIcon`, `useShapeMorph`, MD3 shape morphing engine |
112
136
 
package/dist/assets/material-symbols-cdn.css CHANGED
@@ -1,35 +1,29 @@
1
1
  /*
2
2
  * Material Symbols — CDN version (Google Fonts)
3
3
  *
4
- * USAGE IN APP'S HTML <head>:
5
- * Add preconnect hints BEFORE this CSS loads for fastest performance:
4
+ * NOTE: This CSS file provides .md-icon ligature/alignment rules.
5
+ * To load the actual variable font files from Google Fonts:
6
6
  *
7
+ * 1. FOR REACT (VITE) - In index.html <head>:
7
8
  * <link rel="preconnect" href="https://fonts.googleapis.com" />
8
- * <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
9
+ * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10
+ * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />
11
+ * <!-- Add Outlined or Sharp if also needed: -->
12
+ * <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" /> -->
13
+ * <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" /> -->
9
14
  *
10
- * Then import this CSS:
11
- * import '@bug-on/m3-expressive/material-symbols-cdn.css'
15
+ * 2. FOR NEXT.JS (APP ROUTER) - In app/layout.tsx:
16
+ * import { MaterialSymbolsPreconnect } from '@bug-on/m3-expressive';
17
+ * // Inside <head>:
18
+ * <MaterialSymbolsPreconnect variants={["rounded"]} display="block" />
12
19
  *
13
- * WHY TWO preconnect?
14
- * Google Fonts serves the CSS stylesheet from fonts.googleapis.com
15
- * but the actual .woff2 font files come from fonts.gstatic.com (different origin).
16
- * The crossorigin attribute is required for font files (CORS request).
20
+ * 3. THEN IMPORT THIS CSS IN YOUR ROOT STYLESHEET (index.css / globals.css):
21
+ * import '@bug-on/m3-expressive/material-symbols-cdn.css';
17
22
  *
18
23
  * FONT-DISPLAY NOTE for icon fonts:
19
- * We use font-display: block (NOT swap) because:
20
- * - swap would briefly show raw text like "arrow_forward" before icon loads = jarring layout shift
21
- * - block hides text during load period (max 3s), then shows icon = cleaner UX
22
- * - optional is NOT suitable: if font misses the load window, icons never appear
23
- */
24
-
25
- /*
26
- * INSTRUCTION:
27
- * Use the <MaterialSymbolsPreconnect /> component to load the actual Google Fonts CSS!
28
- *
29
- * We NO LONGER use @import url(...) here because CSS bundlers (like Next.js/Webpack)
30
- * often merge global CSS files and push @import statements below regular CSS rules.
31
- * According to CSS spec, any @import MUST be at the very top, so it breaks randomly.
32
- * Loading via `<link rel="stylesheet">` (handled by MaterialSymbolsPreconnect) is fully robust.
24
+ * We recommend display=block (NOT swap) because:
25
+ * - swap would briefly show raw text like "arrow_forward" before the font loads = jarring layout shift
26
+ * - block hides text during initial load, then shows icon = clean UX
33
27
  */
34
28
 
35
29
  /* ─────────────────────────────────────────────────────────────────────────────
package/dist/buttons.js CHANGED
@@ -2200,7 +2200,7 @@ var IconComponent = React16__namespace.forwardRef(
2200
2200
  (_a, ref) => {
2201
2201
  var _b = _a, {
2202
2202
  name,
2203
- variant = "outlined",
2203
+ variant = "rounded",
2204
2204
  fill = 0,
2205
2205
  weight = 400,
2206
2206
  grade = 0,
@@ -2704,6 +2704,7 @@ var ExtendedFABComponent = React16__namespace.forwardRef(
2704
2704
  onClick,
2705
2705
  onKeyDown,
2706
2706
  layoutId,
2707
+ layout,
2707
2708
  "aria-label": ariaLabel
2708
2709
  } = _b, restProps = __objRest(_b, [
2709
2710
  "className",
@@ -2725,6 +2726,7 @@ var ExtendedFABComponent = React16__namespace.forwardRef(
2725
2726
  "onClick",
2726
2727
  "onKeyDown",
2727
2728
  "layoutId",
2729
+ "layout",
2728
2730
  "aria-label"
2729
2731
  ]);
2730
2732
  var _a2, _b2, _c, _d;
@@ -2749,6 +2751,13 @@ var ExtendedFABComponent = React16__namespace.forwardRef(
2749
2751
  const colors = (_a2 = COLOR_CLASSES[colorStyle]) != null ? _a2 : COLOR_CLASSES.primary;
2750
2752
  const radiusConfig = (_b2 = MORPH_RADIUS[size]) != null ? _b2 : MORPH_RADIUS.sm;
2751
2753
  const sizeIcon = (_c = SIZE_ICON[size]) != null ? _c : SIZE_ICON.sm;
2754
+ const motionRadius = react.useMotionValue(radiusConfig.default);
2755
+ React16__namespace.useEffect(() => {
2756
+ const controls = react.animate(motionRadius, radiusConfig.default, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
2757
+ type: "spring"
2758
+ }));
2759
+ return () => controls.stop();
2760
+ }, [radiusConfig.default, motionRadius]);
2752
2761
  const { ripples, onPointerDown, removeRipple } = useRippleState({
2753
2762
  disabled: loading
2754
2763
  });
@@ -2843,13 +2852,25 @@ var ExtendedFABComponent = React16__namespace.forwardRef(
2843
2852
  {
2844
2853
  layout: "position",
2845
2854
  initial: { opacity: 0, width: 0 },
2846
- animate: { opacity: 1, width: "auto" },
2847
- exit: { opacity: 0, width: 0 },
2848
- transition: {
2849
- opacity: { duration: 0.15, ease: "linear" },
2850
- width: SPRING_TRANSITION
2855
+ animate: {
2856
+ opacity: 1,
2857
+ width: "auto",
2858
+ transition: {
2859
+ width: SPRING_TRANSITION,
2860
+ opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
2861
+ layout: SPRING_TRANSITION
2862
+ }
2851
2863
  },
2852
- className: "overflow-hidden whitespace-nowrap",
2864
+ exit: {
2865
+ opacity: 0,
2866
+ width: 0,
2867
+ transition: {
2868
+ opacity: { duration: 0.1, ease: "linear" },
2869
+ width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
2870
+ layout: SPRING_TRANSITION
2871
+ }
2872
+ },
2873
+ className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
2853
2874
  children: label
2854
2875
  },
2855
2876
  "label"
@@ -2880,7 +2901,7 @@ var ExtendedFABComponent = React16__namespace.forwardRef(
2880
2901
  __spreadProps(__spreadValues({
2881
2902
  ref: localRef,
2882
2903
  type: "button",
2883
- layout: true,
2904
+ layout: layout !== void 0 ? layout : "position",
2884
2905
  layoutId,
2885
2906
  "aria-label": ariaLabel || label,
2886
2907
  "aria-busy": loading || void 0,
@@ -2888,21 +2909,23 @@ var ExtendedFABComponent = React16__namespace.forwardRef(
2888
2909
  onClick: handleClick,
2889
2910
  onPointerDown,
2890
2911
  onKeyDown: handleKeyDown,
2891
- style,
2912
+ style: __spreadProps(__spreadValues({}, style), {
2913
+ borderRadius: motionRadius
2914
+ }),
2892
2915
  initial: {
2893
2916
  scale: 0.6,
2894
- opacity: 0,
2895
- borderRadius: radiusConfig.default
2917
+ opacity: 0
2896
2918
  },
2897
2919
  animate: {
2898
2920
  scale: 1,
2899
- opacity: 1,
2900
- borderRadius: radiusConfig.default
2921
+ opacity: 1
2901
2922
  },
2902
2923
  exit: { scale: 0.6, opacity: 0 },
2903
- whileTap: { borderRadius: radiusConfig.pressed },
2924
+ whileTap: {
2925
+ borderRadius: radiusConfig.pressed,
2926
+ transition: { borderRadius: SPRING_TRANSITION_FAST }
2927
+ },
2904
2928
  transition: {
2905
- borderRadius: { type: "spring", stiffness: 500, damping: 30 },
2906
2929
  scale: SPRING_TRANSITION,
2907
2930
  opacity: { duration: 0.2, ease: "linear" },
2908
2931
  layout: SPRING_TRANSITION
@@ -2934,6 +2957,18 @@ var SIZE_TEXT_CLASS = {
2934
2957
  lg: "text-xl font-semibold",
2935
2958
  xl: "text-2xl font-semibold"
2936
2959
  };
2960
+ var SIZE_PADDING_COLLAPSED = {
2961
+ sm: "px-2",
2962
+ md: "px-4",
2963
+ lg: "px-8",
2964
+ xl: "px-12"
2965
+ };
2966
+ var SIZE_PADDING_EXTENDED = {
2967
+ sm: "pl-2 pr-4",
2968
+ md: "pl-4 pr-6",
2969
+ lg: "pl-8 pr-8",
2970
+ xl: "pl-12 pr-10"
2971
+ };
2937
2972
  var MORPH_RADIUS2 = {
2938
2973
  sm: { default: 12, pressed: 8, extended: 12, extended_pressed: 8 },
2939
2974
  md: { default: 16, pressed: 10, extended: 16, extended_pressed: 10 },
@@ -3025,7 +3060,7 @@ var FABComponent = React16__namespace.forwardRef(
3025
3060
  "layout",
3026
3061
  "layoutId"
3027
3062
  ]);
3028
- var _a2, _b2, _c, _d;
3063
+ var _a2, _b2, _c, _d, _e, _f;
3029
3064
  const colors = (_a2 = COLOR_CLASSES2[colorStyle]) != null ? _a2 : COLOR_CLASSES2.primary;
3030
3065
  const radiusConfig = (_b2 = MORPH_RADIUS2[size]) != null ? _b2 : MORPH_RADIUS2.md;
3031
3066
  const animateRadius = extended ? radiusConfig.extended : radiusConfig.default;
@@ -3110,22 +3145,37 @@ var FABComponent = React16__namespace.forwardRef(
3110
3145
  react.m.span,
3111
3146
  {
3112
3147
  layout: "position",
3113
- initial: { width: 0, opacity: 0 },
3114
- animate: { width: "auto", opacity: 1 },
3115
- exit: { width: 0, opacity: 0 },
3116
- transition: {
3117
- opacity: { duration: 0.15, ease: "linear" },
3118
- width: SPRING_TRANSITION,
3119
- layout: SPRING_TRANSITION
3148
+ initial: { width: 0, opacity: 0, marginLeft: 0 },
3149
+ animate: {
3150
+ width: "auto",
3151
+ opacity: 1,
3152
+ marginLeft: 12,
3153
+ transition: {
3154
+ width: SPRING_TRANSITION,
3155
+ marginLeft: SPRING_TRANSITION,
3156
+ opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
3157
+ layout: SPRING_TRANSITION
3158
+ }
3159
+ },
3160
+ exit: {
3161
+ width: 0,
3162
+ opacity: 0,
3163
+ marginLeft: 0,
3164
+ transition: {
3165
+ opacity: { duration: 0.1, ease: "linear" },
3166
+ width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
3167
+ marginLeft: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
3168
+ layout: SPRING_TRANSITION
3169
+ }
3120
3170
  },
3121
- className: "overflow-hidden whitespace-nowrap ml-3",
3171
+ className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
3122
3172
  children: labelContent
3123
3173
  },
3124
3174
  "label"
3125
3175
  ) })
3126
3176
  ] });
3127
3177
  const containerClassName = cn(
3128
- "relative shrink-0 inline-flex items-center justify-center",
3178
+ "relative shrink-0 inline-flex items-center justify-start",
3129
3179
  "select-none cursor-pointer overflow-hidden",
3130
3180
  "transition-[box-shadow,opacity,filter] duration-200",
3131
3181
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
@@ -3134,21 +3184,62 @@ var FABComponent = React16__namespace.forwardRef(
3134
3184
  colors.text,
3135
3185
  lowered ? "shadow-sm" : colors.shadow,
3136
3186
  (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
3137
- extended && "w-auto pl-4 pr-6",
3187
+ extended ? cn("w-auto", (_e = SIZE_PADDING_EXTENDED[size]) != null ? _e : "pl-4 pr-6") : (_f = SIZE_PADDING_COLLAPSED[size]) != null ? _f : "px-4",
3138
3188
  SIZE_TEXT_CLASS[size],
3139
3189
  loading && "pointer-events-none opacity-75 cursor-not-allowed",
3140
3190
  className
3141
3191
  );
3192
+ const motionRadius = react.useMotionValue(animateRadius);
3193
+ const asChildRef = React16__namespace.useRef(null);
3194
+ const mergedRef = React16__namespace.useCallback(
3195
+ (node) => {
3196
+ asChildRef.current = node;
3197
+ if (typeof ref === "function") ref(node);
3198
+ else if (ref)
3199
+ ref.current = node;
3200
+ },
3201
+ [ref]
3202
+ );
3203
+ React16__namespace.useEffect(() => {
3204
+ if (!asChild) return;
3205
+ return motionRadius.on("change", (v) => {
3206
+ if (asChildRef.current)
3207
+ asChildRef.current.style.borderRadius = `${v}px`;
3208
+ });
3209
+ }, [motionRadius, asChild]);
3210
+ React16__namespace.useEffect(() => {
3211
+ const controls = react.animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
3212
+ type: "spring"
3213
+ }));
3214
+ return () => controls.stop();
3215
+ }, [animateRadius, motionRadius]);
3216
+ const handleAsChildPointerDown = React16__namespace.useCallback(
3217
+ (e) => {
3218
+ onPointerDown(e);
3219
+ react.animate(motionRadius, pressedRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
3220
+ type: "spring"
3221
+ }));
3222
+ },
3223
+ [onPointerDown, motionRadius, pressedRadius]
3224
+ );
3225
+ const handleAsChildPointerUp = React16__namespace.useCallback(() => {
3226
+ react.animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
3227
+ type: "spring"
3228
+ }));
3229
+ }, [motionRadius, animateRadius]);
3142
3230
  const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
3143
3231
  return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && (asChild ? /* @__PURE__ */ jsxRuntime.jsx(
3144
3232
  reactSlot.Slot,
3145
3233
  __spreadProps(__spreadValues({
3146
- ref,
3234
+ ref: mergedRef,
3147
3235
  "aria-label": computedAriaLabel,
3148
3236
  "aria-busy": loading || void 0,
3149
3237
  "aria-disabled": loading || restProps.disabled,
3150
3238
  onClick: handleClick,
3151
- onPointerDown,
3239
+ onPointerDown: handleAsChildPointerDown,
3240
+ onPointerUp: handleAsChildPointerUp,
3241
+ onPointerLeave: handleAsChildPointerUp,
3242
+ onPointerCancel: handleAsChildPointerUp,
3152
3243
  onKeyDown: handleKeyDown,
3153
3244
  style: __spreadProps(__spreadValues({}, style), {
3154
3245
  borderRadius: `${animateRadius}px`
@@ -3165,7 +3256,7 @@ var FABComponent = React16__namespace.forwardRef(
3165
3256
  __spreadProps(__spreadValues({
3166
3257
  ref,
3167
3258
  type: "button",
3168
- layout: layout !== void 0 ? layout : true,
3259
+ layout: layout !== void 0 ? layout : "position",
3169
3260
  layoutId,
3170
3261
  "aria-label": computedAriaLabel,
3171
3262
  "aria-busy": loading || void 0,
@@ -3173,17 +3264,20 @@ var FABComponent = React16__namespace.forwardRef(
3173
3264
  onClick: handleClick,
3174
3265
  onPointerDown,
3175
3266
  onKeyDown: handleKeyDown,
3176
- style,
3267
+ style: __spreadProps(__spreadValues({}, style), {
3268
+ borderRadius: motionRadius
3269
+ }),
3177
3270
  initial: {
3178
3271
  scale: 0.5,
3179
- opacity: 0,
3180
- borderRadius: animateRadius
3272
+ opacity: 0
3181
3273
  },
3182
- animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
3274
+ animate: { scale: 1, opacity: 1 },
3183
3275
  exit: { scale: 0.5, opacity: 0 },
3184
- whileTap: { borderRadius: pressedRadius },
3276
+ whileTap: {
3277
+ borderRadius: pressedRadius,
3278
+ transition: { borderRadius: SPRING_TRANSITION_FAST }
3279
+ },
3185
3280
  transition: {
3186
- borderRadius: SPRING_TRANSITION_FAST,
3187
3281
  scale: SPRING_TRANSITION,
3188
3282
  opacity: { duration: 0.25, ease: "easeOut" },
3189
3283
  layout: SPRING_TRANSITION