@luxfi/ui 5.6.0 → 6.0.0

package/dist/image.js

@@ -1,551 +0,0 @@
-"use client";
-import * as React2 from 'react';
-import React2__default from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/image.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 = React2.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 && React2.isValidElement(children)) {
-        return children;
-      }
-      return /* @__PURE__ */ jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React2.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
-      }
-    );
-  }
-);
-React2.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
-      }
-    );
-  }
-);
-React2.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 CHAKRA_SPACING_SCALE = {
-  "0": "0px",
-  "1": "0.25rem",
-  "2": "0.5rem",
-  "3": "0.75rem",
-  "4": "1rem",
-  "5": "1.25rem",
-  "6": "1.5rem",
-  "7": "1.75rem",
-  "8": "2rem",
-  "10": "2.5rem",
-  "12": "3rem",
-  "14": "3.5rem",
-  "16": "4rem",
-  "20": "5rem"
-};
-var CHAKRA_RADII = {
-  none: "0",
-  sm: "0.125rem",
-  base: "0.25rem",
-  md: "0.375rem",
-  lg: "0.5rem",
-  xl: "0.75rem",
-  "2xl": "1rem",
-  "3xl": "1.5rem",
-  full: "9999px"
-};
-function resolveSize(value) {
-  if (value === void 0) return void 0;
-  if (typeof value === "number") return `${value}px`;
-  if (CHAKRA_SPACING_SCALE[value]) return CHAKRA_SPACING_SCALE[value];
-  return value;
-}
-function resolveRadius(value) {
-  if (value === void 0) return void 0;
-  if (typeof value === "number") return `${value}px`;
-  if (CHAKRA_RADII[value]) return CHAKRA_RADII[value];
-  return String(value);
-}
-function resolveSimple(value) {
-  if (value === void 0) return void 0;
-  return typeof value === "number" ? value : value;
-}
-function baseValue(val) {
-  if (val === void 0) return void 0;
-  if (typeof val === "object" && val !== null && ("base" in val || "md" in val || "lg" in val)) {
-    return val.base;
-  }
-  return val;
-}
-function buildStyle(props) {
-  const s = {};
-  const size = resolveSize(props.boxSize);
-  if (size) {
-    s.width = size;
-    s.height = size;
-  }
-  const w = resolveSize(props.width ?? baseValue(props.w));
-  if (w) s.width = w;
-  const hVal = baseValue(props.height ?? props.h);
-  const h = resolveSize(hVal);
-  if (h) s.height = h;
-  const maxW = resolveSize(props.maxW);
-  if (maxW) s.maxWidth = maxW;
-  const maxH = resolveSize(props.maxH);
-  if (maxH) s.maxHeight = maxH;
-  const minW = resolveSize(props.minW);
-  if (minW) s.minWidth = minW;
-  const br = resolveRadius(props.borderRadius);
-  if (br) s.borderRadius = br;
-  const mr = resolveSize(props.marginRight ?? props.mr);
-  if (mr) s.marginRight = mr;
-  const ml = resolveSize(props.ml);
-  if (ml) s.marginLeft = ml;
-  const mt = resolveSize(props.mt);
-  if (mt) s.marginTop = mt;
-  const mb = resolveSize(props.mb);
-  if (mb) s.marginBottom = mb;
-  const mx = resolveSize(props.mx);
-  if (mx) {
-    s.marginLeft = mx;
-    s.marginRight = mx;
-  }
-  const my = resolveSize(props.my);
-  if (my) {
-    s.marginTop = my;
-    s.marginBottom = my;
-  }
-  if (props.display !== void 0) s.display = String(props.display);
-  if (props.position !== void 0) s.position = String(props.position);
-  const top = resolveSimple(props.top);
-  if (top !== void 0) s.top = typeof top === "number" ? `${top}px` : top;
-  const leftVal = baseValue(props.left);
-  const left = resolveSimple(leftVal);
-  if (left !== void 0) s.left = typeof left === "number" ? `${left}px` : left;
-  const right = resolveSimple(props.right);
-  if (right !== void 0) s.right = typeof right === "number" ? `${right}px` : right;
-  const bottom = resolveSimple(props.bottom);
-  if (bottom !== void 0) s.bottom = typeof bottom === "number" ? `${bottom}px` : bottom;
-  if (props.zIndex !== void 0) s.zIndex = typeof props.zIndex === "number" ? props.zIndex : Number(props.zIndex) || void 0;
-  if (props.objectFit !== void 0) s.objectFit = String(props.objectFit);
-  if (props.objectPosition !== void 0) s.objectPosition = String(props.objectPosition);
-  if (props.flexShrink !== void 0) s.flexShrink = typeof props.flexShrink === "number" ? props.flexShrink : Number(props.flexShrink);
-  if (props.overflow !== void 0) s.overflow = String(props.overflow);
-  return s;
-}
-var STYLE_PROP_KEYS = /* @__PURE__ */ new Set([
-  "boxSize",
-  "borderRadius",
-  "width",
-  "w",
-  "height",
-  "h",
-  "maxW",
-  "maxH",
-  "minW",
-  "mr",
-  "mb",
-  "ml",
-  "mt",
-  "mx",
-  "my",
-  "marginRight",
-  "display",
-  "position",
-  "top",
-  "left",
-  "right",
-  "bottom",
-  "zIndex",
-  "objectFit",
-  "objectPosition",
-  "flexShrink",
-  "overflow"
-]);
-function extractStyleProps(props) {
-  const styleProps = {};
-  const rest = {};
-  for (const key in props) {
-    if (STYLE_PROP_KEYS.has(key)) {
-      styleProps[key] = props[key];
-    } else {
-      rest[key] = props[key];
-    }
-  }
-  return { styleProps, rest };
-}
-var Image = React2__default.forwardRef(
-  function Image2(props, ref) {
-    const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, alt, className, style: styleProp, ...allRest } = props;
-    const { styleProps, rest: extraProps } = extractStyleProps(allRest);
-    const [loading, setLoading] = React2__default.useState(true);
-    const [error, setError] = React2__default.useState(false);
-    const handleLoadError = React2__default.useCallback((event) => {
-      setError(true);
-      setLoading(false);
-      onError?.(event);
-    }, [onError]);
-    const handleLoadSuccess = React2__default.useCallback((event) => {
-      setLoading(false);
-      onLoad?.(event);
-    }, [onLoad]);
-    const passthroughProps = allRest;
-    if (!src && fallback) {
-      if (React2__default.isValidElement(fallback)) {
-        return React2__default.cloneElement(fallback, passthroughProps);
-      }
-      return fallback;
-    }
-    if (error) {
-      if (React2__default.isValidElement(fallback)) {
-        return React2__default.cloneElement(fallback, passthroughProps);
-      }
-      return fallback;
-    }
-    const skeletonProps = {
-      ...passthroughProps,
-      ...skeletonWidth !== void 0 && { width: skeletonWidth },
-      ...skeletonHeight !== void 0 && { height: skeletonHeight }
-    };
-    const computedStyle = buildStyle(styleProps);
-    const mergedStyle = {
-      ...computedStyle,
-      ...styleProp,
-      display: loading ? "none" : computedStyle.display || styleProp?.display || "block"
-    };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      loading && /* @__PURE__ */ jsx(Skeleton, { loading: true, ...skeletonProps }),
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          ref,
-          src,
-          alt: alt || "",
-          onError: handleLoadError,
-          onLoad: handleLoadSuccess,
-          className: cn(className),
-          style: mergedStyle,
-          ...extraProps
-        }
-      )
-    ] });
-  }
-);
-
-export { Image };