@caseparts-org/caseblocks 0.0.57 → 0.0.59

package/dist/organisms/Carousel/Carousel.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CarouselProps } from './Carousel';
+type ExtraArgs = {
+    slidesCount: number;
+    slideHeight: number;
+    colorful?: boolean;
+};
+type AllArgs = CarouselProps & ExtraArgs;
+declare const meta: Meta<AllArgs>;
+export default meta;
+type Story = StoryObj<AllArgs>;
+export declare const Basic: Story;
+export declare const FastAutoplay: Story;
+export declare const ManySlides: Story;
+export declare const TallSlides: Story;
+export declare const InteractionStopsAutoplay: Story;
+export declare const ContinuousAutoplay: Story;

package/dist/organisms/Carousel/Carousel.stories.js

@@ -0,0 +1,171 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Carousel as s } from "./Carousel.js";
+const p = (t, e, a = !0) => Array.from({ length: t }, (l, o) => {
+  const n = o * 60 % 360;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        height: e,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 24,
+        fontWeight: 600,
+        background: a ? `hsl(${n} 70% 55%)` : "var(--color-neutrals-neutral-5,#888)",
+        color: "#fff",
+        borderRadius: 8,
+        margin: 8,
+        boxShadow: "0 2px 6px rgba(0,0,0,.2)"
+      },
+      children: [
+        "Slide ",
+        o + 1
+      ]
+    },
+    o
+  );
+}), y = {
+  title: "Case Parts/Organisms/Carousel",
+  component: s,
+  tags: ["autodocs"],
+  render: (t) => {
+    const { slidesCount: e, slideHeight: a, colorful: l, ...o } = t;
+    return /* @__PURE__ */ r(
+      s,
+      {
+        ...o,
+        slides: p(e, a, l)
+      }
+    );
+  },
+  args: {
+    slidesCount: 5,
+    slideHeight: 160,
+    colorful: !0,
+    loop: !0,
+    autoplay: !0,
+    autoplayDelay: 4e3,
+    autoplayStopOnInteraction: !0
+  },
+  argTypes: {
+    slides: {
+      table: { disable: !0 },
+      description: "Generated internally from slidesCount."
+    },
+    slidesCount: {
+      name: "slidesCount",
+      control: { type: "number", min: 1, max: 20, step: 1 },
+      description: "Number of slides to generate dynamically."
+    },
+    slideHeight: {
+      control: { type: "number", min: 80, max: 600, step: 10 },
+      description: "Height (px) for each slide."
+    },
+    colorful: {
+      control: "boolean",
+      description: "Toggle colorful backgrounds."
+    },
+    loop: {
+      control: "boolean",
+      description: "Enable infinite looping."
+    },
+    autoplay: {
+      control: "boolean",
+      description: "Enable autoplay (uses embla-carousel-autoplay)."
+    },
+    autoplayDelay: {
+      control: { type: "number", min: 500, max: 1e4, step: 100 },
+      if: { arg: "autoplay" },
+      description: "Delay between automatic advances (ms)."
+    },
+    autoplayStopOnInteraction: {
+      control: "boolean",
+      if: { arg: "autoplay" },
+      description: "Whether user interaction stops autoplay."
+    },
+    className: { control: "text" },
+    hideAt: {
+      control: "object",
+      description: "Forwarded to HideAt (shape depends on your implementation)."
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A flexible Embla-based carousel.
+
+Key props:
+- slides: React.ReactNode[]
+- loop: infinite wrap
+- autoplay & autoplayDelay: timing via Autoplay plugin (loop only controls wrap)
+- autoplayStopOnInteraction: stop autoplay after user navigation
+
+Use the Playground story to experiment.`
+      }
+    }
+  }
+}, d = {
+  name: "Basic (No Loop / No Autoplay)",
+  args: {
+    loop: !1,
+    autoplay: !1
+  }
+}, m = {
+  name: "Fast Autoplay",
+  args: {
+    autoplay: !0,
+    autoplayDelay: 1200
+  }
+}, g = {
+  name: "Many Slides",
+  args: {
+    slidesCount: 12,
+    autoplay: !1,
+    loop: !0
+  }
+}, f = {
+  name: "Tall Slides",
+  args: {
+    slideHeight: 300,
+    autoplay: !1
+  }
+}, b = {
+  name: "Interaction Stops Autoplay",
+  args: {
+    autoplay: !0,
+    autoplayDelay: 2500,
+    autoplayStopOnInteraction: !0
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows how autoplay halts after user presses arrows or dots."
+      }
+    }
+  }
+}, h = {
+  name: "Autoplay Ignores Interaction",
+  args: {
+    autoplay: !0,
+    autoplayStopOnInteraction: !1,
+    autoplayDelay: 2500
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "User interaction will not stop autoplay."
+      }
+    }
+  }
+};
+export {
+  d as Basic,
+  h as ContinuousAutoplay,
+  m as FastAutoplay,
+  b as InteractionStopsAutoplay,
+  g as ManySlides,
+  f as TallSlides,
+  y as default
+};

package/dist/organisms/Carousel/CarouselArrowButtons.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const PrevButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const NextButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;

package/dist/organisms/Carousel/CarouselArrowButtons.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "../../atoms/Icon/Icon.js";
+import { N as e, P as i } from "../../CarouselArrowButtons-DMKru3f7.js";
+import "../../clsx-OuTLNxxd.js";
+export {
+  e as NextButton,
+  i as PrevButton
+};

package/dist/organisms/Carousel/CarouselDotButton.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { EmblaCarouselType } from 'embla-carousel';
+export interface UseDotButtonReturn {
+    selectedIndex: number;
+    scrollSnaps: number[];
+    onDotButtonClick: (_index: number) => void;
+}
+export declare const useDotButton: (emblaApi: EmblaCarouselType | undefined) => UseDotButtonReturn;
+export interface DotButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+}
+export declare const DotButton: React.FC<DotButtonProps>;

package/dist/organisms/Carousel/CarouselDotButton.js

@@ -0,0 +1,25 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useState as r, useCallback as e, useEffect as I } from "react";
+const D = (t) => {
+  const [s, u] = r(0), [S, l] = r([]), d = e(
+    (o) => {
+      t == null || t.scrollTo(o);
+    },
+    [t]
+  ), c = e((o) => {
+    l(o.scrollSnapList());
+  }, []), n = e((o) => {
+    u(o.selectedScrollSnap());
+  }, []);
+  return I(() => {
+    t && (c(t), n(t), t.on("reInit", c).on("reInit", n).on("select", n));
+  }, [t, c, n]), {
+    selectedIndex: s,
+    scrollSnaps: S,
+    onDotButtonClick: d
+  };
+}, k = ({ children: t, ...s }) => /* @__PURE__ */ f("button", { type: "button", ...s, children: t });
+export {
+  k as DotButton,
+  D as useDotButton
+};

package/dist/organisms/Carousel/usePrevNextButtons.d.ts

@@ -0,0 +1,8 @@
+import { EmblaCarouselType } from 'embla-carousel';
+export interface UsePrevNextButtonsReturn {
+    prevBtnDisabled: boolean;
+    nextBtnDisabled: boolean;
+    onPrevButtonClick: () => void;
+    onNextButtonClick: () => void;
+}
+export declare const usePrevNextButtons: (emblaApi: EmblaCarouselType | undefined) => UsePrevNextButtonsReturn;

package/dist/organisms/Carousel/usePrevNextButtons.js

@@ -0,0 +1,21 @@
+import { useState as s, useCallback as o, useEffect as N } from "react";
+const d = (t) => {
+  const [e, c] = s(!0), [u, x] = s(!0), B = o(() => {
+    t == null || t.scrollPrev();
+  }, [t]), v = o(() => {
+    t == null || t.scrollNext();
+  }, [t]), n = o((r) => {
+    c(!r.canScrollPrev()), x(!r.canScrollNext());
+  }, []);
+  return N(() => {
+    t && (n(t), t.on("reInit", n).on("select", n));
+  }, [t, n]), {
+    prevBtnDisabled: e,
+    nextBtnDisabled: u,
+    onPrevButtonClick: B,
+    onNextButtonClick: v
+  };
+};
+export {
+  d as usePrevNextButtons
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.57",
+  "version": "0.0.59",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -40,7 +40,9 @@
   },
   "peerDependencies": {
     "react": ">=18.3.1 <20.0.0",
-    "react-dom": ">=18.3.1 <20.0.0"
+    "react-dom": ">=18.3.1 <20.0.0",
+    "embla-carousel-autoplay": "^8.0.0",
+    "embla-carousel-react": "^8.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",
@@ -52,6 +54,8 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^5.0.0",