@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/event-calendar/dates.d.ts

@@ -0,0 +1,8 @@
+export declare const toISODate: (d: Date) => string;
+export declare const toISODateTime: (d: Date) => string;
+export declare function parse(value: string): Date;
+export declare const addDays: (d: Date, days: number) => Date;
+export declare const addMinutes: (d: Date, minutes: number) => Date;
+export declare const minutesOfDay: (d: Date) => number;
+export declare const sameDay: (a: Date, b: Date) => boolean;
+export declare function startOfWeek(d: Date, weekStartsOn?: number): Date;

package/dist/event-calendar/dates.js

@@ -0,0 +1,21 @@
+// Local date-times as ISO strings without a zone ('2025-10-09T16:00'), as
+// DatePicker gives dates: what a lesson's time means where it's taught.
+const pad = (n) => String(n).padStart(2, '0');
+export const toISODate = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+export const toISODateTime = (d) => `${toISODate(d)}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+// '2025-10-09' or '2025-10-09T16:00' as a local Date.
+export function parse(value) {
+    const [date, time = '00:00'] = value.split('T');
+    const [y, m, d] = date.split('-').map(Number);
+    const [h, min] = time.split(':').map(Number);
+    return new Date(y, m - 1, d, h || 0, min || 0);
+}
+export const addDays = (d, days) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + days, d.getHours(), d.getMinutes());
+export const addMinutes = (d, minutes) => new Date(d.getTime() + minutes * 60000);
+export const minutesOfDay = (d) => d.getHours() * 60 + d.getMinutes();
+export const sameDay = (a, b) => toISODate(a) === toISODate(b);
+// The first day of the week holding `d` (Monday by default).
+export function startOfWeek(d, weekStartsOn = 1) {
+    const back = (d.getDay() - weekStartsOn + 7) % 7;
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() - back);
+}

package/dist/event-calendar/event-calendar.css

@@ -0,0 +1,157 @@
+@layer ui {
+  [data-scope=event-calendar][data-part=root] { position: relative; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; min-width: 0;
+    color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; }
+  [data-scope=event-calendar][data-part=toolbar] { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
+  [data-scope=event-calendar][data-part=nav] { display: flex; align-items: center; gap: 0.25rem; }
+  [data-scope=event-calendar][data-part=title] { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0.25rem 0.5rem;
+    border: none; border-radius: var(--ui-radius); background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
+    & iconify-icon { color: var(--ui-muted); font-size: 14px; }
+    &:hover { background: var(--ui-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+  [data-scope=event-calendar][data-part=actions] { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
+
+  /* A time gutter, then a column per day (or per resource within each day); it scrolls sideways when narrow. */
+  [data-scope=event-calendar][data-part=grid] { display: grid; grid-template-columns: minmax(3.5rem, max-content) repeat(var(--columns), minmax(6.5rem, 1fr));
+    overflow-x: auto; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px);
+    box-shadow: var(--ui-card-shadow); }
+  [data-scope=event-calendar]:is([data-part=corner], [data-part=day-header], [data-part=resource-header]) {
+    background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
+  [data-scope=event-calendar][data-part=day-header] { display: flex; align-items: baseline; justify-content: center; gap: 0.375rem; padding: 0.5rem;
+    border-left: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px;
+    & strong { color: var(--ui-text); font-size: 15px; font-weight: 600; }
+    &[data-today] strong { display: inline-grid; place-items: center; min-width: 1.625rem; height: 1.625rem; border-radius: 9999px;
+      background: var(--ui-accent); color: var(--ui-accent-text); } }
+  [data-scope=event-calendar][data-part=resource-header] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 0;
+    padding: 0.5rem; border-left: 1px solid var(--ui-border); font-size: 13px; font-weight: 500; text-align: center; overflow: hidden; }
+
+  /* A clickable header (onDayClick, onResourceClick): fills its cell, looking the same. */
+  [data-scope=event-calendar][data-part=header-button] { display: inherit; flex: 1; align-items: inherit; justify-content: inherit; gap: inherit;
+    min-width: 0; margin: -0.375rem; padding: 0.375rem; border: none; border-radius: var(--ui-radius); background: transparent;
+    color: inherit; font: inherit; cursor: pointer;
+    &:hover { background: var(--ui-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+
+  /* Extra rows (`rows`, e.g. the day's messages): a label, then a cell per day or column. */
+  [data-scope=event-calendar][data-part=row-label] { display: flex; align-items: center; justify-content: flex-end; padding-right: 0.5rem;
+    border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; }
+  [data-scope=event-calendar][data-part=row-cell] { display: flex; align-items: center; min-width: 0; min-height: 2rem; padding: 0.25rem;
+    box-sizing: border-box; border-left: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); font-size: 12px;
+    &[data-clickable] { cursor: pointer; outline: none;
+      &:hover { background: color-mix(in srgb, var(--ui-accent) 6%, transparent); }
+      &:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-ring-soft); } } }
+
+  /* All-day and multi-day events, in lanes along the top. */
+  /* The gutter column grows to fit the longest label ("Journée", in French). */
+  [data-scope=event-calendar][data-part=all-day-label] { display: flex; align-items: center; justify-content: flex-end; padding: 0 0.5rem; white-space: nowrap;
+    border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 11px; }
+  [data-scope=event-calendar][data-part=all-day] { position: relative; grid-column: 2 / -1; height: calc(var(--lanes) * 1.625rem + 0.5rem);
+    border-bottom: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border);
+    /* A line between the days (columns) it spans. */
+    background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--ui-border) calc(100% - 1px));
+    background-size: calc(100% / var(--columns)) 100%;
+    &[data-selectable] { cursor: cell; touch-action: none; } }
+  [data-scope=event-calendar][data-part=all-day-event] { --event-color: var(--ui-accent);
+    position: absolute; height: 1.375rem; box-sizing: border-box; padding: 0 0.5rem; border: 2px solid var(--ui-surface);
+    border-radius: calc(var(--ui-radius) + 2px); background: color-mix(in srgb, var(--event-color) 22%, var(--ui-surface));
+    color: var(--ui-text); font: inherit; font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
+    &:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 1px; }
+    &[data-continued] { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } }
+
+  [data-scope=event-calendar][data-part=gutter] { position: relative; height: calc(var(--hour-height) * var(--hours)); }
+  [data-scope=event-calendar][data-part=hour] { position: absolute; right: 0.5rem; translate: 0 -50%; color: var(--ui-muted); font-size: 11px;
+    &:first-child { translate: 0 2px; } }
+  /* Hour lines, with a fainter one at the half hour. */
+  [data-scope=event-calendar][data-part=day] { position: relative; height: calc(var(--hour-height) * var(--hours)); border-left: 1px solid var(--ui-border);
+    background-image: linear-gradient(var(--ui-border) 1px, transparent 1px),
+      linear-gradient(color-mix(in srgb, var(--ui-border) 45%, transparent) 1px, transparent 1px);
+    background-size: 100% var(--hour-height), 100% var(--hour-height); background-position: 0 0, 0 calc(var(--hour-height) / 2);
+    &[data-today] { background-color: color-mix(in srgb, var(--ui-accent) 5%, transparent); }
+    &[data-selectable] { cursor: cell; touch-action: none; }
+    /* With resources over several days, a stronger line where each day starts. */
+    [data-two-rows] > &[data-first] { border-left-color: var(--ui-muted); } }
+  [data-two-rows] > [data-scope=event-calendar][data-part=day-header] { border-left-color: var(--ui-muted); }
+
+  [data-scope=event-calendar][data-part=event], [data-scope=event-calendar][data-part=all-day-event] {
+    &[data-color=success] { --event-color: var(--ui-success); }
+    &[data-color=warning] { --event-color: #d97706; }
+    &[data-color=danger] { --event-color: var(--ui-danger); }
+    &[data-color=neutral] { --event-color: var(--ui-muted); } }
+  [data-scope=event-calendar][data-part=event] { --event-color: var(--ui-accent);
+    position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 0.125rem; box-sizing: border-box; overflow: hidden;
+    padding: 0.25rem 0.375rem; border: 2px solid var(--ui-surface); border-radius: calc(var(--ui-radius) + 2px);
+    border-left: 3px solid var(--event-color); background: color-mix(in srgb, var(--event-color) 16%, var(--ui-surface));
+    color: var(--ui-text); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
+    &:hover { background: color-mix(in srgb, var(--event-color) 24%, var(--ui-surface)); }
+    &:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 1px; z-index: 3; }
+    &[data-editable] { touch-action: none; }
+    /* Short events: title and time on one line. */
+    &[data-compact] { flex-direction: row; align-items: center; gap: 0.375rem; padding-block: 0; border-top-width: 1px; border-bottom-width: 1px; line-height: 1.2; }
+    &[data-dragging] { z-index: 4; cursor: grabbing; box-shadow: var(--ui-shadow); opacity: 0.92; } }
+  [data-scope=event-calendar][data-part=event-title] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  [data-scope=event-calendar][data-part=event-time] { color: var(--ui-muted); white-space: nowrap; }
+  /* The bottom edge drags to resize. */
+  [data-scope=event-calendar][data-part=resize] { position: absolute; left: 0; right: 0; bottom: 0; height: 0.5rem; cursor: ns-resize;
+    &::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 1.25rem; height: 2px; translate: -50% 0; border-radius: 2px;
+      background: var(--event-color); opacity: 0; transition: opacity 120ms; }
+    [data-part=event]:hover > &::after { opacity: 0.6; } }
+  [data-scope=event-calendar][data-part=selection] { position: absolute; left: 2px; right: 2px; z-index: 2; box-sizing: border-box; padding: 0.25rem 0.375rem;
+    border-radius: calc(var(--ui-radius) + 2px); background: color-mix(in srgb, var(--resource-color, var(--ui-accent)) 18%, transparent);
+    border: 1px dashed var(--resource-color, var(--ui-accent)); color: var(--ui-text); font-size: 12px; font-weight: 500; pointer-events: none;
+    &[data-all-day] { top: 2px; bottom: 2px; left: auto; right: auto; } }
+  [data-scope=event-calendar][data-part=now] { position: absolute; left: 0; right: 0; z-index: 2; height: 2px; background: var(--ui-danger); pointer-events: none;
+    &::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 9999px; background: var(--ui-danger); } }
+  [data-scope=event-calendar][data-part=status] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  /* Placing a pinned event: a bar saying so, above the grid. */
+  [data-scope=event-calendar][data-part=pinned] { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 0.75rem;
+    border: 1px dashed var(--ui-accent); border-radius: calc(var(--ui-radius) + 2px); background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface));
+    color: var(--ui-accent-soft-text); font-size: 13px;
+    & > span { flex-grow: 1; } }
+
+  /* Scrolling inside `height`: header rows stick (each below the last; tops set by the component), the gutter sticks left. */
+  [data-scope=event-calendar][data-part=grid][data-scroll] { position: relative; overflow: auto;
+    & > [data-sticky-row] { position: sticky; z-index: 5; background-color: var(--ui-surface); }
+    & > :is([data-part=corner], [data-part=all-day-label], [data-part=row-label]) { left: 0; z-index: 6; }
+    & > [data-part=gutter] { position: sticky; left: 0; z-index: 4; background: var(--ui-surface); } }
+
+  /* Time that can't be used (isAvailable): hatched, with its reason on hover. */
+  [data-scope=event-calendar][data-part=unavailable] { position: absolute; left: 0; right: 0; cursor: not-allowed;
+    background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ui-muted) 14%, transparent) 0 1px, transparent 1px 7px),
+      color-mix(in srgb, var(--ui-muted) 7%, transparent); }
+
+  /* Where a dragged event came from. */
+  [data-scope=event-calendar][data-part=ghost] { position: absolute; box-sizing: border-box; border: 1px dashed var(--ui-border);
+    border-radius: calc(var(--ui-radius) + 2px); background: color-mix(in srgb, var(--ui-muted) 6%, transparent); pointer-events: none; }
+
+  [data-scope=event-calendar][data-part=event] {
+    /* Blocked time: hatched and grey. */
+    &[data-blocked] { --event-color: var(--ui-muted);
+      background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ui-muted) 18%, transparent) 0 2px, transparent 2px 8px),
+        color-mix(in srgb, var(--ui-muted) 10%, var(--ui-surface)); }
+    /* Saving: faded, and not draggable. */
+    &[data-pending] { opacity: 0.55; border-left-style: dashed; cursor: progress; }
+    /* Being placed elsewhere. */
+    &[data-pinned] { outline: 2px dashed var(--ui-accent); outline-offset: 1px; }
+    /* Dropped here, it'd be refused. */
+    &[data-invalid] { --event-color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 14%, var(--ui-surface)); cursor: not-allowed; } }
+  [data-scope=event-calendar][data-part=all-day-event][data-blocked] { --event-color: var(--ui-muted);
+    background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ui-muted) 20%, transparent) 0 2px, transparent 2px 8px),
+      color-mix(in srgb, var(--ui-muted) 12%, var(--ui-surface)); }
+  [data-scope=event-calendar][data-part=selection] {
+    &[data-placing] { background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface)); border-style: solid; }
+    &[data-invalid] { border-color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 12%, transparent); color: var(--ui-danger); } }
+  [data-placing] [data-scope=event-calendar][data-part=day] { cursor: copy; }
+
+  /* "+2 more" where all-day lanes are folded; the label opens and closes them. */
+  [data-scope=event-calendar][data-part=more] { position: absolute; height: 1.375rem; padding: 0 0.5rem; box-sizing: border-box; border: none;
+    background: transparent; color: var(--ui-muted); font: inherit; font-size: 11px; font-weight: 500; text-align: left; cursor: pointer;
+    &:hover { color: var(--ui-text); text-decoration: underline; } }
+  [data-scope=event-calendar][data-part=all-day-label] > button { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0;
+    border: none; background: transparent; color: inherit; font: inherit; cursor: pointer;
+    &:hover { color: var(--ui-text); } }
+  /* The slot under the pointer, in its resource's colour (grey where it can't be used). */
+  [data-scope=event-calendar][data-part=hover] { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
+    background: color-mix(in srgb, var(--resource-color, var(--ui-accent)) 12%, transparent);
+    &[data-invalid] { background: transparent; } }
+  /* A resource with a colour: a stripe along its header. */
+  [data-scope=event-calendar][data-part=resource-header][data-colored] { box-shadow: inset 0 3px 0 var(--resource-color); }
+}

package/dist/field/Field.d.ts

@@ -0,0 +1,66 @@
+/**
+ * A form field: a label, hint and error around one control, wired up for
+ * assistive tech. Controls inside it (Input, Select, Checkbox…) skip their
+ * own label and point at its.
+ *
+ *   <Field label="Student" error={errors.student}>
+ *     <Select items={students} value={student} onValueChange={setStudent} />
+ *   </Field>
+ *
+ * - `label`, `hint`, `error` (shown instead of the hint), `required`
+ * - `span`: columns (of 12) to take inside Fields
+ * - without children it renders an Input, and the other props (value,
+ *   onValueChange, type, placeholder, icon, suffix…) pass on to it
+ *
+ * By hand, with Ark's Field parts:
+ *
+ *   <Field.Root invalid={!!error}>
+ *     <Field.Label>Email <Field.RequiredIndicator /></Field.Label>
+ *     <Input />
+ *     <Field.ErrorText>{error}</Field.ErrorText>
+ *   </Field.Root>
+ */
+import type { ComponentProps, ReactNode } from 'react';
+import { Field as Ark } from '@ark-ui/react/field';
+import { type InputProps } from '../input/Input.js';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './field.css';
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export type FieldProps = DistributiveOmit<InputProps, 'label' | 'classes' | 'children'> & {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    span?: number;
+    classes?: Classes<'root' | 'label' | 'requiredIndicator' | 'helperText' | 'errorText'>;
+    children?: ReactNode;
+};
+declare function FieldShortcut({ label, hint, error, required, disabled, span, className, classes, style, children, ...inputProps }: FieldProps): import("react").JSX.Element;
+export declare const Field: typeof FieldShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    RequiredIndicator: import("react").ForwardRefExoticComponent<Ark.RequiredIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+    HelperText: import("react").ForwardRefExoticComponent<Ark.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ErrorText: import("react").ForwardRefExoticComponent<Ark.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+/**
+ * A group of fields on a 12-column grid (one column on phones). Each Field
+ * takes `span` columns.
+ *
+ *   <Fields legend="Lesson">
+ *     <Field label="Student" span={6}>…</Field>
+ *     <Field label="Date" span={6}>…</Field>
+ *   </Fields>
+ *
+ * - `legend`, `description`: a heading for the group
+ */
+export type FieldsProps = ComponentProps<'fieldset'> & {
+    legend?: ReactNode;
+    description?: ReactNode;
+    classes?: Classes<'root' | 'legend' | 'description' | 'grid'>;
+};
+export declare function Fields({ legend, description, className, classes, children, ...rest }: FieldsProps): import("react").JSX.Element;
+export {};

package/dist/field/Field.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as Ark } from '@ark-ui/react/field';
+import { Input } from '../input/Input.js';
+import { cx, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './field.css';
+function FieldShortcut({ label = null, hint = null, error = null, required = false, disabled = false, span = 12, className, classes, style, children, ...inputProps }) {
+    const part = partsOf('field', classes);
+    return (_jsxs(Ark.Root, { ...part('root'), className: cx(className, classes?.root), style: { '--span': span, ...style }, invalid: !!error, required: required, disabled: disabled, children: [label && _jsxs(Ark.Label, { ...part('label'), children: [label, _jsx(Ark.RequiredIndicator, { ...part('required-indicator'), "aria-hidden": "true", children: " *" })] }), children ?? _jsx(Input, { ...inputProps }), error ? _jsx(Ark.ErrorText, { ...part('error-text'), children: error })
+                : hint && _jsx(Ark.HelperText, { ...part('helper-text'), children: hint })] }));
+}
+export const Field = withParts(FieldShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    RequiredIndicator: Ark.RequiredIndicator,
+    HelperText: Ark.HelperText,
+    ErrorText: Ark.ErrorText,
+    Context: Ark.Context,
+});
+export function Fields({ legend = null, description = null, className, classes, children, ...rest }) {
+    const part = partsOf('fields', classes);
+    return (_jsxs("fieldset", { ...rest, ...part('root'), className: cx(className, classes?.root), children: [legend && _jsx("legend", { ...part('legend'), children: legend }), description && _jsx("p", { ...part('description'), children: description }), _jsx("div", { ...part('grid'), children: children })] }));
+}

package/dist/field/field.css

@@ -0,0 +1,26 @@
+@layer ui {
+  [data-scope=field][data-part=root] {
+    display: flex; flex-direction: column; gap: 0.375rem; min-width: 0;
+    color: var(--ui-text); font-family: var(--ui-font);
+    grid-column: span var(--span, 12);
+
+    /* The control fills the field. */
+    > [data-part=root] { width: 100%; min-width: 0; }
+  }
+  [data-scope=field][data-part=label] { font-size: 14px; font-weight: 500; width: max-content; }
+  [data-scope=field][data-part=required-indicator] { color: var(--ui-danger); }
+  [data-scope=field]:is([data-part=helper-text], [data-part=error-text]) { margin: 0; font-size: 12px; }
+  [data-scope=field][data-part=helper-text] { color: var(--ui-muted); }
+  [data-scope=field][data-part=error-text] { color: var(--ui-danger); }
+
+  [data-scope=fields][data-part=root] { margin: 0; padding: 0; border: none; min-width: 0; }
+  [data-scope=fields][data-part=legend] { padding: 0; font-size: 16px; font-weight: 600; }
+  [data-scope=fields][data-part=description] { margin: 0.25rem 0 0; font-size: 14px; color: var(--ui-muted); }
+  [data-scope=fields][data-part=grid] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem;
+    :is([data-part=legend], [data-part=description]) + & { margin-top: 1rem; } }
+
+  /* One column on phones. */
+  @media (max-width: 480px) {
+    [data-scope=fields][data-part=grid] > [data-scope=field] { grid-column: 1 / -1; }
+  }
+}

package/dist/file-upload/FileUpload.d.ts

@@ -0,0 +1,60 @@
+/**
+ * A file upload: drop files on it or browse, then see and remove them.
+ *
+ *   <FileUpload label="Worksheets" files={files} onFilesChange={setFiles} accept=".pdf" maxFiles={5} hint="PDFs, up to 5" />
+ *
+ * - `files`, `defaultFiles`: the accepted Files; `onFilesChange`: called with them
+ * - `accept`: types to allow ('image/*', '.pdf', or an array of them)
+ * - `maxFiles`: how many (1); past it, the first that fit are taken and the
+ *   rest listed as "Too many files"; `minFileSize`, `maxFileSize`: in bytes
+ * - `hint`: text under the prompt
+ * - `validate(file, details)`: your own check, returning error codes for a
+ *   file it refuses (or null), as Ark's
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <FileUpload.Root maxFiles={3}>
+ *     <FileUpload.Dropzone>Drop here <FileUpload.Trigger>or browse</FileUpload.Trigger></FileUpload.Dropzone>
+ *     <FileUpload.ItemGroup>
+ *       <FileUpload.Context>{(api) => api.acceptedFiles.map((file) => (
+ *         <FileUpload.Item key={file.name} file={file}>
+ *           <FileUpload.ItemName /> <FileUpload.ItemSizeText /> <FileUpload.ItemDeleteTrigger>×</FileUpload.ItemDeleteTrigger>
+ *         </FileUpload.Item>
+ *       ))}</FileUpload.Context>
+ *     </FileUpload.ItemGroup>
+ *     <FileUpload.HiddenInput />
+ *   </FileUpload.Root>
+ */
+import { type ReactNode } from 'react';
+import { FileUpload as Ark } from '@ark-ui/react/file-upload';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './file-upload.css';
+export type FileUploadProps = Omit<Ark.RootProps, 'acceptedFiles' | 'defaultAcceptedFiles' | 'onFileAccept' | 'label'> & {
+    label?: ReactNode;
+    files?: File[];
+    defaultFiles?: File[];
+    onFilesChange?: (files: File[]) => void;
+    hint?: ReactNode;
+    classes?: Classes<'root' | 'label' | 'dropzone' | 'icon' | 'prompt' | 'trigger' | 'hint' | 'itemGroup' | 'item' | 'itemPreview' | 'itemName' | 'size' | 'reason' | 'itemDeleteTrigger'>;
+};
+declare function FileUploadShortcut({ label, files, defaultFiles, onFilesChange, maxFiles, accept, minFileSize, maxFileSize, validate, hint, className, classes, ...rest }: FileUploadProps): import("react").JSX.Element;
+export declare const FileUpload: typeof FileUploadShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Dropzone: import("react").ForwardRefExoticComponent<Ark.DropzoneProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Ark.ItemGroupProps & import("react").RefAttributes<HTMLUListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Ark.ItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    ItemPreview: import("react").ForwardRefExoticComponent<Ark.ItemPreviewProps & import("react").RefAttributes<HTMLImageElement>>;
+    ItemPreviewImage: import("react").ForwardRefExoticComponent<Ark.ItemPreviewImageProps & import("react").RefAttributes<HTMLImageElement>>;
+    ItemName: import("react").ForwardRefExoticComponent<Ark.ItemNameProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemSizeText: import("react").ForwardRefExoticComponent<Ark.ItemSizeTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Ark.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Ark.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<Ark.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/file-upload/FileUpload.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A file upload: drop files on it or browse, then see and remove them.
+ *
+ *   <FileUpload label="Worksheets" files={files} onFilesChange={setFiles} accept=".pdf" maxFiles={5} hint="PDFs, up to 5" />
+ *
+ * - `files`, `defaultFiles`: the accepted Files; `onFilesChange`: called with them
+ * - `accept`: types to allow ('image/*', '.pdf', or an array of them)
+ * - `maxFiles`: how many (1); past it, the first that fit are taken and the
+ *   rest listed as "Too many files"; `minFileSize`, `maxFileSize`: in bytes
+ * - `hint`: text under the prompt
+ * - `validate(file, details)`: your own check, returning error codes for a
+ *   file it refuses (or null), as Ark's
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <FileUpload.Root maxFiles={3}>
+ *     <FileUpload.Dropzone>Drop here <FileUpload.Trigger>or browse</FileUpload.Trigger></FileUpload.Dropzone>
+ *     <FileUpload.ItemGroup>
+ *       <FileUpload.Context>{(api) => api.acceptedFiles.map((file) => (
+ *         <FileUpload.Item key={file.name} file={file}>
+ *           <FileUpload.ItemName /> <FileUpload.ItemSizeText /> <FileUpload.ItemDeleteTrigger>×</FileUpload.ItemDeleteTrigger>
+ *         </FileUpload.Item>
+ *       ))}</FileUpload.Context>
+ *     </FileUpload.ItemGroup>
+ *     <FileUpload.HiddenInput />
+ *   </FileUpload.Root>
+ */
+import { useEffect, useMemo, useRef } from 'react';
+import { FileUpload as Ark } from '@ark-ui/react/file-upload';
+import { createFileTypeValidator, getAcceptAttrString, getFileKey, isValidFileSize } from '@zag-js/file-utils';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partsOf, useControllable, withParts } from '../utils.js';
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { formatBytes } from '../format/format.js';
+import '../theme.css';
+import './file-upload.css';
+// Object URLs for image previews, revoked when the files go.
+function usePreviews(files) {
+    const urls = useMemo(() => new Map(files.filter((f) => f.type.startsWith('image/')).map((f) => [f, URL.createObjectURL(f)])), [files]);
+    useEffect(() => () => urls.forEach((url) => URL.revokeObjectURL(url)), [urls]);
+    return urls;
+}
+function FileUploadShortcut({ label = null, files, defaultFiles, onFilesChange, maxFiles = 1, accept, minFileSize, maxFileSize, validate, hint = null, className, classes, ...rest }) {
+    const t = useMessages();
+    const locale = useLocale();
+    const field = useFieldContext();
+    const part = partsOf('file-upload', classes);
+    const [accepted, setAccepted] = useControllable(files, defaultFiles ?? [], undefined);
+    const previews = usePreviews(accepted);
+    // From onFileAccept, which Zag calls whenever the accepted files change.
+    // (onFileChange also fires for rejections, carrying the accepted files as
+    // they were before this render: it would undo a drop of good and bad files.)
+    function acceptFiles(details) {
+        setAccepted(details.files);
+        onFilesChange?.(details.files);
+    }
+    // Zag rejects a whole drop that would go past maxFiles. Instead it gets no
+    // limit, and this takes files in order until there's no room: Zag checks
+    // each dropped file in turn, so it counts the ones Zag would take (the right
+    // type and size, not already there) through one drop.
+    const fitsType = useMemo(() => createFileTypeValidator(getAcceptAttrString(accept)), [accept]);
+    const drop = useRef({ taken: 0, open: false });
+    const limit = (file, details) => {
+        const own = validate?.(file, details);
+        if (own?.length)
+            return own;
+        if (maxFiles <= 1)
+            return null;
+        if (!drop.current.open) {
+            drop.current = { taken: 0, open: true };
+            queueMicrotask(() => { drop.current.open = false; });
+        }
+        const takes = fitsType(file)[0] && isValidFileSize(file, minFileSize, maxFileSize)[0]
+            && !details.acceptedFiles.some((f) => getFileKey(f) === getFileKey(file));
+        if (!takes)
+            return null;
+        if (details.acceptedFiles.length + drop.current.taken >= maxFiles)
+            return ['TOO_MANY_FILES'];
+        drop.current.taken++;
+        return null;
+    };
+    return (_jsxs(Ark.Root, { ...(t.zag.fileUpload && { translations: t.zag.fileUpload }), ...rest, ...part('root'), className: cx(className, classes?.root), maxFiles: maxFiles > 1 ? Number.MAX_SAFE_INTEGER : maxFiles, validate: limit, ...(accept !== undefined && { accept }), ...(minFileSize !== undefined && { minFileSize }), ...(maxFileSize !== undefined && { maxFileSize }), acceptedFiles: accepted, onFileAccept: acceptFiles, children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsxs(Ark.Dropzone, { ...part('dropzone'), children: [_jsx("iconify-icon", { ...part('icon'), icon: "lucide:upload", "aria-hidden": "true" }), _jsxs("span", { ...part('prompt'), children: [t.fileUpload.prompt(maxFiles > 1), " ", _jsx(Ark.Trigger, { ...part('trigger'), children: t.fileUpload.browse })] }), hint && _jsx("span", { ...part('hint'), children: hint })] }), _jsx(Ark.HiddenInput, {}), _jsx(Ark.Context, { children: (api) => _jsxs(_Fragment, { children: [api.acceptedFiles.length > 0 && _jsx(Ark.ItemGroup, { type: "accepted", ...part('item-group'), children: api.acceptedFiles.map((file) => (_jsxs(Ark.Item, { file: file, ...part('item'), children: [_jsx(Ark.ItemPreview, { type: ".*", ...part('item-preview'), children: previews.has(file) ? _jsx("img", { src: previews.get(file), alt: "" }) : _jsx("iconify-icon", { icon: "lucide:file", "aria-hidden": "true" }) }), _jsx(Ark.ItemName, { ...part('item-name') }), _jsx("span", { ...part('size'), children: formatBytes(file.size, { locale }) }), _jsx(Ark.ItemDeleteTrigger, { ...part('item-delete-trigger'), children: _jsx("iconify-icon", { icon: "lucide:x" }) })] }, `${file.name}:${file.lastModified}`))) }), api.rejectedFiles.length > 0 && _jsx(Ark.ItemGroup, { type: "rejected", ...part('item-group'), children: api.rejectedFiles.map(({ file, errors }) => (_jsxs(Ark.Item, { file: file, ...part('item'), "data-rejected": "", children: [_jsx(Ark.ItemPreview, { type: ".*", ...part('item-preview'), children: _jsx("iconify-icon", { icon: "lucide:file-x", "aria-hidden": "true" }) }), _jsx(Ark.ItemName, { ...part('item-name') }), _jsx("span", { ...part('reason'), children: errors.map((e) => t.fileUpload.reasons[e] ?? e).join(', ') }), _jsx(Ark.ItemDeleteTrigger, { ...part('item-delete-trigger'), children: _jsx("iconify-icon", { icon: "lucide:x" }) })] }, `${file.name}:${file.lastModified}`))) })] }) })] }));
+}
+export const FileUpload = withParts(FileUploadShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    Dropzone: Ark.Dropzone,
+    Trigger: Ark.Trigger,
+    ItemGroup: Ark.ItemGroup,
+    Item: Ark.Item,
+    ItemPreview: Ark.ItemPreview,
+    ItemPreviewImage: Ark.ItemPreviewImage,
+    ItemName: Ark.ItemName,
+    ItemSizeText: Ark.ItemSizeText,
+    ItemDeleteTrigger: Ark.ItemDeleteTrigger,
+    ClearTrigger: Ark.ClearTrigger,
+    HiddenInput: Ark.HiddenInput,
+    Context: Ark.Context,
+});

package/dist/file-upload/file-upload.css

@@ -0,0 +1,32 @@
+@layer ui {
+  [data-scope=file-upload][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=file-upload][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=file-upload][data-part=dropzone] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
+    padding: 1.5rem; box-sizing: border-box; text-align: center; background: var(--ui-surface);
+    border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); font-size: 14px; cursor: pointer; outline: none;
+    &:hover { border-color: var(--ui-muted); }
+    &:focus-visible { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[data-dragging] { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
+    &:is([data-invalid], [aria-invalid=true]) { border-color: var(--ui-danger); }
+    &[data-disabled] { opacity: 0.5; cursor: not-allowed; } }
+  [data-scope=file-upload][data-part=icon] { font-size: 20px; color: var(--ui-muted); }
+  [data-scope=file-upload][data-part=trigger] { padding: 0; border: none; background: transparent; color: var(--ui-accent);
+    font: inherit; font-weight: 500; cursor: pointer;
+    &:hover { text-decoration: underline; } }
+  [data-scope=file-upload][data-part=hint] { color: var(--ui-muted); font-size: 12px; }
+  [data-scope=file-upload][data-part=item-group] { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none;
+    /* Rejected files follow the accepted ones in a second list. */
+    & + & { margin-top: 0.5rem; } }
+  [data-scope=file-upload][data-part=item] { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.25rem 0.5rem 0.5rem;
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px; }
+  [data-scope=file-upload][data-part=item-preview] { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem;
+    border-radius: 4px; overflow: hidden; background: var(--ui-hover); color: var(--ui-muted);
+    [data-rejected] > & { color: var(--ui-danger); }
+    img { width: 100%; height: 100%; object-fit: cover; } }
+  [data-scope=file-upload][data-part=item-name] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  [data-scope=file-upload]:is([data-part=size], [data-part=reason]) { font-size: 12px; white-space: nowrap; color: var(--ui-muted); }
+  [data-scope=file-upload][data-part=reason] { color: var(--ui-danger); }
+  [data-scope=file-upload][data-part=item-delete-trigger] { display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem;
+    border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); } }
+}

package/dist/format/FormatNumber.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Formats a number for people (in a <data> element, which keeps the raw value):
+ * currency, percent, units, compact.
+ *
+ *   <FormatNumber value={1820} style="currency" currency="GBP" />
+ *   <FormatNumber value={0.125} style="percent" />
+ *   <FormatNumber value={12400} notation="compact" />
+ *
+ * - `value`; and Intl.NumberFormat's options as props: `style` ('decimal',
+ *   'currency', 'percent', 'unit'), `currency`, `unit`, `notation`,
+ *   `minimumFractionDigits`, `maximumFractionDigits`, `signDisplay`…
+ *   (`style` is Intl's, as in Ark's Format.Number: style it with `className`)
+ * - `locale`: the LocaleProvider's (or the browser's) by default
+ *
+ * Also FormatBytes (`value` in bytes: '2.4 MB'; `binary` for MiB) and
+ * FormatRelative (`value` a date: '2 hours ago', kept up to date; in a
+ * <time>). As functions, for strings: formatNumber, formatBytes, formatRelative.
+ */
+import { type HTMLAttributes } from 'react';
+type Base = Omit<HTMLAttributes<HTMLElement>, 'children' | 'style'> & {
+    locale?: string;
+    className?: string;
+};
+export type FormatNumberProps = Base & Omit<Intl.NumberFormatOptions, 'style'> & {
+    value: number | bigint | null | undefined;
+    style?: Intl.NumberFormatOptions['style'];
+};
+export declare function FormatNumber({ value, locale, style, className, ...props }: FormatNumberProps): import("react").JSX.Element;
+export type FormatBytesProps = Base & {
+    value: number | null | undefined;
+    binary?: boolean;
+    maximumFractionDigits?: number;
+};
+export declare function FormatBytes({ value, locale, binary, maximumFractionDigits, className, ...rest }: FormatBytesProps): import("react").JSX.Element;
+export type FormatRelativeProps = Base & {
+    value: Date | string | number | null | undefined;
+    numeric?: 'auto' | 'always';
+    live?: boolean;
+};
+/** A time relative to now, kept up to date (`live`, default true: each 30 seconds). */
+export declare function FormatRelative({ value, locale, numeric, live, className, ...rest }: FormatRelativeProps): import("react").JSX.Element;
+export {};

package/dist/format/FormatNumber.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Formats a number for people (in a <data> element, which keeps the raw value):
+ * currency, percent, units, compact.
+ *
+ *   <FormatNumber value={1820} style="currency" currency="GBP" />
+ *   <FormatNumber value={0.125} style="percent" />
+ *   <FormatNumber value={12400} notation="compact" />
+ *
+ * - `value`; and Intl.NumberFormat's options as props: `style` ('decimal',
+ *   'currency', 'percent', 'unit'), `currency`, `unit`, `notation`,
+ *   `minimumFractionDigits`, `maximumFractionDigits`, `signDisplay`…
+ *   (`style` is Intl's, as in Ark's Format.Number: style it with `className`)
+ * - `locale`: the LocaleProvider's (or the browser's) by default
+ *
+ * Also FormatBytes (`value` in bytes: '2.4 MB'; `binary` for MiB) and
+ * FormatRelative (`value` a date: '2 hours ago', kept up to date; in a
+ * <time>). As functions, for strings: formatNumber, formatBytes, formatRelative.
+ */
+import { useEffect, useState } from 'react';
+import { formatBytes, formatNumber, formatRelative } from './format.js';
+import { useLocale } from './LocaleProvider.js';
+import { cx, partsOf } from '../utils.js';
+// Intl's options, taken out of the props (the rest go on the element).
+const intlKeys = ['currency', 'currencyDisplay', 'currencySign', 'unit', 'unitDisplay', 'notation', 'compactDisplay', 'signDisplay',
+    'useGrouping', 'minimumIntegerDigits', 'minimumFractionDigits', 'maximumFractionDigits', 'minimumSignificantDigits',
+    'maximumSignificantDigits', 'roundingMode', 'roundingIncrement', 'trailingZeroDisplay', 'numberingSystem'];
+export function FormatNumber({ value, locale, style, className, ...props }) {
+    const app = useLocale();
+    const part = partsOf('format');
+    const options = { ...(style && { style }) };
+    const rest = {};
+    for (const [key, v] of Object.entries(props)) {
+        if (intlKeys.includes(key))
+            options[key] = v;
+        else
+            rest[key] = v;
+    }
+    return _jsx("data", { ...rest, ...part('number'), className: cx(className), value: value == null ? '' : String(value), children: formatNumber(value, { ...options, locale: locale ?? app }) });
+}
+export function FormatBytes({ value, locale, binary, maximumFractionDigits, className, ...rest }) {
+    const app = useLocale();
+    const part = partsOf('format');
+    return _jsx("data", { ...rest, ...part('bytes'), className: cx(className), value: value == null ? '' : String(value), children: formatBytes(value, { locale: locale ?? app, binary, maximumFractionDigits }) });
+}
+/** A time relative to now, kept up to date (`live`, default true: each 30 seconds). */
+export function FormatRelative({ value, locale, numeric, live = true, className, ...rest }) {
+    const app = useLocale();
+    const part = partsOf('format');
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        if (!live)
+            return;
+        const timer = setInterval(() => setNow(new Date()), 30000);
+        return () => clearInterval(timer);
+    }, [live]);
+    const when = value == null ? null : value instanceof Date ? value : new Date(value);
+    return (_jsx("time", { ...rest, ...part('relative'), className: cx(className), dateTime: when && !Number.isNaN(when.getTime()) ? when.toISOString() : undefined, title: when ? when.toLocaleString(locale ?? app) : undefined, children: formatRelative(when, { locale: locale ?? app, now, numeric }) }));
+}