@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/ProductImagePreview/index.tsx

@@ -1,182 +0,0 @@
-import { Thumbnail } from "./Thumbnail";
-import { Stack } from "../Stack";
-import { Grid } from "../Grid";
-import { ProductPrimaryImage } from "./ProductPrimaryImage";
-import { ZoomWindow } from "./ZoomWindow";
-import { CarouselPagination } from "./CarouselPagination";
-import { MobileImageCarousel } from "./MobileImageCarousel";
-import { useMatchesMobile } from "../../hooks";
-import { useProductImagePreview } from "./useProductImagePreview";
-
-export type ProductPreviewImage = {
-  src: string;
-  alt?: string;
-};
-
-export type ProductImagePreviewProps = {
-  width?: number;
-  height?: number;
-  images: ProductPreviewImage[];
-  currentIndex: number;
-  zoomEnabled?: boolean;
-  zoomLensSize?: number;
-  zoomFactor?: number;
-  zoomWindowScaleFactor?: number;
-  zoomWindowOffset?: number;
-  scrollToZoomEnabled?: boolean;
-  thumbsPerRow?: 8 | 5 | 2 | 4 | 1 | 3 | 6 | 7 | 9 | 10 | 11 | 12;
-  isMobile?: boolean; // Must be used for functionality only
-  onChangeIndex: (next: number) => void;
-};
-
-const PLACEHOLDER_IMAGES = [
-  { src: "", alt: "placeholder" },
-  { src: "", alt: "placeholder" },
-];
-/** Product image gallery with primary image display, thumbnail navigation, and optional zoom functionality */
-export function ProductImagePreview(props: ProductImagePreviewProps) {
-  const {
-    width = 483,
-    height = 483,
-    thumbsPerRow = 4,
-    zoomEnabled = false,
-    scrollToZoomEnabled = false,
-    images,
-    currentIndex,
-    onChangeIndex,
-    zoomLensSize,
-    zoomFactor = 2,
-    zoomWindowScaleFactor = 2.5,
-    zoomWindowOffset = 10,
-  } = props;
-
-  const isMobile = useMatchesMobile();
-
-  const {
-    zoomPoint,
-    zoomActive,
-    currentZoomFactor,
-    primaryImagePosition,
-    safeIndex,
-    active,
-    primaryImageRef,
-    handleSelect,
-    handleZoomPositionChange,
-    handleScrollZoom,
-  } = useProductImagePreview({
-    images,
-    currentIndex,
-    zoomEnabled,
-    zoomFactor,
-    scrollToZoomEnabled,
-    onChangeIndex,
-    isMobile,
-  });
-
-  if (typeof isMobile === "undefined") return null;
-
-  // Disable zoom on mobile
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-
-  return (
-    <Stack sizing="layout" style={{ width, position: "relative" }}>
-      {/* Desktop layout - hidden on mobile */}
-      <div className="hidden md:block">
-        <div className="flex gap-4 items-start">
-          <div ref={primaryImageRef}>
-            <ProductPrimaryImage
-              image={active}
-              width={width}
-              height={height}
-              zoomEnabled={effectiveZoomEnabled}
-              zoomLensSize={zoomLensSize}
-              scrollToZoomEnabled={scrollToZoomEnabled && !isMobile}
-              onZoomPositionChange={handleZoomPositionChange}
-              onScrollZoom={handleScrollZoom}
-              isPlaceholder={images.length === 0}
-            />
-          </div>
-          {effectiveZoomEnabled && (
-            <ZoomWindow
-              image={active}
-              width={width}
-              height={height}
-              pointer={zoomPoint}
-              active={zoomActive}
-              zoomFactor={currentZoomFactor}
-              scaleFactor={zoomWindowScaleFactor}
-              primaryImagePosition={primaryImagePosition}
-              offset={zoomWindowOffset}
-            />
-          )}
-        </div>
-      </div>
-
-      {/* Mobile carousel - only visible on mobile */}
-      <MobileImageCarousel
-        images={images}
-        currentIndex={safeIndex}
-        width={width}
-        height={height}
-        onChangeIndex={handleSelect}
-      />
-
-      {/* Desktop thumbnail grid - hidden on mobile */}
-      <div className="hidden md:block">
-        {images.length <= 3 ? (
-          <div
-            className="flex justify-center gap-4"
-            style={{ width: "100%", maxWidth: width }}
-            aria-label="Product image thumbnails"
-          >
-            {(images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-              (img, i) => (
-                <div key={img.src + i} style={{ maxWidth: "115px" }}>
-                  <Thumbnail
-                    src={img.src}
-                    alt={img.alt || `Thumbnail ${i + 1}`}
-                    isActive={i === safeIndex}
-                    onClick={() => handleSelect(i)}
-                    isPlaceholder={images.length === 0}
-                  />
-                </div>
-              ),
-            )}
-          </div>
-        ) : (
-          <Grid
-            sizing="layout-group"
-            aria-label="Product image thumbnails"
-            style={{
-              width: "100%",
-              maxWidth: width,
-            }}
-            columns={
-              thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow
-            }
-          >
-            {(images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-              (img, i) => (
-                <Thumbnail
-                  key={img.src + i}
-                  src={img.src}
-                  alt={img.alt || `Thumbnail ${i + 1}`}
-                  isActive={i === safeIndex}
-                  onClick={() => handleSelect(i)}
-                  isPlaceholder={images.length === 0}
-                />
-              ),
-            )}
-          </Grid>
-        )}
-      </div>
-
-      {/* Mobile carousel pagination - only visible on mobile */}
-      <CarouselPagination
-        images={images}
-        currentIndex={safeIndex}
-        onSelect={handleSelect}
-      />
-    </Stack>
-  );
-}

package/src/components/ProductImagePreview/useProductImagePreview.ts

@@ -1,211 +0,0 @@
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import type { ProductPreviewImage } from ".";
-
-export type UseProductImagePreviewProps = {
-  images: ProductPreviewImage[];
-  currentIndex: number;
-  zoomEnabled?: boolean;
-  zoomFactor?: number;
-  scrollToZoomEnabled?: boolean;
-  onChangeIndex: (next: number) => void;
-  isMobile?: boolean;
-};
-
-export type UseProductImagePreviewReturn = {
-  // State
-  zoomPoint: {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    lensSize: number;
-  } | null;
-  zoomActive: boolean;
-  currentZoomFactor: number;
-  primaryImagePosition: DOMRect | null;
-  hasImages: boolean;
-  safeIndex: number;
-  active: ProductPreviewImage | undefined;
-
-  // Refs
-  primaryImageRef: React.RefObject<HTMLDivElement | null>;
-
-  // Handlers
-  handleSelect: (idx: number) => void;
-  handleZoomPositionChange: (
-    p: {
-      x: number;
-      y: number;
-      w: number;
-      h: number;
-      lensSize: number;
-    } | null,
-    active: boolean,
-  ) => void;
-  handleScrollZoom: (delta: number) => void;
-  handleNext: () => void;
-  handlePrevious: () => void;
-};
-
-/**
- * Custom hook for managing product image preview logic including zoom, navigation, and mobile behavior
- */
-export function useProductImagePreview(
-  props: UseProductImagePreviewProps,
-): UseProductImagePreviewReturn {
-  const {
-    images,
-    currentIndex,
-    zoomEnabled = false,
-    zoomFactor = 2,
-    scrollToZoomEnabled = false,
-    onChangeIndex,
-    isMobile = false,
-  } = props;
-
-  // Derived state
-  const hasImages = !!images?.length;
-  const safeIndex =
-    hasImages && currentIndex >= 0 && currentIndex < images.length
-      ? currentIndex
-      : 0;
-
-  // Memoize active image to prevent unnecessary re-renders
-  const active = useMemo(() => {
-    return hasImages ? images[safeIndex] : undefined;
-  }, [hasImages, images, safeIndex]);
-
-  // Zoom state
-  const [zoomPoint, setZoomPoint] = useState<{
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    lensSize: number;
-  } | null>(null);
-  const [zoomActive, setZoomActive] = useState(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = useState(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] =
-    useState<DOMRect | null>(null);
-
-  // Refs
-  const primaryImageRef = useRef<HTMLDivElement>(null);
-  const cleanupRef = useRef<(() => void) | null>(null);
-
-  // Disable zoom functionality on mobile
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-
-  // Track primary image position for zoom window
-  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]);
-
-  // Navigation handlers
-  const handleSelect = useCallback(
-    (idx: number) => {
-      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]);
-
-  // Zoom handlers
-  const handleZoomPositionChange = useCallback(
-    (p: typeof zoomPoint, active: boolean) => {
-      // Only allow zoom on non-mobile devices
-      if (isMobile) return;
-      setZoomPoint(p);
-      setZoomActive(active);
-    },
-    [isMobile],
-  );
-
-  const handleScrollZoom = useCallback(
-    (delta: number) => {
-      if (!effectiveScrollToZoomEnabled) return;
-
-      // Calculate new zoom factor with bounds (1x to 5x)
-      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
-      setCurrentZoomFactor(newZoomFactor);
-    },
-    [effectiveScrollToZoomEnabled, currentZoomFactor],
-  );
-
-  // Reset zoom factor when base zoom factor changes
-  useEffect(() => {
-    setCurrentZoomFactor(zoomFactor);
-  }, [zoomFactor]);
-
-  return {
-    // State
-    zoomPoint,
-    zoomActive,
-    currentZoomFactor,
-    primaryImagePosition,
-    hasImages,
-    safeIndex,
-    active,
-
-    // Refs
-    primaryImageRef,
-
-    // Handlers
-    handleSelect,
-    handleZoomPositionChange,
-    handleScrollZoom,
-    handleNext,
-    handlePrevious,
-  };
-}

package/src/components/ProjectBar.tsx

@@ -1,82 +0,0 @@
-import clsx from "clsx";
-import { ComponentProps, ReactNode } from "react";
-import {
-  containerPaddingX,
-  layoutGap,
-  layoutGroupGap,
-  paddingYUsingLayoutGroupGap,
-} from "../classNames";
-import { useMatchesMobile } from "../hooks";
-
-type ProjectBarProps = {
-  left: ReactNode;
-  right: ReactNode;
-  mobileLeft: ReactNode;
-  mobileRight: ReactNode;
-  id?: string;
-  testid?: string;
-};
-
-export const ProjectBar = ({
-  left,
-  right,
-  mobileLeft,
-  mobileRight,
-  id,
-  testid,
-}: ComponentProps<"div"> & ProjectBarProps) => {
-  const isMobile = useMatchesMobile();
-
-  const tokenOverrides = isMobile
-    ? {
-        "--color-background-primary-normal": "var(--color-brand-400)",
-        "--color-background-action-primary-normal": "var(--color-neutral-000)",
-        "--color-background-action-primary-hover": "var(--color-critical-100)",
-        "--color-background-action-primary-active": "var(--color-neutral-200)",
-        "--color-background-action-secondary-normal": "var(--color-brand-400)",
-        "--color-background-action-secondary-hover":
-          "var(--color-critical-100)",
-
-        "--color-text-on-action-primary-normal": "var(--color-brand-400)",
-        "--color-text-primary-normal": "var(--color-neutral-000)",
-        "--color-text-action-primary-normal": "var(--color-neutral-000)",
-        "--color-text-action-primary-hover": "var(--color-critical-500)",
-        "--color-text-action-primary-active": "var(--color-critical-300)",
-
-        "--color-border-action-normal": "var(--color-neutral-000)",
-        "--color-border-action-hover": "var(--color-critical-500)",
-        "--color-border-action-active": "var(--color-critical-300)",
-      }
-    : {};
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      style={{ ...tokenOverrides } as React.CSSProperties}
-      className={clsx(
-        "flex items-center justify-between",
-        "bg-background-primary-normal",
-        paddingYUsingLayoutGroupGap,
-        containerPaddingX,
-        layoutGap,
-      )}
-    >
-      <div className={clsx("hidden desktop:block flex-1 leading-[1]")}>
-        {left}
-      </div>
-
-      <div className={clsx("hidden desktop:flex items-center", layoutGroupGap)}>
-        {right}
-      </div>
-
-      <div className={clsx("flex flex-col desktop:hidden")}>{mobileLeft}</div>
-
-      <div className={clsx("flex items-center desktop:hidden", layoutGroupGap)}>
-        {mobileRight}
-      </div>
-    </div>
-  );
-};
-
-ProjectBar.displayName = "ProjectBar";

package/src/components/Radio.tsx

@@ -1,146 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { ComponentProps } from "react";
-import { baseTransition, componentGap } from "../classNames";
-import { Paragraph } from "./Paragraph";
-import { TextColorTokens } from "../types";
-
-interface RadioProps
-  extends Omit<
-    ComponentProps<"input">,
-    "type" | "children" | "dangerouslySetInnerHTML"
-  > {
-  label?: string;
-  error?: boolean;
-  readOnly?: boolean;
-  testid?: string;
-}
-
-export const Radio = ({
-  className,
-  label,
-  error,
-  disabled,
-  checked,
-  readOnly,
-  id,
-  testid,
-  ...props
-}: RadioProps) => {
-  const radioId = id;
-
-  const paragraphColor: TextColorTokens = 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 (
-    <label
-      htmlFor={radioId}
-      data-testid={testid}
-      className={clsx(
-        "flex items-center",
-        componentGap,
-        disabled ? "cursor-default" : "cursor-pointer",
-        className,
-      )}
-    >
-      <div className="relative">
-        <input
-          id={radioId}
-          data-testid={testid ? `${testid}-input` : undefined}
-          type="radio"
-          className="sr-only peer"
-          disabled={disabled}
-          checked={checked}
-          readOnly={readOnly}
-          {...props}
-        />
-        <div
-          className={clsx(
-            "size-6 rounded-full border flex items-center justify-center",
-            baseTransition,
-            defaultClassName,
-            errorClassName,
-            disabledClassName,
-            readonlyClassName,
-          )}
-        >
-          {checked && (
-            <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",
-              )}
-            />
-          )}
-        </div>
-      </div>
-
-      {label && (
-        <Paragraph id={radioId ? `${radioId}-label` : undefined} testid={testid ? `${testid}-label` : undefined} padded color={paragraphColor}>
-          {label}
-        </Paragraph>
-      )}
-    </label>
-  );
-};
-
-Radio.displayName = "Radio";
-
-const RadioIcon = ({ className }: { className: string }) => {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <rect
-        x="1"
-        y="1"
-        width="22"
-        height="22"
-        rx="11"
-        stroke="currentColor"
-        strokeWidth="2"
-      />
-      <rect x="4" y="4" width="16" height="16" rx="8" fill="currentColor" />
-    </svg>
-  );
-};
-
-RadioIcon.displayName = "RadioIcon";