@storepecker/storefront-core 2.3.6 → 2.4.1

package/dist/chunk-V447PVRV.cjs

@@ -0,0 +1,308 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/search-dropdown/search-dropdown.tsx
+
+// src/components/search-dropdown/search-dropdown.module.css
+var search_dropdown_default = {};
+function DownChevron({
+  width = 24,
+  height = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      fill: "currentColor",
+      height,
+      width,
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      viewBox: "0 0 407.437 407.437",
+      xmlSpace: "preserve",
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: "386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 ",
+          strokeWidth: "2"
+        }
+      )
+    }
+  );
+}
+function SearchIcon({
+  width = 24,
+  height = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M17.5 17.5L22 22",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var SearchDropdown = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option",
+  searchPlaceholder = "Search...",
+  className,
+  disabled = false,
+  error,
+  label,
+  name,
+  renderOption,
+  renderSelected,
+  filterFunction,
+  emptyMessage = "No options found",
+  maxHeight = "300px"
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [searchTerm, setSearchTerm] = react.useState("");
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const dropdownRef = react.useRef(null);
+  const searchInputRef = react.useRef(null);
+  const optionsListRef = react.useRef(null);
+  const selectedOption = react.useMemo(
+    () => options.find((opt) => opt.value === value) || null,
+    [options, value]
+  );
+  const defaultFilter = react.useCallback(
+    (option, term) => {
+      return option.label.toLowerCase().includes(term.toLowerCase());
+    },
+    []
+  );
+  const filter = filterFunction || defaultFilter;
+  const filteredOptions = react.useMemo(() => {
+    if (!searchTerm.trim()) return options;
+    return options.filter((option) => filter(option, searchTerm));
+  }, [options, searchTerm, filter]);
+  react.useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+        setFocusedIndex(-1);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 0);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const handleSelect = react.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      onChange?.(option.value, option);
+      setIsOpen(false);
+      setSearchTerm("");
+      setFocusedIndex(-1);
+    },
+    [onChange]
+  );
+  react.useEffect(() => {
+    function handleKeyDown(event) {
+      if (!isOpen) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setFocusedIndex(
+            (prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev
+          );
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setFocusedIndex((prev) => prev > 0 ? prev - 1 : -1);
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+            handleSelect(filteredOptions[focusedIndex]);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          setIsOpen(false);
+          setSearchTerm("");
+          setFocusedIndex(-1);
+          break;
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, filteredOptions, focusedIndex, handleSelect]);
+  react.useEffect(() => {
+    if (focusedIndex >= 0 && optionsListRef.current) {
+      const focusedElement = optionsListRef.current.children[focusedIndex];
+      if (focusedElement) {
+        focusedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }
+  }, [focusedIndex]);
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen((prev) => !prev);
+    if (!isOpen) {
+      setSearchTerm("");
+      setFocusedIndex(-1);
+    }
+  };
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+    setFocusedIndex(-1);
+  };
+  const handleOptionMouseEnter = (index) => {
+    setFocusedIndex(index);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: clsx__default.default(search_dropdown_default.searchDropdown, className, {
+        [search_dropdown_default.disabled]: disabled,
+        [search_dropdown_default.error]: error,
+        [search_dropdown_default.open]: isOpen
+      }),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: search_dropdown_default.label, htmlFor: name, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: search_dropdown_default.dropdownContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: search_dropdown_default.dropdownButton,
+              onClick: handleToggle,
+              disabled,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-label": label || placeholder,
+              id: name,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: search_dropdown_default.selectedValue, children: selectedOption ? renderSelected ? renderSelected(selectedOption) : selectedOption.label : placeholder }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DownChevron,
+                  {
+                    width: 16,
+                    height: 16,
+                    className: clsx__default.default(search_dropdown_default.chevron, {
+                      [search_dropdown_default.chevronOpen]: isOpen
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: search_dropdown_default.dropdownMenu, style: { maxHeight }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: search_dropdown_default.searchContainer, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SearchIcon,
+                {
+                  width: 16,
+                  height: 16,
+                  className: search_dropdown_default.searchIcon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  className: search_dropdown_default.searchInput,
+                  placeholder: searchPlaceholder,
+                  value: searchTerm,
+                  onChange: handleSearchChange,
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && filteredOptions.length === 1) {
+                      e.preventDefault();
+                      handleSelect(filteredOptions[0]);
+                    }
+                  },
+                  autoComplete: "off"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "ul",
+              {
+                ref: optionsListRef,
+                className: search_dropdown_default.optionsList,
+                role: "listbox",
+                children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "li",
+                  {
+                    className: clsx__default.default(search_dropdown_default.option, {
+                      [search_dropdown_default.optionSelected]: option.value === value,
+                      [search_dropdown_default.optionFocused]: index === focusedIndex,
+                      [search_dropdown_default.optionDisabled]: option.disabled
+                    }),
+                    onClick: () => handleSelect(option),
+                    onMouseEnter: () => handleOptionMouseEnter(index),
+                    role: "option",
+                    "aria-selected": option.value === value,
+                    children: renderOption ? renderOption(option) : option.label
+                  },
+                  option.value
+                )) : /* @__PURE__ */ jsxRuntime.jsx("li", { className: search_dropdown_default.emptyMessage, children: emptyMessage })
+              }
+            )
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: search_dropdown_default.errorMessage, children: error })
+      ]
+    }
+  );
+};
+var search_dropdown_default2 = SearchDropdown;
+
+exports.DownChevron = DownChevron;
+exports.search_dropdown_default = search_dropdown_default2;

package/dist/chunk-YK4M3SFP.js

@@ -0,0 +1,301 @@
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/search-dropdown/search-dropdown.tsx
+
+// src/components/search-dropdown/search-dropdown.module.css
+var search_dropdown_default = {};
+function DownChevron({
+  width = 24,
+  height = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      fill: "currentColor",
+      height,
+      width,
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      viewBox: "0 0 407.437 407.437",
+      xmlSpace: "preserve",
+      className,
+      children: /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: "386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 ",
+          strokeWidth: "2"
+        }
+      )
+    }
+  );
+}
+function SearchIcon({
+  width = 24,
+  height = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M17.5 17.5L22 22",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var SearchDropdown = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option",
+  searchPlaceholder = "Search...",
+  className,
+  disabled = false,
+  error,
+  label,
+  name,
+  renderOption,
+  renderSelected,
+  filterFunction,
+  emptyMessage = "No options found",
+  maxHeight = "300px"
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const dropdownRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const optionsListRef = useRef(null);
+  const selectedOption = useMemo(
+    () => options.find((opt) => opt.value === value) || null,
+    [options, value]
+  );
+  const defaultFilter = useCallback(
+    (option, term) => {
+      return option.label.toLowerCase().includes(term.toLowerCase());
+    },
+    []
+  );
+  const filter = filterFunction || defaultFilter;
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm.trim()) return options;
+    return options.filter((option) => filter(option, searchTerm));
+  }, [options, searchTerm, filter]);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+        setFocusedIndex(-1);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 0);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const handleSelect = useCallback(
+    (option) => {
+      if (option.disabled) return;
+      onChange?.(option.value, option);
+      setIsOpen(false);
+      setSearchTerm("");
+      setFocusedIndex(-1);
+    },
+    [onChange]
+  );
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (!isOpen) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setFocusedIndex(
+            (prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev
+          );
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setFocusedIndex((prev) => prev > 0 ? prev - 1 : -1);
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+            handleSelect(filteredOptions[focusedIndex]);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          setIsOpen(false);
+          setSearchTerm("");
+          setFocusedIndex(-1);
+          break;
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, filteredOptions, focusedIndex, handleSelect]);
+  useEffect(() => {
+    if (focusedIndex >= 0 && optionsListRef.current) {
+      const focusedElement = optionsListRef.current.children[focusedIndex];
+      if (focusedElement) {
+        focusedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }
+  }, [focusedIndex]);
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen((prev) => !prev);
+    if (!isOpen) {
+      setSearchTerm("");
+      setFocusedIndex(-1);
+    }
+  };
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+    setFocusedIndex(-1);
+  };
+  const handleOptionMouseEnter = (index) => {
+    setFocusedIndex(index);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: clsx(search_dropdown_default.searchDropdown, className, {
+        [search_dropdown_default.disabled]: disabled,
+        [search_dropdown_default.error]: error,
+        [search_dropdown_default.open]: isOpen
+      }),
+      children: [
+        label && /* @__PURE__ */ jsx("label", { className: search_dropdown_default.label, htmlFor: name, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: search_dropdown_default.dropdownContainer, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: search_dropdown_default.dropdownButton,
+              onClick: handleToggle,
+              disabled,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-label": label || placeholder,
+              id: name,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: search_dropdown_default.selectedValue, children: selectedOption ? renderSelected ? renderSelected(selectedOption) : selectedOption.label : placeholder }),
+                /* @__PURE__ */ jsx(
+                  DownChevron,
+                  {
+                    width: 16,
+                    height: 16,
+                    className: clsx(search_dropdown_default.chevron, {
+                      [search_dropdown_default.chevronOpen]: isOpen
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsxs("div", { className: search_dropdown_default.dropdownMenu, style: { maxHeight }, children: [
+            /* @__PURE__ */ jsxs("div", { className: search_dropdown_default.searchContainer, children: [
+              /* @__PURE__ */ jsx(
+                SearchIcon,
+                {
+                  width: 16,
+                  height: 16,
+                  className: search_dropdown_default.searchIcon
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  className: search_dropdown_default.searchInput,
+                  placeholder: searchPlaceholder,
+                  value: searchTerm,
+                  onChange: handleSearchChange,
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && filteredOptions.length === 1) {
+                      e.preventDefault();
+                      handleSelect(filteredOptions[0]);
+                    }
+                  },
+                  autoComplete: "off"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "ul",
+              {
+                ref: optionsListRef,
+                className: search_dropdown_default.optionsList,
+                role: "listbox",
+                children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    className: clsx(search_dropdown_default.option, {
+                      [search_dropdown_default.optionSelected]: option.value === value,
+                      [search_dropdown_default.optionFocused]: index === focusedIndex,
+                      [search_dropdown_default.optionDisabled]: option.disabled
+                    }),
+                    onClick: () => handleSelect(option),
+                    onMouseEnter: () => handleOptionMouseEnter(index),
+                    role: "option",
+                    "aria-selected": option.value === value,
+                    children: renderOption ? renderOption(option) : option.label
+                  },
+                  option.value
+                )) : /* @__PURE__ */ jsx("li", { className: search_dropdown_default.emptyMessage, children: emptyMessage })
+              }
+            )
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx("span", { className: search_dropdown_default.errorMessage, children: error })
+      ]
+    }
+  );
+};
+var search_dropdown_default2 = SearchDropdown;
+
+export { DownChevron, search_dropdown_default2 as search_dropdown_default };

package/dist/{collections-Bz9KD7Na.d.cts → collections-BDSVfRNo.d.ts}

@@ -1,4 +1,4 @@
-import { m as Product } from './orders-fIdANHSl.cjs';
+import { d as Product } from './product-DJMdi4D4.js';
 
 interface CollectionResponse {
     id: number;

package/dist/{collections-CkEUi3BR.d.ts → collections-WzvTO0OQ.d.cts}

@@ -1,4 +1,4 @@
-import { m as Product } from './orders-fIdANHSl.js';
+import { d as Product } from './product-DJMdi4D4.cjs';
 
 interface CollectionResponse {
     id: number;

package/dist/components/address-form.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkB3BXKMQA_cjs = require('../chunk-B3BXKMQA.cjs');
+require('../chunk-V447PVRV.cjs');
+require('../chunk-KLNKIQQM.cjs');
+require('../chunk-RDUT4W3B.cjs');
+require('../chunk-LJUGNSQQ.cjs');
+require('../chunk-OTMTHA5C.cjs');
+require('../chunk-TB72NPRM.cjs');
+require('../chunk-ECHV2JSY.cjs');
+require('../chunk-BBRXE57K.cjs');
+require('../chunk-NE3ZHELZ.cjs');
+require('../chunk-N3CTXRFT.cjs');
+
+
+
+module.exports = chunkB3BXKMQA_cjs.address_form_default;