@inkra/react 0.1.0 → 0.2.0

package/dist/sparkline/model.d.ts

@@ -0,0 +1,16 @@
+export type SparklineDatum = number | null | undefined;
+export type SparklinePoint = {
+    index: number;
+    value: number | null;
+};
+export type SparklineScale = (value: number | {
+    valueOf(): number;
+}) => number;
+export declare function normalizeSparklineData(data: readonly SparklineDatum[]): SparklinePoint[];
+export declare function sparklineDomain(points: readonly SparklinePoint[]): [number, number];
+export declare function createSparklineGeometry(points: readonly SparklinePoint[], width: number, height: number, padding?: number): {
+    x: SparklineScale;
+    y: SparklineScale;
+    linePath: string;
+    areaPath: string;
+};

package/dist/sparkline/model.js

@@ -0,0 +1,28 @@
+import { scaleLinear } from 'd3-scale';
+import { area, line } from 'd3-shape';
+export function normalizeSparklineData(data) {
+    return data.map((value, index) => ({ index, value: typeof value === 'number' && Number.isFinite(value) ? value : null }));
+}
+export function sparklineDomain(points) {
+    const values = points.flatMap(point => point.value === null ? [] : [point.value]);
+    if (values.length === 0)
+        return [0, 1];
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    if (min === max) {
+        const pad = Math.abs(min) * 0.12 || 1;
+        return [min - pad, max + pad];
+    }
+    const pad = (max - min) * 0.08;
+    return [min - pad, max + pad];
+}
+export function createSparklineGeometry(points, width, height, padding = 4) {
+    const innerWidth = Math.max(1, width - padding * 2);
+    const innerHeight = Math.max(1, height - padding * 2);
+    const x = scaleLinear().domain([0, Math.max(1, points.length - 1)]).range([padding, padding + innerWidth]);
+    const y = scaleLinear().domain(sparklineDomain(points)).range([padding + innerHeight, padding]);
+    const defined = (point) => point.value !== null;
+    const linePath = line().defined(defined).x(point => x(point.index)).y(point => y(point.value));
+    const areaPath = area().defined(defined).x(point => x(point.index)).y0(padding + innerHeight).y1(point => y(point.value));
+    return { x, y, linePath: linePath(points) ?? '', areaPath: areaPath(points) ?? '' };
+}

package/dist/steps/index.d.ts

@@ -0,0 +1,16 @@
+import { type OlHTMLAttributes, type ReactNode } from 'react';
+export type StepStatus = 'upcoming' | 'current' | 'complete' | 'error';
+export interface StepItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    status?: StepStatus;
+    disabled?: boolean;
+}
+export interface StepsProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'children'> {
+    current?: number;
+    items: readonly StepItem[];
+    onStepChange?: (index: number, item: StepItem) => void;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Steps: import("react").ForwardRefExoticComponent<StepsProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist/steps/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const markerPaths = {
+    upcoming: [{ d: 'M16 6a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z' }],
+    current: [{ d: 'M16 6a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z' }, { d: 'M16 12a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z', mode: 'wash' }],
+    complete: [{ d: 'M6 17l6 6L27 8' }],
+    error: [{ d: 'M16 6a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM16 10v8M16 22v1' }],
+};
+const copy = (value) => typeof value === 'string' ? _jsx(PencilText, { children: value }) : value;
+function resolvedStatus(item, index, current) {
+    if (item.status)
+        return item.status;
+    if (index < current)
+        return 'complete';
+    if (index === current)
+        return 'current';
+    return 'upcoming';
+}
+export const Steps = forwardRef(function Steps({ 'aria-label': ariaLabel = 'Progress', className, current = 0, items, onStepChange, orientation = 'horizontal', ...props }, ref) {
+    return _jsx("ol", { ...props, ref: ref, "aria-label": ariaLabel, className: ['inkra-steps', className].filter(Boolean).join(' '), "data-orientation": orientation, children: items.map((item, index) => {
+            const status = resolvedStatus(item, index, current);
+            const interactive = onStepChange !== undefined;
+            const content = _jsxs(_Fragment, { children: [status === 'current' && _jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-steps__selection", variant: "selection", seed: `step-${item.id}` }), _jsx("span", { className: "inkra-steps__marker", "aria-hidden": "true", children: _jsx(PencilIcon, { paths: markerPaths[status], size: 28, sourceSize: 32, active: status === 'current' }) }), _jsxs("span", { className: "inkra-steps__copy", children: [_jsx("span", { className: "inkra-steps__title", children: copy(item.title) }), item.description != null && _jsx("span", { className: "inkra-steps__description", children: copy(item.description) })] })] });
+            const shared = {
+                className: 'inkra-steps__control',
+                'aria-current': status === 'current' ? 'step' : undefined,
+                'aria-disabled': item.disabled || undefined,
+            };
+            return _jsxs("li", { className: "inkra-steps__item", "data-status": status, "data-disabled": item.disabled || undefined, children: [interactive
+                        ? _jsx("button", { ...shared, type: "button", disabled: item.disabled, onClick: () => onStepChange(index, item), children: content })
+                        : _jsx("div", { ...shared, children: content }), index < items.length - 1 && _jsx(PencilLine, { className: "inkra-steps__connector", orientation: orientation === 'horizontal' ? 'horizontal' : 'vertical', seed: `step-line-${item.id}` })] }, item.id);
+        }) });
+});