@enadhq/enad-react-sdk 1.0.2 → 1.1.0

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

@@ -1,102 +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";
-import * as React from "react";
-import { useIcon } from "../../icons/icon-context";
-import { Checkbox } from "../../ui/checkbox";
-import { Label } from "../../ui/label";
-import { Input } from "../../ui/input";
-import { cn } from "../../ui/utils";
-import { ColorSwatch } from "../product/color-swatch";
-function FilterGroup({
-  title,
-  type,
-  options,
-  selected,
-  onChange,
-  defaultOpen = true,
-  labels,
-  className
-}) {
-  const ChevronDownIcon = useIcon("chevronDown");
-  const ChevronUpIcon = useIcon("chevronUp");
-  const [open, setOpen] = React.useState(defaultOpen);
-  const [priceMin, setPriceMin] = React.useState(selected[0] ?? "");
-  const [priceMax, setPriceMax] = React.useState(selected[1] ?? "");
-  const toggleOption = (value) => {
-    const next = selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value];
-    onChange(next);
-  };
-  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: "\u2013" }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "number",
-            placeholder: labels?.to ?? "To",
-            value: priceMax,
-            onChange: (e) => handlePriceChange(priceMin, e.target.value),
-            className: "w-24"
-          }
-        )
-      ] })
-    ] })
-  ] });
+//#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"
+						})
+					]
+				})
+			]
+		})]
+	});
 }
-export {
-  FilterGroup
-};
+//#endregion
+export { FilterGroup };
+
 //# sourceMappingURL=filter-group.mjs.map

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

@@ -1 +1 @@
-{"version":3,"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":"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","names":[]}
+{"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

@@ -1,25 +1,38 @@
-import { type FilterOption } from "./filter-group";
+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[];
+  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;
+  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): import("react/jsx-runtime").JSX.Element;
-export { FilterPanel, type FilterPanelProps, type FilterDefinition, type ActiveFilters };
+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

@@ -1 +1 @@
-{"version":3,"file":"filter-panel.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/filters/filter-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEhE,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;IACrC,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB;AAED,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAE9C,UAAU,gBAAgB;IACxB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,aAAa,CAAC;IAC7B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0FD,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,SAAS,GACV,EAAE,gBAAgB,2CAmClB;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,CAAC"}
+{"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"}

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

@@ -1,110 +1,109 @@
 "use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Separator } from "../../ui-resolver/separator.mjs";
+import { Sheet, SheetContent, SheetTitle } from "../../ui-resolver/sheet.mjs";
+import { FilterGroup } from "./filter-group.mjs";
+import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useIcon } from "../../icons/icon-context";
-import { Button } from "../../ui/button";
-import { Separator } from "../../ui-resolver/separator";
-import { Sheet, SheetContent, SheetTitle } from "../../ui-resolver/sheet";
-import { cn } from "../../ui/utils";
-import { FilterGroup } from "./filter-group";
-function FilterPanelContent({
-  filters,
-  activeFilters,
-  onFilterChange,
-  productCount,
-  onClose,
-  labels
-}) {
-  const SlidersIcon = useIcon("sliders");
-  const CloseIcon = useIcon("close");
-  const totalActive = Object.values(activeFilters).reduce(
-    (sum, arr) => sum + arr.filter(Boolean).length,
-    0
-  );
-  const clearAll = () => {
-    for (const filter of filters) {
-      onFilterChange(filter.key, []);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(SlidersIcon, { className: "size-5" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: labels?.title ?? "Filter & Sort" }),
-        totalActive > 0 && /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground", children: totalActive })
-      ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, "aria-label": "Close filters", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
-    ] }),
-    /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
-      totalActive > 0 && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: clearAll,
-          className: "mb-4 text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground",
-          children: labels?.clearAll ?? "Clear all"
-        }
-      ),
-      filters.map((filter) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          FilterGroup,
-          {
-            title: filter.title,
-            type: filter.type,
-            options: filter.options,
-            selected: activeFilters[filter.key] ?? [],
-            onChange: (selected) => onFilterChange(filter.key, selected)
-          }
-        ),
-        /* @__PURE__ */ jsx(Separator, {})
-      ] }, filter.key))
-    ] }),
-    productCount != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onClose, children: labels?.showResults ? labels.showResults.replace("{count}", String(productCount)) : `Show ${productCount} results` }) })
-    ] })
-  ] });
+//#region src/client/storefront/filters/filter-panel.tsx
+function FilterPanelContent({ filters, activeFilters, onFilterChange, productCount, onClose, labels }) {
+	const SlidersIcon = useIcon("sliders");
+	const CloseIcon = useIcon("close");
+	const totalActive = Object.values(activeFilters).reduce((sum, arr) => sum + arr.filter(Boolean).length, 0);
+	const clearAll = () => {
+		for (const filter of filters) onFilterChange(filter.key, []);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(SlidersIcon, { className: "size-5" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium",
+							children: labels?.title ?? "Filter & Sort"
+						}),
+						totalActive > 0 && /* @__PURE__ */ jsx("span", {
+							className: "flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground",
+							children: totalActive
+						})
+					]
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon",
+					onClick: onClose,
+					"aria-label": "Close filters",
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Separator, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 overflow-y-auto p-4",
+				children: [totalActive > 0 && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: clearAll,
+					className: "mb-4 text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground",
+					children: labels?.clearAll ?? "Clear all"
+				}), filters.map((filter) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx(FilterGroup, {
+					title: filter.title,
+					type: filter.type,
+					options: filter.options,
+					selected: activeFilters[filter.key] ?? [],
+					onChange: (selected) => onFilterChange(filter.key, selected)
+				}), /* @__PURE__ */ jsx(Separator, {})] }, filter.key))]
+			}),
+			productCount != null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx("div", {
+				className: "p-4",
+				children: /* @__PURE__ */ jsx(Button, {
+					className: "w-full",
+					onClick: onClose,
+					children: labels?.showResults ? labels.showResults.replace("{count}", String(productCount)) : `Show ${productCount} results`
+				})
+			})] })
+		]
+	});
 }
-function FilterPanel({
-  filters,
-  activeFilters,
-  onFilterChange,
-  productCount,
-  open,
-  onOpenChange,
-  labels,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cn("md:hidden", className), children: /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-full max-w-sm p-0", showCloseButton: false, children: [
-      /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: labels?.title ?? "Filters" }),
-      /* @__PURE__ */ jsx(
-        FilterPanelContent,
-        {
-          filters,
-          activeFilters,
-          onFilterChange,
-          productCount,
-          onClose: () => onOpenChange(false),
-          labels
-        }
-      )
-    ] }) }) }),
-    open && /* @__PURE__ */ jsx("aside", { className: cn("hidden w-full max-w-[280px] md:block", className), children: /* @__PURE__ */ jsx(
-      FilterPanelContent,
-      {
-        filters,
-        activeFilters,
-        onFilterChange,
-        productCount,
-        onClose: () => onOpenChange(false),
-        labels
-      }
-    ) })
-  ] });
+function FilterPanel({ filters, activeFilters, onFilterChange, productCount, open, onOpenChange, labels, className }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: cn("md:hidden", className),
+		children: /* @__PURE__ */ jsx(Sheet, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ jsxs(SheetContent, {
+				side: "left",
+				className: "w-full max-w-sm p-0",
+				children: [/* @__PURE__ */ jsx(SheetTitle, {
+					className: "sr-only",
+					showClose: false,
+					children: labels?.title ?? "Filters"
+				}), /* @__PURE__ */ jsx(FilterPanelContent, {
+					filters,
+					activeFilters,
+					onFilterChange,
+					productCount,
+					onClose: () => onOpenChange(false),
+					labels
+				})]
+			})
+		})
+	}), open && /* @__PURE__ */ jsx("aside", {
+		className: cn("hidden w-full max-w-[280px] md:block", className),
+		children: /* @__PURE__ */ jsx(FilterPanelContent, {
+			filters,
+			activeFilters,
+			onFilterChange,
+			productCount,
+			onClose: () => onOpenChange(false),
+			labels
+		})
+	})] });
 }
-export {
-  FilterPanel
-};
+//#endregion
+export { FilterPanel };
+
 //# sourceMappingURL=filter-panel.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/storefront/filters/filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { Separator } from \"../../ui-resolver/separator\";\nimport { Sheet, SheetContent, SheetTitle } from \"../../ui-resolver/sheet\";\nimport { cn } from \"../../ui/utils\";\nimport { FilterGroup, type FilterOption } from \"./filter-group\";\n\ninterface FilterDefinition {\n  key: string;\n  title: string;\n  type: \"checkbox\" | \"color\" | \"price\";\n  options: FilterOption[];\n}\n\ntype ActiveFilters = Record<string, string[]>;\n\ninterface FilterPanelProps {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  labels?: {\n    title?: string;\n    clearAll?: string;\n    showResults?: string;\n  };\n  className?: string;\n}\n\nfunction FilterPanelContent({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  onClose,\n  labels,\n}: {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  onClose: () => void;\n  labels?: FilterPanelProps[\"labels\"];\n}) {\n  const SlidersIcon = useIcon(\"sliders\");\n  const CloseIcon = useIcon(\"close\");\n  const totalActive = Object.values(activeFilters).reduce(\n    (sum, arr) => sum + arr.filter(Boolean).length,\n    0,\n  );\n\n  const clearAll = () => {\n    for (const filter of filters) {\n      onFilterChange(filter.key, []);\n    }\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center justify-between p-4\">\n        <div className=\"flex items-center gap-2\">\n          <SlidersIcon className=\"size-5\" />\n          <span className=\"text-sm font-medium\">{labels?.title ?? \"Filter & Sort\"}</span>\n          {totalActive > 0 && (\n            <span className=\"flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground\">\n              {totalActive}\n            </span>\n          )}\n        </div>\n        <Button variant=\"ghost\" size=\"icon\" onClick={onClose} aria-label=\"Close filters\">\n          <CloseIcon />\n        </Button>\n      </div>\n\n      <Separator />\n\n      <div className=\"flex-1 overflow-y-auto p-4\">\n        {totalActive > 0 && (\n          <button\n            type=\"button\"\n            onClick={clearAll}\n            className=\"mb-4 text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground\"\n          >\n            {labels?.clearAll ?? \"Clear all\"}\n          </button>\n        )}\n\n        {filters.map((filter) => (\n          <React.Fragment key={filter.key}>\n            <FilterGroup\n              title={filter.title}\n              type={filter.type}\n              options={filter.options}\n              selected={activeFilters[filter.key] ?? []}\n              onChange={(selected) => onFilterChange(filter.key, selected)}\n            />\n            <Separator />\n          </React.Fragment>\n        ))}\n      </div>\n\n      {productCount != null && (\n        <>\n          <Separator />\n          <div className=\"p-4\">\n            <Button className=\"w-full\" onClick={onClose}>\n              {labels?.showResults\n                ? labels.showResults.replace(\"{count}\", String(productCount))\n                : `Show ${productCount} results`}\n            </Button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nfunction FilterPanel({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  open,\n  onOpenChange,\n  labels,\n  className,\n}: FilterPanelProps) {\n  return (\n    <>\n      {/* Mobile: Sheet */}\n      <div className={cn(\"md:hidden\", className)}>\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent side=\"left\" className=\"w-full max-w-sm p-0\" showCloseButton={false}>\n            <SheetTitle className=\"sr-only\">{labels?.title ?? \"Filters\"}</SheetTitle>\n            <FilterPanelContent\n              filters={filters}\n              activeFilters={activeFilters}\n              onFilterChange={onFilterChange}\n              productCount={productCount}\n              onClose={() => onOpenChange(false)}\n              labels={labels}\n            />\n          </SheetContent>\n        </Sheet>\n      </div>\n\n      {/* Desktop: Sidebar */}\n      {open && (\n        <aside className={cn(\"hidden w-full max-w-[280px] md:block\", className)}>\n          <FilterPanelContent\n            filters={filters}\n            activeFilters={activeFilters}\n            onFilterChange={onFilterChange}\n            productCount={productCount}\n            onClose={() => onOpenChange(false)}\n            labels={labels}\n          />\n        </aside>\n      )}\n    </>\n  );\n}\n\nexport { FilterPanel, type FilterPanelProps, type FilterDefinition, type ActiveFilters };\n"],"mappings":";AAiEQ,SA0CA,UAzCE,KADF;AA/DR,YAAY,WAAW;AACvB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,OAAO,cAAc,kBAAkB;AAChD,SAAS,UAAU;AACnB,SAAS,mBAAsC;AA0B/C,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,cAAc,QAAQ,SAAS;AACrC,QAAM,YAAY,QAAQ,OAAO;AACjC,QAAM,cAAc,OAAO,OAAO,aAAa,EAAE;AAAA,IAC/C,CAAC,KAAK,QAAQ,MAAM,IAAI,OAAO,OAAO,EAAE;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,eAAW,UAAU,SAAS;AAC5B,qBAAe,OAAO,KAAK,CAAC,CAAC;AAAA,IAC/B;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,wBACb;AAAA,yBAAC,SAAI,WAAU,yCACb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,eAAY,WAAU,UAAS;AAAA,QAChC,oBAAC,UAAK,WAAU,uBAAuB,kBAAQ,SAAS,iBAAgB;AAAA,QACvE,cAAc,KACb,oBAAC,UAAK,WAAU,mGACb,uBACH;AAAA,SAEJ;AAAA,MACA,oBAAC,UAAO,SAAQ,SAAQ,MAAK,QAAO,SAAS,SAAS,cAAW,iBAC/D,8BAAC,aAAU,GACb;AAAA,OACF;AAAA,IAEA,oBAAC,aAAU;AAAA,IAEX,qBAAC,SAAI,WAAU,8BACZ;AAAA,oBAAc,KACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UAET,kBAAQ,YAAY;AAAA;AAAA,MACvB;AAAA,MAGD,QAAQ,IAAI,CAAC,WACZ,qBAAC,MAAM,UAAN,EACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,OAAO;AAAA,YACd,MAAM,OAAO;AAAA,YACb,SAAS,OAAO;AAAA,YAChB,UAAU,cAAc,OAAO,GAAG,KAAK,CAAC;AAAA,YACxC,UAAU,CAAC,aAAa,eAAe,OAAO,KAAK,QAAQ;AAAA;AAAA,QAC7D;AAAA,QACA,oBAAC,aAAU;AAAA,WARQ,OAAO,GAS5B,CACD;AAAA,OACH;AAAA,IAEC,gBAAgB,QACf,iCACE;AAAA,0BAAC,aAAU;AAAA,MACX,oBAAC,SAAI,WAAU,OACb,8BAAC,UAAO,WAAU,UAAS,SAAS,SACjC,kBAAQ,cACL,OAAO,YAAY,QAAQ,WAAW,OAAO,YAAY,CAAC,IAC1D,QAAQ,YAAY,YAC1B,GACF;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,SACE,iCAEE;AAAA,wBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACvC,8BAAC,SAAM,MAAY,cACjB,+BAAC,gBAAa,MAAK,QAAO,WAAU,uBAAsB,iBAAiB,OACzE;AAAA,0BAAC,cAAW,WAAU,WAAW,kBAAQ,SAAS,WAAU;AAAA,MAC5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS,MAAM,aAAa,KAAK;AAAA,UACjC;AAAA;AAAA,MACF;AAAA,OACF,GACF,GACF;AAAA,IAGC,QACC,oBAAC,WAAM,WAAW,GAAG,wCAAwC,SAAS,GACpE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC;AAAA;AAAA,IACF,GACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"file":"filter-panel.mjs","names":["React"],"sources":["../../../../src/client/storefront/filters/filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { Separator } from \"../../ui-resolver/separator\";\nimport { Sheet, SheetContent, SheetTitle } from \"../../ui-resolver/sheet\";\nimport { cn } from \"../../ui/utils\";\nimport { FilterGroup, type FilterOption } from \"./filter-group\";\n\ninterface FilterDefinition {\n  key: string;\n  title: string;\n  type: \"checkbox\" | \"color\" | \"price\";\n  options: FilterOption[];\n}\n\ntype ActiveFilters = Record<string, string[]>;\n\ninterface FilterPanelProps {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  labels?: {\n    title?: string;\n    clearAll?: string;\n    showResults?: string;\n  };\n  className?: string;\n}\n\nfunction FilterPanelContent({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  onClose,\n  labels,\n}: {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  onClose: () => void;\n  labels?: FilterPanelProps[\"labels\"];\n}) {\n  const SlidersIcon = useIcon(\"sliders\");\n  const CloseIcon = useIcon(\"close\");\n  const totalActive = Object.values(activeFilters).reduce(\n    (sum, arr) => sum + arr.filter(Boolean).length,\n    0,\n  );\n\n  const clearAll = () => {\n    for (const filter of filters) {\n      onFilterChange(filter.key, []);\n    }\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center justify-between p-4\">\n        <div className=\"flex items-center gap-2\">\n          <SlidersIcon className=\"size-5\" />\n          <span className=\"text-sm font-medium\">{labels?.title ?? \"Filter & Sort\"}</span>\n          {totalActive > 0 && (\n            <span className=\"flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground\">\n              {totalActive}\n            </span>\n          )}\n        </div>\n        <Button variant=\"ghost\" size=\"icon\" onClick={onClose} aria-label=\"Close filters\">\n          <CloseIcon />\n        </Button>\n      </div>\n\n      <Separator />\n\n      <div className=\"flex-1 overflow-y-auto p-4\">\n        {totalActive > 0 && (\n          <button\n            type=\"button\"\n            onClick={clearAll}\n            className=\"mb-4 text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground\"\n          >\n            {labels?.clearAll ?? \"Clear all\"}\n          </button>\n        )}\n\n        {filters.map((filter) => (\n          <React.Fragment key={filter.key}>\n            <FilterGroup\n              title={filter.title}\n              type={filter.type}\n              options={filter.options}\n              selected={activeFilters[filter.key] ?? []}\n              onChange={(selected) => onFilterChange(filter.key, selected)}\n            />\n            <Separator />\n          </React.Fragment>\n        ))}\n      </div>\n\n      {productCount != null && (\n        <>\n          <Separator />\n          <div className=\"p-4\">\n            <Button className=\"w-full\" onClick={onClose}>\n              {labels?.showResults\n                ? labels.showResults.replace(\"{count}\", String(productCount))\n                : `Show ${productCount} results`}\n            </Button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nfunction FilterPanel({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  open,\n  onOpenChange,\n  labels,\n  className,\n}: FilterPanelProps) {\n  return (\n    <>\n      {/* Mobile: Sheet */}\n      <div className={cn(\"md:hidden\", className)}>\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent side=\"left\" className=\"w-full max-w-sm p-0\">\n            <SheetTitle className=\"sr-only\" showClose={false}>\n              {labels?.title ?? \"Filters\"}\n            </SheetTitle>\n            <FilterPanelContent\n              filters={filters}\n              activeFilters={activeFilters}\n              onFilterChange={onFilterChange}\n              productCount={productCount}\n              onClose={() => onOpenChange(false)}\n              labels={labels}\n            />\n          </SheetContent>\n        </Sheet>\n      </div>\n\n      {/* Desktop: Sidebar */}\n      {open && (\n        <aside className={cn(\"hidden w-full max-w-[280px] md:block\", className)}>\n          <FilterPanelContent\n            filters={filters}\n            activeFilters={activeFilters}\n            onFilterChange={onFilterChange}\n            productCount={productCount}\n            onClose={() => onOpenChange(false)}\n            labels={labels}\n          />\n        </aside>\n      )}\n    </>\n  );\n}\n\nexport { FilterPanel, type FilterPanelProps, type FilterDefinition, type ActiveFilters };\n"],"mappings":";;;;;;;;;;AAkCA,SAAS,mBAAmB,EAC1B,SACA,eACA,gBACA,cACA,SACA,UAQC;CACD,MAAM,cAAc,QAAQ,UAAU;CACtC,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,cAAc,OAAO,OAAO,cAAc,CAAC,QAC9C,KAAK,QAAQ,MAAM,IAAI,OAAO,QAAQ,CAAC,QACxC,EACD;CAED,MAAM,iBAAiB;AACrB,OAAK,MAAM,UAAU,QACnB,gBAAe,OAAO,KAAK,EAAE,CAAC;;AAIlC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,aAAD,EAAa,WAAU,UAAW,CAAA;MAClC,oBAAC,QAAD;OAAM,WAAU;iBAAuB,QAAQ,SAAS;OAAuB,CAAA;MAC9E,cAAc,KACb,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA;MAEL;QACN,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAO,SAAS;KAAS,cAAW;eAC/D,oBAAC,WAAD,EAAa,CAAA;KACN,CAAA,CACL;;GAEN,oBAAC,WAAD,EAAa,CAAA;GAEb,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,cAAc,KACb,oBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAET,QAAQ,YAAY;KACd,CAAA,EAGV,QAAQ,KAAK,WACZ,qBAACA,QAAM,UAAP,EAAA,UAAA,CACE,oBAAC,aAAD;KACE,OAAO,OAAO;KACd,MAAM,OAAO;KACb,SAAS,OAAO;KAChB,UAAU,cAAc,OAAO,QAAQ,EAAE;KACzC,WAAW,aAAa,eAAe,OAAO,KAAK,SAAS;KAC5D,CAAA,EACF,oBAAC,WAAD,EAAa,CAAA,CACE,EAAA,EATI,OAAO,IASX,CACjB,CACE;;GAEL,gBAAgB,QACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD;KAAQ,WAAU;KAAS,SAAS;eACjC,QAAQ,cACL,OAAO,YAAY,QAAQ,WAAW,OAAO,aAAa,CAAC,GAC3D,QAAQ,aAAa;KAClB,CAAA;IACL,CAAA,CACL,EAAA,CAAA;GAED;;;AAIV,SAAS,YAAY,EACnB,SACA,eACA,gBACA,cACA,MACA,cACA,QACA,aACmB;AACnB,QACE,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YACxC,oBAAC,OAAD;GAAa;GAAoB;aAC/B,qBAAC,cAAD;IAAc,MAAK;IAAO,WAAU;cAApC,CACE,oBAAC,YAAD;KAAY,WAAU;KAAU,WAAW;eACxC,QAAQ,SAAS;KACP,CAAA,EACb,oBAAC,oBAAD;KACW;KACM;KACC;KACF;KACd,eAAe,aAAa,MAAM;KAC1B;KACR,CAAA,CACW;;GACT,CAAA;EACJ,CAAA,EAGL,QACC,oBAAC,SAAD;EAAO,WAAW,GAAG,wCAAwC,UAAU;YACrE,oBAAC,oBAAD;GACW;GACM;GACC;GACF;GACd,eAAe,aAAa,MAAM;GAC1B;GACR,CAAA;EACI,CAAA,CAET,EAAA,CAAA"}

package/dist/client/storefront/filters/index.d.ts

@@ -1,6 +1,6 @@
-export { FilterChip, type FilterChipProps } from "./filter-chip";
-export { FilterGroup, type FilterGroupProps, type FilterOption } from "./filter-group";
-export { FilterPanel, type FilterPanelProps, type FilterDefinition, type ActiveFilters } from "./filter-panel";
-export { SortSelect, type SortSelectProps } from "./sort-select";
-export { ToggleListView, type ToggleListViewProps } from "./toggle-list-view";
-//# sourceMappingURL=index.d.ts.map
+import { FilterChip, FilterChipProps } from "./filter-chip.js";
+import { FilterGroup, FilterGroupProps, FilterOption } from "./filter-group.js";
+import { ActiveFilters, FilterDefinition, FilterPanel, FilterPanelProps } from "./filter-panel.js";
+import { SortSelect, SortSelectProps } from "./sort-select.js";
+import { ToggleListView, ToggleListViewProps } from "./toggle-list-view.js";
+export { type ActiveFilters, FilterChip, type FilterChipProps, type FilterDefinition, FilterGroup, type FilterGroupProps, type FilterOption, FilterPanel, type FilterPanelProps, SortSelect, type SortSelectProps, ToggleListView, type ToggleListViewProps };

package/dist/client/storefront/filters/index.mjs

@@ -1,13 +1,6 @@
-import { FilterChip } from "./filter-chip";
-import { FilterGroup } from "./filter-group";
-import { FilterPanel } from "./filter-panel";
-import { SortSelect } from "./sort-select";
-import { ToggleListView } from "./toggle-list-view";
-export {
-  FilterChip,
-  FilterGroup,
-  FilterPanel,
-  SortSelect,
-  ToggleListView
-};
-//# sourceMappingURL=index.mjs.map
+import { FilterChip } from "./filter-chip.mjs";
+import { FilterGroup } from "./filter-group.mjs";
+import { FilterPanel } from "./filter-panel.mjs";
+import { SortSelect } from "./sort-select.mjs";
+import { ToggleListView } from "./toggle-list-view.mjs";
+export { FilterChip, FilterGroup, FilterPanel, SortSelect, ToggleListView };