@storepecker/storefront-core 2.3.5 → 2.4.0

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/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;

package/dist/components/address-form.css

@@ -0,0 +1,329 @@
+/* src/components/address-form/address-form.module.css */
+.addressForm {
+  font-family: var(--body-font, "Inter", sans-serif);
+}
+.formBody {
+  max-height: 350px;
+  overflow-y: auto;
+}
+@media screen and (min-width: 640px) {
+  .formBody {
+    max-height: 480px;
+  }
+}
+.formGroup {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+.formGroup label {
+  display: block;
+  color: var(--text-primary, #000);
+  font-size: var(--fs-md, 14px);
+  margin-bottom: 0.5rem;
+}
+.formControl {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  color: var(--text-primary, #000);
+  font-size: var(--fs-md, 14px);
+  transition: all 0.2s ease-in;
+  border: 1px solid var(--bg-border, #d0d0d0);
+  border-radius: 4px;
+  outline: none;
+  box-shadow: none;
+  background-color: #fafafa;
+}
+.formControl:focus {
+  border-color: var(--text-primary, #000);
+}
+.formControl::placeholder {
+  color: var(--text-secondary, #666);
+}
+.error {
+  font-size: 0.75rem;
+  color: var(--error, #bc3232);
+  position: absolute;
+  font-weight: 400;
+  bottom: -20px;
+  left: 0;
+}
+.row {
+  display: flex;
+  gap: 0.75rem;
+}
+.col {
+  flex: 1;
+  min-width: 0;
+}
+.phoneRow {
+  display: flex;
+  gap: 0.5rem;
+}
+.phoneCodeCol {
+  width: 8rem;
+  flex-shrink: 0;
+}
+.phoneInputCol {
+  flex: 1;
+  min-width: 0;
+}
+.divider {
+  border: none;
+  border-top: 1px solid var(--bg-border, #d0d0d0);
+  margin: 0.75rem 0;
+}
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  font-size: var(--fs-md, 14px);
+  cursor: pointer;
+  gap: 0.5rem;
+}
+.checkboxInput {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--primary, #003d29);
+  cursor: pointer;
+}
+.formFooter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+}
+.cancelBtn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--bg-secondary, rgb(243 244 246));
+  color: var(--text-primary, #000);
+  font-size: var(--fs-md, 14px);
+  cursor: pointer;
+  transition: var(--transition-all, all 0.25s ease);
+}
+.cancelBtn:hover {
+  background-color: var(--bg-border, #d0d0d0);
+}
+.selectWrapper {
+  position: relative;
+}
+.selectArrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--text-secondary, #666);
+}
+.formControl[data-select] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: 2rem;
+}
+.phoneCodeCol .dropdownButton {
+  min-height: auto;
+}
+
+/* src/components/search-dropdown/search-dropdown.module.css */
+.searchDropdown {
+  position: relative;
+  width: 100%;
+  font-family: var(--body-font, "Inter", sans-serif);
+}
+.label {
+  display: block;
+  margin-bottom: var(--sm, 8px);
+  font-size: var(--fs-md, 14px);
+  color: var(--text-secondary, #666);
+  font-weight: 400;
+}
+.dropdownContainer {
+  position: relative;
+}
+.dropdownButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--smd, 12px);
+  font-size: var(--fs-md, 14px);
+  color: var(--text-primary, #000);
+  background-color: transparent;
+  border-radius: var(--xs, 4px);
+  cursor: pointer;
+  transition: var(--transition-all, all 0.25s ease);
+  text-align: left;
+  min-height: 38px;
+  border: none !important;
+  outline: none !important;
+  box-shadow: 0px 0px 0px 1px var(--bg-border, #d0d0d0);
+}
+.dropdownButton:focus {
+  outline: none;
+  box-shadow: 0px 0px 0px 1.5px var(--bg-dark, #3d3b40);
+}
+.dropdownButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background-color: var(--bg-secondary, rgb(243 244 246));
+}
+.selectedValue {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary, #000);
+  font-weight: 500;
+}
+.chevron {
+  flex-shrink: 0;
+  margin-left: var(--sm, 8px);
+  color: var(--text-secondary, #666);
+  transition: transform 0.25s ease;
+}
+.chevronOpen {
+  transform: rotate(180deg);
+}
+.dropdownMenu {
+  position: absolute;
+  top: calc(100% + var(--xs, 4px));
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--bg-primary, #fefefe);
+  border: 1px solid var(--bg-border, #d0d0d0);
+  border-radius: var(--xs, 4px);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  animation: slideDown 0.2s ease-out;
+  min-width: 260px;
+}
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.searchContainer {
+  position: relative;
+  padding: var(--sm, 8px);
+  border-bottom: 1px solid var(--bg-border, #d0d0d0);
+  background-color: var(--bg-primary-smoke, #efefef);
+}
+.searchIcon {
+  position: absolute;
+  left: var(--md, 16px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary, #666);
+  pointer-events: none;
+}
+.searchInput {
+  width: 100%;
+  padding: var(--sm, 8px) var(--sm, 8px) var(--sm, 8px) var(--xl, 32px);
+  font-size: var(--fs-md, 14px);
+  color: var(--text-primary, #000);
+  background-color: var(--bg-primary, #fefefe);
+  border: 1px solid var(--bg-border, #d0d0d0);
+  border-radius: var(--xs, 4px);
+  outline: none;
+  transition: var(--transition-all, all 0.25s ease);
+}
+.searchInput:focus {
+  border-color: var(--bg-dark, #3d3b40);
+  box-shadow: 0px 0px 0px 1.5px var(--bg-dark, #3d3b40);
+}
+.searchInput::placeholder {
+  color: var(--text-secondary, #666);
+}
+.optionsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  max-height: inherit;
+}
+.option {
+  padding: var(--smd, 12px) var(--md, 16px);
+  font-size: var(--fs-md, 14px);
+  color: var(--text-primary, #000);
+  cursor: pointer;
+  transition: var(--transition-all, all 0.25s ease);
+  border-bottom: 1px solid var(--bg-border, #d0d0d0);
+}
+.option:last-child {
+  border-bottom: none;
+}
+.option:hover:not(.optionDisabled) {
+  background-color: var(--bg-primary-smoke, #efefef);
+  color: var(--text-primary, #000);
+}
+.optionFocused:not(.optionDisabled) {
+  background-color: var(--primary-lighter, #f0f4f8);
+  color: var(--text-primary, #000);
+}
+.optionSelected {
+  background-color: var(--primary-lighter2, #d8e4f0);
+  color: var(--primary, #003d29);
+  font-weight: 500;
+}
+.optionDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--bg-secondary, rgb(243 244 246));
+}
+.emptyMessage {
+  padding: var(--md, 16px);
+  text-align: center;
+  color: var(--text-secondary, #666);
+  font-size: var(--fs-md, 14px);
+  font-style: italic;
+}
+.errorMessage {
+  display: block;
+  margin-top: var(--xs, 4px);
+  font-size: var(--fs-sm, 12px);
+  color: var(--error, #bc3232);
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+}
+.error .dropdownButton {
+  border-color: var(--error, #bc3232);
+}
+.error .dropdownButton:focus {
+  border-color: var(--error, #bc3232);
+  box-shadow: 0px 0px 0px 1.5px var(--error, #bc3232);
+}
+.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.open .dropdownButton {
+  border-color: var(--bg-dark, #3d3b40);
+  box-shadow: 0px 0px 0px 1.5px var(--bg-dark, #3d3b40);
+}
+.countryCodeDropdown .label {
+  display: none;
+}
+.countryCodeDropdown .dropdownButton {
+  min-height: auto;
+  padding: 0.5rem 0.625rem;
+  font-size: var(--fs-md, 14px);
+}
+.countryCodeDropdown .selectedValue {
+  font-size: var(--fs-md, 14px);
+  font-weight: 500;
+}
+@media screen and (max-width: 768px) {
+  .dropdownMenu {
+    max-height: 250px;
+  }
+}

package/dist/components/address-form.d.cts

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import { U as UseAddressFormOptions, u as useAddressForm } from '../useAddressForm-DGbEn91-.cjs';
+import 'formik';
+import '../address-DwBZHzbI.cjs';
+
+interface AddressFormRef {
+    formik: ReturnType<typeof useAddressForm>["formik"];
+    resetForm: () => void;
+}
+interface AddressFormProps extends UseAddressFormOptions {
+    /** Custom Button component rendered for the submit action. Receives type, disabled, children. */
+    renderButton?: (props: {
+        type: "submit";
+        disabled: boolean;
+        loading: boolean;
+        children: React__default.ReactNode;
+    }) => React__default.ReactNode;
+    /** Called when formik instance is ready (alternative to ref) */
+    onFormikReady?: (formik: ReturnType<typeof useAddressForm>["formik"]) => void;
+    /** Called when cancel is clicked */
+    onCancel?: () => void;
+    /** Show cancel button. Default: true */
+    showCancel?: boolean;
+    /** Show "Make default address" checkbox. Default: true */
+    showDefaultCheckbox?: boolean;
+    /** Custom class name for the form wrapper */
+    className?: string;
+    /** Submit button text. Default: "Save" */
+    submitLabel?: string;
+}
+declare const AddressForm: React__default.ForwardRefExoticComponent<AddressFormProps & React__default.RefAttributes<AddressFormRef>>;
+
+export { type AddressFormProps, type AddressFormRef, AddressForm as default };

package/dist/components/address-form.d.ts

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import { U as UseAddressFormOptions, u as useAddressForm } from '../useAddressForm-cO3Au33k.js';
+import 'formik';
+import '../address-DwBZHzbI.js';
+
+interface AddressFormRef {
+    formik: ReturnType<typeof useAddressForm>["formik"];
+    resetForm: () => void;
+}
+interface AddressFormProps extends UseAddressFormOptions {
+    /** Custom Button component rendered for the submit action. Receives type, disabled, children. */
+    renderButton?: (props: {
+        type: "submit";
+        disabled: boolean;
+        loading: boolean;
+        children: React__default.ReactNode;
+    }) => React__default.ReactNode;
+    /** Called when formik instance is ready (alternative to ref) */
+    onFormikReady?: (formik: ReturnType<typeof useAddressForm>["formik"]) => void;
+    /** Called when cancel is clicked */
+    onCancel?: () => void;
+    /** Show cancel button. Default: true */
+    showCancel?: boolean;
+    /** Show "Make default address" checkbox. Default: true */
+    showDefaultCheckbox?: boolean;
+    /** Custom class name for the form wrapper */
+    className?: string;
+    /** Submit button text. Default: "Save" */
+    submitLabel?: string;
+}
+declare const AddressForm: React__default.ForwardRefExoticComponent<AddressFormProps & React__default.RefAttributes<AddressFormRef>>;
+
+export { type AddressFormProps, type AddressFormRef, AddressForm as default };