@idyeah/diya 0.0.0-stage → 1.0.0

package/dist/calendar/month.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+export const iso = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+export const parse = (value) => new Date(`${value}T12:00:00`);
+export const display = (value, locale) => value ? parse(value).toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }) : '';
+// Where Intl has no week data (older Firefox), CLDR's first day by region; everywhere else Monday.
+const sundayFirst = new Set('AG AS BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IL IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW'.split(' '));
+const saturdayFirst = new Set('AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY'.split(' '));
+/** The locale's first day of the week, 0 (Sunday) to 6 (Saturday). */
+function weekStartFor(locale) {
+    try {
+        const intl = new Intl.Locale(locale);
+        const info = typeof intl.getWeekInfo === 'function' ? intl.getWeekInfo() : intl.weekInfo;
+        if (info && info.firstDay >= 1 && info.firstDay <= 7)
+            return info.firstDay % 7;
+        const region = intl.region ?? intl.maximize().region ?? '';
+        return sundayFirst.has(region) ? 0 : saturdayFirst.has(region) ? 6 : region === 'MV' ? 5 : 1;
+    }
+    catch {
+        return 0;
+    }
+}
+// Headings start on the locale's first day. Two letters where that keeps all seven distinct (Mo Tu We… in English), else the locale's short name.
+const weekdaysFor = (locale, start) => {
+    const format = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+    // 1 January 2023 was a Sunday.
+    const names = Array.from({ length: 7 }, (_, index) => format.format(new Date(2023, 0, 1 + ((start + index) % 7))));
+    const short = names.map((name) => Array.from(name).slice(0, 2).join(''));
+    return new Set(short).size === 7 ? short : names;
+};
+// The full names, which name each column for assistive tech (the APG example's `abbr`).
+const weekdayNamesFor = (locale, start) => {
+    const format = new Intl.DateTimeFormat(locale, { weekday: 'long' });
+    return Array.from({ length: 7 }, (_, index) => format.format(new Date(2023, 0, 1 + ((start + index) % 7))));
+};
+export const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/** Whether `day` falls before `min` or after `max`. */
+export const outsideLimits = (day, min, max) => (!!min && day < min) || (!!max && day > max);
+/** `day` moved inside `min` and `max`. */
+export const clampToLimits = (day, min, max) => min && day < min ? min : max && day > max ? max : day;
+/** The first of the month that shows `day` (today when it is '' or invalid), kept inside `min` and `max`. */
+export function monthOf(day, min, max) {
+    const date = day ? parse(day) : new Date();
+    const valid = Number.isFinite(date.getTime()) ? date : new Date();
+    const shown = parse(clampToLimits(iso(valid), min, max));
+    return new Date(shown.getFullYear(), shown.getMonth(), 1);
+}
+const subscribeNever = () => () => { };
+/** Today as an ISO date; '' while hydrating server HTML, so a server in another time zone never marks the wrong day. */
+export const useToday = () => useSyncExternalStore(subscribeNever, () => iso(new Date()), () => '');
+/**
+ * The month grid DatePicker shows in its popup and Calendar shows on the page: the
+ * month heading with its buttons, the range hint, then the ARIA date grid of the APG
+ * date picker example. The grid is named by the month; a header row of weekday column
+ * headers, then a row per week of gridcells. Each day is a native button with the
+ * gridcell role, named with its weekday ("Thursday, November 12, 2026"): chosen days
+ * carry aria-selected, today aria-current="date". One day is a Tab stop; arrows,
+ * Home/End and PageUp/PageDown move it, kept inside min and max. Days outside them,
+ * or unavailable, say so in their name and aria-disabled, and can't be chosen.
+ */
+export function useMonthGrid(options) {
+    const { locale, month, onMonthChange, value, range, choosingEnd, min, max, isDateUnavailable, disabled, active, strings: t, onChoose } = options;
+    const weekStart = useMemo(() => weekStartFor(locale), [locale]);
+    const weekdays = useMemo(() => weekdaysFor(locale, weekStart), [locale, weekStart]);
+    const weekdayNames = useMemo(() => weekdayNamesFor(locale, weekStart), [locale, weekStart]);
+    // Each day's accessible name, with its weekday: "Thursday, November 12, 2026" in en-US.
+    const dayNames = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }), [locale]);
+    const monthId = `${useId()}-month`;
+    const [cursor, setCursor] = useState('');
+    const grid = useRef(null);
+    const focusDate = useRef(null);
+    const today = useToday();
+    useClientLayoutEffect(() => {
+        if (!active || !focusDate.current)
+            return;
+        grid.current?.querySelector(`[data-date="${focusDate.current}"]`)?.focus();
+        focusDate.current = null;
+    }, [month, active]);
+    const blocked = (day) => outsideLimits(day, min, max) || !!isDateUnavailable?.(day);
+    function moveDay(event, day) {
+        const date = parse(day);
+        const fromStart = (date.getDay() - weekStart + 7) % 7;
+        const offsets = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 7, ArrowUp: -7, Home: -fromStart, End: 6 - fromStart };
+        if (event.key in offsets)
+            date.setDate(date.getDate() + offsets[event.key]);
+        else if (event.key === 'PageUp' || event.key === 'PageDown') {
+            const delta = event.key === 'PageUp' ? -1 : 1;
+            const nextMonth = date.getMonth() + delta;
+            const lastDay = new Date(date.getFullYear(), nextMonth + 1, 0).getDate();
+            date.setDate(1);
+            date.setMonth(nextMonth);
+            date.setDate(Math.min(parse(day).getDate(), lastDay));
+        }
+        else
+            return;
+        event.preventDefault();
+        const target = clampToLimits(iso(date), min, max);
+        setCursor(target);
+        const shown = parse(target);
+        if (shown.getMonth() !== month.getMonth() || shown.getFullYear() !== month.getFullYear()) {
+            focusDate.current = target;
+            onMonthChange(new Date(shown.getFullYear(), shown.getMonth(), 1));
+        }
+        else
+            grid.current?.querySelector(`[data-date="${target}"]`)?.focus();
+    }
+    function render() {
+        const first = new Date(month.getFullYear(), month.getMonth(), 1);
+        const days = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+        const monthDays = Array.from({ length: days }, (_, index) => iso(new Date(month.getFullYear(), month.getMonth(), index + 1)));
+        // Roving tabindex: one day in the grid is a Tab stop; arrows move it.
+        const tabbable = cursor && monthDays.includes(cursor) ? cursor
+            : [value.start, value.end, today].find((day) => monthDays.includes(day) && !blocked(day)) ?? monthDays.find((day) => !blocked(day)) ?? monthDays[0];
+        // Weeks of seven cells, empty before the 1st and after the last day.
+        const cells = [...Array.from({ length: (first.getDay() - weekStart + 7) % 7 }, () => null), ...monthDays];
+        while (cells.length % 7)
+            cells.push(null);
+        const weeks = Array.from({ length: cells.length / 7 }, (_, week) => cells.slice(week * 7, week * 7 + 7));
+        const between = (day) => !!value.end && day > value.start && day < value.end;
+        const previousDisabled = !!min && iso(new Date(month.getFullYear(), month.getMonth(), 0)) < min;
+        const nextDisabled = !!max && iso(new Date(month.getFullYear(), month.getMonth() + 1, 1)) > max;
+        return _jsxs(_Fragment, { children: [_jsxs("div", { className: "diya-calendar-heading", children: [_jsx("button", { type: "button", "aria-label": t.previousMonth, disabled: disabled || previousDisabled, onClick: () => { setCursor(''); onMonthChange(new Date(month.getFullYear(), month.getMonth() - 1, 1)); }, children: "\u2039" }), _jsx("strong", { id: monthId, "aria-live": "polite", children: month.toLocaleDateString(locale, { month: 'long', year: 'numeric' }) }), _jsx("button", { type: "button", "aria-label": t.nextMonth, disabled: disabled || nextDisabled, onClick: () => { setCursor(''); onMonthChange(new Date(month.getFullYear(), month.getMonth() + 1, 1)); }, children: "\u203A" })] }), range && _jsx("p", { className: "diya-calendar-hint", children: choosingEnd ? t.chooseEnd : t.chooseStart }), _jsxs("div", { ref: grid, role: "grid", "aria-labelledby": monthId, className: "diya-calendar-grid", children: [_jsx("div", { role: "row", className: "diya-calendar-row", children: weekdays.map((day, index) => _jsx("span", { role: "columnheader", "aria-label": weekdayNames[index], className: "diya-calendar-weekday", children: day }, index)) }), weeks.map((week, row) => _jsx("div", { role: "row", className: "diya-calendar-row", children: week.map((day, column) => {
+                                if (!day)
+                                    return _jsx("span", { role: "gridcell" }, `space-${column}`);
+                                const unavailable = blocked(day);
+                                // A range is chosen as a whole: its ends and the days between are selected.
+                                const selected = day === value.start || day === value.end || between(day);
+                                const name = dayNames.format(parse(day));
+                                return _jsx("button", { type: "button", role: "gridcell", "data-date": day, "aria-label": unavailable ? t.unavailableDay(name) : name, "aria-selected": selected || undefined, "aria-current": day === today ? 'date' : undefined, "aria-disabled": unavailable || undefined, disabled: disabled || undefined, tabIndex: day === tabbable ? 0 : -1, "data-between": between(day), "data-today": day === today, onClick: () => onChoose(day), onFocus: () => setCursor(day), onKeyDown: (event) => moveDay(event, day), children: Number(day.slice(8)) }, day);
+                            }) }, row))] })] });
+    }
+    return { render, resetCursor: () => setCursor(''), isBlocked: blocked };
+}

package/dist/card/Card.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    /** Visible card heading; it is also the card's accessible name. */
+    title: string;
+    /** Heading level of the title, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Supporting text under the title. */
+    description?: string;
+    /** Slot above the title for Tag or Badge elements. */
+    tags?: ReactNode;
+    /** Slot in the top corner, usually a Menu or a quiet icon button. */
+    actions?: ReactNode;
+    /** Image or illustration shown edge to edge above the body. */
+    media?: ReactNode;
+    /** Main card content, under the header. */
+    children?: ReactNode;
+    /** Content pinned to the bottom, such as buttons or metadata. */
+    footer?: ReactNode;
+    /** Draws a line above the footer; defaults to false. */
+    divided?: boolean;
+    /** Lifts the card with a shadow instead of a flat border; defaults to false. */
+    shadow?: boolean;
+};
+/** A titled content container with optional media, tags, corner actions and a footer. */
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    /** Visible card heading; it is also the card's accessible name. */
+    title: string;
+    /** Heading level of the title, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Supporting text under the title. */
+    description?: string;
+    /** Slot above the title for Tag or Badge elements. */
+    tags?: ReactNode;
+    /** Slot in the top corner, usually a Menu or a quiet icon button. */
+    actions?: ReactNode;
+    /** Image or illustration shown edge to edge above the body. */
+    media?: ReactNode;
+    /** Main card content, under the header. */
+    children?: ReactNode;
+    /** Content pinned to the bottom, such as buttons or metadata. */
+    footer?: ReactNode;
+    /** Draws a line above the footer; defaults to false. */
+    divided?: boolean;
+    /** Lifts the card with a shadow instead of a flat border; defaults to false. */
+    shadow?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/card/Card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../internal/cx.js';
+/** A titled content container with optional media, tags, corner actions and a footer. */
+export const Card = forwardRef(function Card({ title, headingLevel = 3, description, tags, actions, media, children, footer, divided = false, shadow = false, className, ...props }, ref) {
+    const Heading = `h${headingLevel}`;
+    return _jsxs("article", { "aria-label": title, ...props, ref: ref, className: cx('diya-card', className), "data-shadow": shadow, children: [media && _jsx("div", { className: "diya-card-media", children: media }), _jsxs("div", { className: "diya-card-body", children: [_jsxs("header", { className: "diya-card-header", children: [_jsxs("div", { children: [tags && _jsx("div", { className: "diya-card-tag", children: tags }), _jsx(Heading, { className: "diya-card-title", children: title }), description && _jsx("p", { children: description })] }), actions && _jsx("div", { className: "diya-card-menu", children: actions })] }), children && _jsx("div", { className: "diya-card-content", children: children }), footer && _jsx("footer", { className: "diya-card-footer", "data-divider": divided, children: footer })] })] });
+});

package/dist/choice/Choice.d.ts

@@ -0,0 +1,72 @@
+import { type ChangeEventHandler, type FieldsetHTMLAttributes, type FocusEventHandler, type ReactNode } from 'react';
+import { choiceMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        choice: typeof choiceMessages;
+    }
+}
+export type ChoiceOption = {
+    /** The value reported when this option is chosen; unique within the group. */
+    value: string;
+    /** Visible option text beside the radio or checkbox: a string, or a node such as text with links ("I agree to the <a>Terms</a>") or a color swatch before a name. A link inside opens without toggling the option, and the option is named by the label's text, so give a swatch `aria-hidden` and visible words. */
+    label: ReactNode;
+    /** Visible secondary line under the label, announced as the option's description; shown whenever present. */
+    description?: string;
+    /** Shows the option but stops it being chosen. */
+    disabled?: boolean;
+};
+type ChoiceBase = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'onBlur' | 'defaultValue' | 'name' | 'disabled' | 'children'> & {
+    /** Visible group label (the fieldset legend); also names the group for assistive tech. Hide it with hideLabel. */
+    label: string;
+    /** The choices, in display order. */
+    options: ChoiceOption[];
+    /** Control and type size; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Hides the group label visually but keeps it as the group's accessible name. */
+    hideLabel?: boolean;
+    /** Disables every option in the group. */
+    disabled?: boolean;
+    /** Visible hint below the options, announced with the group; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the options; marks the group invalid while set. */
+    error?: string;
+    /** Form field name shared by the inputs; defaults to a generated id. */
+    name?: string;
+    /** Native change event from the radio or checkbox that changed, as react-hook-form's register() expects; `onValueChange` still fires. */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Called when one of the inputs loses focus. */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Asks the browser to require a choice before the form submits; radios only. */
+    required?: boolean;
+};
+/** Radios: one value. */
+export type ChoiceSingleProps = ChoiceBase & {
+    /** Single mode (the default): radios, leave unset or false. */
+    multiple?: false;
+    /** The chosen option's value, or '' for none, when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The initially chosen value when uncontrolled; a form reset returns to it. */
+    defaultValue?: string;
+    /** Called with the chosen option's value. */
+    onValueChange?: (value: string) => void;
+    /** Only for `multiple`. */
+    selectAll?: never;
+};
+/** Checkboxes: an array of values, with an optional "Select all". */
+export type ChoiceMultipleProps = ChoiceBase & {
+    /** Multiple mode: checkboxes, any number chosen. */
+    multiple: true;
+    /** The chosen options' values, when controlled; pair it with `onValueChange`. */
+    value?: string[];
+    /** The initially chosen values when uncontrolled; a form reset returns to them. */
+    defaultValue?: string[];
+    /** Called with the full new array of chosen values. */
+    onValueChange?: (value: string[]) => void;
+    /** Adds a visible "Select all" checkbox first that toggles every enabled option and shows a mixed state when some are chosen. */
+    selectAll?: boolean;
+};
+/** Radios by default (one string); `multiple` gives checkboxes and an array. */
+export type ChoiceProps = ChoiceSingleProps | ChoiceMultipleProps;
+/** A labeled group of radios for one choice, or checkboxes for several with `multiple`. The ref reaches the inputs: a callback ref gets each one, an object ref the first. */
+export declare const Choice: import("react").ForwardRefExoticComponent<ChoiceProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/choice/Choice.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { useFormReset, useNativeMirror } from '../text-input/native-field.js';
+import { choiceMessages } from './messages.js';
+const sameList = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+/** A labeled group of radios for one choice, or checkboxes for several with `multiple`. The ref reaches the inputs: a callback ref gets each one, an object ref the first. */
+export const Choice = forwardRef(function Choice(props, ref) {
+    const id = useId();
+    const t = useDiyaMessages('choice', choiceMessages);
+    const { label, options, size = 'medium', hideLabel = false, disabled = false, helperText, error, name = id, onChange, onBlur, required, className, multiple: _multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, selectAll: _selectAll, 'aria-describedby': describedBy, ...rest } = props;
+    const multiple = props.multiple === true;
+    const description = error || helperText;
+    const inputs = useRef([]);
+    const first = useRef(null);
+    const controlled = props.value !== undefined;
+    const fromDom = () => inputs.current.filter((input) => !!input?.checked).map((input) => input.value);
+    const initial = props.multiple === true ? props.value ?? props.defaultValue ?? [] : (props.value ?? props.defaultValue) ? [props.value ?? props.defaultValue ?? ''] : [];
+    const [current, sync] = useNativeMirror(() => inputs.current.some(Boolean) ? fromDom() : undefined, initial, sameList);
+    useFormReset(first, sync);
+    // Internally a selection is always a list; the public value matches the mode.
+    const selected = controlled ? props.multiple === true ? props.value ?? [] : props.value ? [props.value] : [] : current;
+    const report = (next) => props.multiple === true ? props.onValueChange?.(next) : props.onValueChange?.(next[0] ?? '');
+    const enabled = options.filter((option) => !option.disabled);
+    const allChosen = enabled.length > 0 && enabled.every((option) => selected.includes(option.value));
+    const someChosen = enabled.some((option) => selected.includes(option.value));
+    function attach(index) {
+        return (node) => {
+            inputs.current[index] = node;
+            if (index === 0)
+                first.current = node;
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref && index === 0)
+                ref.current = node;
+        };
+    }
+    function toggleAll(on) {
+        const values = enabled.map((option) => option.value);
+        if (controlled) {
+            report(on ? Array.from(new Set([...selected, ...values])) : selected.filter((value) => !values.includes(value)));
+            return;
+        }
+        // Uncontrolled: set the boxes, then click the last one so onChange (and any form library) sees one real change.
+        const changing = inputs.current.filter((input) => !!input && !input.disabled && values.includes(input.value) && input.checked !== on);
+        const last = changing.pop();
+        for (const input of changing)
+            input.checked = on;
+        last?.click();
+    }
+    return (_jsxs("fieldset", { ...rest, className: cx('diya-choice', className), "data-size": size, disabled: disabled, "aria-invalid": error ? true : props['aria-invalid'], "aria-describedby": [describedBy, description ? `${id}-help` : undefined].filter(Boolean).join(' ') || undefined, children: [_jsx("legend", { className: hideLabel ? 'diya-sr-only' : undefined, children: label }), _jsxs("div", { className: "diya-choice-items", children: [multiple && props.selectAll && _jsxs("label", { className: "diya-choice-option", children: [_jsx("input", { type: "checkbox", "aria-label": t.selectAll, disabled: disabled || !enabled.length, ref: node => { if (node)
+                                    node.indeterminate = someChosen && !allChosen; }, checked: allChosen, onChange: event => toggleAll(event.target.checked) }), _jsx("span", { className: "diya-choice-label", children: t.selectAll })] }), options.map((option, index) => (_jsxs("label", { className: "diya-choice-option", "data-disabled": disabled || option.disabled || undefined, children: [_jsx("input", { ref: attach(index), type: multiple ? 'checkbox' : 'radio', name: name, value: option.value, disabled: option.disabled, required: !multiple ? required : undefined, ...(controlled
+                                    ? { checked: selected.includes(option.value) }
+                                    : { defaultChecked: initial.includes(option.value) }), "aria-describedby": option.description ? `${id}-option-${index}-description` : undefined, onBlur: onBlur, onChange: (event) => {
+                                    onChange?.(event);
+                                    if (!controlled) {
+                                        sync();
+                                        report(fromDom());
+                                        return;
+                                    }
+                                    if (!multiple)
+                                        report([option.value]);
+                                    else
+                                        report(event.target.checked ? [...selected, option.value] : selected.filter((value) => value !== option.value));
+                                } }), _jsxs("span", { children: [_jsx("span", { className: "diya-choice-label", children: option.label }), option.description && (_jsx("span", { className: "diya-choice-description", id: `${id}-option-${index}-description`, children: option.description }))] })] }, option.value)))] }), description && (_jsxs("p", { id: `${id}-help`, className: "diya-text-field-description", children: [error && _jsx("span", { "aria-hidden": "true", children: "!" }), description] }))] }));
+});

package/dist/choice/messages.d.ts

@@ -0,0 +1,4 @@
+/** choice: English defaults, overridable through DiyaProvider `messages`. */
+export declare const choiceMessages: {
+    selectAll: string;
+};

package/dist/choice/messages.js

@@ -0,0 +1,2 @@
+/** choice: English defaults, overridable through DiyaProvider `messages`. */
+export const choiceMessages = { selectAll: 'Select all' };

package/dist/code-block/CodeBlock.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes } from 'react';
+import { codeBlockMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        codeBlock: typeof codeBlockMessages;
+    }
+}
+export type CodeBlockProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The code to show and copy, exactly as written. It is set in a monospace font, without syntax colors. */
+    code: string;
+    /** A short name above the code, such as its language ('TypeScript') or file ('app/page.tsx'). It also names the code for screen readers. */
+    label?: string;
+};
+/** A block of code with a Copy button. Long lines scroll sideways in a region that takes keyboard focus, and Copy announces its result politely. */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The code to show and copy, exactly as written. It is set in a monospace font, without syntax colors. */
+    code: string;
+    /** A short name above the code, such as its language ('TypeScript') or file ('app/page.tsx'). It also names the code for screen readers. */
+    label?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/code-block/CodeBlock.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Button } from '../button/Button.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { Icon } from '../Icon.js';
+import { cx } from '../internal/cx.js';
+import { codeBlockMessages } from './messages.js';
+/** A block of code with a Copy button. Long lines scroll sideways in a region that takes keyboard focus, and Copy announces its result politely. */
+export const CodeBlock = forwardRef(function CodeBlock({ code, label, className, ...props }, ref) {
+    const t = useDiyaMessages('codeBlock', codeBlockMessages);
+    const [status, setStatus] = useState('idle');
+    const content = useRef(null);
+    // Each copy, a new code string and unmounting start a new operation, so a late result never lands on the wrong code.
+    const operation = useRef(0);
+    useEffect(() => {
+        operation.current += 1;
+        setStatus('idle');
+    }, [code]);
+    useEffect(() => () => { operation.current += 1; }, []);
+    useEffect(() => {
+        if (status !== 'copied')
+            return;
+        const timer = setTimeout(() => setStatus('idle'), 2000);
+        return () => clearTimeout(timer);
+    }, [status]);
+    async function copy() {
+        const current = ++operation.current;
+        setStatus('idle');
+        try {
+            if (!navigator.clipboard?.writeText)
+                throw new Error('Clipboard unavailable');
+            await navigator.clipboard.writeText(code);
+            if (current === operation.current)
+                setStatus('copied');
+        }
+        catch {
+            if (current !== operation.current)
+                return;
+            // Without clipboard access, select the code so it can be copied by hand.
+            if (content.current)
+                window.getSelection()?.selectAllChildren(content.current);
+            setStatus('failed');
+        }
+    }
+    const copied = status === 'copied';
+    const button = (_jsxs(Button, { variant: "quiet", size: "small", className: "diya-code-block-copy", onClick: () => void copy(), children: [_jsx(Icon, { name: copied ? 'check' : 'copy', size: 16 }), copied ? t.copied : t.copy] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cx('diya-code-block', className), "data-labelled": label ? 'true' : undefined, children: [label && _jsxs("div", { className: "diya-code-block-header", children: [_jsx("span", { className: "diya-code-block-label", children: label }), button] }), _jsx("pre", { className: "diya-code-block-code", tabIndex: 0, role: "region", "aria-label": label ? t.namedCode(label) : t.code, children: _jsx("code", { ref: content, children: code }) }), !label && button, _jsx("span", { className: "diya-code-block-status", role: "status", "data-failed": status === 'failed' ? 'true' : undefined, children: copied ? t.copied : status === 'failed' ? t.copyFailed : '' })] }));
+});

package/dist/code-block/messages.d.ts

@@ -0,0 +1,8 @@
+/** codeBlock: English defaults, overridable through DiyaProvider `messages`. */
+export declare const codeBlockMessages: {
+    code: string;
+    namedCode: (label: string) => string;
+    copy: string;
+    copied: string;
+    copyFailed: string;
+};

package/dist/code-block/messages.js

@@ -0,0 +1,2 @@
+/** codeBlock: English defaults, overridable through DiyaProvider `messages`. */
+export const codeBlockMessages = { code: 'Code', namedCode: (label) => `${label} code`, copy: 'Copy', copied: 'Copied', copyFailed: 'Couldn’t copy. The code is selected, so you can copy it yourself.' };

package/dist/combobox/Combobox.d.ts

@@ -0,0 +1,60 @@
+import { type InputHTMLAttributes } from 'react';
+import { comboboxMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        combobox: typeof comboboxMessages;
+    }
+}
+export type ComboboxOption = {
+    /** The value reported when this option is chosen; unique within the list. */
+    value: string;
+    /** Visible option text; typing filters options by it. */
+    label: string;
+    /** Shows the option but stops it being chosen. */
+    disabled?: boolean;
+};
+type ComboboxBase = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'type' | 'role' | 'multiple' | 'disabled' | 'name' | 'children'> & {
+    /** Visible label above the field; also names the input and the option list for assistive tech. Hide it with hideLabel. */
+    label: string;
+    /** The choices, in display order; typing filters them by label. */
+    options: ComboboxOption[];
+    /** Prevents typing and choosing, and dims the field. */
+    disabled?: boolean;
+    /** Visible error message below the field; marks it invalid while set. */
+    error?: string;
+    /** Visible hint below the field, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Hides the label visually but keeps it as the input's accessible name. */
+    hideLabel?: boolean;
+    /** Control height and type size; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Form field name: the chosen value, or each chosen value in `multiple` mode, is sent with the form under it. */
+    name?: string;
+};
+/** One option: a string, '' for none. */
+export type ComboboxSingleProps = ComboboxBase & {
+    /** Single mode (the default): leave unset or false. Choosing an option closes the list. */
+    multiple?: false;
+    /** The chosen option's value, or '' for none, when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The initially chosen value when uncontrolled; a form reset returns to it. */
+    defaultValue?: string;
+    /** Called with the chosen option's value. */
+    onValueChange?: (value: string) => void;
+};
+/** Several options: an array of values. */
+export type ComboboxMultipleProps = ComboboxBase & {
+    /** Multiple mode: choices show as removable chips, choosing toggles an option and the list stays open. */
+    multiple: true;
+    /** The chosen options' values, in the order they were picked, when controlled; pair it with `onValueChange`. */
+    value?: string[];
+    /** The initially chosen values when uncontrolled; a form reset returns to them. */
+    defaultValue?: string[];
+    /** Called with the full new array of chosen values. */
+    onValueChange?: (value: string[]) => void;
+};
+/** One option is a string ('' for none); `multiple` takes and returns an array. Native input attributes and the ref go on the text input; `className` and `style` go on the outer field wrapper. */
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+/** A labeled text field that filters a list of options as you type; picks one value, or several with `multiple`. */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};