@caseparts-org/caseblocks 0.0.84 → 0.0.86

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/dist/main-client.d.ts

@@ -1,4 +1,6 @@
 export * from './main-server';
+export { HorizontalScroll } from './atoms/HorizontalScroll/HorizontalScroll';
+export type { HorizontalScrollProps } from './atoms/HorizontalScroll/HorizontalScroll';
 export { Tooltip } from './molecules/Tooltip/Tooltip';
 export { Account } from './molecules/Account/Account';
 export type { AccountProps } from './molecules/Account/Account';

package/dist/main-client.js

@@ -7,66 +7,68 @@ import { Root as c } 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 { Link as h } from "./atoms/Link/Link.js";
+import { linkClassName as I } from "./atoms/Link/linkClassName.js";
 import { configureLink as T, routerOverride as s } from "./atoms/Link/configureLink.js";
 import { LinkButton as N } from "./atoms/LinkButton/LinkButton.js";
-import { configureImage as M } from "./atoms/Image/configureImage.js";
-import { Logo as b } from "./molecules/Logo/Logo.js";
-import { SearchBox as G } from "./molecules/SearchBox/SearchBox.js";
-import { QuantityInput as O } from "./molecules/QuantityInput/QuantityInput.js";
-import { Pricing as R } from "./molecules/Pricing/Pricing.js";
-import { Availability as j } from "./molecules/Availability/Availability.js";
-import { Avatar as z } from "./molecules/Avatar/Avatar.js";
+import { configureImage as H } from "./atoms/Image/configureImage.js";
+import { Logo as P } 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";
+import { Availability as V } from "./molecules/Availability/Availability.js";
+import { Avatar as q } from "./molecules/Avatar/Avatar.js";
 import { BannerCard as E } from "./molecules/BannerCard/BannerCard.js";
 import { NotFound as K } from "./organisms/NotFound/NotFound.js";
-import { Tooltip as W } from "./molecules/Tooltip/Tooltip.js";
-import { Account as Y } from "./molecules/Account/Account.js";
-import { Chip as _ } from "./molecules/Chip/Chip.js";
-import { ToggleView as oo } from "./molecules/ToggleView/ToggleView.js";
-import { StatefulButton as to } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as po } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as fo } from "./molecules/AddToCart/AddToCart.js";
-import { MainNav as ao } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as io } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as lo } from "./organisms/Product/Product.js";
-import { Carousel as Co } from "./organisms/Carousel/Carousel.js";
-import { Footer as ko } from "./organisms/Footer/Footer.js";
+import { HorizontalScroll as W } from "./atoms/HorizontalScroll/HorizontalScroll.js";
+import { Tooltip as Y } from "./molecules/Tooltip/Tooltip.js";
+import { Account as _ } from "./molecules/Account/Account.js";
+import { Chip as oo } from "./molecules/Chip/Chip.js";
+import { ToggleView as to } from "./molecules/ToggleView/ToggleView.js";
+import { StatefulButton as po } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as fo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as ao } from "./molecules/AddToCart/AddToCart.js";
+import { MainNav as io } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as lo } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Co } from "./organisms/Product/Product.js";
+import { Carousel as ko } from "./organisms/Carousel/Carousel.js";
+import { Footer as Bo } from "./organisms/Footer/Footer.js";
 export {
-  Y as Account,
-  fo as AddToCart,
-  po as AnimatedCheckMark,
-  j as Availability,
-  z as Avatar,
+  _ as Account,
+  ao as AddToCart,
+  fo as AnimatedCheckMark,
+  V as Availability,
+  q as Avatar,
   E as BannerCard,
   t as Button,
-  Co as Carousel,
-  _ as Chip,
-  io as ChipSelector,
+  ko as Carousel,
+  oo as Chip,
+  lo as ChipSelector,
   f as Column,
   p as Flex,
-  ko as Footer,
+  Bo as Footer,
   x as Grid,
   n as Head,
+  W as HorizontalScroll,
   u as Icon,
   B as Input,
-  v as Link,
+  h as Link,
   N as LinkButton,
-  b as Logo,
-  ao as MainNav,
+  P as Logo,
+  io as MainNav,
   K as NotFound,
-  R as Pricing,
-  lo as Product,
-  O as QuantityInput,
+  Q as Pricing,
+  Co as Product,
+  G as QuantityInput,
   c as Root,
-  G as SearchBox,
+  w as SearchBox,
   C as Separator,
-  to as StatefulButton,
+  po as StatefulButton,
   k as Text,
-  oo as ToggleView,
-  W as Tooltip,
-  M as configureImage,
+  to as ToggleView,
+  Y as Tooltip,
+  H as configureImage,
   T as configureLink,
-  L as linkClassName,
+  I as linkClassName,
   s as routerOverride
 };

package/package.json

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