@caseparts-org/caseblocks 0.0.96 → 0.0.97

package/dist/atoms/HorizontalScroll/HorizontalScroll.js

@@ -1,49 +1,55 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useRef as a, useState as v } from "react";
-import { c as x } from "../../clsx-OuTLNxxd.js";
-import '../../assets/HorizontalScroll.css';const h = "_container_aum2v_1", b = "_dragging_aum2v_14", l = {
-  container: h,
-  dragging: b,
+import { jsx as x } from "react/jsx-runtime";
+import { useRef as c, useState as D, useEffect as L } from "react";
+import { c as b } from "../../clsx-OuTLNxxd.js";
+import '../../assets/HorizontalScroll.css';const P = "_container_aum2v_1", S = "_dragging_aum2v_14", s = {
+  container: P,
+  dragging: S,
   "scrollVisibility--false": "_scrollVisibility--false_aum2v_19"
 };
-function S({
-  className: u,
-  showScrollbar: f = !1,
-  children: g
+function M({
+  className: d,
+  showScrollbar: g = !1,
+  children: p
 }) {
-  const r = a(null), [o, c] = v(!1), e = a({ x: 0, scroll: 0 }), d = (t) => {
-    r.current && (c(!0), e.current.x = t.clientX, e.current.scroll = r.current.scrollLeft);
-  }, m = (t) => {
-    if (!o || !r.current) return;
-    const n = t.clientX - e.current.x;
-    r.current.scrollLeft = e.current.scroll - n;
-  }, s = () => {
-    r.current && c(!1);
+  const r = c(null), [a, i] = D(!1), n = c({ x: 0, scroll: 0 }), l = c(!1), v = 5, m = (t) => {
+    r.current && (i(!0), n.current.x = t.clientX, n.current.scroll = r.current.scrollLeft, l.current = !1);
+  }, h = (t) => {
+    if (!a || !r.current) return;
+    const o = t.clientX - n.current.x;
+    r.current.scrollLeft = n.current.scroll - o, Math.abs(t.clientX - n.current.x) > v && (l.current = !0);
+  }, u = () => {
+    r.current && i(!1);
   }, _ = (t) => {
-    const n = r.current;
-    if (!n || !(n.scrollWidth > n.clientWidth)) return;
-    const i = Math.abs(t.deltaY) >= Math.abs(t.deltaX) && t.deltaY !== 0 ? t.deltaY : t.deltaX;
-    i !== 0 ? (t.preventDefault(), n.scrollLeft += i) : t.preventDefault();
+    l.current && (t.preventDefault(), t.stopPropagation(), l.current = !1);
   };
-  return /* @__PURE__ */ p(
+  return L(() => {
+    const t = r.current;
+    if (!t) return;
+    const o = (e) => {
+      if (!(t.scrollWidth > t.clientWidth)) return;
+      const f = Math.abs(e.deltaY) >= Math.abs(e.deltaX) && e.deltaY !== 0 ? e.deltaY : e.deltaX;
+      f !== 0 ? (e.preventDefault(), t.scrollLeft += f) : e.preventDefault();
+    };
+    return t.addEventListener("wheel", o, { passive: !1 }), () => t.removeEventListener("wheel", o);
+  }, []), /* @__PURE__ */ x(
     "div",
     {
       ref: r,
-      className: x(
-        u,
-        l.container,
-        l[`scrollVisibility--${f}`],
-        o ? l.dragging : ""
+      className: b(
+        d,
+        s.container,
+        s[`scrollVisibility--${g}`],
+        a ? s.dragging : ""
       ),
-      onPointerDown: d,
-      onPointerMove: m,
-      onPointerLeave: s,
-      onPointerUp: s,
-      onWheel: _,
-      children: g
+      onPointerDown: m,
+      onPointerMove: h,
+      onPointerLeave: u,
+      onPointerUp: u,
+      onClickCapture: _,
+      children: p
     }
   );
 }
 export {
-  S as HorizontalScroll
+  M as HorizontalScroll
 };

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

@@ -1,8 +1,8 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { HorizontalScroll as t } from "./HorizontalScroll.js";
-const b = {
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { HorizontalScroll as r } from "./HorizontalScroll.js";
+const S = {
   title: "Case Parts/Atoms/HorizontalScroll",
-  component: t,
+  component: r,
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen",
@@ -60,48 +60,59 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     rounded: !0,
     gradient: !0
   }
-}, i = (e) => {
-  const { itemCount: a, itemWidth: s, itemHeight: n, gap: d, rounded: c, gradient: h } = e;
-  return Array.from({ length: a }, (p, m) => {
-    const l = m + 1;
-    return /* @__PURE__ */ r(
-      "div",
+}, l = /* @__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: s, itemWidth: c, itemHeight: i, gap: d, rounded: h, gradient: m } = e;
+  return Array.from({ length: s }, (p, g) => {
+    const a = g + 1;
+    return /* @__PURE__ */ o(
+      "a",
       {
+        href: "/",
+        draggable: !1,
         style: {
           flex: "0 0 auto",
-          width: s,
-          height: n,
+          width: c,
+          height: i,
           marginRight: d,
-          borderRadius: c ? 8 : 0,
-          background: h ? "linear-gradient(135deg,#4F46E5,#6366F1)" : "#4F46E5",
+          borderRadius: h ? 8 : 0,
+          background: m ? "linear-gradient(135deg,#4F46E5,#6366F1)" : "#4F46E5",
           color: "#fff",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: Math.max(12, Math.min(24, n / 3)),
+          fontSize: Math.max(12, Math.min(24, i / 3)),
           fontWeight: 600,
           userSelect: "none",
           boxShadow: "0 2px 6px rgba(0,0,0,0.25)"
         },
-        children: l
+        children: a
       },
-      l
+      a
     );
   });
 }, y = {
   name: "Playground",
-  render: (e) => /* @__PURE__ */ o("div", { style: { padding: 24 }, children: [
-    /* @__PURE__ */ r("h3", { style: { margin: "0 0 12px" }, children: "HorizontalScroll Playground" }),
-    /* @__PURE__ */ r("p", { style: { margin: "0 0 16px", fontSize: 14, color: "#555" }, children: "Drag horizontally or use the mouse wheel. Tweak values in Controls." }),
-    /* @__PURE__ */ r(t, { showScrollbar: e.showScrollbar, children: i(e) })
+  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
+    l,
+    /* @__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(r, { className: "horizontalDemoScroll", showScrollbar: e.showScrollbar, children: n(e) })
   ] })
 }, f = {
   args: { showScrollbar: !0 },
-  render: (e) => /* @__PURE__ */ o("div", { style: { padding: 24 }, children: [
-    /* @__PURE__ */ r("h3", { style: { margin: "0 0 12px" }, children: "Scrollbar Visible" }),
-    /* @__PURE__ */ r(t, { showScrollbar: !0, children: i(e) })
+  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
+    l,
+    /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Scrollbar Visible" }),
+    /* @__PURE__ */ o(r, { className: "horizontalDemoScroll", showScrollbar: !0, children: n(e) })
   ] })
-}, S = {
+}, w = {
   args: {
     itemCount: 40,
     itemWidth: 90,
@@ -109,11 +120,12 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     gap: 8,
     showScrollbar: !1
   },
-  render: (e) => /* @__PURE__ */ o("div", { style: { padding: 24 }, children: [
-    /* @__PURE__ */ r("h3", { style: { margin: "0 0 12px" }, children: "Dense Small Items" }),
-    /* @__PURE__ */ r(t, { showScrollbar: e.showScrollbar, children: i(e) })
+  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
+    l,
+    /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Dense Small Items" }),
+    /* @__PURE__ */ o(r, { className: "horizontalDemoScroll", showScrollbar: e.showScrollbar, children: n(e) })
   ] })
-}, w = {
+}, x = {
   args: {
     itemCount: 12,
     itemWidth: 260,
@@ -121,15 +133,16 @@ Use for carousels, chip lists, card rails, horizontally overflowing panels.
     gap: 16,
     gradient: !1
   },
-  render: (e) => /* @__PURE__ */ o("div", { style: { padding: 24 }, children: [
-    /* @__PURE__ */ r("h3", { style: { margin: "0 0 12px" }, children: "Large Cards" }),
-    /* @__PURE__ */ r(t, { showScrollbar: e.showScrollbar, children: i(e) })
+  render: (e) => /* @__PURE__ */ t("div", { style: { padding: 24 }, children: [
+    l,
+    /* @__PURE__ */ o("h3", { style: { margin: "0 0 12px" }, children: "Large Cards" }),
+    /* @__PURE__ */ o(r, { className: "horizontalDemoScroll", showScrollbar: e.showScrollbar, children: n(e) })
   ] })
 };
 export {
-  S as DenseSmallItems,
-  w as LargeCards,
+  w as DenseSmallItems,
+  x as LargeCards,
   y as Playground,
   f as WithScrollbar,
-  b as default
+  S as default
 };

package/package.json

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