@caseparts-org/caseblocks 0.0.99 → 0.0.100

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

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

package/dist/atoms/HorizontalScroll/HorizontalScroll.js

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

package/package.json

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