@bug-on/m3-expressive 1.3.4 → 1.3.6

package/dist/layout.mjs

@@ -3298,7 +3298,7 @@ var IconComponent = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -3652,13 +3652,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;
@@ -5579,7 +5582,7 @@ var ListItemImpl = React23.forwardRef(
               "cursor-grab active:cursor-grabbing text-m3-on-surface-variant p-2 -mr-2"
             )
           }, attributes), listeners), {
-            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-[24px]", children: "drag_handle" })
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[24px]", children: "drag_handle" })
           })
         );
       }
@@ -5811,6 +5814,57 @@ var ListItemImpl = React23.forwardRef(
 );
 ListItemImpl.displayName = "ListItem";
 var ListItem = React23.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 = 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__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute pointer-events-none z-10 rounded-[inherit]",
+        className
+      ),
+      style: maskStyle,
+      children
+    }
+  );
+}
 var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
   variants: {
     variant: {
@@ -6678,6 +6732,6 @@ function TypographyProvider({
   return /* @__PURE__ */ jsx(TypographyContext.Provider, { value, children });
 }
 
-export { Card, CardContent, CardFooter, CardHeader, CardMedia, Carousel, CarouselGrid, CarouselItem, CarouselScrollClient, CarouselTokens, CodeBlock, DEFAULT_FONT_VARIATION_AXES, Divider, LIST_TOKENS, List, ListContext, ListDivider, ListItem, MD3_EXPRESSIVE_FONT_VARIATION, SHADOW, ScrollArea, ScrollAreaScrollbar, TableOfContents, Text, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveElevationShadow, serializeFontVariationAxes, shouldTopAlign, typographyVariants, useCardElevation, useCarouselA11y, useCarouselKeylines, useListContext, useTypography };
+export { Card, CardContent, CardFooter, CardHeader, CardMedia, Carousel, CarouselGrid, CarouselItem, CarouselScrollClient, CarouselTokens, CodeBlock, DEFAULT_FONT_VARIATION_AXES, Divider, FadingBlurMask, LIST_TOKENS, List, ListContext, ListDivider, ListItem, MD3_EXPRESSIVE_FONT_VARIATION, SHADOW, ScrollArea, ScrollAreaScrollbar, TableOfContents, Text, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveElevationShadow, serializeFontVariationAxes, shouldTopAlign, typographyVariants, useCardElevation, useCarouselA11y, useCarouselKeylines, useListContext, useTypography };
 //# sourceMappingURL=layout.mjs.map
 //# sourceMappingURL=layout.mjs.map