@inkra/react 0.0.0-stage → 0.2.0

package/dist/day-agenda/index.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface AgendaEvent {
+    id: string;
+    title: string;
+    /** Minutes from the selected local day's midnight. Negative/over-1440 values indicate continuation. */
+    startMinute?: number;
+    endMinute?: number;
+    description?: ReactNode;
+    kind?: 'activity' | 'travel' | 'stay';
+    color?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface DayAgendaProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    date: string;
+    events: readonly AgendaEvent[];
+    selectedEvent?: string;
+    onEventSelect?: (event: AgendaEvent) => void;
+    locale?: string;
+    timeZoneLabel?: string;
+    emptyLabel?: string;
+    untimedLabel?: string;
+    showOverview?: boolean;
+    hourCycle?: 'h12' | 'h23';
+    density?: 'compact' | 'comfortable';
+    showDescriptions?: boolean;
+    divided?: boolean;
+    disabled?: boolean;
+    onPreviousDay?: () => void;
+    onNextDay?: () => void;
+    navigationLabels?: {
+        previous: string;
+        next: string;
+    };
+}
+export declare function agendaTime(minute: number, hourCycle?: 'h12' | 'h23', locale?: string): string;
+export declare function agendaInterval(event: AgendaEvent): {
+    start: number;
+    end: number;
+    before: boolean;
+    after: boolean;
+} | null;
+export declare function DayAgenda({ date, events, selectedEvent, onEventSelect, locale, timeZoneLabel, emptyLabel, untimedLabel, showOverview, hourCycle, density, showDescriptions, divided, disabled, onPreviousDay, onNextDay, navigationLabels, className, ...props }: DayAgendaProps): import("react").JSX.Element;

package/dist/day-agenda/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { TravelIcon } from '../internal/travelIcons.js';
+import { Button } from '../Button.js';
+import { createAgendaScale, layoutAgendaCards } from './layout.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilText } from '../PencilText.js';
+export function agendaTime(minute, hourCycle = 'h23', locale = 'en') {
+    const value = Math.max(0, Math.min(1440, Math.floor(minute)));
+    if (hourCycle === 'h12') {
+        const time = new Date(Date.UTC(2000, 0, 1, 0, value));
+        return new Intl.DateTimeFormat(locale, { timeZone: 'UTC', hour: 'numeric', minute: '2-digit', hourCycle }).format(time) + (value === 1440 ? ' +1' : '');
+    }
+    return value === 1440 ? '00:00 +1' : `${String(Math.floor(value / 60)).padStart(2, '0')}:${String(value % 60).padStart(2, '0')}`;
+}
+export function agendaInterval(event) {
+    if (event.startMinute === undefined || !Number.isFinite(event.startMinute))
+        return null;
+    const end = event.endMinute;
+    if (end !== undefined && (!Number.isFinite(end) || end < event.startMinute))
+        return null;
+    if (event.startMinute >= 1440 || (end ?? event.startMinute) < 0 || (end === 0 && event.startMinute < 0))
+        return null;
+    return { start: Math.max(0, event.startMinute), end: Math.min(1440, end ?? event.startMinute), before: event.startMinute < 0, after: (end ?? 0) > 1440 };
+}
+export function DayAgenda({ date, events, selectedEvent, onEventSelect, locale = 'en', timeZoneLabel, emptyLabel = 'No events', untimedLabel = 'Time pending', showOverview = true, hourCycle = 'h23', density = 'comfortable', showDescriptions = true, divided = true, disabled = false, onPreviousDay, onNextDay, navigationLabels = { previous: 'Previous day', next: 'Next day' }, className, ...props }) {
+    const id = useId();
+    const validDate = /^\d{4}-\d{2}-\d{2}$/.test(date) ? new Date(`${date}T12:00:00Z`) : new Date(NaN);
+    const title = Number.isFinite(validDate.getTime()) ? new Intl.DateTimeFormat(locale, { timeZone: 'UTC', month: 'long', day: 'numeric', weekday: 'short' }).format(validDate) : date;
+    const ordered = [...events].sort((a, b) => (agendaInterval(a)?.start ?? Infinity) - (agendaInterval(b)?.start ?? Infinity));
+    const formatTime = (minute) => agendaTime(minute, hourCycle, locale);
+    const timed = ordered.flatMap(event => {
+        const interval = agendaInterval(event);
+        return interval ? [{ ...interval, id: event.id, event }] : [];
+    });
+    const intervals = timed.filter(row => row.end > row.start);
+    const points = timed.filter(row => row.end === row.start);
+    const scale = createAgendaScale(intervals, points.map(row => row.start), density === 'compact');
+    const cards = layoutAgendaCards(timed, scale).sort((a, b) => a.start - b.start);
+    const ticks = Array.from({ length: 25 }, (_, hour) => hour * 60).filter((minute, index, list) => index === 0 || index === 24 || scale.position(minute) - scale.position(list[index - 1]) >= 25);
+    const renderCard = (event, time) => _jsxs(PencilSurface, { variant: "quiet", radius: 6, className: "inkra-agenda__card", "data-selected": selectedEvent === event.id, style: { '--inkra-accent-soft': event.color ?? (event.kind === 'stay' ? '#c8c38f' : event.kind === 'travel' ? '#87bbc0' : '#a7c7ad') }, children: [onEventSelect && _jsx("button", { type: "button", className: "inkra-agenda__hit", disabled: disabled || event.disabled, "aria-label": `${time}, ${event.title}`, "aria-pressed": selectedEvent === event.id, onClick: () => onEventSelect(event) }), _jsxs("div", { className: "inkra-agenda__card-copy", children: [_jsxs("span", { className: "inkra-agenda__card-title", title: event.title, children: [event.icon && _jsx("span", { "aria-hidden": "true", children: event.icon }), _jsx(PencilText, { ellipsis: true, children: event.title })] }), showDescriptions && event.description && _jsx("span", { className: "inkra-agenda__description", children: event.description })] })] });
+    return _jsxs("section", { ...props, "data-density": density, "data-hour-cycle": hourCycle, className: ['inkra-agenda', className].filter(Boolean).join(' '), "aria-labelledby": props['aria-labelledby'] ?? id, children: [_jsxs("header", { className: "inkra-agenda__heading", children: [_jsx(PencilText, { as: "h3", id: id, children: title }), timeZoneLabel && _jsx(PencilText, { children: timeZoneLabel })] }), _jsx(PencilLine, {}), ordered.length === 0 ? _jsx(PencilText, { as: "p", children: emptyLabel }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "inkra-agenda__timeline", "data-overview": showOverview, children: _jsxs("div", { className: "inkra-agenda__scale", style: { height: scale.height + 24 }, children: [ticks.map(minute => _jsxs("div", { className: "inkra-agenda__tick", style: { top: scale.position(minute) + 12 }, children: [_jsx("span", { children: _jsx(PencilText, { children: formatTime(minute) }) }), divided && _jsx(PencilLine, {})] }, minute)), _jsx("ol", { className: "inkra-agenda__lanes", children: cards.map(row => {
+                                        const time = `${row.before ? '\u2190 ' : ''}${formatTime(row.start)}${row.event.endMinute !== undefined ? ` - ${formatTime(row.end)}` : ''}${row.after ? ' \u2192' : ''}`;
+                                        return _jsxs("li", { "data-kind": row.event.kind, style: { top: row.top + 14, height: Math.max(44, row.height - 4), insetInlineStart: `${row.lane / row.lanes * 100}%`, width: `${100 / row.lanes}%` }, children: [renderCard(row.event, time), _jsx("span", { className: "inkra-agenda__accessible-time", children: time })] }, row.id);
+                                    }) })] }) }), ordered.some(event => !agendaInterval(event)) && _jsxs("div", { className: "inkra-agenda__pending", children: [_jsx(PencilText, { children: untimedLabel }), ordered.filter(event => !agendaInterval(event)).map(event => _jsx("div", { children: renderCard(event, untimedLabel) }, event.id))] })] }), (onPreviousDay || onNextDay) && _jsxs("footer", { className: "inkra-agenda__navigation", children: [_jsx(PencilLine, {}), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.previous, title: navigationLabels.previous, disabled: !onPreviousDay, onClick: onPreviousDay, children: _jsx(TravelIcon, { name: "previous" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.next, title: navigationLabels.next, disabled: !onNextDay, onClick: onNextDay, children: _jsx(TravelIcon, { name: "next" }) })] })] });
+}

package/dist/day-agenda/layout.d.ts

@@ -0,0 +1,20 @@
+export interface ScheduleInterval {
+    id: string;
+    start: number;
+    end: number;
+}
+export declare function layoutAgendaIntervals<T extends ScheduleInterval>(intervals: T[]): (T & {
+    lane: number;
+    lanes: number;
+})[];
+export declare function createAgendaScale(intervals: ScheduleInterval[], pointTimes: number[], compact: boolean): {
+    position: (minute: number, edge?: "before" | "after") => number;
+    height: number;
+    rowHeight: number;
+};
+export declare function layoutAgendaCards<T extends ScheduleInterval>(rows: T[], scale: ReturnType<typeof createAgendaScale>): (T & {
+    top: number;
+    height: number;
+    lane: number;
+    lanes: number;
+})[];

package/dist/day-agenda/layout.js

@@ -0,0 +1,60 @@
+export function layoutAgendaIntervals(intervals) {
+    const sorted = [...intervals].sort((a, b) => a.start - b.start || a.id.localeCompare(b.id));
+    const result = [];
+    let group = [], groupEnd = -Infinity, laneEnds = [];
+    const flush = () => { for (const item of group)
+        result.push({ ...item, lanes: laneEnds.length }); group = []; laneEnds = []; };
+    for (const item of sorted) {
+        if (item.start >= groupEnd)
+            flush();
+        let lane = laneEnds.findIndex(end => end <= item.start);
+        if (lane < 0)
+            lane = laneEnds.length;
+        laneEnds[lane] = item.end;
+        group.push({ ...item, lane });
+        groupEnd = Math.max(groupEnd, item.end);
+    }
+    flush();
+    return result;
+}
+export function createAgendaScale(intervals, pointTimes, compact) {
+    const rowHeight = compact ? 56 : 72;
+    const points = new Set(pointTimes);
+    const boundaries = [...new Set([0, 1440, ...pointTimes, ...intervals.flatMap(row => [row.start, row.end])])].sort((a, b) => a - b);
+    const before = new Map(), after = new Map();
+    const segments = [];
+    let height = 0;
+    for (let index = 0; index < boundaries.length; index++) {
+        const time = boundaries[index];
+        before.set(time, height);
+        if (points.has(time))
+            height += rowHeight;
+        after.set(time, height);
+        const next = boundaries[index + 1];
+        if (next === undefined)
+            continue;
+        const occupied = intervals.some(row => row.start < next && row.end > time);
+        const size = Math.max(occupied ? rowHeight : 16, (next - time) / 60 * 32);
+        segments.push({ start: time, end: next, top: height, size });
+        height += size;
+    }
+    const position = (minute, edge = 'before') => {
+        const time = Math.max(0, Math.min(1440, minute));
+        const exact = (edge === 'after' ? after : before).get(time);
+        if (exact !== undefined)
+            return exact;
+        const segment = segments.find(row => time >= row.start && time <= row.end);
+        return segment ? segment.top + (time - segment.start) / (segment.end - segment.start) * segment.size : 0;
+    };
+    return { position, height, rowHeight };
+}
+export function layoutAgendaCards(rows, scale) {
+    // Allocate lanes in the shared pixel scale so a point inside a long event cannot cover it.
+    const positioned = rows.map(row => {
+        const point = row.start === row.end;
+        const top = scale.position(row.start, point ? 'before' : 'after');
+        const height = point ? scale.rowHeight : scale.position(row.end) - top;
+        return { id: row.id, start: top, end: top + height, row, top, height };
+    });
+    return layoutAgendaIntervals(positioned).map(({ row, top, height, lane, lanes }) => ({ ...row, top, height, lane, lanes }));
+}

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

@@ -0,0 +1,59 @@
+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;
+    seed?: string | number;
+    variant?: BadgeVariant;
+    size?: 'sm' | 'md' | 'lg';
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    weight?: number;
+    decorative?: boolean;
+    orientation?: SeparatorOrientation;
+    seed?: string | number;
+}
+export declare const Separator: import("react").ForwardRefExoticComponent<SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    seed?: string | number;
+    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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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' },
+    success: { foreground: 'success-foreground', pigment: 'success-pigment' },
+    warning: { foreground: 'warning-foreground', pigment: 'warning-pigment' },
+    danger: { foreground: 'danger-foreground', pigment: 'danger-pigment' },
+    info: { foreground: 'info-foreground', pigment: 'info-pigment' },
+};
+export const Badge = forwardRef(function Badge({ children, className, seed, style, variant = 'neutral', size = 'md', startIcon, endIcon, ...props }, ref) {
+    const generatedId = useId();
+    const tokens = badgeTokens[variant];
+    const resolvedStyle = {
+        ...style,
+        color: `var(--inkra-${tokens.foreground})`,
+        '--inkra-coral-soft': `var(--inkra-${tokens.pigment})`,
+        '--inkra-border-strong': `var(--inkra-${tokens.foreground})`,
+    };
+    return (_jsxs(PencilSurface, { ...props, as: "span", className: ['inkra-badge', className].filter(Boolean).join(' '), "data-variant": variant, "data-size": size, radius: 6, ref: ref, seed: seed ?? `inkra-badge-${generatedId}`, style: resolvedStyle, variant: "badge", children: [startIcon && _jsx("span", { className: "inkra-badge__icon", "aria-hidden": "true", children: startIcon }), typeof children === 'string' ? (_jsx(PencilText, { seed: `${seed ?? `inkra-badge-${generatedId}`}-label`, children: children })) : children, endIcon && _jsx("span", { className: "inkra-badge__icon", "aria-hidden": "true", children: endIcon })] }));
+});
+export const Separator = forwardRef(function Separator({ className, decorative = false, orientation = 'horizontal', weight = 0.9, seed, ...props }, ref) {
+    const semanticProps = decorative
+        ? { 'aria-hidden': true }
+        : { 'aria-orientation': orientation, role: 'separator' };
+    return (_jsx("div", { ...props, ...semanticProps, className: ['inkra-separator', className].filter(Boolean).join(' '), "data-orientation": orientation, ref: ref, children: _jsx(PencilLine, { className: "inkra-separator__line", orientation: orientation, seed: seed ?? `inkra-separator-${orientation}`, weight: Number.isFinite(weight) ? Math.max(0.3, Math.min(2, weight)) : 0.9 }) }));
+});
+export const Skeleton = forwardRef(function Skeleton({ className, seed = 'inkra-skeleton', radius, ...props }, ref) {
+    return (_jsx(PencilSurface, { ...props, "aria-hidden": "true", as: "div", className: ['inkra-skeleton', className].filter(Boolean).join(' '), ref: ref, seed: seed, radius: radius, variant: "quiet" }));
+});
+function normalizeMax(max) {
+    return typeof max === 'number' && Number.isFinite(max) && max > 0 ? max : 100;
+}
+function normalizeValue(value, max) {
+    if (value === null)
+        return null;
+    if (!Number.isFinite(value))
+        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', 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);
+    const resolvedValue = normalizeValue(value, resolvedMax);
+    const percent = resolvedValue === null ? null : resolvedValue / resolvedMax * 100;
+    const resolvedLabelledBy = ariaLabel == null && ariaLabelledBy == null && label != null
+        ? 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, "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>>;