@bug-on/m3-expressive 1.3.4 → 1.3.5

package/dist/layout.d.mts

@@ -5,8 +5,9 @@ import { HTMLMotionProps } from 'motion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.mjs';
 export { S as ScrollArea, a as ScrollAreaOrientation, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.mjs';
+export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps, c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.mjs';
 import { VariantProps } from 'class-variance-authority';
-export { D as DEFAULT_FONT_VARIATION_AXES, F as FontVariationAxes, M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, g as TypographyTokensOptions, s as serializeFontVariationAxes, u as useTypography } from './typography-339RV6v7.mjs';
+export { D as DEFAULT_FONT_VARIATION_AXES, F as FontVariationAxes, M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, g as TypographyTokensOptions, s as serializeFontVariationAxes, u as useTypography } from './typography-CKTjvlZ4.mjs';
 import '@radix-ui/react-scroll-area';
 
 /**
@@ -609,10 +610,11 @@ interface DividerProps extends SafeHTMLDivAttrs {
 /**
  * Generates an SVG path `d` string for a sinusoidal wave between two X bounds.
  * Uses cubic Bézier approximation of a sine curve for smooth rendering.
- * The error vs. a true sine is < 0.2%.
  *
  * Each half-cycle alternates between crest (+amplitude) and trough (-amplitude).
- * Control points are placed at 1/3 and 2/3 of each half-cycle for accuracy.
+ * Adapts the half-cycle count so an integer number of half-cycles perfectly spans
+ * between startX and endX, ensuring both leading and trailing ends land smoothly
+ * on the center baseline without trailing kinks or partial-segment distortion.
  *
  * @param startX     - X coordinate where the path begins (e.g. capWidth = strokeWidth/2)
  * @param endX       - X coordinate where the path ends (e.g. containerWidth - capWidth)

package/dist/layout.d.ts

@@ -5,8 +5,9 @@ import { HTMLMotionProps } from 'motion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
 export { S as ScrollArea, a as ScrollAreaOrientation, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.js';
+export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps, c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.js';
 import { VariantProps } from 'class-variance-authority';
-export { D as DEFAULT_FONT_VARIATION_AXES, F as FontVariationAxes, M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, g as TypographyTokensOptions, s as serializeFontVariationAxes, u as useTypography } from './typography-339RV6v7.js';
+export { D as DEFAULT_FONT_VARIATION_AXES, F as FontVariationAxes, M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, g as TypographyTokensOptions, s as serializeFontVariationAxes, u as useTypography } from './typography-CKTjvlZ4.js';
 import '@radix-ui/react-scroll-area';
 
 /**
@@ -609,10 +610,11 @@ interface DividerProps extends SafeHTMLDivAttrs {
 /**
  * Generates an SVG path `d` string for a sinusoidal wave between two X bounds.
  * Uses cubic Bézier approximation of a sine curve for smooth rendering.
- * The error vs. a true sine is < 0.2%.
  *
  * Each half-cycle alternates between crest (+amplitude) and trough (-amplitude).
- * Control points are placed at 1/3 and 2/3 of each half-cycle for accuracy.
+ * Adapts the half-cycle count so an integer number of half-cycles perfectly spans
+ * between startX and endX, ensuring both leading and trailing ends land smoothly
+ * on the center baseline without trailing kinks or partial-segment distortion.
  *
  * @param startX     - X coordinate where the path begins (e.g. capWidth = strokeWidth/2)
  * @param endX       - X coordinate where the path ends (e.g. containerWidth - capWidth)

package/dist/layout.js

@@ -3320,7 +3320,7 @@ var IconComponent = React23__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -3674,13 +3674,16 @@ function CodeBlock({
 }
 function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4) {
   if (startX >= endX) return "";
+  const totalWidth = endX - startX;
   const halfCycle = wavelength / 2;
-  const numHalfCycles = Math.ceil((endX - startX) / halfCycle);
-  const cpDistanceY = amplitude * (4 / 3);
+  const numHalfCycles = Math.max(1, Math.round(totalWidth / halfCycle));
+  const actualHalfCycle = totalWidth / numHalfCycles;
+  const scale = Math.min(1, actualHalfCycle / halfCycle);
+  const cpDistanceY = amplitude * (4 / 3) * scale;
   let d = `M ${startX},${yCenter}`;
   for (let i = 0; i < numHalfCycles; i++) {
-    const x0 = startX + i * halfCycle;
-    const x1 = Math.min(startX + (i + 1) * halfCycle, endX);
+    const x0 = startX + i * actualHalfCycle;
+    const x1 = i === numHalfCycles - 1 ? endX : startX + (i + 1) * actualHalfCycle;
     const peak = i % 2 === 0 ? yCenter - cpDistanceY : yCenter + cpDistanceY;
     const segLen = x1 - x0;
     const cp1x = x0 + segLen / 3;
@@ -5601,7 +5604,7 @@ var ListItemImpl = React23__namespace.forwardRef(
               "cursor-grab active:cursor-grabbing text-m3-on-surface-variant p-2 -mr-2"
             )
           }, attributes), listeners), {
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-outlined text-[24px]", children: "drag_handle" })
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[24px]", children: "drag_handle" })
           })
         );
       }
@@ -5833,6 +5836,57 @@ var ListItemImpl = React23__namespace.forwardRef(
 );
 ListItemImpl.displayName = "ListItem";
 var ListItem = React23__namespace.memo(ListItemImpl);
+function getMaskGradient(direction) {
+  switch (direction) {
+    case "bottom":
+      return "linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
+    case "both":
+      return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 85%, rgba(0, 0, 0, 1) 100%)";
+    default:
+      return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
+  }
+}
+function FadingBlurMask({
+  direction = "top",
+  blurIntensity = 12,
+  blurHeight = "100%",
+  color = "var(--md-sys-color-surface)",
+  className,
+  style,
+  children
+}) {
+  const shouldReduceMotion = react.useReducedMotion();
+  const activeBlur = shouldReduceMotion ? 0 : blurIntensity;
+  const maskGradient = getMaskGradient(direction);
+  const isFullHeight = direction === "both" || blurHeight === "100%";
+  const computedHeight = isFullHeight ? "100%" : typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight;
+  const maskStyle = __spreadValues({
+    position: "absolute",
+    top: direction === "bottom" && !isFullHeight ? "auto" : 0,
+    bottom: direction === "top" && !isFullHeight ? "auto" : 0,
+    left: 0,
+    right: 0,
+    pointerEvents: "none",
+    height: computedHeight,
+    backdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
+    WebkitBackdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
+    maskImage: maskGradient,
+    WebkitMaskImage: maskGradient,
+    backgroundColor: color
+  }, style);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute pointer-events-none z-10 rounded-[inherit]",
+        className
+      ),
+      style: maskStyle,
+      children
+    }
+  );
+}
 var typographyVariants = classVarianceAuthority.cva("m-0 p-0 text-m3-on-surface", {
   variants: {
     variant: {
@@ -6713,6 +6767,7 @@ exports.CarouselTokens = CarouselTokens;
 exports.CodeBlock = CodeBlock;
 exports.DEFAULT_FONT_VARIATION_AXES = DEFAULT_FONT_VARIATION_AXES;
 exports.Divider = Divider;
+exports.FadingBlurMask = FadingBlurMask;
 exports.LIST_TOKENS = LIST_TOKENS;
 exports.List = List;
 exports.ListContext = ListContext;