@luxfi/ui 5.5.3 → 5.6.0

package/dist/table.js

@@ -0,0 +1,1013 @@
+"use client";
+import { throttle } from 'es-toolkit';
+import * as React3 from 'react';
+import React3__default from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/table.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SPACING_SCALE = 4;
+function toStylePx(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return value;
+  return `${value * SPACING_SCALE}px`;
+}
+function extractSkeletonStyleProps(props) {
+  const style = {};
+  const rest = {};
+  function resolveDimension(value) {
+    if (value === void 0 || value === null) return void 0;
+    if (typeof value === "number") return `${value * SPACING_SCALE}px`;
+    if (typeof value === "string") return value;
+    if (typeof value === "object") {
+      const obj = value;
+      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
+    }
+    return void 0;
+  }
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    switch (key) {
+      case "w": {
+        const v = resolveDimension(value);
+        if (v) style.width = v;
+        break;
+      }
+      case "h": {
+        const v = resolveDimension(value);
+        if (v) style.height = v;
+        break;
+      }
+      case "minW": {
+        const v = resolveDimension(value);
+        if (v) style.minWidth = v;
+        break;
+      }
+      case "maxW": {
+        const v = resolveDimension(value);
+        if (v) style.maxWidth = v;
+        break;
+      }
+      case "height":
+        style.height = value;
+        break;
+      case "display":
+        style.display = value;
+        break;
+      case "flexGrow":
+        style.flexGrow = value;
+        break;
+      case "flexShrink":
+        style.flexShrink = value;
+        break;
+      case "flexBasis":
+        style.flexBasis = value;
+        break;
+      case "fontWeight":
+        style.fontWeight = value;
+        break;
+      case "borderRadius":
+        style.borderRadius = value;
+        break;
+      case "alignSelf":
+        style.alignSelf = value;
+        break;
+      case "alignItems":
+        style.alignItems = value;
+        break;
+      case "justifyContent":
+        style.justifyContent = value;
+        break;
+      case "color":
+        style.color = value;
+        break;
+      case "mt":
+        style.marginTop = toStylePx(value);
+        break;
+      case "mb":
+        style.marginBottom = toStylePx(value);
+        break;
+      case "ml":
+        style.marginLeft = toStylePx(value);
+        break;
+      case "mr":
+        style.marginRight = toStylePx(value);
+        break;
+      case "overflow":
+        style.overflow = value;
+        break;
+      case "whiteSpace":
+        style.whiteSpace = value;
+        break;
+      case "textOverflow":
+        style.textOverflow = value;
+        break;
+      case "textTransform":
+        style.textTransform = value;
+        break;
+      case "gap":
+        style.gap = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
+        break;
+      case "gridTemplateColumns":
+        style.gridTemplateColumns = value;
+        break;
+      case "minWidth":
+        style.minWidth = value;
+        break;
+      case "boxSize": {
+        const s = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
+        style.width = s;
+        style.height = s;
+        break;
+      }
+      case "py": {
+        const v = toStylePx(value);
+        style.paddingTop = v;
+        style.paddingBottom = v;
+        break;
+      }
+      case "px": {
+        const v = toStylePx(value);
+        style.paddingLeft = v;
+        style.paddingRight = v;
+        break;
+      }
+      case "p": {
+        const v = toStylePx(value);
+        style.padding = v;
+        break;
+      }
+      case "hideBelow":
+        break;
+      // handled via className
+      case "textStyle":
+        break;
+      // drop textStyle, not directly applicable
+      case "fontSize":
+        style.fontSize = value;
+        break;
+      case "flexWrap":
+        style.flexWrap = value;
+        break;
+      case "wordBreak":
+        style.wordBreak = value;
+        break;
+      case "lineHeight":
+        style.lineHeight = value;
+        break;
+      case "marginRight":
+        style.marginRight = value;
+        break;
+      case "position":
+        style.position = value;
+        break;
+      case "background":
+        style.background = value;
+        break;
+      default:
+        rest[key] = value;
+        break;
+    }
+  }
+  return { style, rest };
+}
+var Skeleton = React3.forwardRef(
+  function Skeleton2(props, ref) {
+    const {
+      loading = false,
+      asChild,
+      className,
+      children,
+      style: styleProp,
+      // Destructure style-prop shims so they don't leak into DOM
+      w: _w,
+      h: _h,
+      minW: _minW,
+      maxW: _maxW,
+      display: _display,
+      flexGrow: _flexGrow,
+      flexShrink: _flexShrink,
+      flexBasis: _flexBasis,
+      fontWeight: _fontWeight,
+      textStyle: _textStyle,
+      borderRadius: _borderRadius,
+      alignSelf: _alignSelf,
+      alignItems: _alignItems,
+      justifyContent: _justifyContent,
+      color: _color,
+      mt: _mt,
+      mb: _mb,
+      ml: _ml,
+      mr: _mr,
+      height: _height,
+      overflow: _overflow,
+      whiteSpace: _whiteSpace,
+      textOverflow: _textOverflow,
+      textTransform: _textTransform,
+      gap: _gap,
+      gridTemplateColumns: _gridTemplateColumns,
+      minWidth: _minWidth,
+      boxSize: _boxSize,
+      py: _py,
+      px: _px,
+      p: _p,
+      hideBelow: _hideBelow,
+      fontSize: _fontSize,
+      flexWrap: _flexWrap,
+      wordBreak: _wordBreak,
+      lineHeight: _lineHeight,
+      marginRight: _marginRight,
+      position: _position,
+      background: _background,
+      as: Component = "div",
+      ...htmlRest
+    } = props;
+    const { style: shimStyle } = extractSkeletonStyleProps({
+      w: _w,
+      h: _h,
+      minW: _minW,
+      maxW: _maxW,
+      display: _display,
+      flexGrow: _flexGrow,
+      flexShrink: _flexShrink,
+      flexBasis: _flexBasis,
+      fontWeight: _fontWeight,
+      textStyle: _textStyle,
+      borderRadius: _borderRadius,
+      alignSelf: _alignSelf,
+      alignItems: _alignItems,
+      justifyContent: _justifyContent,
+      color: _color,
+      mt: _mt,
+      mb: _mb,
+      ml: _ml,
+      mr: _mr,
+      height: _height,
+      overflow: _overflow,
+      whiteSpace: _whiteSpace,
+      textOverflow: _textOverflow,
+      textTransform: _textTransform,
+      gap: _gap,
+      gridTemplateColumns: _gridTemplateColumns,
+      minWidth: _minWidth,
+      boxSize: _boxSize,
+      py: _py,
+      px: _px,
+      p: _p,
+      hideBelow: _hideBelow,
+      fontSize: _fontSize,
+      flexWrap: _flexWrap,
+      wordBreak: _wordBreak,
+      lineHeight: _lineHeight,
+      marginRight: _marginRight,
+      position: _position,
+      background: _background
+    });
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
+    const HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
+    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : void 0;
+    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
+    if (!loading) {
+      if (asChild && React3.isValidElement(children)) {
+        return children;
+      }
+      return /* @__PURE__ */ jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React3.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(
+            "animate-skeleton-shimmer rounded-sm",
+            "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+            "bg-[length:200%_100%]",
+            "text-transparent [&_*]:invisible",
+            finalClassName
+          ),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(
+          "animate-skeleton-shimmer rounded-sm",
+          "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+          "bg-[length:200%_100%]",
+          children ? "text-transparent [&_*]:invisible" : "min-h-5",
+          finalClassName
+        ),
+        style: mergedStyle,
+        ...htmlRest,
+        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,
+        className: cn("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("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        loading,
+        className: 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,
+  {
+    className: cn(
+      "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(
+        "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(
+        "a",
+        {
+          href,
+          className: linkClasses,
+          style: linkStyle,
+          ...disabled ? { "data-disabled": true } : {},
+          ...rest,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: linkClasses,
+        ...disabled ? { "data-disabled": true } : {},
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+React3__default.forwardRef(
+  function LinkBox2(props, ref) {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        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(
+        "a",
+        {
+          ref,
+          href: loading ? void 0 : processedHref,
+          className: overlayClasses,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          ...rest,
+          children: (children || !noIcon && href) && /* @__PURE__ */ jsxs(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children: [
+            children,
+            !noIcon && href && /* @__PURE__ */ jsx(LinkExternalIcon, { color: iconColor })
+          ] })
+        }
+      );
+    }
+    const content = children ? /* @__PURE__ */ jsx(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children }) : null;
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href,
+          className: overlayClasses,
+          ...rest,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: overlayClasses,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, 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_SCALE2 = 4;
+function toPixels(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return value;
+  return `${value * SPACING_SCALE2}px`;
+}
+function extractStyles(props) {
+  const style = {};
+  const rest = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    switch (key) {
+      case "width":
+      case "w":
+        style.width = value;
+        break;
+      case "minWidth":
+      case "minW":
+        style.minWidth = value;
+        break;
+      case "maxWidth":
+      case "maxW":
+        style.maxWidth = value;
+        break;
+      case "height":
+      case "h":
+        style.height = value;
+        break;
+      case "textAlign":
+        style.textAlign = value;
+        break;
+      case "verticalAlign":
+        style.verticalAlign = value;
+        break;
+      case "whiteSpace":
+        style.whiteSpace = value;
+        break;
+      case "wordBreak":
+        style.wordBreak = value;
+        break;
+      case "textTransform":
+        style.textTransform = value;
+        break;
+      case "fontSize":
+        style.fontSize = value;
+        break;
+      case "lineHeight":
+        style.lineHeight = value;
+        break;
+      case "animation":
+        style.animation = value;
+        break;
+      case "tableLayout":
+        style.tableLayout = value;
+        break;
+      case "p":
+        style.padding = toPixels(value);
+        break;
+      case "px": {
+        const px = toPixels(value);
+        style.paddingLeft = px;
+        style.paddingRight = px;
+        break;
+      }
+      case "py": {
+        const py = toPixels(value);
+        style.paddingTop = py;
+        style.paddingBottom = py;
+        break;
+      }
+      case "pr":
+        style.paddingRight = toPixels(value);
+        break;
+      case "pl":
+        style.paddingLeft = toPixels(value);
+        break;
+      case "pt":
+        style.paddingTop = toPixels(value);
+        break;
+      case "pb":
+        style.paddingBottom = toPixels(value);
+        break;
+      case "m":
+        style.margin = toPixels(value);
+        break;
+      case "mx": {
+        const mx = toPixels(value);
+        style.marginLeft = mx;
+        style.marginRight = mx;
+        break;
+      }
+      case "my": {
+        const my = toPixels(value);
+        style.marginTop = my;
+        style.marginBottom = my;
+        break;
+      }
+      case "mr":
+        style.marginRight = toPixels(value);
+        break;
+      case "ml":
+        style.marginLeft = toPixels(value);
+        break;
+      case "mt":
+        style.marginTop = toPixels(value);
+        break;
+      case "mb":
+        style.marginBottom = toPixels(value);
+        break;
+      case "position":
+        style.position = value;
+        break;
+      case "top":
+        style.top = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "left":
+        style.left = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "right":
+        style.right = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "bottom":
+        style.bottom = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "zIndex":
+        style.zIndex = value;
+        break;
+      case "backgroundColor":
+        if (typeof value === "string") {
+          style.backgroundColor = value;
+        }
+        break;
+      case "boxShadow":
+        style.boxShadow = value;
+        break;
+      case "alignItems":
+        style.alignItems = value;
+        break;
+      case "fontWeight":
+        style.fontWeight = value;
+        break;
+      case "color":
+        if (typeof value === "string") {
+          style.color = value;
+        }
+        break;
+      case "overflow":
+        style.overflow = value;
+        break;
+      case "borderBottomStyle":
+        style.borderBottomStyle = value;
+        break;
+      case "borderRadius":
+        style.borderRadius = value;
+        break;
+      case "display":
+        style.display = value;
+        break;
+      // Chakra pseudo-props: silently drop
+      case "_first":
+      case "_last":
+        break;
+      default:
+        rest[key] = value;
+        break;
+    }
+  }
+  return { style, rest };
+}
+function resolveResponsive(value) {
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return `${value}px`;
+  if (typeof value === "object" && value !== null && "base" in value) {
+    return value.base;
+  }
+  return void 0;
+}
+var TableRoot = React3.forwardRef(
+  function TableRoot2(props, ref) {
+    const { className, style: styleProp, children, ...other } = props;
+    const rawMinW = other.minWidth ?? other.minW;
+    const resolvedMinW = resolveResponsive(rawMinW);
+    if (resolvedMinW) {
+      other.minWidth = resolvedMinW;
+      delete other.minW;
+    }
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = { ...extracted, ...styleProp };
+    return /* @__PURE__ */ jsx(
+      "table",
+      {
+        ref,
+        className: cn("w-full border-collapse text-sm", className),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableHeader = React3.forwardRef(
+  function TableHeader2(props, ref) {
+    const { className, style: styleProp, children, ...other } = props;
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = { ...extracted, ...styleProp };
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref,
+        className: cn("", className),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableBody = React3.forwardRef(
+  function TableBody2(props, ref) {
+    const { className, style: styleProp, children, ...other } = props;
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = { ...extracted, ...styleProp };
+    return /* @__PURE__ */ jsx(
+      "tbody",
+      {
+        ref,
+        className: cn("", className),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableRow = React3.forwardRef(
+  function TableRow2(props, ref) {
+    const { className, style: styleProp, children, ...other } = props;
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = { ...extracted, ...styleProp };
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ref,
+        className: cn("", className),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableCell = React3.forwardRef(
+  function TableCell2(props, ref) {
+    const { isNumeric, className, style: styleProp, children, ...other } = props;
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = {
+      ...isNumeric ? { textAlign: "right" } : {},
+      ...extracted,
+      ...styleProp
+    };
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: cn("px-3 py-2.5 align-top text-sm", className),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableColumnHeader = React3.forwardRef(
+  function TableColumnHeader2(props, ref) {
+    const { isNumeric, className, style: styleProp, children, ...other } = props;
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = {
+      ...isNumeric ? { textAlign: "right" } : {},
+      ...extracted,
+      ...styleProp
+    };
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        className: cn(
+          "px-3 py-2 text-xs font-semibold uppercase tracking-wider",
+          "bg-[var(--color-table-header-bg)] text-[var(--color-table-header-fg)]",
+          className
+        ),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableColumnHeaderSortable = (props) => {
+  const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
+  const handleSortToggle = React3.useCallback(() => {
+    onSortToggle(sortField);
+  }, [onSortToggle, sortField]);
+  const isActive = sortValue.includes(sortField);
+  const isAsc = sortValue.toLowerCase().includes("asc");
+  return /* @__PURE__ */ jsxs(TableColumnHeader, { ...rest, children: [
+    /* @__PURE__ */ jsxs(Link, { onClick: disabled ? void 0 : handleSortToggle, className: "relative", children: [
+      isActive && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "absolute top-0 inline-flex h-full w-4 items-center",
+            indicatorPosition === "left" ? "-left-5" : "-right-5",
+            isAsc ? "-rotate-90" : "rotate-90"
+          ),
+          children: /* @__PURE__ */ jsx(ArrowIcon2, { className: "h-4 w-4" })
+        }
+      ),
+      children
+    ] }),
+    contentAfter
+  ] });
+};
+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(() => {
+    if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
+      setIsStuck(true);
+    } else {
+      setIsStuck(false);
+    }
+  }, [top]);
+  React3.useEffect(() => {
+    const throttledHandleScroll = throttle(handleScroll, 300);
+    window.addEventListener("scroll", throttledHandleScroll);
+    return () => {
+      window.removeEventListener("scroll", throttledHandleScroll);
+    };
+  }, [handleScroll]);
+  return /* @__PURE__ */ jsx(
+    TableHeader,
+    {
+      ref,
+      className: cn("sticky z-[1] bg-white dark:bg-black", className),
+      style: {
+        top: top ? `${top}px` : 0,
+        boxShadow: isStuck ? ACTION_BAR_SHADOW : "none",
+        ...styleProp
+      },
+      ...rest,
+      children
+    }
+  );
+};
+var TableCaption = React3.forwardRef(
+  function TableCaption2(props, ref) {
+    const { className, style: styleProp, children, ...other } = props;
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = { ...extracted, ...styleProp };
+    return /* @__PURE__ */ jsx(
+      "caption",
+      {
+        ref,
+        className: cn("px-3 py-2 text-sm text-[var(--color-table-header-fg)]", className),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableFooter = React3.forwardRef(
+  function TableFooter2(props, ref) {
+    const { className, style: styleProp, children, ...other } = props;
+    const { style: extracted, rest } = extractStyles(other);
+    const merged = { ...extracted, ...styleProp };
+    return /* @__PURE__ */ jsx(
+      "tfoot",
+      {
+        ref,
+        className: cn("", className),
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableScrollWrapper = React3.forwardRef(
+  function TableScrollWrapper2(props, ref) {
+    const { className, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("w-full overflow-x-auto", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+export { TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper };