@luxfi/ui 5.5.3 → 5.6.0

package/dist/tabs.cjs

@@ -0,0 +1,240 @@
+"use client";
+'use strict';
+
+var RadixTabs = require('@radix-ui/react-tabs');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = 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 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 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 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,
+      ...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;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      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
+    }
+  );
+};
+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
+  );
+}
+
+exports.TabsContent = TabsContent;
+exports.TabsCounter = TabsCounter;
+exports.TabsList = TabsList;
+exports.TabsRoot = TabsRoot;
+exports.TabsTrigger = TabsTrigger;

package/dist/tabs.js

@@ -0,0 +1,213 @@
+"use client";
+import * as RadixTabs from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+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 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 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 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,
+      ...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;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      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
+    }
+  );
+};
+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
+  );
+}
+
+export { TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger };