@class-kit/react 0.1.0

package/dist/components/marquee.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+function Marquee({ items, direction = "horizontal", duration = 18000, gap = 32, itemHeight = 28, pauseOnHover = true, reverse = false, stepAnimation, stepAnimationDuration, verticalMode = "continuous", ariaLabel = "Announcements", className = "cc-marquee", contentClassName = "cc-marquee__content", groupClassName = "cc-marquee__group", itemClassName = "cc-marquee__item", onItemClick, renderItem, trackClassName = "cc-marquee__track", style, ...props }) {
+    const state = React.useMemo(() => new core.MarqueeController(items, {
+        direction,
+        duration,
+        gap,
+        itemHeight,
+        pauseOnHover,
+        reverse,
+        stepAnimation,
+        stepAnimationDuration,
+        verticalMode,
+    }).getState(), [
+        direction,
+        duration,
+        gap,
+        itemHeight,
+        items,
+        pauseOnHover,
+        reverse,
+        stepAnimation,
+        stepAnimationDuration,
+        verticalMode,
+    ]);
+    const isStepMarquee = state.direction === "vertical" && state.verticalMode === "step";
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const [previousIndex, setPreviousIndex] = React.useState(null);
+    const cssVars = {
+        "--cc-marquee-duration": `${state.duration}ms`,
+        "--cc-marquee-gap": state.gap,
+        "--cc-marquee-item-height": state.itemHeight,
+        "--cc-marquee-step-animation-duration": `${state.stepAnimationDuration}ms`,
+        "--cc-marquee-step-count": state.items.length,
+    };
+    React.useEffect(() => {
+        setActiveIndex(0);
+        setPreviousIndex(null);
+    }, [state.items.length]);
+    React.useEffect(() => {
+        if (!isStepMarquee || !state.shouldAnimate)
+            return undefined;
+        const stepDelay = Math.max(state.stepAnimationDuration + 80, Math.floor(state.duration / Math.max(1, state.items.length)));
+        const timer = window.setInterval(() => {
+            setActiveIndex((current) => {
+                const next = state.reverse
+                    ? (current - 1 + state.items.length) % state.items.length
+                    : (current + 1) % state.items.length;
+                setPreviousIndex(state.stepAnimation === null ? null : current);
+                return next;
+            });
+        }, stepDelay);
+        return () => window.clearInterval(timer);
+    }, [
+        isStepMarquee,
+        state.duration,
+        state.items.length,
+        state.reverse,
+        state.shouldAnimate,
+        state.stepAnimation,
+        state.stepAnimationDuration,
+    ]);
+    React.useEffect(() => {
+        if (previousIndex === null)
+            return undefined;
+        const timer = window.setTimeout(() => setPreviousIndex(null), state.stepAnimationDuration);
+        return () => window.clearTimeout(timer);
+    }, [previousIndex, state.stepAnimationDuration]);
+    const getItemInteractiveProps = (item, index) => {
+        if (!onItemClick)
+            return { "data-clickable": false };
+        return {
+            "data-clickable": true,
+            onClick: (event) => onItemClick(item, index, event),
+            onKeyDown: (event) => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                event.preventDefault();
+                onItemClick(item, index, event);
+            },
+            role: "button",
+            tabIndex: 0,
+        };
+    };
+    const renderGroup = (groupIndex) => (jsxRuntime.jsx("span", { "aria-hidden": groupIndex > 0, className: groupClassName, children: state.items.map((item, index) => (jsxRuntime.jsx("span", { className: itemClassName, ...getItemInteractiveProps(item, index), children: renderItem ? renderItem(item, index) : item.text }, `${groupIndex}-${item.key}`))) }, groupIndex));
+    const renderStepItem = (index, phase) => {
+        const item = state.items[index];
+        if (!item)
+            return null;
+        return (jsxRuntime.jsx("span", { className: `${itemClassName} cc-marquee__step-item`, "data-phase": phase, ...getItemInteractiveProps(item, index), children: renderItem ? renderItem(item, index) : item.text }, `${phase}-${item.key}-${activeIndex}`));
+    };
+    return (jsxRuntime.jsx("div", { "aria-label": ariaLabel, className: className, "data-animated": state.shouldAnimate, "data-direction": state.direction, "data-pause-on-hover": state.pauseOnHover, "data-reverse": state.reverse, "data-step-animation": state.stepAnimation ?? "none", "data-vertical-mode": state.verticalMode, role: "region", style: { ...cssVars, ...style }, ...props, children: jsxRuntime.jsx("div", { className: contentClassName, children: isStepMarquee ? (jsxRuntime.jsxs("span", { className: `${trackClassName} cc-marquee__step-track`, children: [previousIndex === null
+                        ? null
+                        : renderStepItem(previousIndex, "previous"), renderStepItem(activeIndex % Math.max(1, state.items.length), "current")] })) : (jsxRuntime.jsxs("span", { className: trackClassName, children: [renderGroup(0), state.shouldAnimate ? renderGroup(1) : null] })) }) }));
+}
+
+exports.Marquee = Marquee;
+//# sourceMappingURL=marquee.cjs.map

package/dist/components/marquee.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.cjs","sources":["../../src/index.tsx"],"names":["useMemo","MarqueeController","useEffect","_jsx","_jsxs"],"mappings":"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"}

package/dist/components/marquee.d.ts

@@ -0,0 +1,3 @@
+export { Marquee } from "../index";
+export type { MarqueeProps } from "../index";
+//# sourceMappingURL=marquee.d.ts.map

package/dist/components/marquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../src/components/marquee.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/marquee.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo, useEffect } from 'react';
+import { MarqueeController } from '@class-kit/core';
+
+function Marquee({ items, direction = "horizontal", duration = 18000, gap = 32, itemHeight = 28, pauseOnHover = true, reverse = false, stepAnimation, stepAnimationDuration, verticalMode = "continuous", ariaLabel = "Announcements", className = "cc-marquee", contentClassName = "cc-marquee__content", groupClassName = "cc-marquee__group", itemClassName = "cc-marquee__item", onItemClick, renderItem, trackClassName = "cc-marquee__track", style, ...props }) {
+    const state = useMemo(() => new MarqueeController(items, {
+        direction,
+        duration,
+        gap,
+        itemHeight,
+        pauseOnHover,
+        reverse,
+        stepAnimation,
+        stepAnimationDuration,
+        verticalMode,
+    }).getState(), [
+        direction,
+        duration,
+        gap,
+        itemHeight,
+        items,
+        pauseOnHover,
+        reverse,
+        stepAnimation,
+        stepAnimationDuration,
+        verticalMode,
+    ]);
+    const isStepMarquee = state.direction === "vertical" && state.verticalMode === "step";
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const [previousIndex, setPreviousIndex] = React.useState(null);
+    const cssVars = {
+        "--cc-marquee-duration": `${state.duration}ms`,
+        "--cc-marquee-gap": state.gap,
+        "--cc-marquee-item-height": state.itemHeight,
+        "--cc-marquee-step-animation-duration": `${state.stepAnimationDuration}ms`,
+        "--cc-marquee-step-count": state.items.length,
+    };
+    useEffect(() => {
+        setActiveIndex(0);
+        setPreviousIndex(null);
+    }, [state.items.length]);
+    useEffect(() => {
+        if (!isStepMarquee || !state.shouldAnimate)
+            return undefined;
+        const stepDelay = Math.max(state.stepAnimationDuration + 80, Math.floor(state.duration / Math.max(1, state.items.length)));
+        const timer = window.setInterval(() => {
+            setActiveIndex((current) => {
+                const next = state.reverse
+                    ? (current - 1 + state.items.length) % state.items.length
+                    : (current + 1) % state.items.length;
+                setPreviousIndex(state.stepAnimation === null ? null : current);
+                return next;
+            });
+        }, stepDelay);
+        return () => window.clearInterval(timer);
+    }, [
+        isStepMarquee,
+        state.duration,
+        state.items.length,
+        state.reverse,
+        state.shouldAnimate,
+        state.stepAnimation,
+        state.stepAnimationDuration,
+    ]);
+    useEffect(() => {
+        if (previousIndex === null)
+            return undefined;
+        const timer = window.setTimeout(() => setPreviousIndex(null), state.stepAnimationDuration);
+        return () => window.clearTimeout(timer);
+    }, [previousIndex, state.stepAnimationDuration]);
+    const getItemInteractiveProps = (item, index) => {
+        if (!onItemClick)
+            return { "data-clickable": false };
+        return {
+            "data-clickable": true,
+            onClick: (event) => onItemClick(item, index, event),
+            onKeyDown: (event) => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                event.preventDefault();
+                onItemClick(item, index, event);
+            },
+            role: "button",
+            tabIndex: 0,
+        };
+    };
+    const renderGroup = (groupIndex) => (jsx("span", { "aria-hidden": groupIndex > 0, className: groupClassName, children: state.items.map((item, index) => (jsx("span", { className: itemClassName, ...getItemInteractiveProps(item, index), children: renderItem ? renderItem(item, index) : item.text }, `${groupIndex}-${item.key}`))) }, groupIndex));
+    const renderStepItem = (index, phase) => {
+        const item = state.items[index];
+        if (!item)
+            return null;
+        return (jsx("span", { className: `${itemClassName} cc-marquee__step-item`, "data-phase": phase, ...getItemInteractiveProps(item, index), children: renderItem ? renderItem(item, index) : item.text }, `${phase}-${item.key}-${activeIndex}`));
+    };
+    return (jsx("div", { "aria-label": ariaLabel, className: className, "data-animated": state.shouldAnimate, "data-direction": state.direction, "data-pause-on-hover": state.pauseOnHover, "data-reverse": state.reverse, "data-step-animation": state.stepAnimation ?? "none", "data-vertical-mode": state.verticalMode, role: "region", style: { ...cssVars, ...style }, ...props, children: jsx("div", { className: contentClassName, children: isStepMarquee ? (jsxs("span", { className: `${trackClassName} cc-marquee__step-track`, children: [previousIndex === null
+                        ? null
+                        : renderStepItem(previousIndex, "previous"), renderStepItem(activeIndex % Math.max(1, state.items.length), "current")] })) : (jsxs("span", { className: trackClassName, children: [renderGroup(0), state.shouldAnimate ? renderGroup(1) : null] })) }) }));
+}
+
+export { Marquee };
+//# sourceMappingURL=marquee.js.map

package/dist/components/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","sources":["../../src/index.tsx"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/masonry-virtual-list.cjs

@@ -0,0 +1,123 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+function MasonryVirtualList({ columns, data, estimateSize = 220, gap = 16, headerClassName = "cc-masonry-virtual-list__header", headerContent, height = 520, itemClassName = "cc-masonry-virtual-list__item", itemContent, listClassName = "cc-masonry-virtual-list__inner", minColumnWidth = 220, overscan = 360, className = "cc-masonry-virtual-list", viewportClassName = "cc-masonry-virtual-list__viewport", onRangeChange, style, ...props }) {
+    const viewportRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const observersRef = React.useRef(new Map());
+    const controllerRef = React.useRef(new core.MasonryVirtualListController({
+        columns,
+        containerWidth: 0,
+        count: data.length,
+        estimateSize,
+        gap,
+        minColumnWidth,
+        overscan,
+    }));
+    const [viewportHeight, setViewportHeight] = React.useState(0);
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [headerHeight, setHeaderHeight] = React.useState(0);
+    const [scrollOffset, setScrollOffset] = React.useState(0);
+    const [, forceUpdate] = React.useReducer((value) => value + 1, 0);
+    React.useEffect(() => {
+        controllerRef.current.updateOptions({
+            columns,
+            containerWidth,
+            count: data.length,
+            estimateSize,
+            gap,
+            minColumnWidth,
+            overscan,
+        });
+        forceUpdate();
+    }, [
+        columns,
+        containerWidth,
+        data.length,
+        estimateSize,
+        gap,
+        minColumnWidth,
+        overscan,
+    ]);
+    React.useEffect(() => {
+        const element = viewportRef.current;
+        if (!element)
+            return undefined;
+        const updateSize = () => {
+            setViewportHeight(element.clientHeight);
+            setContainerWidth(element.clientWidth);
+        };
+        updateSize();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateSize);
+            return () => window.removeEventListener("resize", updateSize);
+        }
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    React.useEffect(() => {
+        const element = headerRef.current;
+        if (!element) {
+            setHeaderHeight(0);
+            return undefined;
+        }
+        const updateHeight = () => setHeaderHeight(element.offsetHeight);
+        updateHeight();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateHeight);
+            return () => window.removeEventListener("resize", updateHeight);
+        }
+        const observer = new ResizeObserver(updateHeight);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [headerContent]);
+    React.useEffect(() => () => {
+        observersRef.current.forEach((observer) => observer.disconnect());
+        observersRef.current.clear();
+    }, []);
+    const virtualScrollOffset = Math.max(0, scrollOffset - headerHeight);
+    const range = controllerRef.current.getRange(virtualScrollOffset, viewportHeight);
+    React.useEffect(() => {
+        onRangeChange?.({
+            columns: range.columns,
+            endIndex: range.endIndex,
+            startIndex: range.startIndex,
+        });
+    }, [onRangeChange, range.columns, range.endIndex, range.startIndex]);
+    const observeItem = (index, element) => {
+        observersRef.current.get(index)?.disconnect();
+        observersRef.current.delete(index);
+        if (!element)
+            return;
+        const measure = () => {
+            if (controllerRef.current.measure(index, element.offsetHeight))
+                forceUpdate();
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        observersRef.current.set(index, observer);
+    };
+    const resolvedHeight = typeof height === "number" ? `${height}px` : height;
+    return (jsxRuntime.jsx("div", { className: className, style: {
+            "--cc-masonry-virtual-list-height": resolvedHeight,
+            "--cc-masonry-virtual-list-gap": `${gap}px`,
+            ...style,
+        }, ...props, children: jsxRuntime.jsxs("div", { className: viewportClassName, ref: viewportRef, onScroll: (event) => setScrollOffset(event.currentTarget.scrollTop), children: [headerContent !== undefined && headerContent !== null ? (jsxRuntime.jsx("div", { className: headerClassName, ref: headerRef, children: headerContent })) : null, jsxRuntime.jsx("div", { className: listClassName, style: { height: range.totalSize }, children: range.items.map((item) => (jsxRuntime.jsx("div", { className: itemClassName, ref: (element) => observeItem(item.index, element), style: {
+                            transform: `translate3d(${item.x}px, ${item.y}px, 0)`,
+                            width: item.width,
+                        }, children: itemContent({
+                            data: data[item.index],
+                            index: item.index,
+                            item,
+                        }) }, item.key))) })] }) }));
+}
+
+exports.MasonryVirtualList = MasonryVirtualList;
+//# sourceMappingURL=masonry-virtual-list.cjs.map

package/dist/components/masonry-virtual-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry-virtual-list.cjs","sources":["../../src/index.tsx"],"names":["MasonryVirtualListController","useEffect","_jsx","_jsxs"],"mappings":"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"}

package/dist/components/masonry-virtual-list.d.ts

@@ -0,0 +1,3 @@
+export { MasonryVirtualList } from "../index";
+export type { MasonryVirtualListProps } from "../index";
+//# sourceMappingURL=masonry-virtual-list.d.ts.map

package/dist/components/masonry-virtual-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry-virtual-list.d.ts","sourceRoot":"","sources":["../../src/components/masonry-virtual-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,YAAY,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/masonry-virtual-list.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import { MasonryVirtualListController } from '@class-kit/core';
+
+function MasonryVirtualList({ columns, data, estimateSize = 220, gap = 16, headerClassName = "cc-masonry-virtual-list__header", headerContent, height = 520, itemClassName = "cc-masonry-virtual-list__item", itemContent, listClassName = "cc-masonry-virtual-list__inner", minColumnWidth = 220, overscan = 360, className = "cc-masonry-virtual-list", viewportClassName = "cc-masonry-virtual-list__viewport", onRangeChange, style, ...props }) {
+    const viewportRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const observersRef = React.useRef(new Map());
+    const controllerRef = React.useRef(new MasonryVirtualListController({
+        columns,
+        containerWidth: 0,
+        count: data.length,
+        estimateSize,
+        gap,
+        minColumnWidth,
+        overscan,
+    }));
+    const [viewportHeight, setViewportHeight] = React.useState(0);
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [headerHeight, setHeaderHeight] = React.useState(0);
+    const [scrollOffset, setScrollOffset] = React.useState(0);
+    const [, forceUpdate] = React.useReducer((value) => value + 1, 0);
+    useEffect(() => {
+        controllerRef.current.updateOptions({
+            columns,
+            containerWidth,
+            count: data.length,
+            estimateSize,
+            gap,
+            minColumnWidth,
+            overscan,
+        });
+        forceUpdate();
+    }, [
+        columns,
+        containerWidth,
+        data.length,
+        estimateSize,
+        gap,
+        minColumnWidth,
+        overscan,
+    ]);
+    useEffect(() => {
+        const element = viewportRef.current;
+        if (!element)
+            return undefined;
+        const updateSize = () => {
+            setViewportHeight(element.clientHeight);
+            setContainerWidth(element.clientWidth);
+        };
+        updateSize();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateSize);
+            return () => window.removeEventListener("resize", updateSize);
+        }
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        const element = headerRef.current;
+        if (!element) {
+            setHeaderHeight(0);
+            return undefined;
+        }
+        const updateHeight = () => setHeaderHeight(element.offsetHeight);
+        updateHeight();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateHeight);
+            return () => window.removeEventListener("resize", updateHeight);
+        }
+        const observer = new ResizeObserver(updateHeight);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [headerContent]);
+    useEffect(() => () => {
+        observersRef.current.forEach((observer) => observer.disconnect());
+        observersRef.current.clear();
+    }, []);
+    const virtualScrollOffset = Math.max(0, scrollOffset - headerHeight);
+    const range = controllerRef.current.getRange(virtualScrollOffset, viewportHeight);
+    useEffect(() => {
+        onRangeChange?.({
+            columns: range.columns,
+            endIndex: range.endIndex,
+            startIndex: range.startIndex,
+        });
+    }, [onRangeChange, range.columns, range.endIndex, range.startIndex]);
+    const observeItem = (index, element) => {
+        observersRef.current.get(index)?.disconnect();
+        observersRef.current.delete(index);
+        if (!element)
+            return;
+        const measure = () => {
+            if (controllerRef.current.measure(index, element.offsetHeight))
+                forceUpdate();
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        observersRef.current.set(index, observer);
+    };
+    const resolvedHeight = typeof height === "number" ? `${height}px` : height;
+    return (jsx("div", { className: className, style: {
+            "--cc-masonry-virtual-list-height": resolvedHeight,
+            "--cc-masonry-virtual-list-gap": `${gap}px`,
+            ...style,
+        }, ...props, children: jsxs("div", { className: viewportClassName, ref: viewportRef, onScroll: (event) => setScrollOffset(event.currentTarget.scrollTop), children: [headerContent !== undefined && headerContent !== null ? (jsx("div", { className: headerClassName, ref: headerRef, children: headerContent })) : null, jsx("div", { className: listClassName, style: { height: range.totalSize }, children: range.items.map((item) => (jsx("div", { className: itemClassName, ref: (element) => observeItem(item.index, element), style: {
+                            transform: `translate3d(${item.x}px, ${item.y}px, 0)`,
+                            width: item.width,
+                        }, children: itemContent({
+                            data: data[item.index],
+                            index: item.index,
+                            item,
+                        }) }, item.key))) })] }) }));
+}
+
+export { MasonryVirtualList };
+//# sourceMappingURL=masonry-virtual-list.js.map

package/dist/components/masonry-virtual-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry-virtual-list.js","sources":["../../src/index.tsx"],"names":["_jsx","_jsxs"],"mappings":"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"}