@luxfi/ui 8.0.0 → 8.1.0

package/dist/grid-pattern.js

@@ -0,0 +1,304 @@
+"use client";
+import * as React from 'react';
+import { Box, cn, css } from '@hanzo/ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var GridPattern = React.forwardRef(
+  ({
+    variant = "dots",
+    size = 4,
+    gap = 20,
+    color = "currentColor",
+    opacity = 0.4,
+    strokeWidth = 1,
+    fade = false,
+    gradient,
+    animation,
+    offset,
+    maxArea,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const patternId = React.useId();
+    const maskId = React.useId();
+    const gradientId = React.useId();
+    const normalizedSize = typeof size === "number" ? { width: size, height: size } : { width: size.width ?? 4, height: size.height ?? 4 };
+    const normalizedGap = typeof gap === "number" ? { x: gap, y: gap } : { x: gap.x ?? 20, y: gap.y ?? 20 };
+    const normalizedOffset = {
+      x: offset?.x ?? 0,
+      y: offset?.y ?? 0
+    };
+    const renderPattern = () => {
+      switch (variant) {
+        case "dots":
+          return /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: normalizedSize.width / 2,
+              cy: normalizedSize.height / 2,
+              r: normalizedSize.width / 2,
+              fill: color,
+              opacity
+            }
+          );
+        case "lines":
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: normalizedGap.y,
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                y1: "0",
+                x2: normalizedGap.x,
+                y2: "0",
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            )
+          ] });
+        case "crosses":
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: normalizedSize.width / 2,
+                y1: "0",
+                x2: normalizedSize.width / 2,
+                y2: normalizedSize.height,
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                y1: normalizedSize.height / 2,
+                x2: normalizedSize.width,
+                y2: normalizedSize.height / 2,
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            )
+          ] });
+        case "plus":
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: `M ${normalizedSize.width / 2} 0 L ${normalizedSize.width / 2} ${normalizedSize.height} M 0 ${normalizedSize.height / 2} L ${normalizedSize.width} ${normalizedSize.height / 2}`,
+              stroke: color,
+              strokeWidth,
+              opacity,
+              fill: "none",
+              strokeLinecap: "round"
+            }
+          );
+        case "squares":
+          return /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: normalizedSize.width,
+              height: normalizedSize.height,
+              fill: "none",
+              stroke: color,
+              strokeWidth,
+              opacity
+            }
+          );
+        default:
+          return null;
+      }
+    };
+    const renderFadeMask = () => {
+      if (!fade) return null;
+      switch (fade) {
+        case "edges":
+        case true:
+          return /* @__PURE__ */ jsxs("linearGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
+          ] });
+        case "center":
+          return /* @__PURE__ */ jsxs("radialGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
+          ] });
+        case "radial":
+          return /* @__PURE__ */ jsxs("radialGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx("stop", { offset: "30%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "1" })
+          ] });
+        default:
+          return null;
+      }
+    };
+    const animationStyle = animation ? {
+      animation: `grid-pattern-move ${animation.duration ?? 10}s ${animation.timing ?? "linear"} infinite ${animation.direction ?? "normal"}`
+    } : {};
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        className: cn(
+          "pointer-events-none absolute inset-0 overflow-hidden",
+          className
+        ),
+        style: {
+          ...style,
+          ...animationStyle
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "absolute h-full w-full",
+              style: {
+                transform: `translate(${normalizedOffset.x}px, ${normalizedOffset.y}px)`
+              },
+              children: [
+                /* @__PURE__ */ jsxs("defs", { children: [
+                  /* @__PURE__ */ jsx(
+                    "pattern",
+                    {
+                      id: patternId,
+                      x: "0",
+                      y: "0",
+                      width: normalizedGap.x,
+                      height: normalizedGap.y,
+                      patternUnits: "userSpaceOnUse",
+                      children: renderPattern()
+                    }
+                  ),
+                  renderFadeMask(),
+                  gradient && /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: gradientId,
+                      x1: "0%",
+                      y1: "0%",
+                      x2: "100%",
+                      y2: "100%",
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradient.from ?? "transparent" }),
+                        gradient.via && /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: gradient.via }),
+                        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradient.to ?? "transparent" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: maxArea?.width ?? "100%",
+                    height: maxArea?.height ?? "100%",
+                    fill: `url(#${patternId})`,
+                    mask: fade ? `url(#${maskId})` : void 0
+                  }
+                ),
+                gradient && /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: maxArea?.width ?? "100%",
+                    height: maxArea?.height ?? "100%",
+                    fill: `url(#${gradientId})`,
+                    opacity: gradient.opacity ?? 0.5,
+                    className: "mix-blend-multiply dark:mix-blend-screen",
+                    style: css("mix-blend-multiply dark:mix-blend-screen")
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("style", { children: `
+          @keyframes grid-pattern-move {
+            0% {
+              transform: translate(0, 0);
+            }
+            100% {
+              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);
+            }
+          }
+        ` })
+        ]
+      }
+    );
+  }
+);
+GridPattern.displayName = "GridPattern";
+var GridPatternPresets = {
+  dotMatrix: {
+    variant: "dots",
+    size: 3,
+    gap: 30,
+    opacity: 0.3
+  },
+  fineDots: {
+    variant: "dots",
+    size: 1,
+    gap: 10,
+    opacity: 0.4
+  },
+  gridLines: {
+    variant: "lines",
+    gap: 40,
+    strokeWidth: 1,
+    opacity: 0.2
+  },
+  crosshatch: {
+    variant: "crosses",
+    size: 10,
+    gap: 20,
+    strokeWidth: 1,
+    opacity: 0.3
+  },
+  blueprint: {
+    variant: "lines",
+    gap: 20,
+    strokeWidth: 0.5,
+    color: "#3b82f6",
+    opacity: 0.3
+  },
+  graph: {
+    variant: "lines",
+    gap: { x: 50, y: 50 },
+    strokeWidth: 1,
+    opacity: 0.15,
+    fade: "edges"
+  },
+  isometric: {
+    variant: "lines",
+    gap: { x: 30, y: 17.32 },
+    // 30deg isometric
+    strokeWidth: 0.5,
+    opacity: 0.2
+  },
+  hexagon: {
+    variant: "dots",
+    size: 2,
+    gap: { x: 30, y: 26 },
+    // Hexagonal pattern
+    opacity: 0.3
+  }
+};
+
+export { GridPattern, GridPatternPresets };

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,3 @@
+export declare function useIsMobile(): boolean;
+export default useIsMobile;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAgBA,wBAAgB,WAAW,IAAI,OAAO,CAUrC;AAED,eAAe,WAAW,CAAA"}

package/dist/icon-button.cjs

@@ -27,155 +27,26 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/icon-button.tsx
-var SHIM_PROPS = [
-  "w",
-  "h",
-  "minW",
-  "maxW",
-  "display",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "fontWeight",
-  "textStyle",
-  "borderRadius",
-  "alignSelf",
-  "alignItems",
-  "justifyContent",
-  "color",
-  "mt",
-  "mb",
-  "ml",
-  "mr",
-  "height",
-  "overflow",
-  "whiteSpace",
-  "textOverflow",
-  "textTransform",
-  "gap",
-  "gridTemplateColumns",
-  "minWidth",
-  "boxSize",
-  "py",
-  "px",
-  "p",
-  "hideBelow",
-  "fontSize",
-  "flexWrap",
-  "wordBreak",
-  "lineHeight",
-  "marginRight",
-  "position",
-  "background"
-];
-var S = 4;
-function dim(v) {
-  if (v == null) return void 0;
-  if (typeof v === "number") return `${v * S}px`;
-  if (typeof v === "string") return v;
-  if (typeof v === "object") {
-    const o = v;
-    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
-  }
-  return void 0;
-}
-function sp(v) {
-  if (v === void 0) return void 0;
-  return typeof v === "number" ? `${v * S}px` : v;
-}
-function shimToStyle(props) {
-  const s = {};
-  if (props.w !== void 0) s.width = dim(props.w);
-  if (props.h !== void 0) s.height = dim(props.h);
-  if (props.minW !== void 0) s.minWidth = dim(props.minW);
-  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
-  if (props.display !== void 0) s.display = props.display;
-  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
-  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
-  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
-  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
-  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
-  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
-  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
-  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
-  if (props.color !== void 0) s.color = props.color;
-  if (props.mt !== void 0) s.marginTop = sp(props.mt);
-  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
-  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
-  if (props.mr !== void 0) s.marginRight = sp(props.mr);
-  if (props.height !== void 0) s.height = props.height;
-  if (props.overflow !== void 0) s.overflow = props.overflow;
-  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
-  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
-  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
-  if (props.gap !== void 0) s.gap = sp(props.gap);
-  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
-  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
-  if (props.boxSize !== void 0) {
-    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
-    s.width = v;
-    s.height = v;
-  }
-  if (props.py !== void 0) {
-    const v = sp(props.py);
-    s.paddingTop = v;
-    s.paddingBottom = v;
-  }
-  if (props.px !== void 0) {
-    const v = sp(props.px);
-    s.paddingLeft = v;
-    s.paddingRight = v;
-  }
-  if (props.p !== void 0) s.padding = sp(props.p);
-  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
-  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
-  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
-  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
-  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
-  if (props.position !== void 0) s.position = props.position;
-  if (props.background !== void 0) s.background = props.background;
-  return s;
-}
-function stripShims(props) {
-  const out = { ...props };
-  for (const k of SHIM_PROPS) delete out[k];
-  return out;
-}
 var SKELETON_CLASSES = "lux-skeleton rounded-sm";
-var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React__namespace.forwardRef(
   function Skeleton2(props, ref) {
-    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
-    const shimStyle = shimToStyle(props);
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
-    const cls = hideBelowClass ? ui.cn(className, hideBelowClass) : className;
-    const htmlRest = stripShims(allRest);
+    const { loading = true, asChild, className, children, style, ...rest } = props;
     if (!loading) {
       if (asChild && React__namespace.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React__namespace.isValidElement(children)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Component,
-        {
-          ref,
-          "data-loading": true,
-          className: ui.cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
-          style: mergedStyle,
-          ...htmlRest,
-          children
-        }
-      );
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className, style, ...rest, children });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
+      "div",
       {
         ref,
         "data-loading": true,
-        className: ui.cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
-        style: mergedStyle,
-        ...htmlRest,
+        ...ui.sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
         children
       }
     );
@@ -190,7 +61,7 @@ React__namespace.forwardRef(
       {
         ref,
         loading,
-        className: ui.cn("rounded-full shrink-0", className),
+        ...ui.sx("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -200,11 +71,11 @@ React__namespace.forwardRef(
 React__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: ui.cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className: ui.cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton,
       {
         loading,
-        className: ui.cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+        ...ui.sx(ui.cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
       },
       index
     )) });

package/dist/icon-button.js

@@ -1,159 +1,30 @@
 "use client";
 import { styled, View } from '@hanzo/gui';
 import * as React from 'react';
-import { cn } from '@hanzo/ui';
+import { Box, sx, cn } from '@hanzo/ui';
 import { jsx } from 'react/jsx-runtime';
 
 // src/icon-button.tsx
-var SHIM_PROPS = [
-  "w",
-  "h",
-  "minW",
-  "maxW",
-  "display",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "fontWeight",
-  "textStyle",
-  "borderRadius",
-  "alignSelf",
-  "alignItems",
-  "justifyContent",
-  "color",
-  "mt",
-  "mb",
-  "ml",
-  "mr",
-  "height",
-  "overflow",
-  "whiteSpace",
-  "textOverflow",
-  "textTransform",
-  "gap",
-  "gridTemplateColumns",
-  "minWidth",
-  "boxSize",
-  "py",
-  "px",
-  "p",
-  "hideBelow",
-  "fontSize",
-  "flexWrap",
-  "wordBreak",
-  "lineHeight",
-  "marginRight",
-  "position",
-  "background"
-];
-var S = 4;
-function dim(v) {
-  if (v == null) return void 0;
-  if (typeof v === "number") return `${v * S}px`;
-  if (typeof v === "string") return v;
-  if (typeof v === "object") {
-    const o = v;
-    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
-  }
-  return void 0;
-}
-function sp(v) {
-  if (v === void 0) return void 0;
-  return typeof v === "number" ? `${v * S}px` : v;
-}
-function shimToStyle(props) {
-  const s = {};
-  if (props.w !== void 0) s.width = dim(props.w);
-  if (props.h !== void 0) s.height = dim(props.h);
-  if (props.minW !== void 0) s.minWidth = dim(props.minW);
-  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
-  if (props.display !== void 0) s.display = props.display;
-  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
-  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
-  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
-  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
-  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
-  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
-  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
-  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
-  if (props.color !== void 0) s.color = props.color;
-  if (props.mt !== void 0) s.marginTop = sp(props.mt);
-  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
-  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
-  if (props.mr !== void 0) s.marginRight = sp(props.mr);
-  if (props.height !== void 0) s.height = props.height;
-  if (props.overflow !== void 0) s.overflow = props.overflow;
-  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
-  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
-  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
-  if (props.gap !== void 0) s.gap = sp(props.gap);
-  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
-  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
-  if (props.boxSize !== void 0) {
-    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
-    s.width = v;
-    s.height = v;
-  }
-  if (props.py !== void 0) {
-    const v = sp(props.py);
-    s.paddingTop = v;
-    s.paddingBottom = v;
-  }
-  if (props.px !== void 0) {
-    const v = sp(props.px);
-    s.paddingLeft = v;
-    s.paddingRight = v;
-  }
-  if (props.p !== void 0) s.padding = sp(props.p);
-  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
-  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
-  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
-  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
-  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
-  if (props.position !== void 0) s.position = props.position;
-  if (props.background !== void 0) s.background = props.background;
-  return s;
-}
-function stripShims(props) {
-  const out = { ...props };
-  for (const k of SHIM_PROPS) delete out[k];
-  return out;
-}
 var SKELETON_CLASSES = "lux-skeleton rounded-sm";
-var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React.forwardRef(
   function Skeleton2(props, ref) {
-    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
-    const shimStyle = shimToStyle(props);
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
-    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
-    const htmlRest = stripShims(allRest);
+    const { loading = true, asChild, className, children, style, ...rest } = props;
     if (!loading) {
       if (asChild && React.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React.isValidElement(children)) {
-      return /* @__PURE__ */ jsx(
-        Component,
-        {
-          ref,
-          "data-loading": true,
-          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
-          style: mergedStyle,
-          ...htmlRest,
-          children
-        }
-      );
+      return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
     }
     return /* @__PURE__ */ jsx(
-      Component,
+      "div",
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
-        style: mergedStyle,
-        ...htmlRest,
+        ...sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
         children
       }
     );
@@ -168,7 +39,7 @@ React.forwardRef(
       {
         ref,
         loading,
-        className: cn("rounded-full shrink-0", className),
+        ...sx("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -178,11 +49,11 @@ React.forwardRef(
 React.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
       Skeleton,
       {
         loading,
-        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+        ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
       },
       index
     )) });