@luxfi/ui 7.4.15 → 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/gui.d.ts

@@ -1,2 +1,2 @@
 export * from '@hanzo/gui';
-import 'lucide-react';
+//# sourceMappingURL=gui.d.ts.map

package/dist/gui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui.d.ts","sourceRoot":"","sources":["../src/gui.ts"],"names":[],"mappings":"AAgBA,cAAc,YAAY,CAAC"}

package/dist/heading.d.ts

@@ -1,8 +1,6 @@
-import React__default from 'react';
-
-interface HeadingProps extends React__default.ComponentPropsWithoutRef<'h1'> {
+import React from 'react';
+export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
     level?: '1' | '2' | '3';
 }
-declare const Heading: React__default.ForwardRefExoticComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement>>;
-
-export { Heading, type HeadingProps };
+export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+//# sourceMappingURL=heading.d.ts.map

package/dist/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../src/heading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IACxE,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACzB;AAmBD,eAAO,MAAM,OAAO,yFAenB,CAAC"}

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/iam.d.ts

@@ -1,7 +1,6 @@
-import { WhiteLabel } from './white-label.js';
-
+import { type WhiteLabel } from './white-label';
 /** A signed-in principal, as IAM describes it. */
-interface IamAccount {
+export interface IamAccount {
     readonly owner: string;
     readonly name: string;
     readonly displayName?: string;
@@ -10,14 +9,14 @@ interface IamAccount {
     readonly isAdmin?: boolean;
 }
 /** An organization the principal can see. */
-interface IamOrg {
+export interface IamOrg {
     readonly owner: string;
     readonly name: string;
     readonly displayName?: string;
     readonly logo?: string;
 }
 /** A project inside an organization (IAM's Org → Workspace → Project tier). */
-interface IamProject {
+export interface IamProject {
     readonly owner: string;
     readonly name: string;
     readonly displayName?: string;
@@ -30,22 +29,22 @@ interface IamProject {
  * "signed in, and the answer is genuinely empty" — the distinction a switcher
  * has to render honestly.
  */
-declare class IamError extends Error {
+export declare class IamError extends Error {
     readonly status: number;
     readonly unauthenticated: boolean;
     constructor(message: string, status: number, unauthenticated: boolean);
 }
 /** The IAM API root for a host — `lux.cloud` → `https://lux.id/v1/iam`. */
-declare function iamBase(host?: string | null | WhiteLabel): string;
+export declare function iamBase(host?: string | null | WhiteLabel): string;
 /** How a read reaches IAM: where, and with whose bearer. */
-interface IamCall {
+export interface IamCall {
     readonly base: string;
     readonly token?: string | null;
     readonly signal?: AbortSignal;
 }
 /** Rows per page for the org list — small first paint, more on demand. */
-declare const IAM_PAGE_SIZE = 20;
-declare const iam: {
+export declare const IAM_PAGE_SIZE = 20;
+export declare const iam: {
     /** The signed-in principal, or null when there is no session. */
     account(call: IamCall): Promise<IamAccount | null>;
     /**
@@ -61,5 +60,4 @@ declare const iam: {
     /** The organization's projects — IAM keys this read by `organization`. */
     projects(call: IamCall, org: string): Promise<Array<IamProject>>;
 };
-
-export { IAM_PAGE_SIZE, type IamAccount, type IamCall, IamError, type IamOrg, type IamProject, iam, iamBase };
+//# sourceMappingURL=iam.d.ts.map

package/dist/iam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iam.d.ts","sourceRoot":"","sources":["../src/iam.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAEnE,kDAAkD;AAClD,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,6CAA6C;AAC7C,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,+EAA+E;AAC/E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;CAC9B;AAUD;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,KAAK;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;gBACtB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO;CAMtE;AAuBD,2EAA2E;AAC3E,wBAAgB,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,CAGjE;AAED,4DAA4D;AAC5D,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;CAC/B;AA6BD,0EAA0E;AAC1E,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,eAAO,MAAM,GAAG;IACd,iEAAiE;kBAC7C,OAAO,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAUxD;;;;OAIG;wBACuB,OAAO,qDAAmD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAgB1G,gCAAgC;uBACP,OAAO,QAAQ,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAIvE,kCAAkC;gBAChB,OAAO,OAAO,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAInE,0EAA0E;mBACrD,OAAO,OAAO,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;CAGvE,CAAC"}

package/dist/icon-button.cjs

@@ -3,8 +3,7 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
+var ui = require('@hanzo/ui');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,158 +27,26 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/icon-button.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-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 ? 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: 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: 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
       }
     );
@@ -194,7 +61,7 @@ React__namespace.forwardRef(
       {
         ref,
         loading,
-        className: cn("rounded-full shrink-0", className),
+        ...ui.sx("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -204,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: 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: 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.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 type Style = Record<string, unknown>;
 /**
  * Resting look, and the looks that replace it while selected or expanded.
@@ -14,7 +13,7 @@ declare const VARIANT: Record<string, {
 }>;
 type Variant = keyof typeof VARIANT;
 type Size = '2xs' | '2xs_alt' | 'md';
-interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
     /** Visual variant */
     variant?: Variant;
     /** Icon-button size */
@@ -32,6 +31,6 @@ interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
     /** Polymorphic element type (e.g. "div") */
     as?: React.ElementType;
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-
-export { IconButton, type IconButtonProps };
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../src/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAMrC;;;;;GAKG;AACH,QAAA,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CA6DhF,CAAC;AAKF,KAAK,OAAO,GAAG,MAAM,OAAO,OAAO,CAAC;AACpC,KAAK,IAAI,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAElG,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,2FAwDtB,CAAC"}