@luxfi/ui 7.4.11 → 7.4.12

package/dist/switch.js

@@ -1,33 +1,20 @@
 "use client";
-import { Switch } from '@hanzo/gui';
+import { Label, Switch, Text, VisuallyHidden } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/switch.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var NOOP = () => {
 };
-var SIZE_CLASSES = {
-  sm: {
-    root: "h-4 w-7",
-    thumb: "h-3 w-3",
-    label: "text-xs"
-  },
-  md: {
-    root: "h-5 w-9",
-    thumb: "h-4 w-4",
-    label: "text-sm"
-  },
-  lg: {
-    root: "h-6 w-11",
-    thumb: "h-5 w-5",
-    label: "text-base"
-  }
+var SIZE = {
+  sm: { width: 28, height: 16, thumb: 12, label: 12 },
+  md: { width: 36, height: 20, thumb: 16, label: 14 },
+  lg: { width: 44, height: 24, thumb: 20, label: 16 }
 };
+var TRACK_ON = "var(--color-text-primary)";
+var TRACK_OFF = "var(--color-switch-bg)";
+var OUTLINE = "var(--color-gray-500)";
+var WHITE = "var(--color-white)";
 var SwitchBase = React.forwardRef(
   function Switch$1(props, ref) {
     const {
@@ -44,7 +31,6 @@ var SwitchBase = React.forwardRef(
       disabled = false,
       size = "md",
       direction,
-      className,
       ...rest
     } = props;
     const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
@@ -59,18 +45,19 @@ var SwitchBase = React.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none gap-2",
-          isRtl && "flex-row-reverse",
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: isRtl ? "row-reverse" : "row",
+        alignItems: "center",
+        gap: 8,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         onChange,
         "data-disabled": disabled || void 0,
         ...rest,
@@ -82,38 +69,51 @@ var SwitchBase = React.forwardRef(
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
-              className: cn(
-                "relative inline-flex shrink-0 items-center rounded-full",
-                "bg-gray-300 dark:bg-gray-600",
-                "data-[state=checked]:bg-gray-800 dark:bg-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-200",
-                sizeClasses.root
-              ),
+              position: "relative",
+              flexShrink: 0,
+              alignItems: "center",
+              width: s.width,
+              height: s.height,
+              borderRadius: 9999,
+              backgroundColor: checkedState ? TRACK_ON : TRACK_OFF,
+              transition: "quick",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
               children: [
-                trackLabel && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                trackLabel && /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    position: "absolute",
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 8,
+                    fontWeight: "700",
+                    color: WHITE,
+                    pointerEvents: "none",
+                    children: checkedState ? trackLabel.on : trackLabel.off
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   Switch.Thumb,
                   {
                     unstyled: true,
                     "data-thumb": true,
                     transition: "quicker",
-                    className: cn(
-                      "block rounded-full bg-white shadow-sm",
-                      sizeClasses.thumb
-                    ),
-                    children: thumbLabel && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                    width: s.thumb,
+                    height: s.thumb,
+                    borderRadius: 9999,
+                    backgroundColor: WHITE,
+                    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                    children: thumbLabel && /* @__PURE__ */ jsx(Text, { width: "100%", height: "100%", textAlign: "center", fontSize: 8, children: checkedState ? thumbLabel.on : thumbLabel.off })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState,
               disabled,
               tabIndex: -1,
@@ -121,15 +121,8 @@ var SwitchBase = React.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...labelProps,
-              className: cn(sizeClasses.label, labelProps?.className),
-              children
-            }
-          )
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { ...labelProps, fontSize: s.label, children })
         ]
       }
     );

package/dist/tag.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React4 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var gui = require('@hanzo/gui');
-var jsxRuntime = require('react/jsx-runtime');
 var usehooks = require('@uidotdev/usehooks');
 
 function _interopNamespace(e) {
@@ -29,9 +29,6 @@ function _interopNamespace(e) {
 var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // src/tag.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.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 = gui.styled(gui.View, {
   name: "LuxCloseButton",
@@ -62,23 +59,19 @@ var CloseButtonFrame = gui.styled(gui.View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React4__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -94,6 +87,9 @@ var CloseButton = React4__namespace.forwardRef(function CloseButton2(props, ref)
     }
   );
 });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 var SHIM_PROPS = [
   "w",
   "h",
@@ -277,6 +273,14 @@ React4__namespace.forwardRef(
     )) });
   }
 );
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React4.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React4.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React4.createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React4__namespace.useState(false);
@@ -381,14 +385,21 @@ var Tooltip = React4__namespace.forwardRef(
             {
               ref,
               unstyled: true,
-              className: cn(
-                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
-                "animate-in fade-in-0 zoom-in-95",
-                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
-                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
-                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
-                contentProps?.className
-              ),
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -397,12 +408,13 @@ var Tooltip = React4__namespace.forwardRef(
                   gui.Tooltip.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )
@@ -415,25 +427,24 @@ var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var TAG_BASE = "inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500";
-var TAG_VARIANT_CLASSES = {
-  subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
-  clickable: "cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76",
-  filter: "bg-[var(--color-tag-filter-bg)]",
-  select: "cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76"
+var TAG_VARIANT = {
+  subtle: { backgroundColor: "var(--color-tag-subtle-bg)" },
+  clickable: { backgroundColor: "var(--color-tag-clickable-bg)", cursor: "pointer", hoverStyle: { opacity: 0.76 } },
+  filter: { backgroundColor: "var(--color-tag-filter-bg)" },
+  select: { backgroundColor: "var(--color-tag-select-bg)", cursor: "pointer", hoverStyle: { opacity: 0.76 } }
+};
+var TAG_VARIANT_FG = {
+  subtle: "var(--color-tag-subtle-fg)",
+  clickable: "var(--color-tag-clickable-fg)",
+  filter: void 0,
+  select: "var(--color-tag-select-fg)"
 };
-var TAG_SIZE_CLASSES = {
-  sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
-  md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
-  lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
+var TAG_SIZE = {
+  sm: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 20, gap: 4 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24, gap: 4 },
+  lg: { paddingHorizontal: 6, paddingVertical: 6, minHeight: 32, minWidth: 32, gap: 4 }
 };
-var TAG_SELECTED_CLASSES = [
-  "bg-[var(--color-tag-select-selected-bg)]",
-  "text-[var(--color-tag-select-selected-fg)]",
-  "hover:text-[var(--color-tag-select-selected-fg)]",
-  "hover:opacity-76"
-].join(" ");
-var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
+var TAG_SIZE_FONT = { sm: 12, md: 14, lg: 14 };
 var Tag = React4__namespace.forwardRef(
   function Tag2(props, ref) {
     const {
@@ -453,46 +464,78 @@ var Tag = React4__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const labelElement = label ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--color-text-secondary)]", children: [
+    const resolvedVariant = variant ?? "subtle";
+    const resolvedSize = size ?? "md";
+    const isSelected = Boolean(selected) && !loading;
+    const backgroundColor = isSelected ? "var(--color-tag-select-selected-bg)" : TAG_VARIANT[resolvedVariant].backgroundColor;
+    const color = isSelected ? "var(--color-tag-select-selected-fg)" : TAG_VARIANT_FG[resolvedVariant];
+    const hoverStyle = isSelected ? { opacity: 0.76 } : TAG_VARIANT[resolvedVariant].hoverStyle;
+    const textHoverColor = !isSelected && resolvedVariant === "select" ? "var(--color-hover)" : void 0;
+    const labelElement = label ? /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: TAG_SIZE_FONT[resolvedSize], fontWeight: "500", color: "var(--color-text-secondary)", children: [
       label,
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "line-clamp-1 whitespace-nowrap text-ellipsis font-medium inline", children: [
-      labelElement,
-      children
-    ] });
+    const labelSpan = /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.Text,
+      {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        fontWeight: "500",
+        fontSize: TAG_SIZE_FONT[resolvedSize],
+        color,
+        hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
+        children: [
+          labelElement,
+          children
+        ]
+      }
+    );
     const contentElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+      gui.XStack,
       {
         ref,
-        className: cn(
-          TAG_BASE,
-          TAG_VARIANT_CLASSES[variant ?? "subtle"],
-          TAG_SIZE_CLASSES[size ?? "md"],
-          selected && !loading && TAG_SELECTED_CLASSES,
-          disabled && TAG_DISABLED_CLASSES,
-          className
-        ),
-        ...selected && !loading && { "data-selected": true },
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        verticalAlign: "top",
+        maxWidth: "100%",
+        userSelect: "text",
+        ...TAG_SIZE[resolvedSize],
+        backgroundColor,
+        hoverStyle,
+        focusVisibleStyle: {
+          outlineWidth: 2,
+          outlineOffset: 2,
+          outlineColor: "var(--color-gray-500)",
+          outlineStyle: "solid"
+        },
+        cursor: disabled ? "not-allowed" : TAG_VARIANT[resolvedVariant].cursor,
+        ...disabled ? { opacity: 0.4, pointerEvents: "none" } : {},
+        ...isSelected && { "data-selected": true },
         ...disabled && { "data-disabled": true },
+        className,
         ...rest,
         children: [
-          startElement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 inline-flex items-center justify-center empty:hidden", children: startElement }),
+          startElement && /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: startElement }),
           contentElement,
-          endElement && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              ...endElementProps,
-              className: cn(
-                "shrink-0 inline-flex items-center justify-center",
-                endElementProps?.className
-              ),
-              children: endElement
-            }
-          ),
-          closable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 inline-flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) })
+          endElement && (() => {
+            const { className: endClassName, ...endElementRest } = endElementProps ?? {};
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              gui.XStack,
+              {
+                ...endElementRest,
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                className: endClassName,
+                children: endElement
+              }
+            );
+          })(),
+          closable && /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) })
         ]
       }
     ) });