@dmsi/wedgekit-react 0.0.387 → 0.0.389

package/dist/components/index.js

@@ -1,27 +1,27 @@
 import {
   DataGrid,
   MobileDataGrid
-} from "../chunk-2T2GISEG.js";
+} from "../chunk-OW3WN3JV.js";
 import "../chunk-M7INAUAJ.js";
-import "../chunk-F4CV7SBS.js";
-import "../chunk-3XOYPT5O.js";
+import "../chunk-6I5LZ2ZC.js";
+import "../chunk-44TDIHUP.js";
 import {
   ProductImagePreview
-} from "../chunk-A7CEYUVE.js";
-import "../chunk-CQFPNZTN.js";
-import "../chunk-HPQWEZJL.js";
+} from "../chunk-LZGYABCX.js";
+import "../chunk-G5DEC7H3.js";
+import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
 import {
   PDFViewer
-} from "../chunk-GNHKKYCY.js";
+} from "../chunk-LLZ3SSZJ.js";
 import "../chunk-EJSPFQCY.js";
-import "../chunk-DCCTNHNL.js";
-import "../chunk-PH76F7QS.js";
+import "../chunk-ERW5DEIO.js";
+import "../chunk-2HMCS25C.js";
 import "../chunk-VJVY6NPF.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
-import "../chunk-2FADUKPP.js";
-import "../chunk-R4SFLYOZ.js";
+import "../chunk-AA6GE3TH.js";
+import "../chunk-KZZKQLKF.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
 import "../chunk-M6TSTDNZ.js";
@@ -48,7 +48,7 @@ import {
 } from "../chunk-NO5BIKWS.js";
 import {
   CompactImagesPreview
-} from "../chunk-FSLETAX4.js";
+} from "../chunk-MQX7GFLX.js";
 import {
   DataCellHeader,
   DataGridCell,
@@ -81,11 +81,11 @@ import {
 } from "../chunk-FA7IFW66.js";
 import {
   Accordion
-} from "../chunk-TPXHOAY3.js";
+} from "../chunk-JIMJIJOF.js";
 import {
   Card
-} from "../chunk-4LXG6QNT.js";
-import "../chunk-MX57T3HP.js";
+} from "../chunk-EZCH4PQS.js";
+import "../chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "../chunk-OGIFIPKH.js";

package/dist/index.css

@@ -801,6 +801,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-min {
     min-height: min-content;
   }
@@ -3572,6 +3575,21 @@
       outline-style: none;
     }
   }
+  .data-active\:border-transparent {
+    &[data-active] {
+      border-color: transparent;
+    }
+  }
+  .data-active\:bg-background-action-primary-normal {
+    &[data-active] {
+      background-color: var(--color-background-action-primary-normal);
+    }
+  }
+  .data-active\:text-white {
+    &[data-active] {
+      color: var(--color-white);
+    }
+  }
   .data-disabled\:cursor-default {
     &[data-disabled] {
       cursor: default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.387",
+  "version": "0.0.389",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Card.tsx

@@ -1,19 +1,30 @@
 import clsx from "clsx";
 import { HTMLProps } from "react";
 
-export function Card(props: HTMLProps<HTMLDivElement> & { selected?: boolean; testid?: string; }) {
+type Tags = "a" | "div" | React.ElementType;
+export function Card(
+  props: HTMLProps<HTMLDivElement | HTMLAnchorElement> & {
+    selected?: boolean;
+    testid?: string;
+    as?: Tags;
+  },
+) {
   const { children, selected, testid, ...rest } = props;
+
+  const CardComponent = props.as || "div";
   return (
-    <div
+    <CardComponent
       {...rest}
       data-testid={testid}
       className={clsx(
         "rounded-sm p-desktop-layout-padding",
-        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
+        selected
+          ? "border-2 border-border-primary-focus"
+          : "border border-border-primary-normal",
         rest.className,
       )}
     >
       {children}
-    </div>
+    </CardComponent>
   );
 }

package/src/components/CompactImagesPreview.tsx

@@ -9,8 +9,8 @@ type CompactImagesPreviewProps = {
   sources: ImageSource[];
   currentSourceIndex: number;
   placeholderImageUri?: string;
-  activeImageWidth?: number;
-  activeImageHeight?: number;
+  activeImageWidth?: number | string;
+  activeImageHeight?: number | string;
   thumbnailWidth?: number;
   thumbnailHeight?: number;
   enableThumbnailBorder?: boolean;
@@ -48,7 +48,12 @@ export function CompactImagesPreview(props: CompactImagesPreviewProps) {
     return (
       <img
         className="object-center"
-        style={{ width: activeImageWidth, height: activeImageHeight }}
+        style={{
+          width: activeImageWidth,
+          height: activeImageHeight,
+          objectPosition: "center",
+          objectFit: "cover",
+        }}
         src={placeholderImageUri}
         alt={"placeholder image"}
       />
@@ -61,6 +66,7 @@ export function CompactImagesPreview(props: CompactImagesPreviewProps) {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
           objectPosition: "center",
+          objectFit: "cover",
         }}
         src={currentSource.uri}
         alt={currentSource.name}
@@ -88,6 +94,7 @@ export function CompactImagesPreview(props: CompactImagesPreviewProps) {
                   width: thumbnailWidth,
                   height: thumbnailHeight,
                   objectPosition: "center",
+                  objectFit: "cover",
                 }}
               />
             </button>

package/src/components/OptionPill.tsx

@@ -19,6 +19,7 @@ type OptionPillProps = {
   onRemove?: () => void;
   removable?: boolean;
   disabled?: boolean;
+  active?: boolean;
 };
 
 export const OptionPill = ({
@@ -28,6 +29,7 @@ export const OptionPill = ({
   onClick,
   onRemove,
   removable = false,
+  active = false,
   disabled = false,
   children,
   className,
@@ -36,18 +38,28 @@ export const OptionPill = ({
   const additionalAttributes = {
     "data-disabled": disabled || null,
     "data-selected": selected || null,
+    "data-active": active || null,
   };
 
   const classNames = clsx(
     {
+      // Base interactive (only when not disabled)
       "hover:border-border-action-hover active:border-border-action-active":
         !disabled,
+
+      // Disabled base
       "data-disabled:cursor-default data-disabled:border-border-primary-normal":
         disabled,
 
+      // Active (Figma: filled blue background, white text)
+      "data-active:bg-background-action-primary-normal data-active:text-white data-active:border-transparent":
+        active && !selected,
+
+      // Selected (filled style) overrides background & border, but keeps outline interaction chain.
       "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active":
         selected,
 
+      // Disabled + Selected combination
       "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent":
         disabled && selected,
     },
@@ -101,7 +113,7 @@ export const OptionPill = ({
           )}
           iconOnly
           variant="tertiary"
-          leftIcon={<Icon name="close" />}
+          leftIcon={<Icon name="close" size={16} />}
         />
       )}
     </div>

package/src/components/ProductImagePreview/ProductPrimaryImage.tsx

@@ -83,7 +83,7 @@ export function ProductPrimaryImage({
     React.PointerEventHandler<HTMLDivElement>
   >(
     (e) => {
-      if (!zoomEnabled || !active) return;
+      if (!zoomEnabled || !active || imageError) return;
 
       // Ignore touch events to prevent zoom on mobile
       if (e.pointerType === "touch") return;
@@ -123,7 +123,7 @@ export function ProductPrimaryImage({
         true,
       );
     },
-    [zoomEnabled, active, onZoomPositionChange, zoomLensSize],
+    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange],
   );
 
   // Set up non-passive wheel event listener to properly prevent default
@@ -149,6 +149,11 @@ export function ProductPrimaryImage({
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
 
+  useEffect(() => {
+    setImageLoading(true);
+    setImageError(false);
+  }, [image]);
+
   if (!image && !isPlaceholder) return null;
 
   const pt = lastPointRef.current;
@@ -174,7 +179,13 @@ export function ProductPrimaryImage({
         zoomEnabled ? "cursor-crosshair" : "",
         className,
       ].join(" ")}
-      style={{ maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" }}
+      style={{
+        maxWidth: width,
+        maxHeight: height,
+        minWidth: width,
+        minHeight: height,
+        aspectRatio: "1 / 1",
+      }}
       onPointerEnter={handlePointerEnter}
       onPointerLeave={handlePointerLeave}
       onPointerMove={handlePointerMove}
@@ -189,9 +200,9 @@ export function ProductPrimaryImage({
       ) : (
         <img
           key={imageSrc}
-          src={imageSrc}
+          src={imageError ? "/placeholder.svg" : imageSrc}
           alt={image?.alt || "Product image"}
-          className="object-cover w-full h-full select-none"
+          className="object-cover min-w-full min-h-full select-none"
           draggable={false}
           loading="lazy"
           onLoad={() => setImageLoading(false)}

package/src/components/ProductImagePreview/Thumbnail.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { ImagePlaceholder } from "../ImagePlaceholder";
 
 export type ThumbnailProps = {
@@ -19,6 +20,8 @@ export function Thumbnail({
   onClick,
   isPlaceholder = false,
 }: ThumbnailProps) {
+  const [imageError, setImageError] = useState(false);
+
   return (
     <button
       type="button"
@@ -37,11 +40,14 @@ export function Thumbnail({
         <ImagePlaceholder width={115} height={115} />
       ) : (
         <img
-          src={src}
+          src={imageError ? "/placeholder.svg" : src}
           alt={alt}
           className="object-cover w-full h-full select-none"
           draggable={false}
           loading="lazy"
+          onError={() => {
+            setImageError(true);
+          }}
         />
       )}
     </button>

package/src/components/Stack.tsx

@@ -55,6 +55,7 @@ export interface FlexProps {
   grow?: boolean;
   flexGrow?: string | number;
   flexShrink?: string | number;
+  flexWrap?: "wrap" | "wrap-reverse";
 }
 
 const getFlexClassNames = ({ items, justify, grow }: FlexProps) =>
@@ -126,6 +127,7 @@ export const Stack = ({
   testid,
   bottom,
   zIndex,
+  flexWrap,
   ...props
 }: StackProps) => {
   const flexClassNames = getFlexClassNames({ items, justify, grow });
@@ -182,6 +184,8 @@ export const Stack = ({
         borderBlock: props.style?.borderBlock,
         marginInline: props.style?.marginInline,
         zIndex: zIndex !== undefined ? zIndex : undefined,
+        flexWrap: flexWrap,
+        paddingInline: props.style?.paddingInline,
         gap: props.style?.gap,
       }}
       className={clsx(