@caseparts-org/caseblocks 0.0.84 → 0.0.85

package/dist/assets/HorizontalScroll.css

@@ -0,0 +1 @@
+._container_aum2v_1{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_aum2v_14{cursor:grabbing}._scrollVisibility--false_aum2v_19{scrollbar-width:none;-ms-overflow-style:none}._scrollVisibility--false_aum2v_19::-webkit-scrollbar{display:none}

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export interface HorizontalScrollProps extends PropsWithChildren {
+    className?: string;
+    showScrollbar?: boolean;
+}
+export declare function HorizontalScroll({ className, showScrollbar, children }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/HorizontalScroll/HorizontalScroll.js

@@ -0,0 +1,49 @@
+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,
+  "scrollVisibility--false": "_scrollVisibility--false_aum2v_19"
+};
+function S({
+  className: u,
+  showScrollbar: f = !1,
+  children: g
+}) {
+  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);
+  }, _ = (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();
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ref: r,
+      className: x(
+        u,
+        l.container,
+        l[`scrollVisibility--${f}`],
+        o ? l.dragging : ""
+      ),
+      onPointerDown: d,
+      onPointerMove: m,
+      onPointerLeave: s,
+      onPointerUp: s,
+      onWheel: _,
+      children: g
+    }
+  );
+}
+export {
+  S as HorizontalScroll
+};

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

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+interface DemoArgs {
+    showScrollbar: boolean;
+    itemCount: number;
+    itemWidth: number;
+    itemHeight: number;
+    gap: number;
+    rounded: boolean;
+    gradient: boolean;
+}
+type StoryArgs = DemoArgs;
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<StoryArgs>;
+export declare const Playground: Story;
+export declare const WithScrollbar: Story;
+export declare const DenseSmallItems: Story;
+export declare const LargeCards: Story;

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

@@ -0,0 +1,135 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { HorizontalScroll as t } from "./HorizontalScroll.js";
+const b = {
+  title: "Case Parts/Atoms/HorizontalScroll",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+A drag + wheel enabled horizontal scrolling container.
+
+Features:
+- Pointer drag (mouse / touch) horizontal scrolling.
+- Converts vertical mouse wheel motion to horizontal scrolling.
+- Optional native scrollbar visibility via showScrollbar.
+
+Use for carousels, chip lists, card rails, horizontally overflowing panels.
+`.trim()
+      }
+    }
+  },
+  argTypes: {
+    showScrollbar: {
+      control: { type: "boolean" },
+      description: "Show native scrollbar when overflow exists."
+    },
+    itemCount: {
+      control: { type: "range", min: 3, max: 60, step: 1 },
+      description: "Number of demo items rendered."
+    },
+    itemWidth: {
+      control: { type: "number", min: 40, max: 320, step: 10 },
+      description: "Width of each item (px)."
+    },
+    itemHeight: {
+      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."
+    },
+    gradient: {
+      control: { type: "boolean" },
+      description: "Use gradient background instead of solid."
+    }
+  },
+  args: {
+    showScrollbar: !1,
+    itemCount: 20,
+    itemWidth: 120,
+    itemHeight: 80,
+    gap: 12,
+    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",
+      {
+        style: {
+          flex: "0 0 auto",
+          width: s,
+          height: n,
+          marginRight: d,
+          borderRadius: c ? 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, n / 3)),
+          fontWeight: 600,
+          userSelect: "none",
+          boxShadow: "0 2px 6px rgba(0,0,0,0.25)"
+        },
+        children: l
+      },
+      l
+    );
+  });
+}, 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) })
+  ] })
+}, 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) })
+  ] })
+}, S = {
+  args: {
+    itemCount: 40,
+    itemWidth: 90,
+    itemHeight: 60,
+    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) })
+  ] })
+}, w = {
+  args: {
+    itemCount: 12,
+    itemWidth: 260,
+    itemHeight: 160,
+    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) })
+  ] })
+};
+export {
+  S as DenseSmallItems,
+  w as LargeCards,
+  y as Playground,
+  f as WithScrollbar,
+  b as default
+};

package/package.json

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