@luxfi/ui 6.1.3 → 7.1.0

package/dist/heading.d.ts

@@ -0,0 +1,10 @@
+import React__default from 'react';
+
+interface HeadingProps extends React__default.ComponentPropsWithoutRef<'h1'> {
+    level?: '1' | '2' | '3';
+    mb?: number | string;
+    size?: string;
+}
+declare const Heading: React__default.ForwardRefExoticComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement>>;
+
+export { Heading, type HeadingProps };

package/dist/heading.js

@@ -0,0 +1,35 @@
+"use client";
+import React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/heading.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var LEVEL_TAG = { "1": "h1", "2": "h2", "3": "h3" };
+var LEVEL_CLASSES = {
+  "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
+  "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
+  "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
+};
+var BASE_CLASSES = "font-heading text-heading";
+var Heading = React.forwardRef(
+  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
+    const Tag = level ? LEVEL_TAG[level] : "h2";
+    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
+    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: cn(BASE_CLASSES, levelClasses, className),
+        style: mergedStyle,
+        ...rest
+      }
+    );
+  }
+);
+
+export { Heading };

package/dist/icon-button.cjs

@@ -0,0 +1,367 @@
+"use client";
+'use strict';
+
+var core = require('@hanzogui/core');
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/icon-button.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var SHIM_PROPS = [
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "display",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "fontWeight",
+  "textStyle",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "color",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "height",
+  "overflow",
+  "whiteSpace",
+  "textOverflow",
+  "textTransform",
+  "gap",
+  "gridTemplateColumns",
+  "minWidth",
+  "boxSize",
+  "py",
+  "px",
+  "p",
+  "hideBelow",
+  "fontSize",
+  "flexWrap",
+  "wordBreak",
+  "lineHeight",
+  "marginRight",
+  "position",
+  "background"
+];
+var S = 4;
+function dim(v) {
+  if (v == null) return void 0;
+  if (typeof v === "number") return `${v * S}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object") {
+    const o = v;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return void 0;
+}
+function sp(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v * S}px` : v;
+}
+function shimToStyle(props) {
+  const s = {};
+  if (props.w !== void 0) s.width = dim(props.w);
+  if (props.h !== void 0) s.height = dim(props.h);
+  if (props.minW !== void 0) s.minWidth = dim(props.minW);
+  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
+  if (props.display !== void 0) s.display = props.display;
+  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
+  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
+  if (props.color !== void 0) s.color = props.color;
+  if (props.mt !== void 0) s.marginTop = sp(props.mt);
+  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
+  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
+  if (props.mr !== void 0) s.marginRight = sp(props.mr);
+  if (props.height !== void 0) s.height = props.height;
+  if (props.overflow !== void 0) s.overflow = props.overflow;
+  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
+  if (props.gap !== void 0) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
+  if (props.boxSize !== void 0) {
+    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
+    s.width = v;
+    s.height = v;
+  }
+  if (props.py !== void 0) {
+    const v = sp(props.py);
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.px !== void 0) {
+    const v = sp(props.px);
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.p !== void 0) s.padding = sp(props.p);
+  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
+  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
+  if (props.position !== void 0) s.position = props.position;
+  if (props.background !== void 0) s.background = props.background;
+  return s;
+}
+function stripShims(props) {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out;
+}
+var SKELETON_CLASSES = [
+  "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%]"
+].join(" ");
+var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
+var Skeleton = React__namespace.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
+    const shimStyle = shimToStyle(props);
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const htmlRest = stripShims(allRest);
+    if (!loading) {
+      if (asChild && React__namespace.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React__namespace.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        style: mergedStyle,
+        ...htmlRest,
+        children
+      }
+    );
+  }
+);
+React__namespace.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        className: cn("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React__namespace.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        loading,
+        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+      },
+      index
+    )) });
+  }
+);
+var IconButtonFrame = core.styled(core.View, {
+  name: "LuxIconButton",
+  render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  minWidth: "auto",
+  flexShrink: 1,
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  variants: {
+    size: {
+      "2xs": { width: 20, height: 20, borderRadius: 4 },
+      "2xs_alt": { width: 20, height: 20, borderRadius: 4 },
+      md: { width: 32, height: 32, borderRadius: "var(--radius-base, 8px)" }
+    },
+    disabled: {
+      true: {
+        opacity: 0.4,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var VARIANT_CLASSES = {
+  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
+  icon_secondary: [
+    "bg-transparent text-icon-secondary border-none",
+    "hover:text-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
+    "data-[selected]:hover:text-hover",
+    "data-[expanded]:text-hover"
+  ].join(" "),
+  icon_background: [
+    "bg-[var(--color-button-icon-background-bg)] text-icon-secondary border-none",
+    "hover:text-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
+    "data-[selected]:hover:text-hover",
+    "data-[expanded]:text-hover"
+  ].join(" "),
+  link: [
+    "bg-transparent text-link-primary border-none font-normal px-0 h-auto",
+    "hover:bg-transparent hover:text-link-primary-hover",
+    "disabled:text-text-secondary"
+  ].join(" "),
+  dropdown: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
+    "hover:bg-transparent hover:text-hover hover:border-hover",
+    "data-[expanded]:bg-transparent data-[expanded]:text-hover data-[expanded]:border-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent",
+    "data-[selected]:hover:text-hover"
+  ].join(" "),
+  pagination: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
+    "hover:bg-transparent hover:text-hover hover:border-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent"
+  ].join(" ")
+};
+var ICON_SIZE_CLASSES = {
+  "2xs": "[&_svg]:size-5",
+  "2xs_alt": "[&_svg]:size-3",
+  md: "[&_svg]:size-5"
+};
+var SP = 4;
+var IconButton = React__namespace.forwardRef(
+  function IconButton2(props, ref) {
+    const {
+      size,
+      variant = "plain",
+      loading,
+      loadingSkeleton = false,
+      expanded,
+      selected,
+      highlighted,
+      disabled,
+      className,
+      children,
+      as: _as,
+      style: styleProp,
+      // Strip Chakra style props
+      boxSize: _boxSize,
+      color: _color,
+      px: _px,
+      borderRadius: _borderRadius,
+      ml: _ml,
+      mr: _mr,
+      _hover,
+      _expanded,
+      ...rest
+    } = props;
+    const shimStyle = { ...styleProp };
+    if (_boxSize !== void 0) {
+      const bs = typeof _boxSize === "number" ? `${_boxSize * SP}px` : _boxSize;
+      shimStyle.width = bs;
+      shimStyle.height = bs;
+    }
+    if (_color) shimStyle.color = _color;
+    if (_px !== void 0) {
+      const v = typeof _px === "number" ? `${_px * SP}px` : _px;
+      shimStyle.paddingLeft = v;
+      shimStyle.paddingRight = v;
+    }
+    if (_borderRadius) shimStyle.borderRadius = _borderRadius;
+    if (_ml !== void 0) shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * SP}px` : _ml;
+    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * SP}px` : _mr;
+    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
+    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.plain;
+    const iconSizeClass = size ? ICON_SIZE_CLASSES[size] ?? "" : "";
+    const combinedClassName = [variantClass, iconSizeClass, className].filter(Boolean).join(" ");
+    const button = /* @__PURE__ */ jsxRuntime.jsx(
+      IconButtonFrame,
+      {
+        ref,
+        size,
+        disabled: !loadingSkeleton && (loading || disabled) || void 0,
+        render: _as ? React__namespace.createElement(_as) : void 0,
+        className: combinedClassName,
+        style: mergedStyle,
+        ...expanded ? { "data-expanded": true } : {},
+        ...selected ? { "data-selected": true } : {},
+        ...highlighted ? { "data-highlighted": true } : {},
+        ...loadingSkeleton ? { "data-loading-skeleton": true } : {},
+        ...rest,
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent",
+            role: "status",
+            "aria-label": "Loading"
+          }
+        ) : children
+      }
+    );
+    if (loadingSkeleton) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading: loadingSkeleton, asChild: true, ref, children: button });
+    }
+    return button;
+  }
+);
+
+exports.IconButton = IconButton;

package/dist/icon-button.d.cts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+type Variant = 'plain' | 'icon_secondary' | 'icon_background' | 'link' | 'dropdown' | 'pagination';
+type Size = '2xs' | '2xs_alt' | 'md';
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+    /** Visual variant */
+    variant?: Variant;
+    /** Icon-button size */
+    size?: Size;
+    /** Show a loading spinner (disables button) */
+    loading?: boolean;
+    /** Render a skeleton placeholder instead of the button */
+    loadingSkeleton?: boolean;
+    /** Maps to data-expanded for popover trigger styling */
+    expanded?: boolean;
+    /** Maps to data-selected for toggle styling */
+    selected?: boolean;
+    /** Maps to data-highlighted */
+    highlighted?: boolean;
+    /** Polymorphic element type (e.g. "div") */
+    as?: React.ElementType;
+    boxSize?: number | string;
+    color?: string;
+    px?: string | number;
+    borderRadius?: string;
+    ml?: number | string;
+    mr?: number | string;
+    _hover?: Record<string, string>;
+    _expanded?: Record<string, string>;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonProps };

package/dist/icon-button.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+type Variant = 'plain' | 'icon_secondary' | 'icon_background' | 'link' | 'dropdown' | 'pagination';
+type Size = '2xs' | '2xs_alt' | 'md';
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+    /** Visual variant */
+    variant?: Variant;
+    /** Icon-button size */
+    size?: Size;
+    /** Show a loading spinner (disables button) */
+    loading?: boolean;
+    /** Render a skeleton placeholder instead of the button */
+    loadingSkeleton?: boolean;
+    /** Maps to data-expanded for popover trigger styling */
+    expanded?: boolean;
+    /** Maps to data-selected for toggle styling */
+    selected?: boolean;
+    /** Maps to data-highlighted */
+    highlighted?: boolean;
+    /** Polymorphic element type (e.g. "div") */
+    as?: React.ElementType;
+    boxSize?: number | string;
+    color?: string;
+    px?: string | number;
+    borderRadius?: string;
+    ml?: number | string;
+    mr?: number | string;
+    _hover?: Record<string, string>;
+    _expanded?: Record<string, string>;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonProps };