@enadhq/enad-react-sdk 1.0.0 → 1.1.0

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

@@ -0,0 +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";
+//#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",
+				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
+		})
+	})] });
+}
+//#endregion
+export { FilterPanel };
+
+//# sourceMappingURL=filter-panel.mjs.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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 };

package/dist/client/storefront/filters/sort-select.d.ts

@@ -0,0 +1,23 @@
+import { SelectOption } from "../primitives/select.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/filters/sort-select.d.ts
+interface SortSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options?: SelectOption[];
+  label?: string;
+  placeholder?: string;
+  className?: string;
+}
+declare function SortSelect({
+  value,
+  onValueChange,
+  options,
+  label,
+  placeholder,
+  className
+}: SortSelectProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SortSelect, type SortSelectProps };
+//# sourceMappingURL=sort-select.d.ts.map

package/dist/client/storefront/filters/sort-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-select.d.ts","names":[],"sources":["../../../../src/client/storefront/filters/sort-select.tsx"],"mappings":";;;;UAKU,eAAA;EACR,KAAA;EACA,aAAA,GAAgB,KAAA;EAChB,OAAA,GAAU,YAAA;EACV,KAAA;EACA,WAAA;EACA,SAAA;AAAA;AAAA,iBAWO,UAAA,CAAA;EACP,KAAA;EACA,aAAA;EACA,OAAA;EACA,KAAA;EACA,WAAA;EACA;AAAA,GACC,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/filters/sort-select.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { StorefrontSelect } from "../primitives/select.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/filters/sort-select.tsx
+const defaultSortOptions = [
+	{
+		value: "relevance",
+		label: "Relevance"
+	},
+	{
+		value: "price-asc",
+		label: "Price: Low to High"
+	},
+	{
+		value: "price-desc",
+		label: "Price: High to Low"
+	},
+	{
+		value: "newest",
+		label: "Newest"
+	},
+	{
+		value: "name-asc",
+		label: "Name A–Z"
+	}
+];
+function SortSelect({ value, onValueChange, options = defaultSortOptions, label = "Sort", placeholder = "Select sorting", className }) {
+	return /* @__PURE__ */ jsx(StorefrontSelect, {
+		options,
+		value,
+		onValueChange,
+		label,
+		placeholder,
+		className
+	});
+}
+//#endregion
+export { SortSelect };
+
+//# sourceMappingURL=sort-select.mjs.map

package/dist/client/storefront/filters/sort-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-select.mjs","names":[],"sources":["../../../../src/client/storefront/filters/sort-select.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { StorefrontSelect, type SelectOption } from \"../primitives/select\"\n\ninterface SortSelectProps {\n  value: string\n  onValueChange: (value: string) => void\n  options?: SelectOption[]\n  label?: string\n  placeholder?: string\n  className?: string\n}\n\nconst defaultSortOptions: SelectOption[] = [\n  { value: \"relevance\", label: \"Relevance\" },\n  { value: \"price-asc\", label: \"Price: Low to High\" },\n  { value: \"price-desc\", label: \"Price: High to Low\" },\n  { value: \"newest\", label: \"Newest\" },\n  { value: \"name-asc\", label: \"Name A–Z\" },\n]\n\nfunction SortSelect({\n  value,\n  onValueChange,\n  options = defaultSortOptions,\n  label = \"Sort\",\n  placeholder = \"Select sorting\",\n  className,\n}: SortSelectProps) {\n  return (\n    <StorefrontSelect\n      options={options}\n      value={value}\n      onValueChange={onValueChange}\n      label={label}\n      placeholder={placeholder}\n      className={className}\n    />\n  )\n}\n\nexport { SortSelect, type SortSelectProps }\n"],"mappings":";;;;;AAcA,MAAM,qBAAqC;CACzC;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAa,OAAO;EAAsB;CACnD;EAAE,OAAO;EAAc,OAAO;EAAsB;CACpD;EAAE,OAAO;EAAU,OAAO;EAAU;CACpC;EAAE,OAAO;EAAY,OAAO;EAAY;CACzC;AAED,SAAS,WAAW,EAClB,OACA,eACA,UAAU,oBACV,QAAQ,QACR,cAAc,kBACd,aACkB;AAClB,QACE,oBAAC,kBAAD;EACW;EACF;EACQ;EACR;EACM;EACF;EACX,CAAA"}

package/dist/client/storefront/filters/toggle-list-view.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/filters/toggle-list-view.d.ts
+interface ToggleListViewProps {
+  mode: "grid" | "list";
+  onChange: (mode: "grid" | "list") => void;
+  className?: string;
+}
+declare function ToggleListView({
+  mode,
+  onChange,
+  className
+}: ToggleListViewProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ToggleListView, type ToggleListViewProps };
+//# sourceMappingURL=toggle-list-view.d.ts.map

package/dist/client/storefront/filters/toggle-list-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-list-view.d.ts","names":[],"sources":["../../../../src/client/storefront/filters/toggle-list-view.tsx"],"mappings":";;;UAOU,mBAAA;EACR,IAAA;EACA,QAAA,GAAW,IAAA;EACX,SAAA;AAAA;AAAA,iBAGO,cAAA,CAAA;EAAiB,IAAA;EAAM,QAAA;EAAU;AAAA,GAAa,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/filters/toggle-list-view.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { ToggleGroup, ToggleGroupItem } from "../../ui-resolver/toggle-group.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/filters/toggle-list-view.tsx
+function ToggleListView({ mode, onChange, className }) {
+	const GridIcon = useIcon("grid");
+	const ListIcon = useIcon("list");
+	return /* @__PURE__ */ jsxs(ToggleGroup, {
+		type: "single",
+		value: mode,
+		onValueChange: (value) => {
+			if (value) onChange(value);
+		},
+		variant: "outline",
+		className: cn(className),
+		"aria-label": "View mode",
+		children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: "grid",
+			"aria-label": "Grid view",
+			className: "relative hit-area-2",
+			children: /* @__PURE__ */ jsx(GridIcon, { className: "size-4" })
+		}), /* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: "list",
+			"aria-label": "List view",
+			className: "relative hit-area-2",
+			children: /* @__PURE__ */ jsx(ListIcon, { className: "size-4" })
+		})]
+	});
+}
+//#endregion
+export { ToggleListView };
+
+//# sourceMappingURL=toggle-list-view.mjs.map

package/dist/client/storefront/filters/toggle-list-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-list-view.mjs","names":[],"sources":["../../../../src/client/storefront/filters/toggle-list-view.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { ToggleGroup, ToggleGroupItem } from \"../../ui-resolver/toggle-group\";\nimport { cn } from \"../../ui/utils\";\n\ninterface ToggleListViewProps {\n  mode: \"grid\" | \"list\";\n  onChange: (mode: \"grid\" | \"list\") => void;\n  className?: string;\n}\n\nfunction ToggleListView({ mode, onChange, className }: ToggleListViewProps) {\n  const GridIcon = useIcon(\"grid\");\n  const ListIcon = useIcon(\"list\");\n  return (\n    <ToggleGroup\n      type=\"single\"\n      value={mode}\n      onValueChange={(value) => {\n        if (value) onChange(value as \"grid\" | \"list\");\n      }}\n      variant=\"outline\"\n      className={cn(className)}\n      aria-label=\"View mode\"\n    >\n      <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\" className=\"relative hit-area-2\">\n        <GridIcon className=\"size-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"list\" aria-label=\"List view\" className=\"relative hit-area-2\">\n        <ListIcon className=\"size-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n\nexport { ToggleListView, type ToggleListViewProps };\n"],"mappings":";;;;;;;AAaA,SAAS,eAAe,EAAE,MAAM,UAAU,aAAkC;CAC1E,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,WAAW,QAAQ,OAAO;AAChC,QACE,qBAAC,aAAD;EACE,MAAK;EACL,OAAO;EACP,gBAAgB,UAAU;AACxB,OAAI,MAAO,UAAS,MAAyB;;EAE/C,SAAQ;EACR,WAAW,GAAG,UAAU;EACxB,cAAW;YARb,CAUE,oBAAC,iBAAD;GAAiB,OAAM;GAAO,cAAW;GAAY,WAAU;aAC7D,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA;GACf,CAAA,EAClB,oBAAC,iBAAD;GAAiB,OAAM;GAAO,cAAW;GAAY,WAAU;aAC7D,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA;GACf,CAAA,CACN"}

package/dist/client/storefront/hooks/use-section-observer.d.ts

@@ -0,0 +1,10 @@
+//#region src/client/storefront/hooks/use-section-observer.d.ts
+/**
+ * Watches anchor targets and reports which section is currently in view.
+ * Uses IntersectionObserver with a negative top margin so the "active"
+ * section flips when it crosses the sticky-nav region, not the viewport edge.
+ */
+declare function useSectionObserver(/** Anchor hrefs, e.g. ["#specs", "#reviews"] */anchors: string[], /** Extra top offset in px (header height + nav bar height) */rootMarginTop?: number): string | null;
+//#endregion
+export { useSectionObserver };
+//# sourceMappingURL=use-section-observer.d.ts.map

package/dist/client/storefront/hooks/use-section-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-section-observer.d.ts","names":[],"sources":["../../../../src/client/storefront/hooks/use-section-observer.ts"],"mappings":";;;;;;iBASS,kBAAA,iDAEP,OAAA,0EAEA,aAAA"}

package/dist/client/storefront/hooks/use-section-observer.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+//#region src/client/storefront/hooks/use-section-observer.ts
+/**
+* Watches anchor targets and reports which section is currently in view.
+* Uses IntersectionObserver with a negative top margin so the "active"
+* section flips when it crosses the sticky-nav region, not the viewport edge.
+*/
+function useSectionObserver(anchors, rootMarginTop = 0) {
+	const [activeId, setActiveId] = useState(null);
+	const ratioMap = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		if (anchors.length === 0) return;
+		const elements = anchors.filter((a) => a.startsWith("#")).map((a) => a.slice(1)).map((id) => document.getElementById(id)).filter(Boolean);
+		if (elements.length === 0) return;
+		ratioMap.current.clear();
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) ratioMap.current.set(entry.target.id, entry.intersectionRatio);
+			let bestId = null;
+			let bestRatio = 0;
+			for (const [id, ratio] of ratioMap.current) if (ratio > bestRatio) {
+				bestRatio = ratio;
+				bestId = id;
+			}
+			if (bestId) setActiveId(`#${bestId}`);
+		}, {
+			rootMargin: `-${rootMarginTop}px 0px -40% 0px`,
+			threshold: [
+				0,
+				.1,
+				.2,
+				.3,
+				.4,
+				.5,
+				.6,
+				.7,
+				.8,
+				.9,
+				1
+			]
+		});
+		for (const el of elements) observer.observe(el);
+		setActiveId((current) => current ?? anchors[0] ?? null);
+		return () => observer.disconnect();
+	}, [
+		anchors,
+		useMemo(() => anchors.join(","), [anchors.join(",")]),
+		rootMarginTop
+	]);
+	return activeId;
+}
+//#endregion
+export { useSectionObserver };
+
+//# sourceMappingURL=use-section-observer.mjs.map

package/dist/client/storefront/hooks/use-section-observer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-section-observer.mjs","names":[],"sources":["../../../../src/client/storefront/hooks/use-section-observer.ts"],"sourcesContent":["\"use client\"\n\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\n/**\n * Watches anchor targets and reports which section is currently in view.\n * Uses IntersectionObserver with a negative top margin so the \"active\"\n * section flips when it crosses the sticky-nav region, not the viewport edge.\n */\nfunction useSectionObserver(\n  /** Anchor hrefs, e.g. [\"#specs\", \"#reviews\"] */\n  anchors: string[],\n  /** Extra top offset in px (header height + nav bar height) */\n  rootMarginTop = 0,\n) {\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const ratioMap = useRef<Map<string, number>>(new Map())\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const anchorsKey = useMemo(() => anchors.join(\",\"), [anchors.join(\",\")])\n\n  useEffect(() => {\n    if (anchors.length === 0) return\n\n    const ids = anchors\n      .filter((a) => a.startsWith(\"#\"))\n      .map((a) => a.slice(1))\n\n    const elements = ids\n      .map((id) => document.getElementById(id))\n      .filter(Boolean) as HTMLElement[]\n\n    if (elements.length === 0) return\n\n    ratioMap.current.clear()\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          ratioMap.current.set(entry.target.id, entry.intersectionRatio)\n        }\n\n        // Pick the element with the highest intersection ratio\n        let bestId: string | null = null\n        let bestRatio = 0\n        for (const [id, ratio] of ratioMap.current) {\n          if (ratio > bestRatio) {\n            bestRatio = ratio\n            bestId = id\n          }\n        }\n\n        // If nothing is intersecting, keep the last active\n        if (bestId) {\n          setActiveId(`#${bestId}`)\n        }\n      },\n      {\n        rootMargin: `-${rootMarginTop}px 0px -40% 0px`,\n        threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],\n      },\n    )\n\n    for (const el of elements) {\n      observer.observe(el)\n    }\n\n    // Set initial active to first anchor\n    setActiveId((current) => current ?? anchors[0] ?? null)\n\n    return () => observer.disconnect()\n  }, [anchors, anchorsKey, rootMarginTop])\n\n  return activeId\n}\n\nexport { useSectionObserver }\n"],"mappings":";;;;;;;;AASA,SAAS,mBAEP,SAEA,gBAAgB,GAChB;CACA,MAAM,CAAC,UAAU,eAAe,SAAwB,KAAK;CAC7D,MAAM,WAAW,uBAA4B,IAAI,KAAK,CAAC;AAIvD,iBAAgB;AACd,MAAI,QAAQ,WAAW,EAAG;EAM1B,MAAM,WAJM,QACT,QAAQ,MAAM,EAAE,WAAW,IAAI,CAAC,CAChC,KAAK,MAAM,EAAE,MAAM,EAAE,CAAC,CAGtB,KAAK,OAAO,SAAS,eAAe,GAAG,CAAC,CACxC,OAAO,QAAQ;AAElB,MAAI,SAAS,WAAW,EAAG;AAE3B,WAAS,QAAQ,OAAO;EAExB,MAAM,WAAW,IAAI,sBAClB,YAAY;AACX,QAAK,MAAM,SAAS,QAClB,UAAS,QAAQ,IAAI,MAAM,OAAO,IAAI,MAAM,kBAAkB;GAIhE,IAAI,SAAwB;GAC5B,IAAI,YAAY;AAChB,QAAK,MAAM,CAAC,IAAI,UAAU,SAAS,QACjC,KAAI,QAAQ,WAAW;AACrB,gBAAY;AACZ,aAAS;;AAKb,OAAI,OACF,aAAY,IAAI,SAAS;KAG7B;GACE,YAAY,IAAI,cAAc;GAC9B,WAAW;IAAC;IAAG;IAAK;IAAK;IAAK;IAAK;IAAK;IAAK;IAAK;IAAK;IAAK;IAAE;GAC/D,CACF;AAED,OAAK,MAAM,MAAM,SACf,UAAS,QAAQ,GAAG;AAItB,eAAa,YAAY,WAAW,QAAQ,MAAM,KAAK;AAEvD,eAAa,SAAS,YAAY;IACjC;EAAC;EApDe,cAAc,QAAQ,KAAK,IAAI,EAAE,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC;EAoD/C;EAAc,CAAC;AAExC,QAAO"}

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

@@ -0,0 +1,19 @@
+import { ColorTheme, GalleryVariant, LanguageOption, LanguageSelectorProps, LinkBlockVariant, TextContentVariant, TextContentWithImageVariant } from "./types.js";
+import { SelectOption, StorefrontSelect, StorefrontSelectProps } from "./primitives/select.js";
+import { AddressFieldGroup, AddressFieldGroupProps } from "./components/address-field-group.js";
+import { Badge, BadgeProps } from "./components/badge.js";
+import { CountryInfo, CountryRedirect, CountryRedirectProps } from "./components/country-redirect.js";
+import { LanguageSelector } from "./components/language-selector.js";
+import { NewsletterSignup, NewsletterSignupProps } from "./components/newsletter-signup.js";
+import { Price, PriceProps } from "./components/price.js";
+import { ProductTab, ProductTabs, ProductTabsProps } from "./components/product-tabs.js";
+import { SectionLink, SectionNav, SectionNavProps } from "./components/section-nav.js";
+import { ProductCardSkeleton, Skeleton, SkeletonProps } from "./components/skeleton.js";
+import { StarRating, StarRatingProps } from "./components/star-rating.js";
+import { VariantAxis, VariantOption, VariantSelector, VariantSelectorProps } from "./components/variant-selector.js";
+import { StorefrontInput, StorefrontInputProps } from "./primitives/input.js";
+import { PasswordInput, PasswordInputProps } from "./primitives/password-input.js";
+import { StorefrontCheckbox, StorefrontCheckboxProps } from "./primitives/checkbox.js";
+import { CountrySelect, CountrySelectProps, NORDIC_COUNTRIES } from "./primitives/country-select.js";
+import { SimpleSelect, SimpleSelectOption, SimpleSelectProps } from "../ui/simple-select.js";
+export { AddressFieldGroup, type AddressFieldGroupProps, Badge, type BadgeProps, type ColorTheme, type CountryInfo, CountryRedirect, type CountryRedirectProps, CountrySelect, type CountrySelectProps, type GalleryVariant, type LanguageOption, LanguageSelector, type LanguageSelectorProps, type LinkBlockVariant, NORDIC_COUNTRIES, NewsletterSignup, type NewsletterSignupProps, PasswordInput, type PasswordInputProps, Price, type PriceProps, ProductCardSkeleton, type ProductTab, ProductTabs, type ProductTabsProps, type SectionLink, SectionNav, type SectionNavProps, type SelectOption, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, Skeleton, type SkeletonProps, StarRating, type StarRatingProps, StorefrontCheckbox, type StorefrontCheckboxProps, StorefrontInput, type StorefrontInputProps, StorefrontSelect, type StorefrontSelectProps, type TextContentVariant, type TextContentWithImageVariant, type VariantAxis, type VariantOption, VariantSelector, type VariantSelectorProps };

package/dist/client/storefront/index.mjs

@@ -0,0 +1,18 @@
+import { Price } from "./components/price.mjs";
+import { ProductCardSkeleton, Skeleton } from "./components/skeleton.mjs";
+import { Badge } from "./components/badge.mjs";
+import { StarRating } from "./components/star-rating.mjs";
+import { ProductTabs } from "./components/product-tabs.mjs";
+import { VariantSelector } from "./components/variant-selector.mjs";
+import { NewsletterSignup } from "./components/newsletter-signup.mjs";
+import { StorefrontInput } from "./primitives/input.mjs";
+import { PasswordInput } from "./primitives/password-input.mjs";
+import { StorefrontSelect } from "./primitives/select.mjs";
+import { StorefrontCheckbox } from "./primitives/checkbox.mjs";
+import { CountrySelect, NORDIC_COUNTRIES } from "./primitives/country-select.mjs";
+import { AddressFieldGroup } from "./components/address-field-group.mjs";
+import { SimpleSelect } from "../ui/simple-select.mjs";
+import { LanguageSelector } from "./components/language-selector.mjs";
+import { CountryRedirect } from "./components/country-redirect.mjs";
+import { SectionNav } from "./components/section-nav.mjs";
+export { AddressFieldGroup, Badge, CountryRedirect, CountrySelect, LanguageSelector, NORDIC_COUNTRIES, NewsletterSignup, PasswordInput, Price, ProductCardSkeleton, ProductTabs, SectionNav, SimpleSelect, Skeleton, StarRating, StorefrontCheckbox, StorefrontInput, StorefrontSelect, VariantSelector };

package/dist/client/storefront/layout/footer.d.ts

@@ -0,0 +1,16 @@
+import { FooterProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/layout/footer.d.ts
+declare function Footer({
+  columns,
+  bottomLinks,
+  logo,
+  paymentIcons,
+  newsletterSlot,
+  copyright,
+  className
+}: FooterProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Footer, type FooterProps };
+//# sourceMappingURL=footer.d.ts.map

package/dist/client/storefront/layout/footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/footer.tsx"],"mappings":";;;;iBA+BS,MAAA,CAAA;EACP,OAAA;EACA,WAAA;EACA,IAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;EACA;AAAA,GACC,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/layout/footer.mjs

@@ -0,0 +1,64 @@
+import { cn } from "../../ui/utils.mjs";
+import { Separator } from "../../ui-resolver/separator.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/layout/footer.tsx
+function FooterLinkColumn({ title, links }) {
+	return /* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("h3", {
+		className: "mb-3 text-sm font-medium text-foreground",
+		children: title
+	}), /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-2",
+		children: links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+			href: link.href,
+			className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
+			children: link.label
+		}) }, link.href))
+	})] });
+}
+function Footer({ columns, bottomLinks, logo, paymentIcons, newsletterSlot, copyright, className }) {
+	return /* @__PURE__ */ jsx("footer", {
+		className: cn("bg-card text-card-foreground", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4",
+					children: [columns.map((col, i) => /* @__PURE__ */ jsx(FooterLinkColumn, {
+						title: col.title,
+						links: col.links
+					}, i)), newsletterSlot && /* @__PURE__ */ jsx("div", {
+						className: "col-span-2 md:col-span-1",
+						children: newsletterSlot
+					})]
+				}),
+				paymentIcons && /* @__PURE__ */ jsx("div", {
+					className: "mt-8 flex items-center gap-3",
+					children: paymentIcons
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "my-8" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-between gap-4 sm:flex-row",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-6",
+						children: [logo, copyright && /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-muted-foreground",
+							children: copyright
+						})]
+					}), bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsx("nav", {
+						className: "flex items-center gap-4",
+						children: bottomLinks.map((link) => /* @__PURE__ */ jsx("a", {
+							href: link.href,
+							className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
+							children: link.label
+						}, link.href))
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Footer };
+
+//# sourceMappingURL=footer.mjs.map

package/dist/client/storefront/layout/footer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/client/storefront/layout/footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Separator } from \"../../ui-resolver/separator\";\nimport { cn } from \"../../ui/utils\";\nimport type { FooterProps } from \"../types\";\n\nfunction FooterLinkColumn({\n  title,\n  links,\n}: {\n  title?: string;\n  links: { label: string; href: string }[];\n}) {\n  return (\n    <div>\n      {title && <h3 className=\"mb-3 text-sm font-medium text-foreground\">{title}</h3>}\n      <ul className=\"flex flex-col gap-2\">\n        {links.map((link) => (\n          <li key={link.href}>\n            <a\n              href={link.href}\n              className=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              {link.label}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nfunction Footer({\n  columns,\n  bottomLinks,\n  logo,\n  paymentIcons,\n  newsletterSlot,\n  copyright,\n  className,\n}: FooterProps) {\n  return (\n    <footer className={cn(\"bg-card text-card-foreground\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8\">\n        <div className=\"grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4\">\n          {/* Link columns */}\n          {columns.map((col, i) => (\n            <FooterLinkColumn key={i} title={col.title} links={col.links} />\n          ))}\n\n          {/* Newsletter slot */}\n          {newsletterSlot && <div className=\"col-span-2 md:col-span-1\">{newsletterSlot}</div>}\n        </div>\n\n        {/* Payment icons */}\n        {paymentIcons && <div className=\"mt-8 flex items-center gap-3\">{paymentIcons}</div>}\n\n        <Separator className=\"my-8\" />\n\n        {/* Bottom bar */}\n        <div className=\"flex flex-col items-center justify-between gap-4 sm:flex-row\">\n          <div className=\"flex items-center gap-6\">\n            {logo}\n            {copyright && <span className=\"text-sm text-muted-foreground\">{copyright}</span>}\n          </div>\n\n          {bottomLinks && bottomLinks.length > 0 && (\n            <nav className=\"flex items-center gap-4\">\n              {bottomLinks.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          )}\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport { Footer, type FooterProps };\n"],"mappings":";;;;;AAKA,SAAS,iBAAiB,EACxB,OACA,SAIC;AACD,QACE,qBAAC,OAAD,EAAA,UAAA,CACG,SAAS,oBAAC,MAAD;EAAI,WAAU;YAA4C;EAAW,CAAA,EAC/E,oBAAC,MAAD;EAAI,WAAU;YACX,MAAM,KAAK,SACV,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;GACE,MAAM,KAAK;GACX,WAAU;aAET,KAAK;GACJ,CAAA,EACD,EAPI,KAAK,KAOT,CACL;EACC,CAAA,CACD,EAAA,CAAA;;AAIV,SAAS,OAAO,EACd,SACA,aACA,MACA,cACA,gBACA,WACA,aACc;AACd,QACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,gCAAgC,UAAU;YAC9D,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CAEG,QAAQ,KAAK,KAAK,MACjB,oBAAC,kBAAD;MAA0B,OAAO,IAAI;MAAO,OAAO,IAAI;MAAS,EAAzC,EAAyC,CAChE,EAGD,kBAAkB,oBAAC,OAAD;MAAK,WAAU;gBAA4B;MAAqB,CAAA,CAC/E;;IAGL,gBAAgB,oBAAC,OAAD;KAAK,WAAU;eAAgC;KAAmB,CAAA;IAEnF,oBAAC,WAAD,EAAW,WAAU,QAAS,CAAA;IAG9B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,MACA,aAAa,oBAAC,QAAD;OAAM,WAAU;iBAAiC;OAAiB,CAAA,CAC5E;SAEL,eAAe,YAAY,SAAS,KACnC,oBAAC,OAAD;MAAK,WAAU;gBACZ,YAAY,KAAK,SAChB,oBAAC,KAAD;OAEE,MAAM,KAAK;OACX,WAAU;iBAET,KAAK;OACJ,EALG,KAAK,KAKR,CACJ;MACE,CAAA,CAEJ;;IACF;;EACC,CAAA"}

package/dist/client/storefront/layout/header.d.ts

@@ -0,0 +1,20 @@
+import { HeaderProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/layout/header.d.ts
+declare function Header({
+  variant,
+  navItems,
+  utilityLinks,
+  promotionEnabled,
+  promotionMessages,
+  logo,
+  onSearchClick,
+  onCartClick,
+  cartHref,
+  labels,
+  className
+}: HeaderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Header, type HeaderProps };
+//# sourceMappingURL=header.d.ts.map

package/dist/client/storefront/layout/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/header.tsx"],"mappings":";;;;iBA8US,MAAA,CAAA;EACP,OAAA;EACA,QAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,IAAA;EACA,aAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}