@luxfi/ui 7.4.10 → 7.4.12

package/dist/alert.js

@@ -1,14 +1,12 @@
 "use client";
+import { styled, View, XStack, YStack, Text } from '@hanzo/gui';
 import * as React2 from 'react';
+import { Children, createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzo/gui';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/alert.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
 var CloseButtonFrame = styled(View, {
   name: "LuxCloseButton",
@@ -39,23 +37,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -71,6 +65,17 @@ var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 var SHIM_PROPS = [
   "w",
   "h",
@@ -254,22 +259,30 @@ React2.forwardRef(
     )) });
   }
 );
-var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
-var ALERT_BASE = "w-full flex items-start relative rounded text-[var(--color-alert-fg)]";
-var STATUS_CLASSES = {
-  info: "bg-[var(--color-alert-bg-info)]",
-  warning: "bg-[var(--color-alert-bg-warning)]",
-  warning_table: "bg-[var(--color-alert-bg-warning-table)]",
-  success: "bg-[var(--color-alert-bg-success)]",
-  error: "bg-[var(--color-alert-bg-error)]"
+var IndicatorIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
+var ALERT_BASE = {
+  width: "100%",
+  position: "relative",
+  alignItems: "flex-start",
+  borderRadius: 4,
+  gap: 8,
+  paddingVertical: 8
+};
+var ALERT_FG = "var(--color-alert-fg)";
+var STATUS_BG = {
+  info: "var(--color-alert-bg-info)",
+  warning: "var(--color-alert-bg-warning)",
+  warning_table: "var(--color-alert-bg-warning-table)",
+  success: "var(--color-alert-bg-success)",
+  error: "var(--color-alert-bg-error)"
 };
-var SIZE_CLASSES = {
-  sm: "gap-2 px-2 py-2 text-xs",
-  md: "gap-2 px-3 py-2 text-base"
+var SIZE = {
+  sm: { paddingHorizontal: 8, fontSize: 12 },
+  md: { paddingHorizontal: 12, fontSize: 16 }
 };
-var INDICATOR_SIZE_CLASSES = {
-  sm: "w-5 h-5 my-0",
-  md: "w-5 h-5 my-[2px]"
+var INDICATOR_SIZE = {
+  sm: { marginVertical: 0 },
+  md: { marginVertical: 2 }
 };
 var Alert = React2.forwardRef(
   function Alert2(props, ref) {
@@ -298,7 +311,8 @@ var Alert = React2.forwardRef(
     const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     const [isOpen, setIsOpen] = React2.useState(true);
     const resolvedSize = size ?? "md";
-    const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon, { className: "w-5 h-5" });
+    const fontSize = SIZE[resolvedSize].fontSize;
+    const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon, {});
     const iconElement = (() => {
       if (startElement !== void 0) {
         return startElement;
@@ -306,10 +320,20 @@ var Alert = React2.forwardRef(
       if (!showIcon && icon === void 0) {
         return null;
       }
-      return /* @__PURE__ */ jsx("span", { className: cn(
-        "inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full",
-        INDICATOR_SIZE_CLASSES[resolvedSize]
-      ), children: icon || defaultIcon });
+      return /* @__PURE__ */ jsx(
+        XStack,
+        {
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          width: 20,
+          height: 20,
+          ...INDICATOR_SIZE[resolvedSize],
+          className: "lux-icon",
+          style: { color: ALERT_FG },
+          children: icon || defaultIcon
+        }
+      );
     })();
     const handleClose = React2.useCallback(() => {
       setIsOpen(false);
@@ -338,35 +362,34 @@ var Alert = React2.forwardRef(
       ...descRowGap !== void 0 ? { rowGap: typeof descRowGap === "number" ? `${descRowGap * 4}px` : descRowGap } : {},
       ...descColumnGap !== void 0 ? { columnGap: typeof descColumnGap === "number" ? `${descColumnGap * 4}px` : descColumnGap } : {}
     };
+    const ContentFrame = inline ? XStack : YStack;
     return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsxs(
-      "div",
+      XStack,
       {
         ref,
-        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className),
+        ...ALERT_BASE,
+        paddingHorizontal: SIZE[resolvedSize].paddingHorizontal,
+        backgroundColor: STATUS_BG[status],
+        className,
         style: alertStyle,
         ...alertRest,
         children: [
           iconElement,
-          children ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1", inline ? "inline-flex flex-row items-center" : "flex flex-col"), children: [
-            title && /* @__PURE__ */ jsx("div", { className: "font-semibold", children: title }),
+          children ? /* @__PURE__ */ jsxs(ContentFrame, { flex: 1, alignItems: inline ? "center" : void 0, children: [
+            title && /* @__PURE__ */ jsx(Text, { fontWeight: "600", fontSize, color: ALERT_FG, children: title }),
             /* @__PURE__ */ jsx(
-              "div",
+              XStack,
               {
-                className: cn("inline-flex flex-wrap", descClassName),
+                flexWrap: "wrap",
+                className: descClassName,
                 style: Object.keys(descStyle).length > 0 ? descStyle : void 0,
                 ...descRest,
-                children
+                children: ink(children, void 0, { fontSize, color: ALERT_FG })
               }
             )
-          ] }) : /* @__PURE__ */ jsx("div", { className: "font-semibold flex-1", children: title }),
+          ] }) : /* @__PURE__ */ jsx(Text, { flex: 1, fontWeight: "600", fontSize, color: ALERT_FG, children: title }),
           endElement,
-          closable && /* @__PURE__ */ jsx(
-            CloseButton,
-            {
-              className: "relative self-start",
-              onClick: handleClose
-            }
-          )
+          closable && /* @__PURE__ */ jsx(View, { position: "relative", alignSelf: "flex-start", children: /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose }) })
         ]
       }
     ) });

package/dist/avatar.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -27,21 +25,32 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var SIZE_CLASSES = {
-  xs: "h-6 w-6 text-[10px]",
-  sm: "h-8 w-8 text-xs",
-  md: "h-10 w-10 text-sm",
-  lg: "h-12 w-12 text-base",
-  xl: "h-16 w-16 text-lg",
-  "2xl": "h-20 w-20 text-xl"
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React.createElement(Wrap, props, child) : child);
+};
+var SIZE = {
+  xs: { width: 24, height: 24, fontSize: 10 },
+  sm: { width: 32, height: 32, fontSize: 12 },
+  md: { width: 40, height: 40, fontSize: 14 },
+  lg: { width: 48, height: 48, fontSize: 16 },
+  xl: { width: 64, height: 64, fontSize: 18 },
+  "2xl": { width: 80, height: 80, fontSize: 20 }
 };
-var VARIANT_CLASSES = {
-  solid: "bg-gray-500 text-white",
-  subtle: "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200",
-  outline: "border-2 border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-200"
+var RING = "var(--color-bg-body)";
+var VARIANT = {
+  solid: { backgroundColor: "var(--color-gray-500)", color: "var(--color-white)" },
+  subtle: { backgroundColor: "var(--color-badge-gray-bg)", color: "var(--color-badge-gray-fg)" },
+  outline: {
+    borderWidth: 2,
+    borderColor: "var(--color-input-border)",
+    backgroundColor: "transparent",
+    color: "var(--color-text-secondary)"
+  }
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
@@ -60,7 +69,6 @@ var Avatar = React__namespace.forwardRef(
       icon,
       fallback,
       children,
-      className,
       size: sizeProp,
       variant: variantProp,
       borderless,
@@ -74,20 +82,26 @@ var Avatar = React__namespace.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(
-          "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES[size],
-          VARIANT_CLASSES[variant],
-          !isBorderless && "ring-2 ring-white dark:ring-gray-900",
-          className
-        ),
+        position: "relative",
+        display: "inline-flex",
+        flexShrink: 0,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 9999,
+        ...SIZE[size],
+        ...VARIANT[variant],
+        boxShadow: isBorderless ? void 0 : `0 0 0 2px ${RING}`,
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { name, icon, children: fallback }),
           src != null && /* @__PURE__ */ jsxRuntime.jsx(
             gui.Avatar.Image,
             {
-              className: "h-full w-full rounded-[inherit] object-cover",
+              width: "100%",
+              height: "100%",
+              borderRadius: 9999,
+              objectFit: "cover",
               src,
               srcSet,
               loading,
@@ -102,22 +116,18 @@ var Avatar = React__namespace.forwardRef(
 );
 var AvatarFallback = React__namespace.forwardRef(
   function AvatarFallback2(props, ref) {
-    const { name, icon, children, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const { name, icon, children, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
       gui.Avatar.Fallback,
       {
         ref,
-        unstyled: true,
-        className: cn(
-          "flex h-full w-full items-center justify-center font-medium",
-          className
-        ),
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
         ...rest,
-        children: [
-          children,
-          name != null && children == null && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: getInitials(name) }),
-          name == null && children == null && icon
-        ]
+        children: ink(children ?? (name != null ? getInitials(name) : icon), void 0, { fontWeight: "500" })
       }
     );
   }
@@ -130,19 +140,12 @@ function getInitials(name) {
 }
 var AvatarGroup = React__namespace.forwardRef(
   function AvatarGroup2(props, ref) {
-    const { size, variant, borderless, className, ...rest } = props;
+    const { size, variant, borderless, children, ...rest } = props;
     const contextValue = React__namespace.useMemo(
       () => ({ size, variant, borderless }),
       [size, variant, borderless]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex -space-x-3", className),
-        ...rest
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { ref, ...rest, children: React__namespace.Children.map(children, (child, index) => index === 0 || !React__namespace.isValidElement(child) ? child : React__namespace.cloneElement(child, { marginLeft: -12 })) }) });
   }
 );
 

package/dist/avatar.js

@@ -1,25 +1,35 @@
 "use client";
-import { Avatar as Avatar$1 } from '@hanzo/gui';
+import { Avatar as Avatar$1, Text, XStack } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Children, createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SIZE_CLASSES = {
-  xs: "h-6 w-6 text-[10px]",
-  sm: "h-8 w-8 text-xs",
-  md: "h-10 w-10 text-sm",
-  lg: "h-12 w-12 text-base",
-  xl: "h-16 w-16 text-lg",
-  "2xl": "h-20 w-20 text-xl"
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
+var SIZE = {
+  xs: { width: 24, height: 24, fontSize: 10 },
+  sm: { width: 32, height: 32, fontSize: 12 },
+  md: { width: 40, height: 40, fontSize: 14 },
+  lg: { width: 48, height: 48, fontSize: 16 },
+  xl: { width: 64, height: 64, fontSize: 18 },
+  "2xl": { width: 80, height: 80, fontSize: 20 }
 };
-var VARIANT_CLASSES = {
-  solid: "bg-gray-500 text-white",
-  subtle: "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200",
-  outline: "border-2 border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-200"
+var RING = "var(--color-bg-body)";
+var VARIANT = {
+  solid: { backgroundColor: "var(--color-gray-500)", color: "var(--color-white)" },
+  subtle: { backgroundColor: "var(--color-badge-gray-bg)", color: "var(--color-badge-gray-fg)" },
+  outline: {
+    borderWidth: 2,
+    borderColor: "var(--color-input-border)",
+    backgroundColor: "transparent",
+    color: "var(--color-text-secondary)"
+  }
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
@@ -38,7 +48,6 @@ var Avatar = React.forwardRef(
       icon,
       fallback,
       children,
-      className,
       size: sizeProp,
       variant: variantProp,
       borderless,
@@ -52,20 +61,26 @@ var Avatar = React.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(
-          "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES[size],
-          VARIANT_CLASSES[variant],
-          !isBorderless && "ring-2 ring-white dark:ring-gray-900",
-          className
-        ),
+        position: "relative",
+        display: "inline-flex",
+        flexShrink: 0,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 9999,
+        ...SIZE[size],
+        ...VARIANT[variant],
+        boxShadow: isBorderless ? void 0 : `0 0 0 2px ${RING}`,
         ...rest,
         children: [
           /* @__PURE__ */ jsx(AvatarFallback, { name, icon, children: fallback }),
           src != null && /* @__PURE__ */ jsx(
             Avatar$1.Image,
             {
-              className: "h-full w-full rounded-[inherit] object-cover",
+              width: "100%",
+              height: "100%",
+              borderRadius: 9999,
+              objectFit: "cover",
               src,
               srcSet,
               loading,
@@ -80,22 +95,18 @@ var Avatar = React.forwardRef(
 );
 var AvatarFallback = React.forwardRef(
   function AvatarFallback2(props, ref) {
-    const { name, icon, children, className, ...rest } = props;
-    return /* @__PURE__ */ jsxs(
+    const { name, icon, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
       Avatar$1.Fallback,
       {
         ref,
-        unstyled: true,
-        className: cn(
-          "flex h-full w-full items-center justify-center font-medium",
-          className
-        ),
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
         ...rest,
-        children: [
-          children,
-          name != null && children == null && /* @__PURE__ */ jsx(Fragment, { children: getInitials(name) }),
-          name == null && children == null && icon
-        ]
+        children: ink(children ?? (name != null ? getInitials(name) : icon), void 0, { fontWeight: "500" })
       }
     );
   }
@@ -108,19 +119,12 @@ function getInitials(name) {
 }
 var AvatarGroup = React.forwardRef(
   function AvatarGroup2(props, ref) {
-    const { size, variant, borderless, className, ...rest } = props;
+    const { size, variant, borderless, children, ...rest } = props;
     const contextValue = React.useMemo(
       () => ({ size, variant, borderless }),
       [size, variant, borderless]
     );
-    return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex -space-x-3", className),
-        ...rest
-      }
-    ) });
+    return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(XStack, { ref, ...rest, children: React.Children.map(children, (child, index) => index === 0 || !React.isValidElement(child) ? child : React.cloneElement(child, { marginLeft: -12 })) }) });
   }
 );