@enadhq/enad-react-sdk 1.0.0 → 1.0.2

package/dist/client/storefront/components/star-rating.mjs

@@ -0,0 +1,240 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { useIcon } from "../../icons/icon-context";
+const sizeMap = {
+  sm: "h-3.5 w-3.5",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+function getHoverRating(event, starIndex) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const isLeftHalf = x < rect.width / 2;
+  return isLeftHalf ? starIndex + 0.5 : starIndex + 1;
+}
+function RatingMeta({ showValue, clampedRating, reviewCount }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showValue && /* @__PURE__ */ jsx("span", { className: "text-sm text-(--enad-text-primary-color) font-medium", children: clampedRating.toFixed(1) }),
+    reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-(--enad-text-muted-color)", children: [
+      "(",
+      reviewCount,
+      " ",
+      reviewCount === 1 ? "review" : "reviews",
+      ")"
+    ] })
+  ] });
+}
+function StarIcon_({
+  fillLevel,
+  iconSize,
+  filledColor,
+  StarIcon,
+  StarFilledIcon
+}) {
+  if (fillLevel >= 1) {
+    return /* @__PURE__ */ jsx(
+      StarFilledIcon,
+      {
+        className: `${iconSize} fill-current ${filledColor}`
+      }
+    );
+  }
+  if (fillLevel > 0) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        StarIcon,
+        {
+          className: `absolute inset-0 ${iconSize} text-(--enad-text-muted-color)`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute inset-0 overflow-hidden",
+          style: { clipPath: `inset(0 ${(1 - fillLevel) * 100}% 0 0)` },
+          children: /* @__PURE__ */ jsx(
+            StarFilledIcon,
+            {
+              className: `${iconSize} fill-current ${filledColor}`
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    StarIcon,
+    {
+      className: `${iconSize} text-(--enad-text-muted-color)`
+    }
+  );
+}
+function InteractiveStarRating({
+  rating,
+  max,
+  iconSize,
+  filledColor,
+  showValue,
+  reviewCount,
+  className,
+  onRate
+}) {
+  const StarIcon = useIcon("star");
+  const StarFilledIcon = useIcon("starFilled");
+  const [hoveredRating, setHoveredRating] = useState(null);
+  const [selectedRating, setSelectedRating] = useState(null);
+  const containerRef = useRef(null);
+  const baseRating = selectedRating ?? rating;
+  const displayRating = hoveredRating !== null ? hoveredRating : baseRating;
+  const clampedRating = Math.max(0, Math.min(displayRating, max));
+  const handleKeyDown = useCallback(
+    (event) => {
+      const current = hoveredRating ?? baseRating;
+      let next = current;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = Math.min(max, current + 0.5);
+          event.preventDefault();
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = Math.max(0.5, current - 0.5);
+          event.preventDefault();
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          setSelectedRating(current);
+          onRate?.(current);
+          return;
+        default:
+          return;
+      }
+      setHoveredRating(next);
+    },
+    [hoveredRating, baseRating, max, onRate]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center gap-1 font-enad ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "flex items-center gap-0.5",
+        role: "radiogroup",
+        "aria-label": `Rate from 1 to ${max} stars`,
+        onMouseLeave: () => setHoveredRating(null),
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `relative inline-flex ${iconSize} cursor-pointer transition-transform duration-150 motion-reduce:transition-none ${hoveredRating !== null && hoveredRating >= i + 0.5 ? "scale-110" : ""}`,
+            role: "radio",
+            "aria-checked": rating === i + 1 || rating === i + 0.5,
+            "aria-label": `${i + 1} star${i + 1 === 1 ? "" : "s"}`,
+            tabIndex: i === 0 ? 0 : -1,
+            onMouseMove: (e) => setHoveredRating(getHoverRating(e, i)),
+            onClick: (e) => {
+              const value = getHoverRating(e, i);
+              setSelectedRating(value);
+              onRate?.(value);
+            },
+            onKeyDown: handleKeyDown,
+            children: /* @__PURE__ */ jsx(
+              StarIcon_,
+              {
+                fillLevel: Math.max(0, Math.min(1, clampedRating - i)),
+                iconSize,
+                filledColor,
+                StarIcon,
+                StarFilledIcon
+              }
+            )
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(RatingMeta, { showValue, clampedRating, reviewCount })
+  ] });
+}
+function DisplayStarRating({
+  rating,
+  max,
+  iconSize,
+  filledColor,
+  showValue,
+  reviewCount,
+  className
+}) {
+  const StarIcon = useIcon("star");
+  const StarFilledIcon = useIcon("starFilled");
+  const clampedRating = Math.max(0, Math.min(rating, max));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `inline-flex items-center gap-1 font-enad ${className}`,
+      role: "img",
+      "aria-label": `${clampedRating} out of ${max} stars`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsx("span", { className: `relative inline-flex ${iconSize}`, children: /* @__PURE__ */ jsx(
+          StarIcon_,
+          {
+            fillLevel: Math.max(0, Math.min(1, clampedRating - i)),
+            iconSize,
+            filledColor,
+            StarIcon,
+            StarFilledIcon
+          }
+        ) }, i)) }),
+        /* @__PURE__ */ jsx(RatingMeta, { showValue, clampedRating, reviewCount })
+      ]
+    }
+  );
+}
+function StarRating({
+  rating,
+  max = 5,
+  size = "md",
+  showValue = false,
+  reviewCount,
+  className = "",
+  filledClassName,
+  interactive = false,
+  onRate
+}) {
+  const iconSize = sizeMap[size];
+  const filledColor = filledClassName || "text-(--enad-star-color)";
+  if (interactive) {
+    return /* @__PURE__ */ jsx(
+      InteractiveStarRating,
+      {
+        rating,
+        max,
+        iconSize,
+        filledColor,
+        showValue,
+        reviewCount,
+        className,
+        onRate
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DisplayStarRating,
+    {
+      rating,
+      max,
+      iconSize,
+      filledColor,
+      showValue,
+      reviewCount,
+      className
+    }
+  );
+}
+export {
+  StarRating
+};
+//# sourceMappingURL=star-rating.mjs.map

package/dist/client/storefront/components/star-rating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/star-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport { useCallback, useRef, useState } from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\n\nexport interface StarRatingProps {\n  rating: number\n  max?: number\n  size?: \"sm\" | \"md\" | \"lg\"\n  showValue?: boolean\n  reviewCount?: number\n  className?: string\n  filledClassName?: string\n  interactive?: boolean\n  onRate?: (rating: number) => void\n}\n\nconst sizeMap = {\n  sm: \"h-3.5 w-3.5\",\n  md: \"h-5 w-5\",\n  lg: \"h-6 w-6\",\n} as const\n\nfunction getHoverRating(\n  event: React.MouseEvent,\n  starIndex: number,\n): number {\n  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()\n  const x = event.clientX - rect.left\n  const isLeftHalf = x < rect.width / 2\n  return isLeftHalf ? starIndex + 0.5 : starIndex + 1\n}\n\nfunction RatingMeta({ showValue, clampedRating, reviewCount }: { showValue: boolean; clampedRating: number; reviewCount?: number }) {\n  return (\n    <>\n      {showValue && (\n        <span className=\"text-sm text-(--enad-text-primary-color) font-medium\">\n          {clampedRating.toFixed(1)}\n        </span>\n      )}\n      {reviewCount !== undefined && (\n        <span className=\"text-sm text-(--enad-text-muted-color)\">\n          ({reviewCount} {reviewCount === 1 ? \"review\" : \"reviews\"})\n        </span>\n      )}\n    </>\n  )\n}\n\n/* ─── Star rendering helper ─── */\n\nfunction StarIcon_({\n  fillLevel,\n  iconSize,\n  filledColor,\n  StarIcon,\n  StarFilledIcon,\n}: {\n  fillLevel: number\n  iconSize: string\n  filledColor: string\n  StarIcon: React.ComponentType<{ className?: string }>\n  StarFilledIcon: React.ComponentType<{ className?: string }>\n}) {\n  if (fillLevel >= 1) {\n    return (\n      <StarFilledIcon\n        className={`${iconSize} fill-current ${filledColor}`}\n      />\n    )\n  }\n\n  if (fillLevel > 0) {\n    return (\n      <>\n        <StarIcon\n          className={`absolute inset-0 ${iconSize} text-(--enad-text-muted-color)`}\n        />\n        <span\n          className=\"absolute inset-0 overflow-hidden\"\n          style={{ clipPath: `inset(0 ${(1 - fillLevel) * 100}% 0 0)` }}\n        >\n          <StarFilledIcon\n            className={`${iconSize} fill-current ${filledColor}`}\n          />\n        </span>\n      </>\n    )\n  }\n\n  return (\n    <StarIcon\n      className={`${iconSize} text-(--enad-text-muted-color)`}\n    />\n  )\n}\n\n/* ─── Interactive star rating ─── */\n\nfunction InteractiveStarRating({\n  rating,\n  max,\n  iconSize,\n  filledColor,\n  showValue,\n  reviewCount,\n  className,\n  onRate,\n}: {\n  rating: number\n  max: number\n  iconSize: string\n  filledColor: string\n  showValue: boolean\n  reviewCount?: number\n  className: string\n  onRate?: (rating: number) => void\n}) {\n  const StarIcon = useIcon(\"star\")\n  const StarFilledIcon = useIcon(\"starFilled\")\n  const [hoveredRating, setHoveredRating] = useState<number | null>(null)\n  const [selectedRating, setSelectedRating] = useState<number | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const baseRating = selectedRating ?? rating\n  const displayRating = hoveredRating !== null ? hoveredRating : baseRating\n  const clampedRating = Math.max(0, Math.min(displayRating, max))\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      const current = hoveredRating ?? baseRating\n      let next = current\n\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          next = Math.min(max, current + 0.5)\n          event.preventDefault()\n          break\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          next = Math.max(0.5, current - 0.5)\n          event.preventDefault()\n          break\n        case \"Enter\":\n        case \" \":\n          event.preventDefault()\n          setSelectedRating(current)\n          onRate?.(current)\n          return\n        default:\n          return\n      }\n\n      setHoveredRating(next)\n    },\n    [hoveredRating, baseRating, max, onRate],\n  )\n\n  return (\n    <div className={`inline-flex items-center gap-1 font-enad ${className}`}>\n      <div\n        ref={containerRef}\n        className=\"flex items-center gap-0.5\"\n        role=\"radiogroup\"\n        aria-label={`Rate from 1 to ${max} stars`}\n        onMouseLeave={() => setHoveredRating(null)}\n        onKeyDown={handleKeyDown}\n      >\n        {Array.from({ length: max }, (_, i) => (\n          <span\n            key={i}\n            className={`relative inline-flex ${iconSize} cursor-pointer transition-transform duration-150 motion-reduce:transition-none ${\n              hoveredRating !== null && hoveredRating >= i + 0.5\n                ? \"scale-110\"\n                : \"\"\n            }`}\n            role=\"radio\"\n            aria-checked={rating === i + 1 || rating === i + 0.5}\n            aria-label={`${i + 1} star${i + 1 === 1 ? \"\" : \"s\"}`}\n            tabIndex={i === 0 ? 0 : -1}\n            onMouseMove={(e) => setHoveredRating(getHoverRating(e, i))}\n            onClick={(e) => {\n              const value = getHoverRating(e, i)\n              setSelectedRating(value)\n              onRate?.(value)\n            }}\n            onKeyDown={handleKeyDown}\n          >\n            <StarIcon_\n              fillLevel={Math.max(0, Math.min(1, clampedRating - i))}\n              iconSize={iconSize}\n              filledColor={filledColor}\n              StarIcon={StarIcon}\n              StarFilledIcon={StarFilledIcon}\n            />\n          </span>\n        ))}\n      </div>\n\n      <RatingMeta showValue={showValue} clampedRating={clampedRating} reviewCount={reviewCount} />\n    </div>\n  )\n}\n\n/* ─── Display-only star rating ─── */\n\nfunction DisplayStarRating({\n  rating,\n  max,\n  iconSize,\n  filledColor,\n  showValue,\n  reviewCount,\n  className,\n}: {\n  rating: number\n  max: number\n  iconSize: string\n  filledColor: string\n  showValue: boolean\n  reviewCount?: number\n  className: string\n}) {\n  const StarIcon = useIcon(\"star\")\n  const StarFilledIcon = useIcon(\"starFilled\")\n  const clampedRating = Math.max(0, Math.min(rating, max))\n\n  return (\n    <div\n      className={`inline-flex items-center gap-1 font-enad ${className}`}\n      role=\"img\"\n      aria-label={`${clampedRating} out of ${max} stars`}\n    >\n      <div className=\"flex items-center gap-0.5\">\n        {Array.from({ length: max }, (_, i) => (\n          <span key={i} className={`relative inline-flex ${iconSize}`}>\n            <StarIcon_\n              fillLevel={Math.max(0, Math.min(1, clampedRating - i))}\n              iconSize={iconSize}\n              filledColor={filledColor}\n              StarIcon={StarIcon}\n              StarFilledIcon={StarFilledIcon}\n            />\n          </span>\n        ))}\n      </div>\n\n      <RatingMeta showValue={showValue} clampedRating={clampedRating} reviewCount={reviewCount} />\n    </div>\n  )\n}\n\n/* ─── Main component ─── */\n\nexport function StarRating({\n  rating,\n  max = 5,\n  size = \"md\",\n  showValue = false,\n  reviewCount,\n  className = \"\",\n  filledClassName,\n  interactive = false,\n  onRate,\n}: StarRatingProps) {\n  const iconSize = sizeMap[size]\n  const filledColor = filledClassName || \"text-(--enad-star-color)\"\n\n  if (interactive) {\n    return (\n      <InteractiveStarRating\n        rating={rating}\n        max={max}\n        iconSize={iconSize}\n        filledColor={filledColor}\n        showValue={showValue}\n        reviewCount={reviewCount}\n        className={className}\n        onRate={onRate}\n      />\n    )\n  }\n\n  return (\n    <DisplayStarRating\n      rating={rating}\n      max={max}\n      iconSize={iconSize}\n      filledColor={filledColor}\n      showValue={showValue}\n      reviewCount={reviewCount}\n      className={className}\n    />\n  )\n}\n"],"mappings":";AAmCI,mBAEI,KAKA,YAPJ;AAjCJ,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,eAAe;AAcxB,MAAM,UAAU;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eACP,OACA,WACQ;AACR,QAAM,OAAQ,MAAM,cAA8B,sBAAsB;AACxE,QAAM,IAAI,MAAM,UAAU,KAAK;AAC/B,QAAM,aAAa,IAAI,KAAK,QAAQ;AACpC,SAAO,aAAa,YAAY,MAAM,YAAY;AACpD;AAEA,SAAS,WAAW,EAAE,WAAW,eAAe,YAAY,GAAwE;AAClI,SACE,iCACG;AAAA,iBACC,oBAAC,UAAK,WAAU,wDACb,wBAAc,QAAQ,CAAC,GAC1B;AAAA,IAED,gBAAgB,UACf,qBAAC,UAAK,WAAU,0CAAyC;AAAA;AAAA,MACrD;AAAA,MAAY;AAAA,MAAE,gBAAgB,IAAI,WAAW;AAAA,MAAU;AAAA,OAC3D;AAAA,KAEJ;AAEJ;AAIA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,MAAI,aAAa,GAAG;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,QAAQ,iBAAiB,WAAW;AAAA;AAAA,IACpD;AAAA,EAEJ;AAEA,MAAI,YAAY,GAAG;AACjB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,oBAAoB,QAAQ;AAAA;AAAA,MACzC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,UAAU,YAAY,IAAI,aAAa,GAAG,SAAS;AAAA,UAE5D;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,GAAG,QAAQ,iBAAiB,WAAW;AAAA;AAAA,UACpD;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,QAAQ;AAAA;AAAA,EACxB;AAEJ;AAIA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,WAAW,QAAQ,MAAM;AAC/B,QAAM,iBAAiB,QAAQ,YAAY;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,aAAa,kBAAkB;AACrC,QAAM,gBAAgB,kBAAkB,OAAO,gBAAgB;AAC/D,QAAM,gBAAgB,KAAK,IAAI,GAAG,KAAK,IAAI,eAAe,GAAG,CAAC;AAE9D,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA+B;AAC9B,YAAM,UAAU,iBAAiB;AACjC,UAAI,OAAO;AAEX,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,KAAK,IAAI,KAAK,UAAU,GAAG;AAClC,gBAAM,eAAe;AACrB;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,KAAK,IAAI,KAAK,UAAU,GAAG;AAClC,gBAAM,eAAe;AACrB;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,gBAAM,eAAe;AACrB,4BAAkB,OAAO;AACzB,mBAAS,OAAO;AAChB;AAAA,QACF;AACE;AAAA,MACJ;AAEA,uBAAiB,IAAI;AAAA,IACvB;AAAA,IACA,CAAC,eAAe,YAAY,KAAK,MAAM;AAAA,EACzC;AAEA,SACE,qBAAC,SAAI,WAAW,4CAA4C,SAAS,IACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,kBAAkB,GAAG;AAAA,QACjC,cAAc,MAAM,iBAAiB,IAAI;AAAA,QACzC,WAAW;AAAA,QAEV,gBAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,CAAC,GAAG,MAC/B;AAAA,UAAC;AAAA;AAAA,YAEC,WAAW,wBAAwB,QAAQ,mFACzC,kBAAkB,QAAQ,iBAAiB,IAAI,MAC3C,cACA,EACN;AAAA,YACA,MAAK;AAAA,YACL,gBAAc,WAAW,IAAI,KAAK,WAAW,IAAI;AAAA,YACjD,cAAY,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAM,IAAI,KAAK,GAAG;AAAA,YAClD,UAAU,MAAM,IAAI,IAAI;AAAA,YACxB,aAAa,CAAC,MAAM,iBAAiB,eAAe,GAAG,CAAC,CAAC;AAAA,YACzD,SAAS,CAAC,MAAM;AACd,oBAAM,QAAQ,eAAe,GAAG,CAAC;AACjC,gCAAkB,KAAK;AACvB,uBAAS,KAAK;AAAA,YAChB;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,gBAAgB,CAAC,CAAC;AAAA,gBACrD;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,UAxBK;AAAA,QAyBP,CACD;AAAA;AAAA,IACH;AAAA,IAEA,oBAAC,cAAW,WAAsB,eAA8B,aAA0B;AAAA,KAC5F;AAEJ;AAIA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,WAAW,QAAQ,MAAM;AAC/B,QAAM,iBAAiB,QAAQ,YAAY;AAC3C,QAAM,gBAAgB,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,GAAG,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,4CAA4C,SAAS;AAAA,MAChE,MAAK;AAAA,MACL,cAAY,GAAG,aAAa,WAAW,GAAG;AAAA,MAE1C;AAAA,4BAAC,SAAI,WAAU,6BACZ,gBAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,CAAC,GAAG,MAC/B,oBAAC,UAAa,WAAW,wBAAwB,QAAQ,IACvD;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,gBAAgB,CAAC,CAAC;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,KAPS,CAQX,CACD,GACH;AAAA,QAEA,oBAAC,cAAW,WAAsB,eAA8B,aAA0B;AAAA;AAAA;AAAA,EAC5F;AAEJ;AAIO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,WAAW,QAAQ,IAAI;AAC7B,QAAM,cAAc,mBAAmB;AAEvC,MAAI,aAAa;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/client/storefront/components/testimonial.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface TestimonialProps {
+    quote: string;
+    name: string;
+    role?: string;
+    location?: string;
+    avatarUrl?: string;
+    avatarInitials?: string;
+    rating?: number;
+    className?: string;
+}
+export interface TestimonialGridProps {
+    children: React.ReactNode;
+    /** Number of columns at lg breakpoint */
+    columns?: 2 | 3 | 4;
+    className?: string;
+}
+export declare function Testimonial({ quote, name, role, location, avatarUrl, avatarInitials, rating, className, }: TestimonialProps): import("react/jsx-runtime").JSX.Element;
+export declare function TestimonialGrid({ children, columns, className }: TestimonialGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=testimonial.d.ts.map

package/dist/client/storefront/components/testimonial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testimonial.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,MAAM,EACN,SAAS,GACV,EAAE,gBAAgB,2CAiClB;AAUD,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,OAAW,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAQzF"}

package/dist/client/storefront/components/testimonial.mjs

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+import { StarRating } from "./star-rating";
+function Testimonial({
+  quote,
+  name,
+  role,
+  location,
+  avatarUrl,
+  avatarInitials,
+  rating,
+  className
+}) {
+  const attribution = [role, location].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-(--enad-border-radius) border border-border bg-background p-6",
+        className
+      ),
+      children: [
+        rating !== void 0 && /* @__PURE__ */ jsx(StarRating, { rating, size: "sm" }),
+        /* @__PURE__ */ jsxs("blockquote", { className: "flex-1 text-sm leading-relaxed text-foreground", children: [
+          "\u201C",
+          quote,
+          "\u201D"
+        ] }),
+        /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
+          (avatarUrl || avatarInitials) && /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-muted-foreground", children: avatarUrl ? /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: name, loading: "lazy", className: "size-full object-cover" }) : avatarInitials }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium font-enad", children: name }),
+            attribution && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: attribution })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const columnClasses = {
+  2: "sm:columns-2",
+  3: "sm:columns-2 lg:columns-3",
+  4: "sm:columns-2 lg:columns-3 xl:columns-4"
+};
+function TestimonialGrid({ children, columns = 3, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("columns-1 gap-4 space-y-4", columnClasses[columns], className), children: React.Children.map(children, (child) => /* @__PURE__ */ jsx("div", { className: "break-inside-avoid", children: child })) });
+}
+export {
+  Testimonial,
+  TestimonialGrid
+};
+//# sourceMappingURL=testimonial.mjs.map

package/dist/client/storefront/components/testimonial.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/testimonial.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { StarRating } from \"./star-rating\";\n\n/* ─── Types ─── */\n\nexport interface TestimonialProps {\n  quote: string;\n  name: string;\n  role?: string;\n  location?: string;\n  avatarUrl?: string;\n  avatarInitials?: string;\n  rating?: number;\n  className?: string;\n}\n\nexport interface TestimonialGridProps {\n  children: React.ReactNode;\n  /** Number of columns at lg breakpoint */\n  columns?: 2 | 3 | 4;\n  className?: string;\n}\n\n/* ─── Testimonial ─── */\n\nexport function Testimonial({\n  quote,\n  name,\n  role,\n  location,\n  avatarUrl,\n  avatarInitials,\n  rating,\n  className,\n}: TestimonialProps) {\n  const attribution = [role, location].filter(Boolean).join(\", \");\n\n  return (\n    <figure\n      className={cn(\n        \"flex flex-col gap-4 rounded-(--enad-border-radius) border border-border bg-background p-6\",\n        className,\n      )}\n    >\n      {rating !== undefined && <StarRating rating={rating} size=\"sm\" />}\n\n      <blockquote className=\"flex-1 text-sm leading-relaxed text-foreground\">\n        &ldquo;{quote}&rdquo;\n      </blockquote>\n\n      <figcaption className=\"flex items-center gap-3\">\n        {(avatarUrl || avatarInitials) && (\n          <div className=\"flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-muted-foreground\">\n            {avatarUrl ? (\n              <img src={avatarUrl} alt={name} loading=\"lazy\" className=\"size-full object-cover\" />\n            ) : (\n              avatarInitials\n            )}\n          </div>\n        )}\n        <div className=\"flex flex-col\">\n          <span className=\"text-sm font-medium font-enad\">{name}</span>\n          {attribution && <span className=\"text-xs text-muted-foreground\">{attribution}</span>}\n        </div>\n      </figcaption>\n    </figure>\n  );\n}\n\n/* ─── Grid ─── */\n\nconst columnClasses = {\n  2: \"sm:columns-2\",\n  3: \"sm:columns-2 lg:columns-3\",\n  4: \"sm:columns-2 lg:columns-3 xl:columns-4\",\n} as const;\n\nexport function TestimonialGrid({ children, columns = 3, className }: TestimonialGridProps) {\n  return (\n    <div className={cn(\"columns-1 gap-4 space-y-4\", columnClasses[columns], className)}>\n      {React.Children.map(children, (child) => (\n        <div className=\"break-inside-avoid\">{child}</div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AA6C+B,cAEzB,YAFyB;AA7C/B,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAwBpB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,CAAC,MAAM,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,mBAAW,UAAa,oBAAC,cAAW,QAAgB,MAAK,MAAK;AAAA,QAE/D,qBAAC,gBAAW,WAAU,kDAAiD;AAAA;AAAA,UAC7D;AAAA,UAAM;AAAA,WAChB;AAAA,QAEA,qBAAC,gBAAW,WAAU,2BAClB;AAAA,wBAAa,mBACb,oBAAC,SAAI,WAAU,qIACZ,sBACC,oBAAC,SAAI,KAAK,WAAW,KAAK,MAAM,SAAQ,QAAO,WAAU,0BAAyB,IAElF,gBAEJ;AAAA,UAEF,qBAAC,SAAI,WAAU,iBACb;AAAA,gCAAC,UAAK,WAAU,iCAAiC,gBAAK;AAAA,YACrD,eAAe,oBAAC,UAAK,WAAU,iCAAiC,uBAAY;AAAA,aAC/E;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAIA,MAAM,gBAAgB;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,SAAS,gBAAgB,EAAE,UAAU,UAAU,GAAG,UAAU,GAAyB;AAC1F,SACE,oBAAC,SAAI,WAAW,GAAG,6BAA6B,cAAc,OAAO,GAAG,SAAS,GAC9E,gBAAM,SAAS,IAAI,UAAU,CAAC,UAC7B,oBAAC,SAAI,WAAU,sBAAsB,iBAAM,CAC5C,GACH;AAEJ;","names":[]}

package/dist/client/storefront/components/trust-badges.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface TrustBadge {
+    icon: React.ReactNode;
+    label: string;
+    description?: string;
+}
+export interface TrustBadgesProps {
+    badges: TrustBadge[];
+    /** Layout direction */
+    layout?: "row" | "grid";
+    className?: string;
+}
+export declare function TrustBadges({ badges, layout, className }: TrustBadgesProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=trust-badges.d.ts.map

package/dist/client/storefront/components/trust-badges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trust-badges.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/trust-badges.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,uBAAuB;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,MAAc,EAAE,SAAS,EAAE,EAAE,gBAAgB,kDA2BlF"}

package/dist/client/storefront/components/trust-badges.mjs

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+function TrustBadges({ badges, layout = "row", className }) {
+  if (badges.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        layout === "row" ? "flex flex-wrap items-start justify-center gap-6 sm:gap-8" : "grid grid-cols-2 gap-4 sm:grid-cols-4",
+        className
+      ),
+      children: badges.map((badge, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-muted text-foreground", children: badge.icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium font-enad", children: badge.label }),
+          badge.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: badge.description })
+        ] })
+      ] }, i))
+    }
+  );
+}
+export {
+  TrustBadges
+};
+//# sourceMappingURL=trust-badges.mjs.map

package/dist/client/storefront/components/trust-badges.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/trust-badges.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\n\n/* ─── Types ─── */\n\nexport interface TrustBadge {\n  icon: React.ReactNode;\n  label: string;\n  description?: string;\n}\n\nexport interface TrustBadgesProps {\n  badges: TrustBadge[];\n  /** Layout direction */\n  layout?: \"row\" | \"grid\";\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function TrustBadges({ badges, layout = \"row\", className }: TrustBadgesProps) {\n  if (badges.length === 0) return null;\n\n  return (\n    <div\n      className={cn(\n        layout === \"row\"\n          ? \"flex flex-wrap items-start justify-center gap-6 sm:gap-8\"\n          : \"grid grid-cols-2 gap-4 sm:grid-cols-4\",\n        className,\n      )}\n    >\n      {badges.map((badge, i) => (\n        <div key={i} className=\"flex flex-col items-center gap-2 text-center\">\n          <div className=\"flex size-10 items-center justify-center rounded-full bg-muted text-foreground\">\n            {badge.icon}\n          </div>\n          <div className=\"flex flex-col gap-0.5\">\n            <span className=\"text-sm font-medium font-enad\">{badge.label}</span>\n            {badge.description && (\n              <span className=\"text-xs text-muted-foreground\">{badge.description}</span>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AAkCU,cAGA,YAHA;AAjCV,SAAS,UAAU;AAmBZ,SAAS,YAAY,EAAE,QAAQ,SAAS,OAAO,UAAU,GAAqB;AACnF,MAAI,OAAO,WAAW,EAAG,QAAO;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,WAAW,QACP,6DACA;AAAA,QACJ;AAAA,MACF;AAAA,MAEC,iBAAO,IAAI,CAAC,OAAO,MAClB,qBAAC,SAAY,WAAU,gDACrB;AAAA,4BAAC,SAAI,WAAU,kFACZ,gBAAM,MACT;AAAA,QACA,qBAAC,SAAI,WAAU,yBACb;AAAA,8BAAC,UAAK,WAAU,iCAAiC,gBAAM,OAAM;AAAA,UAC5D,MAAM,eACL,oBAAC,UAAK,WAAU,iCAAiC,gBAAM,aAAY;AAAA,WAEvE;AAAA,WATQ,CAUV,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/client/storefront/components/variant-selector.d.ts

@@ -0,0 +1,21 @@
+export interface VariantOption {
+    id: string;
+    label: string;
+    available?: boolean;
+    value?: string;
+}
+export interface VariantAxis {
+    name: string;
+    options: VariantOption[];
+}
+export interface VariantSelectorProps {
+    axes: VariantAxis[];
+    selected: Record<string, string>;
+    onChange: (axis: string, optionId: string) => void;
+    labels?: {
+        unavailableHint?: string;
+    };
+    className?: string;
+}
+export declare function VariantSelector({ axes, selected, onChange, labels, className, }: VariantSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=variant-selector.d.ts.map

package/dist/client/storefront/components/variant-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-selector.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/variant-selector.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,aAAa,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,WAAW,EAAE,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,MAAM,CAAC,EAAE;QACP,eAAe,CAAC,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,MAAW,EACX,SAAc,GACf,EAAE,oBAAoB,2CAqDtB"}

package/dist/client/storefront/components/variant-selector.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VariantSelector({
+  axes,
+  selected,
+  onChange,
+  labels = {},
+  className = ""
+}) {
+  const { unavailableHint = "Unavailable" } = labels;
+  return /* @__PURE__ */ jsx("div", { className: `font-enad space-y-4 ${className}`, children: axes.map((axis) => /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-(--enad-text-primary-color)", children: axis.name }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", role: "radiogroup", "aria-label": axis.name, children: axis.options.map((option) => {
+      const isSelected = selected[axis.name] === option.id;
+      const isAvailable = option.available !== false;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": isSelected,
+          "aria-label": isAvailable ? `${option.label}` : `${option.label} - ${unavailableHint}`,
+          onClick: () => onChange(axis.name, option.id),
+          className: `
+                    inline-flex items-center justify-center px-4 py-2 text-sm font-medium
+                    rounded-(--enad-border-radius) border transition
+                    motion-reduce:transition-none
+                    ${isSelected ? "bg-(--enad-button-bg) text-(--enad-button-color) border-(--enad-button-bg) ring-2 ring-(--enad-button-bg)/30 ring-offset-1" : "bg-transparent text-(--enad-text-primary-color) border-(--enad-border-color) hover:border-(--enad-button-bg)"}
+                    ${!isAvailable ? "opacity-40 line-through" : ""}
+                  `,
+          children: option.label
+        },
+        option.id
+      );
+    }) })
+  ] }, axis.name)) });
+}
+export {
+  VariantSelector
+};
+//# sourceMappingURL=variant-selector.mjs.map

package/dist/client/storefront/components/variant-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/variant-selector.tsx"],"sourcesContent":["\"use client\"\n\nexport interface VariantOption {\n  id: string\n  label: string\n  available?: boolean\n  value?: string\n}\n\nexport interface VariantAxis {\n  name: string\n  options: VariantOption[]\n}\n\nexport interface VariantSelectorProps {\n  axes: VariantAxis[]\n  selected: Record<string, string>\n  onChange: (axis: string, optionId: string) => void\n  labels?: {\n    unavailableHint?: string\n  }\n  className?: string\n}\n\nexport function VariantSelector({\n  axes,\n  selected,\n  onChange,\n  labels = {},\n  className = \"\",\n}: VariantSelectorProps) {\n  const { unavailableHint = \"Unavailable\" } = labels\n\n  return (\n    <div className={`font-enad space-y-4 ${className}`}>\n      {axes.map((axis) => (\n        <fieldset key={axis.name} className=\"space-y-2\">\n          <legend className=\"text-sm font-medium text-(--enad-text-primary-color)\">\n            {axis.name}\n          </legend>\n\n          <div className=\"flex flex-wrap gap-2\" role=\"radiogroup\" aria-label={axis.name}>\n            {axis.options.map((option) => {\n              const isSelected = selected[axis.name] === option.id\n              const isAvailable = option.available !== false\n\n              return (\n                <button\n                  key={option.id}\n                  type=\"button\"\n                  role=\"radio\"\n                  aria-checked={isSelected}\n                  aria-label={\n                    isAvailable\n                      ? `${option.label}`\n                      : `${option.label} - ${unavailableHint}`\n                  }\n                  onClick={() => onChange(axis.name, option.id)}\n                  className={`\n                    inline-flex items-center justify-center px-4 py-2 text-sm font-medium\n                    rounded-(--enad-border-radius) border transition\n                    motion-reduce:transition-none\n                    ${\n                      isSelected\n                        ? \"bg-(--enad-button-bg) text-(--enad-button-color) border-(--enad-button-bg) ring-2 ring-(--enad-button-bg)/30 ring-offset-1\"\n                        : \"bg-transparent text-(--enad-text-primary-color) border-(--enad-border-color) hover:border-(--enad-button-bg)\"\n                    }\n                    ${\n                      !isAvailable\n                        ? \"opacity-40 line-through\"\n                        : \"\"\n                    }\n                  `}\n                >\n                  {option.label}\n                </button>\n              )\n            })}\n          </div>\n        </fieldset>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";AAoCQ,SACE,KADF;AAZD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV,YAAY;AACd,GAAyB;AACvB,QAAM,EAAE,kBAAkB,cAAc,IAAI;AAE5C,SACE,oBAAC,SAAI,WAAW,uBAAuB,SAAS,IAC7C,eAAK,IAAI,CAAC,SACT,qBAAC,cAAyB,WAAU,aAClC;AAAA,wBAAC,YAAO,WAAU,wDACf,eAAK,MACR;AAAA,IAEA,oBAAC,SAAI,WAAU,wBAAuB,MAAK,cAAa,cAAY,KAAK,MACtE,eAAK,QAAQ,IAAI,CAAC,WAAW;AAC5B,YAAM,aAAa,SAAS,KAAK,IAAI,MAAM,OAAO;AAClD,YAAM,cAAc,OAAO,cAAc;AAEzC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,cACE,cACI,GAAG,OAAO,KAAK,KACf,GAAG,OAAO,KAAK,MAAM,eAAe;AAAA,UAE1C,SAAS,MAAM,SAAS,KAAK,MAAM,OAAO,EAAE;AAAA,UAC5C,WAAW;AAAA;AAAA;AAAA;AAAA,sBAKP,aACI,+HACA,8GACN;AAAA,sBAEE,CAAC,cACG,4BACA,EACN;AAAA;AAAA,UAGD,iBAAO;AAAA;AAAA,QA1BH,OAAO;AAAA,MA2Bd;AAAA,IAEJ,CAAC,GACH;AAAA,OA1Ca,KAAK,IA2CpB,CACD,GACH;AAEJ;","names":[]}

package/dist/client/storefront/components/wishlist-toggle.d.ts

@@ -0,0 +1,12 @@
+export interface WishlistToggleProps {
+    active?: boolean;
+    onToggle?: () => void;
+    loading?: boolean;
+    size?: "sm" | "default" | "lg";
+    className?: string;
+    label?: string;
+    /** Label when active state is true */
+    activeLabel?: string;
+}
+export declare function WishlistToggle({ active, onToggle, loading, size, className, label, activeLabel, }: WishlistToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=wishlist-toggle.d.ts.map

package/dist/client/storefront/components/wishlist-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wishlist-toggle.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/wishlist-toggle.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAc,EACd,QAAQ,EACR,OAAe,EACf,IAAgB,EAChB,SAAS,EACT,KAAyB,EACzB,WAAoC,GACrC,EAAE,mBAAmB,2CAyCrB"}

package/dist/client/storefront/components/wishlist-toggle.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+import { useIcon } from "../../icons/icon-context";
+function WishlistToggle({
+  active = false,
+  onToggle,
+  loading = false,
+  size = "default",
+  className,
+  label = "Add to wishlist",
+  activeLabel = "Remove from wishlist"
+}) {
+  const HeartIcon = useIcon("heart");
+  const sizeClasses = {
+    sm: "size-8",
+    default: "size-10",
+    lg: "size-12"
+  };
+  const iconSizes = {
+    sm: "size-4",
+    default: "size-5",
+    lg: "size-6"
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      disabled: loading,
+      "aria-label": active ? activeLabel : label,
+      "aria-pressed": active,
+      className: cn(
+        "inline-flex items-center justify-center rounded-full transition-all motion-reduce:transition-none",
+        "hover:bg-(--enad-hover-bg) active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        sizeClasses[size],
+        active && "text-(--enad-error-color)",
+        !active && "text-(--enad-text-muted-color)",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        HeartIcon,
+        {
+          className: cn(
+            iconSizes[size],
+            "transition-transform motion-reduce:transition-none",
+            active && "scale-110"
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  WishlistToggle
+};
+//# sourceMappingURL=wishlist-toggle.mjs.map

package/dist/client/storefront/components/wishlist-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/wishlist-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\n\nexport interface WishlistToggleProps {\n  active?: boolean;\n  onToggle?: () => void;\n  loading?: boolean;\n  size?: \"sm\" | \"default\" | \"lg\";\n  className?: string;\n  label?: string;\n  /** Label when active state is true */\n  activeLabel?: string;\n}\n\nexport function WishlistToggle({\n  active = false,\n  onToggle,\n  loading = false,\n  size = \"default\",\n  className,\n  label = \"Add to wishlist\",\n  activeLabel = \"Remove from wishlist\",\n}: WishlistToggleProps) {\n  const HeartIcon = useIcon(\"heart\");\n\n  const sizeClasses = {\n    sm: \"size-8\",\n    default: \"size-10\",\n    lg: \"size-12\",\n  };\n\n  const iconSizes = {\n    sm: \"size-4\",\n    default: \"size-5\",\n    lg: \"size-6\",\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggle}\n      disabled={loading}\n      aria-label={active ? activeLabel : label}\n      aria-pressed={active}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full transition-all motion-reduce:transition-none\",\n        \"hover:bg-(--enad-hover-bg) active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        sizeClasses[size],\n        active && \"text-(--enad-error-color)\",\n        !active && \"text-(--enad-text-muted-color)\",\n        className,\n      )}\n    >\n      <HeartIcon\n        className={cn(\n          iconSizes[size],\n          \"transition-transform motion-reduce:transition-none\",\n          active && \"scale-110\",\n        )}\n      />\n    </button>\n  );\n}\n"],"mappings":";AAyDM;AAtDN,SAAS,UAAU;AACnB,SAAS,eAAe;AAajB,SAAS,eAAe;AAAA,EAC7B,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAChB,GAAwB;AACtB,QAAM,YAAY,QAAQ,OAAO;AAEjC,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,EACN;AAEA,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAY,SAAS,cAAc;AAAA,MACnC,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,IAAI;AAAA,QAChB,UAAU;AAAA,QACV,CAAC,UAAU;AAAA,QACX;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,UAAU,IAAI;AAAA,YACd;AAAA,YACA,UAAU;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/client/storefront/filters/filter-chip.d.ts

@@ -0,0 +1,10 @@
+interface FilterChipProps {
+    label: string;
+    active: boolean;
+    onClick: () => void;
+    onRemove?: () => void;
+    className?: string;
+}
+declare function FilterChip({ label, active, onClick, onRemove, className }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+export { FilterChip, type FilterChipProps };
+//# sourceMappingURL=filter-chip.d.ts.map

package/dist/client/storefront/filters/filter-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/filters/filter-chip.tsx"],"names":[],"mappings":"AAOA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CAmBnF;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,CAAC"}

package/dist/client/storefront/filters/filter-chip.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIcon } from "../../icons/icon-context";
+import { Toggle } from "../../ui-resolver/toggle";
+import { cn } from "../../ui/utils";
+function FilterChip({ label, active, onClick, onRemove, className }) {
+  const CloseIcon = useIcon("close");
+  return /* @__PURE__ */ jsxs(
+    Toggle,
+    {
+      pressed: active,
+      onPressedChange: () => active && onRemove ? onRemove() : onClick(),
+      variant: "outline",
+      className: cn(
+        "enad-interactive rounded-[var(--enad-button-radius)] px-3 text-sm",
+        active && "bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground",
+        className
+      ),
+      "aria-label": active ? `Remove ${label}` : label,
+      children: [
+        label,
+        active && onRemove && /* @__PURE__ */ jsx(CloseIcon, { className: "relative size-3 hit-area-6" })
+      ]
+    }
+  );
+}
+export {
+  FilterChip
+};
+//# sourceMappingURL=filter-chip.mjs.map

package/dist/client/storefront/filters/filter-chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/filters/filter-chip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Toggle } from \"../../ui-resolver/toggle\";\nimport { cn } from \"../../ui/utils\";\n\ninterface FilterChipProps {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  onRemove?: () => void;\n  className?: string;\n}\n\nfunction FilterChip({ label, active, onClick, onRemove, className }: FilterChipProps) {\n  const CloseIcon = useIcon(\"close\");\n  return (\n    <Toggle\n      pressed={active}\n      onPressedChange={() => (active && onRemove ? onRemove() : onClick())}\n      variant=\"outline\"\n      className={cn(\n        \"enad-interactive rounded-[var(--enad-button-radius)] px-3 text-sm\",\n        active &&\n          \"bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground\",\n        className,\n      )}\n      aria-label={active ? `Remove ${label}` : label}\n    >\n      {label}\n      {active && onRemove && <CloseIcon className=\"relative size-3 hit-area-6\" />}\n    </Toggle>\n  );\n}\n\nexport { FilterChip, type FilterChipProps };\n"],"mappings":";AAkBI,SAayB,KAbzB;AAfJ,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,UAAU;AAUnB,SAAS,WAAW,EAAE,OAAO,QAAQ,SAAS,UAAU,UAAU,GAAoB;AACpF,QAAM,YAAY,QAAQ,OAAO;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,iBAAiB,MAAO,UAAU,WAAW,SAAS,IAAI,QAAQ;AAAA,MAClE,SAAQ;AAAA,MACR,WAAW;AAAA,QACT;AAAA,QACA,UACE;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAY,SAAS,UAAU,KAAK,KAAK;AAAA,MAExC;AAAA;AAAA,QACA,UAAU,YAAY,oBAAC,aAAU,WAAU,8BAA6B;AAAA;AAAA;AAAA,EAC3E;AAEJ;","names":[]}

package/dist/client/storefront/filters/filter-group.d.ts

@@ -0,0 +1,22 @@
+interface FilterOption {
+    value: string;
+    label: string;
+    color?: string;
+    count?: number;
+}
+interface FilterGroupProps {
+    title: string;
+    type: "checkbox" | "color" | "price";
+    options: FilterOption[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    defaultOpen?: boolean;
+    labels?: {
+        from?: string;
+        to?: string;
+    };
+    className?: string;
+}
+declare function FilterGroup({ title, type, options, selected, onChange, defaultOpen, labels, className, }: FilterGroupProps): import("react/jsx-runtime").JSX.Element;
+export { FilterGroup, type FilterGroupProps, type FilterOption };
+//# sourceMappingURL=filter-group.d.ts.map