@paul-portfolio/react 0.4.2 → 0.4.4

package/dist/Badge.d.ts

@@ -2,7 +2,9 @@ import type { ReactNode } from 'react';
 type BadgeProps = {
     variant?: 'success' | 'warning' | 'error' | 'info';
     dot?: boolean;
+    /** Renders the badge as a spiky starburst seal (for "new"/"beta" flags). */
+    starburst?: boolean;
     children?: ReactNode;
 };
-export declare function Badge({ variant, dot, children }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, dot, starburst, children }: BadgeProps): import("react").JSX.Element;
 export {};

package/dist/Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from './cx';
-export function Badge({ variant, dot, children }) {
-    return (_jsx("span", { className: cx('badge', variant && `badge--${variant}`, dot && 'badge--dot'), children: children }));
+export function Badge({ variant, dot, starburst, children }) {
+    return (_jsx("span", { className: cx('badge', variant && `badge--${variant}`, dot && 'badge--dot', starburst && 'badge--starburst'), children: children }));
 }

package/dist/Ticker.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+type TickerProps = {
+    /** Accessible name for the strip. Scroll mode renders a labelled region. */
+    label: string;
+    /**
+     * `scroll` (default) is an accessible, real scroll container with an ambient
+     * auto-scroll — every item stays reachable. `marquee` is a decorative,
+     * aria-hidden CSS loop for pure flavour.
+     */
+    mode?: 'scroll' | 'marquee';
+    /** Which edge the strip sits on; picks the border side. */
+    edge?: 'top' | 'bottom';
+    /** Which way the ambient motion travels. */
+    direction?: 'left' | 'right';
+    /** Ambient auto-scroll speed for scroll mode, in px/sec. */
+    speed?: number;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * A horizontal ticker strip with two modes: an accessible, auto-scrolling
+ * container (`scroll`) and a decorative CSS marquee (`marquee`). Both loop
+ * seamlessly and both honour prefers-reduced-motion. Content is passed as
+ * children, so the strip stays content-agnostic.
+ */
+export declare function Ticker(props: TickerProps): import("react").JSX.Element;
+export {};

package/dist/Ticker.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cx } from './cx';
+/**
+ * Tracks prefers-reduced-motion. Defaults to false so the server and the first
+ * client render agree (SSR-stable), then updates once mounted.
+ */
+function usePrefersReducedMotion() {
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' ||
+            typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        // Microtask defer keeps the effect from setting state synchronously.
+        queueMicrotask(() => setReduced(query.matches));
+        const onChange = (e) => setReduced(e.matches);
+        query.addEventListener('change', onChange);
+        return () => query.removeEventListener('change', onChange);
+    }, []);
+    return reduced;
+}
+/** How long a touch keeps the strip frozen before the ambient scroll resumes. */
+const TOUCH_RESUME_MS = 4000;
+/**
+ * A horizontal ticker strip with two modes: an accessible, auto-scrolling
+ * container (`scroll`) and a decorative CSS marquee (`marquee`). Both loop
+ * seamlessly and both honour prefers-reduced-motion. Content is passed as
+ * children, so the strip stays content-agnostic.
+ */
+export function Ticker(props) {
+    return props.mode === 'marquee' ? (_jsx(MarqueeTicker, { ...props })) : (_jsx(ScrollTicker, { ...props }));
+}
+function edgeClassFor(edge) {
+    return edge === 'top' ? 'ticker--top' : 'ticker--bottom';
+}
+/** Decorative marquee: aria-hidden, CSS-driven, content duplicated for the loop. */
+function MarqueeTicker({ edge = 'top', direction = 'left', className, children, }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-direction": direction, className: cx('ticker', 'ticker--marquee', edgeClassFor(edge), className), children: _jsxs("div", { className: "ticker__track", children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { className: "ticker__group", children: children })] }) }));
+}
+/** Accessible scroll container with an ambient JS auto-scroll loop. */
+function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, className, children, }) {
+    const reduced = usePrefersReducedMotion();
+    const scrollerRef = useRef(null);
+    const cloneRef = useRef(null);
+    const [paused, setPaused] = useState(false);
+    // Mirror `paused` into a ref so the animation-frame loop reads the latest
+    // value without the scroll effect re-subscribing on every toggle.
+    const pausedRef = useRef(false);
+    useEffect(() => {
+        pausedRef.current = paused;
+    }, [paused]);
+    // The clone fills the trailing half of the loop and stays clickable for
+    // pointer users, so drop its focusables out of the tab order by hand. Paired
+    // with aria-hidden, screen readers and axe never see the duplicate.
+    useEffect(() => {
+        const focusables = cloneRef.current?.querySelectorAll('a[href], button, input, select, textarea, [tabindex]');
+        focusables?.forEach((el) => {
+            el.tabIndex = -1;
+        });
+    });
+    // Ambient scroll: advance scrollLeft each frame and wrap by one copy width
+    // for a seamless loop. Pauses on hover/touch; user scrolling is left alone.
+    useEffect(() => {
+        if (reduced)
+            return;
+        const el = scrollerRef.current;
+        if (!el)
+            return;
+        const dir = direction === 'left' ? 1 : -1;
+        // Start the rightward strip one copy in, so it has somewhere to scroll back.
+        if (dir < 0)
+            el.scrollLeft = el.scrollWidth / 2;
+        let raf = 0;
+        let last = performance.now();
+        const step = (now) => {
+            const dt = now - last;
+            last = now;
+            const half = el.scrollWidth / 2;
+            if (!pausedRef.current && half > 0) {
+                let next = el.scrollLeft + (dir * speed * dt) / 1000;
+                if (next >= half)
+                    next -= half;
+                else if (next < 0)
+                    next += half;
+                el.scrollLeft = next;
+            }
+            raf = requestAnimationFrame(step);
+        };
+        raf = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(raf);
+    }, [reduced, direction, speed]);
+    const resumeTimer = useRef(null);
+    const freezeForTouch = () => {
+        setPaused(true);
+        if (resumeTimer.current)
+            clearTimeout(resumeTimer.current);
+        resumeTimer.current = setTimeout(() => setPaused(false), TOUCH_RESUME_MS);
+    };
+    const classes = cx('ticker', edgeClassFor(edge), className);
+    // Reduced motion: a plain, single-copy scrollable row. No clone, no loop.
+    if (reduced) {
+        return (_jsx("section", { "aria-label": label, className: classes, children: _jsx("div", { className: "ticker__group", children: children }) }));
+    }
+    return (_jsx("section", { ref: scrollerRef, "aria-label": label, "data-direction": direction, className: classes, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onTouchStart: freezeForTouch, children: _jsxs("div", { className: "ticker__track", "data-paused": paused || undefined, children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { ref: cloneRef, "aria-hidden": "true", className: "ticker__group", children: children })] }) }));
+}

package/dist/index.d.ts

@@ -15,5 +15,6 @@ export { Badge } from './Badge';
 export { Skeleton } from './Skeleton';
 export { Spinner } from './Spinner';
 export { Divider } from './Divider';
+export { Ticker } from './Ticker';
 export { VisuallyHidden } from './VisuallyHidden';
 export { cx } from './cx';

package/dist/index.js

@@ -15,5 +15,6 @@ export { Badge } from './Badge';
 export { Skeleton } from './Skeleton';
 export { Spinner } from './Spinner';
 export { Divider } from './Divider';
+export { Ticker } from './Ticker';
 export { VisuallyHidden } from './VisuallyHidden';
 export { cx } from './cx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paul-portfolio/react",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "React components for the Paul Design System",
   "license": "MIT",
   "repository": {