@enadhq/enad-react-sdk 1.0.0 → 1.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"star-rating.mjs","names":[],"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":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"testimonial.d.ts","names":[],"sources":["../../../../src/client/storefront/components/testimonial.tsx"],"mappings":";;;;UAMiB,gBAAA;EACf,KAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,SAAA;EACA,cAAA;EACA,MAAA;EACA,SAAA;AAAA;AAAA,UAGe,oBAAA;EACf,QAAA,EAAU,OAAA,CAAM,SAAA;EANhB;EAQA,OAAA;EACA,SAAA;AAAA;AAAA,iBAKc,WAAA,CAAA;EACd,KAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,SAAA;EACA,cAAA;EACA,MAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA2CH,eAAA,CAAA;EAAkB,QAAA;EAAU,OAAA;EAAa;AAAA,GAAa,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,64 @@
+import { cn } from "../../ui/utils.mjs";
+import { StarRating } from "./star-rating.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/testimonial.tsx
+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: [
+					"“",
+					quote,
+					"”"
+				]
+			}),
+			/* @__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$1.Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
+			className: "break-inside-avoid",
+			children: child
+		}))
+	});
+}
+//#endregion
+export { Testimonial, TestimonialGrid };
+
+//# sourceMappingURL=testimonial.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"testimonial.mjs","names":["React"],"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":";;;;;AA0BA,SAAgB,YAAY,EAC1B,OACA,MACA,MACA,UACA,WACA,gBACA,QACA,aACmB;CACnB,MAAM,cAAc,CAAC,MAAM,SAAS,CAAC,OAAO,QAAQ,CAAC,KAAK,KAAK;AAE/D,QACE,qBAAC,UAAD;EACE,WAAW,GACT,6FACA,UACD;YAJH;GAMG,WAAW,KAAA,KAAa,oBAAC,YAAD;IAAoB;IAAQ,MAAK;IAAO,CAAA;GAEjE,qBAAC,cAAD;IAAY,WAAU;cAAtB;KAAuE;KAC7D;KAAM;KACH;;GAEb,qBAAC,cAAD;IAAY,WAAU;cAAtB,EACI,aAAa,mBACb,oBAAC,OAAD;KAAK,WAAU;eACZ,YACC,oBAAC,OAAD;MAAK,KAAK;MAAW,KAAK;MAAM,SAAQ;MAAO,WAAU;MAA2B,CAAA,GAEpF;KAEE,CAAA,EAER,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MAAM,WAAU;gBAAiC;MAAY,CAAA,EAC5D,eAAe,oBAAC,QAAD;MAAM,WAAU;gBAAiC;MAAmB,CAAA,CAChF;OACK;;GACN;;;AAMb,MAAM,gBAAgB;CACpB,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,SAAgB,gBAAgB,EAAE,UAAU,UAAU,GAAG,aAAmC;AAC1F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,6BAA6B,cAAc,UAAU,UAAU;YAC/EA,QAAM,SAAS,IAAI,WAAW,UAC7B,oBAAC,OAAD;GAAK,WAAU;aAAsB;GAAY,CAAA,CACjD;EACE,CAAA"}

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

@@ -0,0 +1,23 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/trust-badges.d.ts
+interface TrustBadge {
+  icon: React$1.ReactNode;
+  label: string;
+  description?: string;
+}
+interface TrustBadgesProps {
+  badges: TrustBadge[];
+  /** Layout direction */
+  layout?: "row" | "grid";
+  className?: string;
+}
+declare function TrustBadges({
+  badges,
+  layout,
+  className
+}: TrustBadgesProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { TrustBadge, TrustBadges, TrustBadgesProps };
+//# 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","names":[],"sources":["../../../../src/client/storefront/components/trust-badges.tsx"],"mappings":";;;;UAKiB,UAAA;EACf,IAAA,EAAM,OAAA,CAAM,SAAA;EACZ,KAAA;EACA,WAAA;AAAA;AAAA,UAGe,gBAAA;EACf,MAAA,EAAQ,UAAA;EANR;EAQA,MAAA;EACA,SAAA;AAAA;AAAA,iBAKc,WAAA,CAAA;EAAc,MAAA;EAAQ,MAAA;EAAgB;AAAA,GAAa,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,30 @@
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/trust-badges.tsx
+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))
+	});
+}
+//#endregion
+export { TrustBadges };
+
+//# sourceMappingURL=trust-badges.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trust-badges.mjs","names":[],"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":";;;;AAoBA,SAAgB,YAAY,EAAE,QAAQ,SAAS,OAAO,aAA+B;AACnF,KAAI,OAAO,WAAW,EAAG,QAAO;AAEhC,QACE,oBAAC,OAAD;EACE,WAAW,GACT,WAAW,QACP,6DACA,yCACJ,UACD;YAEA,OAAO,KAAK,OAAO,MAClB,qBAAC,OAAD;GAAa,WAAU;aAAvB,CACE,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM;IACH,CAAA,EACN,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAiC,MAAM;KAAa,CAAA,EACnE,MAAM,eACL,oBAAC,QAAD;KAAM,WAAU;eAAiC,MAAM;KAAmB,CAAA,CAExE;MACF;KAVI,EAUJ,CACN;EACE,CAAA"}

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

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/variant-selector.d.ts
+interface VariantOption {
+  id: string;
+  label: string;
+  available?: boolean;
+  value?: string;
+}
+interface VariantAxis {
+  name: string;
+  options: VariantOption[];
+}
+interface VariantSelectorProps {
+  axes: VariantAxis[];
+  selected: Record<string, string>;
+  onChange: (axis: string, optionId: string) => void;
+  labels?: {
+    unavailableHint?: string;
+  };
+  className?: string;
+}
+declare function VariantSelector({
+  axes,
+  selected,
+  onChange,
+  labels,
+  className
+}: VariantSelectorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { VariantAxis, VariantOption, VariantSelector, VariantSelectorProps };
+//# 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","names":[],"sources":["../../../../src/client/storefront/components/variant-selector.tsx"],"mappings":";;;UAEiB,aAAA;EACf,EAAA;EACA,KAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,UAGe,WAAA;EACf,IAAA;EACA,OAAA,EAAS,aAAA;AAAA;AAAA,UAGM,oBAAA;EACf,IAAA,EAAM,WAAA;EACN,QAAA,EAAU,MAAA;EACV,QAAA,GAAW,IAAA,UAAc,QAAA;EACzB,MAAA;IACE,eAAA;EAAA;EAEF,SAAA;AAAA;AAAA,iBAGc,eAAA,CAAA;EACd,IAAA;EACA,QAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/variant-selector.tsx
+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))
+	});
+}
+//#endregion
+export { VariantSelector };
+
+//# sourceMappingURL=variant-selector.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variant-selector.mjs","names":[],"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":";;;AAwBA,SAAgB,gBAAgB,EAC9B,MACA,UACA,UACA,SAAS,EAAE,EACX,YAAY,MACW;CACvB,MAAM,EAAE,kBAAkB,kBAAkB;AAE5C,QACE,oBAAC,OAAD;EAAK,WAAW,uBAAuB;YACpC,KAAK,KAAK,SACT,qBAAC,YAAD;GAA0B,WAAU;aAApC,CACE,oBAAC,UAAD;IAAQ,WAAU;cACf,KAAK;IACC,CAAA,EAET,oBAAC,OAAD;IAAK,WAAU;IAAuB,MAAK;IAAa,cAAY,KAAK;cACtE,KAAK,QAAQ,KAAK,WAAW;KAC5B,MAAM,aAAa,SAAS,KAAK,UAAU,OAAO;KAClD,MAAM,cAAc,OAAO,cAAc;AAEzC,YACE,oBAAC,UAAD;MAEE,MAAK;MACL,MAAK;MACL,gBAAc;MACd,cACE,cACI,GAAG,OAAO,UACV,GAAG,OAAO,MAAM,KAAK;MAE3B,eAAe,SAAS,KAAK,MAAM,OAAO,GAAG;MAC7C,WAAW;;;;sBAKP,aACI,+HACA,+GACL;sBAEC,CAAC,cACG,4BACA,GACL;;gBAGF,OAAO;MACD,EA3BF,OAAO,GA2BL;MAEX;IACE,CAAA,CACG;KA3CI,KAAK,KA2CT,CACX;EACE,CAAA"}

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/wishlist-toggle.d.ts
+interface WishlistToggleProps {
+  active?: boolean;
+  onToggle?: () => void;
+  loading?: boolean;
+  size?: "sm" | "default" | "lg";
+  className?: string;
+  label?: string;
+  /** Label when active state is true */
+  activeLabel?: string;
+}
+declare function WishlistToggle({
+  active,
+  onToggle,
+  loading,
+  size,
+  className,
+  label,
+  activeLabel
+}: WishlistToggleProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { WishlistToggle, WishlistToggleProps };
+//# 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","names":[],"sources":["../../../../src/client/storefront/components/wishlist-toggle.tsx"],"mappings":";;;UAMiB,mBAAA;EACf,MAAA;EACA,QAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA;EALA;EAOA,WAAA;AAAA;AAAA,iBAGc,cAAA,CAAA;EACd,MAAA;EACA,QAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA;EACA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,32 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/components/wishlist-toggle.tsx
+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") })
+	});
+}
+//#endregion
+export { WishlistToggle };
+
+//# sourceMappingURL=wishlist-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wishlist-toggle.mjs","names":[],"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":";;;;;;AAiBA,SAAgB,eAAe,EAC7B,SAAS,OACT,UACA,UAAU,OACV,OAAO,WACP,WACA,QAAQ,mBACR,cAAc,0BACQ;CACtB,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,cAAc;EAClB,IAAI;EACJ,SAAS;EACT,IAAI;EACL;CAED,MAAM,YAAY;EAChB,IAAI;EACJ,SAAS;EACT,IAAI;EACL;AAED,QACE,oBAAC,UAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU;EACV,cAAY,SAAS,cAAc;EACnC,gBAAc;EACd,WAAW,GACT,qGACA,kJACA,oDACA,YAAY,OACZ,UAAU,6BACV,CAAC,UAAU,kCACX,UACD;YAED,oBAAC,WAAD,EACE,WAAW,GACT,UAAU,OACV,sDACA,UAAU,YACX,EACD,CAAA;EACK,CAAA"}

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

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/filters/filter-chip.d.ts
+interface FilterChipProps {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  onRemove?: () => void;
+  className?: string;
+}
+declare function FilterChip({
+  label,
+  active,
+  onClick,
+  onRemove,
+  className
+}: FilterChipProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+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","names":[],"sources":["../../../../src/client/storefront/filters/filter-chip.tsx"],"mappings":";;;UAOU,eAAA;EACR,KAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AAAA;AAAA,iBAGO,UAAA,CAAA;EAAa,KAAA;EAAO,MAAA;EAAQ,OAAA;EAAS,QAAA;EAAU;AAAA,GAAa,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,22 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Toggle } from "../../ui-resolver/toggle.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/filters/filter-chip.tsx
+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" })]
+	});
+}
+//#endregion
+export { FilterChip };
+
+//# sourceMappingURL=filter-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.mjs","names":[],"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":";;;;;;;AAeA,SAAS,WAAW,EAAE,OAAO,QAAQ,SAAS,UAAU,aAA8B;CACpF,MAAM,YAAY,QAAQ,QAAQ;AAClC,QACE,qBAAC,QAAD;EACE,SAAS;EACT,uBAAwB,UAAU,WAAW,UAAU,GAAG,SAAS;EACnE,SAAQ;EACR,WAAW,GACT,qEACA,UACE,2FACF,UACD;EACD,cAAY,SAAS,UAAU,UAAU;YAV3C,CAYG,OACA,UAAU,YAAY,oBAAC,WAAD,EAAW,WAAU,8BAA+B,CAAA,CACpE"}

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

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/filters/filter-group.d.ts
+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): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FilterGroup, type FilterGroupProps, type FilterOption };
+//# sourceMappingURL=filter-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-group.d.ts","names":[],"sources":["../../../../src/client/storefront/filters/filter-group.tsx"],"mappings":";;;UAUU,YAAA;EACR,KAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,UAGQ,gBAAA;EACR,KAAA;EACA,IAAA;EACA,OAAA,EAAS,YAAA;EACT,QAAA;EACA,QAAA,GAAW,QAAA;EACX,WAAA;EACA,MAAA;IACE,IAAA;IACA,EAAA;EAAA;EAEF,SAAA;AAAA;AAAA,iBAGO,WAAA,CAAA;EACP,KAAA;EACA,IAAA;EACA,OAAA;EACA,QAAA;EACA,QAAA;EACA,WAAA;EACA,MAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,93 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Input } from "../../ui/input.mjs";
+import { Label } from "../../ui/label.mjs";
+import { Checkbox } from "../../ui/checkbox.mjs";
+import { ColorSwatch } from "../product/color-swatch.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/filters/filter-group.tsx
+function FilterGroup({ title, type, options, selected, onChange, defaultOpen = true, labels, className }) {
+	const ChevronDownIcon = useIcon("chevronDown");
+	const ChevronUpIcon = useIcon("chevronUp");
+	const [open, setOpen] = React$1.useState(defaultOpen);
+	const [priceMin, setPriceMin] = React$1.useState(selected[0] ?? "");
+	const [priceMax, setPriceMax] = React$1.useState(selected[1] ?? "");
+	const toggleOption = (value) => {
+		onChange(selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value]);
+	};
+	const handlePriceChange = (min, max) => {
+		setPriceMin(min);
+		setPriceMax(max);
+		onChange([min, max].filter(Boolean));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setOpen(!open),
+			className: "flex items-center justify-between py-3 text-sm font-medium",
+			"aria-expanded": open,
+			children: [title, open ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "relative size-4 text-muted-foreground hit-area-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "relative size-4 text-muted-foreground hit-area-3" })]
+		}), open && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 pb-4",
+			children: [
+				type === "checkbox" && options.map((opt) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							id: `filter-${opt.value}`,
+							checked: selected.includes(opt.value),
+							onCheckedChange: () => toggleOption(opt.value)
+						}), /* @__PURE__ */ jsx(Label, {
+							htmlFor: `filter-${opt.value}`,
+							className: "text-sm font-normal cursor-pointer",
+							children: opt.label
+						})]
+					}), opt.count != null && /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: opt.count
+					})]
+				}, opt.value)),
+				type === "color" && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-2",
+					children: options.map((opt) => /* @__PURE__ */ jsx(ColorSwatch, {
+						color: opt.color ?? "#ccc",
+						selected: selected.includes(opt.value),
+						onClick: () => toggleOption(opt.value),
+						label: opt.label
+					}, opt.value))
+				}),
+				type === "price" && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							type: "number",
+							placeholder: labels?.from ?? "From",
+							value: priceMin,
+							onChange: (e) => handlePriceChange(e.target.value, priceMax),
+							className: "w-24"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "–"
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							type: "number",
+							placeholder: labels?.to ?? "To",
+							value: priceMax,
+							onChange: (e) => handlePriceChange(priceMin, e.target.value),
+							className: "w-24"
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { FilterGroup };
+
+//# sourceMappingURL=filter-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-group.mjs","names":["React"],"sources":["../../../../src/client/storefront/filters/filter-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { Checkbox } from \"../../ui/checkbox\"\nimport { Label } from \"../../ui/label\"\nimport { Input } from \"../../ui/input\"\nimport { cn } from \"../../ui/utils\"\nimport { ColorSwatch } from \"../product/color-swatch\"\n\ninterface FilterOption {\n  value: string\n  label: string\n  color?: string\n  count?: number\n}\n\ninterface FilterGroupProps {\n  title: string\n  type: \"checkbox\" | \"color\" | \"price\"\n  options: FilterOption[]\n  selected: string[]\n  onChange: (selected: string[]) => void\n  defaultOpen?: boolean\n  labels?: {\n    from?: string\n    to?: string\n  }\n  className?: string\n}\n\nfunction FilterGroup({\n  title,\n  type,\n  options,\n  selected,\n  onChange,\n  defaultOpen = true,\n  labels,\n  className,\n}: FilterGroupProps) {\n  const ChevronDownIcon = useIcon(\"chevronDown\")\n  const ChevronUpIcon = useIcon(\"chevronUp\")\n  const [open, setOpen] = React.useState(defaultOpen)\n  const [priceMin, setPriceMin] = React.useState(selected[0] ?? \"\")\n  const [priceMax, setPriceMax] = React.useState(selected[1] ?? \"\")\n\n  const toggleOption = (value: string) => {\n    const next = selected.includes(value)\n      ? selected.filter((v) => v !== value)\n      : [...selected, value]\n    onChange(next)\n  }\n\n  const handlePriceChange = (min: string, max: string) => {\n    setPriceMin(min)\n    setPriceMax(max)\n    onChange([min, max].filter(Boolean))\n  }\n\n  return (\n    <div className={cn(\"flex flex-col\", className)}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen(!open)}\n        className=\"flex items-center justify-between py-3 text-sm font-medium\"\n        aria-expanded={open}\n      >\n        {title}\n        {open ? <ChevronUpIcon className=\"relative size-4 text-muted-foreground hit-area-3\" /> : <ChevronDownIcon className=\"relative size-4 text-muted-foreground hit-area-3\" />}\n      </button>\n\n      {open && (\n        <div className=\"flex flex-col gap-3 pb-4\">\n          {type === \"checkbox\" &&\n            options.map((opt) => (\n              <div key={opt.value} className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  <Checkbox\n                    id={`filter-${opt.value}`}\n                    checked={selected.includes(opt.value)}\n                    onCheckedChange={() => toggleOption(opt.value)}\n                  />\n                  <Label htmlFor={`filter-${opt.value}`} className=\"text-sm font-normal cursor-pointer\">\n                    {opt.label}\n                  </Label>\n                </div>\n                {opt.count != null && (\n                  <span className=\"text-xs text-muted-foreground\">{opt.count}</span>\n                )}\n              </div>\n            ))}\n\n          {type === \"color\" && (\n            <div className=\"flex flex-wrap gap-2\">\n              {options.map((opt) => (\n                <ColorSwatch\n                  key={opt.value}\n                  color={opt.color ?? \"#ccc\"}\n                  selected={selected.includes(opt.value)}\n                  onClick={() => toggleOption(opt.value)}\n                  label={opt.label}\n                />\n              ))}\n            </div>\n          )}\n\n          {type === \"price\" && (\n            <div className=\"flex items-center gap-2\">\n              <Input\n                type=\"number\"\n                placeholder={labels?.from ?? \"From\"}\n                value={priceMin}\n                onChange={(e) => handlePriceChange(e.target.value, priceMax)}\n                className=\"w-24\"\n              />\n              <span className=\"text-muted-foreground\">–</span>\n              <Input\n                type=\"number\"\n                placeholder={labels?.to ?? \"To\"}\n                value={priceMax}\n                onChange={(e) => handlePriceChange(priceMin, e.target.value)}\n                className=\"w-24\"\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { FilterGroup, type FilterGroupProps, type FilterOption }\n"],"mappings":";;;;;;;;;;AA+BA,SAAS,YAAY,EACnB,OACA,MACA,SACA,UACA,UACA,cAAc,MACd,QACA,aACmB;CACnB,MAAM,kBAAkB,QAAQ,cAAc;CAC9C,MAAM,gBAAgB,QAAQ,YAAY;CAC1C,MAAM,CAAC,MAAM,WAAWA,QAAM,SAAS,YAAY;CACnD,MAAM,CAAC,UAAU,eAAeA,QAAM,SAAS,SAAS,MAAM,GAAG;CACjE,MAAM,CAAC,UAAU,eAAeA,QAAM,SAAS,SAAS,MAAM,GAAG;CAEjE,MAAM,gBAAgB,UAAkB;AAItC,WAHa,SAAS,SAAS,MAAM,GACjC,SAAS,QAAQ,MAAM,MAAM,MAAM,GACnC,CAAC,GAAG,UAAU,MAAM,CACV;;CAGhB,MAAM,qBAAqB,KAAa,QAAgB;AACtD,cAAY,IAAI;AAChB,cAAY,IAAI;AAChB,WAAS,CAAC,KAAK,IAAI,CAAC,OAAO,QAAQ,CAAC;;AAGtC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB,UAAU;YAA9C,CACE,qBAAC,UAAD;GACE,MAAK;GACL,eAAe,QAAQ,CAAC,KAAK;GAC7B,WAAU;GACV,iBAAe;aAJjB,CAMG,OACA,OAAO,oBAAC,eAAD,EAAe,WAAU,oDAAqD,CAAA,GAAG,oBAAC,iBAAD,EAAiB,WAAU,oDAAqD,CAAA,CAClK;MAER,QACC,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,SAAS,cACR,QAAQ,KAAK,QACX,qBAAC,OAAD;KAAqB,WAAU;eAA/B,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,UAAD;OACE,IAAI,UAAU,IAAI;OAClB,SAAS,SAAS,SAAS,IAAI,MAAM;OACrC,uBAAuB,aAAa,IAAI,MAAM;OAC9C,CAAA,EACF,oBAAC,OAAD;OAAO,SAAS,UAAU,IAAI;OAAS,WAAU;iBAC9C,IAAI;OACC,CAAA,CACJ;SACL,IAAI,SAAS,QACZ,oBAAC,QAAD;MAAM,WAAU;gBAAiC,IAAI;MAAa,CAAA,CAEhE;OAdI,IAAI,MAcR,CACN;IAEH,SAAS,WACR,oBAAC,OAAD;KAAK,WAAU;eACZ,QAAQ,KAAK,QACZ,oBAAC,aAAD;MAEE,OAAO,IAAI,SAAS;MACpB,UAAU,SAAS,SAAS,IAAI,MAAM;MACtC,eAAe,aAAa,IAAI,MAAM;MACtC,OAAO,IAAI;MACX,EALK,IAAI,MAKT,CACF;KACE,CAAA;IAGP,SAAS,WACR,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,OAAD;OACE,MAAK;OACL,aAAa,QAAQ,QAAQ;OAC7B,OAAO;OACP,WAAW,MAAM,kBAAkB,EAAE,OAAO,OAAO,SAAS;OAC5D,WAAU;OACV,CAAA;MACF,oBAAC,QAAD;OAAM,WAAU;iBAAwB;OAAQ,CAAA;MAChD,oBAAC,OAAD;OACE,MAAK;OACL,aAAa,QAAQ,MAAM;OAC3B,OAAO;OACP,WAAW,MAAM,kBAAkB,UAAU,EAAE,OAAO,MAAM;OAC5D,WAAU;OACV,CAAA;MACE;;IAEJ;KAEJ"}

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

@@ -0,0 +1,38 @@
+import { FilterOption } from "./filter-group.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/filters/filter-panel.d.ts
+interface FilterDefinition {
+  key: string;
+  title: string;
+  type: "checkbox" | "color" | "price";
+  options: FilterOption[];
+}
+type ActiveFilters = Record<string, string[]>;
+interface FilterPanelProps {
+  filters: FilterDefinition[];
+  activeFilters: ActiveFilters;
+  onFilterChange: (key: string, selected: string[]) => void;
+  productCount?: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  labels?: {
+    title?: string;
+    clearAll?: string;
+    showResults?: string;
+  };
+  className?: string;
+}
+declare function FilterPanel({
+  filters,
+  activeFilters,
+  onFilterChange,
+  productCount,
+  open,
+  onOpenChange,
+  labels,
+  className
+}: FilterPanelProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type ActiveFilters, type FilterDefinition, FilterPanel, type FilterPanelProps };
+//# sourceMappingURL=filter-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-panel.d.ts","names":[],"sources":["../../../../src/client/storefront/filters/filter-panel.tsx"],"mappings":";;;;UAUU,gBAAA;EACR,GAAA;EACA,KAAA;EACA,IAAA;EACA,OAAA,EAAS,YAAA;AAAA;AAAA,KAGN,aAAA,GAAgB,MAAA;AAAA,UAEX,gBAAA;EACR,OAAA,EAAS,gBAAA;EACT,aAAA,EAAe,aAAA;EACf,cAAA,GAAiB,GAAA,UAAa,QAAA;EAC9B,YAAA;EACA,IAAA;EACA,YAAA,GAAe,IAAA;EACf,MAAA;IACE,KAAA;IACA,QAAA;IACA,WAAA;EAAA;EAEF,SAAA;AAAA;AAAA,iBA2FO,WAAA,CAAA;EACP,OAAA;EACA,aAAA;EACA,cAAA;EACA,YAAA;EACA,IAAA;EACA,YAAA;EACA,MAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}