@caseparts-org/caseblocks 0.0.113 → 0.0.115

package/dist/atoms/Popover/Popover.d.ts

@@ -1,15 +1,10 @@
+import { PopoverAPI } from './usePopover';
 import * as React from "react";
 type PositionKeyword = "top" | "right" | "bottom" | "left";
 type Position = "top left" | "top center" | "top right" | "right top" | "right center" | "right bottom" | "bottom left" | "bottom center" | "bottom right" | "left top" | "left center" | "left bottom" | PositionKeyword;
-type PopoverAPI = {
-    close: () => void;
-    open: () => void;
-    toggle: () => void;
-};
-export declare function usePopover(): PopoverAPI;
 export type PopoverProps = {
     trigger: React.ReactElement;
-    children: React.ReactNode | ((api: PopoverAPI) => React.ReactNode);
+    children: React.ReactNode | ((_api: PopoverAPI) => React.ReactNode);
     position?: Position;
     popoverClassName?: string;
     contentClassName?: string;

package/dist/atoms/Popover/Popover.js

@@ -1,85 +1,80 @@
 import { jsxs as H, jsx as k } from "react/jsx-runtime";
-import * as s from "react";
+import * as f from "react";
 import { r as N } from "../../index-B4KbmMH3.js";
 import { c as z } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Popover.css';const W = "_popover_vlr81_1", q = "_content_vlr81_7", M = {
-  popover: W,
-  content: q
-}, S = s.createContext(null);
-function K() {
-  const o = s.useContext(S);
-  if (!o)
-    throw new Error("usePopover must be used within a Popover");
-  return o;
-}
-function D(o) {
-  return o ? o.includes(" ") ? o : `${o} center` : "top center";
+import { PopoverContext as W } from "./usePopover.js";
+import '../../assets/Popover.css';const q = "_popover_vlr81_1", C = "_content_vlr81_7", M = {
+  popover: q,
+  content: C
+};
+function D(r) {
+  return r ? r.includes(" ") ? r : `${r} center` : "top center";
 }
-function F(o) {
-  const p = D(o).toLowerCase(), [c, l] = p.split(" ");
-  return { side: ["top", "right", "bottom", "left"].includes(c) ? c : "top", align: l === "left" || l === "top" ? "start" : l === "right" || l === "bottom" ? "end" : "center" };
+function F(r) {
+  const d = D(r).toLowerCase(), [s, c] = d.split(" ");
+  return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: c === "left" || c === "top" ? "start" : c === "right" || c === "bottom" ? "end" : "center" };
 }
-function U(o, p, c, l, d = 8) {
-  const n = o.getBoundingClientRect(), u = p.getBoundingClientRect();
-  let a = 0, f = 0;
-  c === "top" ? a = n.top - u.height - d : c === "bottom" ? a = n.bottom + d : c === "left" ? f = n.left - u.width - d : c === "right" && (f = n.right + d), c === "top" || c === "bottom" ? l === "start" ? f = n.left : l === "end" ? f = n.right - u.width : f = n.left + n.width / 2 - u.width / 2 : l === "start" ? a = n.top : l === "end" ? a = n.bottom - u.height : a = n.top + n.height / 2 - u.height / 2;
+function U(r, d, s, c, p = 8) {
+  const o = r.getBoundingClientRect(), l = d.getBoundingClientRect();
+  let a = 0, u = 0;
+  s === "top" ? a = o.top - l.height - p : s === "bottom" ? a = o.bottom + p : s === "left" ? u = o.left - l.width - p : s === "right" && (u = o.right + p), s === "top" || s === "bottom" ? c === "start" ? u = o.left : c === "end" ? u = o.right - l.width : u = o.left + o.width / 2 - l.width / 2 : c === "start" ? a = o.top : c === "end" ? a = o.bottom - l.height : a = o.top + o.height / 2 - l.height / 2;
   const w = window.innerWidth, h = window.innerHeight;
-  return a = Math.max(4, Math.min(h - u.height - 4, a)), f = Math.max(4, Math.min(w - u.width - 4, f)), { top: a, left: f };
+  return a = Math.max(4, Math.min(h - l.height - 4, a)), u = Math.max(4, Math.min(w - l.width - 4, u)), { top: a, left: u };
 }
 const Q = ({
-  trigger: o,
-  children: p,
-  position: c,
-  popoverClassName: l,
-  contentClassName: d,
-  disabled: n,
-  closeOnOutsideClick: u = !0,
+  trigger: r,
+  children: d,
+  position: s,
+  popoverClassName: c,
+  contentClassName: p,
+  disabled: o,
+  closeOnOutsideClick: l = !0,
   closeOnInsideClickAttr: a = !0,
-  open: f,
+  open: u,
   onOpenChange: w
 }) => {
-  const { side: h, align: y } = F(c), [C, j] = s.useState(!1), P = typeof f == "boolean", r = P ? f : C, [v, R] = s.useState(null), b = s.useRef(null), m = s.useRef(null), x = (t) => {
-    const e = typeof t == "function" ? t(r) : t;
-    P ? w == null || w(e) : j(e);
-  }, L = () => {
-    n || x((t) => !t);
-  }, E = () => x(!1), _ = () => x(!0), B = s.cloneElement(o, {
+  const { side: h, align: y } = F(s), [S, j] = f.useState(!1), R = typeof u == "boolean", n = R ? u : S, [m, P] = f.useState(null), b = f.useRef(null), v = f.useRef(null), L = (t) => {
+    const e = typeof t == "function" ? t(n) : t;
+    R ? w == null || w(e) : j(e);
+  }, x = () => {
+    o || L((t) => !t);
+  }, E = () => L(!1), _ = () => L(!0), B = f.cloneElement(r, {
     ref: (t) => {
-      const { ref: e } = o;
+      const { ref: e } = r;
       typeof e == "function" ? e(t) : e && (e.current = t), b.current = t;
     },
     onClick: (t) => {
       var e, i;
-      (i = (e = o.props).onClick) == null || i.call(e, t), L();
+      (i = (e = r.props).onClick) == null || i.call(e, t), x();
     },
     "aria-haspopup": "dialog",
-    "aria-expanded": r || void 0,
-    "aria-controls": r ? "popover-panel" : void 0,
-    style: { ...o.props.style || {}, outline: "none" }
+    "aria-expanded": n || void 0,
+    "aria-controls": n ? "popover-panel" : void 0,
+    style: { ...r.props.style || {}, outline: "none" }
   });
-  return s.useLayoutEffect(() => {
-    if (!r) {
-      R(null);
+  return f.useLayoutEffect(() => {
+    if (!n) {
+      P(null);
       return;
     }
-    const t = b.current, e = m.current;
+    const t = b.current, e = v.current;
     if (!t || !e) return;
     const i = () => {
-      R(U(t, e, h, y, 8));
+      P(U(t, e, h, y, 8));
     };
     return i(), window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), () => {
       window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0);
     };
-  }, [r, h, y, p]), s.useEffect(() => {
-    if (!r || !u) return;
+  }, [n, h, y, d]), f.useEffect(() => {
+    if (!n || !l) return;
     const t = (e) => {
-      const i = m.current, g = b.current;
+      const i = v.current, g = b.current;
       !i || !g || i.contains(e.target) || g.contains(e.target) || E();
     };
     return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
-  }, [r, u]), s.useEffect(() => {
-    if (!r || !a) return;
-    const t = m.current;
+  }, [n, l]), f.useEffect(() => {
+    if (!n || !a) return;
+    const t = v.current;
     if (!t) return;
     const e = (i) => {
       const g = i.target;
@@ -87,40 +82,40 @@ const Q = ({
       g.closest('[data-popover-close="true"]') && E();
     };
     return t.addEventListener("click", e), () => t.removeEventListener("click", e);
-  }, [r, a]), s.useEffect(() => {
-    if (!r) return;
+  }, [n, a]), f.useEffect(() => {
+    if (!n) return;
     const t = (e) => {
       e.key === "Escape" && E();
     };
     return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [r]), s.useEffect(() => {
-    if (r && m.current) {
-      const t = m.current.querySelector(
+  }, [n]), f.useEffect(() => {
+    if (n && v.current) {
+      const t = v.current.querySelector(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
       );
       t == null || t.focus();
     }
-  }, [r]), /* @__PURE__ */ H(S.Provider, { value: { close: E, open: _, toggle: L }, children: [
+  }, [n]), /* @__PURE__ */ H(W.Provider, { value: { close: E, open: _, toggle: x }, children: [
     B,
-    r && typeof document < "u" && N.createPortal(
+    n && typeof document < "u" && N.createPortal(
       /* @__PURE__ */ k(
         "div",
         {
           id: "popover-panel",
-          ref: m,
+          ref: v,
           role: "dialog",
           "aria-modal": "false",
-          className: z(M.popover, l),
+          className: z(M.popover, c),
           "data-side": h,
           "data-align": y,
           style: {
             position: "absolute",
-            top: (v == null ? void 0 : v.top) ?? 0,
-            left: (v == null ? void 0 : v.left) ?? 0,
-            visibility: v ? "visible" : "hidden",
+            top: (m == null ? void 0 : m.top) ?? 0,
+            left: (m == null ? void 0 : m.left) ?? 0,
+            visibility: m ? "visible" : "hidden",
             zIndex: 20
           },
-          children: /* @__PURE__ */ k("div", { className: z(M.content, d), children: typeof p == "function" ? p({ close: E, open: _, toggle: L }) : p })
+          children: /* @__PURE__ */ k("div", { className: z(M.content, p), children: typeof d == "function" ? d({ close: E, open: _, toggle: x }) : d })
         }
       ),
       document.body
@@ -128,6 +123,5 @@ const Q = ({
   ] });
 };
 export {
-  Q as Popover,
-  K as usePopover
+  Q as Popover
 };

package/dist/atoms/Popover/usePopover.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type PopoverAPI = {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+};
+export declare const PopoverContext: React.Context<PopoverAPI | null>;
+export declare function usePopover(): PopoverAPI;

package/dist/atoms/Popover/usePopover.js

@@ -0,0 +1,12 @@
+import * as e from "react";
+const t = e.createContext(null);
+function r() {
+  const o = e.useContext(t);
+  if (!o)
+    throw new Error("usePopover must be used within a Popover");
+  return o;
+}
+export {
+  t as PopoverContext,
+  r as usePopover
+};

package/dist/main-client.d.ts

@@ -6,6 +6,8 @@ export type { SlideInPanelProps } from './atoms/SlideInPanel/SlideInPanel';
 export { Tooltip } from './atoms/Tooltip/Tooltip';
 export { Popover } from './atoms/Popover/Popover';
 export type { PopoverProps } from './atoms/Popover/Popover';
+export { usePopover } from './atoms/Popover/usePopover';
+export type { PopoverAPI } from './atoms/Popover/usePopover';
 export { Account } from './molecules/Account/Account';
 export type { AccountProps } from './molecules/Account/Account';
 export { Chip } from './molecules/Chip/Chip';
@@ -22,6 +24,8 @@ export { AnimatedCheckMark } from './molecules/StatefulButton/AnimatedCheckmark'
 export type { AddToCartProps } from './molecules/AddToCart/AddToCart';
 export { AddToCart } from './molecules/AddToCart/AddToCart';
 export type { CategoryWithChildren as MainCategory, Category } from './molecules/CategoryNav/CategoryNav';
+export { Modal } from './molecules/Modal/Modal';
+export type { ModalProps } from './molecules/Modal/Modal';
 export { MainNav } from './organisms/MainNav/MainNav';
 export type { MainNavProps } from './organisms/MainNav/MainNav';
 export { ChipSelector } from './organisms/ChipSelector/ChipSelector';

package/dist/main-client.js

@@ -6,13 +6,13 @@ import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as d } from "./atoms/Root/Root.js";
 import { Separator as C } from "./atoms/Separator/Separator.js";
 import { Text as k } from "./atoms/Text/Text.js";
-import { Input as B } from "./atoms/Input/Input.js";
-import { Link as v } from "./atoms/Link/Link.js";
-import { linkClassName as L } from "./atoms/Link/linkClassName.js";
-import { configureLink as h, routerOverride as s } from "./atoms/Link/configureLink.js";
+import { Input as v } from "./atoms/Input/Input.js";
+import { Link as I } from "./atoms/Link/Link.js";
+import { linkClassName as s } from "./atoms/Link/linkClassName.js";
+import { configureLink as L, routerOverride as h } from "./atoms/Link/configureLink.js";
 import { LinkButton as F } from "./atoms/LinkButton/LinkButton.js";
-import { configureImage as b } from "./atoms/Image/configureImage.js";
-import { Logo as H } from "./molecules/Logo/Logo.js";
+import { configureImage as N } from "./atoms/Image/configureImage.js";
+import { Logo as y } from "./molecules/Logo/Logo.js";
 import { SearchBox as w } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as G } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as Q } from "./molecules/Pricing/Pricing.js";
@@ -26,59 +26,63 @@ import { HorizontalScroll as _ } from "./atoms/HorizontalScroll/HorizontalScroll
 import { SlideInPanel as oo } from "./atoms/SlideInPanel/SlideInPanel.js";
 import { Tooltip as eo } from "./atoms/Tooltip/Tooltip.js";
 import { Popover as po } from "./atoms/Popover/Popover.js";
-import { Account as fo } from "./molecules/Account/Account.js";
-import { Chip as ao } from "./molecules/Chip/Chip.js";
-import { ToggleView as io } from "./molecules/ToggleView/ToggleView.js";
-import { CartSlideInPanel as uo } from "./molecules/Cart/CartSlideInPanel.js";
-import { StatefulButton as Co } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as ko } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as Bo } from "./molecules/AddToCart/AddToCart.js";
-import { MainNav as vo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Lo } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as ho } from "./organisms/Product/Product.js";
-import { Carousel as To } from "./organisms/Carousel/Carousel.js";
-import { Footer as No } from "./organisms/Footer/Footer.js";
+import { usePopover as fo } from "./atoms/Popover/usePopover.js";
+import { Account as ao } from "./molecules/Account/Account.js";
+import { Chip as io } from "./molecules/Chip/Chip.js";
+import { ToggleView as uo } from "./molecules/ToggleView/ToggleView.js";
+import { CartSlideInPanel as Co } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as ko } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as vo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as Io } from "./molecules/AddToCart/AddToCart.js";
+import { Modal as so } from "./molecules/Modal/Modal.js";
+import { MainNav as Lo } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as To } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Mo } from "./organisms/Product/Product.js";
+import { Carousel as bo } from "./organisms/Carousel/Carousel.js";
+import { Footer as Ho } from "./organisms/Footer/Footer.js";
 export {
-  fo as Account,
-  Bo as AddToCart,
-  ko as AnimatedCheckMark,
+  ao as Account,
+  Io as AddToCart,
+  vo as AnimatedCheckMark,
   V as Availability,
   q as Avatar,
   E as BannerCard,
   W as Breadcrumbs,
   e as Button,
   K as CardLink,
-  To as Carousel,
-  uo as CartSlideInPanel,
-  ao as Chip,
-  Lo as ChipSelector,
+  bo as Carousel,
+  Co as CartSlideInPanel,
+  io as Chip,
+  To as ChipSelector,
   f as Column,
   p as Flex,
-  No as Footer,
+  Ho as Footer,
   x as Grid,
   n as Head,
   _ as HorizontalScroll,
   l as Icon,
-  B as Input,
-  v as Link,
+  v as Input,
+  I as Link,
   F as LinkButton,
-  H as Logo,
-  vo as MainNav,
+  y as Logo,
+  Lo as MainNav,
+  so as Modal,
   Y as NotFound,
   po as Popover,
   Q as Pricing,
-  ho as Product,
+  Mo as Product,
   G as QuantityInput,
   d as Root,
   w as SearchBox,
   C as Separator,
   oo as SlideInPanel,
-  Co as StatefulButton,
+  ko as StatefulButton,
   k as Text,
-  io as ToggleView,
+  uo as ToggleView,
   eo as Tooltip,
-  b as configureImage,
-  h as configureLink,
-  L as linkClassName,
-  s as routerOverride
+  N as configureImage,
+  L as configureLink,
+  s as linkClassName,
+  h as routerOverride,
+  fo as usePopover
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.113",
+  "version": "0.0.115",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",