@dmsi/wedgekit-react 0.0.1242 → 1.0.0

package/dist/chunk-F4VE3THQ.js

@@ -1,71 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Card.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-function Card(props) {
-  const _a = props, {
-    children,
-    selected,
-    testid,
-    padding,
-    paddingX,
-    paddingY,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    elevation = 4
-  } = _a, rest = __objRest(_a, [
-    "children",
-    "selected",
-    "testid",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingBottom",
-    "paddingTop",
-    "paddingLeft",
-    "paddingRight",
-    "elevation"
-  ]);
-  const CardComponent = props.as || "div";
-  const anyPaddingPropSpecified = padding !== void 0 || paddingX !== void 0 || paddingY !== void 0 || paddingBottom !== void 0 || paddingTop !== void 0 || paddingLeft !== void 0 || paddingRight !== void 0;
-  const paddingClasses = clsx(
-    // Backward compatibility: if no new padding props provided keep existing class.
-    !anyPaddingPropSpecified && "p-desktop-layout-padding",
-    // New responsive spacing tokens (mirrors Stack for layout sizing)
-    padding && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-    paddingX && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
-    paddingY && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-    paddingBottom && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-    paddingTop && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
-    paddingLeft && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
-    paddingRight && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding"
-  );
-  return /* @__PURE__ */ jsx(
-    CardComponent,
-    __spreadProps(__spreadValues({}, rest), {
-      "data-testid": testid,
-      className: clsx(
-        "rounded-sm",
-        paddingClasses,
-        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
-        elevation === 0 && "shadow-none",
-        elevation === 2 && "shadow-2",
-        elevation === 4 && "shadow-4",
-        elevation === 16 && "shadow-16",
-        rest.className
-      ),
-      children
-    })
-  );
-}
-
-export {
-  Card
-};

package/dist/chunk-FXXRXLOL.js

@@ -1,329 +0,0 @@
-import {
-  CarouselPagination
-} from "./chunk-MBZ55T2D.js";
-import {
-  MobileImageCarousel
-} from "./chunk-YKEPPS2I.js";
-import {
-  ProductPrimaryImage
-} from "./chunk-UFX5XIJL.js";
-import {
-  Thumbnail
-} from "./chunk-3PIDINTF.js";
-import {
-  ZoomWindow
-} from "./chunk-BQNPOGD5.js";
-import {
-  Grid
-} from "./chunk-BWPNXY7T.js";
-import {
-  useMatchesMobile
-} from "./chunk-WVGXD7HT.js";
-import {
-  Stack
-} from "./chunk-MVDGHWKO.js";
-
-// src/components/ProductImagePreview/useProductImagePreview.ts
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-function useProductImagePreview(props) {
-  const {
-    images,
-    currentIndex,
-    zoomEnabled = false,
-    zoomFactor = 2,
-    scrollToZoomEnabled = false,
-    onChangeIndex,
-    isMobile = false
-  } = props;
-  const hasImages = !!(images == null ? void 0 : images.length);
-  const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
-  const active = useMemo(() => {
-    return hasImages ? images[safeIndex] : void 0;
-  }, [hasImages, images, safeIndex]);
-  const [zoomPoint, setZoomPoint] = useState(null);
-  const [zoomActive, setZoomActive] = useState(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = useState(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] = useState(null);
-  const primaryImageRef = useRef(null);
-  const cleanupRef = useRef(null);
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  useEffect(() => {
-    if (!effectiveZoomEnabled) return;
-    const setupTracking = () => {
-      const element = primaryImageRef.current;
-      if (!element) return;
-      const updatePosition = () => {
-        if (element) {
-          setPrimaryImagePosition(element.getBoundingClientRect());
-        }
-      };
-      updatePosition();
-      const resizeObserver = new ResizeObserver(updatePosition);
-      resizeObserver.observe(element);
-      window.addEventListener("scroll", updatePosition);
-      window.addEventListener("resize", updatePosition);
-      cleanupRef.current = () => {
-        resizeObserver.disconnect();
-        window.removeEventListener("scroll", updatePosition);
-        window.removeEventListener("resize", updatePosition);
-      };
-    };
-    if (primaryImageRef.current) {
-      setupTracking();
-    } else {
-      const frameId = requestAnimationFrame(setupTracking);
-      return () => cancelAnimationFrame(frameId);
-    }
-    return () => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = null;
-      }
-    };
-  }, [effectiveZoomEnabled]);
-  const handleSelect = useCallback(
-    (idx) => {
-      if (idx === safeIndex) return;
-      onChangeIndex(idx);
-    },
-    [safeIndex, onChangeIndex]
-  );
-  const handleNext = useCallback(() => {
-    if (!hasImages) return;
-    const nextIndex = (safeIndex + 1) % images.length;
-    onChangeIndex(nextIndex);
-  }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = useCallback(() => {
-    if (!hasImages) return;
-    const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
-    onChangeIndex(previousIndex);
-  }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = useCallback(
-    (p, active2) => {
-      if (isMobile) return;
-      setZoomPoint(p);
-      setZoomActive(active2);
-    },
-    [isMobile]
-  );
-  const handleScrollZoom = useCallback(
-    (delta) => {
-      if (!effectiveScrollToZoomEnabled) return;
-      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
-      setCurrentZoomFactor(newZoomFactor);
-    },
-    [effectiveScrollToZoomEnabled, currentZoomFactor]
-  );
-  useEffect(() => {
-    setCurrentZoomFactor(zoomFactor);
-  }, [zoomFactor]);
-  return {
-    // State
-    zoomPoint,
-    zoomActive,
-    currentZoomFactor,
-    primaryImagePosition,
-    hasImages,
-    safeIndex,
-    active,
-    // Refs
-    primaryImageRef,
-    // Handlers
-    handleSelect,
-    handleZoomPositionChange,
-    handleScrollZoom,
-    handleNext,
-    handlePrevious
-  };
-}
-
-// src/components/ProductImagePreview/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var placeholderImageUri = "/placeholder.svg";
-function hasValidImageSource(src) {
-  const normalizedSrc = src == null ? void 0 : src.trim();
-  return !!normalizedSrc && normalizedSrc !== placeholderImageUri && !normalizedSrc.endsWith("/placeholder.svg") && !normalizedSrc.includes("/placeholder.svg?");
-}
-function ProductImagePreview(props) {
-  const {
-    width = 483,
-    height = 483,
-    thumbsPerRow = 4,
-    zoomEnabled = false,
-    scrollToZoomEnabled = false,
-    images,
-    currentIndex,
-    onChangeIndex,
-    zoomLensSize,
-    zoomFactor = 2,
-    zoomWindowScaleFactor = 2.5,
-    zoomWindowOffset = 10,
-    testid
-  } = props;
-  const [failedImageSources, setFailedImageSources] = useState2([]);
-  const imageSourceKey = useMemo2(
-    () => images.map((image) => image.src).join("|"),
-    [images]
-  );
-  const validImages = useMemo2(
-    () => images.filter(
-      (image) => hasValidImageSource(image.src) && failedImageSources.indexOf(image.src) === -1
-    ),
-    [failedImageSources, images]
-  );
-  const handleImageError = useCallback2((src) => {
-    if (!src) return;
-    setFailedImageSources(
-      (previousSources) => previousSources.indexOf(src) >= 0 ? previousSources : [...previousSources, src]
-    );
-  }, []);
-  useEffect2(() => {
-    setFailedImageSources([]);
-  }, [imageSourceKey]);
-  const isMobile = useMatchesMobile();
-  const {
-    zoomPoint,
-    zoomActive,
-    currentZoomFactor,
-    primaryImagePosition,
-    safeIndex,
-    active,
-    primaryImageRef,
-    handleSelect,
-    handleZoomPositionChange,
-    handleScrollZoom
-  } = useProductImagePreview({
-    images: validImages,
-    currentIndex,
-    zoomEnabled,
-    zoomFactor,
-    scrollToZoomEnabled,
-    onChangeIndex,
-    isMobile
-  });
-  if (typeof isMobile === "undefined") return null;
-  if (isMobile && !validImages.length)
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: placeholderImageUri,
-        alt: "Placeholder Image",
-        draggable: false,
-        loading: "eager",
-        style: {
-          aspectRatio: "1 / 1",
-          objectFit: "cover",
-          height: "100%",
-          width: "100%"
-        }
-      }
-    );
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const showDesktopThumbnails = validImages.length > 1;
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      sizing: "layout-group",
-      style: { width, position: "relative" },
-      testid,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-start", children: [
-          /* @__PURE__ */ jsx("div", { ref: primaryImageRef, children: /* @__PURE__ */ jsx(
-            ProductPrimaryImage,
-            {
-              image: active,
-              width,
-              height,
-              zoomEnabled: effectiveZoomEnabled,
-              zoomLensSize,
-              scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
-              onZoomPositionChange: handleZoomPositionChange,
-              onScrollZoom: handleScrollZoom,
-              isPlaceholder: validImages.length === 0,
-              onImageError: handleImageError
-            }
-          ) }),
-          effectiveZoomEnabled && /* @__PURE__ */ jsx(
-            ZoomWindow,
-            {
-              image: active,
-              width,
-              height,
-              pointer: zoomPoint,
-              active: zoomActive,
-              zoomFactor: currentZoomFactor,
-              scaleFactor: zoomWindowScaleFactor,
-              primaryImagePosition,
-              offset: zoomWindowOffset
-            }
-          )
-        ] }) }),
-        isMobile && /* @__PURE__ */ jsx(
-          MobileImageCarousel,
-          {
-            images: validImages,
-            currentIndex: safeIndex,
-            width,
-            height,
-            onChangeIndex: handleSelect,
-            onImageError: handleImageError
-          }
-        ),
-        showDesktopThumbnails && /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: validImages.length <= 3 ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex justify-center gap-4",
-            style: { width: "100%", maxWidth: width },
-            "aria-label": "Product image thumbnails",
-            children: validImages.map((img, i) => /* @__PURE__ */ jsx("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ jsx(
-              Thumbnail,
-              {
-                src: img.src,
-                alt: img.alt || `Thumbnail ${i + 1}`,
-                isActive: i === safeIndex,
-                onClick: () => handleSelect(i),
-                onImageError: handleImageError
-              }
-            ) }, img.src + i))
-          }
-        ) : /* @__PURE__ */ jsx(
-          Grid,
-          {
-            sizing: "layout-group",
-            "aria-label": "Product image thumbnails",
-            style: {
-              width: "100%",
-              maxWidth: width
-            },
-            columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
-            children: validImages.map((img, i) => /* @__PURE__ */ jsx(
-              Thumbnail,
-              {
-                src: img.src,
-                alt: img.alt || `Thumbnail ${i + 1}`,
-                isActive: i === safeIndex,
-                onClick: () => handleSelect(i),
-                onImageError: handleImageError
-              },
-              img.src + i
-            ))
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          CarouselPagination,
-          {
-            images: validImages,
-            currentIndex: safeIndex,
-            onSelect: handleSelect
-          }
-        )
-      ]
-    }
-  );
-}
-
-export {
-  ProductImagePreview
-};

package/dist/chunk-G242RHWI.js

@@ -1,139 +0,0 @@
-import {
-  Paragraph
-} from "./chunk-7MBRCM3M.js";
-import {
-  baseTransition,
-  componentGap
-} from "./chunk-SATCWGO7.js";
-import {
-  __objRest,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Radio.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Radio = (_a) => {
-  var _b = _a, {
-    className,
-    label,
-    error,
-    disabled,
-    checked,
-    readOnly,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "label",
-    "error",
-    "disabled",
-    "checked",
-    "readOnly",
-    "id",
-    "testid"
-  ]);
-  const radioId = id;
-  const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
-  const defaultClassName = clsx(
-    !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
-  );
-  const errorClassName = clsx(
-    error && !disabled && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
-  );
-  const disabledClassName = clsx(
-    disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
-  );
-  const readonlyClassName = clsx(
-    readOnly && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
-  );
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor: radioId,
-      "data-testid": testid,
-      className: clsx(
-        "flex items-center",
-        componentGap,
-        disabled ? "cursor-default" : "cursor-pointer",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            __spreadValues({
-              id: radioId,
-              "data-testid": testid ? `${testid}-input` : void 0,
-              type: "radio",
-              className: "sr-only peer",
-              disabled,
-              checked,
-              readOnly
-            }, props)
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                "size-6 rounded-full border flex items-center justify-center",
-                baseTransition,
-                defaultClassName,
-                errorClassName,
-                disabledClassName,
-                readonlyClassName
-              ),
-              children: checked && /* @__PURE__ */ jsx(
-                RadioIcon,
-                {
-                  className: clsx(
-                    "transition-colors",
-                    !error && !disabled && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
-                    error && !disabled && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
-                    disabled && "text-icon-on-action-secondary-disabled",
-                    readOnly && "text-icon-on-action-secondary-disabled"
-                  )
-                }
-              )
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ jsx(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
-      ]
-    }
-  );
-};
-Radio.displayName = "Radio";
-var RadioIcon = ({ className }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "1",
-            y: "1",
-            width: "22",
-            height: "22",
-            rx: "11",
-            stroke: "currentColor",
-            strokeWidth: "2"
-          }
-        ),
-        /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
-      ]
-    }
-  );
-};
-RadioIcon.displayName = "RadioIcon";
-
-export {
-  Radio
-};

package/dist/chunk-GOGNV5TF.js

@@ -1,68 +0,0 @@
-import {
-  typography
-} from "./chunk-SATCWGO7.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Heading.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var Heading = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as,
-    color,
-    align,
-    variant = "heading1",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "color",
-    "align",
-    "variant",
-    "id",
-    "testid"
-  ]);
-  const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
-  const Element = as != null ? as : defaultElement;
-  return /* @__PURE__ */ jsx(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      className: clsx(
-        typography[variant],
-        className,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right"
-      ),
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      })
-    }, props), {
-      children
-    })
-  );
-};
-Heading.displayName = "Heading";
-var Heading1 = (props) => /* @__PURE__ */ jsx(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
-var Heading2 = (props) => /* @__PURE__ */ jsx(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
-var Heading3 = (props) => /* @__PURE__ */ jsx(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
-Heading1.displayName = "Heading1";
-Heading2.displayName = "Heading2";
-Heading3.displayName = "Heading3";
-
-export {
-  Heading,
-  Heading1,
-  Heading2,
-  Heading3
-};