@luxfi/ui 7.4.9 → 7.4.11

package/dist/tabs.js

@@ -1,213 +1,126 @@
 "use client";
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs, useTabsContext, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Children, createElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/tabs.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var ROOT_SIZE_CLASSES = {
-  sm: "[--tabs-height:2rem] [--tabs-content-padding:1.5rem]",
-  md: "[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]",
-  free: ""
+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 TabsRoot = React.forwardRef(
-  function TabsRoot2(props, ref) {
-    const {
-      variant = "solid",
-      size = "md",
-      fitted,
-      lazyMount: _lazyMount,
-      unmountOnExit: _unmountOnExit,
-      onValueChange,
-      className,
-      ...rest
-    } = props;
-    const handleValueChange = React.useCallback(
-      (value) => {
-        if (!onValueChange) return;
-        onValueChange({ value });
-      },
-      [onValueChange]
-    );
-    return /* @__PURE__ */ jsx(
-      RadixTabs.Root,
-      {
-        ref,
-        "data-variant": variant,
-        "data-size": size,
-        "data-fitted": fitted ? "" : void 0,
-        className: cn(
-          "relative",
-          ROOT_SIZE_CLASSES[size],
-          className
-        ),
-        onValueChange: onValueChange ? handleValueChange : void 0,
-        ...rest
-      }
-    );
-  }
-);
-var TabsList = React.forwardRef(
-  function TabsList2(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      flexWrap: _flexWrap,
-      alignItems: _alignItems,
-      whiteSpace: _whiteSpace,
-      bgColor: _bgColor,
-      marginBottom: _marginBottom,
-      mx: _mx,
-      px: _px,
-      w: _w,
-      overflowX: _overflowX,
-      overscrollBehaviorX: _overscrollBehaviorX,
-      css: _css,
-      position: _position,
-      boxShadow: _boxShadow,
-      top: _top,
-      zIndex: _zIndex,
-      style: styleProp,
-      asChild,
-      loop,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      RadixTabs.List,
-      {
-        ref,
-        asChild,
-        loop,
-        className: cn(
-          "inline-flex w-full relative isolate flex-row",
-          "min-h-[var(--tabs-height,2.5rem)]",
-          className
-        ),
-        style: styleProp,
-        ...rest
-      }
-    );
-  }
-);
-var TRIGGER_BASE = "outline-none min-w-[var(--tabs-height,2.5rem)] h-[var(--tabs-height,2.5rem)] flex items-center relative cursor-pointer gap-2 focus-visible:z-[1] focus-visible:outline-2 focus-visible:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-50";
-var TRIGGER_SIZE_CLASSES = {
-  sm: "py-1 px-3 text-sm",
-  md: "py-2 px-4 text-base",
-  free: ""
+var Shape = React.createContext({
+  variant: "solid",
+  size: "md",
+  fitted: false
+});
+var SIZE = {
+  sm: { height: 32, minWidth: 32, paddingVertical: 4, paddingHorizontal: 12, fontSize: 14 },
+  md: { height: 40, minWidth: 40, paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
+  free: {}
 };
-var TRIGGER_VARIANT_CLASSES = {
-  solid: "font-semibold gap-1 rounded-md bg-transparent text-tabs-solid-fg data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text data-[state=active]:hover:text-selected-control-text hover:text-hover",
-  secondary: "font-medium bg-transparent text-tabs-secondary-fg border-2 border-solid border-tabs-secondary-border rounded-md data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text data-[state=active]:border-transparent data-[state=active]:hover:border-transparent hover:text-hover hover:border-hover",
-  segmented: "bg-transparent text-text-primary border-2 border-solid border-selected-control-bg hover:text-hover data-[state=active]:text-selected-control-text data-[state=active]:bg-selected-control-bg data-[state=active]:border-selected-control-bg data-[state=active]:hover:text-selected-control-text",
-  unstyled: ""
+var SELECTED_BG = "var(--color-selected-control-bg)";
+var SELECTED_FG = "var(--color-selected-control-text)";
+var VARIANT = {
+  solid: {
+    rest: {
+      fontWeight: "600",
+      borderRadius: 6,
+      color: "var(--color-tabs-solid-fg)",
+      hoverStyle: { color: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG, color: SELECTED_FG }
+  },
+  secondary: {
+    rest: {
+      fontWeight: "500",
+      borderRadius: 6,
+      borderWidth: 2,
+      borderColor: "var(--color-tabs-secondary-border)",
+      color: "var(--color-tabs-secondary-fg)",
+      hoverStyle: { color: "var(--color-hover)", borderColor: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent" }
+  },
+  segmented: {
+    rest: {
+      borderWidth: 2,
+      borderColor: SELECTED_BG,
+      color: "var(--color-text-primary)",
+      hoverStyle: { color: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG, borderColor: SELECTED_BG, color: SELECTED_FG }
+  },
+  unstyled: { rest: {}, active: {} }
 };
-var TabsTrigger = React.forwardRef(
-  function TabsTrigger2(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      scrollSnapAlign: _scrollSnapAlign,
-      flexShrink: _flexShrink,
-      bgColor: _bgColor,
-      w: _w,
-      py: _py,
-      borderRadius: _borderRadius,
-      fontWeight: _fontWeight,
-      color: _color,
-      _hover,
-      position: _position,
-      top: _top,
-      left: _left,
-      visibility: _visibility,
+var LIST_HEIGHT = { sm: 32, md: 40, free: void 0 };
+var TabsRoot = ({
+  variant = "solid",
+  size = "md",
+  fitted = false,
+  onValueChange,
+  ...rest
+}) => {
+  const shape = React.useMemo(() => ({ variant, size, fitted }), [variant, size, fitted]);
+  return /* @__PURE__ */ jsx(Shape.Provider, { value: shape, children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      unstyled: true,
+      position: "relative",
+      orientation: "horizontal",
+      onValueChange: onValueChange ? (value) => onValueChange({ value }) : void 0,
       ...rest
-    } = props;
-    const internalRef = React.useRef(null);
-    const mergedRef = useMergedRef(ref, internalRef);
-    const { variant, size, fitted } = useTabsContext(internalRef);
-    return /* @__PURE__ */ jsx(
-      RadixTabs.Trigger,
-      {
-        ref: mergedRef,
-        className: cn(
-          "group",
-          TRIGGER_BASE,
-          TRIGGER_SIZE_CLASSES[size],
-          TRIGGER_VARIANT_CLASSES[variant],
-          fitted && "flex-1 text-center justify-center",
-          className
-        ),
-        ...rest
-      }
-    );
-  }
-);
-var TabsContent = React.forwardRef(
-  function TabsContent2(props, ref) {
-    const { className, padding: _padding, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      RadixTabs.Content,
-      {
-        ref,
-        className: cn(
-          "w-full pt-[var(--tabs-content-padding,1.5rem)]",
-          "focus-visible:outline-2 focus-visible:outline-offset-[-2px]",
-          className
-        ),
-        ...rest
-      }
-    );
-  }
-);
-var COUNTER_OVERLOAD = 50;
-var TabsCounter = ({ count }) => {
-  if (count === void 0 || count === null) {
-    return null;
-  }
+    }
+  ) });
+};
+var TabsList = (props) => {
+  const { size } = React.useContext(Shape);
   return /* @__PURE__ */ jsx(
-    "span",
+    Tabs.List,
     {
-      className: cn(
-        "group-hover:text-inherit",
-        count > 0 ? "text-text-secondary" : "text-[rgba(16,17,18,0.24)] dark:text-[rgba(255,255,255,0.24)]"
-      ),
-      children: count > COUNTER_OVERLOAD ? `${COUNTER_OVERLOAD}+` : count
+      unstyled: true,
+      width: "100%",
+      position: "relative",
+      flexDirection: "row",
+      backgroundColor: "transparent",
+      minHeight: LIST_HEIGHT[size],
+      ...props
     }
   );
 };
-function useTabsContext(triggerRef) {
-  const [ctx, setCtx] = React.useState({ variant: "solid", size: "md", fitted: false });
-  React.useEffect(() => {
-    const el = triggerRef.current;
-    if (!el) return;
-    const root = el.closest("[data-variant]");
-    if (!root) return;
-    setCtx({
-      variant: root.getAttribute("data-variant") ?? "solid",
-      size: root.getAttribute("data-size") ?? "md",
-      fitted: root.hasAttribute("data-fitted")
-    });
-  }, [triggerRef]);
-  return ctx;
-}
-function useMergedRef(...refs) {
-  return React.useCallback(
-    (instance) => {
-      for (const ref of refs) {
-        if (!ref) continue;
-        if (typeof ref === "function") {
-          ref(instance);
-        } else {
-          ref.current = instance;
-        }
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs
+var TabsTrigger = ({ children, ...props }) => {
+  const { variant, size, fitted } = React.useContext(Shape);
+  const { rest, active } = VARIANT[variant];
+  const selected = useTabsContext().value === props.value;
+  return /* @__PURE__ */ jsx(
+    Tabs.Tab,
+    {
+      unstyled: true,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      cursor: "pointer",
+      gap: 8,
+      borderWidth: 0,
+      ...SIZE[size],
+      ...rest,
+      ...selected ? active : null,
+      ...fitted ? { flex: 1 } : null,
+      ...props,
+      children: ink(children, void 0, { fontSize: "inherit", color: "inherit", fontWeight: "inherit" })
+    }
   );
-}
+};
+var TabsContent = ({ children, ...props }) => /* @__PURE__ */ jsx(Tabs.Content, { unstyled: true, width: "100%", paddingTop: 24, backgroundColor: "transparent", ...props, children: ink(children) });
+var COUNTER_OVERLOAD = 50;
+var TabsCounter = ({ count }) => {
+  if (count === void 0 || count === null) return null;
+  return /* @__PURE__ */ jsx(Text, { color: count > 0 ? "var(--color-text-secondary)" : "var(--color-text-disabled)", children: count > COUNTER_OVERLOAD ? `${COUNTER_OVERLOAD}+` : count });
+};
 
 export { TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger };

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
       }