@becklyn/components 0.4.2 → 0.4.4

package/components/atoms/IntersectionObserverBox/IntersectionObserverBox.module.scss

@@ -0,0 +1,19 @@
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    border-radius: 8px;
+    background-color: #f0f0f0;
+    border: 2px solid #ccc;
+    font-weight: bold;
+    font-size: 16px;
+    color: #999;
+    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
+}
+
+.visible {
+    background-color: #d4edda;
+    border-color: #6abf69;
+    color: #2e7d32;
+}

package/components/atoms/IntersectionObserverBox/IntersectionObserverBox.stories.module.scss

@@ -0,0 +1,13 @@
+.scrollContainer {
+    padding: 0 16px;
+    height: 300px;
+    overflow-y: auto;
+}
+
+.scrollHint {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    color: #aaa;
+}

package/components/atoms/IntersectionObserverBox/IntersectionObserverBox.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { IntersectionObserverBox } from "./IntersectionObserverBox";
+import styles from "./IntersectionObserverBox.stories.module.scss";
+
+const meta: Meta<typeof IntersectionObserverBox> = {
+    title: "Atoms/IntersectionObserverBox",
+    component: IntersectionObserverBox,
+    parameters: {
+        layout: "padded",
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof IntersectionObserverBox>;
+
+export const Default: Story = {};
+
+export const WithThreshold: Story = {
+    args: {
+        options: { threshold: 0.5 },
+        children: "Visible when 50% in viewport",
+    },
+};
+
+export const Scrollable: Story = {
+    render: args => (
+        <div className={styles.scrollContainer}>
+            <div className={styles.scrollHint}>↓ Scroll down ↓</div>
+            <IntersectionObserverBox {...args} />
+            <div className={styles.scrollHint}>↑ Scroll up ↑</div>
+        </div>
+    ),
+};
+
+export const WithCallback: Story = {
+    render: args => (
+        <IntersectionObserverBox
+            {...args}
+            callback={(_, isVisible) => console.log("Visibility changed:", isVisible)}>
+            Watch the console when visibility changes
+        </IntersectionObserverBox>
+    ),
+};
+
+export const CustomFilter: Story = {
+    args: {
+        filter: entry => entry.intersectionRatio >= 0.75,
+        options: { threshold: [0, 0.25, 0.5, 0.75, 1] },
+        children: "Visible when ≥75% intersecting",
+    },
+};

package/components/atoms/IntersectionObserverBox/IntersectionObserverBox.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { FC, PropsWithChildren, useRef } from "react";
+import clsx from "clsx";
+import { UseIntersectionProps, useIntersection } from "@becklyn/next/lib/intersection";
+import { PropsWithClassName } from "@becklyn/next/types/style";
+import styles from "./IntersectionObserverBox.module.scss";
+
+export type IntersectionObserverBoxProps = Omit<UseIntersectionProps, "ref"> & PropsWithClassName;
+
+export const IntersectionObserverBox: FC<PropsWithChildren<IntersectionObserverBoxProps>> = ({
+    children,
+    className,
+    defaultValue,
+    callback,
+    filter,
+    dependencies,
+    options,
+}) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const isVisible = useIntersection({
+        ref,
+        defaultValue,
+        callback,
+        filter,
+        dependencies,
+        options,
+    });
+
+    return (
+        <div ref={ref} className={clsx(styles.box, isVisible && styles.visible, className)}>
+            {children ?? (isVisible ? "In viewport" : "Out of viewport")}
+        </div>
+    );
+};

package/components/atoms/Slider/Slider.module.scss

@@ -0,0 +1,49 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+}
+
+.slide {
+    display: flex;
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+
+.navButton {
+    background: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 6px 12px;
+    font-size: 16px;
+    line-height: 1;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
+}
+
+.dots {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #ccc;
+    transition: background-color 0.2s;
+}
+
+.dotActive {
+    background-color: #333;
+}

package/components/atoms/Slider/Slider.stories.module.scss

@@ -0,0 +1,16 @@
+.exampleSlide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    width: 100%;
+    height: 200px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 24px;
+}
+
+.storyContainer {
+    margin: 0 auto;
+    max-width: 480px;
+}

package/components/atoms/Slider/Slider.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Slide, Slider } from "./Slider";
+import styles from "./Slider.stories.module.scss";
+
+const SLIDE_COLORS = ["#4f86c6", "#6abf69", "#f0a500", "#e05c5c", "#a97cc7"];
+
+const SampleSlides = ({ count = 3 }: { count?: number }) => (
+    <>
+        {Array.from({ length: count }).map((_, i) => (
+            <Slide key={i}>
+                <div
+                    style={{
+                        background: SLIDE_COLORS[i % SLIDE_COLORS.length],
+                    }}
+                    className={styles.exampleSlide}>
+                    Slide {i + 1}
+                </div>
+            </Slide>
+        ))}
+    </>
+);
+
+const meta: Meta<typeof Slider> = {
+    title: "Atoms/Slider",
+    component: Slider,
+    parameters: {
+        layout: "padded",
+    },
+    decorators: [
+        Story => (
+            <div className={styles.storyContainer}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+    render: args => (
+        <Slider {...args}>
+            <SampleSlides count={3} />
+        </Slider>
+    ),
+};
+
+export const ManySlides: Story = {
+    render: args => (
+        <Slider {...args}>
+            <SampleSlides count={5} />
+        </Slider>
+    ),
+};
+
+export const WithoutNav: Story = {
+    render: args => (
+        <Slider {...args} showNav={false}>
+            <SampleSlides count={3} />
+        </Slider>
+    ),
+};
+
+export const Loop: Story = {
+    render: args => (
+        <Slider {...args} loop>
+            <SampleSlides count={3} />
+        </Slider>
+    ),
+};
+
+export const AutoDisable: Story = {
+    name: "Auto Disable (single slide)",
+    render: args => (
+        <Slider {...args} shouldAutoDisable>
+            <SampleSlides count={1} />
+        </Slider>
+    ),
+};

package/components/atoms/Slider/Slider.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import "keen-slider/keen-slider.min.css";
+import { SliderOptions, useSlider } from "@becklyn/next/lib/slider";
+import { PropsWithClassName } from "@becklyn/next/types/style";
+import styles from "./Slider.module.scss";
+
+export interface SliderProps extends SliderOptions {
+    showNav?: boolean;
+}
+
+export const Slider: FC<PropsWithChildren<PropsWithClassName<SliderProps>>> = ({
+    children,
+    className,
+    showNav = true,
+    ...options
+}) => {
+    const [setRef, { next, prev, isActiveIndex, details, isDisabled }] = useSlider(options);
+
+    const slideCount = details?.slides.length ?? 0;
+
+    return (
+        <div className={clsx(styles.wrapper, isDisabled && styles.disabled, className)}>
+            <div ref={node => setRef(node)} className={clsx("keen-slider", styles.slider)}>
+                {children}
+            </div>
+            {showNav && !isDisabled && slideCount > 1 && (
+                <div className={styles.nav}>
+                    <button onClick={prev} className={styles.navButton} type="button">
+                        ←
+                    </button>
+                    <div className={styles.dots}>
+                        {Array.from({ length: slideCount }).map((_, i) => (
+                            <span
+                                key={i}
+                                className={clsx(styles.dot, isActiveIndex(i) && styles.dotActive)}
+                            />
+                        ))}
+                    </div>
+                    <button onClick={next} className={styles.navButton} type="button">
+                        →
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export const Slide: FC<PropsWithChildren<PropsWithClassName>> = ({ children, className }) => (
+    <div className={clsx("keen-slider__slide", styles.slide, className)}>{children}</div>
+);

package/dist/components/atoms/IntersectionObserverBox/IntersectionObserverBox.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+import { UseIntersectionProps } from "@becklyn/next/lib/intersection";
+import { PropsWithClassName } from "@becklyn/next/types/style";
+export type IntersectionObserverBoxProps = Omit<UseIntersectionProps, "ref"> & PropsWithClassName;
+export declare const IntersectionObserverBox: FC<PropsWithChildren<IntersectionObserverBoxProps>>;
+//# sourceMappingURL=IntersectionObserverBox.d.ts.map

package/dist/components/atoms/IntersectionObserverBox/IntersectionObserverBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntersectionObserverBox.d.ts","sourceRoot":"","sources":["../../../../components/atoms/IntersectionObserverBox/IntersectionObserverBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAmB,MAAM,gCAAgC,CAAC;AACvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,GAAG,kBAAkB,CAAC;AAElG,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,CAwBvF,CAAC"}

package/dist/components/atoms/IntersectionObserverBox/IntersectionObserverBox.js

@@ -0,0 +1,25 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntersectionObserverBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+const intersection_1 = require("@becklyn/next/lib/intersection");
+const IntersectionObserverBox_module_scss_1 = __importDefault(require("./IntersectionObserverBox.module.scss"));
+const IntersectionObserverBox = ({ children, className, defaultValue, callback, filter, dependencies, options, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const isVisible = (0, intersection_1.useIntersection)({
+        ref,
+        defaultValue,
+        callback,
+        filter,
+        dependencies,
+        options,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, clsx_1.default)(IntersectionObserverBox_module_scss_1.default.box, isVisible && IntersectionObserverBox_module_scss_1.default.visible, className), children: children !== null && children !== void 0 ? children : (isVisible ? "In viewport" : "Out of viewport") }));
+};
+exports.IntersectionObserverBox = IntersectionObserverBox;

package/dist/components/atoms/IntersectionObserverBox/IntersectionObserverBox.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { IntersectionObserverBox } from "./IntersectionObserverBox";
+declare const meta: Meta<typeof IntersectionObserverBox>;
+export default meta;
+type Story = StoryObj<typeof IntersectionObserverBox>;
+export declare const Default: Story;
+export declare const WithThreshold: Story;
+export declare const Scrollable: Story;
+export declare const WithCallback: Story;
+export declare const CustomFilter: Story;
+//# sourceMappingURL=IntersectionObserverBox.stories.d.ts.map

package/dist/components/atoms/IntersectionObserverBox/IntersectionObserverBox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntersectionObserverBox.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/IntersectionObserverBox/IntersectionObserverBox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,uBAAuB,CAM9C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}

package/dist/components/atoms/IntersectionObserverBox/IntersectionObserverBox.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFilter = exports.WithCallback = exports.Scrollable = exports.WithThreshold = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const IntersectionObserverBox_1 = require("./IntersectionObserverBox");
+const IntersectionObserverBox_stories_module_scss_1 = __importDefault(require("./IntersectionObserverBox.stories.module.scss"));
+const meta = {
+    title: "Atoms/IntersectionObserverBox",
+    component: IntersectionObserverBox_1.IntersectionObserverBox,
+    parameters: {
+        layout: "padded",
+    },
+};
+exports.default = meta;
+exports.Default = {};
+exports.WithThreshold = {
+    args: {
+        options: { threshold: 0.5 },
+        children: "Visible when 50% in viewport",
+    },
+};
+exports.Scrollable = {
+    render: args => ((0, jsx_runtime_1.jsxs)("div", { className: IntersectionObserverBox_stories_module_scss_1.default.scrollContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: IntersectionObserverBox_stories_module_scss_1.default.scrollHint, children: "\u2193 Scroll down \u2193" }), (0, jsx_runtime_1.jsx)(IntersectionObserverBox_1.IntersectionObserverBox, Object.assign({}, args)), (0, jsx_runtime_1.jsx)("div", { className: IntersectionObserverBox_stories_module_scss_1.default.scrollHint, children: "\u2191 Scroll up \u2191" })] })),
+};
+exports.WithCallback = {
+    render: args => ((0, jsx_runtime_1.jsx)(IntersectionObserverBox_1.IntersectionObserverBox, Object.assign({}, args, { callback: (_, isVisible) => console.log("Visibility changed:", isVisible), children: "Watch the console when visibility changes" }))),
+};
+exports.CustomFilter = {
+    args: {
+        filter: entry => entry.intersectionRatio >= 0.75,
+        options: { threshold: [0, 0.25, 0.5, 0.75, 1] },
+        children: "Visible when ≥75% intersecting",
+    },
+};

package/dist/components/atoms/Slider/Slider.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+import "keen-slider/keen-slider.min.css";
+import { SliderOptions } from "@becklyn/next/lib/slider";
+import { PropsWithClassName } from "@becklyn/next/types/style";
+export interface SliderProps extends SliderOptions {
+    showNav?: boolean;
+}
+export declare const Slider: FC<PropsWithChildren<PropsWithClassName<SliderProps>>>;
+export declare const Slide: FC<PropsWithChildren<PropsWithClassName>>;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/atoms/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAa,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,MAAM,WAAW,WAAY,SAAQ,aAAa;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAmCzE,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAE3D,CAAC"}

package/dist/components/atoms/Slider/Slider.js

@@ -0,0 +1,33 @@
+"use client";
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slide = exports.Slider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+require("keen-slider/keen-slider.min.css");
+const slider_1 = require("@becklyn/next/lib/slider");
+const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
+const Slider = (_a) => {
+    var _b;
+    var { children, className, showNav = true } = _a, options = __rest(_a, ["children", "className", "showNav"]);
+    const [setRef, { next, prev, isActiveIndex, details, isDisabled }] = (0, slider_1.useSlider)(options);
+    const slideCount = (_b = details === null || details === void 0 ? void 0 : details.slides.length) !== null && _b !== void 0 ? _b : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(Slider_module_scss_1.default.wrapper, isDisabled && Slider_module_scss_1.default.disabled, className), children: [(0, jsx_runtime_1.jsx)("div", { ref: node => setRef(node), className: (0, clsx_1.default)("keen-slider", Slider_module_scss_1.default.slider), children: children }), showNav && !isDisabled && slideCount > 1 && ((0, jsx_runtime_1.jsxs)("div", { className: Slider_module_scss_1.default.nav, children: [(0, jsx_runtime_1.jsx)("button", { onClick: prev, className: Slider_module_scss_1.default.navButton, type: "button", children: "\u2190" }), (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.dots, children: Array.from({ length: slideCount }).map((_, i) => ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)(Slider_module_scss_1.default.dot, isActiveIndex(i) && Slider_module_scss_1.default.dotActive) }, i))) }), (0, jsx_runtime_1.jsx)("button", { onClick: next, className: Slider_module_scss_1.default.navButton, type: "button", children: "\u2192" })] }))] }));
+};
+exports.Slider = Slider;
+const Slide = ({ children, className }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("keen-slider__slide", Slider_module_scss_1.default.slide, className), children: children }));
+exports.Slide = Slide;

package/dist/components/atoms/Slider/Slider.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Slider } from "./Slider";
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+export declare const ManySlides: Story;
+export declare const WithoutNav: Story;
+export declare const Loop: Story;
+export declare const AutoDisable: Story;
+//# sourceMappingURL=Slider.stories.d.ts.map

package/dist/components/atoms/Slider/Slider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAS,MAAM,EAAE,MAAM,UAAU,CAAC;AAqBzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAa7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}

package/dist/components/atoms/Slider/Slider.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoDisable = exports.Loop = exports.WithoutNav = exports.ManySlides = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Slider_1 = require("./Slider");
+const Slider_stories_module_scss_1 = __importDefault(require("./Slider.stories.module.scss"));
+const SLIDE_COLORS = ["#4f86c6", "#6abf69", "#f0a500", "#e05c5c", "#a97cc7"];
+const SampleSlides = ({ count = 3 }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: count }).map((_, i) => ((0, jsx_runtime_1.jsx)(Slider_1.Slide, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                background: SLIDE_COLORS[i % SLIDE_COLORS.length],
+            }, className: Slider_stories_module_scss_1.default.exampleSlide, children: ["Slide ", i + 1] }) }, i))) }));
+const meta = {
+    title: "Atoms/Slider",
+    component: Slider_1.Slider,
+    parameters: {
+        layout: "padded",
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { className: Slider_stories_module_scss_1.default.storyContainer, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    render: args => ((0, jsx_runtime_1.jsx)(Slider_1.Slider, Object.assign({}, args, { children: (0, jsx_runtime_1.jsx)(SampleSlides, { count: 3 }) }))),
+};
+exports.ManySlides = {
+    render: args => ((0, jsx_runtime_1.jsx)(Slider_1.Slider, Object.assign({}, args, { children: (0, jsx_runtime_1.jsx)(SampleSlides, { count: 5 }) }))),
+};
+exports.WithoutNav = {
+    render: args => ((0, jsx_runtime_1.jsx)(Slider_1.Slider, Object.assign({}, args, { showNav: false, children: (0, jsx_runtime_1.jsx)(SampleSlides, { count: 3 }) }))),
+};
+exports.Loop = {
+    render: args => ((0, jsx_runtime_1.jsx)(Slider_1.Slider, Object.assign({}, args, { loop: true, children: (0, jsx_runtime_1.jsx)(SampleSlides, { count: 3 }) }))),
+};
+exports.AutoDisable = {
+    name: "Auto Disable (single slide)",
+    render: args => ((0, jsx_runtime_1.jsx)(Slider_1.Slider, Object.assign({}, args, { shouldAutoDisable: true, children: (0, jsx_runtime_1.jsx)(SampleSlides, { count: 1 }) }))),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@becklyn/components",
-    "version": "0.4.2",
+    "version": "0.4.4",
     "license": "MIT",
     "homepage": "https://github.com/Becklyn-Studios/ts-libs/tree/main/packages/components",
     "repository": {
@@ -22,18 +22,18 @@
         "@becklyn/eslint": "*",
         "@becklyn/next": "*",
         "@becklyn/tsconfig": "*",
-        "@storybook/addon-docs": "^10.3.3",
-        "@storybook/nextjs-vite": "10.3.3",
-        "@types/node": "^25.5.0",
+        "@storybook/addon-docs": "^10.3.6",
+        "@storybook/nextjs-vite": "10.3.6",
+        "@types/node": "^25.6.0",
         "@types/react": "^19.2.14",
         "clsx": "^2.1.1",
-        "eslint-plugin-storybook": "^10.3.3",
-        "next": "^16.2.1",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
-        "sass": "^1.98.0",
-        "storybook": "^10.3.3",
-        "vite": "^7.3.1"
+        "eslint-plugin-storybook": "^10.3.6",
+        "next": "^16.2.4",
+        "react": "^19.2.5",
+        "react-dom": "^19.2.5",
+        "sass": "^1.99.0",
+        "storybook": "^10.3.6",
+        "vite": "^7.3.2"
     },
     "peerDependencies": {
         "react": "^18.3.1 || ^19.0.0",