@x-plat/design-system 0.5.19 → 0.5.21

package/dist/components/index.css

@@ -1864,7 +1864,7 @@
     transform 0.15s ease-out;
   transform-origin: center;
 }
-.lib-xplat-chart .chart-svg:hover .chart-slice {
+.lib-xplat-chart .chart-pie:has(.chart-slice:hover) .chart-slice {
   opacity: 0.5;
 }
 .lib-xplat-chart .chart-slice:hover {
@@ -1892,10 +1892,8 @@
 .lib-xplat-chart .chart-bar-animate {
   animation: chart-bar-grow 800ms ease-out both;
 }
-.lib-xplat-chart .chart-slice-group-animate {
-  animation: chart-slice-in 1000ms ease-out both;
-}
 .lib-xplat-chart .chart-pie-label-animate {
+  opacity: 0;
   animation: chart-fade-in 150ms ease-out both;
 }
 .lib-xplat-chart .chart-area[style*=animationDelay] {
@@ -1909,16 +1907,6 @@
     transform: scaleY(1);
   }
 }
-@keyframes chart-slice-in {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
 @keyframes chart-fade-in {
   from {
     opacity: 0;
@@ -1939,7 +1927,6 @@
 }
 @media (prefers-reduced-motion: reduce) {
   .lib-xplat-chart .chart-bar-animate,
-  .lib-xplat-chart .chart-slice-group-animate,
   .lib-xplat-chart .chart-pie-label-animate,
   .lib-xplat-chart .chart-area {
     animation: none !important;

package/dist/components/index.js

@@ -2458,8 +2458,22 @@ var PieDonutChart = React5.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
+    const maskRef = React5.useRef(null);
+    const maskR = r2 + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    React5.useEffect(() => {
+      if (!animate || !maskRef.current) return;
+      const el = maskRef.current;
+      el.style.strokeDasharray = `${maskCircumference}`;
+      el.style.strokeDashoffset = `${maskCircumference}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1000ms ease-out";
+        el.style.strokeDashoffset = "0";
+      });
+    }, [animate, maskCircumference]);
     const sliceData = React5.useMemo(() => {
       let angle0 = -Math.PI / 2;
+      let cumulativeAngle = 0;
       return values.map((v, i) => {
         const angle = v / total * Math.PI * 2;
         const endAngle = angle0 + angle;
@@ -2483,38 +2497,53 @@ var PieDonutChart = React5.memo(
         const lx = cx + labelR * Math.cos(midAngle);
         const ly = cy + labelR * Math.sin(midAngle);
         const pct = Math.round(v / total * 100);
+        cumulativeAngle += angle;
+        const sliceEndRatio = cumulativeAngle / (Math.PI * 2);
+        const labelDelay = 1e3 * sliceEndRatio + 150;
         angle0 = endAngle;
-        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}`, labelDelay };
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
-    return /* @__PURE__ */ jsx305("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ jsxs196("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ jsx305(
-          "path",
-          {
-            d: s.d,
-            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-            className: "chart-slice",
-            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          }
-        ),
-        s.angle > 0.2 && /* @__PURE__ */ jsx305(
-          "text",
-          {
-            x: s.lx,
-            y: s.ly,
-            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s.v
-          }
-        )
-      ] }, i);
-    }) });
+    const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
+    return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsx305("mask", { id: maskId, children: /* @__PURE__ */ jsx305(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx305("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx305("g", { children: /* @__PURE__ */ jsx305(
+        "path",
+        {
+          d: s.d,
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        }
+      ) }, i)) }),
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx305(
+        "text",
+        {
+          x: s.lx,
+          y: s.ly,
+          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: s.v
+        },
+        `label-${i}`
+      ))
+    ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
@@ -3431,6 +3460,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -3456,6 +3486,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  React17.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   React17.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
@@ -4271,12 +4309,20 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 import { jsx as jsx333 } from "react/jsx-runtime";
-var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
+var SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ jsx333(
     "div",

package/dist/index.cjs

@@ -6957,8 +6957,22 @@ var PieDonutChart = import_react5.default.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
+    const maskRef = import_react5.default.useRef(null);
+    const maskR = r2 + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    import_react5.default.useEffect(() => {
+      if (!animate || !maskRef.current) return;
+      const el = maskRef.current;
+      el.style.strokeDasharray = `${maskCircumference}`;
+      el.style.strokeDashoffset = `${maskCircumference}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1000ms ease-out";
+        el.style.strokeDashoffset = "0";
+      });
+    }, [animate, maskCircumference]);
     const sliceData = import_react5.default.useMemo(() => {
       let angle0 = -Math.PI / 2;
+      let cumulativeAngle = 0;
       return values.map((v, i) => {
         const angle = v / total * Math.PI * 2;
         const endAngle = angle0 + angle;
@@ -6982,38 +6996,53 @@ var PieDonutChart = import_react5.default.memo(
         const lx = cx + labelR * Math.cos(midAngle);
         const ly = cy + labelR * Math.sin(midAngle);
         const pct = Math.round(v / total * 100);
+        cumulativeAngle += angle;
+        const sliceEndRatio = cumulativeAngle / (Math.PI * 2);
+        const labelDelay = 1e3 * sliceEndRatio + 150;
         angle0 = endAngle;
-        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}`, labelDelay };
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
-    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-          "path",
-          {
-            d: s.d,
-            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-            className: "chart-slice",
-            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          }
-        ),
-        s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-          "text",
-          {
-            x: s.lx,
-            y: s.ly,
-            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s.v
-          }
-        )
-      ] }, i);
-    }) });
+    const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        "path",
+        {
+          d: s.d,
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        }
+      ) }, i)) }),
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        "text",
+        {
+          x: s.lx,
+          y: s.ly,
+          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: s.v
+        },
+        `label-${i}`
+      ))
+    ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
@@ -7943,6 +7972,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -7968,6 +7998,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  import_react18.default.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   import_react18.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
@@ -8783,12 +8821,20 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime333 = require("react/jsx-runtime");
-var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
+var SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
@@ -9931,9 +9977,18 @@ var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime348 = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -9941,9 +9996,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime349 = require("react/jsx-runtime");
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/dist/index.css

@@ -1864,7 +1864,7 @@
     transform 0.15s ease-out;
   transform-origin: center;
 }
-.lib-xplat-chart .chart-svg:hover .chart-slice {
+.lib-xplat-chart .chart-pie:has(.chart-slice:hover) .chart-slice {
   opacity: 0.5;
 }
 .lib-xplat-chart .chart-slice:hover {
@@ -1892,10 +1892,8 @@
 .lib-xplat-chart .chart-bar-animate {
   animation: chart-bar-grow 800ms ease-out both;
 }
-.lib-xplat-chart .chart-slice-group-animate {
-  animation: chart-slice-in 1000ms ease-out both;
-}
 .lib-xplat-chart .chart-pie-label-animate {
+  opacity: 0;
   animation: chart-fade-in 150ms ease-out both;
 }
 .lib-xplat-chart .chart-area[style*=animationDelay] {
@@ -1909,16 +1907,6 @@
     transform: scaleY(1);
   }
 }
-@keyframes chart-slice-in {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
 @keyframes chart-fade-in {
   from {
     opacity: 0;
@@ -1939,7 +1927,6 @@
 }
 @media (prefers-reduced-motion: reduce) {
   .lib-xplat-chart .chart-bar-animate,
-  .lib-xplat-chart .chart-slice-group-animate,
   .lib-xplat-chart .chart-pie-label-animate,
   .lib-xplat-chart .chart-area {
     animation: none !important;

package/dist/index.js

@@ -6560,8 +6560,22 @@ var PieDonutChart = React5.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
+    const maskRef = React5.useRef(null);
+    const maskR = r2 + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    React5.useEffect(() => {
+      if (!animate || !maskRef.current) return;
+      const el = maskRef.current;
+      el.style.strokeDasharray = `${maskCircumference}`;
+      el.style.strokeDashoffset = `${maskCircumference}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1000ms ease-out";
+        el.style.strokeDashoffset = "0";
+      });
+    }, [animate, maskCircumference]);
     const sliceData = React5.useMemo(() => {
       let angle0 = -Math.PI / 2;
+      let cumulativeAngle = 0;
       return values.map((v, i) => {
         const angle = v / total * Math.PI * 2;
         const endAngle = angle0 + angle;
@@ -6585,38 +6599,53 @@ var PieDonutChart = React5.memo(
         const lx = cx + labelR * Math.cos(midAngle);
         const ly = cy + labelR * Math.sin(midAngle);
         const pct = Math.round(v / total * 100);
+        cumulativeAngle += angle;
+        const sliceEndRatio = cumulativeAngle / (Math.PI * 2);
+        const labelDelay = 1e3 * sliceEndRatio + 150;
         angle0 = endAngle;
-        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}`, labelDelay };
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
-    return /* @__PURE__ */ jsx305("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ jsxs196("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ jsx305(
-          "path",
-          {
-            d: s.d,
-            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-            className: "chart-slice",
-            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          }
-        ),
-        s.angle > 0.2 && /* @__PURE__ */ jsx305(
-          "text",
-          {
-            x: s.lx,
-            y: s.ly,
-            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s.v
-          }
-        )
-      ] }, i);
-    }) });
+    const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
+    return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsx305("mask", { id: maskId, children: /* @__PURE__ */ jsx305(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx305("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx305("g", { children: /* @__PURE__ */ jsx305(
+        "path",
+        {
+          d: s.d,
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        }
+      ) }, i)) }),
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx305(
+        "text",
+        {
+          x: s.lx,
+          y: s.ly,
+          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: s.v
+        },
+        `label-${i}`
+      ))
+    ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
@@ -7546,6 +7575,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -7571,6 +7601,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  React17.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   React17.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
@@ -8386,12 +8424,20 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 import { jsx as jsx333 } from "react/jsx-runtime";
-var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
+var SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ jsx333(
     "div",
@@ -9534,9 +9580,18 @@ var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 import { jsx as jsx348 } from "react/jsx-runtime";
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ jsx348("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -9544,9 +9599,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 import { jsx as jsx349 } from "react/jsx-runtime";
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ jsx349("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/dist/layout/Grid/FullGrid/index.cjs

@@ -26,9 +26,18 @@ module.exports = __toCommonJS(FullGrid_exports);
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";

package/dist/layout/Grid/FullGrid/index.d.cts

@@ -1,9 +1,9 @@
 import React from 'react';
 
-type SpaceToken = "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 interface FullGridProps {
     children: React.ReactNode;
-    gap?: SpaceToken;
+    gap?: GapToken;
 }
 declare const FullGrid: React.FC<FullGridProps>;