@luxfi/ui 7.4.10 → 7.4.12

package/dist/tabs.cjs

@@ -1,10 +1,8 @@
 "use client";
 'use strict';
 
-var RadixTabs = require('@radix-ui/react-tabs');
+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) {
@@ -25,213 +23,126 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/tabs.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.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 = 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 TabsRoot = React__namespace.forwardRef(
-  function TabsRoot2(props, ref) {
-    const {
-      variant = "solid",
-      size = "md",
-      fitted,
-      lazyMount: _lazyMount,
-      unmountOnExit: _unmountOnExit,
-      onValueChange,
-      className,
-      ...rest
-    } = props;
-    const handleValueChange = React__namespace.useCallback(
-      (value) => {
-        if (!onValueChange) return;
-        onValueChange({ value });
-      },
-      [onValueChange]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.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__namespace.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__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.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__namespace.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__namespace.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__namespace.useMemo(() => ({ variant, size, fitted }), [variant, size, fitted]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Shape.Provider, { value: shape, children: /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Tabs,
+    {
+      unstyled: true,
+      position: "relative",
+      orientation: "horizontal",
+      onValueChange: onValueChange ? (value) => onValueChange({ value }) : void 0,
       ...rest
-    } = props;
-    const internalRef = React__namespace.useRef(null);
-    const mergedRef = useMergedRef(ref, internalRef);
-    const { variant, size, fitted } = useTabsContext(internalRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.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__namespace.forwardRef(
-  function TabsContent2(props, ref) {
-    const { className, padding: _padding, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.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__namespace.useContext(Shape);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+    gui.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__namespace.useState({ variant: "solid", size: "md", fitted: false });
-  React__namespace.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__namespace.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__namespace.useContext(Shape);
+  const { rest, active } = VARIANT[variant];
+  const selected = gui.useTabsContext().value === props.value;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.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__ */ jsxRuntime.jsx(gui.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__ */ jsxRuntime.jsx(gui.Text, { color: count > 0 ? "var(--color-text-secondary)" : "var(--color-text-disabled)", children: count > COUNTER_OVERLOAD ? `${COUNTER_OVERLOAD}+` : count });
+};
 
 exports.TabsContent = TabsContent;
 exports.TabsCounter = TabsCounter;

package/dist/tabs.d.cts

@@ -1,78 +1,34 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs } from '@hanzo/gui';
 import * as React from 'react';
 
 type TabsVariant = 'solid' | 'secondary' | 'segmented' | 'unstyled';
 type TabsSize = 'sm' | 'md' | 'free';
-interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Root>, 'onValueChange'> {
+interface TabsProps extends Omit<React.ComponentProps<typeof Tabs>, 'onValueChange' | 'size'> {
     /** Visual variant. Default: "solid". */
     variant?: TabsVariant;
     /** Size preset. Default: "md". */
     size?: TabsSize;
     /** Stretch triggers to fill the list width. */
     fitted?: boolean;
-    /**
-     * @deprecated Chakra-compat. Radix mounts lazily by default (content only
-     * renders when active). Kept so call-sites don't break at compile time.
-     */
-    lazyMount?: boolean;
-    /**
-     * @deprecated Chakra-compat. Radix unmounts inactive content by default.
-     * Kept so call-sites don't break at compile time.
-     */
-    unmountOnExit?: boolean;
-    /**
-     * Chakra-compatible value-change handler.
-     * Accepts both `(details: { value: string }) => void` (Chakra convention)
-     * and `(value: string) => void` (Radix convention).
-     */
-    onValueChange?: ((details: {
+    /** Fires with the newly selected value. */
+    onValueChange?: (details: {
         value: string;
-    }) => void) | ((value: string) => void);
+    }) => void;
 }
-declare const TabsRoot: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
-interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
-    asChild?: boolean;
-    loop?: boolean;
-    flexWrap?: string;
-    alignItems?: string;
-    whiteSpace?: string;
-    bgColor?: string;
-    marginBottom?: number | string;
-    mx?: string | Record<string, string>;
-    px?: string | Record<string, string>;
-    w?: string | Record<string, string>;
-    overflowX?: string | Record<string, string>;
-    overscrollBehaviorX?: string;
-    css?: Record<string, unknown>;
-    position?: string;
-    boxShadow?: string | Record<string, string>;
-    top?: number | string;
-    zIndex?: string | Record<string, string>;
-}
-declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
-interface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>, 'dir'> {
-    scrollSnapAlign?: string;
-    flexShrink?: number;
-    bgColor?: string | Record<string, string>;
-    w?: string;
-    py?: string;
-    borderRadius?: string;
-    fontWeight?: string;
-    color?: string;
-    _hover?: Record<string, string>;
-    position?: string;
-    top?: string;
-    left?: string;
-    visibility?: string;
-}
-declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Content> {
-    padding?: number | string;
-}
-declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsRoot: ({ variant, size, fitted, onValueChange, ...rest }: TabsProps) => React.ReactElement;
+type TabsListProps = React.ComponentProps<typeof Tabs.List>;
+declare const TabsList: (props: TabsListProps) => React.ReactElement;
+type TabsTriggerProps = React.ComponentProps<typeof Tabs.Tab>;
+declare const TabsTrigger: ({ children, ...props }: TabsTriggerProps) => React.ReactElement;
+type TabsContentProps = React.ComponentProps<typeof Tabs.Content>;
+declare const TabsContent: ({ children, ...props }: TabsContentProps) => React.ReactElement;
 interface TabsCounterProps {
     count?: number | null;
 }
+/**
+ * The count beside a tab label. Zero is deliberately dimmer than a real count —
+ * "nothing here" should read quieter than "three things here".
+ */
 declare const TabsCounter: ({ count }: TabsCounterProps) => React.ReactElement | null;
 
 export { TabsContent, type TabsContentProps, TabsCounter, type TabsCounterProps, TabsList, type TabsListProps, type TabsProps, TabsRoot, TabsTrigger, type TabsTriggerProps };

package/dist/tabs.d.ts

@@ -1,78 +1,34 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs } from '@hanzo/gui';
 import * as React from 'react';
 
 type TabsVariant = 'solid' | 'secondary' | 'segmented' | 'unstyled';
 type TabsSize = 'sm' | 'md' | 'free';
-interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Root>, 'onValueChange'> {
+interface TabsProps extends Omit<React.ComponentProps<typeof Tabs>, 'onValueChange' | 'size'> {
     /** Visual variant. Default: "solid". */
     variant?: TabsVariant;
     /** Size preset. Default: "md". */
     size?: TabsSize;
     /** Stretch triggers to fill the list width. */
     fitted?: boolean;
-    /**
-     * @deprecated Chakra-compat. Radix mounts lazily by default (content only
-     * renders when active). Kept so call-sites don't break at compile time.
-     */
-    lazyMount?: boolean;
-    /**
-     * @deprecated Chakra-compat. Radix unmounts inactive content by default.
-     * Kept so call-sites don't break at compile time.
-     */
-    unmountOnExit?: boolean;
-    /**
-     * Chakra-compatible value-change handler.
-     * Accepts both `(details: { value: string }) => void` (Chakra convention)
-     * and `(value: string) => void` (Radix convention).
-     */
-    onValueChange?: ((details: {
+    /** Fires with the newly selected value. */
+    onValueChange?: (details: {
         value: string;
-    }) => void) | ((value: string) => void);
+    }) => void;
 }
-declare const TabsRoot: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
-interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
-    asChild?: boolean;
-    loop?: boolean;
-    flexWrap?: string;
-    alignItems?: string;
-    whiteSpace?: string;
-    bgColor?: string;
-    marginBottom?: number | string;
-    mx?: string | Record<string, string>;
-    px?: string | Record<string, string>;
-    w?: string | Record<string, string>;
-    overflowX?: string | Record<string, string>;
-    overscrollBehaviorX?: string;
-    css?: Record<string, unknown>;
-    position?: string;
-    boxShadow?: string | Record<string, string>;
-    top?: number | string;
-    zIndex?: string | Record<string, string>;
-}
-declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
-interface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>, 'dir'> {
-    scrollSnapAlign?: string;
-    flexShrink?: number;
-    bgColor?: string | Record<string, string>;
-    w?: string;
-    py?: string;
-    borderRadius?: string;
-    fontWeight?: string;
-    color?: string;
-    _hover?: Record<string, string>;
-    position?: string;
-    top?: string;
-    left?: string;
-    visibility?: string;
-}
-declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Content> {
-    padding?: number | string;
-}
-declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsRoot: ({ variant, size, fitted, onValueChange, ...rest }: TabsProps) => React.ReactElement;
+type TabsListProps = React.ComponentProps<typeof Tabs.List>;
+declare const TabsList: (props: TabsListProps) => React.ReactElement;
+type TabsTriggerProps = React.ComponentProps<typeof Tabs.Tab>;
+declare const TabsTrigger: ({ children, ...props }: TabsTriggerProps) => React.ReactElement;
+type TabsContentProps = React.ComponentProps<typeof Tabs.Content>;
+declare const TabsContent: ({ children, ...props }: TabsContentProps) => React.ReactElement;
 interface TabsCounterProps {
     count?: number | null;
 }
+/**
+ * The count beside a tab label. Zero is deliberately dimmer than a real count —
+ * "nothing here" should read quieter than "three things here".
+ */
 declare const TabsCounter: ({ count }: TabsCounterProps) => React.ReactElement | null;
 
 export { TabsContent, type TabsContentProps, TabsCounter, type TabsCounterProps, TabsList, type TabsListProps, type TabsProps, TabsRoot, TabsTrigger, type TabsTriggerProps };