@nhic/rwds-react 0.0.0-stage → 1.0.0-next.0

package/dist/Card/Card.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CaretRightIcon } from '@nhic/rwds-icons/react/caret-right';
+import { cx } from "../shared/classes.js";
+export const cardHeadingLevels = [2, 3, 4, 5, 6];
+const HEADINGS = { 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5', 6: 'h6' };
+/** A titled box that groups related content on a page. */
+export function Card(props) {
+    const { title, description, headingLevel = 2, actions, footer, children, isFlush = false, className, } = props;
+    const Heading = HEADINGS[headingLevel];
+    const heading = (_jsxs("div", { className: "rw-card__heading", children: [title !== undefined && _jsx(Heading, { className: "rw-card__title", children: title }), description !== undefined && _jsx("p", { className: "rw-card__description", children: description })] }));
+    const rest = (_jsxs(_Fragment, { children: [children !== undefined && _jsx("div", { className: "rw-card__body", children: children }), footer !== undefined && _jsx("div", { className: "rw-card__footer", children: footer })] }));
+    if (props.isCollapsible === true) {
+        return (_jsxs("details", { className: cx('rw-card', 'rw-card--collapsible', isFlush && 'rw-card--flush', className), open: props.isDefaultExpanded ?? true, children: [_jsxs("summary", { className: "rw-card__header", children: [_jsx(CaretRightIcon, { size: "sm", className: "rw-card__toggle" }), heading] }), rest] }));
+    }
+    const hasHeader = title !== undefined || actions !== undefined;
+    return (_jsxs("div", { className: cx('rw-card', isFlush && 'rw-card--flush', className), children: [hasHeader && (_jsxs("div", { className: "rw-card__header", children: [heading, actions !== undefined && _jsx("div", { className: "rw-card__actions", children: actions })] })), rest] }));
+}
+//# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEpE,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAE1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAC;AAG1D,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAW,CAAC;AAoC1E,0DAA0D;AAC1D,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EACJ,KAAK,EACL,WAAW,EACX,YAAY,GAAG,CAAC,EAChB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,CACd,eAAK,SAAS,EAAC,kBAAkB,aAC9B,KAAK,KAAK,SAAS,IAAI,KAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAW,EAC5E,WAAW,KAAK,SAAS,IAAI,YAAG,SAAS,EAAC,sBAAsB,YAAE,WAAW,GAAK,IAC/E,CACP,CAAC;IACF,MAAM,IAAI,GAAG,CACX,8BACG,QAAQ,KAAK,SAAS,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAO,EACzE,MAAM,KAAK,SAAS,IAAI,cAAK,SAAS,EAAC,iBAAiB,YAAE,MAAM,GAAO,IACvE,CACJ,CAAC;IACF,IAAI,KAAK,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;QACjC,OAAO,CACL,mBACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE,OAAO,IAAI,gBAAgB,EAAE,SAAS,CAAC,EACxF,IAAI,EAAE,KAAK,CAAC,iBAAiB,IAAI,IAAI,aAErC,mBAAS,SAAS,EAAC,iBAAiB,aAClC,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,iBAAiB,GAAG,EACvD,OAAO,IACA,EACT,IAAI,IACG,CACX,CAAC;IACJ,CAAC;IACD,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC;IAC/D,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,IAAI,gBAAgB,EAAE,SAAS,CAAC,aAClE,SAAS,IAAI,CACZ,eAAK,SAAS,EAAC,iBAAiB,aAC7B,OAAO,EACP,OAAO,KAAK,SAAS,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,OAAO,GAAO,IACvE,CACP,EACA,IAAI,IACD,CACP,CAAC;AACJ,CAAC"}

package/dist/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card, cardHeadingLevels } from './Card.tsx';
+export type { CardHeadingLevel, CardProps } from './Card.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/Card/index.js

@@ -0,0 +1,2 @@
+export { Card, cardHeadingLevels } from "./Card.js";
+//# sourceMappingURL=index.js.map

package/dist/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,WAAY,CAAC"}

package/dist/CharacterCount/CharacterCount.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { Translator } from '@nhic/rwds-i18n';
+/** How long typing must pause before the count is announced, so every key press is not read out. */
+export declare const ANNOUNCE_DELAY_MS = 400;
+/** The count sentence for a value and a limit. */
+export declare function characterCountMessage(t: Translator['t'], limit: number, value: string): string;
+export interface CharacterCountProps {
+    readonly limit: number;
+    /** The field's current value. */
+    readonly value: string;
+    /** Put this id in the field's `aria-describedby`. */
+    readonly id?: string;
+    readonly className?: string;
+}
+/** Tells people how many characters they can still enter. It never cuts their text. */
+export declare function CharacterCount({ limit, value, id, className }: CharacterCountProps): ReactNode;
+//# sourceMappingURL=CharacterCount.d.ts.map

package/dist/CharacterCount/CharacterCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterCount.d.ts","sourceRoot":"","sources":["../../src/CharacterCount/CharacterCount.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,oGAAoG;AACpG,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,kDAAkD;AAClD,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAO9F;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,mBAAmB,GAAG,SAAS,CA+B9F"}

package/dist/CharacterCount/CharacterCount.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { characterLength } from '@nhic/rwds-i18n';
+import { useMessages } from "../providers/index.js";
+import { cx } from "../shared/classes.js";
+/** How long typing must pause before the count is announced, so every key press is not read out. */
+export const ANNOUNCE_DELAY_MS = 400;
+/** The count sentence for a value and a limit. */
+export function characterCountMessage(t, limit, value) {
+    const length = characterLength(value);
+    if (length === 0)
+        return t('characterCount.limit', { limit });
+    const remaining = limit - length;
+    return remaining >= 0
+        ? t('characterCount.remaining', { count: remaining })
+        : t('characterCount.over', { count: -remaining });
+}
+/** Tells people how many characters they can still enter. It never cuts their text. */
+export function CharacterCount({ limit, value, id, className }) {
+    const { t } = useMessages();
+    const message = characterCountMessage(t, limit, value);
+    const typed = characterLength(value) > 0;
+    const [announced, setAnnounced] = useState('');
+    useEffect(() => {
+        if (!typed) {
+            setAnnounced('');
+            return;
+        }
+        const timer = setTimeout(() => {
+            setAnnounced(message);
+        }, ANNOUNCE_DELAY_MS);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [message, typed]);
+    return (_jsxs("div", { className: cx('rw-character-count', className), children: [_jsx("p", { className: "rw-character-count__message", id: id, "data-over": characterLength(value) > limit ? '' : undefined, children: message }), _jsx("p", { className: "rw-visually-hidden", "aria-live": "polite", children: announced })] }));
+}
+//# sourceMappingURL=CharacterCount.js.map

package/dist/CharacterCount/CharacterCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterCount.js","sourceRoot":"","sources":["../../src/CharacterCount/CharacterCount.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAE1C,oGAAoG;AACpG,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAErC,kDAAkD;AAClD,MAAM,UAAU,qBAAqB,CAAC,CAAkB,EAAE,KAAa,EAAE,KAAa;IACpF,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,MAAM,KAAK,CAAC;QAAE,OAAO,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;IACjC,OAAO,SAAS,IAAI,CAAC;QACnB,CAAC,CAAC,CAAC,CAAC,0BAA0B,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QACrD,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;AACtD,CAAC;AAWD,uFAAuF;AACvF,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAuB;IACjF,MAAM,EAAE,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACvD,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,YAAY,CAAC,EAAE,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,EAAE,iBAAiB,CAAC,CAAC;QACtB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IACrB,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,aACjD,YACE,SAAS,EAAC,6BAA6B,EACvC,EAAE,EAAE,EAAE,eACK,eAAe,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAEzD,OAAO,GACN,EACJ,YAAG,SAAS,EAAC,oBAAoB,eAAW,QAAQ,YACjD,SAAS,GACR,IACA,CACP,CAAC;AACJ,CAAC"}

package/dist/CharacterCount/index.d.ts

@@ -0,0 +1,3 @@
+export { ANNOUNCE_DELAY_MS, CharacterCount, characterCountMessage } from './CharacterCount.tsx';
+export type { CharacterCountProps } from './CharacterCount.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/CharacterCount/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CharacterCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAChG,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/CharacterCount/index.js

@@ -0,0 +1,2 @@
+export { ANNOUNCE_DELAY_MS, CharacterCount, characterCountMessage } from "./CharacterCount.js";
+//# sourceMappingURL=index.js.map

package/dist/CharacterCount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CharacterCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,qBAAsB,CAAC"}

package/dist/ChatComposer/ChatComposer.d.ts

@@ -0,0 +1,41 @@
+import type { IconComponent } from '@nhic/rwds-icons/react';
+import type { ReactNode } from 'react';
+/** A ready-made question: a short title, and the words it sends when they differ. */
+export interface ChatSuggestion {
+    readonly label: string;
+    /** What it sends; the label unless set. */
+    readonly prompt?: string;
+    /** One line under the title. */
+    readonly description?: string;
+    readonly icon?: IconComponent;
+}
+export interface ChatComposerProps {
+    /** Names the field for screen readers; "Message" unless set. */
+    readonly label?: string;
+    /** Such as "Ask about a service, a product or a rule". */
+    readonly placeholder?: string;
+    /** Ready-made questions under the composer; each sends itself as `suggestion`. */
+    readonly suggestions?: readonly (string | ChatSuggestion)[];
+    /** A line under the composer, such as where answers come from; the field is described by it. */
+    readonly note?: ReactNode;
+    /** Small controls at the start of the bar under the field, such as attaching a document. */
+    readonly tools?: ReactNode;
+    /** Documents attached to the message, above the field, usually a tag group. */
+    readonly attachments?: ReactNode;
+    /** Where the form posts, for a page that answers on the server. */
+    readonly action?: string;
+    /**
+     * Takes the message or suggestion instead of posting the form, and clears the field. Leave it
+     * out for a page that answers on the server.
+     */
+    readonly onSend?: (text: string) => void;
+    /** While an answer is being written: sending waits until it is done. */
+    readonly isBusy?: boolean;
+    readonly className?: string;
+}
+/**
+ * Where people write to an assistant: one rounded box holding the field, its tools and Send, a
+ * note under it, and ready-made questions. Enter sends; Shift+Enter starts a new line.
+ */
+export declare function ChatComposer({ label, placeholder, suggestions, note, tools, attachments, action, onSend, isBusy, className, }: ChatComposerProps): ReactNode;
+//# sourceMappingURL=ChatComposer.d.ts.map

package/dist/ChatComposer/ChatComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/ChatComposer/ChatComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,OAAO,KAAK,EAAiB,SAAS,EAAkB,MAAM,OAAO,CAAC;AAItE,qFAAqF;AACrF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,gCAAgC;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,gEAAgE;IAChE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IAC5D,gGAAgG;IAChG,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,4FAA4F;IAC5F,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,mEAAmE;IACnE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,wEAAwE;IACxE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAKD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,WAAgB,EAChB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,MAAc,EACd,SAAS,GACV,EAAE,iBAAiB,GAAG,SAAS,CAsG/B"}

package/dist/ChatComposer/ChatComposer.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon } from '@nhic/rwds-icons/react/arrow-up';
+import { useId, useRef } from 'react';
+import { useMessages } from "../providers/index.js";
+import { cx } from "../shared/classes.js";
+const asSuggestion = (item) => typeof item === 'string' ? { label: item } : item;
+/**
+ * Where people write to an assistant: one rounded box holding the field, its tools and Send, a
+ * note under it, and ready-made questions. Enter sends; Shift+Enter starts a new line.
+ */
+export function ChatComposer({ label, placeholder, suggestions = [], note, tools, attachments, action, onSend, isBusy = false, className, }) {
+    const { t } = useMessages();
+    const fieldId = useId();
+    const noteId = useId();
+    const suggestionsId = useId();
+    const fieldRef = useRef(null);
+    const submit = (event) => {
+        if (isBusy) {
+            event.preventDefault();
+            return;
+        }
+        if (onSend === undefined)
+            return;
+        event.preventDefault();
+        const { submitter } = event.nativeEvent;
+        const text = submitter instanceof HTMLButtonElement && submitter.name === 'suggestion'
+            ? submitter.value
+            : (fieldRef.current?.value ?? '').trim();
+        if (text === '')
+            return;
+        onSend(text);
+        if (fieldRef.current)
+            fieldRef.current.value = '';
+    };
+    // Enter sends, as in any chat; Shift+Enter and a word still being composed do not.
+    const keyDown = (event) => {
+        if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing)
+            return;
+        event.preventDefault();
+        event.currentTarget.form?.requestSubmit();
+    };
+    return (_jsxs("form", { className: cx('rw-chat-composer', className), method: "post", action: action, onSubmit: submit, children: [_jsxs("div", { className: "rw-chat-composer__box", children: [attachments !== undefined && (_jsx("div", { className: "rw-chat-composer__attachments", children: attachments })), _jsx("label", { className: "rw-visually-hidden", htmlFor: fieldId, children: label ?? t('chat.message') }), _jsx("textarea", { ref: fieldRef, id: fieldId, className: "rw-chat-composer__input", name: "message", rows: 1, required: true, placeholder: placeholder, "aria-describedby": note === undefined ? undefined : noteId, onKeyDown: keyDown }), _jsxs("div", { className: "rw-chat-composer__bar", children: [_jsx("div", { className: "rw-chat-composer__tools", children: tools }), _jsx("button", { type: "submit", className: "rw-chat-composer__send", "aria-label": t('chat.send'), "aria-disabled": isBusy || undefined, children: _jsx(ArrowUpIcon, { size: "md" }) })] })] }), note !== undefined && (_jsx("p", { className: "rw-chat-composer__note", id: noteId, children: note })), suggestions.length > 0 && (_jsxs("div", { className: "rw-chat-composer__suggestions", role: "group", "aria-labelledby": suggestionsId, children: [_jsx("span", { className: "rw-visually-hidden", id: suggestionsId, children: t('chat.suggestions') }), suggestions
+                        .map(asSuggestion)
+                        .map(({ label: title, prompt, description, icon: Icon }) => (_jsxs("button", { type: "submit", name: "suggestion", value: prompt ?? title, formNoValidate: true, className: "rw-chat-composer__suggestion", children: [Icon !== undefined && (_jsx(Icon, { size: "md", className: "rw-chat-composer__suggestion-icon" })), _jsx("span", { className: "rw-chat-composer__suggestion-title", children: title }), description !== undefined && (_jsx("span", { className: "rw-chat-composer__suggestion-text", children: description }))] }, title)))] }))] }));
+}
+//# sourceMappingURL=ChatComposer.js.map

package/dist/ChatComposer/ChatComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.js","sourceRoot":"","sources":["../../src/ChatComposer/ChatComposer.tsx"],"names":[],"mappings":"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"}

package/dist/ChatComposer/index.d.ts

@@ -0,0 +1,3 @@
+export { ChatComposer } from './ChatComposer.tsx';
+export type { ChatComposerProps, ChatSuggestion } from './ChatComposer.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/ChatComposer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ChatComposer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/ChatComposer/index.js

@@ -0,0 +1,2 @@
+export { ChatComposer } from "./ChatComposer.js";
+//# sourceMappingURL=index.js.map

package/dist/ChatComposer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ChatComposer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC"}

package/dist/ChatThread/ChatThread.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+export declare const chatHeadingLevels: readonly [2, 3, 4, 5, 6];
+export type ChatHeadingLevel = (typeof chatHeadingLevels)[number];
+/** A page an answer drew on. */
+export interface ChatSource {
+    readonly title: string;
+    readonly href: string;
+}
+/** One turn of a conversation: what the person asked, or what the assistant answered. */
+export interface ChatTurn {
+    readonly id: string;
+    readonly role: 'user' | 'assistant';
+    /** The words, with any lists, tables or links an answer needs. */
+    readonly content: ReactNode;
+    /** The pages an answer drew on, listed under it. */
+    readonly sources?: readonly ChatSource[];
+    /** When it was said: for machines, such as "2026-11-08T14:35", and for people. */
+    readonly time?: {
+        readonly dateTime: string;
+        readonly label: string;
+    };
+    /** Small controls after an answer, such as copy and whether it helped. */
+    readonly actions?: ReactNode;
+}
+export interface ChatThreadProps {
+    /** Such as "Licensing assistant"; screen readers hear it before each answer. */
+    readonly assistantName: string;
+    readonly turns: readonly ChatTurn[];
+    /** While the assistant writes its next answer. */
+    readonly isResponding?: boolean;
+    /** The level of the hidden heading before each message, from the page's outline. */
+    readonly headingLevel?: ChatHeadingLevel;
+    readonly className?: string;
+}
+/**
+ * A conversation with an assistant, as a log: each message under a hidden heading saying who
+ * said it, the person's in a bubble at the end, answers across the column with their sources,
+ * time and actions, and a status while the next answer is written.
+ */
+export declare function ChatThread({ assistantName, turns, isResponding, headingLevel, className, }: ChatThreadProps): ReactNode;
+//# sourceMappingURL=ChatThread.d.ts.map

package/dist/ChatThread/ChatThread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatThread.d.ts","sourceRoot":"","sources":["../../src/ChatThread/ChatThread.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,iBAAiB,0BAA2B,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAIlE,gCAAgC;AAChC,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,yFAAyF;AACzF,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IACpC,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACzC,kFAAkF;IAClF,QAAQ,CAAC,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,0EAA0E;IAC1E,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,gFAAgF;IAChF,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IACpC,kDAAkD;IAClD,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,oFAAoF;IACpF,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,KAAK,EACL,YAAoB,EACpB,YAAgB,EAChB,SAAS,GACV,EAAE,eAAe,GAAG,SAAS,CA0D7B"}

package/dist/ChatThread/ChatThread.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLinkComponent, useMessages } from "../providers/index.js";
+import { cx } from "../shared/classes.js";
+export const chatHeadingLevels = [2, 3, 4, 5, 6];
+const HEADINGS = { 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5', 6: 'h6' };
+/**
+ * A conversation with an assistant, as a log: each message under a hidden heading saying who
+ * said it, the person's in a bubble at the end, answers across the column with their sources,
+ * time and actions, and a status while the next answer is written.
+ */
+export function ChatThread({ assistantName, turns, isResponding = false, headingLevel = 2, className, }) {
+    const { t } = useMessages();
+    const Link = useLinkComponent();
+    const Heading = HEADINGS[headingLevel];
+    const Subheading = HEADINGS[Math.min(headingLevel + 1, 6)];
+    return (_jsxs("div", { className: cx('rw-chat-thread', className), children: [_jsx("div", { className: "rw-chat-thread__log", role: "log", "aria-label": t('chat.conversation'), children: turns.map((turn) => (_jsxs("article", { className: `rw-chat-message rw-chat-message--${turn.role}`, children: [_jsx(Heading, { className: "rw-visually-hidden", children: turn.role === 'user'
+                                ? t('chat.youSaid')
+                                : t('chat.assistantSaid', { name: assistantName }) }), _jsx("div", { className: "rw-chat-message__body", children: turn.content }), turn.sources !== undefined && turn.sources.length > 0 && (_jsxs("div", { className: "rw-chat-message__sources", children: [_jsx(Subheading, { className: "rw-chat-message__sources-title", children: t('chat.sources') }), _jsx("ol", { className: "rw-chat-message__source-list", children: turn.sources.map((source) => (_jsx("li", { children: _jsx(Link, { href: source.href, className: "rw-chat-message__source", children: source.title }) }, source.href))) })] })), (turn.time !== undefined || turn.actions !== undefined) && (_jsxs("div", { className: "rw-chat-message__meta", children: [turn.time !== undefined && (_jsx("time", { className: "rw-chat-message__time", dateTime: turn.time.dateTime, children: turn.time.label })), turn.actions !== undefined && (_jsx("div", { className: "rw-chat-message__actions", children: turn.actions }))] }))] }, turn.id))) }), _jsx("p", { className: "rw-chat-thread__status", role: "status", children: isResponding && (_jsxs(_Fragment, { children: [_jsx("span", { className: "rw-spinner rw-spinner--sm", "aria-hidden": "true" }), t('chat.responding', { name: assistantName })] })) })] }));
+}
+//# sourceMappingURL=ChatThread.js.map

package/dist/ChatThread/ChatThread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatThread.js","sourceRoot":"","sources":["../../src/ChatThread/ChatThread.tsx"],"names":[],"mappings":"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"}

package/dist/ChatThread/index.d.ts

@@ -0,0 +1,3 @@
+export { ChatThread, chatHeadingLevels } from './ChatThread.tsx';
+export type { ChatHeadingLevel, ChatSource, ChatThreadProps, ChatTurn } from './ChatThread.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/ChatThread/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ChatThread/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/ChatThread/index.js

@@ -0,0 +1,2 @@
+export { ChatThread, chatHeadingLevels } from "./ChatThread.js";
+//# sourceMappingURL=index.js.map

package/dist/ChatThread/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ChatThread/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAkB,CAAC"}

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export interface CheckboxProps {
+    /** The label. */
+    readonly children: ReactNode;
+    readonly hint?: ReactNode;
+    /** For a checkbox on its own, such as a declaration that must be ticked. */
+    readonly error?: ReactNode;
+    /** Submitted under `name` when checked; identifies the box inside a CheckboxGroup. */
+    readonly value?: string;
+    readonly name?: string;
+    readonly isSelected?: boolean;
+    readonly defaultSelected?: boolean;
+    readonly onChange?: (isSelected: boolean) => void;
+    /** Shows a mixed state, for a box that selects a list of which only some are chosen. */
+    readonly isIndeterminate?: boolean;
+    readonly isDisabled?: boolean;
+    readonly isRequired?: boolean;
+    readonly id?: string;
+    readonly className?: string;
+}
+/** A native checkbox with its label, for a yes or no answer, or one of several in a group. */
+export declare function Checkbox({ children, hint, error, value, name, isSelected, defaultSelected, onChange, isIndeterminate, isDisabled, isRequired, id, className, }: CheckboxProps): ReactNode;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,aAAa;IAC5B,iBAAiB;IACjB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,sFAAsF;IACtF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,wFAAwF;IACxF,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,8FAA8F;AAC9F,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,eAAuB,EACvB,QAAQ,EACR,eAAuB,EACvB,UAAkB,EAClB,UAAkB,EAClB,EAAE,EACF,SAAS,GACV,EAAE,aAAa,GAAG,SAAS,CAiD3B"}

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControlledState } from '@react-stately/utils';
+import { useEffect, useId, useRef } from 'react';
+import { ErrorText } from "../Field/Field.js";
+import { cx } from "../shared/classes.js";
+import { useCheckboxGroup } from "../shared/choice-context.js";
+import { joinIds } from "../TextField/TextField.js";
+/** A native checkbox with its label, for a yes or no answer, or one of several in a group. */
+export function Checkbox({ children, hint, error, value, name, isSelected, defaultSelected = false, onChange, isIndeterminate = false, isDisabled = false, isRequired = false, id, className, }) {
+    const group = useCheckboxGroup();
+    const [ownSelected, setOwnSelected] = useControlledState(isSelected, defaultSelected, onChange);
+    const selected = group && value !== undefined ? group.isSelected(value) : ownSelected;
+    const setSelected = (next) => {
+        if (group && value !== undefined)
+            group.setSelected(value, next);
+        else
+            setOwnSelected(next);
+    };
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = isIndeterminate;
+    }, [isIndeterminate]);
+    const ownId = useId();
+    const inputId = id ?? ownId;
+    const hintId = `${inputId}-hint`;
+    const errorId = `${inputId}-error`;
+    return (_jsxs("div", { className: cx('rw-checkbox', className), children: [error != null && (_jsx(ErrorText, { id: errorId, className: "rw-checkbox__error", children: error })), _jsx("input", { ref: ref, className: "rw-checkbox__input", type: "checkbox", id: inputId, name: group?.name ?? name, value: value, checked: selected, onChange: (event) => {
+                    setSelected(event.target.checked);
+                }, disabled: isDisabled || group?.isDisabled === true, "aria-required": isRequired || undefined, "aria-invalid": error != null || undefined, "aria-describedby": joinIds(hint != null && hintId, error != null && errorId) }), _jsx("label", { className: "rw-checkbox__label", htmlFor: inputId, children: children }), hint != null && (_jsx("p", { className: "rw-checkbox__hint", id: hintId, children: hint }))] }));
+}
+//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox.tsx';
+export type { CheckboxProps } from './Checkbox.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox.js";
+//# sourceMappingURL=index.js.map

package/dist/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC"}

package/dist/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { FieldsetProps } from '../Fieldset/Fieldset.tsx';
+export interface ChoiceGroupProps extends Omit<FieldsetProps, 'children'> {
+    readonly name?: string;
+    /** `horizontal` lays short options in a row that wraps. */
+    readonly orientation?: 'vertical' | 'horizontal';
+    readonly children?: ReactNode;
+}
+export interface CheckboxGroupProps extends ChoiceGroupProps {
+    readonly value?: readonly string[];
+    readonly defaultValue?: readonly string[];
+    readonly onChange?: (value: string[]) => void;
+}
+/** Several checkboxes that answer one question, under a legend. */
+export declare function CheckboxGroup({ name, orientation, value, defaultValue, onChange, children, ...fieldset }: CheckboxGroupProps): ReactNode;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAI9D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACvE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC/C;AAID,mEAAmE;AACnE,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,WAAwB,EACxB,KAAK,EACL,YAAoB,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,QAAQ,EACZ,EAAE,kBAAkB,GAAG,SAAS,CA0BhC"}

package/dist/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useControlledState } from '@react-stately/utils';
+import { Fieldset } from "../Fieldset/Fieldset.js";
+import { cx } from "../shared/classes.js";
+import { CheckboxGroupContext } from "../shared/choice-context.js";
+const EMPTY = [];
+/** Several checkboxes that answer one question, under a legend. */
+export function CheckboxGroup({ name, orientation = 'vertical', value, defaultValue = EMPTY, onChange, children, ...fieldset }) {
+    const [selected, setSelected] = useControlledState(value, defaultValue, (next) => onChange?.([...next]));
+    return (_jsx(Fieldset, { ...fieldset, children: _jsx(CheckboxGroupContext, { value: {
+                name,
+                isDisabled: fieldset.isDisabled === true,
+                isSelected: (option) => selected.includes(option),
+                setSelected: (option, on) => {
+                    setSelected(on ? [...selected, option] : selected.filter((v) => v !== option));
+                },
+            }, children: _jsx("div", { className: cx('rw-choice-list', orientation === 'horizontal' && 'rw-choice-list--inline'), children: children }) }) }));
+}
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/CheckboxGroup/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAA0B,CAAC;AAEpD,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAenE,MAAM,KAAK,GAAsB,EAAE,CAAC;AAEpC,mEAAmE;AACnE,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,WAAW,GAAG,UAAU,EACxB,KAAK,EACL,YAAY,GAAG,KAAK,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,QAAQ,EACQ;IACnB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,kBAAkB,CAChD,KAAK,EACL,YAAY,EACZ,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAChC,CAAC;IACF,OAAO,CACL,KAAC,QAAQ,OAAK,QAAQ,YACpB,KAAC,oBAAoB,IACnB,KAAK,EAAE;gBACL,IAAI;gBACJ,UAAU,EAAE,QAAQ,CAAC,UAAU,KAAK,IAAI;gBACxC,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;gBACjD,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;oBAC1B,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC;gBACjF,CAAC;aACF,YAED,cACE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,WAAW,KAAK,YAAY,IAAI,wBAAwB,CAAC,YAExF,QAAQ,GACL,GACe,GACd,CACZ,CAAC;AACJ,CAAC"}

package/dist/CheckboxGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { CheckboxGroup } from './CheckboxGroup.tsx';
+export type { CheckboxGroupProps, ChoiceGroupProps } from './CheckboxGroup.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/CheckboxGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/CheckboxGroup/index.js

@@ -0,0 +1,2 @@
+export { CheckboxGroup } from "./CheckboxGroup.js";
+//# sourceMappingURL=index.js.map

package/dist/CheckboxGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CheckboxGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC"}

package/dist/CodeField/CodeField.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export interface CodeFieldProps {
+    readonly label: ReactNode;
+    /** Where the code went and how long it lasts, such as "We sent it to +250 78• ••• •12". */
+    readonly hint?: ReactNode;
+    /** Why the code did not work, such as "The code has expired". */
+    readonly error?: ReactNode;
+    /** How many digits the code has. */
+    readonly length?: number;
+    /** How the boxes are grouped, such as [3, 3]; six digits are split in two, fewer stay together. */
+    readonly groups?: readonly number[];
+    readonly name?: string;
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onChange?: (value: string) => void;
+    /** Called once every digit is in, with the code, such as to send the form at once. */
+    readonly onComplete?: (code: string) => void;
+    readonly isRequired?: boolean;
+    readonly isDisabled?: boolean;
+    readonly className?: string;
+}
+/**
+ * A one-time code, one box per digit across the width. One real input sits over the boxes, so
+ * the code from a text message fills in on its own, a pasted code goes in whole, and screen
+ * readers meet an ordinary field. Without script it is a plain wide field.
+ */
+export declare function CodeField(props: CodeFieldProps): ReactNode;
+//# sourceMappingURL=CodeField.d.ts.map

package/dist/CodeField/CodeField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../src/CodeField/CodeField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,2FAA2F;IAC3F,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,iEAAiE;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,mGAAmG;IACnG,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,sFAAsF;IACtF,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAMD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CAoF1D"}

package/dist/CodeField/CodeField.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControlledState } from '@react-stately/utils';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { useTextField } from 'react-aria';
+import { Field } from "../Field/Field.js";
+import { cx } from "../shared/classes.js";
+import { defined } from "../shared/dev.js";
+import { useFieldDescription } from "../TextField/TextField.js";
+// Groups of three where the length allows, so six digits read as two halves.
+const defaultGroups = (length) => length > 3 && length % 3 === 0 ? Array.from({ length: length / 3 }, () => 3) : [length];
+/**
+ * A one-time code, one box per digit across the width. One real input sits over the boxes, so
+ * the code from a text message fills in on its own, a pasted code goes in whole, and screen
+ * readers meet an ordinary field. Without script it is a plain wide field.
+ */
+export function CodeField(props) {
+    const { length = 6, onComplete, className } = props;
+    const groups = props.groups ?? defaultGroups(length);
+    const ref = useRef(null);
+    const [isEnhanced, setEnhanced] = useState(false);
+    useEffect(() => {
+        setEnhanced(true);
+    }, []);
+    const [value, setValue] = useControlledState(props.value, props.defaultValue ?? '', props.onChange);
+    const { hintProps, errorProps, describedBy } = useFieldDescription(props);
+    const { labelProps, inputProps } = useTextField({
+        ...defined({
+            label: props.label,
+            name: props.name,
+            isRequired: props.isRequired,
+            isDisabled: props.isDisabled,
+        }),
+        value,
+        onChange: (typed) => {
+            // Digits only, so a pasted "123 456" or "123-456" goes in whole.
+            const digits = typed.replace(/\D/g, '').slice(0, length);
+            setValue(digits);
+            if (digits.length === length && digits !== value)
+                onComplete?.(digits);
+        },
+        inputMode: 'numeric',
+        autoComplete: 'one-time-code',
+        // Room for the spaces or dashes a message puts in a code, so a paste is not cut short;
+        // only digits are kept, up to the length.
+        maxLength: length * 2,
+        isInvalid: props.error != null,
+        validationBehavior: 'aria',
+    }, ref);
+    const active = Math.min(value.length, length - 1);
+    let index = 0;
+    return (_jsx("div", { className: cx('rw-code-field', className), ...(isEnhanced && { 'data-enhanced': '' }), children: _jsx(Field, { label: props.label, hint: props.hint, error: props.error, isOptional: false, labelProps: labelProps, hintProps: hintProps, errorProps: errorProps, children: _jsxs("div", { className: "rw-code-field__control", children: [_jsx("input", { ...inputProps, ref: ref, "aria-describedby": describedBy, pattern: "[0-9]*", spellCheck: false, className: "rw-input rw-code-field__input" }), _jsx("div", { className: "rw-code-field__slots", "aria-hidden": "true", children: groups.map((size, group) => (_jsxs(Fragment, { children: [group > 0 && _jsx("span", { className: "rw-code-field__separator" }), Array.from({ length: size }, () => {
+                                    const at = index++;
+                                    return (_jsx("span", { className: "rw-code-field__slot", ...(at === active && { 'data-active': '' }), children: value[at] ?? '' }, at));
+                                })] }, group))) })] }) }) }));
+}
+//# sourceMappingURL=CodeField.js.map