@dmsi/wedgekit-react 0.0.441 → 0.0.443

package/dist/index.css

@@ -647,9 +647,6 @@
   .mr-auto {
     margin-right: auto;
   }
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -756,9 +753,6 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-\[24px\] {
-    height: 24px;
-  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -1848,10 +1842,6 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-neutral-100 {
-    --tw-gradient-from: var(--color-neutral-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-neutral-300\/\[12\%\] {
     --tw-gradient-from: color-mix(in srgb, #c1c1c1 12%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1863,10 +1853,6 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-\[\#f7f7f7\] {
-    --tw-gradient-to: #f7f7f7;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-neutral-300\/\[24\%\] {
     --tw-gradient-to: color-mix(in srgb, #c1c1c1 24%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4652,6 +4638,29 @@
   --color-background-action-critical-secondary-disabled: var( --color-neutral-200 );
   --color-background-brand-normal: var( --color-brand-400 );
 }
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: #f7f7f7;
+}
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      rgba(255, 255, 255, 0) 100%);
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text-primary-normal: var(--color-neutral-000);

package/package.json

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

package/src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx

@@ -8,7 +8,7 @@ export function MobileDataGridColumn<T extends Record<string, unknown>>(props: {
   const { column, data } = props;
 
   return (
-    <div className="mb-2 grid grid-cols-2 gap-2 px-3 flex-1">
+    <div className="grid grid-cols-2 gap-2 px-3 flex-1">
       <Paragraph color="text-secondary-normal" className="text-left">
         {column.header?.toString()}:
       </Paragraph>{" "}

package/src/components/MobileDataGrid/MobileDataGridCard/index.tsx

@@ -95,7 +95,7 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
               column.id ? (
                 <div
                   key={`${column.id}-${index}`}
-                  className="mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1"
+                  className="grid grid-cols-2 gap-2 px-3 items-center flex-1"
                 >
                   <Paragraph
                     color="text-secondary-normal"

package/src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx

@@ -18,7 +18,7 @@ export function ModalContent() {
           column.id ? (
             <div
               key={`${column.id}-${index}`}
-              className="mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1"
+              className="grid grid-cols-2 gap-2 px-3 items-center flex-1"
             >
               <Paragraph color="text-secondary-normal" className="text-left">
                 {column.header?.toString()}:

package/src/components/ProductImagePreview/ProductPrimaryImage.tsx

@@ -1,8 +1,8 @@
 import { useRef, useState, useCallback, useMemo, useEffect } from "react";
 import type { CSSProperties } from "react";
-import { Spinner } from "../Spinner";
 import type { ProductPreviewImage } from "./index";
-import { ImagePlaceholder } from "../ImagePlaceholder";
+
+const placeholderImageUri = "/placeholder.svg";
 
 export type ProductPrimaryImageProps = {
   image?: ProductPreviewImage;
@@ -44,8 +44,6 @@ export function ProductPrimaryImage({
   const rafRef = useRef<number | null>(null);
   const [active, setActive] = useState(false);
   const [, forceRerender] = useState(0);
-  const [imageLoading, setImageLoading] = useState(true);
-  const [imageError, setImageError] = useState(false);
 
   // Memoize image src to prevent unnecessary re-requests
   const imageSrc = useMemo(() => image?.src, [image?.src]);
@@ -83,7 +81,8 @@ export function ProductPrimaryImage({
     React.PointerEventHandler<HTMLDivElement>
   >(
     (e) => {
-      if (!zoomEnabled || !active || imageError) return;
+      if (isPlaceholder) return;
+      if (!zoomEnabled || !active) return;
 
       // Ignore touch events to prevent zoom on mobile
       if (e.pointerType === "touch") return;
@@ -123,7 +122,7 @@ export function ProductPrimaryImage({
         true,
       );
     },
-    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange],
+    [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange],
   );
 
   // Set up non-passive wheel event listener to properly prevent default
@@ -149,12 +148,16 @@ export function ProductPrimaryImage({
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
 
-  useEffect(() => {
-    setImageLoading(true);
-    setImageError(false);
-  }, [image]);
-
-  if (!image && !isPlaceholder) return null;
+  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;
+    },
+    [],
+  );
 
   const pt = lastPointRef.current;
   let lensStyle: CSSProperties | undefined;
@@ -190,28 +193,15 @@ export function ProductPrimaryImage({
       onPointerLeave={handlePointerLeave}
       onPointerMove={handlePointerMove}
     >
-      {imageLoading && !imageError && !isPlaceholder && (
-        <div className="absolute inset-0 flex items-center justify-center bg-neutral-50">
-          <Spinner size="small" />
-        </div>
-      )}
-      {isPlaceholder ? (
-        <ImagePlaceholder width={width} height={height} />
-      ) : (
-        <img
-          key={imageSrc}
-          src={imageError ? "/placeholder.svg" : imageSrc}
-          alt={image?.alt || "Product image"}
-          className="object-cover min-w-full min-h-full select-none"
-          draggable={false}
-          loading="lazy"
-          onLoad={() => setImageLoading(false)}
-          onError={() => {
-            setImageLoading(false);
-            setImageError(true);
-          }}
-        />
-      )}
+      <img
+        key={imageSrc}
+        src={imageSrc ?? placeholderImageUri}
+        alt={image?.alt || "Product image"}
+        className="object-cover min-w-full min-h-full select-none"
+        draggable={false}
+        loading="lazy"
+        onError={handleImgError}
+      />
       {zoomEnabled && active && lensStyle && (
         <div
           aria-hidden

package/src/components/SkeletonParagraph.tsx

@@ -1,5 +1,23 @@
-export function SkeletonParagraph() {
+interface SkeletonParagraphProps {
+  /** Optional custom class names to further style/size the skeleton */
+  className?: string;
+  /** Height of the skeleton (tailwind height utility), defaults to h-6 */
+  heightClassName?: string;
+}
+
+/**
+ * A shimmering paragraph skeleton placeholder.
+ * Provides an animated left-to-right shimmer to indicate loading text content.
+ */
+export function SkeletonParagraph({
+  className = "",
+  heightClassName = "h-6",
+}: SkeletonParagraphProps) {
   return (
-    <div className="h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 "></div>
+    <div
+      aria-label="Loading content"
+      role="status"
+      className={`skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`}
+    />
   );
 }

package/src/index.css

@@ -634,6 +634,33 @@
   ); /* Created for Main Navigation */
 }
 
+/* Skeleton / Shimmer */
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: theme("colors.neutral.100");
+}
+
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 @import "./darkmode.css";
 @import "./brand.css";
 

package/dist/chunk-ESCNCQGI.js

@@ -1,9 +0,0 @@
-// src/components/SkeletonParagraph.tsx
-import { jsx } from "react/jsx-runtime";
-function SkeletonParagraph() {
-  return /* @__PURE__ */ jsx("div", { className: "h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 " });
-}
-
-export {
-  SkeletonParagraph
-};