@luxfi/ui 7.4.10 → 7.4.12

package/dist/tag.js

@@ -1,15 +1,13 @@
 "use client";
+import { styled, View, TooltipGroup, Tooltip as Tooltip$1, Text, XStack } from '@hanzo/gui';
 import * as React4 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, TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/tag.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",
@@ -40,23 +38,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 = React4.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",
@@ -72,6 +66,9 @@ var CloseButton = React4.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 var SHIM_PROPS = [
   "w",
   "h",
@@ -255,6 +252,14 @@ React4.forwardRef(
     )) });
   }
 );
+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 TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React4.useState(false);
@@ -359,14 +364,21 @@ var Tooltip = React4.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,
@@ -375,12 +387,13 @@ var Tooltip = React4.forwardRef(
                   Tooltip$1.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)"
+                })
               ]
             }
           )
@@ -393,25 +406,24 @@ var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ 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_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_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_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 = {
+  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_SIZE_FONT = { sm: 12, md: 14, lg: 14 };
 var Tag = React4.forwardRef(
   function Tag2(props, ref) {
     const {
@@ -431,46 +443,78 @@ var Tag = React4.forwardRef(
       className,
       ...rest
     } = props;
-    const labelElement = label ? /* @__PURE__ */ 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__ */ jsxs(Text, { fontSize: TAG_SIZE_FONT[resolvedSize], fontWeight: "500", color: "var(--color-text-secondary)", children: [
       label,
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 whitespace-nowrap text-ellipsis font-medium inline", children: [
-      labelElement,
-      children
-    ] });
+    const labelSpan = /* @__PURE__ */ jsxs(
+      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__ */ jsx(TruncatedTextTooltip, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxs(
-      "span",
+      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__ */ 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__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center empty:hidden", children: startElement }),
+          startElement && /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: startElement }),
           contentElement,
-          endElement && /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...endElementProps,
-              className: cn(
-                "shrink-0 inline-flex items-center justify-center",
-                endElementProps?.className
-              ),
-              children: endElement
-            }
-          ),
-          closable && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose }) })
+          endElement && (() => {
+            const { className: endClassName, ...endElementRest } = endElementProps ?? {};
+            return /* @__PURE__ */ jsx(
+              XStack,
+              {
+                ...endElementRest,
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                className: endClassName,
+                children: endElement
+              }
+            );
+          })(),
+          closable && /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose }) })
         ]
       }
     ) });

package/dist/textarea.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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,31 +10,59 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/textarea.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var TEXTAREA_BASE = [
-  "w-full appearance-none outline-none transition-colors resize-y",
-  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-  "disabled:opacity-40 disabled:cursor-not-allowed",
-  "read-only:opacity-70",
-  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-].join(" ");
-var TEXTAREA_SIZE_CLASSES = {
-  xs: "px-2 py-1 text-xs rounded",
-  sm: "px-3 py-2 text-sm rounded-md",
-  md: "px-4 py-2 text-base rounded-md",
-  lg: "px-4 py-3 text-lg rounded-lg",
-  "2xl": "px-4 py-3 text-xl rounded-lg"
+var SIZE = {
+  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
 };
-var TEXTAREA_VARIANT_CLASSES = {
-  outline: "border border-solid",
-  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-  unstyled: "border-0 bg-transparent p-0"
+var VARIANT = {
+  outline: { borderWidth: 1, borderStyle: "solid" },
+  filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
+  unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
+};
+var CONTROL = {
+  width: "100%",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: { borderColor: "var(--color-input-border-focus)" },
+  disabledStyle: { opacity: 0.4, cursor: "not-allowed" }
+};
+var Input = React__default.default.forwardRef(
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React__default.default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      gui.Input,
+      {
+        ref,
+        unstyled: true,
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE[size],
+        ...VARIANT[variant],
+        ...rest,
+        onChange: handleChange
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var SIZE2 = {
+  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, borderRadius: 4 },
+  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, borderRadius: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 16, borderRadius: 6 },
+  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: 18, borderRadius: 8 },
+  "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: 20, borderRadius: 8 }
 };
 var Textarea = React__default.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
@@ -52,7 +78,10 @@ var Textarea = React__default.default.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE2[size],
+        ...VARIANT[variant],
         ...rest,
         onChange: handleChange
       }

package/dist/textarea.js

@@ -1,36 +1,62 @@
 "use client";
-import { TextArea } from '@hanzo/gui';
+import { Input as Input$1, TextArea } from '@hanzo/gui';
 import React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
 // src/textarea.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var TEXTAREA_BASE = [
-  "w-full appearance-none outline-none transition-colors resize-y",
-  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-  "disabled:opacity-40 disabled:cursor-not-allowed",
-  "read-only:opacity-70",
-  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-].join(" ");
-var TEXTAREA_SIZE_CLASSES = {
-  xs: "px-2 py-1 text-xs rounded",
-  sm: "px-3 py-2 text-sm rounded-md",
-  md: "px-4 py-2 text-base rounded-md",
-  lg: "px-4 py-3 text-lg rounded-lg",
-  "2xl": "px-4 py-3 text-xl rounded-lg"
+var SIZE = {
+  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
 };
-var TEXTAREA_VARIANT_CLASSES = {
-  outline: "border border-solid",
-  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-  unstyled: "border-0 bg-transparent p-0"
+var VARIANT = {
+  outline: { borderWidth: 1, borderStyle: "solid" },
+  filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
+  unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
+};
+var CONTROL = {
+  width: "100%",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: { borderColor: "var(--color-input-border-focus)" },
+  disabledStyle: { opacity: 0.4, cursor: "not-allowed" }
+};
+var Input = React.forwardRef(
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
+    return /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        ref,
+        unstyled: true,
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE[size],
+        ...VARIANT[variant],
+        ...rest,
+        onChange: handleChange
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var SIZE2 = {
+  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, borderRadius: 4 },
+  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, borderRadius: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 16, borderRadius: 6 },
+  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: 18, borderRadius: 8 },
+  "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: 20, borderRadius: 8 }
 };
 var Textarea = React.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
@@ -46,7 +72,10 @@ var Textarea = React.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE2[size],
+        ...VARIANT[variant],
         ...rest,
         onChange: handleChange
       }