@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/app-shell/Topbar.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The app's top bar: content on the left, `end` on the right. In an AppShell
+ * on a phone it starts with a button opening the sidebar drawer.
+ *
+ *   <Topbar end={<Button icon="lucide:bell" aria-label="Notifications" />}>
+ *     <Breadcrumbs items={trail} />
+ *   </Topbar>
+ *
+ * - `end`: actions on the right
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './app-shell.css';
+export type TopbarProps = HTMLAttributes<HTMLElement> & {
+    end?: ReactNode;
+    classes?: Classes<'root' | 'menu' | 'start' | 'end'>;
+};
+export declare function Topbar({ end, className, classes, children, ...rest }: TopbarProps): import("react").JSX.Element;

package/dist/app-shell/Topbar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import { useShell } from './shell.js';
+import '../theme.css';
+import './app-shell.css';
+export function Topbar({ end = null, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const shell = useShell();
+    const part = partsOf('topbar', classes);
+    return (_jsxs("header", { ...rest, ...part('root'), className: cx(className, classes?.root), children: [shell?.mobile && (_jsx("button", { ...part('menu'), type: "button", "aria-label": t.shell.openMenu, "aria-expanded": shell.drawerOpen, onClick: shell.toggle, children: _jsx("iconify-icon", { icon: "lucide:menu", "aria-hidden": "true" }) })), _jsx("div", { ...part('start'), children: children }), end && _jsx("div", { ...part('end'), children: end })] }));
+}

package/dist/app-shell/app-shell.css

@@ -0,0 +1,41 @@
+/* The shell lays out its children by their data-scope: sidebar, topbar, page. */
+@layer ui {
+  [data-scope=app-shell][data-part=root] {
+    display: grid; grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr;
+    grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100dvh; transition: grid-template-columns 200ms ease;
+    background: var(--ui-canvas); color: var(--ui-text); font-family: var(--ui-font);
+
+    > [data-scope=sidebar] { grid-area: sidebar; }
+    &[data-rail] { grid-template-columns: var(--ui-sidebar-rail-width) minmax(0, 1fr); }
+    /* On phones the sidebar leaves the grid and slides in as a drawer. */
+    &[data-mobile] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
+    &[data-inset][data-mobile] > [data-scope=page] { margin: 0 0.5rem 0.5rem; }
+    > [data-scope=topbar] { grid-area: topbar; }
+    > [data-scope=page] { grid-area: main; }
+
+    /* Inset: the page is a rounded panel on the frame, and the sidebar and top
+       bar sit flat around it. The grey sidebar's items go white. */
+    &[data-inset] { background: var(--ui-frame);
+      > [data-scope=page] { background: var(--ui-canvas); margin: 0 0.75rem 0.75rem; border-radius: calc(var(--ui-radius) + 10px); }
+      > [data-scope=topbar] { background: var(--ui-frame); border-bottom: none; }
+      > [data-scope=sidebar] { background: var(--ui-sidebar-bg); border-right: none;
+        --ui-sidebar-hover: var(--ui-sidebar-inset-hover);
+        --ui-sidebar-active: var(--ui-sidebar-inset-active);
+        --ui-sidebar-active-shadow: var(--ui-sidebar-inset-active-shadow); } }
+  }
+
+  [data-scope=topbar][data-part=root] { display: flex; align-items: center; gap: 0.75rem; height: 3.5rem; padding: 0 1rem;
+    box-sizing: border-box; min-width: 0; position: sticky; top: 0; z-index: 36;
+    background: var(--ui-surface); border-bottom: 1px solid var(--ui-border);
+    @media (min-width: 768px) { padding: 0 1.5rem; } }
+  [data-scope=topbar][data-part=start] { display: flex; align-items: center; gap: 0.75rem; flex-grow: 1; min-width: 0; }
+  [data-scope=topbar][data-part=end] { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
+  [data-scope=app-shell][data-part=backdrop] { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.4);
+    animation: ui-fade-in 200ms ease-out; }
+  [data-scope=topbar][data-part=menu] { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-left: -0.5rem;
+    flex-shrink: 0; padding: 0; border: none; background: transparent; border-radius: var(--ui-radius); color: var(--ui-text);
+    font-size: 18px; cursor: pointer;
+    &:hover { background: var(--ui-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+  @keyframes ui-fade-in { from { opacity: 0; } }
+}

package/dist/app-shell/shell.d.ts

@@ -0,0 +1,9 @@
+export type Shell = {
+    rail: boolean;
+    mobile: boolean;
+    drawerOpen: boolean;
+    toggle: () => void;
+    close: () => void;
+};
+export declare const ShellContext: import("react").Context<Shell | null>;
+export declare const useShell: () => Shell | null;

package/dist/app-shell/shell.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const ShellContext = createContext(null);
+export const useShell = () => useContext(ShellContext);

package/dist/attachments/Attachments.d.ts

@@ -0,0 +1,84 @@
+/**
+ * The files added to a page or form, as a grid of tiles (image thumbnails, or
+ * an icon and the extension) or a compact list.
+ *
+ *   <Attachments items={files} onItemsChange={setFiles} removable addable />
+ *
+ * - `items`, `defaultItems`; `onItemsChange`: called with the new list. Plain
+ *   objects `{ name, size (bytes, or text), type (MIME), url, thumb }` or File
+ *   objects (e.g. from FileUpload or an <input type=file>), which are
+ *   previewed locally
+ * - `layout`, `defaultLayout`: 'grid' (default) or 'list'; `onLayoutChange`
+ * - `switchable`: a grid/list switch above the files, so people pick; with
+ *   `persist` (a localStorage key) their choice is remembered
+ * - `columns`: the most tiles per row in the grid; fewer when tiles would get
+ *   too small (without it, as many as fit)
+ * - `removable`: a remove button on each; `onRemove` gets the item
+ * - `addable`: an "Add files" tile that opens the file picker, and files can
+ *   be dropped onto the attachments; `onAdd` gets the Files
+ * - `accept` (MIME types or extensions, e.g. 'image/*,.pdf'), `maxFiles` and
+ *   `maxFileSize` (bytes) limit what's added; files that don't fit are listed
+ *   with the reason, and `onReject` gets `[{ file, reason }]`
+ * - `addLabel`: the add tile's text ('Add files'); `emptyText`: shown when
+ *   there are no files and it isn't `addable`
+ * - `label`: a label above it (skipped inside a Field, whose label, hint and
+ *   error it takes, as the other controls do)
+ * - `name`: posts the new Files with a plain <form> (a hidden file input);
+ *   `keptName` also posts the `id` of each saved item still in the list, so
+ *   the server can tell what was removed
+ * - `disabled`: read only (no adding or removing); a disabled Field's too
+ *
+ * In a new-record form, start with no items; in an edit form, with the
+ * record's saved files as plain objects (with an `id`). Files added are
+ * Files, so on submit: new = items that are Files, kept = the rest, removed =
+ * the saved ones no longer there.
+ *
+ * Clicking an image opens it large; other files open their `url`, if any, in
+ * a new tab. Files with a `url` get a download button.
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './attachments.css';
+export type Attachment = File | {
+    id?: string | number;
+    name?: string;
+    size?: number | string;
+    type?: string;
+    url?: string;
+    thumb?: string;
+};
+export type AttachmentsLayout = 'grid' | 'list';
+export type AttachmentRejection = {
+    file: File;
+    reason: string;
+};
+export type AttachmentsProps = Omit<HTMLAttributes<HTMLDivElement>, 'onDrop'> & {
+    items?: Attachment[];
+    defaultItems?: Attachment[];
+    onItemsChange?: (items: Attachment[]) => void;
+    layout?: AttachmentsLayout;
+    defaultLayout?: AttachmentsLayout;
+    onLayoutChange?: (layout: AttachmentsLayout) => void;
+    switchable?: boolean;
+    persist?: string | null;
+    columns?: number | null;
+    removable?: boolean;
+    addable?: boolean;
+    accept?: string | null;
+    maxFiles?: number | null;
+    maxFileSize?: number | null;
+    addLabel?: ReactNode;
+    emptyText?: ReactNode;
+    onRemove?: (item: Attachment) => void;
+    onAdd?: (files: File[]) => void;
+    onReject?: (rejected: AttachmentRejection[]) => void;
+    label?: ReactNode;
+    name?: string;
+    keptName?: string;
+    disabled?: boolean;
+    classes?: Classes<'root' | 'header' | 'label' | 'switch' | 'empty' | 'files' | 'file' | 'open' | 'thumb' | 'icon' | 'ext' | 'meta' | 'name' | 'size' | 'actions' | 'action' | 'addTile' | 'addInput' | 'addIcon' | 'addText' | 'addLabel' | 'limit' | 'rejected' | 'dropHint' | 'preview' | 'downloadLink'>;
+};
+export declare const formatSize: (bytes: number, locale?: string) => string;
+export declare function Attachments({ items: itemsProp, defaultItems, onItemsChange, layout: layoutProp, defaultLayout, onLayoutChange, switchable, persist, columns, removable, addable, accept, maxFiles, maxFileSize, addLabel: addLabelProp, emptyText, onRemove, onAdd, onReject, label, name, keptName, disabled: disabledProp, className, classes, style, ...rest }: AttachmentsProps): import("react").JSX.Element;

package/dist/attachments/Attachments.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The files added to a page or form, as a grid of tiles (image thumbnails, or
+ * an icon and the extension) or a compact list.
+ *
+ *   <Attachments items={files} onItemsChange={setFiles} removable addable />
+ *
+ * - `items`, `defaultItems`; `onItemsChange`: called with the new list. Plain
+ *   objects `{ name, size (bytes, or text), type (MIME), url, thumb }` or File
+ *   objects (e.g. from FileUpload or an <input type=file>), which are
+ *   previewed locally
+ * - `layout`, `defaultLayout`: 'grid' (default) or 'list'; `onLayoutChange`
+ * - `switchable`: a grid/list switch above the files, so people pick; with
+ *   `persist` (a localStorage key) their choice is remembered
+ * - `columns`: the most tiles per row in the grid; fewer when tiles would get
+ *   too small (without it, as many as fit)
+ * - `removable`: a remove button on each; `onRemove` gets the item
+ * - `addable`: an "Add files" tile that opens the file picker, and files can
+ *   be dropped onto the attachments; `onAdd` gets the Files
+ * - `accept` (MIME types or extensions, e.g. 'image/*,.pdf'), `maxFiles` and
+ *   `maxFileSize` (bytes) limit what's added; files that don't fit are listed
+ *   with the reason, and `onReject` gets `[{ file, reason }]`
+ * - `addLabel`: the add tile's text ('Add files'); `emptyText`: shown when
+ *   there are no files and it isn't `addable`
+ * - `label`: a label above it (skipped inside a Field, whose label, hint and
+ *   error it takes, as the other controls do)
+ * - `name`: posts the new Files with a plain <form> (a hidden file input);
+ *   `keptName` also posts the `id` of each saved item still in the list, so
+ *   the server can tell what was removed
+ * - `disabled`: read only (no adding or removing); a disabled Field's too
+ *
+ * In a new-record form, start with no items; in an edit form, with the
+ * record's saved files as plain objects (with an `id`). Files added are
+ * Files, so on submit: new = items that are Files, kept = the rest, removed =
+ * the saved ones no longer there.
+ *
+ * Clicking an image opens it large; other files open their `url`, if any, in
+ * a new tab. Files with a `url` get a download button.
+ */
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createFileTypeValidator, getAcceptAttrString, getFileKey } from '@zag-js/file-utils';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { Dialog } from '../dialog/Dialog.js';
+import { formatBytes } from '../format/format.js';
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { Segmented } from '../segment-group/Segmented.js';
+import { cx, partsOf, useControllable } from '../utils.js';
+import '../theme.css';
+import './attachments.css';
+// A file's size ('2.4 MB'): formatBytes, kept under its old name.
+export const formatSize = (bytes, locale) => formatBytes(bytes, { locale });
+function iconFor(type, name) {
+    const n = name.toLowerCase();
+    if (type.startsWith('image/') || /\.(jpe?g|png|gif|webp|avif|svg)$/.test(n))
+        return 'lucide:image';
+    if (type.startsWith('video/') || /\.(mp4|mov|webm)$/.test(n))
+        return 'lucide:file-video';
+    if (type.startsWith('audio/') || /\.(mp3|wav|m4a)$/.test(n))
+        return 'lucide:file-audio';
+    if (/\.(xlsx?|csv|numbers)$/.test(n))
+        return 'lucide:file-spreadsheet';
+    if (/\.(zip|rar|7z|gz)$/.test(n))
+        return 'lucide:file-archive';
+    if (/\.(pdf|docx?|txt|md|pages|rtf)$/.test(n))
+        return 'lucide:file-text';
+    return 'lucide:file';
+}
+const fileKey = (file) => getFileKey(file);
+function saved(key) {
+    try {
+        const value = key ? localStorage.getItem(key) : null;
+        return value === 'grid' || value === 'list' ? value : null;
+    }
+    catch {
+        return null;
+    }
+}
+// Local previews for Files, made once each.
+const urls = new WeakMap();
+function localUrl(file) {
+    if (!urls.has(file))
+        urls.set(file, URL.createObjectURL(file));
+    return urls.get(file);
+}
+// One shape for both plain objects and Files.
+function info(item, locale) {
+    const file = typeof File !== 'undefined' && item instanceof File ? item : null;
+    const url = file ? localUrl(file) : item.url;
+    const type = item.type ?? '';
+    const name = item.name || 'Untitled';
+    const image = type.startsWith('image/') || /\.(jpe?g|png|gif|webp|avif|svg)$/i.test(name);
+    return {
+        item, name, url, image,
+        size: typeof item.size === 'number' ? formatSize(item.size, locale) : (item.size ?? ''),
+        thumb: (!file && item.thumb) || (image ? url ?? null : null),
+        ext: (name.match(/\.([a-z0-9]+)$/i)?.[1] ?? '').toUpperCase(),
+        icon: iconFor(type, name),
+    };
+}
+// Whether a file matches `accept` (MIME types, type/* or extensions):
+// Zag's own check, the one FileUpload uses, so both take the same files.
+const typeChecker = (accept) => {
+    const fits = createFileTypeValidator(getAcceptAttrString(accept ?? undefined));
+    return (file) => !accept || fits(file)[0];
+};
+export function Attachments({ items: itemsProp, defaultItems = [], onItemsChange, layout: layoutProp, defaultLayout = 'grid', onLayoutChange, switchable = false, persist = null, columns = null, removable = false, addable = false, accept = null, maxFiles = null, maxFileSize = null, addLabel: addLabelProp, emptyText = null, onRemove, onAdd, onReject, label = null, name, keptName, disabled: disabledProp = false, className, classes, style, ...rest }) {
+    const t = useMessages();
+    const addLabel = addLabelProp ?? t.attachments.add;
+    const layouts = [{ value: 'grid', label: t.attachments.grid, icon: 'lucide:layout-grid' }, { value: 'list', label: t.attachments.list, icon: 'lucide:list' }];
+    const part = partsOf('attachments', classes);
+    const field = useFieldContext();
+    const id = useId();
+    const labelId = field ? field.ids.label : label ? `${id}-label` : undefined;
+    const disabled = disabledProp || !!field?.disabled;
+    // Read only: nothing added or removed.
+    if (disabled) {
+        addable = false;
+        removable = false;
+    }
+    const [items, setItems] = useControllable(itemsProp, defaultItems, onItemsChange);
+    // The layout: remembered under `persist`, when there's one.
+    const [initialLayout] = useState(() => saved(persist) ?? defaultLayout);
+    const [layout, setLayoutValue] = useControllable(layoutProp, initialLayout, onLayoutChange);
+    function setLayout(next) {
+        setLayoutValue(next);
+        try {
+            if (persist)
+                localStorage.setItem(persist, next);
+        }
+        catch { /* private mode */ }
+    }
+    const locale = useLocale();
+    const list = items.map((item) => info(item, locale));
+    const count = items.length;
+    const atMax = !!maxFiles && count >= maxFiles;
+    function remove(entry) {
+        setItems(items.filter((item) => item !== entry.item));
+        onRemove?.(entry.item);
+    }
+    const fitsType = useMemo(() => typeChecker(accept), [accept]);
+    // For a plain <form>: the new Files, in a hidden file input. A DataTransfer
+    // is the only way to set an input's files.
+    const posted = useRef(null);
+    const newFiles = items.filter((item) => typeof File !== 'undefined' && item instanceof File);
+    useEffect(() => {
+        if (!posted.current)
+            return;
+        const transfer = new DataTransfer();
+        newFiles.forEach((file) => transfer.items.add(file));
+        posted.current.files = transfer.files;
+    }, [newFiles.map(fileKey).join('\u0000')]); // eslint-disable-line react-hooks/exhaustive-deps
+    const keptIds = items.filter((item) => !(typeof File !== 'undefined' && item instanceof File))
+        .map((item) => item.id).filter((id) => id != null);
+    // Adds what fits (type, size, count); the rest is rejected with a reason.
+    const [rejected, setRejected] = useState([]);
+    function addFiles(files) {
+        const ok = [];
+        const bad = [];
+        for (const file of files) {
+            if (!fitsType(file))
+                bad.push({ file, reason: t.attachments.notType });
+            else if (maxFileSize && file.size > maxFileSize)
+                bad.push({ file, reason: t.attachments.over(formatSize(maxFileSize, locale)) });
+            else if (maxFiles && count + ok.length >= maxFiles)
+                bad.push({ file, reason: t.attachments.limit(maxFiles) });
+            else
+                ok.push(file);
+        }
+        setRejected(bad);
+        if (bad.length)
+            onReject?.(bad);
+        if (!ok.length)
+            return;
+        setItems([...items, ...ok]);
+        onAdd?.(ok);
+    }
+    function added(e) {
+        const files = Array.from(e.target.files ?? []);
+        e.target.value = '';
+        if (files.length)
+            addFiles(files);
+    }
+    // Dropping files: only while addable, and only for files (not text).
+    const root = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const hasFiles = (e) => addable && Array.from(e.dataTransfer?.types ?? []).includes('Files');
+    function dragOver(e) {
+        if (!hasFiles(e))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = atMax ? 'none' : 'copy';
+        setDragging(true);
+    }
+    function dragLeave(e) {
+        if (!root.current?.contains(e.relatedTarget))
+            setDragging(false);
+    }
+    function dropped(e) {
+        if (!hasFiles(e))
+            return;
+        e.preventDefault();
+        setDragging(false);
+        addFiles(Array.from(e.dataTransfer.files ?? []));
+    }
+    // The add tile would start a row on its own when the files fill their rows;
+    // then it becomes a slim full-width row instead of a big empty tile. The
+    // column count is read off the grid, so it works for auto-fill grids too.
+    const filesEl = useRef(null);
+    const [gridColumns, setGridColumns] = useState(0);
+    useEffect(() => {
+        const el = filesEl.current;
+        if (!el)
+            return;
+        // The observer reports once on observe, then on every resize.
+        const observer = new ResizeObserver(() => {
+            const tracks = getComputedStyle(el).gridTemplateColumns;
+            setGridColumns(tracks === 'none' ? 0 : tracks.split(' ').filter(Boolean).length);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [layout, columns, list.length]);
+    const addWide = layout === 'grid' && gridColumns > 0 && list.length > 0 && list.length % gridColumns === 0;
+    const [previewing, setPreviewing] = useState(null);
+    const [previewOpen, setPreviewOpen] = useState(false);
+    function open(entry) {
+        if (entry.image && entry.url) {
+            setPreviewing(entry);
+            setPreviewOpen(true);
+        }
+        else if (entry.url)
+            window.open(entry.url, '_blank', 'noopener');
+    }
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), ref: root, "data-layout": layout, "aria-labelledby": labelId, "aria-describedby": field?.ariaDescribedby, "aria-invalid": field?.invalid || undefined, "data-invalid": field?.invalid || undefined, "data-disabled": disabled || undefined, "data-empty": !list.length || undefined, "data-add-wide": addWide || undefined, "data-fixed": columns ? '' : undefined, style: { ...style, ...(columns && { '--columns': columns }) }, onDragEnter: dragOver, onDragOver: dragOver, onDragLeave: dragLeave, onDrop: dropped, role: "group", children: [((label && !field) || switchable) && (_jsxs("div", { ...part('header'), children: [label && !field && _jsx("span", { ...part('label'), id: labelId, children: label }), switchable && (_jsx(Segmented, { className: classes?.switch, size: "sm", iconOnly: true, "aria-label": t.attachments.layout, items: layouts, value: layout, onValueChange: (next) => next && setLayout(next) }))] })), name && _jsx("input", { ref: posted, type: "file", name: name, multiple: true, hidden: true, "aria-hidden": "true", tabIndex: -1 }), keptName && keptIds.map((kept) => _jsx("input", { type: "hidden", name: keptName, value: String(kept) }, String(kept))), !list.length && !addable && emptyText && _jsx("p", { ...part('empty'), children: emptyText }), _jsxs("ul", { ...part('files'), ref: filesEl, children: [list.map((entry, i) => (_jsxs("li", { ...part('file'), children: [_jsxs("button", { ...part('open'), type: "button", "aria-label": t.attachments.open(entry.name), onClick: () => open(entry), children: [_jsx("span", { ...part('thumb'), children: entry.thumb ? _jsx("img", { src: entry.thumb, alt: "", loading: "lazy" }) : _jsxs(_Fragment, { children: [_jsx("iconify-icon", { ...part('icon'), icon: entry.icon, "aria-hidden": "true" }), entry.ext && _jsx("span", { ...part('ext'), children: entry.ext })] }) }), _jsxs("span", { ...part('meta'), children: [_jsx("span", { ...part('name'), children: entry.name }), entry.size && _jsx("span", { ...part('size'), children: entry.size })] })] }), _jsxs("span", { ...part('actions'), children: [entry.url && (_jsx("a", { ...part('action'), href: entry.url, download: entry.name, "aria-label": t.attachments.downloadFile(entry.name), children: _jsx("iconify-icon", { icon: "lucide:download" }) })), removable && (_jsx("button", { ...part('action'), type: "button", "aria-label": t.common.remove(entry.name), onClick: () => remove(entry), children: _jsx("iconify-icon", { icon: "lucide:x" }) }))] })] }, i))), addable && !atMax && (_jsx("li", { ...part('file'), "data-add": "", children: _jsxs("label", { ...part('add-tile'), children: [_jsx("input", { ...part('add-input'), ...(field && { id: field.ids.control }), type: "file", multiple: maxFiles !== 1, ...(accept && { accept }), onChange: added }), _jsx("span", { ...part('add-icon'), children: _jsx("iconify-icon", { icon: "lucide:plus" }) }), _jsxs("span", { ...part('add-text'), children: [_jsx("span", { ...part('add-label'), children: addLabel }), !list.length && _jsx("span", { ...part('limit'), children: t.attachments.orDrop }), maxFiles && list.length > 0 && _jsx("span", { ...part('limit'), children: t.attachments.count(count, maxFiles) })] })] }) }))] }), rejected.length > 0 && (_jsx("ul", { ...part('rejected'), role: "alert", children: rejected.map((item, i) => _jsx("li", { children: t.attachments.notAdded(item.file.name, item.reason) }, i)) })), dragging && (_jsxs("div", { ...part('drop-hint'), "aria-hidden": "true", children: [_jsx("iconify-icon", { icon: "lucide:upload" }), _jsx("span", { children: atMax && maxFiles ? t.attachments.limit(maxFiles) : t.attachments.dropToAdd })] })), _jsx(Dialog, { size: "lg", heading: previewing?.name, open: previewOpen, onOpenChange: setPreviewOpen, footer: previewing && _jsx("a", { ...part('download-link'), href: previewing.url, download: previewing.name, children: t.attachments.download }), children: previewing && _jsx("img", { ...part('preview'), src: previewing.url, alt: previewing.name }) })] }));
+}

package/dist/attachments/attachments.css

@@ -0,0 +1,86 @@
+@layer ui {
+  [data-scope=attachments][data-part=root] { display: block; position: relative; width: 100%; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    --tile-radius: calc(var(--ui-radius) + 2px); }
+  [data-scope=attachments][data-part=empty] { margin: 0; color: var(--ui-muted); }
+  [data-scope=attachments][data-part=files] { margin: 0; padding: 0; list-style: none;
+    /* Grid: tiles with a 4:3 preview and the name under it. Rows share a height, so the add tile matches. */
+    [data-layout=grid] > & { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); grid-auto-rows: 1fr; gap: 0.75rem; }
+    /* With `columns`: at most that many, fewer when tiles would drop below 7rem. */
+    [data-layout=grid][data-fixed] > & { grid-template-columns: repeat(auto-fill, minmax(max(7rem, calc((100% - (var(--columns) - 1) * 0.75rem) / var(--columns))), 1fr)); }
+    [data-layout=grid][data-add-wide] > & { grid-auto-rows: auto; }
+    /* List: rows with a small preview, the name and size, and the actions. */
+    [data-layout=list] > & { display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-border);
+      border-radius: var(--tile-radius); box-shadow: var(--ui-card-shadow); overflow: hidden; } }
+  [data-scope=attachments][data-part=file] { position: relative; min-width: 0;
+    [data-layout=grid] & { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--tile-radius); overflow: hidden; box-shadow: var(--ui-card-shadow); }
+    [data-layout=grid] &[data-add] { border: none; background: transparent; box-shadow: none; overflow: visible; }
+    [data-layout=grid]:is([data-add-wide], [data-empty]) &[data-add] { grid-column: 1 / -1; }
+    [data-layout=list] & { display: flex; align-items: center; border-bottom: 1px solid var(--ui-border);
+      &:last-child, &[data-add] { border-bottom: none; } } }
+  [data-scope=attachments][data-part=open] { display: flex; width: 100%; padding: 0; border: none; background: transparent; color: inherit; font: inherit;
+    text-align: left; cursor: pointer; border-radius: inherit;
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: 2px; }
+    [data-layout=grid] & { flex-direction: column; height: 100%; }
+    [data-layout=list] & { align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; flex-grow: 1; min-width: 0;
+      &:hover { background: color-mix(in srgb, var(--ui-hover) 60%, transparent); } } }
+  [data-scope=attachments][data-part=thumb] { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--ui-hover); color: var(--ui-muted);
+    & img { display: block; width: 100%; height: 100%; object-fit: cover; }
+    [data-layout=grid] & { aspect-ratio: 4 / 3; width: 100%; }
+    [data-layout=list] & { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--ui-radius); } }
+  [data-scope=attachments][data-part=icon] { font-size: 26px; [data-layout=list] & { font-size: 18px; } }
+  [data-scope=attachments][data-part=ext] { position: absolute; bottom: 0.375rem; left: 50%; transform: translateX(-50%); padding: 0 0.375rem; border-radius: 4px;
+    background: var(--ui-surface); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--ui-muted);
+    [data-layout=list] & { display: none; } }
+  [data-scope=attachments][data-part=meta] { display: flex; flex-direction: column; min-width: 0; [data-layout=grid] & { padding: 0.5rem 0.625rem; } }
+  [data-scope=attachments][data-part=name] { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  [data-scope=attachments][data-part=size] { font-size: 12px; color: var(--ui-muted); }
+  /* Download and remove: over the tile's corner, shown on hover or focus. */
+  [data-scope=attachments][data-part=actions] { position: absolute; display: flex; gap: 0.25rem;
+    [data-layout=grid] & { top: 0.375rem; right: 0.375rem; opacity: 0; transition: opacity 120ms; }
+    [data-layout=grid] [data-part=file]:is(:hover, :focus-within) > & { opacity: 1; }
+    [data-layout=list] & { position: static; padding-right: 0.75rem; } }
+  [data-scope=attachments][data-part=action] { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0;
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-muted); cursor: pointer;
+    text-decoration: none; box-shadow: var(--ui-card-shadow); font-size: 14px;
+    &:hover { color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
+    [data-layout=list] & { border: none; box-shadow: none; background: transparent; &:hover { background: var(--ui-hover); } } }
+  [data-scope=attachments][data-part=label] { display: block; margin-bottom: 0.375rem; font-size: 14px; font-weight: 500; }
+  /* The label and the layout switch, above the files: the switch on the right. */
+  [data-scope=attachments][data-part=header] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem;
+    & > [data-part=label] { margin-bottom: 0; }
+    & > [data-scope=segment-group] { margin-left: auto; } }
+  /* In an invalid Field, the add tile's dashed border turns red. */
+  [data-scope=attachments][data-invalid] [data-part=add-tile] { border-color: var(--ui-danger); }
+  [data-scope=attachments][data-part=add-input] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  [data-scope=attachments][data-part=add-tile] { display: flex; align-items: center; box-sizing: border-box; color: var(--ui-muted); cursor: pointer;
+    &:hover { color: var(--ui-text); }
+    &:focus-within { outline: 2px solid var(--ui-ring-soft); outline-offset: 2px; }
+    [data-layout=grid] & { flex-direction: column; justify-content: center; gap: 0.5rem; height: 100%; min-height: 6rem; padding: 0.75rem; text-align: center;
+      border: 1.5px dashed var(--ui-border); border-radius: var(--tile-radius);
+      &:hover { border-color: var(--ui-muted); background: var(--ui-surface); } }
+    [data-layout=grid][data-add-wide] & { flex-direction: row; min-height: 3rem; height: auto; padding-block: 0.625rem; gap: 0.75rem; }
+    [data-layout=grid][data-empty] & { min-height: 7rem; }
+    [data-layout=list] & { flex-grow: 1; gap: 0.75rem; padding: 0.625rem 0.75rem;
+      &:hover { background: color-mix(in srgb, var(--ui-hover) 60%, transparent); } } }
+  [data-scope=attachments][data-part=add-icon] { display: grid; place-items: center; flex-shrink: 0; font-size: 18px;
+    [data-layout=grid] & { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--ui-hover); }
+    [data-layout=grid][data-add-wide] & { width: 1.75rem; height: 1.75rem; }
+    /* The add row lines its icon up with the files' previews. */
+    [data-layout=list] & { width: 2.5rem; height: 2.5rem; border-radius: var(--ui-radius); border: 1.5px dashed var(--ui-border); box-sizing: border-box; } }
+  [data-scope=attachments][data-part=add-text] { display: flex; flex-direction: column; min-width: 0;
+    [data-layout=grid] & { align-items: center; gap: 0.125rem; }
+    :is([data-layout=list], [data-add-wide]) & { flex-direction: row; gap: 0.5rem; align-items: baseline; } }
+  [data-scope=attachments][data-part=add-label] { font-weight: 500; }
+  [data-scope=attachments][data-part=limit] { font-size: 12px; color: var(--ui-muted); opacity: 0.8; }
+  [data-scope=attachments][data-part=rejected] { display: flex; flex-direction: column; gap: 0.125rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--ui-danger); }
+  /* While files are dragged over: a tinted overlay saying what dropping does. */
+  [data-scope=attachments][data-part=drop-hint] { position: absolute; inset: -0.375rem; z-index: 5; display: flex; flex-direction: column; align-items: center;
+    justify-content: center; gap: 0.375rem; border-radius: calc(var(--ui-radius) + 4px); border: 2px dashed var(--ui-accent);
+    background: color-mix(in srgb, var(--ui-accent-soft) 85%, transparent); color: var(--ui-accent-soft-text); font-weight: 500; pointer-events: none; font-size: 20px;
+    & span { font-size: 14px; } }
+  [data-scope=attachments][data-part=preview] { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--ui-radius); }
+  [data-scope=attachments][data-part=download-link] { display: inline-flex; align-items: center; height: var(--ui-control-height-sm); padding: 0 0.75rem;
+    border-radius: var(--ui-radius); border: 1px solid var(--ui-border); color: var(--ui-text); text-decoration: none; font-size: 14px;
+    &:hover { background: var(--ui-hover); } }
+}

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,31 @@
+import { Avatar as Ark } from '@ark-ui/react/avatar';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './avatar.css';
+export type AvatarColor = 'accent' | 'gray' | 'red' | 'orange' | 'amber' | 'green' | 'teal' | 'blue' | 'purple' | 'pink';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | (string & {}) | number;
+export type AvatarProps = Omit<Ark.RootProps, 'color'> & {
+    src?: string | null;
+    name?: string | null;
+    letters?: 1 | 2;
+    size?: AvatarSize;
+    square?: boolean;
+    color?: AvatarColor | 'auto';
+    tooltip?: boolean | string | null;
+    status?: 'online' | 'away' | 'busy' | 'offline' | (string & {}) | null;
+    statusLabel?: string;
+    classes?: Classes<'root' | 'image' | 'fallback' | 'person' | 'tooltipTarget' | 'status'>;
+};
+export declare const customSize: (size: AvatarSize) => string | undefined;
+export declare function initialsOf(name: string | null | undefined, letters?: 1 | 2): string;
+export declare function colorOf(name: string | null | undefined): AvatarColor;
+declare function AvatarShortcut({ src, name, letters, size, square, color, tooltip, status, statusLabel, className, classes, style, ...rest }: AvatarProps): import("react").JSX.Element;
+export declare const Avatar: typeof AvatarShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Ark.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Image: import("react").ForwardRefExoticComponent<Ark.ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+    Fallback: import("react").ForwardRefExoticComponent<Ark.FallbackProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Context: (props: Ark.ContextProps) => import("react").ReactNode;
+};
+export {};

package/dist/avatar/Avatar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as Ark } from '@ark-ui/react/avatar';
+import 'iconify-icon';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { cx, partsOf, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './avatar.css';
+const named = ['sm', 'md', 'lg', 'xl'];
+// A size that isn't one of the named ones, as a CSS length.
+export const customSize = (size) => typeof size === 'number' ? `${size}px` : named.includes(size) ? undefined : size;
+export function initialsOf(name, letters = 2) {
+    const words = String(name ?? '').trim().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return '';
+    if (letters === 1)
+        return words[0][0].toUpperCase();
+    return (words.length === 1 ? words[0].slice(0, 2) : words[0][0] + words[words.length - 1][0]).toUpperCase();
+}
+// FNV-1a, which spreads similar names well.
+const autoColors = ['red', 'orange', 'amber', 'green', 'teal', 'blue', 'purple', 'pink'];
+export function colorOf(name) {
+    const key = String(name ?? '').trim();
+    if (!key)
+        return 'accent';
+    let hash = 2166136261;
+    for (const ch of key)
+        hash = Math.imul(hash ^ ch.charCodeAt(0), 16777619) >>> 0;
+    return autoColors[hash % autoColors.length];
+}
+function AvatarShortcut({ src = null, name = null, letters = 2, size = 'md', square = false, color = 'accent', tooltip = null, status = null, statusLabel, className, classes, style, ...rest }) {
+    const t = useMessages();
+    const part = partsOf('avatar', classes);
+    const custom = customSize(size);
+    const initials = initialsOf(name, letters);
+    const tip = tooltip === true ? name : tooltip || null;
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": custom ? 'custom' : size, "data-square": square || undefined, "data-has-status": status ? '' : undefined, "data-color": color === 'auto' ? colorOf(name) : color, style: { ...style, ...(custom && { '--avatar-size': custom }) }, children: [src && _jsx(Ark.Image, { ...part('image'), src: src, alt: name ?? '' }), _jsx(Ark.Fallback, { ...part('fallback'), "aria-hidden": name ? undefined : 'true', children: initials || _jsx("iconify-icon", { ...part('person'), icon: "lucide:user" }) }), tip && _jsx(Tooltip, { content: tip, children: _jsx("span", { ...part('tooltip-target') }) }), status && (_jsx("span", { ...part('status'), "data-status": ['online', 'away', 'busy', 'offline'].includes(status) ? status : 'custom', role: "img", "aria-label": statusLabel ?? t.avatar.status[status] ?? status, style: ['online', 'away', 'busy', 'offline'].includes(status) ? undefined : { background: status } }))] }));
+}
+export const Avatar = withParts(AvatarShortcut, {
+    Root: Ark.Root, RootProvider: Ark.RootProvider, Image: Ark.Image, Fallback: Ark.Fallback, Context: Ark.Context,
+});

package/dist/avatar/AvatarGroup.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Avatars in an overlapping stack, each ringed in the page colour, with a
+ * "+3" for the rest.
+ *
+ *   <AvatarGroup items={students} max={4} tooltip />
+ *   <AvatarGroup size="sm"><Avatar name="Ada Lovelace" /><Avatar name="Alan Turing" /></AvatarGroup>
+ *
+ * - `items`: `{ name, src, color }` (or names), shown as Avatars; or put
+ *   Avatars in it yourself
+ * - `max`: with `items`, show this many and a "+N" for the rest (its tooltip
+ *   lists them)
+ * - `size`, `color`, `square`, `letters`: passed to each Avatar
+ * - `tooltip`: each name in a tooltip on hover
+ * - `spacing`: 'tight', 'normal' (default) or 'loose', how much they overlap
+ * - `label`: what the group is, for assistive tech ('3 students')
+ * - the ring is `--ui-avatar-ring` (the surface by default): set it to the
+ *   background the group sits on
+ */
+import type { HTMLAttributes } from 'react';
+import { type AvatarColor, type AvatarSize } from './Avatar.js';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './avatar.css';
+export type AvatarPerson = {
+    name?: string | null;
+    src?: string | null;
+    color?: AvatarColor | 'auto';
+};
+export type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
+    items?: (AvatarPerson | string)[] | null;
+    max?: number | null;
+    size?: AvatarSize;
+    color?: AvatarColor | 'auto';
+    square?: boolean;
+    letters?: 1 | 2;
+    tooltip?: boolean;
+    spacing?: 'tight' | 'normal' | 'loose';
+    label?: string | null;
+    classes?: Classes<'root' | 'more'>;
+};
+export declare function AvatarGroup({ items, max, size, color, square, letters, tooltip, spacing, label, className, classes, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;