@inkra/react 0.1.0 → 0.2.0

package/dist/date-picker/index.d.ts

@@ -0,0 +1,50 @@
+import type { AriaAttributes, CSSProperties, FocusEventHandler } from 'react';
+import type { DateRange } from 'react-day-picker';
+import type { CalendarProps } from '../calendar/index.js';
+export type DatePickerMode = 'single' | 'range';
+export type DatePickerRange = DateRange;
+export type DatePickerValue = Date | DatePickerRange | undefined;
+export type DatePickerChangeReason = 'select' | 'clear';
+export interface DatePickerChangeDetails {
+    reason: DatePickerChangeReason;
+}
+export type DatePickerCalendarProps = Omit<CalendarProps, 'appearance' | 'mode' | 'onSelect' | 'required' | 'selected'>;
+export interface DatePickerProps {
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-label'?: string;
+    autoFocus?: boolean;
+    className?: string;
+    dir?: 'ltr' | 'rtl';
+    form?: string;
+    id?: string;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
+    onFocus?: FocusEventHandler<HTMLButtonElement>;
+    required?: boolean;
+    style?: CSSProperties;
+    mode?: DatePickerMode;
+    value?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    onValueChange?: (value: DatePickerValue, details: DatePickerChangeDetails) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    locale?: string;
+    placeholder?: string;
+    rangeSeparator?: string;
+    endName?: string;
+    clearable?: boolean;
+    clearButtonLabel?: string;
+    calendarLabel?: string;
+    openButtonLabel?: string;
+    fullWidth?: boolean;
+    calendarProps?: DatePickerCalendarProps;
+}
+export declare function datePickerLocalValue(value: Date | undefined): string;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DatePickerAriaInvalid = AriaAttributes['aria-invalid'];

package/dist/date-picker/index.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { Calendar } from '../calendar/index.js';
+import { mergeAriaIds, useFieldContext } from '../form/context.js';
+import { useResolvedControlProps } from '../form/controlProps.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { Popover } from '../overlay/Popover.js';
+const calendarPaths = [
+    { d: 'M8 2v4' },
+    { d: 'M16 2v4' },
+    { d: 'M3 10h18' },
+    { d: 'M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2Z' },
+];
+const clearPaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
+const classes = (...values) => values.filter(Boolean).join(' ');
+function validDate(value) {
+    return value instanceof Date && Number.isFinite(value.getTime());
+}
+function isRange(value) {
+    return value != null && !validDate(value) && ('from' in value || 'to' in value);
+}
+export function datePickerLocalValue(value) {
+    if (!validDate(value))
+        return '';
+    return [
+        String(value.getFullYear()).padStart(4, '0'),
+        String(value.getMonth() + 1).padStart(2, '0'),
+        String(value.getDate()).padStart(2, '0'),
+    ].join('-');
+}
+function initialForMode(mode, value) {
+    if (mode === 'single')
+        return validDate(value) ? value : undefined;
+    return isRange(value) ? value : undefined;
+}
+function defaultCopy(locale) {
+    const chinese = locale.toLowerCase().startsWith('zh');
+    return {
+        calendar: chinese ? '选择日期' : 'Choose date',
+        clear: chinese ? '清空日期' : 'Clear date',
+        next: chinese ? '下个月' : 'Next month',
+        open: chinese ? '打开日期选择器' : 'Open date picker',
+        placeholder: chinese ? '选择日期' : 'Choose a date',
+        previous: chinese ? '上个月' : 'Previous month',
+        rangePlaceholder: chinese ? '选择日期范围' : 'Choose a date range',
+        selected: chinese ? '已选择' : 'selected',
+        today: chinese ? '今天' : 'today',
+    };
+}
+export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef) {
+    const valueControlled = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const openControlled = Object.prototype.hasOwnProperty.call(allProps, 'open');
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, autoFocus, calendarLabel, calendarProps = {}, className, clearable = true, clearButtonLabel, defaultOpen = false, defaultValue, dir, disabled = false, endName, form, fullWidth = true, id, invalid = false, locale = 'en-US', mode = 'single', name, onBlur, onFocus, onOpenChange, onValueChange, open, openButtonLabel, placeholder, rangeSeparator = ' – ', readOnly = false, required = false, style, value, } = allProps;
+    const generatedId = useId();
+    const field = useFieldContext();
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => initialForMode(mode, defaultValue));
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [constraintInvalid, setConstraintInvalid] = useState(false);
+    useImperativeHandle(forwardedRef, () => triggerRef.current);
+    const state = useResolvedControlProps({
+        id,
+        required,
+        disabled,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage,
+        'aria-invalid': ariaInvalid,
+    });
+    const copy = defaultCopy(locale);
+    const currentValue = initialForMode(mode, valueControlled ? value : uncontrolledValue);
+    const currentOpen = openControlled ? Boolean(open) : uncontrolledOpen;
+    const singleValue = validDate(currentValue) ? currentValue : undefined;
+    const rangeValue = isRange(currentValue) ? currentValue : undefined;
+    const firstDate = singleValue ?? rangeValue?.from ?? rangeValue?.to;
+    const hasValue = Boolean(singleValue || rangeValue?.from || rangeValue?.to);
+    const formatter = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }), [locale]);
+    const fullFormatter = useMemo(() => new Intl.DateTimeFormat(locale, {
+        day: 'numeric', month: 'long', weekday: 'long', year: 'numeric',
+    }), [locale]);
+    const captionFormatter = useMemo(() => new Intl.DateTimeFormat(locale, {
+        month: 'long', year: 'numeric',
+    }), [locale]);
+    const weekdayFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'short' }), [locale]);
+    const displayValue = singleValue
+        ? formatter.format(singleValue)
+        : rangeValue?.from
+            ? `${formatter.format(rangeValue.from)}${rangeSeparator}${rangeValue.to ? formatter.format(rangeValue.to) : '…'}`
+            : placeholder ?? (mode === 'range' ? copy.rangePlaceholder : copy.placeholder);
+    const triggerId = state.id ?? `inkra-date-picker-${generatedId}`;
+    const accessibleValueId = field ? `${triggerId}-value` : undefined;
+    const updateOpen = (nextOpen) => {
+        if (!openControlled)
+            setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    };
+    const commit = (nextValue, reason) => {
+        if (!valueControlled)
+            setUncontrolledValue(initialForMode(mode, nextValue));
+        setConstraintInvalid(false);
+        onValueChange?.(initialForMode(mode, nextValue), { reason });
+    };
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        if (!trigger || valueControlled)
+            return;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (!event.defaultPrevented) {
+                    setUncontrolledValue(initialForMode(mode, defaultValue));
+                    setUncontrolledOpen(false);
+                    setConstraintInvalid(false);
+                }
+            }, 0);
+        };
+        trigger.form?.addEventListener('reset', reset);
+        return () => {
+            clearTimeout(timer);
+            trigger.form?.removeEventListener('reset', reset);
+        };
+    }, [defaultValue, form, mode, valueControlled]);
+    const { disabled: disabledDays, formatters, labels, defaultMonth, ...restCalendarProps } = calendarProps;
+    const localizedFormatters = {
+        formatCaption: date => captionFormatter.format(date),
+        formatDay: date => new Intl.NumberFormat(locale).format(date.getDate()),
+        formatWeekdayName: date => weekdayFormatter.format(date),
+        ...formatters,
+    };
+    const localizedLabels = {
+        labelDayButton: (date, modifiers) => [
+            fullFormatter.format(date),
+            modifiers.today ? copy.today : '',
+            modifiers.selected ? copy.selected : '',
+        ].filter(Boolean).join(', '),
+        labelNext: () => copy.next,
+        labelPrevious: () => copy.previous,
+        ...labels,
+    };
+    const sharedCalendarProps = {
+        ...restCalendarProps,
+        appearance: 'picker',
+        defaultMonth: defaultMonth ?? firstDate,
+        disabled: state.readOnly ? true : disabledDays,
+        formatters: localizedFormatters,
+        labels: localizedLabels,
+    };
+    return (_jsxs(Popover.Root, { open: currentOpen, onOpenChange: updateOpen, children: [_jsxs("span", { className: classes('inkra-date-picker', className), "data-disabled": state.disabled || undefined, "data-full-width": fullWidth || undefined, "data-has-value": hasValue || undefined, "data-invalid": state.invalid || constraintInvalid || undefined, "data-mode": mode, "data-readonly": state.readOnly || undefined, dir: dir, style: style, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { "aria-describedby": mergeAriaIds(state.describedBy, accessibleValueId), "aria-errormessage": state.errorMessage, "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-label": ariaLabel ?? (openButtonLabel ? `${openButtonLabel}: ${displayValue}` : undefined), "aria-required": state.required || undefined, autoFocus: autoFocus, className: "inkra-date-picker__trigger", disabled: state.disabled, form: form, fullWidth: fullWidth, id: triggerId, onBlur: onBlur, onFocus: onFocus, ref: triggerRef, startIcon: _jsx(PencilIcon, { paths: calendarPaths, sourceSize: 24, size: 22 }), variant: "outline", children: _jsx("span", { className: "inkra-date-picker__value", "data-placeholder": !hasValue || undefined, children: displayValue }) }) }), accessibleValueId ? _jsx("span", { className: "inkra-date-picker__accessible-value", id: accessibleValueId, children: displayValue }) : null, clearable ? (_jsx(Button, { "aria-hidden": !hasValue || undefined, "aria-label": clearButtonLabel ?? copy.clear, className: "inkra-date-picker__clear", disabled: !hasValue || state.disabled || state.readOnly, onClick: () => {
+                            commit(undefined, 'clear');
+                            updateOpen(false);
+                            triggerRef.current?.focus({ preventScroll: true });
+                        }, size: "icon", tabIndex: hasValue ? 0 : -1, variant: "ghost", children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) })) : null, name || state.required ? (mode === 'range' ? _jsxs(_Fragment, { children: [_jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.from) }), _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: endName ?? (name ? `${name}End` : undefined), onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.to) })] }) : _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(singleValue) })) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "start", "aria-label": calendarLabel ?? copy.calendar, className: "inkra-date-picker__popover", collisionPadding: 12, onOpenAutoFocus: event => {
+                        event.preventDefault();
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(() => {
+                                const content = contentRef.current;
+                                const selected = content?.querySelector('.rdp-selected .rdp-day_button:not(:disabled)');
+                                const today = content?.querySelector('.rdp-today .rdp-day_button:not(:disabled)');
+                                const available = content?.querySelector('.rdp-day_button:not(:disabled)');
+                                (selected ?? today ?? available ?? content)?.focus({ preventScroll: true });
+                            });
+                        });
+                    }, ref: contentRef, sideOffset: 8, children: [_jsx(PencilLine, { className: "inkra-date-picker__heading-line", seed: `date-picker-${generatedId}-line` }), mode === 'single' ? (_jsx(Calendar, { ...sharedCalendarProps, mode: "single", selected: singleValue, onSelect: nextValue => {
+                                if (state.readOnly)
+                                    return;
+                                commit(nextValue, 'select');
+                                updateOpen(false);
+                            } })) : (_jsx(Calendar, { ...sharedCalendarProps, excludeDisabled: true, mode: "range", selected: rangeValue, onSelect: nextValue => {
+                                if (state.readOnly)
+                                    return;
+                                commit(nextValue, 'select');
+                                if (nextValue?.from && nextValue.to)
+                                    updateOpen(false);
+                            } }))] }) })] }));
+});

package/dist/display/ProgressRing.d.ts

@@ -0,0 +1,6 @@
+export declare function ProgressRing({ diameter, thickness, percent, seed }: {
+    diameter: number;
+    thickness: number;
+    percent: number | null;
+    seed: string | number;
+}): import("react").JSX.Element;

package/dist/display/ProgressRing.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr } from '../internal/cache.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
+import { pencilStroke } from '../internal/stroke.js';
+const ringCache = new BoundedCache(48, 8 * 1024 * 1024);
+function smoothstep(value) {
+    return value * value * (3 - 2 * value);
+}
+function arcClip(diameter, radius, thickness, percent) {
+    const progress = Math.max(0, Math.min(100, percent ?? 28));
+    if (progress === 0)
+        return 'inset(50%)';
+    if (progress === 100)
+        return 'none';
+    const radians = progress / 100 * Math.PI * 2;
+    const arcLength = radius * radians;
+    const taperLength = Math.min(arcLength * 0.28, Math.max(7, thickness * 2.4));
+    const steps = Math.max(8, Math.ceil(progress * 0.9));
+    const outer = [];
+    const inner = [];
+    let start;
+    let end;
+    const point = (angle, distance) => `${((diameter / 2 + Math.cos(angle) * distance) / diameter * 100).toFixed(3)}% ${((diameter / 2 + Math.sin(angle) * distance) / diameter * 100).toFixed(3)}%`;
+    for (let index = 0; index <= steps; index += 1) {
+        const ratio = index / steps;
+        const distanceFromEnd = Math.min(ratio, 1 - ratio) * arcLength;
+        const taper = 0.12 + smoothstep(Math.min(1, distanceFromEnd / taperLength)) * 0.88;
+        // Leave enough room for the global stroke-width token while narrowing only
+        // the exposed ends. The pencil texture itself still determines the edge.
+        const halfWidth = thickness * 1.55 * taper;
+        const angle = ratio * radians - Math.PI / 2;
+        if (index === 0)
+            start = { angle, halfWidth };
+        if (index === steps)
+            end = { angle, halfWidth };
+        outer.push(point(angle, radius + halfWidth));
+        inner.push(point(angle, Math.max(0, radius - halfWidth)));
+    }
+    const endCap = Array.from({ length: 5 }, (_, index) => {
+        const capAngle = Math.PI / 2 - index / 4 * Math.PI;
+        const tangent = end.angle + Math.PI / 2;
+        const x = diameter / 2 + Math.cos(end.angle) * radius
+            + Math.cos(end.angle) * Math.sin(capAngle) * end.halfWidth
+            + Math.cos(tangent) * Math.cos(capAngle) * end.halfWidth;
+        const y = diameter / 2 + Math.sin(end.angle) * radius
+            + Math.sin(end.angle) * Math.sin(capAngle) * end.halfWidth
+            + Math.sin(tangent) * Math.cos(capAngle) * end.halfWidth;
+        return `${(x / diameter * 100).toFixed(3)}% ${(y / diameter * 100).toFixed(3)}%`;
+    });
+    const startCap = Array.from({ length: 5 }, (_, index) => {
+        const capAngle = -Math.PI / 2 + index / 4 * Math.PI;
+        const tangent = start.angle + Math.PI / 2;
+        const x = diameter / 2 + Math.cos(start.angle) * radius
+            + Math.cos(start.angle) * Math.sin(capAngle) * start.halfWidth
+            - Math.cos(tangent) * Math.cos(capAngle) * start.halfWidth;
+        const y = diameter / 2 + Math.sin(start.angle) * radius
+            + Math.sin(start.angle) * Math.sin(capAngle) * start.halfWidth
+            - Math.sin(tangent) * Math.cos(capAngle) * start.halfWidth;
+        return `${(x / diameter * 100).toFixed(3)}% ${(y / diameter * 100).toFixed(3)}%`;
+    });
+    return `polygon(${outer.join(',')},${endCap.join(',')},${inner.reverse().join(',')},${startCap.join(',')})`;
+}
+export function ProgressRing({ diameter, thickness, percent, seed }) {
+    const canvasRef = useRef(null);
+    const radius = diameter / 2 - thickness - 4;
+    const clipPath = useMemo(() => arcClip(diameter, radius, thickness, percent), [diameter, percent, radius, thickness]);
+    // Paint a stable full ring once; CSS reveals the current arc without repainting its texture.
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        let lastPaint = '';
+        const paint = () => {
+            try {
+                if (!CSS.supports('clip-path', 'polygon(0 0, 100% 0, 100% 100%)'))
+                    return;
+                const width = canvas.clientWidth;
+                if (!width)
+                    return;
+                const style = getComputedStyle(canvas);
+                const weight = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+                const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
+                const dpr = effectiveDpr(2);
+                const key = JSON.stringify([PENCIL_RENDERER_VERSION, diameter, thickness, width, dpr, style.color, weight, roughness, seed]);
+                if (key === lastPaint && canvasIsUsable(canvas))
+                    return;
+                let image = ringCache.get(key);
+                if (image && !canvasIsUsable(image)) {
+                    ringCache.delete(key);
+                    image = undefined;
+                }
+                if (!image) {
+                    image = document.createElement('canvas');
+                    image.width = image.height = Math.ceil(width * dpr);
+                    const context = image.getContext('2d');
+                    if (!context)
+                        throw new Error('Canvas unavailable');
+                    context.scale(image.width / diameter, image.height / diameter);
+                    const points = Array.from({ length: 361 }, (_, index) => {
+                        const angle = index * Math.PI / 180 - Math.PI / 2;
+                        return [diameter / 2 + Math.cos(angle) * radius, diameter / 2 + Math.sin(angle) * radius];
+                    });
+                    pencilStroke(context, points, style.color, thickness * weight / 2.15, seedToNumber(seed), roughness * 0.55, 2, true, { variation: 0.86, breaks: 0.32, grain: 0.84, gain: 1.35, step: 0.55, edgeGrain: true });
+                    ringCache.set(key, image, canvasByteCost(image));
+                }
+                const context = canvas.getContext('2d');
+                if (!context || context.isContextLost?.())
+                    throw new Error('Canvas unavailable');
+                canvas.width = image.width;
+                canvas.height = image.height;
+                context.drawImage(image, 0, 0);
+                canvas.dataset.ready = 'true';
+                lastPaint = key;
+            }
+            catch {
+                delete canvas.dataset.ready;
+                lastPaint = '';
+            }
+        };
+        const lost = () => { delete canvas.dataset.ready; lastPaint = ''; };
+        canvas.addEventListener('contextlost', lost);
+        const observer = new MutationObserver(paint);
+        for (let node = canvas; node; node = node.parentElement) {
+            observer.observe(node, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
+        }
+        const resize = new ResizeObserver(paint);
+        resize.observe(canvas);
+        const scheme = matchMedia('(prefers-color-scheme: dark)');
+        scheme.addEventListener('change', paint);
+        window.addEventListener('resize', paint);
+        const stopRecovery = observeCanvasRecovery(paint);
+        paint();
+        return () => {
+            observer.disconnect();
+            resize.disconnect();
+            scheme.removeEventListener('change', paint);
+            window.removeEventListener('resize', paint);
+            canvas.removeEventListener('contextlost', lost);
+            stopRecovery();
+        };
+    }, [diameter, radius, seed, thickness]);
+    return _jsx("span", { className: "inkra-progress__ring", "aria-hidden": "true", children: _jsx("span", { className: "inkra-progress__ring-rotation", children: _jsxs("span", { className: "inkra-progress__ring-direction", children: [_jsx("canvas", { ref: canvasRef, className: "inkra-progress__ring-ink", style: { clipPath } }), _jsx("svg", { className: "inkra-progress__ring-fallback", viewBox: `0 0 ${diameter} ${diameter}`, focusable: "false", children: _jsx("circle", { cx: diameter / 2, cy: diameter / 2, r: radius, fill: "none", stroke: "currentColor", strokeWidth: thickness, pathLength: 100, strokeDasharray: "100", strokeDashoffset: 100 - (percent ?? 28), strokeLinecap: "round", transform: `rotate(-90 ${diameter / 2} ${diameter / 2})` }) })] }) }) });
+}

package/dist/display/index.d.ts

@@ -1,4 +1,6 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import { type ProgressPartialSegment, type ProgressThreshold } from '../segmented-progress/SegmentedProgress.js';
+export type { ProgressPartialSegment, ProgressThreshold } from '../segmented-progress/SegmentedProgress.js';
 export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
@@ -22,11 +24,36 @@ export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
     radius?: number;
 }
 export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ProgressRenderState {
+    value: number | null;
+    max: number;
+    percent: number | null;
+}
+export type ProgressContentPosition = 'center' | 'top' | 'bottom' | 'start' | 'end';
 export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     value: number | null;
     max?: number;
     label?: ReactNode;
     seed?: string | number;
     size?: 'sm' | 'md' | 'lg';
+    shape?: 'linear' | 'circular' | 'segmented';
+    /** Circular diameter in CSS pixels, clamped to 32-512. */
+    diameter?: number;
+    /** Circular stroke width, clamped to 1-diameter/8. */
+    thickness?: number;
+    /** Segmented cell count, clamped to 1-64. */
+    segmentCount?: number;
+    /** Segmented gap in CSS pixels, clamped to 0-24. */
+    segmentGap?: number;
+    /** How the active partial cell is represented. */
+    partialSegment?: ProgressPartialSegment;
+    /** Pigment ranges expressed in the same value units as max. */
+    thresholds?: readonly ProgressThreshold[];
+    /** Per-cell pigment overrides by zero-based segment index. */
+    segmentColors?: readonly string[];
+    /** Defaults to center for circular, end otherwise. Center maps to end for non-circular shapes. */
+    contentPosition?: ProgressContentPosition;
+    /** Non-interactive content; render state contains normalized values. */
+    children?: ReactNode | ((state: ProgressRenderState) => ReactNode);
 }
 export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/display/index.js

@@ -3,6 +3,8 @@ import { forwardRef, useId } from 'react';
 import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
+import { SegmentedProgress, } from '../segmented-progress/SegmentedProgress.js';
+import { ProgressRing } from './ProgressRing.js';
 const badgeTokens = {
     neutral: { foreground: 'ink-muted', pigment: 'surface-muted' },
     accent: { foreground: 'accent-strong', pigment: 'accent-soft' },
@@ -41,7 +43,7 @@ function normalizeValue(value, max) {
         return 0;
     return Math.min(max, Math.max(0, value));
 }
-export const Progress = forwardRef(function Progress({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, label, max, seed, style, value, size = 'md', ...props }, ref) {
+export const Progress = forwardRef(function Progress({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, label, max, seed, style, value, size = 'md', shape = 'linear', diameter, thickness, segmentCount, segmentGap, partialSegment = 'fractional', thresholds, segmentColors, contentPosition, children, ...props }, ref) {
     const generatedId = useId();
     const labelId = `inkra-progress-${generatedId}-label`;
     const resolvedMax = normalizeMax(max);
@@ -51,9 +53,23 @@ export const Progress = forwardRef(function Progress({ 'aria-label': ariaLabel,
         ? labelId
         : ariaLabelledBy;
     const resolvedSeed = seed ?? `inkra-progress-${generatedId}`;
+    const resolvedDiameter = typeof diameter === 'number' && Number.isFinite(diameter)
+        ? Math.max(32, Math.min(512, diameter)) : { sm: 64, md: 96, lg: 128 }[size];
+    const resolvedThickness = Math.min(resolvedDiameter / 8, Math.max(1, typeof thickness === 'number' && Number.isFinite(thickness) ? thickness : { sm: 4, md: 6, lg: 8 }[size]));
+    const resolvedSegmentCount = typeof segmentCount === 'number' && Number.isFinite(segmentCount)
+        ? Math.max(1, Math.min(64, Math.round(segmentCount))) : 10;
+    const resolvedSegmentGap = typeof segmentGap === 'number' && Number.isFinite(segmentGap)
+        ? Math.max(0, Math.min(24, segmentGap)) : { sm: 2, md: 3, lg: 4 }[size];
+    const position = contentPosition ?? (shape === 'circular' ? 'center' : 'end');
+    const content = typeof children === 'function' ? children({ value: resolvedValue, max: resolvedMax, percent }) : children;
     const resolvedStyle = {
         ...style,
         '--inkra-progress-value': `${percent ?? 36}%`,
+        ...(shape === 'circular' ? {
+            '--inkra-progress-angle': `${(percent ?? 28) * 3.6}deg`,
+            '--inkra-progress-diameter': `${resolvedDiameter}px`,
+            '--inkra-progress-content-inset': `${(resolvedThickness * 2 + 8) / resolvedDiameter * 100}%`,
+        } : {}),
     };
-    return (_jsxs("div", { ...props, "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, "aria-valuemax": resolvedMax, "aria-valuemin": 0, "aria-valuenow": resolvedValue ?? undefined, className: ['inkra-progress', className].filter(Boolean).join(' '), "data-state": resolvedValue === null ? 'indeterminate' : 'determinate', "data-value": resolvedValue ?? undefined, "data-size": size, ref: ref, role: "progressbar", style: resolvedStyle, children: [label == null ? null : (typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-progress__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-progress__label", id: labelId, children: label })), _jsxs("span", { "aria-hidden": "true", className: "inkra-progress__track", children: [_jsx(PencilSurface, { as: "span", className: "inkra-progress__outline", radius: 6, seed: `${resolvedSeed}-outline`, variant: "outline" }), _jsx("span", { className: "inkra-progress__fill-clip", children: _jsx(PencilSurface, { as: "span", className: "inkra-progress__fill", radius: 6, seed: `${resolvedSeed}-fill`, variant: "selection" }) })] })] }));
+    return (_jsxs("div", { ...props, "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, "aria-valuemax": resolvedMax, "aria-valuemin": 0, "aria-valuenow": resolvedValue ?? undefined, className: ['inkra-progress', className].filter(Boolean).join(' '), "data-state": resolvedValue === null ? 'indeterminate' : 'determinate', "data-value": resolvedValue ?? undefined, "data-size": size, "data-shape": shape, ref: ref, role: "progressbar", style: resolvedStyle, children: [label == null ? null : (typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-progress__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-progress__label", id: labelId, children: label })), _jsxs("div", { className: "inkra-progress__body", "data-content-position": content == null ? undefined : shape !== 'circular' && position === 'center' ? 'end' : position, children: [shape === 'circular' ? (_jsx(ProgressRing, { diameter: resolvedDiameter, thickness: resolvedThickness, percent: percent, seed: `${resolvedSeed}-ring` })) : shape === 'segmented' ? (_jsx(SegmentedProgress, { count: resolvedSegmentCount, gap: resolvedSegmentGap, max: resolvedMax, partialSegment: partialSegment, percent: percent, seed: `${resolvedSeed}-segments`, segmentColors: segmentColors, thresholds: thresholds })) : (_jsxs("span", { "aria-hidden": "true", className: "inkra-progress__track", children: [_jsx(PencilSurface, { as: "span", className: "inkra-progress__outline", radius: 6, seed: `${resolvedSeed}-outline`, variant: "outline" }), _jsx("span", { className: "inkra-progress__fill-clip", children: _jsx(PencilSurface, { as: "span", className: "inkra-progress__fill", radius: 6, seed: `${resolvedSeed}-fill`, variant: "selection" }) })] })), content != null && _jsx("div", { className: "inkra-progress__content", children: typeof content === 'string' || typeof content === 'number' ? _jsx(PencilText, { children: String(content) }) : content })] })] }));
 });

package/dist/dockable-panel/index.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { DockablePanelPosition, DockablePanelSnapEdge } from './model.js';
+export type { DockablePanelBounds, DockablePanelPlacement, DockablePanelPosition, DockablePanelSize, DockablePanelSnapEdge, } from './model.js';
+export type DockablePanelPositionReason = 'drag' | 'keyboard' | 'reset' | 'viewport';
+export interface DockablePanelPositionChangeDetails {
+    reason: DockablePanelPositionReason;
+    snappedEdges: readonly DockablePanelSnapEdge[];
+}
+export interface DockablePanelLabels {
+    move?: string;
+    collapse?: string;
+    expand?: string;
+    reset?: string;
+    keyboardInstructions?: string;
+}
+export interface DockablePanelWorkspaceProps extends HTMLAttributes<HTMLDivElement> {
+    activeId?: string | null;
+    defaultActiveId?: string | null;
+    onActiveChange?: (id: string) => void;
+    baseZIndex?: number;
+    boundaryPadding?: number;
+    snapThreshold?: number;
+    titleBarVisibility?: number;
+}
+export declare const DockablePanelWorkspace: import("react").ForwardRefExoticComponent<DockablePanelWorkspaceProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DockablePanelProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'title'> {
+    id: string;
+    title: ReactNode;
+    position?: DockablePanelPosition;
+    defaultPosition?: DockablePanelPosition;
+    onPositionChange?: (position: DockablePanelPosition, details: DockablePanelPositionChangeDetails) => void;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    collapsible?: boolean;
+    movable?: boolean;
+    keyboardStep?: number;
+    headerActions?: ReactNode;
+    labels?: DockablePanelLabels;
+}
+export declare const DockablePanel: import("react").ForwardRefExoticComponent<DockablePanelProps & import("react").RefAttributes<HTMLElement>>;