@loczer/storefront-sdk 0.172.0 → 0.174.0

package/dist/ui/drawer.d.ts

@@ -35,11 +35,14 @@ declare const DrawerOverlay: React.ForwardRefExoticComponent<React.HTMLAttribute
     }) => void;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    closeButtonTestId?: string;
+    closeLabel?: string;
     onPointerDownOutside?: (event: {
         detail: {
             originalEvent: PointerEvent;
         };
     }) => void;
+    showCloseButton?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/ui/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/ui/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAoB1D,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,SAAoB,EACpB,QAAQ,EACR,KAAY,EACZ,WAAkB,EAClB,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,iBAAiB,EACnC,UAAU,EAAE,WAAW,EACvB,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,mBAAmB,EACvC,UAAiB,GAClB,EAAE,WAAW,2CA4Bb;AAMD,QAAA,MAAM,aAAa;cAHP,OAAO;2CAsBlB,CAAA;AAGD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAC/B,CAAA;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,4BAmB/D;AAMD,QAAA,MAAM,WAAW;cAHL,OAAO;2CAsBlB,CAAA;AAOD,QAAA,MAAM,aAAa;2BAHM,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,aAAa,EAAE,YAAY,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI;wCAiCpF,CAAA;AAOD,QAAA,MAAM,aAAa;2BAHM,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,aAAa,EAAE,YAAY,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI;wCAgDpF,CAAA;AAGD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,QAAA,MAAM,WAAW,qHAUf,CAAA;AAGF,QAAA,MAAM,iBAAiB,yHAUrB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/ui/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,KAAK,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAoB1D,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,SAAoB,EACpB,QAAQ,EACR,KAAY,EACZ,WAAkB,EAClB,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,iBAAiB,EACnC,UAAU,EAAE,WAAW,EACvB,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,mBAAmB,EACvC,UAAiB,GAClB,EAAE,WAAW,2CA4Bb;AAMD,QAAA,MAAM,aAAa;cAHP,OAAO;2CAsBlB,CAAA;AAGD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAC/B,CAAA;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,4BAmB/D;AAMD,QAAA,MAAM,WAAW;cAHL,OAAO;2CAsBlB,CAAA;AAOD,QAAA,MAAM,aAAa;2BAHM,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,aAAa,EAAE,YAAY,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI;wCAiCpF,CAAA;AAUD,QAAA,MAAM,aAAa;wBANG,MAAM;iBACb,MAAM;2BACI,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,aAAa,EAAE,YAAY,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI;sBACjE,OAAO;wCAsE1B,CAAA;AAGD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,QAAA,MAAM,WAAW,qHAUf,CAAA;AAGF,QAAA,MAAM,iBAAiB,yHAUrB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/ui/drawer.js

@@ -1,142 +1,163 @@
-import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
 import * as a from "react";
-import { createPortal as P } from "react-dom";
-import { cn as c } from "@rpcbase/ui";
-import { useAriaHiddenSiblings as k } from "./modal-aria.js";
-import { Slot as g } from "./slot.js";
-const y = a.createContext(null), f = () => {
-  const e = a.useContext(y);
+import { createPortal as O } from "react-dom";
+import { X as R } from "lucide-react";
+import { cn as u } from "@rpcbase/ui";
+import { useAriaHiddenSiblings as S } from "./modal-aria.js";
+import { Slot as y } from "./slot.js";
+const D = a.createContext(null), f = () => {
+  const e = a.useContext(D);
   if (!e)
     throw new Error("Drawer components must be used within <Drawer>");
   return e;
 };
-function K({
+function U({
   open: e,
   defaultOpen: t = !1,
   onOpenChange: r,
-  direction: s = "bottom",
-  children: d,
-  modal: n = !0,
+  direction: i = "bottom",
+  children: s,
+  modal: l = !0,
   dismissible: o = !0,
-  fixed: u,
-  repositionInputs: l,
-  snapPoints: w,
-  activeSnapPoint: A,
-  setActiveSnapPoint: j,
-  lockScroll: x = !0
+  fixed: m,
+  repositionInputs: d,
+  snapPoints: b,
+  activeSnapPoint: g,
+  setActiveSnapPoint: c,
+  lockScroll: p = !0
 }) {
-  const [h, C] = a.useState(t), b = e !== void 0, p = b ? e : h, N = (m) => {
-    b || C(m), r?.(m);
+  const [N, k] = a.useState(t), v = e !== void 0, x = v ? e : N, E = (w) => {
+    v || k(w), r?.(w);
   };
   return a.useEffect(() => {
-    if (!p || !x || typeof document > "u")
+    if (!x || !p || typeof document > "u")
       return;
-    const m = document.body.style.overflow;
+    const w = document.body.style.overflow;
     return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = m;
+      document.body.style.overflow = w;
     };
-  }, [x, p]), /* @__PURE__ */ i(y.Provider, { value: { open: p, setOpen: N, direction: s, modal: n, dismissible: o }, children: d });
+  }, [p, x]), /* @__PURE__ */ n(D.Provider, { value: { open: x, setOpen: E, direction: i, modal: l, dismissible: o }, children: s });
 }
-const E = a.forwardRef(
-  ({ asChild: e, onClick: t, ...r }, s) => {
-    const { setOpen: d } = f();
-    return /* @__PURE__ */ i(
-      e ? g : "button",
+const z = a.forwardRef(
+  ({ asChild: e, onClick: t, ...r }, i) => {
+    const { setOpen: s } = f();
+    return /* @__PURE__ */ n(
+      e ? y : "button",
       {
-        ref: s,
+        ref: i,
         "data-slot": "drawer-trigger",
         onClick: (o) => {
-          t?.(o), o.defaultPrevented || d(!0);
+          t?.(o), o.defaultPrevented || s(!0);
         },
         ...r
       }
     );
   }
 );
-E.displayName = "DrawerTrigger";
-function O({ children: e, container: t }) {
-  const { open: r, modal: s } = f(), [d, n] = a.useState(!1), o = a.useRef(null);
+z.displayName = "DrawerTrigger";
+function _({ children: e, container: t }) {
+  const { open: r, modal: i } = f(), [s, l] = a.useState(!1), o = a.useRef(null);
   return a.useEffect(() => {
-    n(!0);
-  }, []), k(r && d && s, o), !r || !d || typeof document > "u" ? null : P(
-    /* @__PURE__ */ i("div", { ref: o, "data-slot": "drawer-portal", children: e }),
+    l(!0);
+  }, []), S(r && s && i, o), !r || !s || typeof document > "u" ? null : O(
+    /* @__PURE__ */ n("div", { ref: o, "data-slot": "drawer-portal", children: e }),
     t ?? document.body
   );
 }
-const R = a.forwardRef(
-  ({ asChild: e, onClick: t, ...r }, s) => {
-    const { setOpen: d } = f();
-    return /* @__PURE__ */ i(
-      e ? g : "button",
+const C = a.forwardRef(
+  ({ asChild: e, onClick: t, ...r }, i) => {
+    const { setOpen: s } = f();
+    return /* @__PURE__ */ n(
+      e ? y : "button",
       {
-        ref: s,
+        ref: i,
         "data-slot": "drawer-close",
         onClick: (o) => {
-          t?.(o), o.defaultPrevented || d(!1);
+          t?.(o), o.defaultPrevented || s(!1);
         },
         ...r
       }
     );
   }
 );
-R.displayName = "DrawerClose";
-const D = a.forwardRef(
-  ({ className: e, onClick: t, onPointerDownOutside: r, ...s }, d) => {
-    const { setOpen: n, dismissible: o } = f(), u = (l) => {
-      t?.(l), !(l.defaultPrevented || !o) && (l.stopPropagation(), n(!1));
+C.displayName = "DrawerClose";
+const P = a.forwardRef(
+  ({ className: e, onClick: t, onPointerDownOutside: r, ...i }, s) => {
+    const { setOpen: l, dismissible: o } = f(), m = (d) => {
+      t?.(d), !(d.defaultPrevented || !o) && (d.stopPropagation(), l(!1));
     };
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ n(
       "div",
       {
-        ref: d,
+        ref: s,
         "data-slot": "drawer-overlay",
         "data-state": "open",
-        className: c(
+        className: u(
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
           e
         ),
-        onPointerDown: (l) => {
-          r?.({ detail: { originalEvent: l.nativeEvent } });
+        onPointerDown: (d) => {
+          r?.({ detail: { originalEvent: d.nativeEvent } });
         },
-        onClick: u,
-        ...s
+        onClick: m,
+        ...i
       }
     );
   }
 );
-D.displayName = "DrawerOverlay";
-const S = a.forwardRef(
-  ({ className: e, children: t, onPointerDownOutside: r, ...s }, d) => {
-    const { direction: n, setOpen: o, dismissible: u } = f();
+P.displayName = "DrawerOverlay";
+const T = a.forwardRef(
+  ({
+    className: e,
+    children: t,
+    closeButtonTestId: r = "drawer-close",
+    closeLabel: i = "Close",
+    onPointerDownOutside: s,
+    showCloseButton: l = !1,
+    ...o
+  }, m) => {
+    const { direction: d, setOpen: b, dismissible: g } = f();
     return a.useEffect(() => {
       if (typeof document > "u")
         return;
-      const l = (w) => {
-        u && w.key === "Escape" && o(!1);
+      const c = (p) => {
+        g && p.key === "Escape" && b(!1);
       };
-      return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
-    }, [u, o]), /* @__PURE__ */ v(O, { children: [
-      /* @__PURE__ */ i(D, { onPointerDownOutside: r }),
-      /* @__PURE__ */ v(
+      return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
+    }, [g, b]), /* @__PURE__ */ h(_, { children: [
+      /* @__PURE__ */ n(P, { onPointerDownOutside: s }),
+      /* @__PURE__ */ h(
         "div",
         {
-          ref: d,
+          ref: m,
           "data-slot": "drawer-content",
-          "data-drawer-direction": n,
+          "data-drawer-direction": d,
           "data-state": "open",
           role: "dialog",
           "aria-modal": "true",
-          className: c(
+          className: u(
             "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-            n === "top" && "inset-x-0 top-0 mb-24 max-h-[80vh] rounded-b-lg border-b",
-            n === "bottom" && "inset-x-0 bottom-0 max-h-[95dvh] rounded-t-lg border-t",
-            n === "right" && "inset-y-0 right-0 w-3/4 border-l sm:max-w-sm",
-            n === "left" && "inset-y-0 left-0 w-3/4 border-r sm:max-w-sm",
+            d === "top" && "inset-x-0 top-0 mb-24 max-h-[80vh] rounded-b-lg border-b",
+            d === "bottom" && "inset-x-0 bottom-0 max-h-[95dvh] rounded-t-lg border-t",
+            d === "right" && "inset-y-0 right-0 w-3/4 border-l sm:max-w-sm",
+            d === "left" && "inset-y-0 left-0 w-3/4 border-r sm:max-w-sm",
             e
           ),
-          ...s,
+          ...o,
           children: [
-            /* @__PURE__ */ i("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[drawer-direction=bottom]/drawer-content:block" }),
+            /* @__PURE__ */ n("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[drawer-direction=bottom]/drawer-content:block" }),
+            l ? /* @__PURE__ */ n(C, { asChild: !0, children: /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                className: "absolute right-4 top-2 z-20 flex size-10 items-center justify-center rounded-full bg-background/90 text-muted-foreground shadow-sm ring-1 ring-border backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "aria-label": i,
+                "data-testid": r,
+                onClick: (c) => c.stopPropagation(),
+                onPointerDown: (c) => c.stopPropagation(),
+                children: /* @__PURE__ */ n(R, { className: "size-5", "aria-hidden": "true" })
+              }
+            ) }) : null,
             t
           ]
         }
@@ -144,13 +165,13 @@ const S = a.forwardRef(
     ] });
   }
 );
-S.displayName = "DrawerContent";
-function M({ className: e, ...t }) {
-  return /* @__PURE__ */ i(
+T.displayName = "DrawerContent";
+function X({ className: e, ...t }) {
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "drawer-header",
-      className: c(
+      className: u(
         "flex flex-col gap-0.5 p-4 group-data-[drawer-direction=bottom]/drawer-content:text-center group-data-[drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
         e
       ),
@@ -158,45 +179,45 @@ function M({ className: e, ...t }) {
     }
   );
 }
-function U({ className: e, ...t }) {
-  return /* @__PURE__ */ i(
+function q({ className: e, ...t }) {
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "drawer-footer",
-      className: c("mt-auto flex flex-col gap-2 p-4", e),
+      className: u("mt-auto flex flex-col gap-2 p-4", e),
       ...t
     }
   );
 }
-const _ = a.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ i(
+const j = a.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ n(
   "h2",
   {
     ref: r,
     "data-slot": "drawer-title",
-    className: c("text-foreground font-semibold", e),
+    className: u("text-foreground font-semibold", e),
     ...t
   }
 ));
-_.displayName = "DrawerTitle";
-const T = a.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ i(
+j.displayName = "DrawerTitle";
+const A = a.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ n(
   "p",
   {
     ref: r,
     "data-slot": "drawer-description",
-    className: c("text-muted-foreground text-sm", e),
+    className: u("text-muted-foreground text-sm", e),
     ...t
   }
 ));
-T.displayName = "DrawerDescription";
+A.displayName = "DrawerDescription";
 export {
-  K as Drawer,
-  R as DrawerClose,
-  S as DrawerContent,
-  T as DrawerDescription,
-  U as DrawerFooter,
-  M as DrawerHeader,
-  D as DrawerOverlay,
-  O as DrawerPortal,
-  _ as DrawerTitle,
-  E as DrawerTrigger
+  U as Drawer,
+  C as DrawerClose,
+  T as DrawerContent,
+  A as DrawerDescription,
+  q as DrawerFooter,
+  X as DrawerHeader,
+  P as DrawerOverlay,
+  _ as DrawerPortal,
+  j as DrawerTitle,
+  z as DrawerTrigger
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loczer/storefront-sdk",
-  "version": "0.172.0",
+  "version": "0.174.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"