@luxfi/ui 6.1.2 → 7.0.0

package/dist/separator.cjs

@@ -0,0 +1,57 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/separator.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var VARIANT_CLASSES = {
+  solid: "border-solid",
+  dashed: "border-dashed",
+  dotted: "border-dotted"
+};
+var HORIZONTAL_SIZE_CLASSES = {
+  xs: "border-t-[0.5px]",
+  sm: "border-t",
+  md: "border-t-2",
+  lg: "border-t-[3px]"
+};
+var VERTICAL_SIZE_CLASSES = {
+  xs: "border-l-[0.5px]",
+  sm: "border-l",
+  md: "border-l-2",
+  lg: "border-l-[3px]"
+};
+var Separator = React__default.default.forwardRef(
+  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
+    const isVertical = orientation === "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "hr",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: cn(
+          "border-[var(--color-border-divider)]",
+          "border-0",
+          VARIANT_CLASSES[variant],
+          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
+          isVertical ? "self-stretch h-auto w-0" : "w-full",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+
+exports.Separator = Separator;

package/dist/separator.d.cts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+type Orientation = 'horizontal' | 'vertical';
+type Variant = 'solid' | 'dashed' | 'dotted';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+interface SeparatorProps extends React__default.HTMLAttributes<HTMLHRElement> {
+    readonly orientation?: Orientation;
+    readonly variant?: Variant;
+    readonly size?: Size;
+}
+declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & React__default.RefAttributes<HTMLHRElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/separator.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+type Orientation = 'horizontal' | 'vertical';
+type Variant = 'solid' | 'dashed' | 'dotted';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+interface SeparatorProps extends React__default.HTMLAttributes<HTMLHRElement> {
+    readonly orientation?: Orientation;
+    readonly variant?: Variant;
+    readonly size?: Size;
+}
+declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & React__default.RefAttributes<HTMLHRElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/separator.js

@@ -0,0 +1,51 @@
+"use client";
+import React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/separator.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var VARIANT_CLASSES = {
+  solid: "border-solid",
+  dashed: "border-dashed",
+  dotted: "border-dotted"
+};
+var HORIZONTAL_SIZE_CLASSES = {
+  xs: "border-t-[0.5px]",
+  sm: "border-t",
+  md: "border-t-2",
+  lg: "border-t-[3px]"
+};
+var VERTICAL_SIZE_CLASSES = {
+  xs: "border-l-[0.5px]",
+  sm: "border-l",
+  md: "border-l-2",
+  lg: "border-l-[3px]"
+};
+var Separator = React.forwardRef(
+  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
+    const isVertical = orientation === "vertical";
+    return /* @__PURE__ */ jsx(
+      "hr",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: cn(
+          "border-[var(--color-border-divider)]",
+          "border-0",
+          VARIANT_CLASSES[variant],
+          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
+          isVertical ? "self-stretch h-auto w-0" : "w-full",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+
+export { Separator };

package/dist/skeleton.cjs

@@ -0,0 +1,370 @@
+"use client";
+'use strict';
+
+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/skeleton.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.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 = React__namespace.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 && React__namespace.isValidElement(children)) {
+        return children;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React__namespace.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
+      }
+    );
+  }
+);
+var SkeletonCircle = 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
+      }
+    );
+  }
+);
+var SkeletonText = 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
+    )) });
+  }
+);
+
+exports.Skeleton = Skeleton;
+exports.SkeletonCircle = SkeletonCircle;
+exports.SkeletonText = SkeletonText;

package/dist/skeleton.d.cts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    readonly loading: boolean | undefined;
+    /** When true, the Skeleton wraps its single child element instead of adding a wrapper div. */
+    readonly asChild?: boolean;
+    readonly w?: any;
+    readonly h?: any;
+    readonly minW?: any;
+    readonly maxW?: any;
+    readonly display?: string;
+    readonly flexGrow?: number;
+    readonly flexShrink?: number;
+    readonly flexBasis?: string;
+    readonly fontWeight?: number | string;
+    readonly textStyle?: string;
+    readonly borderRadius?: string;
+    readonly alignSelf?: string;
+    readonly alignItems?: string;
+    readonly justifyContent?: string;
+    readonly color?: string;
+    readonly mt?: number | string;
+    readonly mb?: number | string;
+    readonly ml?: number | string;
+    readonly mr?: number | string;
+    readonly height?: string;
+    readonly overflow?: string;
+    readonly whiteSpace?: string;
+    readonly textOverflow?: string;
+    readonly textTransform?: string;
+    readonly gap?: number | string;
+    readonly gridTemplateColumns?: string;
+    readonly minWidth?: string;
+    readonly boxSize?: number | string;
+    readonly py?: number | string;
+    readonly px?: number | string;
+    readonly p?: number | string;
+    readonly hideBelow?: string;
+    readonly as?: React.ElementType;
+    readonly fontSize?: string;
+    readonly flexWrap?: React.CSSProperties['flexWrap'];
+    readonly wordBreak?: React.CSSProperties['wordBreak'];
+    readonly lineHeight?: string;
+    readonly marginRight?: string;
+    readonly position?: React.CSSProperties['position'];
+    readonly background?: string;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly size?: string | number;
+    readonly loading?: boolean;
+}
+declare const SkeletonCircle: React.ForwardRefExoticComponent<SkeletonCircleProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly noOfLines?: number;
+    readonly loading?: boolean;
+}
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };

package/dist/skeleton.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    readonly loading: boolean | undefined;
+    /** When true, the Skeleton wraps its single child element instead of adding a wrapper div. */
+    readonly asChild?: boolean;
+    readonly w?: any;
+    readonly h?: any;
+    readonly minW?: any;
+    readonly maxW?: any;
+    readonly display?: string;
+    readonly flexGrow?: number;
+    readonly flexShrink?: number;
+    readonly flexBasis?: string;
+    readonly fontWeight?: number | string;
+    readonly textStyle?: string;
+    readonly borderRadius?: string;
+    readonly alignSelf?: string;
+    readonly alignItems?: string;
+    readonly justifyContent?: string;
+    readonly color?: string;
+    readonly mt?: number | string;
+    readonly mb?: number | string;
+    readonly ml?: number | string;
+    readonly mr?: number | string;
+    readonly height?: string;
+    readonly overflow?: string;
+    readonly whiteSpace?: string;
+    readonly textOverflow?: string;
+    readonly textTransform?: string;
+    readonly gap?: number | string;
+    readonly gridTemplateColumns?: string;
+    readonly minWidth?: string;
+    readonly boxSize?: number | string;
+    readonly py?: number | string;
+    readonly px?: number | string;
+    readonly p?: number | string;
+    readonly hideBelow?: string;
+    readonly as?: React.ElementType;
+    readonly fontSize?: string;
+    readonly flexWrap?: React.CSSProperties['flexWrap'];
+    readonly wordBreak?: React.CSSProperties['wordBreak'];
+    readonly lineHeight?: string;
+    readonly marginRight?: string;
+    readonly position?: React.CSSProperties['position'];
+    readonly background?: string;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly size?: string | number;
+    readonly loading?: boolean;
+}
+declare const SkeletonCircle: React.ForwardRefExoticComponent<SkeletonCircleProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly noOfLines?: number;
+    readonly loading?: boolean;
+}
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };