@dmsi/wedgekit-react 0.0.415 → 0.0.418

package/dist/index.css

@@ -668,6 +668,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .box-content {
+    box-sizing: content-box;
+  }
   .block {
     display: block;
   }
@@ -980,6 +983,9 @@
   .cursor-grab {
     cursor: grab;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1058,6 +1064,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -1268,6 +1277,10 @@
     border-inline-style: var(--tw-border-style);
     border-inline-width: 0px;
   }
+  .border-x-1 {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -1284,6 +1297,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
+  .border-r-1 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1292,6 +1309,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-1 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -1869,6 +1890,9 @@
   .\!p-0 {
     padding: calc(var(--spacing) * 0) !important;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
   }
@@ -1983,12 +2007,33 @@
   .pt-\[7px\] {
     padding-top: 7px;
   }
+  .pt-mobile-component-padding {
+    padding-top: var(--spacing-mobile-component-padding);
+  }
+  .pt-mobile-container-padding {
+    padding-top: var(--spacing-mobile-container-padding);
+  }
+  .pt-mobile-layout-padding {
+    padding-top: var(--spacing-mobile-layout-padding);
+  }
+  .pr-mobile-component-padding {
+    padding-right: var(--spacing-mobile-component-padding);
+  }
+  .pr-mobile-container-padding {
+    padding-right: var(--spacing-mobile-container-padding);
+  }
+  .pr-mobile-layout-padding {
+    padding-right: var(--spacing-mobile-layout-padding);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
   .pb-mobile-component-padding {
     padding-bottom: var(--spacing-mobile-component-padding);
   }
+  .pb-mobile-container-padding {
+    padding-bottom: var(--spacing-mobile-container-padding);
+  }
   .pb-mobile-layout-padding {
     padding-bottom: var(--spacing-mobile-layout-padding);
   }
@@ -2010,6 +2055,12 @@
   .pl-mobile-component-padding {
     padding-left: var(--spacing-mobile-component-padding);
   }
+  .pl-mobile-container-padding {
+    padding-left: var(--spacing-mobile-container-padding);
+  }
+  .pl-mobile-layout-padding {
+    padding-left: var(--spacing-mobile-layout-padding);
+  }
   .text-center {
     text-align: center;
   }
@@ -2230,6 +2281,9 @@
   .text-text-action-normal {
     color: var(--color-text-action-normal);
   }
+  .text-text-action-primary-disabled {
+    color: var(--color-text-action-primary-disabled);
+  }
   .text-text-action-primary-normal {
     color: var(--color-text-action-primary-normal);
   }
@@ -2308,6 +2362,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -3047,6 +3104,13 @@
       }
     }
   }
+  .hover\:bg-background-grouped-secondary-normal {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-grouped-secondary-normal);
+      }
+    }
+  }
   .hover\:\!text-brand-text-on-action-primary-hover {
     &:hover {
       @media (hover: hover) {
@@ -3193,6 +3257,11 @@
       background-color: var(--color-background-action-secondary-hover);
     }
   }
+  .focus\:bg-background-grouped-secondary-normal {
+    &:focus {
+      background-color: var(--color-background-grouped-secondary-normal);
+    }
+  }
   .focus\:text-text-action-critical-hover {
     &:focus {
       color: var(--color-text-action-critical-hover);
@@ -3403,6 +3472,11 @@
       pointer-events: none;
     }
   }
+  .disabled\:cursor-default {
+    &:disabled {
+      cursor: default;
+    }
+  }
   .disabled\:\!border-border-primary-normal {
     &:disabled {
       border-color: var(--color-border-primary-normal) !important;
@@ -3709,11 +3783,6 @@
       width: 100%;
     }
   }
-  .sm\:grid-cols-2 {
-    @media (width >= 320px) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
   .md\:block {
     @media (width >= 768px) {
       display: block;
@@ -3744,66 +3813,6 @@
       gap: calc(var(--spacing) * 2);
     }
   }
-  .lg\:grid-cols-4 {
-    @media (width >= 1024px) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-4 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-5 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-6 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-8 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-6 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-7 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-8 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-9 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-10 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-11 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-12 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }
   .compact\:mt-desktop-compact-component-gap {
     &:where([data-compact]) {
       margin-top: var(--spacing-desktop-compact-component-gap);
@@ -3909,11 +3918,46 @@
       padding-block: var(--spacing-desktop-compact-layout-padding);
     }
   }
+  .compact\:pt-desktop-compact-component-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-component-padding);
+    }
+  }
+  .compact\:pt-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pt-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-component-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-component-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
   .compact\:pb-desktop-compact-component-padding {
     &:where([data-compact]) {
       padding-bottom: var(--spacing-desktop-compact-component-padding);
     }
   }
+  .compact\:pb-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-bottom: var(--spacing-desktop-compact-container-padding);
+    }
+  }
   .compact\:pb-desktop-compact-layout-padding {
     &:where([data-compact]) {
       padding-bottom: var(--spacing-desktop-compact-layout-padding);
@@ -3924,6 +3968,16 @@
       padding-left: var(--spacing-desktop-compact-component-padding);
     }
   }
+  .compact\:pl-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-left: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pl-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-left: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
   .compact\:text-caption-desktop-compact {
     &:where([data-compact]) {
       font-size: var(--text-caption-desktop-compact);
@@ -4095,6 +4149,11 @@
       flex-grow: 0;
     }
   }
+  .desktop\:grid-cols-4 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
   .desktop\:flex-col {
     @container root (width >= 48rem) {
       flex-direction: column;
@@ -4230,16 +4289,51 @@
       padding-block: var(--spacing-desktop-layout-padding);
     }
   }
+  .desktop\:pt-desktop-component-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-component-padding);
+    }
+  }
+  .desktop\:pt-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-container-padding);
+    }
+  }
   .desktop\:pt-desktop-layout-gap {
     @container root (width >= 48rem) {
       padding-top: var(--spacing-desktop-layout-gap);
     }
   }
+  .desktop\:pt-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-layout-padding);
+    }
+  }
+  .desktop\:pr-desktop-component-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-component-padding);
+    }
+  }
+  .desktop\:pr-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-container-padding);
+    }
+  }
+  .desktop\:pr-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-layout-padding);
+    }
+  }
   .desktop\:pb-desktop-component-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-component-padding);
     }
   }
+  .desktop\:pb-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-bottom: var(--spacing-desktop-container-padding);
+    }
+  }
   .desktop\:pb-desktop-layout-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-layout-padding);
@@ -4250,6 +4344,16 @@
       padding-left: var(--spacing-desktop-component-padding);
     }
   }
+  .desktop\:pl-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-left: var(--spacing-desktop-container-padding);
+    }
+  }
+  .desktop\:pl-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-left: var(--spacing-desktop-layout-padding);
+    }
+  }
   .desktop\:text-caption-desktop {
     @container root (width >= 48rem) {
       font-size: var(--text-caption-desktop);

package/package.json

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

package/src/components/Card.tsx

@@ -7,17 +7,75 @@ export function Card(
     selected?: boolean;
     testid?: string;
     as?: Tags;
+    /**
+     * When true applies both horizontal and vertical padding using layout spacing tokens.
+     * If none of padding / paddingX / paddingY are provided the original desktop-only padding class is applied for backward compatibility.
+     */
+    padding?: boolean;
+    /** Horizontal only padding (overrides padding for X axis if both supplied). */
+    paddingX?: boolean;
+    /** Vertical only padding (overrides padding for Y axis if both supplied). */
+    paddingY?: boolean;
+    /** Bottom only padding */
+    paddingBottom?: boolean;
+    /** Top only padding */
+    paddingTop?: boolean;
+    /** Left only padding */
+    paddingLeft?: boolean;
+    /** Right only padding */
+    paddingRight?: boolean;
   },
 ) {
-  const { children, selected, testid, ...rest } = props;
+  const {
+    children,
+    selected,
+    testid,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
+    ...rest
+  } = props;
 
   const CardComponent = props.as || "div";
+  const anyPaddingPropSpecified =
+    padding !== undefined ||
+    paddingX !== undefined ||
+    paddingY !== undefined ||
+    paddingBottom !== undefined ||
+    paddingTop !== undefined ||
+    paddingLeft !== undefined ||
+    paddingRight !== undefined;
+
+  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 (
     <CardComponent
       {...rest}
       data-testid={testid}
       className={clsx(
-        "rounded-sm p-desktop-layout-padding",
+        "rounded-sm",
+        paddingClasses,
         selected
           ? "border-2 border-border-primary-focus"
           : "border border-border-primary-normal",

package/src/components/CompactImagesPreview.tsx

@@ -9,12 +9,18 @@ type CompactImagesPreviewProps = {
   sources: ImageSource[];
   currentSourceIndex: number;
   placeholderImageUri?: string;
+  /**
+   * Optional alt text to use when falling back to the placeholder image due to an image load error
+   * or when there are no valid sources. Defaults to "placeholder image".
+   */
+  placeholderAlt?: string;
   activeImageWidth?: number | string;
   activeImageHeight?: number | string;
   thumbnailWidth?: number;
   thumbnailHeight?: number;
   enableThumbnailBorder?: boolean;
   onChangeSource: (newIndex: number) => void;
+  onMainImageClick?: () => void;
 };
 export function CompactImagesPreview(props: CompactImagesPreviewProps) {
   const {
@@ -26,11 +32,25 @@ export function CompactImagesPreview(props: CompactImagesPreviewProps) {
     thumbnailHeight = 30,
     enableThumbnailBorder = false,
     placeholderImageUri,
+    placeholderAlt = "placeholder image",
     onChangeSource,
+    onMainImageClick,
   } = props;
   const isMobile = useMatchesMobile();
   const imagesCount = sources.length;
 
+  const handleImgError = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement>) => {
+      if (!placeholderImageUri) return;
+      const img = e.currentTarget;
+      // Prevent infinite loop if placeholder also 404s
+      if (img.src === placeholderImageUri) return;
+      img.src = placeholderImageUri;
+      if (!img.alt) img.alt = placeholderAlt;
+    },
+    [placeholderImageUri, placeholderAlt],
+  );
+
   const handleThumbnailClick = useCallback(
     (newIndex: number) => {
       if (newIndex === currentSourceIndex) return;
@@ -55,13 +75,16 @@ export function CompactImagesPreview(props: CompactImagesPreviewProps) {
           objectFit: "cover",
         }}
         src={placeholderImageUri}
-        alt={"placeholder image"}
+        alt={placeholderAlt}
+        onError={handleImgError}
+        onClick={onMainImageClick}
       />
     );
   const currentSource = sources[currentSourceIndex];
   return (
     <Stack sizing="layout">
       <img
+        className={clsx("object-center", onMainImageClick && "cursor-pointer")}
         style={{
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
@@ -70,37 +93,38 @@ export function CompactImagesPreview(props: CompactImagesPreviewProps) {
         }}
         src={currentSource.uri}
         alt={currentSource.name}
+        onError={handleImgError}
+        onClick={onMainImageClick}
       />
-      {sources.length > 1 && (
-        <div className="flex flex-row flex-wrap items-center gap-3">
-          {sources.map((source, index) => (
-            <button
-              key={`compact-image-${source.uri}-${index}`}
-              onClick={(e) => {
-                e.preventDefault();
-                handleThumbnailClick(index);
+      <div className="flex flex-row flex-wrap items-center gap-3">
+        {sources.slice(0, 4).map((source, index) => (
+          <button
+            key={`compact-image-${source.uri}-${index}`}
+            onClick={(e) => {
+              e.preventDefault();
+              handleThumbnailClick(index);
+            }}
+            className={clsx(
+              "cursor-pointer",
+              currentSourceIndex === index && enableThumbnailBorder
+                ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300"
+                : "ring-brand-400/0",
+            )}
+          >
+            <img
+              src={source.uri}
+              alt={source.name}
+              style={{
+                width: thumbnailWidth,
+                height: thumbnailHeight,
+                objectPosition: "center",
+                objectFit: "cover",
               }}
-              className={clsx(
-                "cursor-pointer",
-                currentSourceIndex === index && enableThumbnailBorder
-                  ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300"
-                  : "ring-brand-400/0",
-              )}
-            >
-              <img
-                src={source.uri}
-                alt={source.name}
-                style={{
-                  width: thumbnailWidth,
-                  height: thumbnailHeight,
-                  objectPosition: "center",
-                  objectFit: "cover",
-                }}
-              />
-            </button>
-          ))}
-        </div>
-      )}
+              onError={handleImgError}
+            />
+          </button>
+        ))}
+      </div>
     </Stack>
   );
 }