@luxfi/ui 8.0.0 → 8.2.0

package/dist/auth.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var browser = require('@hanzo/iam/browser');
+var ui = require('@hanzo/ui');
 var React2 = require('react');
 require('@hanzo/gui');
 var reactQuery = require('@tanstack/react-query');
@@ -467,11 +468,11 @@ var AuthCallback = ({
       live = false;
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[50vh] items-center justify-center px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-sm text-center", children: error ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-lg font-semibold text-[var(--color-text-error)]", children: "Sign-in failed" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm text-[var(--color-text-secondary)]", children: error }),
-    /* @__PURE__ */ jsxRuntime.jsx("a", { href: retryPath, className: "text-sm underline underline-offset-4", children: "Try again" })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: "Completing sign in\u2026" }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "flex min-h-[50vh] items-center justify-center px-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "w-full max-w-sm text-center", children: error ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "mb-2 text-lg font-semibold text-[var(--color-text-error)]", children: "Sign-in failed" }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "mb-6 text-sm text-[var(--color-text-secondary)]", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "a", href: retryPath, className: "text-sm underline underline-offset-4", children: "Try again" })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "text-sm text-[var(--color-text-secondary)]", children: "Completing sign in\u2026" }) }) });
 };
 
 exports.AuthCallback = AuthCallback;

package/dist/auth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../src/auth.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA8BhD;;;GAGG;AACH,eAAO,MAAM,aAAa,mBAAmB,CAAC;AAE9C,qFAAqF;AACrF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,CAUlD;AAED,MAAM,WAAW,IAAI;IACnB,oEAAoE;IACpE,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;CACjC;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,eAAe,SAAM,GAAG,IAAI,CASnD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,mCAAyC,iBAAiB,KAAG,KAAK,CAAC,YAU/F,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,gDAK1B,iBAAiB,KAAG,KAAK,CAAC,YA8C5B,CAAC"}
+{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../src/auth.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA8BhD;;;GAGG;AACH,eAAO,MAAM,aAAa,mBAAmB,CAAC;AAE9C,qFAAqF;AACrF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,CAUlD;AAED,MAAM,WAAW,IAAI;IACnB,oEAAoE;IACpE,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;CACjC;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,eAAe,SAAM,GAAG,IAAI,CASnD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,sCAA6C,iBAAiB,KAAG,KAAK,CAAC,YAU/F,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mDAKtB,iBAAiB,KAAG,KAAK,CAAC,YA8C5B,CAAC"}

package/dist/auth.js

@@ -1,5 +1,6 @@
 "use client";
 import { configureIam, handleCallback, logout, startLogin } from '@hanzo/iam/browser';
+import { Box } from '@hanzo/ui';
 import * as React2 from 'react';
 import React2__default from 'react';
 import '@hanzo/gui';
@@ -446,11 +447,11 @@ var AuthCallback = ({
       live = false;
     };
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: "flex min-h-[50vh] items-center justify-center px-4", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-2 text-lg font-semibold text-[var(--color-text-error)]", children: "Sign-in failed" }),
-    /* @__PURE__ */ jsx("p", { className: "mb-6 text-sm text-[var(--color-text-secondary)]", children: error }),
-    /* @__PURE__ */ jsx("a", { href: retryPath, className: "text-sm underline underline-offset-4", children: "Try again" })
-  ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: "Completing sign in\u2026" }) }) });
+  return /* @__PURE__ */ jsx(Box, { className: "flex min-h-[50vh] items-center justify-center px-4", children: /* @__PURE__ */ jsx(Box, { className: "w-full max-w-sm text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { tag: "p", className: "mb-2 text-lg font-semibold text-[var(--color-text-error)]", children: "Sign-in failed" }),
+    /* @__PURE__ */ jsx(Box, { tag: "p", className: "mb-6 text-sm text-[var(--color-text-secondary)]", children: error }),
+    /* @__PURE__ */ jsx(Box, { tag: "a", href: retryPath, className: "text-sm underline underline-offset-4", children: "Try again" })
+  ] }) : /* @__PURE__ */ jsx(Box, { tag: "p", className: "text-sm text-[var(--color-text-secondary)]", children: "Completing sign in\u2026" }) }) });
 };
 
 export { AuthCallback, AuthProvider, CALLBACK_PATH, configureAuth, useAuth };

package/dist/badge.cjs

@@ -28,155 +28,26 @@ function _interopNamespace(e) {
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/badge.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__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 && React3__namespace.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React3__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
       }
     );
@@ -191,7 +62,7 @@ React3__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
       }
@@ -201,11 +72,11 @@ React3__namespace.forwardRef(
 React3__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
     )) });
@@ -398,7 +269,16 @@ var COLOR_PALETTE = {
   bright_purple: { bg: "var(--color-badge-bright-purple-bg)", fg: "var(--color-badge-bright-purple-fg)" },
   bright_pink: { bg: "var(--color-badge-bright-pink-bg)", fg: "var(--color-badge-bright-pink-fg)" }
 };
-var S2 = 4;
+var TONE = {
+  subtle: (p) => ({ backgroundColor: p.bg, color: p.fg, borderWidth: 0 }),
+  solid: (p) => ({ backgroundColor: p.fg, color: p.bg, borderWidth: 0 }),
+  outline: (p) => ({
+    backgroundColor: "transparent",
+    color: p.fg,
+    borderWidth: 1,
+    borderColor: p.fg
+  })
+};
 var Badge = React3__namespace.default.forwardRef(
   function Badge2(props, ref) {
     const {
@@ -407,38 +287,22 @@ var Badge = React3__namespace.default.forwardRef(
       children,
       truncated = false,
       endElement,
-      variant: _variant,
+      variant = "subtle",
       size = "md",
       colorPalette = "gray",
       className,
-      flexShrink: _flexShrink,
-      gap: _gap,
-      ml: _ml,
-      mr: _mr,
-      style: styleProp,
+      style: badgeStyle,
       ...rest
     } = props;
-    const shimStyle = { ...styleProp };
-    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
-    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * S2}px` : _gap;
-    if (_ml !== void 0) {
-      if (typeof _ml === "object") {
-        const obj = _ml;
-        shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * S2}px`;
-      } else {
-        shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * S2}px` : _ml;
-      }
-    }
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
-    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     const palette = COLOR_PALETTE[colorPalette];
+    const tone = TONE[variant](palette);
     const child = children ? (
       // `ellipsis` is gui Text's own built-in variant for single-line
       // truncation — it expands to the same overflow/text-overflow/
       // white-space/max-width rule Tailwind's `text-ellipsis` did, but
       // through the component's own variants (guaranteed to compile),
       // rather than naming each longhand as a separate style prop.
-      /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { ellipsis: true, ...SIZE_TEXT[size], color: palette.fg, children })
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { ellipsis: true, ...SIZE_TEXT[size], color: tone.color, children })
     ) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
     const badgeElement = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -454,7 +318,7 @@ var Badge = React3__namespace.default.forwardRef(
         maxWidth: "100%",
         userSelect: "text",
         ...SIZE[size],
-        backgroundColor: palette.bg,
+        ...tone,
         className,
         style: badgeStyle,
         ...rest,

package/dist/badge.d.ts

@@ -1,17 +1,14 @@
 import React from 'react';
 type ColorPalette = 'gray' | 'green' | 'red' | 'purple' | 'orange' | 'blue' | 'yellow' | 'teal' | 'cyan' | 'pink' | 'purple_alt' | 'blue_alt' | 'bright_gray' | 'bright_green' | 'bright_red' | 'bright_blue' | 'bright_yellow' | 'bright_teal' | 'bright_cyan' | 'bright_orange' | 'bright_purple' | 'bright_pink';
+export type BadgeVariant = 'subtle' | 'solid' | 'outline';
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
     readonly loading?: boolean;
     readonly startElement?: React.ReactNode;
     readonly endElement?: React.ReactNode;
     readonly truncated?: boolean;
     readonly colorPalette?: ColorPalette;
-    readonly variant?: 'subtle' | 'solid';
+    readonly variant?: BadgeVariant;
     readonly size?: 'sm' | 'md' | 'lg';
-    readonly flexShrink?: number;
-    readonly gap?: number | string;
-    readonly ml?: number | string | Record<string, number>;
-    readonly mr?: number | string;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../src/badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,KAAK,YAAY,GACf,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAClE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GACpD,aAAa,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,GAC7D,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,eAAe,GACjE,eAAe,GAAG,aAAa,CAAC;AA2ClC,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC5D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC,QAAQ,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACtC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEnC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAID,eAAO,MAAM,KAAK,mFAsFjB,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../src/badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,KAAK,YAAY,GACf,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAClE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GACpD,aAAa,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,GAC7D,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,eAAe,GACjE,eAAe,GAAG,aAAa,CAAC;AA2ClC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAqB1D,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC5D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,KAAK,mFAqEjB,CAAC"}

package/dist/badge.js

@@ -2,160 +2,31 @@
 import { TooltipGroup, Tooltip as Tooltip$1, Text, XStack } from '@hanzo/gui';
 import * as React3 from 'react';
 import React3__default, { Children, createElement } from 'react';
-import { cn } from '@hanzo/ui';
+import { Box, sx, cn } from '@hanzo/ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/badge.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
       }
     );
@@ -170,7 +41,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
       }
@@ -180,11 +51,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
     )) });
@@ -377,7 +248,16 @@ var COLOR_PALETTE = {
   bright_purple: { bg: "var(--color-badge-bright-purple-bg)", fg: "var(--color-badge-bright-purple-fg)" },
   bright_pink: { bg: "var(--color-badge-bright-pink-bg)", fg: "var(--color-badge-bright-pink-fg)" }
 };
-var S2 = 4;
+var TONE = {
+  subtle: (p) => ({ backgroundColor: p.bg, color: p.fg, borderWidth: 0 }),
+  solid: (p) => ({ backgroundColor: p.fg, color: p.bg, borderWidth: 0 }),
+  outline: (p) => ({
+    backgroundColor: "transparent",
+    color: p.fg,
+    borderWidth: 1,
+    borderColor: p.fg
+  })
+};
 var Badge = React3__default.forwardRef(
   function Badge2(props, ref) {
     const {
@@ -386,38 +266,22 @@ var Badge = React3__default.forwardRef(
       children,
       truncated = false,
       endElement,
-      variant: _variant,
+      variant = "subtle",
       size = "md",
       colorPalette = "gray",
       className,
-      flexShrink: _flexShrink,
-      gap: _gap,
-      ml: _ml,
-      mr: _mr,
-      style: styleProp,
+      style: badgeStyle,
       ...rest
     } = props;
-    const shimStyle = { ...styleProp };
-    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
-    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * S2}px` : _gap;
-    if (_ml !== void 0) {
-      if (typeof _ml === "object") {
-        const obj = _ml;
-        shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * S2}px`;
-      } else {
-        shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * S2}px` : _ml;
-      }
-    }
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
-    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     const palette = COLOR_PALETTE[colorPalette];
+    const tone = TONE[variant](palette);
     const child = children ? (
       // `ellipsis` is gui Text's own built-in variant for single-line
       // truncation — it expands to the same overflow/text-overflow/
       // white-space/max-width rule Tailwind's `text-ellipsis` did, but
       // through the component's own variants (guaranteed to compile),
       // rather than naming each longhand as a separate style prop.
-      /* @__PURE__ */ jsx(Text, { ellipsis: true, ...SIZE_TEXT[size], color: palette.fg, children })
+      /* @__PURE__ */ jsx(Text, { ellipsis: true, ...SIZE_TEXT[size], color: tone.color, children })
     ) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
     const badgeElement = /* @__PURE__ */ jsxs(
@@ -433,7 +297,7 @@ var Badge = React3__default.forwardRef(
         maxWidth: "100%",
         userSelect: "text",
         ...SIZE[size],
-        backgroundColor: palette.bg,
+        ...tone,
         className,
         style: badgeStyle,
         ...rest,