@caseparts-org/caseblocks 0.0.100 → 0.0.102

package/dist/assets/HorizontalScroll.css

@@ -1 +1 @@
-._root_1bnow_1{width:100%}._header_1bnow_5{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-spacing-2xs);margin-bottom:var(--spacing-spacing-2xs)}._controls_1bnow_13{display:flex;align-items:center;gap:var(--spacing-spacing-2xs)}._controlBtn_1bnow_18{cursor:pointer;padding:var(--spacing-spacing-3xs);border:none;background-color:transparent;line-height:1;display:flex;align-items:center;justify-content:center}._controlBtn_1bnow_18:hover{color:var(--color-brand-primary-primary-teal-blue)}._controlBtn_1bnow_18:disabled:hover{cursor:default;color:var(--color-neutrals-neutral-3)}._container_1bnow_37{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;touch-action:pan-x}._dragging_1bnow_50{cursor:grabbing}._noOverflow_1bnow_53{cursor:default}._scrollVisibility--false_1bnow_58{scrollbar-width:none;-ms-overflow-style:none}._scrollVisibility--false_1bnow_58::-webkit-scrollbar{display:none}._viewport_1bnow_66{position:relative}._indicator_1bnow_69{position:absolute;top:0;bottom:0;width:48px;pointer-events:none;opacity:1;transition:opacity .25s;z-index:1}._left_1bnow_79{left:0;background:linear-gradient(to right,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._right_1bnow_85{right:0;background:linear-gradient(to left,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._hidden_1bnow_91{opacity:0}
+._root_12m2a_1{width:100%}._header_12m2a_5{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-spacing-2xs);margin-bottom:var(--spacing-spacing-2xs)}._controls_12m2a_13{display:flex;align-items:center;gap:var(--spacing-spacing-2xs)}._controlBtn_12m2a_18{cursor:pointer;padding:0;border:none;background-color:transparent;line-height:1;display:flex;align-items:center;justify-content:center}._controlBtn_12m2a_18:hover{color:var(--color-brand-primary-primary-teal-blue)}._controlBtn_12m2a_18:disabled:hover{cursor:default;color:var(--color-neutrals-neutral-3)}._container_12m2a_37{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;touch-action:pan-x}._dragging_12m2a_50{cursor:grabbing}._noOverflow_12m2a_53{cursor:default}._scrollVisibility--false_12m2a_58{scrollbar-width:none;-ms-overflow-style:none}._scrollVisibility--false_12m2a_58::-webkit-scrollbar{display:none}._viewport_12m2a_66{position:relative}._indicator_12m2a_69{position:absolute;top:0;bottom:0;width:48px;pointer-events:none;opacity:1;transition:opacity .25s;z-index:1}._left_12m2a_79{left:0;background:linear-gradient(to right,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._right_12m2a_85{right:0;background:linear-gradient(to left,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._hidden_12m2a_91{opacity:0}

package/dist/atoms/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 export interface HorizontalScrollProps extends PropsWithChildren {
     className?: string;
+    childrenContainerClassName?: string;
     childrenSpacing?: number | string;
     showScrollbar?: boolean;
     caption?: ReactNode;
@@ -11,4 +12,4 @@ export interface HorizontalScrollProps extends PropsWithChildren {
     showIndicators?: boolean;
     hideHeader?: boolean;
 }
-export declare function HorizontalScroll({ className, childrenSpacing, showScrollbar, children, caption, scrollStep, leftButtonContent, rightButtonContent, headerClassName, showIndicators, hideHeader, }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;
+export declare function HorizontalScroll({ className, childrenContainerClassName, childrenSpacing, showScrollbar, children, caption, scrollStep, leftButtonContent, rightButtonContent, headerClassName, showIndicators, hideHeader, }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/HorizontalScroll/HorizontalScroll.js

@@ -1,59 +1,60 @@
-import { jsxs as i, jsx as l, Fragment as Y } from "react/jsx-runtime";
-import { useRef as g, useState as h, useEffect as b } from "react";
+import { jsxs as i, jsx as l, Fragment as j } from "react/jsx-runtime";
+import { useRef as v, useState as h, useEffect as g } from "react";
 import { Icon as N } from "../Icon/Icon.js";
-import { Text as j } from "../Text/Text.js";
-import { c as a } from "../../clsx-OuTLNxxd.js";
-import '../../assets/HorizontalScroll.css';const F = "_root_1bnow_1", K = "_header_1bnow_5", q = "_controls_1bnow_13", G = "_controlBtn_1bnow_18", I = "_container_1bnow_37", U = "_dragging_1bnow_50", $ = "_noOverflow_1bnow_53", J = "_viewport_1bnow_66", Q = "_indicator_1bnow_69", Z = "_left_1bnow_79", tt = "_right_1bnow_85", et = "_hidden_1bnow_91", e = {
-  root: F,
-  header: K,
-  controls: q,
-  controlBtn: G,
-  container: I,
-  dragging: U,
-  noOverflow: $,
-  "scrollVisibility--false": "_scrollVisibility--false_1bnow_58",
-  viewport: J,
-  indicator: Q,
-  left: Z,
-  right: tt,
-  hidden: et
+import { Text as F } from "../Text/Text.js";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import '../../assets/HorizontalScroll.css';const K = "_root_12m2a_1", q = "_header_12m2a_5", G = "_controls_12m2a_13", I = "_controlBtn_12m2a_18", U = "_container_12m2a_37", $ = "_dragging_12m2a_50", J = "_noOverflow_12m2a_53", Q = "_viewport_12m2a_66", Z = "_indicator_12m2a_69", tt = "_left_12m2a_79", et = "_right_12m2a_85", rt = "_hidden_12m2a_91", e = {
+  root: K,
+  header: q,
+  controls: G,
+  controlBtn: I,
+  container: U,
+  dragging: $,
+  noOverflow: J,
+  "scrollVisibility--false": "_scrollVisibility--false_12m2a_58",
+  viewport: Q,
+  indicator: Z,
+  left: tt,
+  right: et,
+  hidden: rt
 };
 function it({
   className: S,
-  childrenSpacing: E,
-  showScrollbar: C = !1,
-  children: D,
-  caption: d,
-  scrollStep: m = 160,
-  leftButtonContent: W,
-  rightButtonContent: z,
-  headerClassName: O,
-  showIndicators: B = !0,
-  hideHeader: M = !1
+  childrenContainerClassName: E,
+  childrenSpacing: C,
+  showScrollbar: D = !1,
+  children: W,
+  caption: f,
+  scrollStep: p = 160,
+  leftButtonContent: z,
+  rightButtonContent: O,
+  headerClassName: B,
+  showIndicators: M = !0,
+  hideHeader: P = !1
   // new default
 }) {
-  const n = g(null), [p, w] = h(!1), s = g({ x: 0, scroll: 0 }), f = g(!1), P = 5, [_, R] = h(!0), [v, X] = h(!1), [u, k] = h(!1), c = () => {
+  const n = v(null), [b, x] = h(!1), s = v({ x: 0, scroll: 0 }), u = v(!1), R = 5, [m, X] = h(!0), [_, k] = h(!1), [c, A] = h(!1), a = () => {
     const t = n.current;
     if (!t) return;
     const r = t.scrollWidth - t.clientWidth;
-    k(t.scrollWidth > t.clientWidth + 1), R(t.scrollLeft <= 0), X(t.scrollLeft >= r - 1);
-  }, A = (t) => {
-    !n.current || !u || (w(!0), s.current.x = t.clientX, s.current.scroll = n.current.scrollLeft, f.current = !1);
+    A(t.scrollWidth > t.clientWidth + 1), X(t.scrollLeft <= 0), k(t.scrollLeft >= r - 1);
   }, H = (t) => {
-    if (!p || !n.current) return;
-    const r = t.clientX - s.current.x;
-    n.current.scrollLeft = s.current.scroll - r, Math.abs(t.clientX - s.current.x) > P && (f.current = !0);
-  }, x = () => {
-    n.current && w(!1);
+    !n.current || !c || (x(!0), s.current.x = t.clientX, s.current.scroll = n.current.scrollLeft, u.current = !1);
   }, T = (t) => {
-    f.current && (t.preventDefault(), t.stopPropagation(), f.current = !1);
-  }, y = (t) => {
+    if (!b || !n.current) return;
+    const r = t.clientX - s.current.x;
+    n.current.scrollLeft = s.current.scroll - r, Math.abs(t.clientX - s.current.x) > R && (u.current = !0);
+  }, y = () => {
+    n.current && x(!1);
+  }, V = (t) => {
+    u.current && (t.preventDefault(), t.stopPropagation(), u.current = !1);
+  }, w = (t) => {
     const r = n.current;
     if (!r) return;
     const o = Math.max(0, Math.min(r.scrollLeft + t, r.scrollWidth - r.clientWidth));
-    r.scrollTo({ left: o, behavior: "smooth" }), requestAnimationFrame(c);
+    r.scrollTo({ left: o, behavior: "smooth" }), requestAnimationFrame(a);
   };
-  b(() => {
+  g(() => {
     const t = n.current;
     if (!t) return;
     const r = (o) => {
@@ -62,31 +63,31 @@ function it({
       L !== 0 ? (o.preventDefault(), t.scrollLeft += L) : o.preventDefault();
     };
     return t.addEventListener("wheel", r, { passive: !1 }), () => t.removeEventListener("wheel", r);
-  }, []), b(() => {
+  }, []), g(() => {
     const t = n.current;
     if (t)
-      return c(), t.addEventListener("scroll", c), () => t.removeEventListener("scroll", c);
-  }, []), b(() => {
+      return a(), t.addEventListener("scroll", a), () => t.removeEventListener("scroll", a);
+  }, []), g(() => {
     const t = n.current;
     if (!t || typeof ResizeObserver > "u") return;
-    const r = new ResizeObserver(() => c());
+    const r = new ResizeObserver(() => a());
     return r.observe(t), () => r.disconnect();
   }, []);
-  const V = () => d == null ? null : typeof d == "string" ? /* @__PURE__ */ l(j, { variant: "display", size: "2xl", className: e.caption, children: d }) : d;
-  return /* @__PURE__ */ i("div", { className: a(e.root, S), children: [
-    !M && /* @__PURE__ */ i("div", { className: a(e.header, O), children: [
-      V(),
-      /* @__PURE__ */ i("div", { className: e.controls, children: [
+  const Y = () => f == null ? null : typeof f == "string" ? /* @__PURE__ */ l(F, { variant: "display", size: "2xl", className: e.caption, children: f }) : f;
+  return /* @__PURE__ */ i("div", { className: d(e.root, S), children: [
+    !P && /* @__PURE__ */ i("div", { className: d(e.header, B), children: [
+      Y(),
+      c && /* @__PURE__ */ i("div", { className: e.controls, children: [
         /* @__PURE__ */ l(
           "button",
           {
             type: "button",
             className: e.controlBtn,
-            onClick: () => y(-m),
+            onClick: () => w(-p),
             "aria-label": "Scroll left",
-            disabled: _,
-            "aria-disabled": _,
-            children: W ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-left", size: "sm" })
+            disabled: m,
+            "aria-disabled": m,
+            children: z ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-left", size: "sm" })
           }
         ),
         /* @__PURE__ */ l(
@@ -94,11 +95,11 @@ function it({
           {
             type: "button",
             className: e.controlBtn,
-            onClick: () => y(m),
+            onClick: () => w(p),
             "aria-label": "Scroll right",
-            disabled: v,
-            "aria-disabled": v,
-            children: z ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-right", size: "sm" })
+            disabled: _,
+            "aria-disabled": _,
+            children: O ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-right", size: "sm" })
           }
         )
       ] })
@@ -108,39 +109,40 @@ function it({
         "div",
         {
           ref: n,
-          style: { gap: E ?? "var(--spacing-spacing-3xs)" },
-          className: a(
+          style: { gap: C ?? "var(--spacing-spacing-3xs)" },
+          className: d(
             e.container,
-            e[`scrollVisibility--${C}`],
-            p ? e.dragging : "",
-            !u && e.noOverflow
+            e[`scrollVisibility--${D}`],
+            b ? e.dragging : "",
+            !c && e.noOverflow,
+            E
           ),
-          onPointerDown: A,
-          onPointerMove: H,
-          onPointerLeave: x,
-          onPointerUp: x,
-          onClickCapture: T,
-          children: D
+          onPointerDown: H,
+          onPointerMove: T,
+          onPointerLeave: y,
+          onPointerUp: y,
+          onClickCapture: V,
+          children: W
         }
       ),
-      B && /* @__PURE__ */ i(Y, { children: [
+      M && /* @__PURE__ */ i(j, { children: [
         /* @__PURE__ */ l(
           "div",
           {
-            className: a(
+            className: d(
               e.indicator,
               e.left,
-              (_ || !u) && e.hidden
+              (m || !c) && e.hidden
             )
           }
         ),
         /* @__PURE__ */ l(
           "div",
           {
-            className: a(
+            className: d(
               e.indicator,
               e.right,
-              (v || !u) && e.hidden
+              (_ || !c) && e.hidden
             )
           }
         )

package/dist/atoms/HorizontalScroll/HorizontalScroll.stories.d.ts

@@ -4,11 +4,11 @@ interface DemoArgs {
     itemCount: number;
     itemWidth: number;
     itemHeight: number;
-    gap: number;
     rounded: boolean;
     gradient: boolean;
     showIndicators: boolean;
     hideHeader: boolean;
+    childrenSpacing: number;
 }
 type StoryArgs = DemoArgs;
 declare const meta: Meta<StoryArgs>;

package/dist/atoms/HorizontalScroll/HorizontalScroll.stories.js

@@ -1,6 +1,6 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { HorizontalScroll as r } from "./HorizontalScroll.js";
-const b = {
+const u = {
   title: "Case Parts/Atoms/HorizontalScroll",
   component: r,
   tags: ["autodocs"],
@@ -38,10 +38,6 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
       control: { type: "number", min: 30, max: 240, step: 5 },
       description: "Height of each item (px)."
     },
-    gap: {
-      control: { type: "number", min: 0, max: 48, step: 2 },
-      description: "Gap between items (px)."
-    },
     rounded: {
       control: { type: "boolean" },
       description: "Apply border radius to items."
@@ -57,6 +53,10 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     hideHeader: {
       control: { type: "boolean" },
       description: "Hide the caption row and arrow controls."
+    },
+    childrenSpacing: {
+      control: { type: "number", min: 0, max: 64, step: 2 },
+      description: "Gap between direct children (flex gap)."
     }
   },
   args: {
@@ -64,25 +64,26 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     itemCount: 20,
     itemWidth: 120,
     itemHeight: 80,
-    gap: 12,
     rounded: !0,
     gradient: !0,
     showIndicators: !0,
     // new default
-    hideHeader: !1
+    hideHeader: !1,
+    // new default
+    childrenSpacing: 12
     // new default
   }
-}, i = /* @__PURE__ */ o("style", { children: `
+}, n = /* @__PURE__ */ o("style", { children: `
       .horizontalDemoScroll {
         touch-action: none; /* ensure pointer events for horizontal drag */
       }
       .horizontalDemoScroll a {
         -webkit-user-drag: none; /* Safari/Chrome: prevent ghost dragging of link */
       }
-    ` }), n = (e) => {
-  const { itemCount: d, itemWidth: s, itemHeight: a, gap: c, rounded: h, gradient: m } = e;
-  return Array.from({ length: d }, (g, p) => {
-    const l = p + 1;
+    ` }), t = (e) => {
+  const { itemCount: d, itemWidth: c, itemHeight: l, rounded: s, gradient: h } = e;
+  return Array.from({ length: d }, (p, m) => {
+    const a = m + 1;
     return /* @__PURE__ */ o(
       "a",
       {
@@ -90,29 +91,28 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         draggable: !1,
         style: {
           flex: "0 0 auto",
-          width: s,
-          height: a,
-          marginRight: c,
-          borderRadius: h ? 8 : 0,
-          background: m ? "linear-gradient(135deg,#4F46E5,#6366F1)" : "#4F46E5",
+          width: c,
+          height: l,
+          borderRadius: s ? 8 : 0,
+          background: h ? "linear-gradient(135deg,#4F46E5,#6366F1)" : "#4F46E5",
           color: "#fff",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: Math.max(12, Math.min(24, a / 3)),
+          fontSize: Math.max(12, Math.min(24, l / 3)),
           fontWeight: 600,
           userSelect: "none",
           boxShadow: "0 2px 6px rgba(0,0,0,0.25)"
         },
-        children: l
+        children: a
       },
-      l
+      a
     );
   });
-}, S = {
+}, w = {
   name: "Playground",
-  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    i,
+  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
+    n,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "HorizontalScroll Playground" }),
     /* @__PURE__ */ o("p", { style: { margin: "0 0 16px", fontSize: 14, color: "#555" }, children: "Drag horizontally or use the mouse wheel. Tweak values in Controls." }),
     /* @__PURE__ */ o(
@@ -122,15 +122,16 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
+        childrenSpacing: e.childrenSpacing,
         caption: `Playground (${e.itemCount} items)`,
-        children: n(e)
+        children: t(e)
       }
     )
   ] })
-}, y = {
+}, b = {
   args: { showScrollbar: !0 },
-  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    i,
+  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
+    n,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Scrollbar Visible" }),
     /* @__PURE__ */ o(
       r,
@@ -139,21 +140,21 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         showScrollbar: !0,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
+        childrenSpacing: e.childrenSpacing,
         caption: "Scrollbar Visible",
-        children: n(e)
+        children: t(e)
       }
     )
   ] })
-}, f = {
+}, y = {
   args: {
     itemCount: 40,
     itemWidth: 90,
     itemHeight: 60,
-    gap: 8,
     showScrollbar: !1
   },
-  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    i,
+  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
+    n,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Dense Small Items" }),
     /* @__PURE__ */ o(
       r,
@@ -162,21 +163,21 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
+        childrenSpacing: e.childrenSpacing,
         caption: `Dense (${e.itemCount} items)`,
-        children: n(e)
+        children: t(e)
       }
     )
   ] })
-}, H = {
+}, f = {
   args: {
     itemCount: 12,
     itemWidth: 260,
     itemHeight: 160,
-    gap: 16,
     gradient: !1
   },
-  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    i,
+  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
+    n,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Large Cards" }),
     /* @__PURE__ */ o(
       r,
@@ -185,22 +186,23 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: e.hideHeader,
+        childrenSpacing: e.childrenSpacing,
         caption: "Large Cards",
-        children: n(e)
+        children: t(e)
       }
     )
   ] })
-}, x = {
+}, H = {
   name: "Without Indicators",
   args: {
     showIndicators: !1,
     itemCount: 16,
     itemWidth: 140,
     itemHeight: 72,
-    gap: 12
+    childrenSpacing: 12
   },
-  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    i,
+  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
+    n,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Indicators Disabled" }),
     /* @__PURE__ */ o(
       r,
@@ -209,23 +211,23 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         showScrollbar: e.showScrollbar,
         showIndicators: !1,
         hideHeader: e.hideHeader,
+        childrenSpacing: e.childrenSpacing,
         caption: "No Edge Indicators",
-        children: n(e)
+        children: t(e)
       }
     )
   ] })
-}, I = {
+}, x = {
   name: "Header Hidden",
   args: {
     hideHeader: !0,
     itemCount: 14,
     itemWidth: 130,
     itemHeight: 70,
-    gap: 10,
     showIndicators: !0
   },
-  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
-    i,
+  render: (e) => /* @__PURE__ */ i("div", { style: { padding: 24 }, children: [
+    n,
     /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Header Hidden" }),
     /* @__PURE__ */ o(
       r,
@@ -234,18 +236,19 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
         showScrollbar: e.showScrollbar,
         showIndicators: e.showIndicators,
         hideHeader: !0,
+        childrenSpacing: e.childrenSpacing,
         caption: "(Will not render since header hidden)",
-        children: n(e)
+        children: t(e)
       }
     )
   ] })
 };
 export {
-  f as DenseSmallItems,
-  I as HeaderHidden,
-  H as LargeCards,
-  S as Playground,
-  y as WithScrollbar,
-  x as WithoutIndicators,
-  b as default
+  y as DenseSmallItems,
+  x as HeaderHidden,
+  f as LargeCards,
+  w as Playground,
+  b as WithScrollbar,
+  H as WithoutIndicators,
+  u as default
 };

package/dist/atoms/Tooltip/Tooltip.d.ts

@@ -11,6 +11,7 @@ export type TooltipProps = {
     closeDelay?: number;
     disabled?: boolean;
     leaveGraceMs?: number;
+    tooltipOffset?: number;
 };
 export declare const Tooltip: React.FC<TooltipProps>;
 export {};

package/dist/atoms/Tooltip/Tooltip.js

@@ -1,78 +1,79 @@
-import { jsxs as N, Fragment as O, jsx as M } from "react/jsx-runtime";
+import { jsxs as W, Fragment as A, jsx as S } from "react/jsx-runtime";
 import * as i from "react";
-import { c as S } from "../../clsx-OuTLNxxd.js";
-import { r as W } from "../../index-B4KbmMH3.js";
-import '../../assets/Tooltip.css';const A = "_tooltip_17o7a_1", D = "_content_17o7a_11", j = {
-  tooltip: A,
-  content: D
+import { c as j } from "../../clsx-OuTLNxxd.js";
+import { r as D } from "../../index-B4KbmMH3.js";
+import '../../assets/Tooltip.css';const I = "_tooltip_17o7a_1", O = "_content_17o7a_11", H = {
+  tooltip: I,
+  content: O
 };
-function I(l) {
-  return l ? l.includes(" ") ? l : `${l} center` : "top center";
+function $(u) {
+  return u ? u.includes(" ") ? u : `${u} center` : "top center";
 }
-function $(l) {
-  const v = I(l).toLowerCase(), [s, t] = v.split(" ");
+function q(u) {
+  const w = $(u).toLowerCase(), [s, t] = w.split(" ");
   return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: t === "left" || t === "top" ? "start" : t === "right" || t === "bottom" ? "end" : "center" };
 }
-function q(l, v, s, t, d = 8) {
-  const n = l.getBoundingClientRect(), u = v.getBoundingClientRect();
-  let f = 0, c = 0;
-  s === "top" ? f = n.top - u.height - d : s === "bottom" ? f = n.bottom + d : s === "left" ? c = n.left - u.width - d : s === "right" && (c = n.right + d), s === "top" || s === "bottom" ? t === "start" ? c = n.left : t === "end" ? c = n.right - u.width : c = n.left + n.width / 2 - u.width / 2 : t === "start" ? f = n.top : t === "end" ? f = n.bottom - u.height : f = n.top + n.height / 2 - u.height / 2;
-  const E = window.innerWidth, R = window.innerHeight;
-  return f = Math.max(4, Math.min(R - u.height - 4, f)), c = Math.max(4, Math.min(E - u.width - 4, c)), { top: f, left: c };
+function G(u, w, s, t, d = 0) {
+  const n = u.getBoundingClientRect(), f = w.getBoundingClientRect();
+  let a = 0, c = 0;
+  s === "top" ? a = n.top - f.height - d : s === "bottom" ? a = n.bottom + d : s === "left" ? c = n.left - f.width - d : s === "right" && (c = n.right + d), s === "top" || s === "bottom" ? t === "start" ? c = n.left : t === "end" ? c = n.right - f.width : c = n.left + n.width / 2 - f.width / 2 : t === "start" ? a = n.top : t === "end" ? a = n.bottom - f.height : a = n.top + n.height / 2 - f.height / 2;
+  const E = window.innerWidth, v = window.innerHeight;
+  return a = Math.max(4, Math.min(v - f.height - 4, a)), c = Math.max(4, Math.min(E - f.width - 4, c)), { top: a, left: c };
 }
-const Q = ({
-  tooltipClassName: l,
-  contentClassName: v,
+const U = ({
+  tooltipClassName: u,
+  contentClassName: w,
   children: s,
   trigger: t,
   position: d,
   disabled: n,
-  openDelay: u = 150,
-  closeDelay: f = 100,
-  leaveGraceMs: c = 0
+  openDelay: f = 150,
+  closeDelay: a = 100,
+  leaveGraceMs: c = 0,
+  tooltipOffset: E = 4
 }) => {
-  const { side: E, align: R } = $(d), [o, y] = i.useState(!1), [m, C] = i.useState(null), T = i.useRef(null), g = i.useRef(null), x = i.useRef(null), L = i.useRef(null), P = i.useRef(null), w = i.useRef(!1), a = (e) => {
+  const { side: v, align: b } = q(d), [o, R] = i.useState(!1), [m, C] = i.useState(null), T = i.useRef(null), g = i.useRef(null), x = i.useRef(null), y = i.useRef(null), L = i.useRef(null), h = i.useRef(!1), p = (e) => {
     e.current && (window.clearTimeout(e.current), e.current = null);
   }, B = () => {
-    a(x), a(L), a(P);
+    p(x), p(y), p(L);
   };
   i.useEffect(() => () => B(), []);
   const k = () => {
-    n || o || (a(x), x.current = window.setTimeout(() => y(!0), u));
+    n || o || (p(x), x.current = window.setTimeout(() => R(!0), f));
   }, _ = () => {
-    o && (a(L), L.current = window.setTimeout(() => {
-      w.current || y(!1);
-    }, f));
+    o && (p(y), y.current = window.setTimeout(() => {
+      h.current || R(!1);
+    }, a));
   }, z = () => {
     if (o) {
-      if (a(P), c <= 0) {
+      if (p(L), c <= 0) {
         _();
         return;
       }
-      P.current = window.setTimeout(() => {
-        w.current || _();
+      L.current = window.setTimeout(() => {
+        h.current || _();
       }, c);
     }
-  }, b = (e, r) => (h) => {
-    e == null || e(h), r == null || r(h);
-  }, H = i.cloneElement(t, {
+  }, P = (e, r) => (l) => {
+    e == null || e(l), r == null || r(l);
+  }, N = i.cloneElement(t, {
     ref: (e) => {
       const { ref: r } = t;
       typeof r == "function" ? r(e) : r && (r.current = e), T.current = e;
     },
-    onPointerEnter: b(t.props.onPointerEnter, k),
-    onPointerLeave: b(t.props.onPointerLeave, z),
-    onFocus: b(t.props.onFocus, k),
-    onBlur: b(t.props.onBlur, _),
+    onPointerEnter: P(t.props.onPointerEnter, k),
+    onPointerLeave: P(t.props.onPointerLeave, z),
+    onFocus: P(t.props.onFocus, k),
+    onBlur: P(t.props.onBlur, _),
     "aria-describedby": o ? "tooltip-popup" : void 0,
     style: { ...t.props.style || {}, outline: "none" }
   });
   return i.useEffect(() => {
-    n && o && (B(), y(!1));
+    n && o && (B(), R(!1));
   }, [n]), i.useEffect(() => {
     if (!o) return;
     const e = (r) => {
-      r.key === "Escape" && y(!1);
+      r.key === "Escape" && R(!1);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
   }, [o]), i.useLayoutEffect(() => {
@@ -82,36 +83,36 @@ const Q = ({
     }
     const e = T.current, r = g.current;
     if (!e || !r) return;
-    const h = 8, p = () => {
-      C(q(e, r, E, R, h));
+    const l = () => {
+      C(G(e, r, v, b, E));
     };
-    return p(), window.addEventListener("resize", p), window.addEventListener("scroll", p, !0), () => {
-      window.removeEventListener("resize", p), window.removeEventListener("scroll", p, !0);
+    return l(), window.addEventListener("resize", l), window.addEventListener("scroll", l, !0), () => {
+      window.removeEventListener("resize", l), window.removeEventListener("scroll", l, !0);
     };
-  }, [o, E, R, s]), i.useEffect(() => {
+  }, [o, v, b, s, E]), i.useEffect(() => {
     if (!o) return;
     const e = (r) => {
-      const h = T.current, p = g.current;
-      if (!h || !p) return;
-      const F = r.target;
-      !h.contains(F) && !p.contains(F) && (w.current = !1, z());
+      const l = T.current, F = g.current;
+      if (!l || !F) return;
+      const M = r.target;
+      !l.contains(M) && !F.contains(M) && (h.current = !1, z());
     };
     return document.addEventListener("pointermove", e), () => document.removeEventListener("pointermove", e);
   }, [o]), i.useEffect(() => {
-    o || (w.current = !1);
-  }, [o]), /* @__PURE__ */ N(O, { children: [
-    H,
-    o && typeof document < "u" && W.createPortal(
-      /* @__PURE__ */ M(
+    o || (h.current = !1);
+  }, [o]), /* @__PURE__ */ W(A, { children: [
+    N,
+    o && typeof document < "u" && D.createPortal(
+      /* @__PURE__ */ S(
         "div",
         {
           id: "tooltip-popup",
           ref: g,
           role: "tooltip",
           "aria-hidden": !o,
-          "data-side": E,
-          "data-align": R,
-          className: S(j.tooltip, l),
+          "data-side": v,
+          "data-align": b,
+          className: j(H.tooltip, u),
           style: {
             position: "absolute",
             top: (m == null ? void 0 : m.top) ?? 0,
@@ -120,12 +121,12 @@ const Q = ({
             zIndex: 10
           },
           onPointerEnter: () => {
-            w.current = !0, a(L), a(P);
+            h.current = !0, p(y), p(L);
           },
           onPointerLeave: () => {
-            w.current = !1, z();
+            h.current = !1, z();
           },
-          children: /* @__PURE__ */ M("div", { className: S(j.content, v), children: s })
+          children: /* @__PURE__ */ S("div", { className: j(H.content, w), children: s })
         }
       ),
       document.body
@@ -133,5 +134,5 @@ const Q = ({
   ] });
 };
 export {
-  Q as Tooltip
+  U as Tooltip
 };

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -19,6 +19,7 @@ function z({
       {
         openDelay: 180,
         closeDelay: 0,
+        tooltipOffset: 0,
         trigger: /* @__PURE__ */ e("li", { className: o.category, tabIndex: 0, children: /* @__PURE__ */ t(s, { href: i.route, children: [
           /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
           i.showChevron && /* @__PURE__ */ e(

package/package.json

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