@luxfi/ui 8.2.7 → 8.2.9

package/dist/table.js

@@ -1,330 +1,11 @@
 'use client';
 import { throttle } from 'es-toolkit';
-import { Box, sx, cn, css } from '@hanzo/ui';
-import * as React3 from 'react';
-import React3__default from 'react';
+import { Box, cn, css, sx } from '@hanzo/ui';
+import * as React from 'react';
+import { Link } from './link.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var SKELETON_CLASSES = "lux-skeleton rounded-sm";
-var Skeleton = React3.forwardRef(
-  function Skeleton2(props, ref) {
-    const { loading = true, asChild, className, children, style, ...rest } = props;
-    if (!loading) {
-      if (asChild && React3.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-loading": true,
-        ...sx(
-          SKELETON_CLASSES,
-          asChild || children ? "[&_*]:invisible" : "min-h-5",
-          className
-        ),
-        style,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-React3.forwardRef(
-  function SkeletonCircle2(props, ref) {
-    const { size = 40, loading = true, className, ...rest } = props;
-    const dimension = typeof size === "number" ? `${size}px` : size;
-    return /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        ref,
-        loading,
-        ...sx("rounded-full shrink-0", className),
-        style: { width: dimension, height: dimension, ...rest.style },
-        ...rest
-      }
-    );
-  }
-);
-React3.forwardRef(
-  function SkeletonText2(props, ref) {
-    const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        loading,
-        ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
-      },
-      index
-    )) });
-  }
-);
-var ArrowIcon = ({ className, style }) => /* @__PURE__ */ jsx("svg", { className, style, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M11 3h6v6M17 3L7 13M14 11v6H3V6h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-function stripUtmParams(url) {
-  try {
-    const urlObj = new URL(url);
-    for (const param of ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]) {
-      urlObj.searchParams.delete(param);
-    }
-    return urlObj.toString();
-  } catch {
-    return url;
-  }
-}
-var VARIANT_CLASSES = {
-  primary: cn(
-    "text-[var(--color-link-primary)]",
-    "hover:no-underline hover:text-[var(--color-link-primary-hover)]",
-    "data-[hover]:no-underline data-[hover]:text-[var(--color-link-primary-hover)]"
-  ),
-  secondary: cn(
-    "text-[var(--color-link-secondary)]",
-    "hover:no-underline hover:text-[var(--color-hover)]",
-    "data-[hover]:no-underline data-[hover]:text-[var(--color-hover)]"
-  ),
-  subtle: cn(
-    "text-[var(--color-link-subtle)]",
-    "hover:text-[var(--color-link-subtle-hover)] hover:underline hover:decoration-[var(--color-link-subtle-hover)]",
-    "data-[hover]:text-[var(--color-link-subtle-hover)] data-[hover]:underline data-[hover]:decoration-[var(--color-link-subtle-hover)]"
-  ),
-  underlaid: cn(
-    "text-[var(--color-link-primary)] bg-[var(--color-link-underlaid-bg)]",
-    "px-2 py-1.5 rounded-md text-sm",
-    "hover:text-[var(--color-link-primary-hover)] hover:no-underline",
-    "data-[hover]:text-[var(--color-link-primary-hover)] data-[hover]:no-underline"
-  ),
-  menu: cn(
-    "text-[var(--color-link-menu)]",
-    "hover:text-[var(--color-hover)] hover:no-underline",
-    "data-[hover]:text-[var(--color-hover)] data-[hover]:no-underline"
-  ),
-  navigation: cn(
-    "text-[var(--color-link-nav-fg)] bg-transparent",
-    "hover:text-[var(--color-link-nav-fg-hover)] hover:no-underline",
-    "data-[hover]:text-[var(--color-link-nav-fg-hover)] data-[hover]:no-underline",
-    "data-[selected]:text-[var(--color-link-nav-fg-selected)] data-[selected]:bg-[var(--color-link-nav-bg-selected)]",
-    "data-[active]:text-[var(--color-link-nav-fg-active)]"
-  ),
-  plain: cn(
-    "text-inherit",
-    "hover:no-underline",
-    "data-[hover]:no-underline"
-  )
-};
-var BASE_CLASSES = "inline-flex items-center gap-0 cursor-pointer data-[disabled]:cursor-not-allowed";
-var LinkExternalIcon = ({ color }) => /* @__PURE__ */ jsx(
-  ArrowIcon,
-  {
-    ...sx(
-      "size-3 align-middle shrink-0",
-      "group-hover:text-inherit"
-    ),
-    style: color ? { color } : { color: "var(--color-icon-secondary)" },
-    "aria-hidden": "true"
-  }
-);
-var SPACING = 4;
-function resolveSpacing(v) {
-  if (v === void 0) return void 0;
-  if (typeof v === "number") return `${v * SPACING}px`;
-  if (typeof v === "string") return v;
-  if (typeof v === "object" && v !== null) {
-    const base = v.base;
-    if (base !== void 0) return typeof base === "number" ? `${base * SPACING}px` : base;
-    const lg = v.lg;
-    if (lg !== void 0) return typeof lg === "number" ? `${lg * SPACING}px` : lg;
-  }
-  return void 0;
-}
-var Link = React3__default.forwardRef(
-  function Link2(props, ref) {
-    const {
-      external,
-      loading,
-      href,
-      children,
-      disabled,
-      noIcon,
-      iconColor,
-      variant = "primary",
-      className,
-      asChild: _asChild,
-      // Strip Next.js-specific props (accepted for compat, not used)
-      shallow: _shallow,
-      prefetch: _prefetch,
-      scroll: _scroll,
-      // Strip Chakra style props
-      fontWeight: _fontWeight,
-      whiteSpace: _whiteSpace,
-      wordBreak: _wordBreak,
-      textStyle: _textStyle,
-      ml: _ml,
-      mr: _mr,
-      display: _display,
-      alignItems: _alignItems,
-      flexShrink: _flexShrink,
-      minW: _minW,
-      justifyContent: _justifyContent,
-      position: _position,
-      ...rest
-    } = props;
-    const shimStyle = {};
-    if (_fontWeight !== void 0) shimStyle.fontWeight = _fontWeight;
-    if (_whiteSpace) shimStyle.whiteSpace = _whiteSpace;
-    if (_wordBreak) shimStyle.wordBreak = _wordBreak;
-    if (_ml !== void 0) shimStyle.marginLeft = resolveSpacing(_ml);
-    if (_mr !== void 0) shimStyle.marginRight = resolveSpacing(_mr);
-    if (_display) shimStyle.display = _display;
-    if (_alignItems) shimStyle.alignItems = _alignItems;
-    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
-    if (_minW !== void 0) shimStyle.minWidth = typeof _minW === "number" ? `${_minW * SPACING}px` : _minW;
-    if (_justifyContent) shimStyle.justifyContent = _justifyContent;
-    if (_position) shimStyle.position = _position;
-    const linkClasses = cn(BASE_CLASSES, VARIANT_CLASSES[variant], className);
-    const linkStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    if (external) {
-      const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
-      return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          tag: "a",
-          href: processedHref,
-          className: cn("group", linkClasses),
-          style: linkStyle,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          ...disabled ? { "data-disabled": true } : {},
-          ...rest,
-          children: [
-            children,
-            !noIcon && /* @__PURE__ */ jsx(LinkExternalIcon, { color: iconColor })
-          ]
-        }
-      ) });
-    }
-    if (href) {
-      return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          tag: "a",
-          href,
-          className: linkClasses,
-          style: linkStyle,
-          ...disabled ? { "data-disabled": true } : {},
-          ...rest,
-          children
-        }
-      ) });
-    }
-    return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        tag: "span",
-        className: linkClasses,
-        ...disabled ? { "data-disabled": true } : {},
-        ...rest,
-        children
-      }
-    ) });
-  }
-);
-React3__default.forwardRef(
-  function LinkBox2(props, ref) {
-    const { className, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        className: cn("relative", className),
-        ...rest
-      }
-    );
-  }
-);
-React3__default.forwardRef(
-  function LinkOverlay2(props, ref) {
-    const {
-      children,
-      external,
-      loading,
-      href,
-      noIcon,
-      iconColor,
-      variant = "primary",
-      className,
-      disabled,
-      asChild: _asChild2,
-      shallow: _shallow2,
-      prefetch: _prefetch2,
-      scroll: _scroll2,
-      fontWeight: _fw2,
-      whiteSpace: _ws2,
-      wordBreak: _wb2,
-      textStyle: _ts2,
-      ml: _ml2,
-      mr: _mr2,
-      display: _d2,
-      alignItems: _ai2,
-      flexShrink: _fs2,
-      minW: _mw2,
-      justifyContent: _jc2,
-      position: _p2,
-      ...rest
-    } = props;
-    const overlayClasses = cn(
-      BASE_CLASSES,
-      VARIANT_CLASSES[variant],
-      // Static positioning with a ::before pseudo-element that covers the LinkBox
-      "static",
-      'before:absolute before:inset-0 before:z-0 before:content-[""]',
-      className
-    );
-    if (external) {
-      const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          tag: "a",
-          ref,
-          href: loading ? void 0 : processedHref,
-          className: overlayClasses,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          ...rest,
-          children: (children || !noIcon && href) && /* @__PURE__ */ jsxs(Skeleton, { ...sx("inline-flex items-center max-w-full h-full"), loading, children: [
-            children,
-            !noIcon && href && /* @__PURE__ */ jsx(LinkExternalIcon, { color: iconColor })
-          ] })
-        }
-      );
-    }
-    const content = children ? /* @__PURE__ */ jsx(Skeleton, { ...sx("inline-flex items-center max-w-full h-full"), loading, children }) : null;
-    if (href) {
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          tag: "a",
-          ref,
-          href,
-          className: overlayClasses,
-          ...rest,
-          children: content
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        tag: "span",
-        ref,
-        className: overlayClasses,
-        ...rest,
-        children: content
-      }
-    );
-  }
-);
-var ArrowIcon2 = (props) => /* @__PURE__ */ jsx("svg", { ...props, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ArrowIcon = (props) => /* @__PURE__ */ jsx("svg", { ...props, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var SPACING_SCALE = 4;
 function toPixels(value) {
   if (value === void 0) return void 0;
@@ -503,7 +184,7 @@ function resolveResponsive(value) {
   }
   return void 0;
 }
-var TableRoot = React3.forwardRef(
+var TableRoot = React.forwardRef(
   function TableRoot2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const rawMinW = other.minWidth ?? other.minW;
@@ -527,7 +208,7 @@ var TableRoot = React3.forwardRef(
     );
   }
 );
-var TableHeader = React3.forwardRef(
+var TableHeader = React.forwardRef(
   function TableHeader2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -545,7 +226,7 @@ var TableHeader = React3.forwardRef(
     );
   }
 );
-var TableBody = React3.forwardRef(
+var TableBody = React.forwardRef(
   function TableBody2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -563,7 +244,7 @@ var TableBody = React3.forwardRef(
     );
   }
 );
-var TableRow = React3.forwardRef(
+var TableRow = React.forwardRef(
   function TableRow2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -581,7 +262,7 @@ var TableRow = React3.forwardRef(
     );
   }
 );
-var TableCell = React3.forwardRef(
+var TableCell = React.forwardRef(
   function TableCell2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -603,7 +284,7 @@ var TableCell = React3.forwardRef(
     );
   }
 );
-var TableColumnHeader = React3.forwardRef(
+var TableColumnHeader = React.forwardRef(
   function TableColumnHeader2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -631,7 +312,7 @@ var TableColumnHeader = React3.forwardRef(
 );
 var TableColumnHeaderSortable = (props) => {
   const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
-  const handleSortToggle = React3.useCallback(() => {
+  const handleSortToggle = React.useCallback(() => {
     onSortToggle(sortField);
   }, [onSortToggle, sortField]);
   const isActive = sortValue.includes(sortField);
@@ -647,7 +328,7 @@ var TableColumnHeaderSortable = (props) => {
             indicatorPosition === "left" ? "-left-5" : "-right-5",
             isAsc ? "-rotate-90" : "rotate-90"
           ),
-          children: /* @__PURE__ */ jsx(ArrowIcon2, { style: css("h-4 w-4") })
+          children: /* @__PURE__ */ jsx(ArrowIcon, { style: css("h-4 w-4") })
         }
       ),
       children
@@ -658,16 +339,16 @@ var TableColumnHeaderSortable = (props) => {
 var ACTION_BAR_SHADOW = "0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)";
 var TableHeaderSticky = (props) => {
   const { top, children, className, style: styleProp, ...rest } = props;
-  const ref = React3.useRef(null);
-  const [isStuck, setIsStuck] = React3.useState(false);
-  const handleScroll = React3.useCallback(() => {
+  const ref = React.useRef(null);
+  const [isStuck, setIsStuck] = React.useState(false);
+  const handleScroll = React.useCallback(() => {
     if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
       setIsStuck(true);
     } else {
       setIsStuck(false);
     }
   }, [top]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     const throttledHandleScroll = throttle(handleScroll, 300);
     window.addEventListener("scroll", throttledHandleScroll);
     return () => {
@@ -689,7 +370,7 @@ var TableHeaderSticky = (props) => {
     }
   );
 };
-var TableCaption = React3.forwardRef(
+var TableCaption = React.forwardRef(
   function TableCaption2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -707,7 +388,7 @@ var TableCaption = React3.forwardRef(
     );
   }
 );
-var TableFooter = React3.forwardRef(
+var TableFooter = React.forwardRef(
   function TableFooter2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -725,7 +406,7 @@ var TableFooter = React3.forwardRef(
     );
   }
 );
-var TableScrollWrapper = React3.forwardRef(
+var TableScrollWrapper = React.forwardRef(
   function TableScrollWrapper2(props, ref) {
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ jsx(

package/dist/tabs.cjs

@@ -3,6 +3,7 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
+var ink_cjs = require('./ink.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -25,14 +26,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-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 Shape = React__namespace.createContext({
   variant: "solid",
   size: "md",
@@ -132,11 +125,11 @@ var TabsTrigger = ({ children, ...props }) => {
       ...selected ? active : null,
       ...fitted ? { flex: 1 } : null,
       ...props,
-      children: ink(children, void 0, { fontSize: "inherit", color: "inherit", fontWeight: "inherit" })
+      children: ink_cjs.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 TabsContent = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.Tabs.Content, { unstyled: true, width: "100%", paddingTop: 24, backgroundColor: "transparent", ...props, children: ink_cjs.ink(children) });
 var COUNTER_OVERLOAD = 50;
 var TabsCounter = ({ count }) => {
   if (count === void 0 || count === null) return null;

package/dist/tabs.js

@@ -1,17 +1,9 @@
 'use client';
 import { Tabs, useTabsContext, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { Children, createElement } from 'react';
+import { ink } from './ink.js';
 import { jsx } from 'react/jsx-runtime';
 
-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 Shape = React.createContext({
   variant: "solid",
   size: "md",