@inkra/react 0.3.0 → 0.4.3

package/dist/pagination/index.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export interface PaginationLabels {
     nav: string;
     first: string;
@@ -16,6 +16,15 @@ export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
     siblingCount?: number;
     boundaryCount?: number;
     showFirstLast?: boolean;
+    showPreviousNext?: boolean;
+    hideOnSinglePage?: boolean;
+    simple?: boolean;
+    /** Non-interactive content inside each numbered page button. */
+    renderPage?: (page: number, state: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** Non-interactive current/total content in simple mode. */
+    renderSummary?: (page: number, totalPages: number) => ReactNode;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     labels?: Partial<PaginationLabels>;

package/dist/pagination/index.js

@@ -9,7 +9,7 @@ const defaultLabels = {
     nav: 'Pagination', first: 'First page', previous: 'Previous page', next: 'Next page', last: 'Last page',
     page: page => `Page ${page}`, ellipsis: 'More pages',
 };
-export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, disabled = false, size = 'md', labels, className, ...props }, ref) {
+export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, showPreviousNext = true, hideOnSinglePage = false, simple = false, renderPage, renderSummary, disabled = false, size = 'md', labels, className, ...props }, ref) {
     const total = normalizeTotal(totalPages);
     const [internalPage, setInternalPage] = useState(() => clampPage(defaultPage, total));
     const current = clampPage(page ?? internalPage, total);
@@ -35,7 +35,9 @@ export const Pagination = forwardRef(function Pagination({ totalPages, page, def
             paths.push({ d: 'M19 6v12' });
         return _jsx("li", { children: _jsx(Button, { variant: "ghost", size: size === 'md' ? 'icon' : `icon-${size}`, "aria-label": text[kind], title: text[kind], disabled: disabled || unavailable, onClick: () => select(target), children: _jsx(PencilIcon, { className: "inkra-pagination__arrow", paths: paths, size: 20, sourceSize: 24 }) }) }, kind);
     };
-    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), arrow('previous', current - 1, current <= 1), getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
-                    ? _jsx("li", { children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), _jsx(PencilText, { children: String(entry) })] }) }, entry)
-                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
+    if (hideOnSinglePage && total <= 1)
+        return null;
+    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, "data-simple": simple || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), showPreviousNext && arrow('previous', current - 1, current <= 1), simple ? _jsx("li", { className: "inkra-pagination__summary", "aria-live": "polite", "aria-atomic": "true", children: renderSummary ? renderSummary(current, total) : _jsx(PencilText, { children: `${current} / ${total}` }) }) : getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
+                    ? _jsx("li", { className: "inkra-pagination__page-item", children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), renderPage ? renderPage(entry, { isCurrent: entry === current }) : _jsx(PencilText, { children: String(entry) })] }) }, entry)
+                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), showPreviousNext && arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
 });

package/dist/pan-zoom/index.d.ts

@@ -48,6 +48,8 @@ export interface PanZoomProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     minScale?: number;
     maxScale?: number;
     wheel?: PanZoomWheelMode;
+    /** Scale increment per wheel delta unit. Must be finite and positive. */
+    wheelStep?: number;
     pinch?: boolean;
     pan?: boolean;
     keyboard?: boolean;

package/dist/pan-zoom/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 const defaultTransform = { x: 0, y: 0, scale: 1 };
 const interactionExclusions = [
@@ -26,16 +26,18 @@ function transformsEqual(left, right) {
 function prefersReducedMotion(element) {
     return element?.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches ?? false;
 }
-function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTransformChange, minScale = 0.25, maxScale = 8, wheel = 'modifier', pinch = true, pan = true, keyboard = true, keyboardPanStep = 48, keyboardZoomStep = 0.25, doubleClickZoom = false, disabled = false, readOnly = false, limitToBounds = true, centerZoomedOut = true, centerOnInit = false, fitOnInit = false, className, viewportClassName, contentClassName, style, viewportStyle, contentStyle, viewportProps, contentProps, instructions, 'aria-label': ariaLabel = 'Pan and zoom content', ...props }, forwardedRef) {
+function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTransformChange, minScale = 0.25, maxScale = 8, wheel = 'modifier', wheelStep = 0.001, pinch = true, pan = true, keyboard = true, keyboardPanStep = 48, keyboardZoomStep = 0.25, doubleClickZoom = false, disabled = false, readOnly = false, limitToBounds = true, centerZoomedOut = true, centerOnInit = false, fitOnInit = false, className, viewportClassName, contentClassName, style, viewportStyle, contentStyle, viewportProps, contentProps, instructions, 'aria-label': ariaLabel = 'Pan and zoom content', ...props }, forwardedRef) {
     const resolvedMinScale = Math.max(Number.isFinite(minScale) ? minScale : 0.25, 0.0001);
     const resolvedMaxScale = Math.max(Number.isFinite(maxScale) ? maxScale : 8, resolvedMinScale);
+    const resolvedWheelStep = Number.isFinite(wheelStep) && wheelStep > 0 ? wheelStep : 0.001;
     const controlled = value !== undefined;
     const initialTransform = normalizedTransform(value ?? defaultValue, resolvedMinScale, resolvedMaxScale);
-    const [uncontrolledTransform, setUncontrolledTransform] = useState(initialTransform);
-    const visibleTransform = normalizedTransform(value ?? uncontrolledTransform, resolvedMinScale, resolvedMaxScale);
     const engineRef = useRef(null);
     const instructionsId = useId();
+    // The engine owns the live DOM transform. Keep its snapshot for imperative reads,
+    // rather than rerendering the complete content subtree on every gesture frame.
     const committedRef = useRef(initialTransform);
+    const visibleTransform = normalizedTransform(value ?? committedRef.current, resolvedMinScale, resolvedMaxScale);
     const programmaticRef = useRef(false);
     const pointerBlocksPanRef = useRef(false);
     const wheelTargetBlocksZoomRef = useRef(false);
@@ -132,6 +134,7 @@ function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTrans
                         excluded: interactionExclusions,
                         activationKeys: () => !pointerBlocksPanRef.current,
                     }, pinch: { disabled: userInteractionDisabled || !pinch, excluded: interactionExclusions }, wheel: {
+                        step: resolvedWheelStep,
                         disabled: userInteractionDisabled || wheel === 'disabled',
                         activationKeys: wheelActivation,
                         excluded: interactionExclusions,
@@ -144,8 +147,6 @@ function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTrans
                     }, doubleClick: { disabled: userInteractionDisabled || !doubleClickZoom, mode: 'zoomIn', excluded: interactionExclusions }, zoomAnimation: { disabled: false, animationTime: 200 }, velocityAnimation: { disabled: prefersReducedMotion(engineRef.current?.instance.wrapperComponent ?? null) }, onPanningStop: reconcileControlled, onPinchStop: reconcileControlled, onWheelStop: reconcileControlled, onZoomStop: reconcileControlled, onTransform: (_, state) => {
                         const next = normalizedTransform({ x: state.positionX, y: state.positionY, scale: state.scale }, resolvedMinScale, resolvedMaxScale);
                         committedRef.current = next;
-                        if (!controlled)
-                            setUncontrolledTransform(next);
                         onTransformChange?.(next, { reason: programmaticRef.current ? 'programmatic' : 'gesture' });
                     }, children: _jsx(TransformComponent, { wrapperClass: ['inkra-pan-zoom__viewport', viewportClassName].filter(Boolean).join(' '), contentClass: ['inkra-pan-zoom__content', contentClassName].filter(Boolean).join(' '), wrapperStyle: viewportStyle, contentStyle: contentStyle, wrapperProps: {
                             ...viewportProps,

package/dist/pencil.d.ts

@@ -3,6 +3,7 @@ export interface PencilPathOptions {
     seed: string | number;
     width?: number;
     height?: number;
+    /** Point count, clamped to 2-65,536. Non-finite values use the default (7). */
     points?: number;
     roughness?: number;
 }

package/dist/pencil.js

@@ -19,11 +19,11 @@ function createRandom(seed) {
 }
 export function createPencilPoints({ seed, width = 100, height = 8, points = 7, roughness = 1, }) {
     const random = createRandom(seed);
-    const safeWidth = Math.max(1, width);
-    const safeHeight = Math.max(1, height);
-    const pointCount = Math.max(2, Math.floor(points));
+    const safeWidth = Number.isFinite(width) ? Math.max(1, width) : 100;
+    const safeHeight = Number.isFinite(height) ? Math.max(1, height) : 8;
+    const pointCount = Number.isFinite(points) ? Math.max(2, Math.min(65536, Math.floor(points))) : 7;
     const center = safeHeight / 2;
-    const amplitude = Math.min(safeHeight * 0.32, Math.max(0, roughness));
+    const amplitude = Math.min(safeHeight * 0.32, Math.max(0, Number.isFinite(roughness) ? roughness : 1));
     return Array.from({ length: pointCount }, (_, index) => {
         const progress = index / (pointCount - 1);
         const xJitter = index === 0 || index === pointCount - 1 ? 0 : (random() - 0.5) * 1.4;

package/dist/radar/index.d.ts

@@ -29,7 +29,9 @@ export interface RadarValueContext {
     missing: boolean;
 }
 export interface RadarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** Immutable snapshots: replace the axes array when an axis changes. */
     axes: readonly RadarAxis[];
+    /** Immutable snapshots: replace series and changed records/data when values change. */
     series: readonly RadarSeries[];
     label: ReactNode;
     description?: ReactNode;

package/dist/radar/index.js

@@ -87,10 +87,13 @@ function RadarInk({ axisAngles, axes, levels, radius, center, seriesPoints, }) {
                     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]));
+                    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+                    for (const [x, y] of valid) {
+                        minX = Math.min(minX, x);
+                        maxX = Math.max(maxX, x);
+                        minY = Math.min(minY, y);
+                        maxY = Math.max(maxY, y);
+                    }
                     context.save();
                     context.beginPath();
                     valid.forEach(([x, y], pointIndex) => pointIndex ? context.lineTo(x, y) : context.moveTo(x, y));
@@ -139,6 +142,7 @@ function RadarInk({ axisAngles, axes, levels, radius, center, seriesPoints, }) {
     }, [axes, axisAngles, center, levels, radius, seriesPoints]);
     return _jsx("canvas", { "aria-hidden": "true", className: "inkra-radar__ink", "data-ready": ready || undefined, ref: canvasRef });
 }
+const noAxes = [];
 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; }
@@ -156,8 +160,14 @@ 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;
+    let minimum = values.length ? values[0] : 0;
+    let maximum = values.length ? values[0] : 1;
+    for (let index = 1; index < values.length; index++) {
+        minimum = Math.min(minimum, values[index]);
+        maximum = Math.max(maximum, values[index]);
+    }
+    let min = finite(axis.min) ? axis.min : minimum;
+    let max = finite(axis.max) ? axis.max : maximum;
     if (min > max)
         [min, max] = [max, min];
     if (min === max) {
@@ -175,7 +185,7 @@ export const Radar = forwardRef(function Radar({ axes, series, label, descriptio
     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 visibleSeries = useMemo(() => series.filter(item => !item.hidden), [series]);
     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)];
@@ -183,15 +193,27 @@ export const Radar = forwardRef(function Radar({ axes, series, label, descriptio
     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 angles = useMemo(() => axes.map((_, index) => (index * Math.PI * 2) / Math.max(1, axisCount)), [axes, 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 scales = useMemo(() => axes.map(axis => scaleLinear()
+        .domain(domains.get(keyPart(axis.id)) ?? [0, 1]).range([0, radius]).clamp(true)), [axes, domains, radius]);
+    const seriesPoints = useMemo(() => visibleSeries.map((item, index) => {
+        // Preserve the first point for duplicate axis ids, matching Array.find.
+        const pointsByAxis = new Map();
+        for (const point of item.data) {
+            // Map uses SameValueZero, while the prior lookup used strict equality.
+            if (typeof point.axisId === 'number' && Number.isNaN(point.axisId))
+                continue;
+            if (!pointsByAxis.has(point.axisId))
+                pointsByAxis.set(point.axisId, point);
+        }
+        const points = axes.map((axis, axisIndex) => {
+            const point = pointsByAxis.get(axis.id) ?? { axisId: axis.id, value: null };
+            const value = finite(point.value) ? point.value : null;
+            return { angle: angles[axisIndex], radius: value == null ? 0 : scales[axisIndex](value), value, point, axis };
+        });
+        return { item, points, color: item.color ?? palette[index % palette.length], index };
+    }), [angles, axes, scales, visibleSeries]);
     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) => {
@@ -205,16 +227,14 @@ export const Radar = forwardRef(function Radar({ axes, series, label, descriptio
             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) => {
+    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 : noAxes, center: center, levels: Math.max(2, Math.min(8, Math.round(levels))), radius: radius, seriesPoints: seriesPoints }), _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" }), seriesPoints.map(({ item, points }) => _jsx("path", { d: line(points) ?? 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];
+                                }) }) : null] }), _jsx("div", { "aria-describedby": descriptionId, "aria-labelledby": labelId, className: "inkra-radar__summary", role: "group", children: seriesPoints.map(({ item, points, color }) => {
                             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(tableCaption, `${id}-table-caption`) }), _jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Head, { children: textNode(seriesLabel, `${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] })] });
+                        }) }), 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(tableCaption, `${id}-table-caption`) }), _jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Head, { children: textNode(seriesLabel, `${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: seriesPoints.map(({ item, points }) => _jsxs(Table.Row, { children: [_jsx(Table.Head, { scope: "row", children: textNode(item.label, `${id}-table-series-${String(item.id)}`) }), points.map(({ axis, value }) => { const missing = value === null; return _jsx(Table.Cell, { "data-missing": missing || undefined, children: textNode(missing ? missingLabel : formatNumber(value, axis, getValueLabel), `${id}-table-value-${String(item.id)}-${String(axis.id)}`) }, keyPart(axis.id)); })] }, keyPart(item.id))) })] }) }) : null] })] });
 });

package/dist/rating/index.d.ts

@@ -13,6 +13,10 @@ export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     value?: number;
     defaultValue?: number;
     onValueChange?: (value: number) => void;
+    name?: string;
+    form?: string;
+    hoverPreview?: boolean;
+    onPreviewChange?: (value: number | null) => void;
     count?: number;
     step?: number;
     clearable?: RatingClearStrategy;

package/dist/rating/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useMemo, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.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' },
@@ -16,6 +17,10 @@ function decimalPlaces(value) {
 }
 export function normalizeRatingValue(value, count, step) {
     const numeric = typeof value === 'number' && Number.isFinite(value) ? value : 0;
+    if (numeric <= 0)
+        return 0;
+    if (numeric >= count)
+        return count;
     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));
@@ -26,28 +31,86 @@ function allowsReselectClear(clearable) {
 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) {
+function previousRatingValue(value, count, step) {
+    if (value >= count) {
+        const precision = Math.min(8, Math.max(decimalPlaces(step), decimalPlaces(count)));
+        const previousIndex = Math.max(0, Math.ceil(count / step) - 1);
+        return Number((previousIndex * step).toFixed(precision));
+    }
+    return value - step;
+}
+export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onValueChange, name, form, hoverPreview = true, onPreviewChange, 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, onPointerDown, 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 previewRef = useRef(null);
+    const previewCallback = useRef(onPreviewChange);
+    previewCallback.current = onPreviewChange;
+    const resetState = useRef({ controlled, defaultValue, count, step });
+    resetState.current = { controlled, defaultValue, count, step };
+    const inputRef = useRef(null);
+    const rootRef = useRef(null);
+    const symbolsRef = useRef(null);
+    const pendingKeyboardValueRef = useRef(null);
+    const pendingKeyboardTimerRef = useRef(undefined);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const clearPendingKeyboard = useCallback(() => {
+        clearTimeout(pendingKeyboardTimerRef.current);
+        pendingKeyboardTimerRef.current = undefined;
+        pendingKeyboardValueRef.current = null;
+    }, []);
+    const changePreview = useCallback((next) => {
+        if (previewRef.current === next)
+            return;
+        previewRef.current = next;
+        setPreviewValue(next);
+        previewCallback.current?.(next);
+    }, []);
+    const previewing = hoverPreview && !disabled && !readOnly && previewValue !== null;
+    const displayValue = previewing ? normalizeRatingValue(previewValue, count, step) : 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]);
+        if (disabled || readOnly || !hoverPreview)
+            changePreview(null);
+    }, [disabled, readOnly, hoverPreview, changePreview]);
+    useEffect(() => {
+        clearPendingKeyboard();
+        changePreview(null);
+    }, [count, step, changePreview, clearPendingKeyboard]);
+    useEffect(() => clearPendingKeyboard, [clearPendingKeyboard]);
+    useEffect(() => {
+        const owner = inputRef.current?.form;
+        if (!owner)
+            return;
+        let resetTimer;
+        const reset = (event) => {
+            clearTimeout(resetTimer);
+            resetTimer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                clearPendingKeyboard();
+                changePreview(null);
+                const state = resetState.current;
+                if (!state.controlled)
+                    setUncontrolledValue(normalizeRatingValue(state.defaultValue, state.count, state.step));
+            }, 0);
+        };
+        owner.addEventListener('reset', reset);
+        return () => { clearTimeout(resetTimer); owner.removeEventListener('reset', reset); };
+    }, [form, changePreview, clearPendingKeyboard]);
     const commit = (nextValue) => {
         if (disabled || readOnly)
             return;
+        clearPendingKeyboard();
         const normalized = normalizeRatingValue(nextValue, count, step);
         const cleared = normalized === committedValue && normalized !== 0 && allowsReselectClear(clearable);
         const resolved = cleared ? 0 : normalized;
-        setPreviewValue(null);
+        changePreview(null);
         if (resolved === committedValue)
             return;
         if (!controlled)
@@ -63,6 +126,30 @@ export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onVa
         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 revealValue = useCallback((nextValue) => {
+        const scroller = symbolsRef.current;
+        if (!scroller)
+            return;
+        const targetIndex = Math.max(1, Math.ceil(normalizeRatingValue(nextValue, count, step)));
+        const target = scroller.querySelector(`[data-index="${targetIndex}"]`);
+        if (!target)
+            return;
+        const viewport = scroller.getBoundingClientRect();
+        const item = target.getBoundingClientRect();
+        const delta = item.left < viewport.left ? item.left - viewport.left
+            : item.right > viewport.right ? item.right - viewport.right
+                : 0;
+        if (delta)
+            scroller.scrollLeft += delta;
+    }, [count, step]);
+    useEffect(() => {
+        const pending = pendingKeyboardValueRef.current;
+        if (pending === null)
+            return;
+        clearPendingKeyboard();
+        if (pending === committedValue)
+            revealValue(committedValue);
+    }, [committedValue, revealValue, clearPendingKeyboard]);
     const handleKeyDown = (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented || disabled || readOnly)
@@ -72,11 +159,15 @@ export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onVa
         if (event.key === 'ArrowUp')
             nextValue = committedValue + step;
         if (event.key === 'ArrowDown')
-            nextValue = committedValue - step;
+            nextValue = previousRatingValue(committedValue, count, step);
         if (event.key === 'ArrowRight')
-            nextValue = committedValue + (rtl ? -step : step);
+            nextValue = rtl
+                ? previousRatingValue(committedValue, count, step)
+                : committedValue + step;
         if (event.key === 'ArrowLeft')
-            nextValue = committedValue + (rtl ? step : -step);
+            nextValue = rtl
+                ? committedValue + step
+                : previousRatingValue(committedValue, count, step);
         if (event.key === 'Home')
             nextValue = allowsKeyboardClear(clearable) ? 0 : Math.min(step, count);
         if (event.key === 'End')
@@ -86,13 +177,19 @@ export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onVa
         if (nextValue === null)
             return;
         event.preventDefault();
-        setPreviewValue(null);
+        changePreview(null);
         let normalized = normalizeRatingValue(nextValue, count, step);
         if (normalized === 0 && committedValue > 0 && !allowsKeyboardClear(clearable)) {
             normalized = Math.min(step, count);
         }
         if (normalized === committedValue)
             return;
+        clearPendingKeyboard();
+        pendingKeyboardValueRef.current = normalized;
+        pendingKeyboardTimerRef.current = setTimeout(() => {
+            pendingKeyboardTimerRef.current = undefined;
+            pendingKeyboardValueRef.current = null;
+        }, 100);
         if (!controlled)
             setUncontrolledValue(normalized);
         onValueChange?.(normalized);
@@ -102,7 +199,7 @@ export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onVa
             index: index + 1,
             fraction,
             filled,
-            previewing: previewValue !== null,
+            previewing,
         };
         if (renderSymbol)
             return renderSymbol(state);
@@ -110,18 +207,25 @@ export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onVa
             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);
+    return (_jsxs("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": previewing || undefined, "data-readonly": readOnly || undefined, "data-size": size, dir: dir, onBlur: (event) => {
+            clearPendingKeyboard();
+            changePreview(null);
             onBlur?.(event);
-        }, onKeyDown: handleKeyDown, onPointerLeave: (event) => {
-            setPreviewValue(null);
+        }, onKeyDown: handleKeyDown, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            if (!event.defaultPrevented && !disabled) {
+                clearPendingKeyboard();
+                rootRef.current?.focus({ preventScroll: true });
+            }
+        }, onPointerLeave: (event) => {
+            changePreview(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));
-            }) }) }));
+        }, ref: rootRef, role: "slider", tabIndex: disabled ? undefined : (props.tabIndex ?? 0), children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-rating__focus-ring", variant: "outline", seed: `${symbolId}-focus` }), _jsx("input", { ref: inputRef, type: "hidden", name: name, form: form, value: committedValue, disabled: disabled }), _jsx("span", { className: "inkra-rating__symbols", "aria-hidden": "true", ref: symbolsRef, 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 (hoverPreview && event.pointerType === 'mouse' && !disabled && !readOnly) {
+                                changePreview(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.js

@@ -42,7 +42,7 @@ function ResizablePanel({ className, ...props }) {
 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({
+export const Resizable = /* @__PURE__ */ Object.freeze({
     Root: ResizableRoot,
     Panel: ResizablePanel,
     Handle: ResizableHandle,

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

@@ -13,7 +13,7 @@ export interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     viewportLabel?: string;
     viewportProps?: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
 }
-export type ScrollAreaRootProps = PrimitiveRootProps;
+export type ScrollAreaRootProps = ScrollAreaProps;
 export type ScrollAreaViewportProps = PrimitiveViewportProps;
 export type ScrollAreaScrollbarProps = PrimitiveScrollbarProps;
 export type ScrollAreaThumbProps = PrimitiveThumbProps;

package/dist/scroll-area/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 import { forwardRef, useId } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
@@ -10,13 +11,15 @@ function withClassName(base, value) {
         ? (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 ScrollAreaRoot = forwardRef(function ScrollAreaRoot({ 'aria-label': ariaLabel, children, className, dir, overflowEdgeThreshold, seed, style, type = 'auto', viewportLabel, viewportProps, ...props }, ref) {
+    const inheritedDirection = useDirection();
+    const resolvedDirection = dir === 'rtl' || dir === 'ltr' ? dir : inheritedDirection;
     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" })] });
+    return _jsx(DirectionProvider, { direction: resolvedDirection, children: _jsxs(ScrollAreaPrimitive.Root, { ...props, ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), className: classes('inkra-scroll-area', className), "data-type": type, dir: dir, 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: "quiet" }) })] }), _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: "quiet" }) })] }), _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 });

package/dist/select/MultipleSelect.js

@@ -15,13 +15,14 @@ export function MultipleSelectRoot({ value, defaultValue = emptyValues, onValueC
     const isControlled = value !== undefined;
     const contentEvents = useRef({});
     const labels = useMemo(() => new Map(items?.map(item => [item.value, item.label])), [items]);
-    const change = (next) => {
+    const change = useCallback((next) => {
         if (disabled || readOnly)
             return;
-        if (value === undefined)
+        if (!isControlled)
             setUncontrolled(next);
         onValueChange?.(next);
-    };
+    }, [disabled, readOnly, isControlled, onValueChange]);
+    const context = useMemo(() => ({ values, labels, disabled, readOnly, change, triggerRef, contentEvents }), [values, labels, disabled, readOnly, change]);
     useEffect(() => {
         if (isControlled)
             return;
@@ -37,7 +38,7 @@ export function MultipleSelectRoot({ value, defaultValue = emptyValues, onValueC
         form?.addEventListener('reset', reset);
         return () => { clearTimeout(timer); form?.removeEventListener('reset', reset); };
     }, [isControlled, props.form]);
-    return (_jsx(MultipleSelectContext.Provider, { value: { values, labels, disabled, readOnly, change, triggerRef, contentEvents }, children: _jsx(DirectionProvider, { direction: dir, children: _jsx(BaseSelect.Root, { ...props, multiple: true, disabled: disabled, readOnly: readOnly, open: readOnly ? false : props.open, value: values, onValueChange: change, items: items, inputRef: inputRef, onOpenChange: (open, details) => {
+    return (_jsx(MultipleSelectContext.Provider, { value: context, children: _jsx(DirectionProvider, { direction: dir, children: _jsx(BaseSelect.Root, { ...props, multiple: true, disabled: disabled, readOnly: readOnly, open: readOnly ? false : props.open, value: values, onValueChange: change, items: items, inputRef: inputRef, onOpenChange: (open, details) => {
                     if (readOnly && open)
                         details.cancel();
                     if (details.reason === 'outside-press' || details.reason === 'cancel-open') {