@enadhq/enad-react-sdk 1.0.0 → 1.0.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-group.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/filters/filter-group.tsx"],"names":[],"mappings":"AAUA,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAA;IACpC,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,EAAE,CAAC,EAAE,MAAM,CAAA;KACZ,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,gBAAgB,2CA0FlB;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,CAAA"}

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

@@ -0,0 +1,102 @@
+"use client";
+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"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  FilterGroup
+};
+//# sourceMappingURL=filter-group.mjs.map

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

@@ -0,0 +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":[]}

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

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

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

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

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

@@ -0,0 +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":"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","names":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/filters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9G,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/filters/index.ts"],"sourcesContent":["export { FilterChip, type FilterChipProps } from \"./filter-chip\"\nexport { FilterGroup, type FilterGroupProps, type FilterOption } from \"./filter-group\"\nexport { FilterPanel, type FilterPanelProps, type FilterDefinition, type ActiveFilters } from \"./filter-panel\"\nexport { SortSelect, type SortSelectProps } from \"./sort-select\"\nexport { ToggleListView, type ToggleListViewProps } from \"./toggle-list-view\"\n"],"mappings":"AAAA,SAAS,kBAAwC;AACjD,SAAS,mBAA6D;AACtE,SAAS,mBAAqF;AAC9F,SAAS,kBAAwC;AACjD,SAAS,sBAAgD;","names":[]}

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

@@ -0,0 +1,12 @@
+import { type SelectOption } from "../primitives/select";
+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): import("react/jsx-runtime").JSX.Element;
+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","sourceRoot":"","sources":["../../../../src/client/storefront/filters/sort-select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE1E,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAUD,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,aAAa,EACb,OAA4B,EAC5B,KAAc,EACd,WAA8B,EAC9B,SAAS,GACV,EAAE,eAAe,2CAWjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,CAAA"}

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { StorefrontSelect } from "../primitives/select";
+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\u2013Z" }
+];
+function SortSelect({
+  value,
+  onValueChange,
+  options = defaultSortOptions,
+  label = "Sort",
+  placeholder = "Select sorting",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    StorefrontSelect,
+    {
+      options,
+      value,
+      onValueChange,
+      label,
+      placeholder,
+      className
+    }
+  );
+}
+export {
+  SortSelect
+};
+//# sourceMappingURL=sort-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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":";AA+BI;AA5BJ,SAAS,wBAA2C;AAWpD,MAAM,qBAAqC;AAAA,EACzC,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,EACzC,EAAE,OAAO,aAAa,OAAO,qBAAqB;AAAA,EAClD,EAAE,OAAO,cAAc,OAAO,qBAAqB;AAAA,EACnD,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,EACnC,EAAE,OAAO,YAAY,OAAO,gBAAW;AACzC;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,8 @@
+interface ToggleListViewProps {
+    mode: "grid" | "list";
+    onChange: (mode: "grid" | "list") => void;
+    className?: string;
+}
+declare function ToggleListView({ mode, onChange, className }: ToggleListViewProps): import("react/jsx-runtime").JSX.Element;
+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","sourceRoot":"","sources":["../../../../src/client/storefront/filters/toggle-list-view.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAsBzE;AAED,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIcon } from "../../icons/icon-context";
+import { ToggleGroup, ToggleGroupItem } from "../../ui-resolver/toggle-group";
+import { cn } from "../../ui/utils";
+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" }) })
+      ]
+    }
+  );
+}
+export {
+  ToggleListView
+};
+//# sourceMappingURL=toggle-list-view.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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":";AAiBI,SAWI,KAXJ;AAdJ,SAAS,eAAe;AACxB,SAAS,aAAa,uBAAuB;AAC7C,SAAS,UAAU;AAQnB,SAAS,eAAe,EAAE,MAAM,UAAU,UAAU,GAAwB;AAC1E,QAAM,WAAW,QAAQ,MAAM;AAC/B,QAAM,WAAW,QAAQ,MAAM;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,MACP,eAAe,CAAC,UAAU;AACxB,YAAI,MAAO,UAAS,KAAwB;AAAA,MAC9C;AAAA,MACA,SAAQ;AAAA,MACR,WAAW,GAAG,SAAS;AAAA,MACvB,cAAW;AAAA,MAEX;AAAA,4BAAC,mBAAgB,OAAM,QAAO,cAAW,aAAY,WAAU,uBAC7D,8BAAC,YAAS,WAAU,UAAS,GAC/B;AAAA,QACA,oBAAC,mBAAgB,OAAM,QAAO,cAAW,aAAY,WAAU,uBAC7D,8BAAC,YAAS,WAAU,UAAS,GAC/B;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,12 @@
+/**
+ * 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;
+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","sourceRoot":"","sources":["../../../../src/client/storefront/hooks/use-section-observer.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,iBAAS,kBAAkB;AACzB,gDAAgD;AAChD,OAAO,EAAE,MAAM,EAAE;AACjB,8DAA8D;AAC9D,aAAa,SAAI,iBA4DlB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+function useSectionObserver(anchors, rootMarginTop = 0) {
+  const [activeId, setActiveId] = useState(null);
+  const ratioMap = useRef(/* @__PURE__ */ new Map());
+  const anchorsKey = useMemo(() => anchors.join(","), [anchors.join(",")]);
+  useEffect(() => {
+    if (anchors.length === 0) return;
+    const ids = anchors.filter((a) => a.startsWith("#")).map((a) => a.slice(1));
+    const elements = ids.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, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+      }
+    );
+    for (const el of elements) {
+      observer.observe(el);
+    }
+    setActiveId((current) => current ?? anchors[0] ?? null);
+    return () => observer.disconnect();
+  }, [anchors, anchorsKey, rootMarginTop]);
+  return activeId;
+}
+export {
+  useSectionObserver
+};
+//# sourceMappingURL=use-section-observer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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":";AAEA,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AAOrD,SAAS,mBAEP,SAEA,gBAAgB,GAChB;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,QAAM,WAAW,OAA4B,oBAAI,IAAI,CAAC;AAEtD,QAAM,aAAa,QAAQ,MAAM,QAAQ,KAAK,GAAG,GAAG,CAAC,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEvE,YAAU,MAAM;AACd,QAAI,QAAQ,WAAW,EAAG;AAE1B,UAAM,MAAM,QACT,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,EAC/B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAExB,UAAM,WAAW,IACd,IAAI,CAAC,OAAO,SAAS,eAAe,EAAE,CAAC,EACvC,OAAO,OAAO;AAEjB,QAAI,SAAS,WAAW,EAAG;AAE3B,aAAS,QAAQ,MAAM;AAEvB,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,mBAAW,SAAS,SAAS;AAC3B,mBAAS,QAAQ,IAAI,MAAM,OAAO,IAAI,MAAM,iBAAiB;AAAA,QAC/D;AAGA,YAAI,SAAwB;AAC5B,YAAI,YAAY;AAChB,mBAAW,CAAC,IAAI,KAAK,KAAK,SAAS,SAAS;AAC1C,cAAI,QAAQ,WAAW;AACrB,wBAAY;AACZ,qBAAS;AAAA,UACX;AAAA,QACF;AAGA,YAAI,QAAQ;AACV,sBAAY,IAAI,MAAM,EAAE;AAAA,QAC1B;AAAA,MACF;AAAA,MACA;AAAA,QACE,YAAY,IAAI,aAAa;AAAA,QAC7B,WAAW,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC;AAAA,MAC/D;AAAA,IACF;AAEA,eAAW,MAAM,UAAU;AACzB,eAAS,QAAQ,EAAE;AAAA,IACrB;AAGA,gBAAY,CAAC,YAAY,WAAW,QAAQ,CAAC,KAAK,IAAI;AAEtD,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,SAAS,YAAY,aAAa,CAAC;AAEvC,SAAO;AACT;","names":[]}

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

@@ -0,0 +1,24 @@
+export { Price } from "./components/price";
+export type { PriceProps } from "./components/price";
+export { Skeleton, ProductCardSkeleton } from "./components/skeleton";
+export type { SkeletonProps } from "./components/skeleton";
+export { Badge } from "./components/badge";
+export type { BadgeProps } from "./components/badge";
+export { StarRating } from "./components/star-rating";
+export type { StarRatingProps } from "./components/star-rating";
+export { ProductTabs } from "./components/product-tabs";
+export type { ProductTabsProps, ProductTab } from "./components/product-tabs";
+export { VariantSelector } from "./components/variant-selector";
+export type { VariantSelectorProps, VariantAxis, VariantOption } from "./components/variant-selector";
+export { NewsletterSignup } from "./components/newsletter-signup";
+export type { NewsletterSignupProps } from "./components/newsletter-signup";
+export { StorefrontInput } from "./primitives/input";
+export type { StorefrontInputProps } from "./primitives/input";
+export { LanguageSelector } from "./components/language-selector";
+export type { LanguageSelectorProps, LanguageOption } from "./components/language-selector";
+export { CountryRedirect } from "./components/country-redirect";
+export type { CountryRedirectProps, CountryInfo } from "./components/country-redirect";
+export { SectionNav } from "./components/section-nav";
+export type { SectionNavProps, SectionLink } from "./components/section-nav";
+export type { ColorTheme, TextContentVariant, GalleryVariant, LinkBlockVariant, TextContentWithImageVariant, } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/storefront/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,YAAY,EAAE,oBAAoB,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAErG,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAE3E,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAE3F,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,YAAY,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAEtF,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAE5E,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,2BAA2B,GAC5B,MAAM,SAAS,CAAA"}

package/dist/client/storefront/index.mjs

@@ -0,0 +1,26 @@
+import { Price } from "./components/price";
+import { Skeleton, ProductCardSkeleton } from "./components/skeleton";
+import { Badge } from "./components/badge";
+import { StarRating } from "./components/star-rating";
+import { ProductTabs } from "./components/product-tabs";
+import { VariantSelector } from "./components/variant-selector";
+import { NewsletterSignup } from "./components/newsletter-signup";
+import { StorefrontInput } from "./primitives/input";
+import { LanguageSelector } from "./components/language-selector";
+import { CountryRedirect } from "./components/country-redirect";
+import { SectionNav } from "./components/section-nav";
+export {
+  Badge,
+  CountryRedirect,
+  LanguageSelector,
+  NewsletterSignup,
+  Price,
+  ProductCardSkeleton,
+  ProductTabs,
+  SectionNav,
+  Skeleton,
+  StarRating,
+  StorefrontInput,
+  VariantSelector
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/client/storefront/index.ts"],"sourcesContent":["export { Price } from \"./components/price\"\nexport type { PriceProps } from \"./components/price\"\n\nexport { Skeleton, ProductCardSkeleton } from \"./components/skeleton\"\nexport type { SkeletonProps } from \"./components/skeleton\"\n\nexport { Badge } from \"./components/badge\"\nexport type { BadgeProps } from \"./components/badge\"\n\nexport { StarRating } from \"./components/star-rating\"\nexport type { StarRatingProps } from \"./components/star-rating\"\n\nexport { ProductTabs } from \"./components/product-tabs\"\nexport type { ProductTabsProps, ProductTab } from \"./components/product-tabs\"\n\nexport { VariantSelector } from \"./components/variant-selector\"\nexport type { VariantSelectorProps, VariantAxis, VariantOption } from \"./components/variant-selector\"\n\nexport { NewsletterSignup } from \"./components/newsletter-signup\"\nexport type { NewsletterSignupProps } from \"./components/newsletter-signup\"\n\nexport { StorefrontInput } from \"./primitives/input\"\nexport type { StorefrontInputProps } from \"./primitives/input\"\n\nexport { LanguageSelector } from \"./components/language-selector\"\nexport type { LanguageSelectorProps, LanguageOption } from \"./components/language-selector\"\n\nexport { CountryRedirect } from \"./components/country-redirect\"\nexport type { CountryRedirectProps, CountryInfo } from \"./components/country-redirect\"\n\nexport { SectionNav } from \"./components/section-nav\"\nexport type { SectionNavProps, SectionLink } from \"./components/section-nav\"\n\nexport type {\n  ColorTheme,\n  TextContentVariant,\n  GalleryVariant,\n  LinkBlockVariant,\n  TextContentWithImageVariant,\n} from \"./types\"\n"],"mappings":"AAAA,SAAS,aAAa;AAGtB,SAAS,UAAU,2BAA2B;AAG9C,SAAS,aAAa;AAGtB,SAAS,kBAAkB;AAG3B,SAAS,mBAAmB;AAG5B,SAAS,uBAAuB;AAGhC,SAAS,wBAAwB;AAGjC,SAAS,uBAAuB;AAGhC,SAAS,wBAAwB;AAGjC,SAAS,uBAAuB;AAGhC,SAAS,kBAAkB;","names":[]}

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

@@ -0,0 +1,4 @@
+import type { FooterProps } from "../types";
+declare function Footer({ columns, bottomLinks, logo, paymentIcons, newsletterSlot, copyright, className, }: FooterProps): import("react/jsx-runtime").JSX.Element;
+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","sourceRoot":"","sources":["../../../../src/client/storefront/layout/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AA4B5C,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,SAAS,GACV,EAAE,WAAW,2CA2Cb;AAED,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,CAAC"}