@inkra/react 0.0.0-stage → 0.2.0

package/dist/radar/index.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { scaleLinear } from 'd3-scale';
+import { curveLinearClosed, lineRadial } from 'd3-shape';
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Button } from '../Button.js';
+import { Table } from '../content/index.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { pencilStroke } from '../internal/stroke.js';
+import { drawPencilWash } from '../internal/wash.js';
+import { effectiveDpr } from '../internal/cache.js';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
+function RadarInk({ axisAngles, axes, levels, radius, center, seriesPoints, }) {
+    const canvasRef = useRef(null);
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return undefined;
+        let disposed = false;
+        let lastPaint = '';
+        const paint = () => {
+            const width = canvas.clientWidth;
+            const height = canvas.clientHeight;
+            if (!width || !height) {
+                lastPaint = '';
+                delete canvas.dataset.ready;
+                setReady(false);
+                return;
+            }
+            try {
+                const dpr = effectiveDpr(2);
+                const context = canvas.getContext('2d');
+                if (!context || context.isContextLost?.()) {
+                    setReady(current => current ? false : current);
+                    return;
+                }
+                const style = getComputedStyle(canvas);
+                const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+                const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
+                const washStrength = readRenderToken(style, '--inkra-wash-strength', pencilRenderDefaults.washStrength, 0, 1)
+                    * (0.18 / pencilRenderDefaults.washStrength);
+                const washSpacing = readRenderToken(style, '--inkra-wash-spacing', pencilRenderDefaults.washSpacing, 1, 6);
+                const washRoughness = readRenderToken(style, '--inkra-wash-roughness', pencilRenderDefaults.washRoughness, 0, 6);
+                const washAngle = readRenderToken(style, '--inkra-wash-angle', pencilRenderDefaults.washAngle, -85, 85);
+                const washInset = readRenderToken(style, '--inkra-wash-inset', 2, 0, 24);
+                const resolveColor = (token, fallback) => style.getPropertyValue(token).trim() || fallback;
+                const resolvePaint = (value, fallback) => {
+                    const probe = document.createElement('span');
+                    probe.style.color = value;
+                    probe.style.position = 'absolute';
+                    probe.style.inlineSize = '0';
+                    probe.style.blockSize = '0';
+                    canvas.parentElement?.appendChild(probe);
+                    const resolved = getComputedStyle(probe).color;
+                    probe.remove();
+                    return resolved && resolved !== 'rgba(0, 0, 0, 0)' ? resolved : fallback;
+                };
+                const borderColor = resolveColor('--inkra-border', '#99aa9b');
+                const paperColor = resolveColor('--inkra-paper', '#f4f0e3');
+                const resolvedSeriesColors = seriesPoints.map(entry => resolvePaint(entry.color, borderColor));
+                const key = JSON.stringify([width, height, dpr, borderColor, paperColor, strokeWidth, roughness, washStrength, washSpacing, washRoughness, washAngle, washInset, levels, radius, axisAngles, resolvedSeriesColors, seriesPoints.map(entry => [entry.item.id, entry.points.map(point => point.value)])]);
+                if (key === lastPaint && canvas.dataset.ready === 'true')
+                    return;
+                canvas.width = Math.ceil(width * dpr);
+                canvas.height = Math.ceil(height * dpr);
+                context.setTransform(dpr, 0, 0, dpr, 0, 0);
+                context.clearRect(0, 0, width, height);
+                const scaleX = width / 1000;
+                const scaleY = height / 1000;
+                const line = (points, color, weight, seed, closed = false) => {
+                    if (points.length < 2)
+                        return;
+                    const path = closed ? [...points, points[0]] : points;
+                    pencilStroke(context, path, color, weight, seedToNumber(seed), roughness, 2, closed, { variation: 0.82, breaks: 0.2, grain: 0.72, gain: 2.1, step: 0.7 });
+                };
+                const coordinate = (angle, r) => [(center + Math.sin(angle) * r) * scaleX, (center - Math.cos(angle) * r) * scaleY];
+                const gridColor = borderColor;
+                for (let level = 1; level <= levels; level += 1) {
+                    line(axisAngles.map(angle => coordinate(angle, radius * level / levels)), gridColor, strokeWidth * 0.55, `radar-grid-${level}`, true);
+                }
+                axes.forEach((_, index) => line([coordinate(0, 0), coordinate(axisAngles[index], radius)], gridColor, strokeWidth * 0.5, `radar-axis-${index}`));
+                seriesPoints.forEach(({ item, points, index }, seriesIndex) => {
+                    const resolvedColor = resolvedSeriesColors[seriesIndex];
+                    const valid = points.filter(point => point.value != null).map(point => coordinate(point.angle, point.radius));
+                    if (valid.length < 2)
+                        return;
+                    const minX = Math.min(...valid.map(point => point[0]));
+                    const maxX = Math.max(...valid.map(point => point[0]));
+                    const minY = Math.min(...valid.map(point => point[1]));
+                    const maxY = Math.max(...valid.map(point => point[1]));
+                    context.save();
+                    context.beginPath();
+                    valid.forEach(([x, y], pointIndex) => pointIndex ? context.lineTo(x, y) : context.moveTo(x, y));
+                    context.closePath();
+                    context.clip();
+                    drawPencilWash(context, { x: minX, y: minY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) }, resolvedColor, seedToNumber(`radar-wash-${String(item.id)}`), { strength: washStrength, spacing: washSpacing, roughness: washRoughness, inset: washInset, radius: 8, edgeReach: 4, angle: washAngle, dpr });
+                    context.restore();
+                    line(valid, resolvedColor, strokeWidth * (0.68 + (index === 0 ? 0.12 : 0)), `radar-series-${String(item.id)}`, true);
+                    points.forEach((point, pointIndex) => {
+                        if (point.value == null)
+                            return;
+                        const [x, y] = coordinate(point.angle, point.radius);
+                        const marker = index % 3 === 1
+                            ? [[x - 5, y - 5], [x + 5, y - 5], [x + 5, y + 5], [x - 5, y + 5], [x - 5, y - 5]]
+                            : index % 3 === 2
+                                ? [[x, y - 6], [x + 6, y + 5], [x - 6, y + 5], [x, y - 6]]
+                                : Array.from({ length: 25 }, (_, markerIndex) => { const angle = markerIndex / 24 * Math.PI * 2; return [x + Math.cos(angle) * 5, y + Math.sin(angle) * 5]; });
+                        pencilStroke(context, marker, resolvedColor, strokeWidth * 0.9, seedToNumber(`radar-marker-${String(item.id)}-${pointIndex}`), roughness, 2, true, { variation: 0.78, breaks: 0.24, grain: 0.7, gain: 2.1, step: 0.55 });
+                        void pointIndex;
+                    });
+                });
+                lastPaint = key;
+                canvas.dataset.ready = 'true';
+                if (!disposed)
+                    setReady(current => current ? current : true);
+            }
+            catch {
+                lastPaint = '';
+                delete canvas.dataset.ready;
+                setReady(false);
+                canvas.width = 1;
+                canvas.height = 1;
+                canvas.getContext('2d')?.clearRect(0, 0, 1, 1);
+            }
+        };
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(paint);
+        const inheritedStyle = new MutationObserver(paint);
+        for (let node = canvas; node; node = node.parentElement)
+            inheritedStyle.observe(node, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
+        const scheme = window.matchMedia('(prefers-color-scheme: dark)');
+        scheme.addEventListener('change', paint);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaint = ''; delete canvas.dataset.ready; paint(); });
+        observer?.observe(canvas);
+        paint();
+        return () => { disposed = true; observer?.disconnect(); inheritedStyle.disconnect(); scheme.removeEventListener('change', paint); stopRecovery(); };
+    }, [axes, axisAngles, center, levels, radius, seriesPoints]);
+    return _jsx("canvas", { "aria-hidden": "true", className: "inkra-radar__ink", "data-ready": ready || undefined, ref: canvasRef });
+}
+const palette = ['#4b96aa', '#994f3f', '#629568', '#8d6b9c', '#c58b47'];
+function keyPart(value) { return JSON.stringify([typeof value, value]); }
+function sameKey(a, b) { return a != null && b != null && a === b; }
+function axisText(axis) { return axis.ariaLabel ?? (typeof axis.label === 'string' || typeof axis.label === 'number' ? String(axis.label) : String(axis.id)); }
+function cssSize(value, fallback) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? `${Math.max(220, value)}px` : fallback;
+    return value || fallback;
+}
+function finite(value) { return typeof value === 'number' && Number.isFinite(value); }
+function formatNumber(value, axis, getValueLabel) {
+    return axis.formatValue?.(value) ?? getValueLabel?.(value, axis) ?? String(value);
+}
+function textNode(value, seed) {
+    return typeof value === 'string' || typeof value === 'number' ? _jsx(PencilText, { seed: seed, children: String(value) }) : value;
+}
+function domainForAxis(axis, values) {
+    let min = finite(axis.min) ? axis.min : values.length ? Math.min(...values) : 0;
+    let max = finite(axis.max) ? axis.max : values.length ? Math.max(...values) : 1;
+    if (min > max)
+        [min, max] = [max, min];
+    if (min === max) {
+        const pad = Math.abs(min) * 0.5 || 1;
+        return [min - pad, max + pad];
+    }
+    return [min, max];
+}
+function paintStyle(color) {
+    return { '--inkra-accent': color, '--inkra-accent-soft': color, '--inkra-accent-strong': color };
+}
+export const Radar = forwardRef(function Radar({ axes, series, label, description, size = 'min(100%, 34rem)', maxRadius, levels = 4, showAxes = true, showLabels = true, showLegend = true, showValues = true, showTable = true, legendLabel = 'Series', missingLabel = 'Missing', emptyMessage = 'No radar data', selectedSeries, defaultSelectedSeries = null, onSelectedSeriesChange, renderAxisLabel, renderValueLabel, getValueLabel, className, style, ...props }, forwardedRef) {
+    const id = useId();
+    const labelId = `inkra-radar-${id}-label`;
+    const descriptionId = description == null ? undefined : `inkra-radar-${id}-description`;
+    const [internalSelected, setInternalSelected] = useState(defaultSelectedSeries);
+    const selected = selectedSeries === undefined ? internalSelected : selectedSeries ?? null;
+    const visibleSeries = series.filter(item => !item.hidden);
+    const domains = useMemo(() => new Map(axes.map(axis => {
+        const values = visibleSeries.flatMap(item => item.data.filter(point => point.axisId === axis.id && finite(point.value)).map(point => point.value));
+        return [keyPart(axis.id), domainForAxis(axis, values)];
+    })), [axes, visibleSeries]);
+    const side = 1000;
+    const radius = Math.max(120, Math.min(maxRadius ?? 390, 470));
+    const axisCount = axes.length;
+    const angles = axes.map((_, index) => (index * Math.PI * 2) / Math.max(1, axisCount));
+    const center = side / 2;
+    const valuePoints = (item) => axes.map((axis, index) => {
+        const point = item.data.find(candidate => candidate.axisId === axis.id) ?? { axisId: axis.id, value: null };
+        const domain = domains.get(keyPart(axis.id)) ?? [0, 1];
+        const value = finite(point.value) ? point.value : null;
+        const scale = scaleLinear().domain(domain).range([0, radius]).clamp(true);
+        return { angle: angles[index], radius: value == null ? 0 : scale(value), value, point, axis };
+    });
+    const line = useMemo(() => lineRadial().angle(point => point.angle).radius(point => point.radius).curve(curveLinearClosed), []);
+    const rootStyle = { ...style, '--inkra-radar-size': cssSize(size, 'min(100%, 34rem)'), '--inkra-radar-levels': Math.max(2, Math.min(8, Math.round(levels))) };
+    const selectSeries = (item) => {
+        const next = sameKey(selected, item.id) ? null : item.id;
+        if (selectedSeries === undefined)
+            setInternalSelected(next);
+        onSelectedSeriesChange?.(next, next == null ? null : item);
+    };
+    const renderValue = (context) => {
+        if (renderValueLabel)
+            return renderValueLabel(context);
+        return context.missing ? missingLabel : showValues ? formatNumber(context.value, context.axis, getValueLabel) : '•';
+    };
+    return _jsxs("div", { ...props, ref: forwardedRef, className: ['inkra-radar', className].filter(Boolean).join(' '), style: rootStyle, children: [_jsxs("div", { className: "inkra-radar__heading", children: [_jsx("div", { className: "inkra-radar__label", id: labelId, children: typeof label === 'string' ? _jsx(PencilText, { seed: `${id}-label`, children: label }) : label }), description == null ? null : _jsx("div", { className: "inkra-radar__description", id: descriptionId, children: textNode(description, `${id}-description`) })] }), axes.length < 3 || visibleSeries.length === 0 ? _jsx("div", { className: "inkra-radar__empty", children: textNode(emptyMessage, `${id}-empty`) }) : _jsxs(_Fragment, { children: [_jsxs("div", { className: "inkra-radar__viewport", children: [_jsx(RadarInk, { axisAngles: angles, axes: showAxes ? axes : [], center: center, levels: Math.max(2, Math.min(8, Math.round(levels))), radius: radius, seriesPoints: visibleSeries.map((item, index) => ({ item, points: valuePoints(item), color: item.color ?? palette[index % palette.length], index })) }), _jsxs("svg", { "aria-hidden": "true", className: "inkra-radar__svg-fallback", viewBox: `0 0 ${side} ${side}`, focusable: "false", role: "presentation", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "currentColor", strokeWidth: "1" }), visibleSeries.map(item => _jsx("path", { d: line(valuePoints(item)) ?? undefined, transform: `translate(${center} ${center})` }, keyPart(item.id)))] }), showLabels ? _jsx("div", { "aria-hidden": "true", className: "inkra-radar__labels", children: axes.map((axis, index) => {
+                                    const x = 50 + Math.sin(angles[index]) * 48;
+                                    const y = 50 - Math.cos(angles[index]) * 48;
+                                    return _jsx("span", { className: "inkra-radar__axis-label", style: { left: `${x}%`, top: `${y}%` }, children: renderAxisLabel ? renderAxisLabel(axis) : textNode(axis.label, `${id}-axis-${String(axis.id)}`) }, keyPart(axis.id));
+                                }) }) : null] }), _jsx("div", { "aria-describedby": descriptionId, "aria-labelledby": labelId, className: "inkra-radar__summary", role: "group", children: visibleSeries.map((item, index) => {
+                            const points = valuePoints(item);
+                            const color = item.color ?? palette[index % palette.length];
+                            return _jsxs("div", { className: "inkra-radar__series-summary", "data-series-id": item.id, children: [_jsxs(Button, { "aria-pressed": sameKey(selected, item.id), className: "inkra-radar__legend-button", onClick: () => selectSeries(item), size: "sm", variant: "ghost", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radar__legend-mark", radius: 4, seed: `radar-${keyPart(item.id)}`, style: paintStyle(color), variant: sameKey(selected, item.id) ? 'selection' : 'quiet' }), textNode(item.label, `${id}-summary-${String(item.id)}`)] }), _jsx("div", { className: "inkra-radar__values", children: points.map((point, pointIndex) => {
+                                            const context = { axis: point.axis, series: item, point: point.point, value: point.value, missing: point.value == null };
+                                            return _jsxs("span", { className: "inkra-radar__value", "data-missing": context.missing || undefined, children: [_jsx("strong", { children: textNode(point.axis.label, `${id}-value-axis-${String(point.axis.id)}`) }), " ", textNode(renderValue(context), `${id}-value-${String(item.id)}-${String(point.axis.id)}`)] }, pointIndex);
+                                        }) })] }, keyPart(item.id));
+                        }) }), showLegend ? _jsxs("div", { "aria-label": typeof legendLabel === 'string' ? legendLabel : undefined, className: "inkra-radar__legend", role: "group", children: [_jsx("span", { className: "inkra-radar__legend-title", children: textNode(legendLabel, `${id}-legend-title`) }), visibleSeries.map((item, index) => _jsxs(Button, { "aria-pressed": sameKey(selected, item.id), className: "inkra-radar__legend-button", onClick: () => selectSeries(item), size: "sm", variant: "ghost", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radar__legend-mark", radius: 4, seed: `radar-legend-${keyPart(item.id)}`, style: paintStyle(item.color ?? palette[index % palette.length]), variant: sameKey(selected, item.id) ? 'selection' : 'quiet' }), textNode(item.label, `${id}-legend-${String(item.id)}`)] }, keyPart(item.id)))] }) : null, showTable ? _jsx(Table.Container, { "aria-label": typeof label === 'string' ? label : undefined, "aria-describedby": descriptionId, children: _jsxs(Table.Root, { className: "inkra-radar__table", children: [_jsx(Table.Caption, { children: textNode('Radar data', `${id}-table-caption`) }), _jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Head, { children: textNode('Series', `${id}-table-series`) }), axes.map(axis => _jsx(Table.Head, { children: textNode(axis.label, `${id}-table-axis-${String(axis.id)}`) }, keyPart(axis.id)))] }) }), _jsx(Table.Body, { children: visibleSeries.map(item => _jsxs(Table.Row, { children: [_jsx(Table.Head, { scope: "row", children: textNode(item.label, `${id}-table-series-${String(item.id)}`) }), axes.map(axis => { const point = item.data.find(candidate => candidate.axisId === axis.id); const missing = !finite(point?.value); return _jsx(Table.Cell, { "data-missing": missing || undefined, children: textNode(missing ? missingLabel : formatNumber(point?.value, axis, getValueLabel), `${id}-table-value-${String(item.id)}-${String(axis.id)}`) }, keyPart(axis.id)); })] }, keyPart(item.id))) })] }) }) : null] })] });
+});

package/dist/range-slider/index.d.ts

@@ -0,0 +1,16 @@
+import type { SliderProps } from '../slider/index.js';
+/** A numeric range ordered as [minimum, maximum]. */
+export type RangeSliderValue = [number, number];
+export interface RangeSliderProps extends Omit<SliderProps, 'defaultValue' | 'minStepsBetweenThumbs' | 'onValueChange' | 'onValueCommit' | 'preserveThumbOrder' | 'thumbLabels' | 'value'> {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    onValueCommit?: (value: RangeSliderValue) => void;
+    /** Minimum numeric distance between endpoints. Rounded up to the next step and ignored when allowCross is true. */
+    minDistance?: number;
+    /** Allow a thumb to pass the other and exchange its low/high endpoint role. */
+    allowCross?: boolean;
+    /** Accessible names for the current low and high endpoints. */
+    thumbLabels?: readonly [string, string];
+}
+export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/range-slider/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Slider } from '../slider/index.js';
+const DEFAULT_LABELS = ['Minimum value', 'Maximum value'];
+function asRangeValue(value) {
+    return [value[0], value[1]];
+}
+function normalizeRangeValue(value) {
+    return value[0] <= value[1] ? value : [value[1], value[0]];
+}
+function getMinimumSteps(minDistance, step) {
+    if (!Number.isFinite(minDistance) || minDistance <= 0)
+        return 0;
+    if (!Number.isFinite(step) || step <= 0)
+        return 0;
+    return Math.ceil(minDistance / step);
+}
+export const RangeSlider = forwardRef(function RangeSlider({ allowCross = false, defaultValue, max = 100, min = 0, minDistance = 0, onValueChange, onValueCommit, step = 1, thumbLabels = DEFAULT_LABELS, value, ...props }, forwardedRef) {
+    const controlledValue = value === undefined ? undefined : normalizeRangeValue(value);
+    const uncontrolledDefault = value === undefined ? normalizeRangeValue(defaultValue ?? [min, max]) : undefined;
+    return _jsx(Slider, { ...props, defaultValue: uncontrolledDefault, max: max, min: min, minStepsBetweenThumbs: allowCross ? 0 : getMinimumSteps(minDistance, step), onValueChange: next => onValueChange?.(asRangeValue(next)), onValueCommit: next => onValueCommit?.(asRangeValue(next)), preserveThumbOrder: !allowCross, ref: forwardedRef, step: step, thumbLabels: thumbLabels, value: controlledValue });
+});

package/dist/rating/index.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type RatingSize = 'sm' | 'md' | 'lg';
+export type RatingClearStrategy = boolean | 'reselect' | 'keyboard';
+export interface RatingSymbolState {
+    /** One-based symbol position. */
+    index: number;
+    /** Fraction displayed for this symbol, from 0 to 1. */
+    fraction: number;
+    filled: boolean;
+    previewing: boolean;
+}
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    count?: number;
+    step?: number;
+    clearable?: RatingClearStrategy;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: RatingSize;
+    dir?: 'ltr' | 'rtl';
+    symbol?: ReactNode;
+    renderSymbol?: (state: RatingSymbolState) => ReactNode;
+    getValueLabel?: (value: number, count: number) => string;
+}
+export declare function normalizeRatingValue(value: number | undefined, count: number, step: number): number;
+export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rating/index.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useMemo, useState, } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+const defaultSymbolPaths = [
+    { d: 'M12 2.5 L21.5 12 L12 21.5 L2.5 12 Z' },
+    { d: 'M7.5 12 L12 7.5 L16.5 12 L12 16.5 Z', mode: 'scuff' },
+];
+function finitePositive(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function decimalPlaces(value) {
+    const [coefficient, exponentText] = String(value).toLowerCase().split('e');
+    const [, fraction = ''] = coefficient.split('.');
+    const exponent = Number(exponentText ?? 0);
+    return Math.max(0, fraction.length - exponent);
+}
+export function normalizeRatingValue(value, count, step) {
+    const numeric = typeof value === 'number' && Number.isFinite(value) ? value : 0;
+    const precision = Math.min(8, Math.max(decimalPlaces(step), decimalPlaces(count)));
+    const snapped = Math.round(numeric / step) * step;
+    return Number(Math.min(count, Math.max(0, snapped)).toFixed(precision));
+}
+function allowsReselectClear(clearable) {
+    return clearable === true || clearable === 'reselect';
+}
+function allowsKeyboardClear(clearable) {
+    return clearable === true || clearable === 'keyboard';
+}
+export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onValueChange, count: countProp = 5, step: stepProp = 1, clearable = false, disabled = false, readOnly = false, size = 'md', dir, symbol, renderSymbol, getValueLabel = (nextValue, maximum) => `${nextValue} of ${maximum}`, className = '', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, onBlur, onKeyDown, onPointerLeave, ...props }, forwardedRef) {
+    const count = Math.max(1, Math.floor(finitePositive(countProp, 5)));
+    const step = Math.min(count, finitePositive(stepProp, 1));
+    const controlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => normalizeRatingValue(defaultValue, count, step));
+    const committedValue = normalizeRatingValue(controlled ? value : uncontrolledValue, count, step);
+    const [previewValue, setPreviewValue] = useState(null);
+    const displayValue = previewValue ?? committedValue;
+    const symbolId = useId();
+    const symbolIndexes = useMemo(() => Array.from({ length: count }, (_, index) => index), [count]);
+    const defaultIconSize = size === 'sm' ? 26 : size === 'lg' ? 38 : 32;
+    useEffect(() => {
+        if (disabled || readOnly)
+            setPreviewValue(null);
+    }, [disabled, readOnly]);
+    const commit = (nextValue) => {
+        if (disabled || readOnly)
+            return;
+        const normalized = normalizeRatingValue(nextValue, count, step);
+        const cleared = normalized === committedValue && normalized !== 0 && allowsReselectClear(clearable);
+        const resolved = cleared ? 0 : normalized;
+        setPreviewValue(null);
+        if (resolved === committedValue)
+            return;
+        if (!controlled)
+            setUncontrolledValue(resolved);
+        onValueChange?.(resolved);
+    };
+    const valueFromPointer = (event, index) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const physicalFraction = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 1;
+        const logicalFraction = (dir ?? getComputedStyle(event.currentTarget).direction) === 'rtl'
+            ? 1 - physicalFraction
+            : physicalFraction;
+        const rawValue = index + Math.min(1, Math.max(0, logicalFraction));
+        return normalizeRatingValue(Math.max(step, Math.ceil((rawValue - Number.EPSILON) / step) * step), count, step);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled || readOnly)
+            return;
+        const rtl = (dir ?? getComputedStyle(event.currentTarget).direction) === 'rtl';
+        let nextValue = null;
+        if (event.key === 'ArrowUp')
+            nextValue = committedValue + step;
+        if (event.key === 'ArrowDown')
+            nextValue = committedValue - step;
+        if (event.key === 'ArrowRight')
+            nextValue = committedValue + (rtl ? -step : step);
+        if (event.key === 'ArrowLeft')
+            nextValue = committedValue + (rtl ? step : -step);
+        if (event.key === 'Home')
+            nextValue = allowsKeyboardClear(clearable) ? 0 : Math.min(step, count);
+        if (event.key === 'End')
+            nextValue = count;
+        if (['Backspace', 'Delete', 'Escape'].includes(event.key) && allowsKeyboardClear(clearable))
+            nextValue = 0;
+        if (nextValue === null)
+            return;
+        event.preventDefault();
+        setPreviewValue(null);
+        let normalized = normalizeRatingValue(nextValue, count, step);
+        if (normalized === 0 && committedValue > 0 && !allowsKeyboardClear(clearable)) {
+            normalized = Math.min(step, count);
+        }
+        if (normalized === committedValue)
+            return;
+        if (!controlled)
+            setUncontrolledValue(normalized);
+        onValueChange?.(normalized);
+    };
+    const renderLayerSymbol = (index, fraction, filled) => {
+        const state = {
+            index: index + 1,
+            fraction,
+            filled,
+            previewing: previewValue !== null,
+        };
+        if (renderSymbol)
+            return renderSymbol(state);
+        if (symbol !== undefined)
+            return symbol;
+        return _jsx(PencilIcon, { paths: defaultSymbolPaths, sourceSize: 24, size: defaultIconSize, active: filled, seed: `${symbolId}-${index}` });
+    };
+    return (_jsx("div", { ...props, "aria-disabled": disabled || undefined, "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Rating'), "aria-labelledby": ariaLabelledBy, "aria-readonly": readOnly || undefined, "aria-valuemax": count, "aria-valuemin": 0, "aria-valuenow": committedValue, "aria-valuetext": getValueLabel(committedValue, count), className: ['inkra-rating', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-previewing": previewValue !== null || undefined, "data-readonly": readOnly || undefined, "data-size": size, dir: dir, onBlur: (event) => {
+            setPreviewValue(null);
+            onBlur?.(event);
+        }, onKeyDown: handleKeyDown, onPointerLeave: (event) => {
+            setPreviewValue(null);
+            onPointerLeave?.(event);
+        }, ref: forwardedRef, role: "slider", tabIndex: disabled ? undefined : (props.tabIndex ?? 0), children: _jsx("span", { className: "inkra-rating__symbols", "aria-hidden": "true", children: symbolIndexes.map((index) => {
+                const fraction = Math.min(1, Math.max(0, displayValue - index));
+                return (_jsxs("span", { className: "inkra-rating__symbol-target", "data-index": index + 1, onClick: (event) => commit(valueFromPointer(event, index)), onPointerMove: (event) => {
+                        if (event.pointerType === 'mouse' && !disabled && !readOnly) {
+                            setPreviewValue(valueFromPointer(event, index));
+                        }
+                    }, children: [_jsx("span", { className: "inkra-rating__symbol inkra-rating__symbol--empty", children: renderLayerSymbol(index, 0, false) }), _jsx("span", { className: "inkra-rating__fill", style: { inlineSize: `${fraction * 100}%` }, children: _jsx("span", { className: "inkra-rating__symbol inkra-rating__symbol--filled", children: renderLayerSymbol(index, fraction, true) }) })] }, index));
+            }) }) }));
+});

package/dist/resizable/index.d.ts

@@ -0,0 +1,32 @@
+import { useGroupCallbackRef, useGroupRef, usePanelCallbackRef, usePanelRef } from 'react-resizable-panels';
+import type { Ref } from 'react';
+import type { GroupImperativeHandle, GroupProps, Layout, LayoutChangedMeta, PanelImperativeHandle, PanelProps, SeparatorProps } from 'react-resizable-panels';
+export type ResizableOrientation = 'horizontal' | 'vertical';
+export type ResizableLayout = Layout;
+export type ResizableLayoutChangeMeta = LayoutChangedMeta;
+export type ResizableRootRef = GroupImperativeHandle;
+export type ResizablePanelRef = PanelImperativeHandle;
+export interface ResizableRootProps extends Omit<GroupProps, 'defaultLayout' | 'elementRef' | 'groupRef' | 'onLayoutChange' | 'onLayoutChanged' | 'orientation' | 'resizeTargetMinimumSize'> {
+    orientation?: ResizableOrientation;
+    layout?: ResizableLayout;
+    defaultLayout?: ResizableLayout;
+    onLayoutChange?: (layout: ResizableLayout) => void;
+    onLayoutCommit?: (layout: ResizableLayout, meta: ResizableLayoutChangeMeta) => void;
+    rootRef?: Ref<HTMLDivElement>;
+    apiRef?: Ref<ResizableRootRef>;
+    resizeTargetMinimumSize?: GroupProps['resizeTargetMinimumSize'];
+}
+declare function ResizableRoot({ apiRef, className, defaultLayout, layout, onLayoutChange, onLayoutCommit, orientation, resizeTargetMinimumSize, rootRef, ...props }: ResizableRootProps): import("react").JSX.Element;
+export type ResizablePanelProps = PanelProps;
+declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
+export interface ResizableHandleProps extends SeparatorProps {
+    label?: string;
+    lineSeed?: string | number;
+}
+declare function ResizableHandle({ 'aria-label': ariaLabel, children, className, label, lineSeed, ...props }: ResizableHandleProps): import("react").JSX.Element;
+export declare const Resizable: Readonly<{
+    Root: typeof ResizableRoot;
+    Panel: typeof ResizablePanel;
+    Handle: typeof ResizableHandle;
+}>;
+export { useGroupCallbackRef as useResizableRootCallbackRef, useGroupRef as useResizableRootRef, usePanelCallbackRef as useResizablePanelCallbackRef, usePanelRef as useResizablePanelRef, };

package/dist/resizable/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group as ResizableGroupPrimitive, Panel as ResizablePanelPrimitive, Separator as ResizableSeparatorPrimitive, useGroupCallbackRef, useGroupRef, usePanelCallbackRef, usePanelRef, } from 'react-resizable-panels';
+import { useCallback, useReducer } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function layoutsEqual(current, requested) {
+    const currentIds = Object.keys(current);
+    const requestedIds = Object.keys(requested);
+    return currentIds.length === requestedIds.length
+        && requestedIds.every((id) => Math.abs((current[id] ?? -1) - requested[id]) < 0.001);
+}
+function ResizableRoot({ apiRef, className, defaultLayout, layout, onLayoutChange, onLayoutCommit, orientation = 'horizontal', resizeTargetMinimumSize = { coarse: 44, fine: 12 }, rootRef, ...props }) {
+    const [group, setGroup] = useGroupCallbackRef();
+    const [layoutRevision, refreshControlledLayout] = useReducer((value) => value + 1, 0);
+    const setApiRef = useCallback((value) => {
+        setGroup(value);
+        assignRef(apiRef, value);
+    }, [apiRef, setGroup]);
+    const handleLayoutChange = useCallback((nextLayout) => {
+        onLayoutChange?.(nextLayout);
+        if (layout !== undefined)
+            refreshControlledLayout();
+    }, [layout, onLayoutChange]);
+    useBrowserLayoutEffect(() => {
+        if (!group || layout === undefined || layoutsEqual(group.getLayout(), layout))
+            return;
+        group.setLayout(layout);
+    }, [group, layout, layoutRevision]);
+    return _jsx(ResizableGroupPrimitive, { ...props, className: classes('inkra-resizable', className), "data-orientation": orientation, defaultLayout: layout ?? defaultLayout, elementRef: rootRef, groupRef: setApiRef, onLayoutChange: handleLayoutChange, onLayoutChanged: onLayoutCommit, orientation: orientation, resizeTargetMinimumSize: resizeTargetMinimumSize });
+}
+function ResizablePanel({ className, ...props }) {
+    return _jsx(ResizablePanelPrimitive, { ...props, className: classes('inkra-resizable__panel', className) });
+}
+function ResizableHandle({ 'aria-label': ariaLabel, children, className, label = 'Resize panels', lineSeed = 'inkra-resizable-handle', ...props }) {
+    return _jsxs(ResizableSeparatorPrimitive, { ...props, "aria-label": ariaLabel ?? label, className: classes('inkra-resizable__handle', className), children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-resizable__handle-focus", seed: `${lineSeed}-focus`, variant: "outline" }), _jsxs("span", { "aria-hidden": "true", className: "inkra-resizable__handle-mark", children: [_jsx(PencilLine, { className: "inkra-resizable__handle-line inkra-resizable__handle-line--horizontal", seed: `${lineSeed}-horizontal` }), _jsx(PencilLine, { className: "inkra-resizable__handle-line inkra-resizable__handle-line--vertical", orientation: "vertical", seed: `${lineSeed}-vertical` }), children] })] });
+}
+export const Resizable = Object.freeze({
+    Root: ResizableRoot,
+    Panel: ResizablePanel,
+    Handle: ResizableHandle,
+});
+export { useGroupCallbackRef as useResizableRootCallbackRef, useGroupRef as useResizableRootRef, usePanelCallbackRef as useResizablePanelCallbackRef, usePanelRef as useResizablePanelRef, };

package/dist/scroll-area/index.d.ts

@@ -0,0 +1,36 @@
+import type { ScrollAreaContentProps as PrimitiveContentProps, ScrollAreaCornerProps as PrimitiveCornerProps, ScrollAreaRootProps as PrimitiveRootProps, ScrollAreaScrollbarProps as PrimitiveScrollbarProps, ScrollAreaThumbProps as PrimitiveThumbProps, ScrollAreaViewportProps as PrimitiveViewportProps } from '@base-ui/react/scroll-area';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ScrollAreaVisibility = 'auto' | 'always';
+export interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+    /** Keep custom scrollbars visible, or reveal them while scrolling/hovering. */
+    type?: ScrollAreaVisibility;
+    /** The distance in pixels before overflow edge attributes become active. */
+    overflowEdgeThreshold?: PrimitiveRootProps['overflowEdgeThreshold'];
+    /** Stable seed used by the pencil scrollbar surfaces. */
+    seed?: string | number;
+    /** Localized accessible name for the scrollable viewport. */
+    viewportLabel?: string;
+    viewportProps?: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
+}
+export type ScrollAreaRootProps = PrimitiveRootProps;
+export type ScrollAreaViewportProps = PrimitiveViewportProps;
+export type ScrollAreaScrollbarProps = PrimitiveScrollbarProps;
+export type ScrollAreaThumbProps = PrimitiveThumbProps;
+export type ScrollAreaContentProps = PrimitiveContentProps;
+export type ScrollAreaCornerProps = PrimitiveCornerProps;
+declare const ScrollAreaRoot: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Viewport: import("react").ForwardRefExoticComponent<Omit<PrimitiveViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Content: import("react").ForwardRefExoticComponent<Omit<PrimitiveContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Scrollbar: import("react").ForwardRefExoticComponent<Omit<PrimitiveScrollbarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Thumb: import("react").ForwardRefExoticComponent<Omit<PrimitiveThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Corner: import("react").ForwardRefExoticComponent<Omit<PrimitiveCornerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<PrimitiveViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<PrimitiveContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Scrollbar: import("react").ForwardRefExoticComponent<Omit<PrimitiveScrollbarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<PrimitiveThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Corner: import("react").ForwardRefExoticComponent<Omit<PrimitiveCornerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { ScrollAreaRoot, Viewport as ScrollAreaViewport, Content as ScrollAreaContent, Scrollbar as ScrollAreaScrollbar, Thumb as ScrollAreaThumb, Corner as ScrollAreaCorner };

package/dist/scroll-area/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+import { forwardRef, useId } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function withClassName(base, value) {
+    return typeof value === 'function'
+        ? (state) => classes(base, value(state))
+        : classes(base, value);
+}
+const ScrollAreaRoot = forwardRef(function ScrollAreaRoot({ 'aria-label': ariaLabel, children, className, overflowEdgeThreshold, seed, style, type = 'auto', viewportLabel, viewportProps, ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-scroll-area-${generatedId}`;
+    const viewportClassName = classes('inkra-scroll-area__viewport', viewportProps?.className);
+    const viewportStyle = viewportProps?.style;
+    const viewportLabelValue = viewportProps?.['aria-label'] ?? viewportLabel ?? ariaLabel;
+    return _jsxs(ScrollAreaPrimitive.Root, { ...props, ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), className: classes('inkra-scroll-area', className), "data-type": type, overflowEdgeThreshold: overflowEdgeThreshold, ref: ref, style: style, children: [_jsx(ScrollAreaPrimitive.Viewport, { ...viewportProps, "aria-label": viewportLabelValue, className: viewportClassName, style: viewportStyle, children: children }), _jsxs(ScrollAreaPrimitive.Scrollbar, { className: "inkra-scroll-area__scrollbar", orientation: "vertical", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-scroll-area__track", radius: 3, seed: `${resolvedSeed}-vertical-track`, variant: "quiet" }), _jsx(ScrollAreaPrimitive.Thumb, { className: "inkra-scroll-area__thumb", children: _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-scroll-area__thumb-surface", radius: 3, seed: `${resolvedSeed}-vertical-thumb`, variant: "outline" }) })] }), _jsxs(ScrollAreaPrimitive.Scrollbar, { className: "inkra-scroll-area__scrollbar", orientation: "horizontal", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-scroll-area__track", radius: 3, seed: `${resolvedSeed}-horizontal-track`, variant: "quiet" }), _jsx(ScrollAreaPrimitive.Thumb, { className: "inkra-scroll-area__thumb", children: _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-scroll-area__thumb-surface", radius: 3, seed: `${resolvedSeed}-horizontal-thumb`, variant: "outline" }) })] }), _jsx(ScrollAreaPrimitive.Corner, { className: "inkra-scroll-area__corner" })] });
+});
+const Viewport = forwardRef(function Viewport({ className, ...props }, ref) {
+    return _jsx(ScrollAreaPrimitive.Viewport, { ...props, className: withClassName('inkra-scroll-area__viewport', className), ref: ref });
+});
+const Content = forwardRef(function Content({ className, ...props }, ref) {
+    return _jsx(ScrollAreaPrimitive.Content, { ...props, className: withClassName('inkra-scroll-area__content', className), ref: ref });
+});
+const Scrollbar = forwardRef(function Scrollbar({ className, ...props }, ref) {
+    return _jsx(ScrollAreaPrimitive.Scrollbar, { ...props, className: withClassName('inkra-scroll-area__scrollbar', className), ref: ref });
+});
+const Thumb = forwardRef(function Thumb({ className, ...props }, ref) {
+    return _jsx(ScrollAreaPrimitive.Thumb, { ...props, className: withClassName('inkra-scroll-area__thumb', className), ref: ref });
+});
+const Corner = forwardRef(function Corner({ className, ...props }, ref) {
+    return _jsx(ScrollAreaPrimitive.Corner, { ...props, className: withClassName('inkra-scroll-area__corner', className), ref: ref });
+});
+export const ScrollArea = Object.assign(ScrollAreaRoot, {
+    Root: ScrollAreaRoot,
+    Viewport,
+    Content,
+    Scrollbar,
+    Thumb,
+    Corner,
+});
+export { ScrollAreaRoot, Viewport as ScrollAreaViewport, Content as ScrollAreaContent, Scrollbar as ScrollAreaScrollbar, Thumb as ScrollAreaThumb, Corner as ScrollAreaCorner };

package/dist/segmented-progress/SegmentedProgress.d.ts

@@ -0,0 +1,17 @@
+export type ProgressPartialSegment = 'fractional' | 'complete' | 'next';
+export interface ProgressThreshold {
+    value: number;
+    color: string;
+}
+interface SegmentedProgressProps {
+    count: number;
+    gap: number;
+    max: number;
+    partialSegment: ProgressPartialSegment;
+    percent: number | null;
+    seed: string | number;
+    segmentColors?: readonly string[];
+    thresholds?: readonly ProgressThreshold[];
+}
+export declare function SegmentedProgress({ count, gap, max, partialSegment, percent, seed, segmentColors, thresholds, }: SegmentedProgressProps): import("react").JSX.Element;
+export {};