@almadar/ui 5.95.0 → 5.97.0

package/dist/marketing/index.js

@@ -1,4 +1,5 @@
-import React11, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
+import * as React12 from 'react';
+import React12__default, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
 import { createLogger } from '@almadar/logger';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons2 from 'lucide-react';
@@ -2748,7 +2749,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React11.forwardRef(
+var Box = React12__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2813,7 +2814,7 @@ var Box = React11.forwardRef(
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React11.createElement(
+    return React12__default.createElement(
       Component,
       {
         ref,
@@ -2901,7 +2902,7 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React11.createElement(
+  return React12__default.createElement(
     Component,
     {
       className: cn(
@@ -3011,7 +3012,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component = as || defaultElements[variant];
-  return React11.createElement(
+  return React12__default.createElement(
     Component,
     {
       id,
@@ -3103,7 +3104,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React11.lazy(async () => {
+  const Lazy = React12__default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -3113,7 +3114,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsx(
-    React11.Suspense,
+    React12__default.Suspense,
     {
       fallback: /* @__PURE__ */ jsx(
         "span",
@@ -3819,7 +3820,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React11.useMemo(() => {
+  const RenderedComponent = React12__default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3867,6 +3868,143 @@ var Icon = ({
   );
 };
 Icon.displayName = "Icon";
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r2) => r2.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r2] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r2;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
+var imageCache = /* @__PURE__ */ new Map();
+var imageWaiters = /* @__PURE__ */ new Map();
+function getSheetImage(url, onReady) {
+  const cached = imageCache.get(url);
+  if (cached) return cached;
+  (imageWaiters.get(url) ?? imageWaiters.set(url, /* @__PURE__ */ new Set()).get(url)).add(onReady);
+  if (!imageCache.has(url)) {
+    imageCache.set(url, null);
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      imageCache.set(url, img);
+      imageWaiters.get(url)?.forEach((fn) => fn());
+      imageWaiters.delete(url);
+    };
+    img.src = url;
+  }
+  return null;
+}
+function AtlasImage({
+  asset,
+  size,
+  width,
+  height,
+  fill = false,
+  fit = "contain",
+  alt,
+  className,
+  style,
+  "aria-hidden": ariaHidden
+}) {
+  const [, bump] = React12.useReducer((x) => x + 1, 0);
+  const canvasRef = React12.useRef(null);
+  const sliced = isAtlasAsset(asset);
+  const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
+  const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
+  const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
+  React12.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !img || !rect) return;
+    canvas.width = rect.sw;
+    canvas.height = rect.sh;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, rect.sw, rect.sh);
+    ctx.drawImage(img, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
+  }, [img, rect?.sx, rect?.sy, rect?.sw, rect?.sh]);
+  const w = fill ? "100%" : width ?? size;
+  const h = fill ? "100%" : height ?? size;
+  const boxStyle = {
+    ...fill ? { position: "absolute", inset: 0 } : {},
+    width: w,
+    height: h,
+    objectFit: fit,
+    imageRendering: "pixelated",
+    ...style
+  };
+  if (!asset?.url) return null;
+  if (sliced) {
+    if (!rect || !img) {
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("inline-block flex-shrink-0", className), style: { ...boxStyle, objectFit: void 0 } });
+    }
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        role: ariaHidden ? void 0 : "img",
+        "aria-hidden": ariaHidden,
+        "aria-label": ariaHidden ? void 0 : alt ?? asset.name ?? asset.category ?? "",
+        className: cn("flex-shrink-0", className),
+        style: boxStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: asset.url,
+      alt: alt ?? asset.name ?? asset.category ?? "",
+      "aria-hidden": ariaHidden,
+      ...typeof w === "number" ? { width: w } : {},
+      ...typeof h === "number" ? { height: h } : {},
+      className: cn("flex-shrink-0", className),
+      style: boxStyle
+    }
+  );
+}
+AtlasImage.displayName = "AtlasImage";
 var variantStyles2 = {
   primary: [
     "bg-primary text-primary-foreground",
@@ -3939,7 +4077,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React11.isValidElement(value)) {
+  if (React12__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -3948,7 +4086,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React11.forwardRef(
+var Button = React12__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3972,7 +4110,7 @@ var Button = React11.forwardRef(
     const leftIconValue = leftIcon || iconProp;
     const rightIconValue = rightIcon || iconRightProp;
     const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
-    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
+    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx(AtlasImage, { asset: iconAsset, size: px, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
     const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
     const handleClick = (e) => {
       if (action) {
@@ -4047,7 +4185,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React11.forwardRef(
+var Badge = React12__default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
@@ -4055,7 +4193,7 @@ var Badge = React11.forwardRef(
       lg: "h-icon-default w-icon-default"
     };
     const iconPx = size === "lg" ? 20 : 16;
-    const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: iconPx, height: iconPx, style: { imageRendering: "pixelated", objectFit: "contain", width: iconPx, height: iconPx }, className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[size] }) : null;
+    const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsx(AtlasImage, { asset: iconAsset, size: iconPx, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[size] }) : null;
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -4101,7 +4239,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React11.forwardRef(
+var Spinner = React12__default.forwardRef(
   ({ className, size = "md", overlay, ...props }, ref) => {
     if (overlay) {
       return /* @__PURE__ */ jsx(
@@ -4183,7 +4321,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React11.forwardRef(
+var Card = React12__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -4231,9 +4369,9 @@ var Card = React11.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React12__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React12__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -4246,11 +4384,11 @@ var CardTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React12__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React12__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4342,7 +4480,7 @@ var Center = ({
   as: Component = "div"
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  return React11.createElement(Component, {
+  return React12__default.createElement(Component, {
     className: cn(
       inline ? "inline-flex" : "flex",
       horizontal && "justify-center",
@@ -4403,7 +4541,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React11.forwardRef(
+var ContentSection = React12__default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -5005,7 +5143,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React11.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React12__default.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
@@ -5016,7 +5154,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React11.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React12__default.Fragment, { children: [
     /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -5224,8 +5362,8 @@ var Avatar = ({
   actionPayload
 }) => {
   const eventBus = useEventBus();
-  const [imgFailed, setImgFailed] = React11.useState(false);
-  React11.useEffect(() => {
+  const [imgFailed, setImgFailed] = React12__default.useState(false);
+  React12__default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5616,7 +5754,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React11.forwardRef(
+var AnimatedReveal = React12__default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -5769,7 +5907,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React11.forwardRef(
+var AnimatedGraphic = React12__default.forwardRef(
   ({
     src,
     svgContent,
@@ -5792,7 +5930,7 @@ var AnimatedGraphic = React11.forwardRef(
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
     const prevAnimateRef = useRef(animate);
-    const setRef = React11.useCallback(
+    const setRef = React12__default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);