@instockng/storefront-ui 1.0.75 → 1.0.76

package/dist/index20.mjs

@@ -1,45 +1,112 @@
 'use client';
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import u from "react";
-import { cn as a } from "./index22.mjs";
-const f = u.forwardRef(
-  ({
-    label: o,
-    error: r,
-    icon: t,
-    className: c,
-    containerClassName: d,
-    required: m,
-    disabled: s,
-    ...n
-  }, i) => /* @__PURE__ */ l("div", { className: a("w-full", d), children: [
-    o && /* @__PURE__ */ l("label", { className: "mb-1.5 block text-sm font-medium text-gray-700", children: [
-      o,
-      m && /* @__PURE__ */ e("span", { className: "ml-1 text-red-600", children: "*" })
-    ] }),
-    /* @__PURE__ */ l("div", { className: "relative", children: [
-      t && /* @__PURE__ */ e("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: t }),
-      /* @__PURE__ */ e(
-        "input",
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { useRef as j, useState as u, useEffect as f } from "react";
+import { createPortal as A } from "react-dom";
+import { X as R } from "lucide-react";
+import { cn as o } from "./index23.mjs";
+import { useHideBodyOverflow as z } from "./index45.mjs";
+function H({
+  isOpen: e,
+  onClose: a,
+  title: l,
+  children: x,
+  footer: i,
+  className: y,
+  contentClassName: h,
+  size: b = "md",
+  closeOnOverlayClick: g = !0,
+  showCloseButton: n = !0
+}) {
+  const v = j(null), [s, m] = u(!1), [p, d] = u(e);
+  if (f(() => {
+    if (e)
+      d(!0), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          m(!0);
+        });
+      });
+    else {
+      m(!1);
+      const t = setTimeout(() => {
+        d(!1);
+      }, 200);
+      return () => clearTimeout(t);
+    }
+  }, [e]), f(() => {
+    const t = (E) => {
+      E.key === "Escape" && e && a();
+    };
+    if (e)
+      return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [e, a]), z(e), !p) return null;
+  const w = {
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+    full: "max-w-full mx-4"
+  }, k = (t) => {
+    g && t.target === t.currentTarget && a();
+  }, N = /* @__PURE__ */ r(
+    "div",
+    {
+      className: o(
+        "fixed inset-0 z-50 flex items-center justify-center sm:p-4 bg-black/50 backdrop-blur-sm transition-opacity duration-200",
+        s ? "opacity-100" : "opacity-0"
+      ),
+      onClick: k,
+      children: /* @__PURE__ */ c(
+        "div",
         {
-          ref: i,
-          disabled: s,
-          className: a(
-            "w-full rounded-lg border px-3 py-2.5 text-sm transition-colors",
-            "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50",
-            t && "pl-10",
-            r ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500",
-            s && "bg-gray-50 text-gray-500 cursor-not-allowed",
-            c
+          ref: v,
+          className: o(
+            "relative w-full bg-white rounded-xl shadow-xl flex flex-col h-[100vh] sm:h-auto sm:max-h-[90vh] transition-all duration-200",
+            s ? "opacity-100 scale-100" : "opacity-0 scale-95",
+            w[b],
+            y
           ),
-          ...n
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": l ? "modal-title" : void 0,
+          children: [
+            (l || n) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0", children: [
+              l && /* @__PURE__ */ r(
+                "h2",
+                {
+                  id: "modal-title",
+                  className: "text-md font-semibold text-gray-900",
+                  children: l
+                }
+              ),
+              n && /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: a,
+                  className: "ml-auto p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ r(R, { size: 20 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: o(
+                  "flex-1 overflow-y-auto p-4 min-h-0",
+                  h
+                ),
+                children: x
+              }
+            ),
+            i && /* @__PURE__ */ r("div", { className: "p-4 border-t border-gray-200 bg-gray-50 flex-shrink-0 rounded-b-xl", children: i })
+          ]
         }
       )
-    ] }),
-    r && /* @__PURE__ */ e("p", { className: "mt-1.5 text-sm text-red-600", role: "alert", children: r })
-  ] })
-);
-f.displayName = "FormInput";
+    }
+  );
+  return A(N, document.body);
+}
 export {
-  f as FormInput
+  H as Modal
 };

package/dist/index201.mjs

@@ -1,6 +1,6 @@
 'use client';
 import { __exports as r } from "./index252.mjs";
-import { __require as s } from "./index119.mjs";
+import { __require as s } from "./index133.mjs";
 var a;
 function _() {
   return a ? r : (a = 1, function(t) {

package/dist/index21.mjs

@@ -1,45 +1,45 @@
 'use client';
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import g from "react";
-import { cn as l } from "./index22.mjs";
-const u = g.forwardRef(
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import u from "react";
+import { cn as a } from "./index23.mjs";
+const f = u.forwardRef(
   ({
-    label: t,
-    error: e,
-    className: a,
-    containerClassName: c,
+    label: o,
+    error: r,
+    icon: t,
+    className: c,
+    containerClassName: d,
     required: m,
-    disabled: o,
-    children: n,
-    ...i
-  }, d) => /* @__PURE__ */ s("div", { className: l("w-full", c), children: [
-    t && /* @__PURE__ */ s("label", { className: "mb-1.5 block text-sm font-medium text-gray-700", children: [
-      t,
-      m && /* @__PURE__ */ r("span", { className: "ml-1 text-red-600", children: "*" })
+    disabled: s,
+    ...n
+  }, i) => /* @__PURE__ */ l("div", { className: a("w-full", d), children: [
+    o && /* @__PURE__ */ l("label", { className: "mb-1.5 block text-sm font-medium text-gray-700", children: [
+      o,
+      m && /* @__PURE__ */ e("span", { className: "ml-1 text-red-600", children: "*" })
     ] }),
-    /* @__PURE__ */ r(
-      "select",
-      {
-        ref: d,
-        disabled: o,
-        className: l(
-          "w-full rounded-lg border px-3 py-2.5 text-sm transition-colors",
-          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50",
-          "appearance-none bg-white",
-          `bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E")] bg-no-repeat bg-[right_0.75rem_center]`,
-          "pr-10",
-          e ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500",
-          o && "bg-gray-50 text-gray-500 cursor-not-allowed",
-          a
-        ),
-        ...i,
-        children: n
-      }
-    ),
-    e && /* @__PURE__ */ r("p", { className: "mt-1.5 text-sm text-red-600", role: "alert", children: e })
+    /* @__PURE__ */ l("div", { className: "relative", children: [
+      t && /* @__PURE__ */ e("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: t }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: i,
+          disabled: s,
+          className: a(
+            "w-full rounded-lg border px-3 py-2.5 text-sm transition-colors",
+            "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50",
+            t && "pl-10",
+            r ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500",
+            s && "bg-gray-50 text-gray-500 cursor-not-allowed",
+            c
+          ),
+          ...n
+        }
+      )
+    ] }),
+    r && /* @__PURE__ */ e("p", { className: "mt-1.5 text-sm text-red-600", role: "alert", children: r })
   ] })
 );
-u.displayName = "FormSelect";
+f.displayName = "FormInput";
 export {
-  u as FormSelect
+  f as FormInput
 };

package/dist/index210.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { __module as b } from "./index255.mjs";
-import S from "./index256.mjs";
+import { __module as b } from "./index256.mjs";
+import S from "./index257.mjs";
 var _;
 function $() {
   return _ ? b.exports : (_ = 1, (() => {

package/dist/index212.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as e } from "./index253.mjs";
+import { __exports as e } from "./index254.mjs";
 /**
  * @license React
  * react-is.production.js

package/dist/index213.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as e } from "./index254.mjs";
+import { __exports as e } from "./index255.mjs";
 /**
  * @license React
  * react-is.development.js

package/dist/index214.mjs

@@ -1,5 +1,5 @@
 'use client';
-import p from "./index94.mjs";
+import p from "./index88.mjs";
 function i(n) {
   const t = {
     "!": "%21",

package/dist/index215.mjs

@@ -1,7 +1,7 @@
 'use client';
-import i from "./index84.mjs";
-import m from "./index88.mjs";
-import s from "./index98.mjs";
+import i from "./index78.mjs";
+import m from "./index82.mjs";
+import s from "./index92.mjs";
 function h(f, t) {
   const o = this || m, r = t || o, n = s.from(r.headers);
   let a = r.data;

package/dist/index218.mjs

@@ -1,7 +1,7 @@
 'use client';
-import o from "./index266.mjs";
-import r from "./index267.mjs";
-import t from "./index268.mjs";
+import o from "./index258.mjs";
+import r from "./index259.mjs";
+import t from "./index260.mjs";
 const l = {
   isBrowser: !0,
   classes: {

package/dist/index22.mjs

@@ -1,74 +1,45 @@
 'use client';
-import { clsx as i } from "./index51.mjs";
-import { twMerge as u } from "./index52.mjs";
-function l(...t) {
-  return u(i(t));
-}
-function f(t) {
-  return new Intl.NumberFormat("en-NG", {
-    style: "currency",
-    currency: "NGN",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  }).format(t);
-}
-function m(t) {
-  return (typeof t == "string" ? new Date(t) : t).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric"
-  });
-}
-function d(t) {
-  return (typeof t == "string" ? new Date(t) : t).toLocaleString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit"
-  });
-}
-function s(t) {
-  return {
-    pending: "bg-yellow-100 text-yellow-800",
-    shipped: "bg-blue-100 text-blue-800",
-    delivered: "bg-green-100 text-green-800",
-    cancelled: "bg-red-100 text-red-800",
-    refunded: "bg-purple-100 text-purple-800",
-    prospect: "bg-orange-100 text-orange-800"
-  }[t] || "bg-gray-100 text-gray-800";
-}
-function r(t) {
-  var o;
-  if (typeof document > "u") return;
-  const n = `; ${document.cookie}`.split(`; ${t}=`);
-  if (n.length === 2) return (o = n.pop()) == null ? void 0 : o.split(";").shift();
-}
-function c(t) {
-  return typeof window > "u" ? void 0 : new URLSearchParams(window.location.search).get(t) || void 0;
-}
-function p() {
-  return {
-    fbc: r("_fbc"),
-    fbp: r("_fbp")
-  };
-}
-function y() {
-  return {
-    ttp: r("_ttp"),
-    ttclid: c("ttclid")
-  };
-}
-function b(t, e, n) {
-  return `${t}_${e}_${n}`;
-}
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import g from "react";
+import { cn as l } from "./index23.mjs";
+const u = g.forwardRef(
+  ({
+    label: t,
+    error: e,
+    className: a,
+    containerClassName: c,
+    required: m,
+    disabled: o,
+    children: n,
+    ...i
+  }, d) => /* @__PURE__ */ s("div", { className: l("w-full", c), children: [
+    t && /* @__PURE__ */ s("label", { className: "mb-1.5 block text-sm font-medium text-gray-700", children: [
+      t,
+      m && /* @__PURE__ */ r("span", { className: "ml-1 text-red-600", children: "*" })
+    ] }),
+    /* @__PURE__ */ r(
+      "select",
+      {
+        ref: d,
+        disabled: o,
+        className: l(
+          "w-full rounded-lg border px-3 py-2.5 text-sm transition-colors",
+          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50",
+          "appearance-none bg-white",
+          `bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E")] bg-no-repeat bg-[right_0.75rem_center]`,
+          "pr-10",
+          e ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500",
+          o && "bg-gray-50 text-gray-500 cursor-not-allowed",
+          a
+        ),
+        ...i,
+        children: n
+      }
+    ),
+    e && /* @__PURE__ */ r("p", { className: "mt-1.5 text-sm text-red-600", role: "alert", children: e })
+  ] })
+);
+u.displayName = "FormSelect";
 export {
-  l as cn,
-  f as formatCurrency,
-  m as formatDate,
-  d as formatDateTime,
-  b as generateClientEventId,
-  p as getFbCookies,
-  s as getStatusColor,
-  y as getTikTokCookies
+  u as FormSelect
 };

package/dist/index220.mjs

@@ -1,5 +1,5 @@
 'use client';
-import a from "./index95.mjs";
+import a from "./index89.mjs";
 function E(i, f, t) {
   const u = t.config.validateStatus;
   !t.status || !u || u(t.status) ? i(t) : f(new a(

package/dist/index222.mjs

@@ -1,7 +1,7 @@
 'use client';
-import i from "./index269.mjs";
-import m from "./index270.mjs";
-import f from "./index84.mjs";
+import i from "./index261.mjs";
+import m from "./index262.mjs";
+import f from "./index78.mjs";
 const h = (t, o, a = 3) => {
   let r = 0;
   const c = i(50, 250);

package/dist/index223.mjs

@@ -1,12 +1,12 @@
 'use client';
-import n from "./index150.mjs";
-import m from "./index84.mjs";
-import c from "./index271.mjs";
-import h from "./index272.mjs";
-import w from "./index146.mjs";
-import b from "./index87.mjs";
-import C from "./index98.mjs";
-import g from "./index143.mjs";
+import n from "./index112.mjs";
+import m from "./index78.mjs";
+import c from "./index263.mjs";
+import h from "./index264.mjs";
+import w from "./index108.mjs";
+import b from "./index81.mjs";
+import C from "./index92.mjs";
+import g from "./index105.mjs";
 const E = (a) => {
   const e = b({}, a);
   let { data: i, withXSRFToken: r, xsrfHeaderName: f, xsrfCookieName: d, headers: o, auth: s } = e;

package/dist/index224.mjs

@@ -1,7 +1,7 @@
 'use client';
-import a from "./index90.mjs";
-import s from "./index95.mjs";
-import m from "./index84.mjs";
+import a from "./index84.mjs";
+import s from "./index89.mjs";
+import m from "./index78.mjs";
 const h = (e, t) => {
   const { length: l } = e = e ? e.filter(Boolean) : [];
   if (t || l) {

package/dist/index226.mjs

@@ -1,5 +1,5 @@
 'use client';
-var r = {};
+var a = {};
 export {
-  r as __exports
+  a as __exports
 };

package/dist/index227.mjs

@@ -1,111 +1,5 @@
 'use client';
-import { __exports as m } from "./index257.mjs";
-var p;
-function S() {
-  return p ? m : (p = 1, function(d) {
-    Object.defineProperty(d, "__esModule", {
-      value: !0
-    });
-    function g(o, e) {
-      for (var r in e) Object.defineProperty(o, r, {
-        enumerable: !0,
-        get: e[r]
-      });
-    }
-    g(d, {
-      getSortedRouteObjects: function() {
-        return w;
-      },
-      getSortedRoutes: function() {
-        return f;
-      }
-    });
-    class h {
-      insert(e) {
-        this._insert(e.split("/").filter(Boolean), [], !1);
-      }
-      smoosh() {
-        return this._smoosh();
-      }
-      _smoosh(e) {
-        e === void 0 && (e = "/");
-        const r = [
-          ...this.children.keys()
-        ].sort();
-        this.slugName !== null && r.splice(r.indexOf("[]"), 1), this.restSlugName !== null && r.splice(r.indexOf("[...]"), 1), this.optionalRestSlugName !== null && r.splice(r.indexOf("[[...]]"), 1);
-        const n = r.map((s) => this.children.get(s)._smoosh("" + e + s + "/")).reduce((s, t) => [
-          ...s,
-          ...t
-        ], []);
-        if (this.slugName !== null && n.push(...this.children.get("[]")._smoosh(e + "[" + this.slugName + "]/")), !this.placeholder) {
-          const s = e === "/" ? "/" : e.slice(0, -1);
-          if (this.optionalRestSlugName != null)
-            throw new Error('You cannot define a route with the same specificity as a optional catch-all route ("' + s + '" and "' + s + "[[..." + this.optionalRestSlugName + ']]").');
-          n.unshift(s);
-        }
-        return this.restSlugName !== null && n.push(...this.children.get("[...]")._smoosh(e + "[..." + this.restSlugName + "]/")), this.optionalRestSlugName !== null && n.push(...this.children.get("[[...]]")._smoosh(e + "[[..." + this.optionalRestSlugName + "]]/")), n;
-      }
-      _insert(e, r, n) {
-        if (e.length === 0) {
-          this.placeholder = !1;
-          return;
-        }
-        if (n)
-          throw new Error("Catch-all must be the last part of the URL.");
-        let s = e[0];
-        if (s.startsWith("[") && s.endsWith("]")) {
-          let l = function(u, a) {
-            if (u !== null && u !== a)
-              throw new Error("You cannot use different slug names for the same dynamic path ('" + u + "' !== '" + a + "').");
-            r.forEach((c) => {
-              if (c === a)
-                throw new Error('You cannot have the same slug name "' + a + '" repeat within a single dynamic path');
-              if (c.replace(/\W/g, "") === s.replace(/\W/g, ""))
-                throw new Error('You cannot have the slug names "' + c + '" and "' + a + '" differ only by non-word symbols within a single dynamic path');
-            }), r.push(a);
-          }, t = s.slice(1, -1), i = !1;
-          if (t.startsWith("[") && t.endsWith("]") && (t = t.slice(1, -1), i = !0), t.startsWith("…"))
-            throw new Error("Detected a three-dot character ('…') at ('" + t + "'). Did you mean ('...')?");
-          if (t.startsWith("...") && (t = t.substring(3), n = !0), t.startsWith("[") || t.endsWith("]"))
-            throw new Error("Segment names may not start or end with extra brackets ('" + t + "').");
-          if (t.startsWith("."))
-            throw new Error("Segment names may not start with erroneous periods ('" + t + "').");
-          if (n)
-            if (i) {
-              if (this.restSlugName != null)
-                throw new Error('You cannot use both an required and optional catch-all route at the same level ("[...' + this.restSlugName + ']" and "' + e[0] + '" ).');
-              l(this.optionalRestSlugName, t), this.optionalRestSlugName = t, s = "[[...]]";
-            } else {
-              if (this.optionalRestSlugName != null)
-                throw new Error('You cannot use both an optional and required catch-all route at the same level ("[[...' + this.optionalRestSlugName + ']]" and "' + e[0] + '").');
-              l(this.restSlugName, t), this.restSlugName = t, s = "[...]";
-            }
-          else {
-            if (i)
-              throw new Error('Optional route parameters are not yet supported ("' + e[0] + '").');
-            l(this.slugName, t), this.slugName = t, s = "[]";
-          }
-        }
-        this.children.has(s) || this.children.set(s, new h()), this.children.get(s)._insert(e.slice(1), r, n);
-      }
-      constructor() {
-        this.placeholder = !0, this.children = /* @__PURE__ */ new Map(), this.slugName = null, this.restSlugName = null, this.optionalRestSlugName = null;
-      }
-    }
-    function f(o) {
-      const e = new h();
-      return o.forEach((r) => e.insert(r)), e.smoosh();
-    }
-    function w(o, e) {
-      const r = {}, n = [];
-      for (let t = 0; t < o.length; t++) {
-        const i = e(o[t]);
-        r[i] = t, n[t] = i;
-      }
-      return f(n).map((t) => o[r[t]]);
-    }
-  }(m), m);
-}
+var t = {};
 export {
-  S as __require
+  t as __exports
 };

package/dist/index228.mjs

@@ -1,5 +1,5 @@
 'use client';
-var a = {};
+var e = { exports: {} };
 export {
-  a as __exports
+  e as __module
 };

package/dist/index229.mjs

@@ -1,5 +1,5 @@
 'use client';
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };