@dmsi/wedgekit-react 0.0.494 → 0.0.496

package/dist/components/index.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4091,6 +4100,11 @@
       margin-top: var(--spacing-desktop-container-padding);
     }
   }
+  .desktop\:mt-px {
+    @container root (width >= 48rem) {
+      margin-top: 1px;
+    }
+  }
   .desktop\:mb-desktop-container-padding {
     @container root (width >= 48rem) {
       margin-bottom: var(--spacing-desktop-container-padding);
@@ -4673,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4682,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/index.js

@@ -2,13 +2,16 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-BYY2NTJH.js";
+} from "../chunk-2A7H5GVB.js";
 import "../chunk-M7INAUAJ.js";
 import "../chunk-4Q7T4GJ2.js";
 import "../chunk-3DEYCNUE.js";
 import {
   ProductImagePreview
 } from "../chunk-DYBJUTGK.js";
+import {
+  SearchResultImage
+} from "../chunk-Y5GD2FJA.js";
 import {
   PDFViewer
 } from "../chunk-TPBEID5X.js";
@@ -21,8 +24,8 @@ import "../chunk-BQNPOGD5.js";
 import "../chunk-QMSPTD6L.js";
 import "../chunk-XIXQUEYC.js";
 import "../chunk-5IFPG6TS.js";
-import "../chunk-KW6V7O3H.js";
 import "../chunk-AJ5M6MVX.js";
+import "../chunk-KW6V7O3H.js";
 import "../chunk-JUFBGNWW.js";
 import "../chunk-YEZBNQZI.js";
 import "../chunk-S5ZJ3Q7P.js";
@@ -36,7 +39,7 @@ import {
 } from "../chunk-7BVUTFZ5.js";
 import {
   SkeletonParagraph
-} from "../chunk-ETAEB3TA.js";
+} from "../chunk-L3BXRDLP.js";
 import {
   Pagination
 } from "../chunk-GRGDX7JC.js";
@@ -60,14 +63,14 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-QBSEKZWX.js";
+} from "../chunk-ZKTHUXKS.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";
 import "../chunk-DVU5XV7L.js";
 import {
   MenuOption
-} from "../chunk-IPAKWF2V.js";
+} from "../chunk-5R4C5F63.js";
 import {
   Search
 } from "../chunk-RQRR4FEF.js";
@@ -81,6 +84,7 @@ import "../chunk-WVUIIBRR.js";
 import {
   EmptyCartIcon
 } from "../chunk-75USUR3I.js";
+import "../chunk-BTKWHCUE.js";
 import {
   Checkbox
 } from "../chunk-WEAVZEE4.js";
@@ -142,6 +146,7 @@ export {
   Paragraph,
   ProductImagePreview,
   Search,
+  SearchResultImage,
   Select,
   SimpleTable,
   SkeletonParagraph,

package/dist/index.css

@@ -816,6 +816,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -900,6 +906,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4069,6 +4078,11 @@
       margin-top: var(--spacing-desktop-container-padding);
     }
   }
+  .desktop\:mt-px {
+    @container root (width >= 48rem) {
+      margin-top: 1px;
+    }
+  }
   .desktop\:mb-desktop-container-padding {
     @container root (width >= 48rem) {
       margin-bottom: var(--spacing-desktop-container-padding);
@@ -4651,6 +4665,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4660,9 +4675,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/package.json

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

package/src/components/Caption.tsx

@@ -13,6 +13,7 @@ type CaptionProps = {
   style?: Style["style"];
   id?: string;
   testid?: string;
+  marginTopDesktop?: boolean;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -26,6 +27,7 @@ export const Caption = ({
   align,
   id,
   testid,
+  marginTopDesktop,
   ...props
 }: CaptionProps) => {
   const Element = as;
@@ -54,6 +56,7 @@ export const Caption = ({
           align === "center" && "text-center",
           align === "right" && "text-right",
           className,
+          marginTopDesktop && `desktop:mt-px`,
         )}
         {...props}
         style={{

package/src/components/MenuOption.tsx

@@ -2,13 +2,14 @@
 
 import clsx from "clsx";
 import { PropsWithChildren, ReactNode, RefObject, useId, useRef } from "react";
-import { baseTransition, componentGap, componentPadding } from "../classNames";
+import { baseTransition, componentGap, componentPadding, layoutGroupGap } from "../classNames";
 import { AsProps } from "../types";
 import { Label, Tags } from "./Label";
 import { Paragraph } from "./Paragraph";
 import { Icon } from "./Icon";
 import { MenuPosition } from "./Menu";
 import { useMatchesMobile } from "../hooks";
+import { Caption } from "./Caption";
 
 type BaseProps = PropsWithChildren<{
   id?: string;
@@ -22,6 +23,7 @@ type BaseProps = PropsWithChildren<{
   mobilePositionTo?: RefObject<HTMLElement | null>;
   selected?: boolean;
   currentSubMenuLevel?: number | null;
+  small?: boolean;
 }> &
   (
     | {
@@ -100,7 +102,8 @@ export const MenuOption = ({
   mobilePositionTo,
   highlightMatchingText = false,
   menuValue,
-  onMouseMove
+  onMouseMove,
+  small = false,
 }: MenuOptionProps) => {
   const uniqueId = useId();
   const internalRef = useRef(null);
@@ -186,9 +189,15 @@ export const MenuOption = ({
         {processChildren}
       </Label>
     ) : (
+      !small ? (
       <Paragraph padded className={textLabelStyles}>
         {processChildren}
       </Paragraph>
+      ) : (
+      <Caption padded className={textLabelStyles}>
+        {processChildren}
+      </Caption>
+      )
     );
 
   return (
@@ -198,9 +207,9 @@ export const MenuOption = ({
         data-testid={testid}
         ref={actualRef}
         className={clsx(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
+          "flex cursor-pointer w-full text-left relative outline-none",
           svgStyles,
-          componentGap,
+          small ? layoutGroupGap : componentGap,
           componentPadding,
           baseTransition,
           normalStyles,
@@ -208,6 +217,7 @@ export const MenuOption = ({
           actionStyles,
           actionDisabledStyles,
           disabledStyles,
+          { "items-center": !small },
         )}
         data-value={value || children}
         onClick={() => {
@@ -224,7 +234,7 @@ export const MenuOption = ({
         role="menuitem"
         aria-haspopup={subMenu ? "menu" : undefined}
       >
-        {before && <div className="shrink-0 flex items-center">{before}</div>}
+        {before && <div className={clsx("shrink-0", { "items-center flex": !small })}>{before}</div>}
 
         {renderChildren}
 
@@ -273,7 +283,7 @@ export const MenuOption = ({
         testid={testid ? `${testid}-back` : undefined}
         onClick={() => {
           closeSubMenuLevel?.(currentSubMenuLevel ?? 0);
-        }}
+        }} 
         variant="action"
         before={<Icon name="chevron_left" />}
       >

package/src/components/SearchResultImage/index.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { ImagePlaceholder } from "../ImagePlaceholder";
+
+export type SearchResultImageProps = {
+  width?: number;
+  height?: number;
+  src?: string | null;
+  alt: string;
+  className?: string;
+};
+
+export function SearchResultImage({
+  width = 20,
+  height = 20,
+  src,
+  alt,
+}: SearchResultImageProps) {
+  const [imageError, setImageError] = useState(false);
+
+  const showPlaceholder = imageError || !src;
+
+  return (
+    <>
+      {showPlaceholder ? (
+        <ImagePlaceholder width={width} height={height} />
+      ) : (
+        <img
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          draggable={false}
+          loading="lazy"
+          onError={() => setImageError(true)}
+        />
+      )}
+    </>
+  );
+}

package/src/components/SkeletonParagraph.tsx

@@ -3,6 +3,8 @@ interface SkeletonParagraphProps {
   className?: string;
   /** Height of the skeleton (tailwind height utility), defaults to h-6 */
   heightClassName?: string;
+  /** Size of the skeleton, affects widthClassName */
+  size?: "small" | "medium" | "large";
 }
 
 /**
@@ -12,12 +14,18 @@ interface SkeletonParagraphProps {
 export function SkeletonParagraph({
   className = "",
   heightClassName = "h-6",
+  size = "large",
 }: SkeletonParagraphProps) {
+  const sizeClassMap: Record<string, string> = {
+    small: "min-w-10 w-1/4",
+    medium: "min-w-20 w-1/2",
+    large: "min-w-32 w-full",
+  };
   return (
     <div
       aria-label="Loading content"
       role="status"
-      className={`skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`}
+      className={`skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`}
     />
   );
 }

package/src/components/index.ts

@@ -30,4 +30,5 @@ export { ListGroup } from "./ListGroup";
 export { Pagination } from "./Pagination";
 export { SkeletonParagraph } from "./SkeletonParagraph";
 export { EmptyCartIcon } from "./EmptyCartIcon";
+export { SearchResultImage } from "./SearchResultImage";
 export { Alert } from "./Alert";

package/src/index.css

@@ -639,6 +639,7 @@
   position: relative;
   overflow: hidden;
   background-color: theme("colors.neutral.100");
+  opacity: 0.85;
 }
 
 .skeleton-paragraph::after {
@@ -648,9 +649,9 @@
   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%
+    transparent 0%,
+    color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+    transparent 100%
   );
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }