@luxfi/ui 6.1.3 → 7.1.0

package/dist/image.js

@@ -0,0 +1,404 @@
+"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 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 = React2.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 && React2.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React2.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        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 };