@luxfi/ui 8.0.0 → 8.2.0

package/dist/table.js

@@ -1,160 +1,31 @@
 "use client";
 import { throttle } from 'es-toolkit';
+import { Box, sx, cn, css } from '@hanzo/ui';
 import * as React3 from 'react';
 import React3__default from 'react';
-import { cn } from '@hanzo/ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/table.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 = React3.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 && React3.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React3.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
       }
     );
@@ -169,7 +40,7 @@ React3.forwardRef(
       {
         ref,
         loading,
-        className: cn("rounded-full shrink-0", className),
+        ...sx("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -179,11 +50,11 @@ React3.forwardRef(
 React3.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
     )) });
@@ -245,7 +116,7 @@ var BASE_CLASSES = "inline-flex items-center gap-0 cursor-pointer data-[disabled
 var LinkExternalIcon = ({ color }) => /* @__PURE__ */ jsx(
   ArrowIcon,
   {
-    className: cn(
+    ...sx(
       "size-3 align-middle shrink-0",
       "group-hover:text-inherit"
     ),
@@ -315,8 +186,9 @@ var Link = React3__default.forwardRef(
     if (external) {
       const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
       return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsxs(
-        "a",
+        Box,
         {
+          tag: "a",
           href: processedHref,
           className: cn("group", linkClasses),
           style: linkStyle,
@@ -333,8 +205,9 @@ var Link = React3__default.forwardRef(
     }
     if (href) {
       return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsx(
-        "a",
+        Box,
         {
+          tag: "a",
           href,
           className: linkClasses,
           style: linkStyle,
@@ -345,8 +218,9 @@ var Link = React3__default.forwardRef(
       ) });
     }
     return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsx(
-      "span",
+      Box,
       {
+        tag: "span",
         className: linkClasses,
         ...disabled ? { "data-disabled": true } : {},
         ...rest,
@@ -359,7 +233,7 @@ React3__default.forwardRef(
   function LinkBox2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      "div",
+      Box,
       {
         ref,
         className: cn("relative", className),
@@ -409,26 +283,28 @@ React3__default.forwardRef(
     if (external) {
       const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
       return /* @__PURE__ */ jsx(
-        "a",
+        Box,
         {
+          tag: "a",
           ref,
           href: loading ? void 0 : processedHref,
           className: overlayClasses,
           target: "_blank",
           rel: "noopener noreferrer",
           ...rest,
-          children: (children || !noIcon && href) && /* @__PURE__ */ jsxs(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children: [
+          children: (children || !noIcon && href) && /* @__PURE__ */ jsxs(Skeleton, { ...sx("inline-flex items-center max-w-full h-full"), loading, children: [
             children,
             !noIcon && href && /* @__PURE__ */ jsx(LinkExternalIcon, { color: iconColor })
           ] })
         }
       );
     }
-    const content = children ? /* @__PURE__ */ jsx(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children }) : null;
+    const content = children ? /* @__PURE__ */ jsx(Skeleton, { ...sx("inline-flex items-center max-w-full h-full"), loading, children }) : null;
     if (href) {
       return /* @__PURE__ */ jsx(
-        "a",
+        Box,
         {
+          tag: "a",
           ref,
           href,
           className: overlayClasses,
@@ -438,8 +314,9 @@ React3__default.forwardRef(
       );
     }
     return /* @__PURE__ */ jsx(
-      "span",
+      Box,
       {
+        tag: "span",
         ref,
         className: overlayClasses,
         ...rest,
@@ -448,7 +325,7 @@ React3__default.forwardRef(
     );
   }
 );
-var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ArrowIcon2 = (props) => /* @__PURE__ */ jsx("svg", { ...props, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var SPACING_SCALE = 4;
 function toPixels(value) {
   if (value === void 0) return void 0;
@@ -639,8 +516,9 @@ var TableRoot = React3.forwardRef(
     const { style: extracted, rest } = extractStyles(other);
     const merged = { ...extracted, ...styleProp };
     return /* @__PURE__ */ jsx(
-      "table",
+      Box,
       {
+        tag: "table",
         ref,
         className: cn("w-full border-collapse text-sm", className),
         style: merged,
@@ -656,8 +534,9 @@ var TableHeader = React3.forwardRef(
     const { style: extracted, rest } = extractStyles(other);
     const merged = { ...extracted, ...styleProp };
     return /* @__PURE__ */ jsx(
-      "thead",
+      Box,
       {
+        tag: "thead",
         ref,
         className: cn("", className),
         style: merged,
@@ -673,8 +552,9 @@ var TableBody = React3.forwardRef(
     const { style: extracted, rest } = extractStyles(other);
     const merged = { ...extracted, ...styleProp };
     return /* @__PURE__ */ jsx(
-      "tbody",
+      Box,
       {
+        tag: "tbody",
         ref,
         className: cn("", className),
         style: merged,
@@ -690,8 +570,9 @@ var TableRow = React3.forwardRef(
     const { style: extracted, rest } = extractStyles(other);
     const merged = { ...extracted, ...styleProp };
     return /* @__PURE__ */ jsx(
-      "tr",
+      Box,
       {
+        tag: "tr",
         ref,
         className: cn("", className),
         style: merged,
@@ -711,8 +592,9 @@ var TableCell = React3.forwardRef(
       ...styleProp
     };
     return /* @__PURE__ */ jsx(
-      "td",
+      Box,
       {
+        tag: "td",
         ref,
         className: cn("px-3 py-2.5 align-top text-sm", className),
         style: merged,
@@ -732,8 +614,9 @@ var TableColumnHeader = React3.forwardRef(
       ...styleProp
     };
     return /* @__PURE__ */ jsx(
-      "th",
+      Box,
       {
+        tag: "th",
         ref,
         className: cn(
           "px-3 py-2 text-xs font-semibold uppercase tracking-wider",
@@ -755,16 +638,17 @@ var TableColumnHeaderSortable = (props) => {
   const isActive = sortValue.includes(sortField);
   const isAsc = sortValue.toLowerCase().includes("asc");
   return /* @__PURE__ */ jsxs(TableColumnHeader, { ...rest, children: [
-    /* @__PURE__ */ jsxs(Link, { onClick: disabled ? void 0 : handleSortToggle, className: "relative", children: [
+    /* @__PURE__ */ jsxs(Link, { onClick: disabled ? void 0 : handleSortToggle, ...sx("relative"), style: css("relative"), children: [
       isActive && /* @__PURE__ */ jsx(
-        "span",
+        Box,
         {
+          tag: "span",
           className: cn(
             "absolute top-0 inline-flex h-full w-4 items-center",
             indicatorPosition === "left" ? "-left-5" : "-right-5",
             isAsc ? "-rotate-90" : "rotate-90"
           ),
-          children: /* @__PURE__ */ jsx(ArrowIcon2, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(ArrowIcon2, { style: css("h-4 w-4") })
         }
       ),
       children
@@ -795,7 +679,7 @@ var TableHeaderSticky = (props) => {
     TableHeader,
     {
       ref,
-      className: cn("sticky z-[1] bg-white dark:bg-black", className),
+      ...sx("sticky z-[1] bg-white dark:bg-black", className),
       style: {
         top: top ? `${top}px` : 0,
         boxShadow: isStuck ? ACTION_BAR_SHADOW : "none",
@@ -812,8 +696,9 @@ var TableCaption = React3.forwardRef(
     const { style: extracted, rest } = extractStyles(other);
     const merged = { ...extracted, ...styleProp };
     return /* @__PURE__ */ jsx(
-      "caption",
+      Box,
       {
+        tag: "caption",
         ref,
         className: cn("px-3 py-2 text-sm text-[var(--color-table-header-fg)]", className),
         style: merged,
@@ -829,8 +714,9 @@ var TableFooter = React3.forwardRef(
     const { style: extracted, rest } = extractStyles(other);
     const merged = { ...extracted, ...styleProp };
     return /* @__PURE__ */ jsx(
-      "tfoot",
+      Box,
       {
+        tag: "tfoot",
         ref,
         className: cn("", className),
         style: merged,
@@ -844,7 +730,7 @@ var TableScrollWrapper = React3.forwardRef(
   function TableScrollWrapper2(props, ref) {
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      "div",
+      Box,
       {
         ref,
         className: cn("w-full overflow-x-auto", className),

package/dist/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAwB,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,KAAK,WAAW,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC;AACpE,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AA0ErC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAElG,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,kCAAkC;IAClC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,QAAQ,GAAI,mDAMtB,SAAS,KAAG,KAAK,CAAC,YAcpB,CAAC;AAMF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;AAEnE,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,KAAG,KAAK,CAAC,YAarD,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,GAAI,wBAAwB,gBAAgB,KAAG,KAAK,CAAC,YAwB5E,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;AAEzE,eAAO,MAAM,WAAW,GAAI,wBAAwB,gBAAgB,KAAG,KAAK,CAAC,YAI5E,CAAC;AAMF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAID;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,WAAW,gBAAgB,KAAG,KAAK,CAAC,YAAY,GAAG,IAQ9E,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAwB,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,KAAK,WAAW,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC;AACpE,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AA0ErC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAElG,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,kCAAkC;IAClC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,QAAQ,sDAMlB,SAAS,KAAG,KAAK,CAAC,YAcpB,CAAC;AAMF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;AAEnE,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,KAAK,CAAC,YAarD,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,2BAA4B,gBAAgB,KAAG,KAAK,CAAC,YAwB5E,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;AAEzE,eAAO,MAAM,WAAW,2BAA4B,gBAAgB,KAAG,KAAK,CAAC,YAI5E,CAAC;AAMF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAID;;;GAGG;AACH,eAAO,MAAM,WAAW,cAAe,gBAAgB,KAAG,KAAK,CAAC,YAAY,GAAG,IAQ9E,CAAC"}

package/dist/tag.cjs

@@ -86,155 +86,26 @@ var CloseButton = React4__namespace.forwardRef(function CloseButton2(props, ref)
     }
   );
 });
-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 = React4__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 && React4__namespace.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React4__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
       }
     );
@@ -249,7 +120,7 @@ React4__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
       }
@@ -259,11 +130,11 @@ React4__namespace.forwardRef(
 React4__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
     )) });