@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/chart/ChartFrame.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type PointerEvent, type ReactNode } from 'react';
+import { type Classes } from '../utils.js';
+import type { ChartRow, Series } from './chart.js';
+import '../theme.css';
+import './chart.css';
+export type ChartClasses = Classes<'root' | 'frame' | 'svg' | 'grid' | 'tick' | 'area' | 'line' | 'cursor' | 'dot' | 'bar' | 'band' | 'tooltip' | 'tooltipLabel' | 'tooltipRow' | 'tooltipName' | 'tooltipValue' | 'swatch' | 'legend' | 'legendItem'>;
+type FrameProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    rows: ChartRow[];
+    x: string;
+    list: Series[];
+    fmt: (value: unknown) => string;
+    height: number;
+    label: string;
+    hover: number | null;
+    onHover: (index: number | null) => void;
+    onMove: (e: PointerEvent<HTMLDivElement>) => void;
+    tipLeft: number;
+    flip: boolean;
+    classes?: ChartClasses;
+    width: number;
+    onWidth: (width: number) => void;
+    children: ReactNode;
+};
+export declare function ChartFrame({ rows, x, list, fmt, height, label, hover, onHover, onMove, tipLeft, flip, width, onWidth, className, classes, children, ...rest }: FrameProps): import("react").JSX.Element;
+export {};

package/dist/chart/ChartFrame.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// What area and bar charts share: the measured frame, the hover tooltip,
+// the legend and a table of the data for assistive tech. Internal.
+import { useEffect, useRef } from 'react';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './chart.css';
+export function ChartFrame({ rows, x, list, fmt, height, label, hover, onHover, onMove, tipLeft, flip, width, onWidth, className, classes, children, ...rest }) {
+    const part = partsOf('chart', classes);
+    const frame = useRef(null);
+    const latest = useRef(onWidth);
+    useEffect(() => { latest.current = onWidth; });
+    useEffect(() => {
+        const el = frame.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(() => latest.current(el.clientWidth));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), children: [_jsxs("div", { ...part('frame'), ref: frame, style: { height }, onPointerMove: onMove, onPointerLeave: () => onHover(null), role: "presentation", children: [width > 0 && children, hover != null && rows[hover] && (_jsxs("div", { ...part('tooltip'), "data-flip": flip || undefined, style: { left: tipLeft }, children: [_jsx("div", { ...part('tooltip-label'), children: String(rows[hover][x] ?? '') }), list.map((s) => (_jsxs("div", { ...part('tooltip-row'), children: [_jsx("span", { ...part('swatch'), style: { background: s.color } }), _jsx("span", { ...part('tooltip-name'), children: s.label }), _jsx("span", { ...part('tooltip-value'), children: fmt(rows[hover][s.key]) })] }, s.key)))] }))] }), list.length > 1 && (_jsx("div", { ...part('legend'), children: list.map((s) => _jsxs("span", { ...part('legend-item'), children: [_jsx("span", { ...part('swatch'), style: { background: s.color } }), s.label] }, s.key)) })), _jsxs("table", { ...part('sr-only'), children: [_jsx("caption", { children: label }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: x }), list.map((s) => _jsx("th", { children: s.label }, s.key))] }), rows.map((row, i) => _jsxs("tr", { children: [_jsx("td", { children: String(row[x] ?? '') }), list.map((s) => _jsx("td", { children: fmt(row[s.key]) }, s.key))] }, i))] })] })] }));
+}

package/dist/chart/DonutChart.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './chart.css';
+export type DonutSlice = {
+    label: string;
+    value: number;
+    color?: string;
+};
+export type DonutChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    data?: DonutSlice[];
+    size?: number;
+    thickness?: number;
+    center?: ReactNode;
+    legend?: 'right' | 'bottom' | false;
+    format?: ((value: number) => string) | null;
+    label?: string;
+    classes?: Classes<'root' | 'svg' | 'slice' | 'center' | 'legend' | 'legendItem' | 'swatch' | 'tooltip'>;
+};
+export declare function DonutChart({ data, size, thickness, center, legend, format, label: labelProp, className, classes, ...rest }: DonutChartProps): import("react").JSX.Element;

package/dist/chart/DonutChart.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Parts of a whole as a ring (or a pie), with the total (or your text) in the
+ * middle, a legend, and the value on hover.
+ *
+ *   <DonutChart data={[{ label: 'Consults', value: 42 }, { label: 'Surgery', value: 9 }]} />
+ *   <DonutChart data={byKind} label="Appointments by kind" center={<strong>51</strong>} format={(v) => `${v}`} />
+ *
+ * - `data`: `{ label, value, color }` (colours from the theme's
+ *   --ui-chart-1…5 by default, or 'accent', 'success', 'danger', any CSS colour)
+ * - `size` (160 px), `thickness` (a share of the radius, 0.32; 1 for a pie)
+ * - `center`: what the middle shows (the total by default; null for nothing)
+ * - `legend`: beside it ('right', default), 'bottom' or false
+ * - `format(value)`, for the total, legend and tooltip
+ * - `label`: what it shows, for assistive tech (a hidden table of the data)
+ */
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { useState } from 'react';
+import { arc, pie } from 'd3-shape';
+import { seriesColor, formatter } from './chart.js';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './chart.css';
+export function DonutChart({ data = [], size = 160, thickness = 0.32, center, legend = 'right', format = null, label: labelProp, className, classes, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.chart.label;
+    const part = partsOf('donut', classes);
+    const [hover, setHover] = useState(null);
+    const fmt = formatter(format, useLocale());
+    const total = data.reduce((sum, slice) => sum + Math.max(0, slice.value), 0);
+    const radius = size / 2;
+    const inner = thickness >= 1 ? 0 : radius * (1 - thickness);
+    const slices = pie().value((d) => Math.max(0, d.value)).sort(null).padAngle(data.length > 1 && inner > 0 ? 0.012 : 0)(data);
+    const shape = arc().innerRadius(inner).outerRadius(radius).cornerRadius(inner > 0 ? 2 : 0);
+    const grown = arc().innerRadius(inner).outerRadius(radius + 4).cornerRadius(inner > 0 ? 2 : 0);
+    const colorOf = (slice, i) => seriesColor(slice.color, i);
+    const shown = hover != null ? data[hover] : null;
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-legend": legend || undefined, children: [_jsxs("div", { ...part('frame'), style: { width: size, height: size }, children: [_jsx("svg", { ...part('svg'), width: size, height: size, viewBox: `${-radius - 4} ${-radius - 4} ${size + 8} ${size + 8}`, "aria-hidden": "true", children: slices.map((s, i) => (_jsx("path", { ...part('slice'), d: (hover === i ? grown : shape)(s) ?? '', fill: colorOf(data[i], i), "data-dim": (hover != null && hover !== i) || undefined, onPointerEnter: () => setHover(i), onPointerLeave: () => setHover(null) }, data[i].label))) }), inner > 0 && center !== null && (_jsx("div", { ...part('center'), children: shown
+                            ? _jsxs(_Fragment, { children: [_jsx("strong", { children: fmt(shown.value) }), _jsx("span", { children: shown.label })] })
+                            : center ?? _jsxs(_Fragment, { children: [_jsx("strong", { children: fmt(total) }), _jsx("span", { children: t.chart.total })] }) }))] }), legend && (_jsx("ul", { ...part('legend'), children: data.map((slice, i) => (_jsxs("li", { ...part('legend-item'), "data-dim": (hover != null && hover !== i) || undefined, onPointerEnter: () => setHover(i), onPointerLeave: () => setHover(null), children: [_jsx("span", { ...part('swatch'), style: { background: colorOf(slice, i) } }), _jsx("span", { ...part('legend-label'), children: slice.label }), _jsxs("span", { ...part('legend-value'), children: [fmt(slice.value), total > 0 && _jsxs("small", { children: [" ", Math.round((slice.value / total) * 100), "%"] })] })] }, slice.label))) })), _jsxs("table", { ...part('sr-only'), children: [_jsx("caption", { children: label }), _jsx("tbody", { children: data.map((slice) => _jsxs("tr", { children: [_jsx("td", { children: slice.label }), _jsx("td", { children: fmt(slice.value) })] }, slice.label)) })] })] }));
+}

package/dist/chart/Sparkline.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A tiny chart without axes, for a trend beside a number or in a table cell.
+ *
+ *   <Sparkline data={[3, 5, 4, 8, 6, 9]} />
+ *   <Sparkline data={months} y="revenue" variant="area" color="success" />
+ *
+ * - `data`: numbers (or objects, with `y` naming the value)
+ * - `variant`: 'line' (default), 'area' or 'bar'
+ * - `color`, `height` (px, 32; it fills its width)
+ * - `label`: what it shows, for assistive tech
+ */
+import { type HTMLAttributes } from 'react';
+import { type ChartRow } from './chart.js';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './chart.css';
+export type SparklineProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
+    data?: (number | ChartRow)[];
+    y?: string | null;
+    variant?: 'line' | 'area' | 'bar';
+    color?: string | null;
+    height?: number;
+    label?: string | null;
+    classes?: Classes<'root' | 'svg' | 'line'>;
+};
+export declare function Sparkline({ data, y, variant, color, height, label, className, classes, style, ...rest }: SparklineProps): import("react").JSX.Element;

package/dist/chart/Sparkline.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A tiny chart without axes, for a trend beside a number or in a table cell.
+ *
+ *   <Sparkline data={[3, 5, 4, 8, 6, 9]} />
+ *   <Sparkline data={months} y="revenue" variant="area" color="success" />
+ *
+ * - `data`: numbers (or objects, with `y` naming the value)
+ * - `variant`: 'line' (default), 'area' or 'bar'
+ * - `color`, `height` (px, 32; it fills its width)
+ * - `label`: what it shows, for assistive tech
+ */
+import { useId } from 'react';
+import { scaleLinear, scaleBand } from 'd3-scale';
+import { area, line, curveMonotoneX } from 'd3-shape';
+import { seriesColor, num } from './chart.js';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './chart.css';
+export function Sparkline({ data = [], y = null, variant = 'line', color = null, height = 32, label = null, className, classes, style, ...rest }) {
+    const part = partsOf('sparkline', classes);
+    const id = useId().replace(/[^\w-]/g, '');
+    // Drawn in a 100-wide box stretched to fit; strokes keep their width.
+    const values = (data ?? []).map((d) => num(y && typeof d === 'object' ? d[y] : d));
+    const max = Math.max(...values, 0);
+    const min = variant === 'bar' ? 0 : Math.min(...values, max);
+    const ys = scaleLinear().domain([min, max === min ? min + 1 : max]).range([height - 2, 2]);
+    const xs = scaleLinear().domain([0, Math.max(1, values.length - 1)]).range([1, 99]);
+    const colour = seriesColor(color, 0);
+    const path = line().x((_, i) => xs(i)).y((v) => ys(v)).curve(curveMonotoneX);
+    const fill = area().x((_, i) => xs(i)).y0(height).y1((v) => ys(v)).curve(curveMonotoneX);
+    const band = scaleBand().domain(values.map((_, i) => i)).range([0, 100]).padding(0.25);
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), role: "img", "aria-label": label ?? `Trend: ${values.join(', ')}`, style: { ...style, height }, children: _jsx("svg", { ...part('svg'), viewBox: `0 0 100 ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", children: variant === 'bar'
+                ? values.map((value, i) => (_jsx("rect", { x: band(i), y: ys(value), width: band.bandwidth(), height: Math.max(0, height - ys(value)), fill: colour, rx: "0.5" }, i)))
+                : _jsxs(_Fragment, { children: [variant === 'area' && _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: colour, stopOpacity: "0.3" }), _jsx("stop", { offset: "100%", stopColor: colour, stopOpacity: "0" })] }) }), _jsx("path", { d: fill(values) ?? '', fill: `url(#${id})` })] }), _jsx("path", { ...part('line'), d: path(values) ?? '', fill: "none", stroke: colour })] }) }) }));
+}

package/dist/chart/chart.css

@@ -0,0 +1,51 @@
+@layer ui {
+  [data-scope=chart][data-part=root] { display: block; position: relative; width: 100%; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; }
+  [data-scope=chart][data-part=frame] { position: relative; width: 100%; }
+  [data-scope=chart][data-part=svg] { display: block; overflow: visible; }
+  [data-scope=chart][data-part=grid] { stroke: var(--ui-border); stroke-dasharray: 3 3; }
+  [data-scope=chart][data-part=tick] { fill: var(--ui-muted); font-size: 11px; }
+  [data-scope=chart][data-part=line] { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+  [data-scope=chart][data-part=cursor] { stroke: var(--ui-muted); stroke-width: 1; stroke-dasharray: 3 3; }
+  [data-scope=chart][data-part=dot] { stroke: var(--ui-surface); stroke-width: 2; }
+  [data-scope=chart][data-part=bar] { transition: opacity 120ms; &[data-dim] { opacity: 0.45; } }
+  [data-scope=chart][data-part=band] { fill: var(--ui-hover); }
+  /* The tooltip sits beside the hovered point (to its left near the right edge), clear of the line and dots. */
+  [data-scope=chart][data-part=tooltip] { position: absolute; top: 0; z-index: 5; min-width: 8rem; padding: 0.5rem 0.625rem;
+    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow);
+    font-size: 12px; pointer-events: none; white-space: nowrap; transform: translateX(12px);
+    &[data-flip] { transform: translateX(calc(-100% - 12px)); } }
+  [data-scope=chart][data-part=tooltip-label] { font-weight: 600; margin-bottom: 0.25rem; }
+  [data-scope=chart][data-part=tooltip-row] { display: flex; align-items: center; gap: 0.5rem; line-height: 1.6; }
+  [data-scope=chart][data-part=tooltip-name] { color: var(--ui-muted); flex-grow: 1; }
+  [data-scope=chart][data-part=tooltip-value] { font-weight: 500; }
+  [data-scope=chart][data-part=swatch] { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 9999px; flex-shrink: 0; }
+  [data-scope=chart][data-part=legend] { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; font-size: 12px; color: var(--ui-muted); }
+  [data-scope=chart][data-part=legend-item] { display: inline-flex; align-items: center; gap: 0.375rem; }
+  [data-scope=chart][data-part=sr-only] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  [data-scope=sparkline][data-part=root] { display: block; width: 100%; min-width: 4rem; }
+  [data-scope=sparkline][data-part=svg] { display: block; width: 100%; height: 100%; overflow: visible; }
+  /* Strokes keep their width though the drawing is stretched to fit. */
+  [data-scope=sparkline][data-part=line] { stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+}
+@layer ui {
+  [data-scope=donut][data-part=root] { display: inline-flex; align-items: center; gap: 1.5rem; max-width: 100%; color: var(--ui-text); font-family: var(--ui-font); font-size: 13px;
+    &[data-legend=bottom] { flex-direction: column; gap: 1rem; } }
+  [data-scope=donut][data-part=frame] { position: relative; flex-shrink: 0; }
+  [data-scope=donut][data-part=svg] { display: block; overflow: visible; }
+  [data-scope=donut][data-part=slice] { transition: opacity 120ms; cursor: default;
+    &[data-dim] { opacity: 0.45; } }
+  [data-scope=donut][data-part=center] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+    pointer-events: none; text-align: center;
+    & strong { font-size: 20px; font-weight: 700; line-height: 1.1; }
+    & span { color: var(--ui-muted); font-size: 12px; } }
+  [data-scope=donut][data-part=legend] { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding: 0; list-style: none; min-width: 0;
+    [data-legend=bottom] > & { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.375rem 1rem; } }
+  [data-scope=donut][data-part=legend-item] { display: flex; align-items: center; gap: 0.5rem; transition: opacity 120ms;
+    &[data-dim] { opacity: 0.45; } }
+  [data-scope=donut][data-part=swatch] { width: 0.625rem; height: 0.625rem; border-radius: 9999px; flex-shrink: 0; }
+  [data-scope=donut][data-part=legend-label] { flex-grow: 1; color: var(--ui-muted); }
+  [data-scope=donut][data-part=legend-value] { font-weight: 600; font-variant-numeric: tabular-nums;
+    & small { color: var(--ui-muted); font-weight: 400; font-size: 11px; } }
+  [data-scope=donut][data-part=sr-only] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+}

package/dist/chart/chart.d.ts

@@ -0,0 +1,23 @@
+export type ChartRow = Record<string, unknown>;
+export type ChartSeries = {
+    key: string;
+    label?: string;
+    color?: string;
+};
+export type Series = {
+    key: string;
+    label: string;
+    color: string;
+};
+export declare function seriesColor(color: string | null | undefined, index: number): string;
+export declare const seriesOf: (series: ChartSeries[] | null | undefined, y: string | null | undefined) => Series[];
+export declare const formatter: (format: ((value: number) => string) | null | undefined, locale?: string) => (value: unknown) => string;
+export declare const pad: {
+    top: number;
+    bottom: number;
+    right: number;
+};
+export declare const yScale: (max: number, innerH: number) => import("d3-scale").ScaleLinear<number, number, never>;
+export declare const leftFor: (ticks: number[], fmt: (value: unknown) => string) => number;
+export declare const labelStep: (count: number, innerW: number) => number;
+export declare const num: (value: unknown) => number;

package/dist/chart/chart.js

@@ -0,0 +1,19 @@
+import { scaleLinear } from 'd3-scale';
+export function seriesColor(color, index) {
+    if (!color)
+        return `var(--ui-chart-${(index % 5) + 1})`;
+    if (['accent', 'success', 'danger'].includes(color))
+        return `var(--ui-${color})`;
+    return color;
+}
+// The series to draw: `series`, or one from `y`.
+export const seriesOf = (series, y) => (series ?? (y ? [{ key: y, label: y }] : [])).map((s, i) => ({ ...s, label: s.label ?? s.key, color: seriesColor(s.color, i) }));
+export const formatter = (format, locale) => (value) => format ? format(value) : typeof value === 'number' ? value.toLocaleString(locale) : String(value ?? '');
+// The plot area inside the axes.
+export const pad = { top: 8, bottom: 24, right: 8 };
+export const yScale = (max, innerH) => scaleLinear().domain([0, max || 1]).nice().range([innerH, 0]);
+// Room for the longest tick label.
+export const leftFor = (ticks, fmt) => Math.max(...ticks.map((tick) => fmt(tick).length), 1) * 7 + 12;
+// Every nth x label, so they don't collide.
+export const labelStep = (count, innerW) => Math.max(1, Math.ceil(count / Math.max(1, Math.floor(innerW / 64))));
+export const num = (value) => +value || 0;

package/dist/checkbox/Checkbox.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A checkbox with its label.
+ *
+ *   <Checkbox checked={agreed} onCheckedChange={setAgreed}>I agree to the terms</Checkbox>
+ *
+ * - `checked`, `defaultChecked`: true, false or 'indeterminate'
+ * - `onCheckedChange`: called with the new checked state (a boolean)
+ * - `label`: its text (or children, for richer content)
+ * - `labelHidden`: keep the label for assistive tech only (a table's row checkbox)
+ * - `indicator`: replaces the tick and dash; a node, or ({ indeterminate }) => node
+ * - `name`, `value`: for plain form posts
+ * - `disabled`, `invalid`, `required`
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Checkbox.Root>
+ *     <Checkbox.Control>
+ *       <Checkbox.Indicator>✓</Checkbox.Indicator>
+ *       <Checkbox.Indicator indeterminate>–</Checkbox.Indicator>
+ *     </Checkbox.Control>
+ *     <Checkbox.Label>Terms</Checkbox.Label>
+ *     <Checkbox.HiddenInput />
+ *   </Checkbox.Root>
+ */
+import type { ReactNode } from 'react';
+import { Checkbox as Ark, type CheckboxCheckedChangeDetails } from '@ark-ui/react/checkbox';
+import 'iconify-icon';
+import { type Classes, type Slot } from '../utils.js';
+import '../theme.css';
+import './checkbox.css';
+export type CheckboxProps = Omit<Ark.RootProps, 'onCheckedChange' | 'label'> & {
+    onCheckedChange?: (checked: boolean, details: CheckboxCheckedChangeDetails) => void;
+    label?: ReactNode;
+    labelHidden?: boolean;
+    indicator?: Slot<{
+        indeterminate: boolean;
+    }>;
+    classes?: Classes<'root' | 'control' | 'indicator' | 'label'>;
+};
+declare function CheckboxShortcut({ onCheckedChange, label, labelHidden, indicator, className, classes, children, ...rest }: CheckboxProps): import("react").JSX.Element;
+export declare const Checkbox: typeof CheckboxShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Ark.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<Ark.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Group: import("react").ForwardRefExoticComponent<Ark.GroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/checkbox/Checkbox.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as Ark } from '@ark-ui/react/checkbox';
+import 'iconify-icon';
+import { cx, on, partsOf, slot, withParts } from '../utils.js';
+import '../theme.css';
+import './checkbox.css';
+function CheckboxShortcut({ onCheckedChange, label = null, labelHidden = false, indicator, className, classes, children, ...rest }) {
+    const part = partsOf('checkbox', classes);
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), ...on('onCheckedChange', onCheckedChange, (details) => details.checked === true), children: [_jsxs(Ark.Control, { ...part('control'), children: [_jsx(Ark.Indicator, { ...part('indicator'), children: slot(indicator, _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }), { indeterminate: false }) }), _jsx(Ark.Indicator, { ...part('indicator'), indeterminate: true, children: slot(indicator, _jsx("iconify-icon", { icon: "lucide:minus", "aria-hidden": "true" }), { indeterminate: true }) })] }), (label || children) && _jsx(Ark.Label, { ...part('label'), "data-hidden": labelHidden || undefined, children: children ?? label }), _jsx(Ark.HiddenInput, {})] }));
+}
+export const Checkbox = withParts(CheckboxShortcut, {
+    Root: Ark.Root,
+    Control: Ark.Control,
+    Indicator: Ark.Indicator,
+    Label: Ark.Label,
+    HiddenInput: Ark.HiddenInput,
+    Group: Ark.Group,
+    Context: Ark.Context,
+});

package/dist/checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,44 @@
+/**
+ * A group of checkboxes, for an array of checked values.
+ *
+ *   <CheckboxGroup label="Subjects" items={['Maths', 'Physics', 'Chemistry']} value={subjects} onValueChange={setSubjects} selectAll="All subjects" />
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`)
+ * - `value`, `defaultValue`: the checked items' own values, in item order;
+ *   `onValueChange`: called with the new array
+ * - `selectAll`: label for a parent checkbox that selects all or none, and is
+ *   indeterminate when only some are (disabled items keep their state)
+ * - `label`: a label above it (skipped inside a Field)
+ * - `orientation`: 'vertical' or 'horizontal'
+ * - `variant`: 'list' (default); 'cards': each a bordered card (with the
+ *   item's `description` and `icon`), ticked ones outlined; 'chips': pills
+ *   that toggle, e.g. quick filters above a table
+ * - `name`: each checkbox posts its value with plain forms
+ *
+ * Shift-clicking a checkbox ticks (or clears) every item between it and the
+ * last one clicked, as in mail and file lists.
+ */
+import 'iconify-icon';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './checkbox.css';
+type Value<T, K extends string> = T extends string | number ? T : K extends keyof T ? T[K] : unknown;
+export type CheckboxGroupProps<T, K extends string = 'value'> = Omit<ComponentProps<'div'>, 'defaultValue'> & {
+    items: readonly T[];
+    value?: NoInfer<Value<T, K>>[];
+    defaultValue?: NoInfer<Value<T, K>>[];
+    onValueChange?: (value: NoInfer<Value<T, K>>[]) => void;
+    label?: ReactNode;
+    selectAll?: ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+    variant?: 'list' | 'cards' | 'chips';
+    labelKey?: string;
+    valueKey?: K;
+    disabledKey?: string;
+    name?: string;
+    disabled?: boolean;
+    classes?: Classes<'root' | 'label' | 'items' | 'cardText' | 'icon' | 'cardLabel' | 'description'>;
+};
+export declare function CheckboxGroup<T, K extends string = 'value'>({ items, value, defaultValue, onValueChange, label, selectAll, orientation, variant, labelKey, valueKey, disabledKey, name, disabled, className, classes, ...rest }: CheckboxGroupProps<T, K>): import("react").JSX.Element;
+export {};

package/dist/checkbox/CheckboxGroup.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A group of checkboxes, for an array of checked values.
+ *
+ *   <CheckboxGroup label="Subjects" items={['Maths', 'Physics', 'Chemistry']} value={subjects} onValueChange={setSubjects} selectAll="All subjects" />
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`)
+ * - `value`, `defaultValue`: the checked items' own values, in item order;
+ *   `onValueChange`: called with the new array
+ * - `selectAll`: label for a parent checkbox that selects all or none, and is
+ *   indeterminate when only some are (disabled items keep their state)
+ * - `label`: a label above it (skipped inside a Field)
+ * - `orientation`: 'vertical' or 'horizontal'
+ * - `variant`: 'list' (default); 'cards': each a bordered card (with the
+ *   item's `description` and `icon`), ticked ones outlined; 'chips': pills
+ *   that toggle, e.g. quick filters above a table
+ * - `name`: each checkbox posts its value with plain forms
+ *
+ * Shift-clicking a checkbox ticks (or clears) every item between it and the
+ * last one clicked, as in mail and file lists.
+ */
+import 'iconify-icon';
+import { useId, useRef } from 'react';
+import { useFieldContext } from '@ark-ui/react/field';
+import { Checkbox } from './Checkbox.js';
+import { cx, partsOf, useControllable } from '../utils.js';
+import '../theme.css';
+import './checkbox.css';
+export function CheckboxGroup({ items, value, defaultValue, onValueChange, label = null, selectAll = null, orientation = 'vertical', variant = 'list', labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', name, disabled = false, className, classes, ...rest }) {
+    const field = useFieldContext();
+    const part = partsOf('checkbox-group', classes);
+    const id = useId();
+    const [checked, setChecked] = useControllable(value, defaultValue ?? [], onValueChange);
+    // The latest value, so two changes before a render build on each other.
+    const latest = useRef(checked);
+    latest.current = checked;
+    const key = (item, k) => item[k];
+    const isObject = (item) => typeof item === 'object' && item !== null;
+    const labelOf = (item) => String(isObject(item) ? key(item, labelKey) : item);
+    const valueOf = (item) => (isObject(item) ? key(item, valueKey) : item);
+    // As a card: the item's icon and description with its label.
+    const labelFor = (item) => {
+        const icon = isObject(item) ? key(item, 'icon') : undefined;
+        const description = isObject(item) ? key(item, 'description') : null;
+        if (variant !== 'cards' || (!icon && !description))
+            return labelOf(item);
+        return _jsxs("span", { ...part('card-text'), children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsxs("span", { children: [_jsx("span", { ...part('card-label'), children: labelOf(item) }), description && _jsx("span", { ...part('description'), children: description })] })] });
+    };
+    const isSelected = (item) => latest.current.includes(valueOf(item));
+    const isLocked = (item) => disabled || (isObject(item) && !!key(item, disabledKey));
+    const select = (list) => {
+        latest.current = list.map(valueOf);
+        setChecked(latest.current);
+    };
+    // Checkbox changes don't carry the Shift key, so it's noted on the way in
+    // (Shift+mousedown would also select the labels' text between).
+    const shift = useRef(false);
+    const anchor = useRef(null);
+    function noteShift(e) {
+        shift.current = e.shiftKey;
+        if (e.shiftKey && e.type === 'mousedown')
+            e.preventDefault();
+    }
+    function toggle(item, on) {
+        const index = items.indexOf(item);
+        const from = anchor.current;
+        anchor.current = index;
+        if (shift.current && from != null && from !== index && items[from]) {
+            const [lo, hi] = [Math.min(from, index), Math.max(from, index)];
+            return select(items.filter((it, n) => (n >= lo && n <= hi && !isLocked(it) ? on : isSelected(it))));
+        }
+        select(items.filter((it) => (it === item ? on : isSelected(it))));
+    }
+    const toggleAll = (on) => select(items.filter((it) => (isLocked(it) ? isSelected(it) : on)));
+    // The select-all box: checked when every enabled item is, indeterminate when only some are.
+    const open = items.filter((it) => !isLocked(it));
+    const on = open.filter(isSelected).length;
+    const allState = on === 0 ? false : on === open.length ? true : 'indeterminate';
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), role: "group", "data-variant": variant, "aria-labelledby": field ? field.ids.label : label ? `${id}-label` : undefined, children: [label && !field && _jsx("span", { ...part('label'), id: `${id}-label`, children: label }), selectAll && _jsx(Checkbox, { label: selectAll, disabled: disabled, checked: allState, onCheckedChange: toggleAll }), _jsx("div", { ...part('items'), "data-orientation": orientation, "data-indented": selectAll ? '' : undefined, onPointerDownCapture: noteShift, onMouseDownCapture: noteShift, onKeyDownCapture: noteShift, children: items.map((item) => (_jsx(Checkbox, { label: labelFor(item), value: String(valueOf(item)), disabled: isLocked(item), ...(name && { name }), checked: isSelected(item), onCheckedChange: (on) => toggle(item, on) }, String(valueOf(item))))) })] }));
+}

package/dist/checkbox/checkbox.css

@@ -0,0 +1,49 @@
+@layer ui {
+  [data-scope=checkbox][data-part=root] { display: inline-flex; align-items: center; gap: 0.5rem; vertical-align: top; cursor: pointer;
+    color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    &[data-disabled] { opacity: 0.5; cursor: not-allowed; } }
+  [data-scope=checkbox][data-part=control] { display: grid; place-items: center; flex-shrink: 0; width: 1rem; height: 1rem; box-sizing: border-box;
+    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) - 2px); color: var(--ui-accent-text);
+    &:is([data-state=checked], [data-state=indeterminate]) { background: var(--ui-accent); border-color: var(--ui-accent); }
+    &[data-focus-visible] { outline: 2px solid var(--ui-ring-soft); border-color: var(--ui-ring); }
+    &[data-invalid] { border-color: var(--ui-danger); } }
+  [data-scope=checkbox][data-part=label][data-hidden] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  [data-scope=checkbox][data-part=indicator] { display: none; font-size: 12px; line-height: 1;
+    &:is([data-state=checked], [data-state=indeterminate]) { display: grid; }
+    /* Ark renders one for the tick and one for the dash, hiding the other. */
+    &[hidden] { display: none; } }
+
+  [data-scope=checkbox-group][data-part=root] { display: block; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=checkbox-group][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=checkbox-group][data-part=root] > [data-scope=checkbox] { margin-bottom: 0.5rem; }
+  [data-scope=checkbox-group][data-part=items] { display: flex; flex-direction: column; gap: 0.5rem;
+    &[data-orientation=horizontal] { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; }
+    &[data-indented] { padding-left: 1.5rem; } }
+  /* Cards: each a bordered card (icon, label, description), ticked ones outlined. */
+  [data-scope=checkbox-group][data-variant=cards] {
+    & > [data-part=items] { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; }
+    & [data-scope=checkbox][data-part=root] { align-items: flex-start; gap: 0.625rem; padding: 0.75rem; border: 1px solid var(--ui-border);
+      border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface); transition: border-color 120ms, background 120ms;
+      &:hover { border-color: var(--ui-muted); }
+      &[data-state=checked] { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 45%, var(--ui-surface));
+        box-shadow: 0 0 0 1px var(--ui-accent); }
+      &[data-state=checked] [data-part=icon] { color: var(--ui-accent); } }
+    & [data-scope=checkbox][data-part=control] { margin-top: 0.125rem; } }
+  [data-scope=checkbox-group][data-part=card-text] { display: flex; align-items: flex-start; gap: 0.625rem; }
+  [data-scope=checkbox-group][data-part=icon] { flex-shrink: 0; color: var(--ui-muted); font-size: 18px; }
+  [data-scope=checkbox-group][data-part=card-label] { display: block; font-weight: 500; }
+  [data-scope=checkbox-group][data-part=description] { display: block; margin-top: 0.125rem; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
+
+  /* Chips: pills that toggle (the tick shows inside when on). */
+  [data-scope=checkbox-group][data-variant=chips] {
+    & > [data-part=items] { flex-direction: row; flex-wrap: wrap; gap: 0.375rem; }
+    & [data-scope=checkbox][data-part=root] { gap: 0.25rem; height: 1.875rem; padding: 0 0.75rem; box-sizing: border-box; border: 1px solid var(--ui-border);
+      border-radius: 9999px; background: var(--ui-surface); font-size: 13px; transition: background 120ms, border-color 120ms;
+      &:hover { border-color: var(--ui-muted); }
+      &[data-state=checked] { border-color: transparent; background: var(--ui-accent-soft); color: var(--ui-accent-soft-text); }
+      &:has([data-focus-visible]) { outline: 2px solid var(--ui-ring-soft); }
+      &[data-disabled] { opacity: 0.5; } }
+    /* The box is hidden; a tick shows only when it's on. */
+    & [data-scope=checkbox][data-part=control] { width: auto; height: auto; border: none; background: transparent; color: inherit; outline: none;
+      &:not([data-state=checked]) { display: none; } } }
+}

package/dist/collapsible/Collapsible.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A section that opens and closes, animating its height.
+ *
+ *   <Collapsible heading="Lesson notes">…</Collapsible>
+ *   <Collapsible open={open} onOpenChange={setOpen} trigger={<Button>Show more</Button>}>…</Collapsible>
+ *
+ * - `heading`: a built-in toggle with a chevron
+ * - `trigger`: your own toggle instead (it gets the trigger's props, so a
+ *   component must pass them on, as Button does)
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
+ * - `disabled`
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Collapsible.Root>
+ *     <Collapsible.Trigger>Notes <Collapsible.Indicator>▾</Collapsible.Indicator></Collapsible.Trigger>
+ *     <Collapsible.Content>…</Collapsible.Content>
+ *   </Collapsible.Root>
+ */
+import type { ReactElement, ReactNode } from 'react';
+import { Collapsible as Ark, type CollapsibleOpenChangeDetails } from '@ark-ui/react/collapsible';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './collapsible.css';
+export type CollapsibleProps = Omit<Ark.RootProps, 'onOpenChange'> & {
+    heading?: ReactNode;
+    trigger?: ReactElement | null;
+    onOpenChange?: (open: boolean, details: CollapsibleOpenChangeDetails) => void;
+    classes?: Classes<'root' | 'trigger' | 'heading' | 'indicator' | 'content' | 'inner'>;
+};
+declare function CollapsibleShortcut({ heading, trigger, onOpenChange, className, classes, children, ...rest }: CollapsibleProps): import("react").JSX.Element;
+export declare const Collapsible: typeof CollapsibleShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Ark.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Ark.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/collapsible/Collapsible.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible as Ark } from '@ark-ui/react/collapsible';
+import 'iconify-icon';
+import { cx, on, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './collapsible.css';
+function CollapsibleShortcut({ heading = null, trigger = null, onOpenChange, className, classes, children, ...rest }) {
+    const part = partsOf('collapsible', classes);
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), ...on('onOpenChange', onOpenChange, (details) => details.open), children: [trigger
+                ? _jsx(Ark.Trigger, { asChild: true, children: trigger })
+                : heading && (_jsxs(Ark.Trigger, { ...part('trigger'), children: [_jsx("span", { ...part('heading'), children: heading }), _jsx(Ark.Indicator, { ...part('indicator'), children: _jsx("iconify-icon", { icon: "lucide:chevron-down" }) })] })), _jsx(Ark.Content, { ...part('content'), children: _jsx("div", { ...part('inner'), children: children }) })] }));
+}
+export const Collapsible = withParts(CollapsibleShortcut, {
+    Root: Ark.Root, RootProvider: Ark.RootProvider, Trigger: Ark.Trigger, Indicator: Ark.Indicator, Content: Ark.Content, Context: Ark.Context,
+});

package/dist/collapsible/collapsible.css

@@ -0,0 +1,20 @@
+@layer ui {
+  /* Full width, so the toggle doesn't grow when the content opens. */
+  [data-scope=collapsible][data-part=root] { display: block; width: 100%; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=collapsible][data-part=trigger]:not([data-scope=button]) {
+    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.5rem 0;
+    border: none; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 500; text-align: left;
+    cursor: pointer; outline: none; border-radius: 4px;
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: 2px; }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+  }
+  [data-scope=collapsible][data-part=indicator] { display: inline-flex; color: var(--ui-muted); font-size: 16px; transition: transform 200ms;
+    &[data-state=open] { transform: rotate(180deg); } }
+  /* Zag measures the content into --height and keeps it shown until the closing animation ends. */
+  [data-scope=collapsible][data-part=content] { overflow: hidden;
+    &[data-state=open] { animation: ui-collapsible-open 200ms ease-out; }
+    &[data-state=closed] { animation: ui-collapsible-close 160ms ease-in; } }
+  [data-scope=collapsible][data-part=inner] { padding-top: 0.5rem; font-size: 14px; }
+  @keyframes ui-collapsible-open { from { height: 0; opacity: 0; } to { height: var(--height); opacity: 1; } }
+  @keyframes ui-collapsible-close { from { height: var(--height); opacity: 1; } to { height: 0; opacity: 0; } }
+}