@inkra/react 0.1.0 → 0.2.0

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 {};

package/dist/segmented-progress/SegmentedProgress.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PencilSurface } from '../PencilSurface.js';
+function segmentFill(index, count, percent, policy) {
+    if (percent === null)
+        return 1;
+    const raw = percent / 100 * count - index;
+    if (policy === 'complete')
+        return raw >= 1 ? 1 : 0;
+    if (policy === 'next')
+        return raw > 0 ? 1 : 0;
+    return Math.max(0, Math.min(1, raw));
+}
+function thresholdColor(index, count, max, thresholds) {
+    if (!thresholds?.length)
+        return undefined;
+    const segmentValue = index / count * max;
+    let color;
+    for (const threshold of thresholds) {
+        if (!Number.isFinite(threshold.value) || !threshold.color || threshold.value > segmentValue)
+            continue;
+        color = threshold.color;
+    }
+    return color;
+}
+export function SegmentedProgress({ count, gap, max, partialSegment, percent, seed, segmentColors, thresholds, }) {
+    const normalizedThresholds = thresholds
+        ?.filter(threshold => Number.isFinite(threshold.value) && threshold.color)
+        .map(threshold => ({ ...threshold, value: Math.max(0, Math.min(max, threshold.value)) }))
+        .sort((left, right) => left.value - right.value);
+    return (_jsx("span", { "aria-hidden": "true", className: "inkra-progress__segments", style: {
+            '--inkra-progress-segment-count': count,
+            '--inkra-progress-segment-gap': `${gap}px`,
+        }, children: Array.from({ length: count }, (_, index) => {
+            const fill = segmentFill(index, count, percent, partialSegment);
+            const color = segmentColors?.[index] || thresholdColor(index, count, max, normalizedThresholds);
+            const style = {
+                '--inkra-progress-segment-fill': `${fill * 100}%`,
+                ...(color ? { '--inkra-selection-pigment': color } : {}),
+            };
+            return (_jsxs("span", { className: "inkra-progress__segment", "data-fill": fill === 0 ? 'empty' : fill === 1 ? 'full' : 'partial', children: [_jsx(PencilSurface, { as: "span", className: "inkra-progress__segment-outline", radius: 3, seed: `${seed}-segment-${index}-outline`, variant: "outline" }), _jsx("span", { className: "inkra-progress__segment-fill-clip", style: style, children: _jsx(PencilSurface, { as: "span", className: "inkra-progress__segment-fill", radius: 3, seed: `${seed}-segment-${index}-fill`, variant: "selection" }) })] }, index));
+        }) }));
+}

package/dist/slider/index.js

@@ -40,6 +40,6 @@ export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'ari
                 const thumbLabel = thumbLabels?.[index];
                 const labelledBy = thumbLabel ? undefined : ariaLabelledBy;
                 const label = thumbLabel ?? (ariaLabel ? `${ariaLabel}${values.length > 1 ? ` ${index + 1}` : ''}` : labelledBy ? undefined : `Value${values.length > 1 ? ` ${index + 1}` : ''}`);
-                return _jsx(SliderPrimitive.Thumb, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }, index);
+                return _jsx(SliderPrimitive.Thumb, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuenow": current, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }, index);
             })] });
 });

package/dist/slot/index.d.ts

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type SlotSize = 'sm' | 'md' | 'lg';
+interface SlotSharedProps {
+    children?: ReactNode;
+    /** Shows emptyContent instead of children while preserving the slot geometry. */
+    empty?: boolean;
+    emptyContent?: ReactNode;
+    selected?: boolean;
+    size?: SlotSize;
+    count?: number;
+    /** Replaces the default Badge while keeping the count anchored to the slot. */
+    renderCount?: (count: number) => ReactNode;
+    seed?: string | number;
+}
+export interface StaticSlotProps extends SlotSharedProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    interactive?: false;
+    disabled?: boolean;
+}
+export interface InteractiveSlotProps extends SlotSharedProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    interactive: true;
+}
+export type SlotProps = StaticSlotProps | InteractiveSlotProps;
+export declare const Slot: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+export {};

package/dist/slot/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Badge } from '../display/index.js';
+import { PencilSurface } from '../PencilSurface.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+export const Slot = forwardRef(function Slot({ children, className, count, disabled = false, empty = false, emptyContent, interactive = false, renderCount, seed, selected = false, size = 'md', ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-slot-${generatedId}`;
+    const content = empty
+        ? (emptyContent ?? _jsx("span", { className: "inkra-slot__empty-mark", "aria-hidden": "true", children: "+" }))
+        : children;
+    const countContent = count == null
+        ? null
+        : renderCount?.(count) ?? _jsx(Badge, { size: "sm", "aria-label": `${count}`, children: count });
+    const commonProps = {
+        ...props,
+        className: classes('inkra-slot', className),
+        'data-disabled': disabled || undefined,
+        'data-empty': empty || undefined,
+        'data-interactive': interactive || undefined,
+        'data-selected': selected || undefined,
+        'data-size': size,
+    };
+    const body = _jsxs(_Fragment, { children: [selected && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slot__selected-wash", seed: `${resolvedSeed}-wash`, variant: "selection" }), _jsx("span", { className: "inkra-slot__content", children: content }), selected && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slot__selected-outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" }), countContent != null && _jsx("span", { className: "inkra-slot__count", children: countContent })] });
+    if (interactive) {
+        return _jsx(PencilSurface, { ...commonProps, as: "button", "aria-pressed": selected, disabled: disabled, radius: 8, ref: ref, seed: resolvedSeed, variant: "paper", children: body });
+    }
+    return _jsx(PencilSurface, { ...commonProps, as: "div", "aria-disabled": disabled || undefined, radius: 8, ref: ref, seed: resolvedSeed, variant: "paper", children: body });
+});

package/dist/sortable/index.d.ts

@@ -0,0 +1,50 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { SortableChangeDetails, SortableContainerData, SortableIdentifier } from './model.js';
+export type { SortableChangeDetails, SortableContainerData, SortableIdentifier, SortableLayout, SortableLocation, } from './model.js';
+export interface SortableLabels {
+    handle?: string;
+    screenReaderInstructions?: string;
+    pickedUp?: (item: string, container: string, position: number, count: number) => string;
+    movedOver?: (item: string, container: string, position: number, count: number) => string;
+    dropped?: (item: string, container: string, position: number, count: number) => string;
+    cancelled?: (item: string) => string;
+}
+export interface SortableItemRenderState<Item> {
+    item: Item;
+    id: SortableIdentifier;
+    containerId: SortableIdentifier;
+    index: number;
+    disabled: boolean;
+    isDragging: boolean;
+    isOverlay: boolean;
+}
+export interface SortableHandleRenderState<Item> extends SortableItemRenderState<Item> {
+    props: ButtonHTMLAttributes<HTMLButtonElement> & {
+        ref: (element: HTMLButtonElement | null) => void;
+    };
+}
+export interface SortableContainerRenderState<Item> {
+    container: SortableContainerData<Item>;
+    isOver: boolean;
+    itemCount: number;
+}
+export interface SortableProps<Item> {
+    containers: readonly SortableContainerData<Item>[];
+    getItemId: (item: Item) => SortableIdentifier;
+    renderItem: (state: SortableItemRenderState<Item>) => ReactNode;
+    onChange: (containers: SortableContainerData<Item>[], details: SortableChangeDetails<Item>) => void;
+    onReorder?: (details: SortableChangeDetails<Item>) => void;
+    onMove?: (details: SortableChangeDetails<Item>) => void;
+    renderContainerHeader?: (state: SortableContainerRenderState<Item>) => ReactNode;
+    renderOverlay?: (state: SortableItemRenderState<Item>) => ReactNode;
+    handle?: boolean | ((state: SortableHandleRenderState<Item>) => ReactNode);
+    isItemDisabled?: (item: Item, container: SortableContainerData<Item>) => boolean;
+    getItemLabel?: (item: Item) => string;
+    getContainerLabel?: (container: SortableContainerData<Item>) => string;
+    labels?: SortableLabels;
+    className?: string;
+    containerClassName?: string;
+    itemClassName?: string;
+    autoScroll?: boolean;
+}
+export declare function Sortable<Item>({ autoScroll, className, containerClassName, containers, getContainerLabel, getItemId, getItemLabel, handle, isItemDisabled, itemClassName, labels: labelsProp, onChange, onMove, onReorder, renderContainerHeader, renderItem, renderOverlay, }: SortableProps<Item>): import("react").JSX.Element;