@evolve.ui/core-components 1.0.1 → 1.2.0

package/src/SaveConfetti/SaveConfetti.tsx

@@ -0,0 +1,277 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+// Physics constants authored at 60 fps; frameScale normalizes to any refresh rate.
+const TARGET_FRAME_MS = 1000 / 60;
+const PARTICLE_COUNT = 16;
+const TRAVEL_MIN = 50;
+const TRAVEL_MAX = 90;
+// Downward gravity bias added on top of radial travel (px)
+const GRAVITY_DROP = 18;
+const DURATION_MIN = 650;
+const DURATION_MAX = 950;
+// ±radians of angle jitter per particle
+const ANGLE_JITTER = 0.2;
+// Roughly 40% of hearts are outlined
+const OUTLINED_HEART_RATIO = 0.4;
+
+// CSS custom property names from the theme system (space-separated RGB, Tailwind format).
+// Resolved at mount time via getComputedStyle so the canvas always uses the active theme values.
+const COLOR_TOKENS = [
+    '--color-critical-500',
+    '--color-critical-300',
+    '--color-critical-200',
+    '--color-tertiary-400',
+    '--color-tertiary-200',
+] as const;
+
+// Per-token fallbacks so particles remain visually distinct if CSS variables fail to resolve.
+const FALLBACK_COLORS = ['#CB3A2C', '#E24B4A', '#F09595', '#D4537E', '#EF9F27'] as const;
+
+const resolveColors = (): readonly string[] => {
+    const computed = getComputedStyle(document.documentElement);
+    return COLOR_TOKENS.map((token, i) => {
+        const raw = computed.getPropertyValue(token).trim();
+        if (!raw) {
+            return FALLBACK_COLORS[i];
+        }
+        // CSS vars use space-separated RGB ("204 47 40"). Normalise to rgb(r, g, b) with
+        // commas so canvas fillStyle recognises it in all browsers (CSS1/2/3 compat;
+        // CSS4 space-separated syntax is silently ignored by some canvas implementations).
+        const parts = raw.split(/\s+/);
+        return parts.length === 3 ? `rgb(${parts.join(', ')})` : FALLBACK_COLORS[i];
+    });
+};
+
+type ParticleShape = 'circle' | 'heart-filled' | 'heart-outlined';
+
+type Particle = {
+    angle: number;
+    color: string;
+    duration: number;
+    opacity: number;
+    /** Normalized elapsed time [0, 1] within the particle's own duration */
+    progress: number;
+    shape: ParticleShape;
+    /** px — circle radius or heart bounding half-size */
+    size: number;
+    startX: number;
+    startY: number;
+    travel: number;
+};
+
+export type SaveConfettiHandle = {
+    /** Trigger a mini confetti burst originating from the center of `anchor`. */
+    fire: (anchor: HTMLElement) => void;
+};
+
+/** Draw a heart path centered at (0, 0) with the given half-size. */
+const drawHeartPath = (ctx: CanvasRenderingContext2D, halfSize: number) => {
+    const s = halfSize;
+    ctx.beginPath();
+    ctx.moveTo(0, s * 0.4);
+    ctx.bezierCurveTo(-s * 0.1, s * 0.1, -s, -s * 0.3, -s, -s * 0.6);
+    ctx.bezierCurveTo(-s, -s * 1.1, 0, -s * 0.9, 0, -s * 0.5);
+    ctx.bezierCurveTo(0, -s * 0.9, s, -s * 1.1, s, -s * 0.6);
+    ctx.bezierCurveTo(s, -s * 0.3, s * 0.1, s * 0.1, 0, s * 0.4);
+    ctx.closePath();
+};
+
+const randomBetween = (min: number, max: number) => Math.random() * (max - min) + min;
+
+const createParticle = (anchorRect: DOMRect, angleIndex: number, colors: readonly string[]): Particle => {
+    const baseAngle = (angleIndex / PARTICLE_COUNT) * Math.PI * 2;
+    const angle = baseAngle + randomBetween(-ANGLE_JITTER, ANGLE_JITTER);
+
+    const heartRoll = Math.random();
+    let shape: ParticleShape;
+    if (heartRoll < OUTLINED_HEART_RATIO) {
+        shape = 'heart-outlined';
+    } else if (heartRoll < 0.7) {
+        shape = 'heart-filled';
+    } else {
+        shape = 'circle';
+    }
+
+    const size = shape === 'circle' ? randomBetween(2.5, 5.5) : randomBetween(11, 16) / 2;
+
+    return {
+        angle,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        duration: randomBetween(DURATION_MIN, DURATION_MAX),
+        opacity: 1,
+        progress: 0,
+        shape,
+        size,
+        startX: anchorRect.left + anchorRect.width / 2,
+        startY: anchorRect.top + anchorRect.height / 2,
+        travel: randomBetween(TRAVEL_MIN, TRAVEL_MAX),
+    };
+};
+
+/**
+ * Canvas-based mini confetti burst for the Save / FavoriteButton animated variant.
+ *
+ * Renders a fixed, pointer-events-none overlay canvas. Trigger a burst by calling
+ * `ref.current.fire(buttonElement)`. The animation runs entirely outside React's
+ * render cycle via requestAnimationFrame (tickRef pattern).
+ *
+ * Architecture mirrors `@evolve.ui/core-components/confetti` — canvas + rAF,
+ * tickRef loop, frameScale normalization, createPortal, DPR scaling.
+ * Physics differ: 16 heart/circle particles radiate outward from button center.
+ *
+ * @example
+ * ```tsx
+ * const confettiRef = useRef<SaveConfettiHandle>(null);
+ * confettiRef.current?.fire(buttonElement);
+ * return <SaveConfetti ref={confettiRef} />;
+ * ```
+ */
+export const SaveConfetti = forwardRef<SaveConfettiHandle>((_, ref) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const canvasContextRef = useRef<CanvasRenderingContext2D | null>(null);
+    const particlesRef = useRef<Particle[]>([]);
+    const animationFrameRef = useRef<number | null>(null);
+    const lastTimestampRef = useRef<number>(0);
+    // Colors resolved once at first canvas setup (guarantees DOM + stylesheets are ready)
+    const colorsRef = useRef<readonly string[]>([]);
+
+    // SSR guard: returns null until client has mounted (canvas APIs unavailable server-side)
+    const [mounted, setMounted] = useState(false);
+
+    // tickRef holds the rAF loop so it can recurse without closure staleness.
+    // Assigning on every render means the loop always sees the latest refs — intentional.
+    const tickRef = useRef<(timestamp: number) => void>(() => {});
+    tickRef.current = (timestamp: number) => {
+        const ctx = canvasContextRef.current;
+        if (!ctx) {
+            return;
+        }
+
+        // Normalize physics to 60fps. Cap at 2× so a tab-switch pause doesn't teleport particles.
+        const frameScale =
+            lastTimestampRef.current === 0 ? 1 : Math.min((timestamp - lastTimestampRef.current) / TARGET_FRAME_MS, 2);
+        lastTimestampRef.current = timestamp;
+
+        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+
+        particlesRef.current = particlesRef.current.filter((p) => p.progress < 1);
+
+        for (const particle of particlesRef.current) {
+            const progressDelta = (frameScale * TARGET_FRAME_MS) / particle.duration;
+            particle.progress = Math.min(particle.progress + progressDelta, 1);
+            const t = particle.progress;
+
+            // Ease-out cubic approximation of cubic-bezier(0.16, 1, 0.3, 1)
+            const eased = 1 - Math.pow(1 - t, 3);
+
+            // Radial position + downward gravity component
+            const x = particle.startX + Math.cos(particle.angle) * particle.travel * eased;
+            const y = particle.startY + Math.sin(particle.angle) * particle.travel * eased + GRAVITY_DROP * eased;
+
+            // Scale curve: 0.2 → 1 (first half) → 0.55 (second half)
+            const scale = t < 0.5 ? 0.2 + (1 - 0.2) * (t / 0.5) : 1 - (1 - 0.55) * ((t - 0.5) / 0.5);
+
+            // Opacity: holds at 1 for first 70%, fades over last 30%
+            const opacity = t < 0.7 ? 1 : 1 - (t - 0.7) / 0.3;
+
+            ctx.save();
+            ctx.translate(x, y);
+            ctx.globalAlpha = Math.max(0, opacity);
+            ctx.fillStyle = particle.color;
+            ctx.strokeStyle = particle.color;
+            ctx.lineWidth = 1.5;
+
+            if (particle.shape === 'circle') {
+                ctx.beginPath();
+                ctx.arc(0, 0, particle.size * scale, 0, Math.PI * 2);
+                ctx.fill();
+            } else {
+                ctx.scale(scale, scale);
+                drawHeartPath(ctx, particle.size);
+                if (particle.shape === 'heart-outlined') {
+                    ctx.stroke();
+                } else {
+                    ctx.fill();
+                }
+            }
+
+            ctx.restore();
+        }
+
+        if (particlesRef.current.length > 0) {
+            animationFrameRef.current = requestAnimationFrame(tickRef.current);
+        } else {
+            animationFrameRef.current = null;
+            lastTimestampRef.current = 0;
+        }
+    };
+
+    useImperativeHandle(ref, () => ({
+        fire(anchor: HTMLElement) {
+            if (!canvasRef.current) {
+                return;
+            }
+            // Resolve colors on first fire (guarantees document styles are fully loaded)
+            if (colorsRef.current.length === 0) {
+                colorsRef.current = resolveColors();
+            }
+            const rect = anchor.getBoundingClientRect();
+            for (let i = 0; i < PARTICLE_COUNT; i++) {
+                particlesRef.current.push(createParticle(rect, i, colorsRef.current));
+            }
+            if (animationFrameRef.current === null) {
+                lastTimestampRef.current = 0;
+                animationFrameRef.current = requestAnimationFrame(tickRef.current);
+            }
+        },
+    }));
+
+    useEffect(() => {
+        setMounted(true);
+
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+
+        const setupCanvas = () => {
+            if (!canvasRef.current) {
+                return;
+            }
+            const dpr = window.devicePixelRatio ?? 1;
+            canvasRef.current.width = window.innerWidth * dpr;
+            canvasRef.current.height = window.innerHeight * dpr;
+            const ctx = canvasRef.current.getContext('2d');
+            ctx?.scale(dpr, dpr);
+            canvasContextRef.current = ctx;
+        };
+
+        setupCanvas();
+
+        window.addEventListener('resize', setupCanvas);
+        return () => {
+            window.removeEventListener('resize', setupCanvas);
+            if (animationFrameRef.current !== null) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [mounted]);
+
+    if (!mounted) {
+        return null;
+    }
+
+    return createPortal(
+        <canvas
+            aria-hidden="true"
+            className="pointer-events-none fixed inset-0 z-[9999] h-screen w-screen"
+            data-hui-id="SaveConfetti"
+            data-testid="save-confetti-canvas"
+            ref={canvasRef}
+        />,
+        document.body
+    );
+});
+
+SaveConfetti.displayName = 'SaveConfetti';

package/src/SaveConfetti/index.ts

@@ -0,0 +1,2 @@
+export { SaveConfetti } from './SaveConfetti';
+export type { SaveConfettiHandle } from './SaveConfetti';

package/src/SearchInput/SearchInput.tsx

@@ -0,0 +1,237 @@
+import { cn } from '@evolve.ui/theme-system';
+import { FormEventHandler, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';
+
+import { IconButton } from '../IconButton/IconButton';
+import { MagnifyingGlass } from '../Icons';
+import { IconWeight } from '../Icons/IconBase';
+import { TextInput } from '../TextInput/TextInput';
+
+type Props = {
+    /**
+     * Changes the aria label for the `<button>` element
+     *
+     * @default 'Search button'
+     */
+    'button-aria-label'?: string;
+    className?: string;
+    /**
+     * Allows you to add a data-testid to the component
+     */
+    ['data-testid']?: string;
+    /**
+     * If true, the search input will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.
+     */
+    emphasis?: 'subtle' | 'bold';
+    /**
+     * Custom content rendered inside the input on the right, before the search button
+     * (e.g. an extra action icon).
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Style variant for the icon. Can be either 'regular' (default), 'bold', 'fill', or 'duotone'.
+     */
+    iconStyle?: IconWeight;
+    /**
+     * Allows you to edit the input id
+     *
+     * @default 'search-input'
+     */
+    id?: string;
+    /**
+     * Set an initial value to pass through
+     *
+     * @default ''
+     */
+    initialValue?: string;
+    /**
+     * Changes the aria label for the `<input>` element
+     *
+     * @default 'Search input'
+     */
+    'input-aria-label'?: string;
+    /**
+     * Ref for the input element
+     */
+    inputRef?: RefObject<HTMLInputElement>;
+    /**
+     * Maximum number of characters allowed in the input.
+     * Uses the native HTML maxLength attribute.
+     */
+    maxLength?: number;
+    /**
+     * Callback that triggers when the input loses focus
+     */
+    onBlur?: () => void;
+    /**
+     * Callback that triggers when you press the clear button
+     */
+    onClear?: () => void;
+    /**
+     * Callback that triggers when the input gains focus
+     */
+    onFocus?: () => void;
+    /**
+     * Callback that triggers when you submit (press enter or button)
+     */
+    onSubmit?: (searchString: string) => void;
+    /**
+     * Callback that triggers when you type
+     */
+    onTextChange?: (searchString: string) => void;
+    /**
+     * Allows you to edit the placeholder text
+     *
+     * @default 'Search'
+     */
+    placeholder?: string;
+    /**
+     * Show in the small size vs the medium one
+     */
+    small?: boolean;
+    /**
+     * Style variant for the input. Can be either 'neutral' (default) or 'inverse' for dark backgrounds.
+     */
+    style?: 'neutral' | 'inverse';
+
+    /**
+     * Controlled value for the input
+     * If provided, initialValue will be ignored
+     */
+    value?: string;
+};
+
+export const SearchInput = ({
+    'button-aria-label': buttonAriaLabel = 'Search',
+    className,
+    'data-testid': testId = 'search-input',
+    disabled = false,
+    emphasis,
+    endAdornment,
+    iconStyle,
+    id = 'search-input',
+    initialValue = '',
+    'input-aria-label': inputAriaLabel = 'Search input',
+    inputRef,
+    maxLength,
+    onBlur,
+    onClear: onClearProp,
+    onFocus,
+    onSubmit: onSubmitProp,
+    onTextChange,
+    placeholder = 'Search',
+    small = false,
+    style,
+    value,
+}: Props) => {
+    const [search, setSearch] = useState(value ?? initialValue);
+
+    // Add effect to sync with controlled value when it changes
+    useEffect(() => {
+        if (value !== undefined) {
+            setSearch(value);
+        }
+    }, [value]);
+
+    const setSearchText = useCallback(
+        (s: string) => {
+            onTextChange?.(s);
+            setSearch(s);
+        },
+        [onTextChange]
+    );
+
+    const onChange = useCallback<FormEventHandler<HTMLInputElement>>(
+        (e) => {
+            setSearchText(e.currentTarget.value);
+        },
+        [setSearchText]
+    );
+
+    const onClear = useCallback(() => {
+        onClearProp?.();
+        setSearchText('');
+    }, [setSearchText, onClearProp]);
+
+    const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
+        (e) => {
+            onSubmitProp?.(search);
+            e.preventDefault();
+        },
+        [onSubmitProp, search]
+    );
+
+    return (
+        <div className={cn('rounded-search-input bg-background-primary', className)}>
+            <form
+                className={cn(
+                    'overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus-visible]:border-border-selected',
+                    {
+                        'border-0': emphasis === 'bold',
+                        'h-[32px]': small, // Smaller due to box-content to prevent clipping
+                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping
+                        'outline outline-1 outline-border-black': emphasis === 'bold' && style === 'neutral',
+                    },
+                    // Hover Styles
+                    {
+                        'hover:border-border-secondary hover:bg-background-hover hover:outline hover:outline-2 hover:outline-border-black':
+                            emphasis === 'bold',
+                        'hover:outline-border-black': style === 'neutral' && emphasis === 'bold',
+                        'hover:outline-focus-inverse': style === 'inverse',
+                    },
+                    // Focus Styles
+                    {
+                        'has-[:focus-visible]:border-border-secondary has-[:focus-visible]:bg-background-primary has-[:focus-visible]:outline has-[:focus-visible]:outline-focus-inverse':
+                            emphasis === 'bold',
+                        'has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-border-black':
+                            style === 'neutral' && emphasis === 'bold',
+                        'has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-focus-inverse':
+                            style === 'inverse',
+                    }
+                )}
+                data-hui-id="SearchInput"
+                data-testid={testId}
+                onSubmit={onSubmit}
+            >
+                <TextInput
+                    aria-label={inputAriaLabel}
+                    autoComplete="off"
+                    className={cn('w-full [&>div]:!border-transparent [&>div]:!bg-transparent')}
+                    clearAriaLabel="Clear search text"
+                    disabled={disabled}
+                    emphasis={emphasis}
+                    id={id}
+                    maxLength={maxLength}
+                    onBlur={onBlur}
+                    onChange={onChange}
+                    onClear={onClear}
+                    onFocus={onFocus}
+                    placeholder={placeholder}
+                    ref={inputRef}
+                    value={search}
+                />
+                {endAdornment}
+                {search !== '' && emphasis === 'bold' && (
+                    <div className={cn('-ml-2xs h-[24px] border-l border-border-secondary', { 'h-[20px]': small })} />
+                )}
+                <IconButton
+                    aria-label={buttonAriaLabel}
+                    className={cn('mr-2xs self-center justify-self-end !rounded-button', {
+                        'mr-[-1px]': small,
+                    })}
+                    disabled={disabled}
+                    hideTooltip
+                    icon={MagnifyingGlass}
+                    iconStyle={iconStyle}
+                    size="sm"
+                    style={search === '' || emphasis === 'bold' ? 'neutral' : 'primary'}
+                    type="submit"
+                    variant={search === '' || emphasis === 'bold' ? 'transparent' : 'filled'}
+                />
+            </form>
+        </div>
+    );
+};

package/src/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,111 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ReactNode } from 'react';
+
+import { IconComponent } from '../Icons/IconBase';
+import { LabelMiniStrong } from '../Typography/Text/Text';
+
+export type SegmentedControlProps<ControlItemOptionId extends string> = {
+    /** The content to be displayed inside the control */
+    children?: ReactNode;
+    /** Additional CSS class name for the control */
+    className?: string;
+    /** Whether the control is disabled */
+    disabled?: boolean;
+    /** Icon component to be displayed on the left side of the control */
+    iconLeft?: IconComponent;
+    /** Icon component to be displayed on the right side of the control */
+    iconRight?: IconComponent;
+    /** Unique identifier for the control */
+    id: ControlItemOptionId;
+    /** Callback function triggered when the control is clicked */
+    onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /** Callback function triggered when a key is pressed while the control is focused */
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /** Whether the control is currently selected */
+    selected?: boolean;
+};
+
+export const SegmentedControl = <ControlItemOptionId extends string>({
+    children,
+    className,
+    disabled = false,
+    iconLeft: IconLeft,
+    iconRight: IconRight,
+    id,
+    onClick,
+    onKeyDown,
+    selected = false,
+    ...props
+}: SegmentedControlProps<ControlItemOptionId>) => {
+    const baseClasses = cn(
+        'rounded-md px-4 py-2',
+        'transition-colors duration-200 ease-in-out',
+        'cursor-pointer select-none',
+        'flex items-center justify-center',
+        'h-[26px]',
+        'hui-focus-visible-outline',
+        {
+            'bg-background-primary text-text-inverse shadow-02 drop-shadow-xl': selected && !disabled,
+            'bg-background-subdued hover:bg-background-hover active:bg-background-pressed': !selected && !disabled,
+            'pointer-events-none bg-background-subdued text-text-disabled': disabled,
+            'px-2': !children,
+        },
+        className
+    );
+
+    return (
+        <div
+            className={baseClasses}
+            data-hui-id="SegmentedControl"
+            data-testid={id}
+            id={id}
+            {...props}
+            role="radio"
+            tabIndex={disabled ? -1 : 0}
+            {...(!disabled && {
+                onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+                    onClick(event);
+                },
+                onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {
+                    onKeyDown(event);
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        onClick(event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);
+                    }
+                },
+            })}
+            aria-checked={selected}
+            aria-disabled={disabled}
+            aria-label={typeof children === 'string' ? children : id}
+        >
+            {IconLeft && (
+                <IconLeft
+                    aria-hidden="true"
+                    className={cn({ 'mr-1': Boolean(children) })}
+                    color={disabled ? 'disabled' : 'primary'}
+                    size="xs"
+                    style="bold"
+                />
+            )}
+            {children && (
+                <LabelMiniStrong
+                    aria-hidden="true"
+                    color={disabled ? 'disabled' : 'primary'}
+                >
+                    {children}
+                </LabelMiniStrong>
+            )}
+            {IconRight && (
+                <IconRight
+                    aria-hidden="true"
+                    className={cn({ 'ml-1': Boolean(children) })}
+                    color={disabled ? 'disabled' : 'primary'}
+                    size="xs"
+                    style="bold"
+                />
+            )}
+        </div>
+    );
+};
+
+SegmentedControl.displayName = 'SegmentedControl';