@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.2

package/dist/theme/tones.d.ts

@@ -0,0 +1,89 @@
+import { type Rgb } from './color';
+/**
+ * The tones that components accept (`tone="success"`), like Bootstrap's `$theme-colors`. A theme
+ * adds its own; declare them here so that `tone="signal"` type-checks:
+ *
+ * ```ts
+ * declare module '@panneau/ui' {
+ *     interface PanneauTones {
+ *         signal: true;
+ *     }
+ * }
+ * ```
+ */
+export interface PanneauTones {
+    neutral: true;
+    accent: true;
+    success: true;
+    warning: true;
+    danger: true;
+    info: true;
+}
+/** A tone name: a built-in tone, or one declared in `PanneauTones`. */
+export type Tone = keyof PanneauTones & string;
+/** The tones Panneau defines, from the semantic tokens of the theme. */
+export declare const BUILT_IN_TONES: readonly ["neutral", "accent", "success", "warning", "danger", "info"];
+/** The colors of a tone, as CSS values. */
+export type ToneValues = {
+    /** Text and icons on surfaces: the outline, subtle and ghost appearances. */
+    text: string;
+    /** Background of the subtle appearance. */
+    subtle: string;
+    /** Border of the subtle appearance. */
+    border: string;
+    /** Border of the outline appearance. */
+    outline: string;
+    /** Background of the solid appearance. */
+    solid: string;
+    /** Background of the solid appearance on hover and press. */
+    solidHover: string;
+    /** Text on the solid appearance. */
+    solidText: string;
+};
+/**
+ * A tone of a theme: one color, from which Panneau derives the others (`'#f25c05'`), or every
+ * value, with optional overrides for the dark scheme.
+ */
+export type ToneInput = string | (ToneValues & {
+    dark?: Partial<ToneValues>;
+});
+/** The local CSS variables of a tone, which components read. */
+export declare const TONE_VARIABLES: Readonly<Record<keyof ToneValues, string>>;
+/** The class that applies a tone: `panneau-tone-<tone>`. */
+export declare function toneClassName(tone: string): string;
+/** The surfaces of a theme, in each scheme, when it sets ones Panneau can read. */
+export type ToneSurfaces = Partial<Record<'light' | 'dark', Rgb>>;
+/** How much of the tone's color the subtle background mixes into the surface, per scheme. */
+export declare const SUBTLE_AMOUNTS: {
+    light: number;
+    dark: number;
+};
+/** Text must reach this contrast ratio (WCAG AA for normal text). */
+export declare const MIN_CONTRAST_RATIO = 4.5;
+/**
+ * The values of a tone, in both schemes, from one color: Panneau's `button-variant()` and
+ * `color-contrast()`.
+ *
+ * - The solid background is the color, with white or black text, whichever reads better, and a
+ *   hover 15% darker (or lighter, when the text is black and darker would hurt it).
+ * - The text color is the color, darkened (light scheme) or lightened (dark scheme) until it
+ *   reaches 4.5:1 against the subtle background, which is tinted, and so against the surface too.
+ * - The subtle background and the border are mixed with the surface in CSS, so they follow the
+ *   surface of any theme.
+ *
+ * A color Panneau can't read (a CSS variable, a named color) is used as is, with `color-mix()` for
+ * the hover and white text: `checkTheme()` reports it as unchecked.
+ *
+ * Text is made readable on the surfaces of the default theme, or on those given, which themes pass
+ * so that a tone stays readable on their own surfaces.
+ */
+export declare function deriveTone(color: string, surfaces?: ToneSurfaces): {
+    light: ToneValues;
+    dark: ToneValues;
+};
+/** The values of a tone input, in both schemes, derived on the given surfaces if it is one color. */
+export declare function resolveTone(input: ToneInput, surfaces?: ToneSurfaces): {
+    light: ToneValues;
+    dark: ToneValues;
+};
+//# sourceMappingURL=tones.d.ts.map

package/dist/theme/tones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tones.d.ts","sourceRoot":"","sources":["../../src/theme/tones.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,GAAG,EAQX,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;CACd;AAED,uEAAuE;AACvE,MAAM,MAAM,IAAI,GAAG,MAAM,YAAY,GAAG,MAAM,CAAC;AAE/C,wEAAwE;AACxE,eAAO,MAAM,cAAc,wEAOjB,CAAC;AAEX,2CAA2C;AAC3C,MAAM,MAAM,UAAU,GAAG;IACrB,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,UAAU,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CAAE,CAAC,CAAC;AAE/E,gEAAgE;AAChE,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,UAAU,EAAE,MAAM,CAAC,CAQrE,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAKD,mFAAmF;AACnF,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;AAElE,6FAA6F;AAC7F,eAAO,MAAM,cAAc;;;CAA8B,CAAC;AAE1D,qEAAqE;AACrE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,MAAM,EACb,QAAQ,GAAE,YAAiB,GAC5B;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAuDzC;AAED,qGAAqG;AACrG,wBAAgB,WAAW,CACvB,KAAK,EAAE,SAAS,EAChB,QAAQ,GAAE,YAAiB,GAC5B;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAMzC"}

package/dist/theme/tones.js

@@ -0,0 +1,127 @@
+import { WHITE, contrastRatio, ensureContrast, mixColors, parseColor, readableTextColor, toHex } from "./color.js";
+//#region src/theme/tones.ts
+/** The tones Panneau defines, from the semantic tokens of the theme. */
+var BUILT_IN_TONES = [
+	"neutral",
+	"accent",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+/** The local CSS variables of a tone, which components read. */
+var TONE_VARIABLES = {
+	text: "panneau-tone-text",
+	subtle: "panneau-tone-subtle",
+	border: "panneau-tone-border",
+	outline: "panneau-tone-outline",
+	solid: "panneau-tone-solid",
+	solidHover: "panneau-tone-solid-hover",
+	solidText: "panneau-tone-solid-text"
+};
+/** The class that applies a tone: `panneau-tone-<tone>`. */
+function toneClassName(tone) {
+	return `panneau-tone-${tone}`;
+}
+/** Surfaces text must be readable on, in each scheme of the default theme. */
+var SURFACES = {
+	light: WHITE,
+	dark: {
+		r: 24,
+		g: 24,
+		b: 27
+	}
+};
+/** How much of the tone's color the subtle background mixes into the surface, per scheme. */
+var SUBTLE_AMOUNTS = {
+	light: .12,
+	dark: .22
+};
+/** Text must reach this contrast ratio (WCAG AA for normal text). */
+var MIN_CONTRAST_RATIO = 4.5;
+/**
+* The values of a tone, in both schemes, from one color: Panneau's `button-variant()` and
+* `color-contrast()`.
+*
+* - The solid background is the color, with white or black text, whichever reads better, and a
+*   hover 15% darker (or lighter, when the text is black and darker would hurt it).
+* - The text color is the color, darkened (light scheme) or lightened (dark scheme) until it
+*   reaches 4.5:1 against the subtle background, which is tinted, and so against the surface too.
+* - The subtle background and the border are mixed with the surface in CSS, so they follow the
+*   surface of any theme.
+*
+* A color Panneau can't read (a CSS variable, a named color) is used as is, with `color-mix()` for
+* the hover and white text: `checkTheme()` reports it as unchecked.
+*
+* Text is made readable on the surfaces of the default theme, or on those given, which themes pass
+* so that a tone stays readable on their own surfaces.
+*/
+function deriveTone(color, surfaces = {}) {
+	const subtle = (amount) => `color-mix(in srgb, ${color} ${amount}%, var(--panneau-color-surface))`;
+	const parsed = parseColor(color);
+	if (parsed === null) {
+		const values = {
+			text: color,
+			subtle: subtle(SUBTLE_AMOUNTS.light * 100),
+			border: subtle(45),
+			outline: color,
+			solid: color,
+			solidHover: `color-mix(in srgb, ${color}, #000 15%)`,
+			solidText: "#fff"
+		};
+		return {
+			light: values,
+			dark: {
+				...values,
+				subtle: subtle(SUBTLE_AMOUNTS.dark * 100)
+			}
+		};
+	}
+	const solidText = readableTextColor(parsed);
+	const darker = mixColors(parsed, {
+		r: 0,
+		g: 0,
+		b: 0
+	}, .15);
+	const hover = contrastRatio(solidText, darker) >= contrastRatio(solidText, parsed) ? darker : mixColors(parsed, WHITE, .15);
+	const shared = {
+		solid: toHex(parsed),
+		solidHover: toHex(hover),
+		solidText: toHex(solidText)
+	};
+	const readable = (scheme) => toHex(ensureContrast(parsed, mixColors(surfaces[scheme] ?? SURFACES[scheme], parsed, SUBTLE_AMOUNTS[scheme]), MIN_CONTRAST_RATIO));
+	const light = readable("light");
+	const dark = readable("dark");
+	return {
+		light: {
+			...shared,
+			text: light,
+			outline: light,
+			subtle: subtle(SUBTLE_AMOUNTS.light * 100),
+			border: subtle(45)
+		},
+		dark: {
+			...shared,
+			text: dark,
+			outline: dark,
+			subtle: subtle(SUBTLE_AMOUNTS.dark * 100),
+			border: subtle(55)
+		}
+	};
+}
+/** The values of a tone input, in both schemes, derived on the given surfaces if it is one color. */
+function resolveTone(input, surfaces = {}) {
+	if (typeof input === "string") return deriveTone(input, surfaces);
+	const { dark, ...light } = input;
+	return {
+		light,
+		dark: {
+			...light,
+			...dark
+		}
+	};
+}
+//#endregion
+export { BUILT_IN_TONES, MIN_CONTRAST_RATIO, SUBTLE_AMOUNTS, TONE_VARIABLES, deriveTone, resolveTone, toneClassName };
+
+//# sourceMappingURL=tones.js.map

package/dist/theme/tones.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tones.js","names":[],"sources":["../../src/theme/tones.ts"],"sourcesContent":["import {\n    type Rgb,\n    WHITE,\n    contrastRatio,\n    ensureContrast,\n    mixColors,\n    parseColor,\n    readableTextColor,\n    toHex,\n} from './color';\n\n/**\n * The tones that components accept (`tone=\"success\"`), like Bootstrap's `$theme-colors`. A theme\n * adds its own; declare them here so that `tone=\"signal\"` type-checks:\n *\n * ```ts\n * declare module '@panneau/ui' {\n *     interface PanneauTones {\n *         signal: true;\n *     }\n * }\n * ```\n */\nexport interface PanneauTones {\n    neutral: true;\n    accent: true;\n    success: true;\n    warning: true;\n    danger: true;\n    info: true;\n}\n\n/** A tone name: a built-in tone, or one declared in `PanneauTones`. */\nexport type Tone = keyof PanneauTones & string;\n\n/** The tones Panneau defines, from the semantic tokens of the theme. */\nexport const BUILT_IN_TONES = [\n    'neutral',\n    'accent',\n    'success',\n    'warning',\n    'danger',\n    'info',\n] as const;\n\n/** The colors of a tone, as CSS values. */\nexport type ToneValues = {\n    /** Text and icons on surfaces: the outline, subtle and ghost appearances. */\n    text: string;\n    /** Background of the subtle appearance. */\n    subtle: string;\n    /** Border of the subtle appearance. */\n    border: string;\n    /** Border of the outline appearance. */\n    outline: string;\n    /** Background of the solid appearance. */\n    solid: string;\n    /** Background of the solid appearance on hover and press. */\n    solidHover: string;\n    /** Text on the solid appearance. */\n    solidText: string;\n};\n\n/**\n * A tone of a theme: one color, from which Panneau derives the others (`'#f25c05'`), or every\n * value, with optional overrides for the dark scheme.\n */\nexport type ToneInput = string | (ToneValues & { dark?: Partial<ToneValues> });\n\n/** The local CSS variables of a tone, which components read. */\nexport const TONE_VARIABLES: Readonly<Record<keyof ToneValues, string>> = {\n    text: 'panneau-tone-text',\n    subtle: 'panneau-tone-subtle',\n    border: 'panneau-tone-border',\n    outline: 'panneau-tone-outline',\n    solid: 'panneau-tone-solid',\n    solidHover: 'panneau-tone-solid-hover',\n    solidText: 'panneau-tone-solid-text',\n};\n\n/** The class that applies a tone: `panneau-tone-<tone>`. */\nexport function toneClassName(tone: string): string {\n    return `panneau-tone-${tone}`;\n}\n\n/** Surfaces text must be readable on, in each scheme of the default theme. */\nconst SURFACES: Record<'light' | 'dark', Rgb> = { light: WHITE, dark: { r: 24, g: 24, b: 27 } };\n\n/** The surfaces of a theme, in each scheme, when it sets ones Panneau can read. */\nexport type ToneSurfaces = Partial<Record<'light' | 'dark', Rgb>>;\n\n/** How much of the tone's color the subtle background mixes into the surface, per scheme. */\nexport const SUBTLE_AMOUNTS = { light: 0.12, dark: 0.22 };\n\n/** Text must reach this contrast ratio (WCAG AA for normal text). */\nexport const MIN_CONTRAST_RATIO = 4.5;\n\n/**\n * The values of a tone, in both schemes, from one color: Panneau's `button-variant()` and\n * `color-contrast()`.\n *\n * - The solid background is the color, with white or black text, whichever reads better, and a\n *   hover 15% darker (or lighter, when the text is black and darker would hurt it).\n * - The text color is the color, darkened (light scheme) or lightened (dark scheme) until it\n *   reaches 4.5:1 against the subtle background, which is tinted, and so against the surface too.\n * - The subtle background and the border are mixed with the surface in CSS, so they follow the\n *   surface of any theme.\n *\n * A color Panneau can't read (a CSS variable, a named color) is used as is, with `color-mix()` for\n * the hover and white text: `checkTheme()` reports it as unchecked.\n *\n * Text is made readable on the surfaces of the default theme, or on those given, which themes pass\n * so that a tone stays readable on their own surfaces.\n */\nexport function deriveTone(\n    color: string,\n    surfaces: ToneSurfaces = {},\n): { light: ToneValues; dark: ToneValues } {\n    const subtle = (amount: number) =>\n        `color-mix(in srgb, ${color} ${amount}%, var(--panneau-color-surface))`;\n    const parsed = parseColor(color);\n    if (parsed === null) {\n        const values: ToneValues = {\n            text: color,\n            subtle: subtle(SUBTLE_AMOUNTS.light * 100),\n            border: subtle(45),\n            outline: color,\n            solid: color,\n            solidHover: `color-mix(in srgb, ${color}, #000 15%)`,\n            solidText: '#fff',\n        };\n        return { light: values, dark: { ...values, subtle: subtle(SUBTLE_AMOUNTS.dark * 100) } };\n    }\n    const solidText = readableTextColor(parsed);\n    const darker = mixColors(parsed, { r: 0, g: 0, b: 0 }, 0.15);\n    const hover =\n        contrastRatio(solidText, darker) >= contrastRatio(solidText, parsed)\n            ? darker\n            : mixColors(parsed, WHITE, 0.15);\n    const solid = toHex(parsed);\n    const shared = {\n        solid,\n        solidHover: toHex(hover),\n        solidText: toHex(solidText),\n    };\n    // Readable on the subtle background, which is closer to the text color than the surface.\n    const readable = (scheme: 'light' | 'dark') =>\n        toHex(\n            ensureContrast(\n                parsed,\n                mixColors(surfaces[scheme] ?? SURFACES[scheme], parsed, SUBTLE_AMOUNTS[scheme]),\n                MIN_CONTRAST_RATIO,\n            ),\n        );\n    const light = readable('light');\n    const dark = readable('dark');\n    return {\n        light: {\n            ...shared,\n            text: light,\n            outline: light,\n            subtle: subtle(SUBTLE_AMOUNTS.light * 100),\n            border: subtle(45),\n        },\n        dark: {\n            ...shared,\n            text: dark,\n            outline: dark,\n            subtle: subtle(SUBTLE_AMOUNTS.dark * 100),\n            border: subtle(55),\n        },\n    };\n}\n\n/** The values of a tone input, in both schemes, derived on the given surfaces if it is one color. */\nexport function resolveTone(\n    input: ToneInput,\n    surfaces: ToneSurfaces = {},\n): { light: ToneValues; dark: ToneValues } {\n    if (typeof input === 'string') {\n        return deriveTone(input, surfaces);\n    }\n    const { dark, ...light } = input;\n    return { light, dark: { ...light, ...dark } };\n}\n"],"mappings":";;;AAoCA,IAAa,iBAAiB;CAC1B;CACA;CACA;CACA;CACA;CACA;AAAM;;AA4BV,IAAa,iBAA6D;CACtE,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,OAAO;CACP,YAAY;CACZ,WAAW;AACf;;AAGA,SAAgB,cAAc,MAAsB;CAChD,OAAO,gBAAgB;AAC3B;;AAGA,IAAM,WAA0C;CAAE,OAAO;CAAO,MAAM;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;CAAG;AAAE;;AAM9F,IAAa,iBAAiB;CAAE,OAAO;CAAM,MAAM;AAAK;;AAGxD,IAAa,qBAAqB;;;;;;;;;;;;;;;;;;AAmBlC,SAAgB,WACZ,OACA,WAAyB,CAAC,GACa;CACvC,MAAM,UAAU,WACZ,sBAAsB,MAAK,GAAI,OAAM;CACzC,MAAM,SAAS,WAAW,KAAK;CAC/B,IAAI,WAAW,MAAM;EACjB,MAAM,SAAqB;GACvB,MAAM;GACN,QAAQ,OAAO,eAAe,QAAQ,GAAG;GACzC,QAAQ,OAAO,EAAE;GACjB,SAAS;GACT,OAAO;GACP,YAAY,sBAAsB,MAAK;GACvC,WAAW;EACf;EACA,OAAO;GAAE,OAAO;GAAQ,MAAM;IAAE,GAAG;IAAQ,QAAQ,OAAO,eAAe,OAAO,GAAG;GAAE;EAAE;CAC3F;CACA,MAAM,YAAY,kBAAkB,MAAM;CAC1C,MAAM,SAAS,UAAU,QAAQ;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;CAAE,GAAG,GAAI;CAC3D,MAAM,QACF,cAAc,WAAW,MAAM,KAAK,cAAc,WAAW,MAAM,IAC7D,SACA,UAAU,QAAQ,OAAO,GAAI;CAEvC,MAAM,SAAS;EACX,OAFU,MAAM,MAEhB;EACA,YAAY,MAAM,KAAK;EACvB,WAAW,MAAM,SAAS;CAC9B;CAEA,MAAM,YAAY,WACd,MACI,eACI,QACA,UAAU,SAAS,WAAW,SAAS,SAAS,QAAQ,eAAe,OAAO,GAC9E,kBACJ,CACJ;CACJ,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,OAAO,SAAS,MAAM;CAC5B,OAAO;EACH,OAAO;GACH,GAAG;GACH,MAAM;GACN,SAAS;GACT,QAAQ,OAAO,eAAe,QAAQ,GAAG;GACzC,QAAQ,OAAO,EAAE;EACrB;EACA,MAAM;GACF,GAAG;GACH,MAAM;GACN,SAAS;GACT,QAAQ,OAAO,eAAe,OAAO,GAAG;GACxC,QAAQ,OAAO,EAAE;EACrB;CACJ;AACJ;;AAGA,SAAgB,YACZ,OACA,WAAyB,CAAC,GACa;CACvC,IAAI,OAAO,UAAU,UACjB,OAAO,WAAW,OAAO,QAAQ;CAErC,MAAM,EAAE,MAAM,GAAG,UAAU;CAC3B,OAAO;EAAE;EAAO,MAAM;GAAE,GAAG;GAAO,GAAG;EAAK;CAAE;AAChD"}

package/dist/time-input/TimeInput.js

@@ -13,7 +13,7 @@ function TimeInput({ label, description, errors = [], isRequired, isReadOnly, cl
 		isReadOnly,
 		isInvalid: errors.length > 0,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-time-input", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/time-input/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","names":["fieldStyles","datePickerStyles"],"sources":["../../src/time-input/TimeInput.tsx"],"sourcesContent":["import {\n    DateInput,\n    DateSegment,\n    TimeField,\n    type TimeFieldProps,\n    type TimeValue,\n} from 'react-aria-components';\n\nimport datePickerStyles from '../date-picker/DatePicker.module.css';\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TimeInputProps\n    extends\n        Omit<\n            TimeFieldProps<TimeValue>,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate'\n        >,\n        FieldChromeProps {\n    controlClassName?: string;\n}\n\n/** A time of day, typed segment by segment in the format of the locale. */\nexport function TimeInput({\n    label,\n    description,\n    errors = [],\n    isRequired,\n    isReadOnly,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    ...props\n}: TimeInputProps) {\n    return (\n        <TimeField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <DateInput\n                className={cx(fieldStyles.control, datePickerStyles.input, controlClassName)}\n                data-readonly={isReadOnly || undefined}\n            >\n                {(segment) => (\n                    <DateSegment segment={segment} className={datePickerStyles.segment} />\n                )}\n            </DateInput>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TimeField>\n    );\n}\n"],"mappings":";;;;;;;;AA6BA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,YACA,YACA,WACA,gBACA,sBACA,iBACA,kBACA,GAAG,SACY;CACf,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAGA,qBAAY,OAAO,SAAS;EAN9C,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAAC,WAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,0BAAiB,OAAO,gBAAgB;IAC3E,iBAAe,cAAc,KAAA;IAE3B,WAAA,YACE,oBAAC,aAAD;KAAsB;KAAS,WAAWA,0BAAiB;IAAQ,CAAA;GAEhE,CAAA;GACX,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}
+{"version":3,"file":"TimeInput.js","names":["fieldStyles","datePickerStyles"],"sources":["../../src/time-input/TimeInput.tsx"],"sourcesContent":["import {\n    DateInput,\n    DateSegment,\n    TimeField,\n    type TimeFieldProps,\n    type TimeValue,\n} from 'react-aria-components';\n\nimport datePickerStyles from '../date-picker/DatePicker.module.css';\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TimeInputProps\n    extends\n        Omit<\n            TimeFieldProps<TimeValue>,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate'\n        >,\n        FieldChromeProps {\n    controlClassName?: string;\n}\n\n/** A time of day, typed segment by segment in the format of the locale. */\nexport function TimeInput({\n    label,\n    description,\n    errors = [],\n    isRequired,\n    isReadOnly,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    ...props\n}: TimeInputProps) {\n    return (\n        <TimeField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx('panneau-time-input', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <DateInput\n                className={cx(fieldStyles.control, datePickerStyles.input, controlClassName)}\n                data-readonly={isReadOnly || undefined}\n            >\n                {(segment) => (\n                    <DateSegment segment={segment} className={datePickerStyles.segment} />\n                )}\n            </DateInput>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TimeField>\n    );\n}\n"],"mappings":";;;;;;;;AA6BA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,YACA,YACA,WACA,gBACA,sBACA,iBACA,kBACA,GAAG,SACY;CACf,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAG,sBAAsBA,qBAAY,OAAO,SAAS;EANpE,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAAC,WAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,0BAAiB,OAAO,gBAAgB;IAC3E,iBAAe,cAAc,KAAA;IAE3B,WAAA,YACE,oBAAC,aAAD;KAAsB;KAAS,WAAWA,0BAAiB;IAAQ,CAAA;GAEhE,CAAA;GACX,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/toast/Toast.css

@@ -1,5 +1,5 @@
 /* The region carries the root's class (tokens), since React Aria renders it in the body. */
-.panneau-region-wzx1vG.panneau-region-wzx1vG {
+.panneau-toast-region.panneau-toast-region {
     position: fixed;
     inset-block-end: var(--panneau-space-4);
     inset-inline-end: var(--panneau-space-4);
@@ -7,81 +7,59 @@
     display: flex;
     flex-direction: column-reverse;
     gap: var(--panneau-space-2);
-    width: min(24rem, calc(100vw - 2 * var(--panneau-space-4)));
+    width: min(var(--panneau-toast-width, 24rem), calc(100vw - 2 * var(--panneau-space-4)));
     background: transparent;
     outline: none;
 }
 
-.panneau-region-wzx1vG[data-focus-visible] {
+.panneau-toast-region[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 4px;
 }
 
 @media (max-width: 30rem) {
-    .panneau-region-wzx1vG.panneau-region-wzx1vG {
+    .panneau-toast-region.panneau-toast-region {
         inset-inline: var(--panneau-space-2);
         inset-block-end: var(--panneau-space-2);
         width: auto;
     }
 }
 
-.panneau-toast-zcR9rJ {
+.panneau-toast {
     display: flex;
     align-items: flex-start;
     gap: var(--panneau-space-3);
     padding: var(--panneau-space-3) var(--panneau-space-3) var(--panneau-space-3)
         var(--panneau-space-4);
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-raised);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-inline-start-width: 4px;
-    border-radius: var(--panneau-radius-lg);
-    box-shadow: var(--panneau-shadow-lg);
+    background-color: var(--panneau-toast-bg, var(--panneau-color-surface-raised));
+    border: var(--panneau-border-width) solid
+        var(--panneau-toast-border-color, var(--panneau-color-border));
+    border-inline-start-width: var(--panneau-toast-tone-width, 4px);
+    border-radius: var(--panneau-toast-radius, var(--panneau-radius-lg));
+    box-shadow: var(--panneau-toast-shadow, var(--panneau-shadow-lg));
     outline: none;
 }
 
-.panneau-toast-zcR9rJ[data-focus-visible] {
+.panneau-toast[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-success-bKO-t0 {
-    border-inline-start-color: var(--panneau-color-success);
-}
-
-.panneau-danger-xAgJYb {
-    border-inline-start-color: var(--panneau-color-danger);
-}
-
-.panneau-warning-8eqKky {
-    border-inline-start-color: var(--panneau-color-warning);
-}
-
-.panneau-info-3p-uFF {
-    border-inline-start-color: var(--panneau-color-info);
-}
-
-.panneau-icon-xCysks {
+.panneau-toast-icon {
     margin-top: 0.125rem;
 }
 
-.panneau-success-bKO-t0 .panneau-icon-xCysks {
-    color: var(--panneau-color-success);
-}
-
-.panneau-danger-xAgJYb .panneau-icon-xCysks {
-    color: var(--panneau-color-danger);
-}
-
-.panneau-warning-8eqKky .panneau-icon-xCysks {
-    color: var(--panneau-color-warning);
+/* A toast with a tone other than neutral: a colored edge and icon, from its tone class. */
+.panneau-toast-toned {
+    border-inline-start-color: var(--panneau-tone-text);
 }
 
-.panneau-info-3p-uFF .panneau-icon-xCysks {
-    color: var(--panneau-color-info);
+.panneau-toast-toned .panneau-toast-icon {
+    color: var(--panneau-tone-text);
 }
 
-.panneau-content-oL01to {
+.panneau-toast-content {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -90,18 +68,18 @@
     padding-top: 0.125rem;
 }
 
-.panneau-title-ZUmw4H {
+.panneau-toast-title {
     font-weight: var(--panneau-font-weight-medium);
     overflow-wrap: anywhere;
 }
 
-.panneau-description-bQFVpf {
+.panneau-toast-description {
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
     overflow-wrap: anywhere;
 }
 
-.panneau-actions-4GKOfg {
+.panneau-toast-actions {
     display: flex;
     flex: 0 0 auto;
     align-items: center;

package/dist/toast/Toast.d.ts

@@ -1,11 +1,13 @@
 import { type ReactNode } from 'react';
-export type ToastTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';
+import type { Tone } from '../theme/tones';
+/** @deprecated Use `Tone`. */
+export type ToastTone = Tone;
 /** What a toast says. */
 export interface ToastContent {
     title: string;
     description?: string;
-    /** Defaults to `neutral`. */
-    tone?: ToastTone;
+    /** Defaults to `neutral`. Any tone other than neutral colors the edge and the icon. */
+    tone?: Tone;
     /** A button in the toast, such as "Retry" or "Undo". The toast closes when it is pressed. */
     action?: {
         label: string;

package/dist/toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAiBrE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,yBAAyB;AACzB,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6FAA6F;IAC7F,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,WAAW,YAAY;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,MAAM;IACnB,sCAAsC;IACtC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC5D,6BAA6B;IAC7B,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAYD,iDAAiD;AACjD,wBAAgB,QAAQ,IAAI,MAAM,CAMjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9D;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BAqE3F"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAerE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,8BAA8B;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC;AAE7B,yBAAyB;AACzB,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6FAA6F;IAC7F,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,WAAW,YAAY;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,MAAM;IACnB,sCAAsC;IACtC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC5D,6BAA6B;IAC7B,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAYD,iDAAiD;AACjD,wBAAgB,QAAQ,IAAI,MAAM,CAMjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9D;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BA6E3F"}

package/dist/toast/Toast.js

@@ -2,6 +2,7 @@ import { cx } from "../utils/cx.js";
 import { Icon } from "../icon/Icon.js";
 import { messages } from "../intl/messages.js";
 import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import { toneClass } from "../theme/toneClass.js";
 import { Button as Button$1 } from "../button/Button.js";
 import Toast_module_default from "./Toast.module.js";
 import { IconButton } from "../icon-button/IconButton.js";
@@ -58,7 +59,7 @@ function ToastProvider(t0) {
 	} else t2 = $[3];
 	let t3;
 	if ($[4] !== regionClassName) {
-		t3 = cx(regionClassName, Toast_module_default.region);
+		t3 = cx("panneau-toast-region", regionClassName, Toast_module_default.region);
 		$[4] = regionClassName;
 		$[5] = t3;
 	} else t3 = $[5];
@@ -67,11 +68,11 @@ function ToastProvider(t0) {
 		t4 = (t5) => {
 			const { toast } = t5;
 			const tone = toast.content.tone ?? "neutral";
-			const icon = TONE_ICONS[tone];
+			const icon = TONE_ICONS[tone] ?? null;
 			const { action } = toast.content;
 			return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
 				toast,
-				className: cx(Toast_module_default.toast, Toast_module_default[tone]),
+				className: cx("panneau-toast", Toast_module_default.toast, toneClass(tone), tone !== "neutral" && Toast_module_default.toned),
 				children: [
 					icon !== null ? /* @__PURE__ */ jsx(Icon, {
 						icon,

package/dist/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["toast","icon","X","queue","toasts","children","_c","styles","AriaToast","AriaToastContent","Button","AriaToastRegion","AriaToastQueue"],"sources":["../../src/toast/Toast.tsx"],"sourcesContent":["import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport { type ReactNode, createContext, use, useState } from 'react';\nimport {\n    UNSTABLE_Toast as AriaToast,\n    UNSTABLE_ToastContent as AriaToastContent,\n    UNSTABLE_ToastQueue as AriaToastQueue,\n    UNSTABLE_ToastRegion as AriaToastRegion,\n    Text,\n} from 'react-aria-components';\n\nimport { Button } from '../button/Button';\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Toast.module.css';\n\nexport type ToastTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';\n\n/** What a toast says. */\nexport interface ToastContent {\n    title: string;\n    description?: string;\n    /** Defaults to `neutral`. */\n    tone?: ToastTone;\n    /** A button in the toast, such as \"Retry\" or \"Undo\". The toast closes when it is pressed. */\n    action?: { label: string; onAction: () => void };\n}\n\nexport interface ToastOptions {\n    /**\n     * Milliseconds before the toast closes by itself. Defaults to 5000, and to no timeout for\n     * toasts with an action, which users must have time to reach.\n     */\n    timeout?: number | null;\n    onClose?: () => void;\n}\n\nexport interface Toasts {\n    /** Shows a toast. Returns its key. */\n    show(content: ToastContent, options?: ToastOptions): string;\n    /** Closes a toast by key. */\n    close(key: string): void;\n}\n\nconst TONE_ICONS: Record<ToastTone, IconComponent | null> = {\n    neutral: null,\n    success: CircleCheck,\n    danger: CircleAlert,\n    warning: TriangleAlert,\n    info: Info,\n};\n\nconst ToastContext = createContext<Toasts | null>(null);\n\n/** Shows toasts in the closest `PanneauRoot`. */\nexport function useToast(): Toasts {\n    const toasts = use(ToastContext);\n    if (toasts === null) {\n        throw new Error('useToast() must be used inside <PanneauRoot>.');\n    }\n    return toasts;\n}\n\nexport interface ToastProviderProps {\n    children?: ReactNode;\n    /** Class names that give the region its tokens, since it renders in the body. */\n    regionClassName?: string;\n    regionProps?: Record<`data-${string}`, string | undefined>;\n}\n\n/** Holds the toasts of a `PanneauRoot` and renders them in an accessible region. */\nexport function ToastProvider({ children, regionClassName, regionProps }: ToastProviderProps) {\n    const intl = usePanneauIntl();\n    const [queue] = useState(() => new AriaToastQueue<ToastContent>({ maxVisibleToasts: 5 }));\n    const [toasts] = useState<Toasts>(() => ({\n        show(content, { timeout, onClose } = {}) {\n            const delay = timeout === undefined ? (content.action ? null : 5000) : timeout;\n            return queue.add(content, {\n                ...(delay !== null ? { timeout: delay } : {}),\n                ...(onClose !== undefined ? { onClose } : {}),\n            });\n        },\n        close(key) {\n            queue.close(key);\n        },\n    }));\n    return (\n        <ToastContext value={toasts}>\n            {children}\n            <AriaToastRegion\n                queue={queue}\n                aria-label={intl.formatMessage(messages.notifications)}\n                className={cx(regionClassName, styles.region)}\n                {...regionProps}\n            >\n                {({ toast }) => {\n                    const tone = toast.content.tone ?? 'neutral';\n                    const icon = TONE_ICONS[tone];\n                    const { action } = toast.content;\n                    return (\n                        <AriaToast toast={toast} className={cx(styles.toast, styles[tone])}>\n                            {icon !== null ? (\n                                <Icon icon={icon} size=\"lg\" className={styles.icon} />\n                            ) : null}\n                            <AriaToastContent className={styles.content}>\n                                <Text slot=\"title\" className={styles.title}>\n                                    {toast.content.title}\n                                </Text>\n                                {toast.content.description !== undefined ? (\n                                    <Text slot=\"description\" className={styles.description}>\n                                        {toast.content.description}\n                                    </Text>\n                                ) : null}\n                            </AriaToastContent>\n                            <div className={styles.actions}>\n                                {action !== undefined ? (\n                                    <Button\n                                        size=\"sm\"\n                                        onPress={() => {\n                                            action.onAction();\n                                            queue.close(toast.key);\n                                        }}\n                                    >\n                                        {action.label}\n                                    </Button>\n                                ) : null}\n                                <IconButton\n                                    slot=\"close\"\n                                    icon={X}\n                                    size=\"sm\"\n                                    label={intl.formatMessage(messages.close)}\n                                    showTooltip={false}\n                                />\n                            </div>\n                        </AriaToast>\n                    );\n                }}\n            </AriaToastRegion>\n        </ToastContext>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Toast.js","names":["toast","icon","X","queue","toasts","children","_c","styles","AriaToast","AriaToastContent","Button","AriaToastRegion","AriaToastQueue"],"sources":["../../src/toast/Toast.tsx"],"sourcesContent":["import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport { type ReactNode, createContext, use, useState } from 'react';\nimport {\n    UNSTABLE_Toast as AriaToast,\n    UNSTABLE_ToastContent as AriaToastContent,\n    UNSTABLE_ToastQueue as AriaToastQueue,\n    UNSTABLE_ToastRegion as AriaToastRegion,\n    Text,\n} from 'react-aria-components';\n\nimport { Button } from '../button/Button';\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { toneClass } from '../theme/toneClass';\nimport type { Tone } from '../theme/tones';\nimport { cx } from '../utils/cx';\nimport styles from './Toast.module.css';\n\n/** @deprecated Use `Tone`. */\nexport type ToastTone = Tone;\n\n/** What a toast says. */\nexport interface ToastContent {\n    title: string;\n    description?: string;\n    /** Defaults to `neutral`. Any tone other than neutral colors the edge and the icon. */\n    tone?: Tone;\n    /** A button in the toast, such as \"Retry\" or \"Undo\". The toast closes when it is pressed. */\n    action?: { label: string; onAction: () => void };\n}\n\nexport interface ToastOptions {\n    /**\n     * Milliseconds before the toast closes by itself. Defaults to 5000, and to no timeout for\n     * toasts with an action, which users must have time to reach.\n     */\n    timeout?: number | null;\n    onClose?: () => void;\n}\n\nexport interface Toasts {\n    /** Shows a toast. Returns its key. */\n    show(content: ToastContent, options?: ToastOptions): string;\n    /** Closes a toast by key. */\n    close(key: string): void;\n}\n\nconst TONE_ICONS: Partial<Record<Tone, IconComponent | null>> = {\n    neutral: null,\n    success: CircleCheck,\n    danger: CircleAlert,\n    warning: TriangleAlert,\n    info: Info,\n};\n\nconst ToastContext = createContext<Toasts | null>(null);\n\n/** Shows toasts in the closest `PanneauRoot`. */\nexport function useToast(): Toasts {\n    const toasts = use(ToastContext);\n    if (toasts === null) {\n        throw new Error('useToast() must be used inside <PanneauRoot>.');\n    }\n    return toasts;\n}\n\nexport interface ToastProviderProps {\n    children?: ReactNode;\n    /** Class names that give the region its tokens, since it renders in the body. */\n    regionClassName?: string;\n    regionProps?: Record<`data-${string}`, string | undefined>;\n}\n\n/** Holds the toasts of a `PanneauRoot` and renders them in an accessible region. */\nexport function ToastProvider({ children, regionClassName, regionProps }: ToastProviderProps) {\n    const intl = usePanneauIntl();\n    const [queue] = useState(() => new AriaToastQueue<ToastContent>({ maxVisibleToasts: 5 }));\n    const [toasts] = useState<Toasts>(() => ({\n        show(content, { timeout, onClose } = {}) {\n            const delay = timeout === undefined ? (content.action ? null : 5000) : timeout;\n            return queue.add(content, {\n                ...(delay !== null ? { timeout: delay } : {}),\n                ...(onClose !== undefined ? { onClose } : {}),\n            });\n        },\n        close(key) {\n            queue.close(key);\n        },\n    }));\n    return (\n        <ToastContext value={toasts}>\n            {children}\n            <AriaToastRegion\n                queue={queue}\n                aria-label={intl.formatMessage(messages.notifications)}\n                className={cx('panneau-toast-region', regionClassName, styles.region)}\n                {...regionProps}\n            >\n                {({ toast }) => {\n                    const tone = toast.content.tone ?? 'neutral';\n                    const icon = TONE_ICONS[tone] ?? null;\n                    const { action } = toast.content;\n                    return (\n                        <AriaToast\n                            toast={toast}\n                            className={cx(\n                                'panneau-toast',\n                                styles.toast,\n                                toneClass(tone),\n                                tone !== 'neutral' && styles.toned,\n                            )}\n                        >\n                            {icon !== null ? (\n                                <Icon icon={icon} size=\"lg\" className={styles.icon} />\n                            ) : null}\n                            <AriaToastContent className={styles.content}>\n                                <Text slot=\"title\" className={styles.title}>\n                                    {toast.content.title}\n                                </Text>\n                                {toast.content.description !== undefined ? (\n                                    <Text slot=\"description\" className={styles.description}>\n                                        {toast.content.description}\n                                    </Text>\n                                ) : null}\n                            </AriaToastContent>\n                            <div className={styles.actions}>\n                                {action !== undefined ? (\n                                    <Button\n                                        size=\"sm\"\n                                        onPress={() => {\n                                            action.onAction();\n                                            queue.close(toast.key);\n                                        }}\n                                    >\n                                        {action.label}\n                                    </Button>\n                                ) : null}\n                                <IconButton\n                                    slot=\"close\"\n                                    icon={X}\n                                    size=\"sm\"\n                                    label={intl.formatMessage(messages.close)}\n                                    showTooltip={false}\n                                />\n                            </div>\n                        </AriaToast>\n                    );\n                }}\n            </AriaToastRegion>\n        </ToastContext>\n    );\n}\n"],"mappings":"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"}

package/dist/toast/Toast.module.js

@@ -1,30 +1,24 @@
 import "./Toast.css";
 //#region src/toast/Toast.module.css
-var region = "panneau-region-wzx1vG";
-var toast = "panneau-toast-zcR9rJ";
-var success = "panneau-success-bKO-t0";
-var danger = "panneau-danger-xAgJYb";
-var warning = "panneau-warning-8eqKky";
-var info = "panneau-info-3p-uFF";
-var icon = "panneau-icon-xCysks";
-var content = "panneau-content-oL01to";
-var title = "panneau-title-ZUmw4H";
-var description = "panneau-description-bQFVpf";
-var actions = "panneau-actions-4GKOfg";
+var region = "panneau-toast-region";
+var toast = "panneau-toast";
+var icon = "panneau-toast-icon";
+var toned = "panneau-toast-toned";
+var content = "panneau-toast-content";
+var title = "panneau-toast-title";
+var description = "panneau-toast-description";
+var actions = "panneau-toast-actions";
 var Toast_module_default = {
 	region,
 	toast,
-	success,
-	danger,
-	warning,
-	info,
 	icon,
+	toned,
 	content,
 	title,
 	description,
 	actions
 };
 //#endregion
-export { actions, content, danger, Toast_module_default as default, description, icon, info, region, success, title, toast, warning };
+export { actions, content, Toast_module_default as default, description, icon, region, title, toast, toned };
 
 //# sourceMappingURL=Toast.module.js.map

package/dist/toast/Toast.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.module.js","names":[],"sources":["../../src/toast/Toast.module.css"],"sourcesContent":["/* The region carries the root's class (tokens), since React Aria renders it in the body. */\n.region.region {\n    position: fixed;\n    inset-block-end: var(--panneau-space-4);\n    inset-inline-end: var(--panneau-space-4);\n    z-index: var(--panneau-z-toast);\n    display: flex;\n    flex-direction: column-reverse;\n    gap: var(--panneau-space-2);\n    width: min(24rem, calc(100vw - 2 * var(--panneau-space-4)));\n    background: transparent;\n    outline: none;\n}\n\n.region[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 4px;\n}\n\n@media (max-width: 30rem) {\n    .region.region {\n        inset-inline: var(--panneau-space-2);\n        inset-block-end: var(--panneau-space-2);\n        width: auto;\n    }\n}\n\n.toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-3) var(--panneau-space-3) var(--panneau-space-3)\n        var(--panneau-space-4);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-raised);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-inline-start-width: 4px;\n    border-radius: var(--panneau-radius-lg);\n    box-shadow: var(--panneau-shadow-lg);\n    outline: none;\n}\n\n.toast[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.success {\n    border-inline-start-color: var(--panneau-color-success);\n}\n\n.danger {\n    border-inline-start-color: var(--panneau-color-danger);\n}\n\n.warning {\n    border-inline-start-color: var(--panneau-color-warning);\n}\n\n.info {\n    border-inline-start-color: var(--panneau-color-info);\n}\n\n.icon {\n    margin-top: 0.125rem;\n}\n\n.success .icon {\n    color: var(--panneau-color-success);\n}\n\n.danger .icon {\n    color: var(--panneau-color-danger);\n}\n\n.warning .icon {\n    color: var(--panneau-color-warning);\n}\n\n.info .icon {\n    color: var(--panneau-color-info);\n}\n\n.content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n    padding-top: 0.125rem;\n}\n\n.title {\n    font-weight: var(--panneau-font-weight-medium);\n    overflow-wrap: anywhere;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-1);\n}\n"],"mappings":""}
+{"version":3,"file":"Toast.module.js","names":[],"sources":["../../src/toast/Toast.module.css"],"sourcesContent":["/* The region carries the root's class (tokens), since React Aria renders it in the body. */\n.region.region {\n    position: fixed;\n    inset-block-end: var(--panneau-space-4);\n    inset-inline-end: var(--panneau-space-4);\n    z-index: var(--panneau-z-toast);\n    display: flex;\n    flex-direction: column-reverse;\n    gap: var(--panneau-space-2);\n    width: min(var(--panneau-toast-width, 24rem), calc(100vw - 2 * var(--panneau-space-4)));\n    background: transparent;\n    outline: none;\n}\n\n.region[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 4px;\n}\n\n@media (max-width: 30rem) {\n    .region.region {\n        inset-inline: var(--panneau-space-2);\n        inset-block-end: var(--panneau-space-2);\n        width: auto;\n    }\n}\n\n.toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-3) var(--panneau-space-3) var(--panneau-space-3)\n        var(--panneau-space-4);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-toast-bg, var(--panneau-color-surface-raised));\n    border: var(--panneau-border-width) solid\n        var(--panneau-toast-border-color, var(--panneau-color-border));\n    border-inline-start-width: var(--panneau-toast-tone-width, 4px);\n    border-radius: var(--panneau-toast-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-toast-shadow, var(--panneau-shadow-lg));\n    outline: none;\n}\n\n.toast[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.icon {\n    margin-top: 0.125rem;\n}\n\n/* A toast with a tone other than neutral: a colored edge and icon, from its tone class. */\n.toned {\n    border-inline-start-color: var(--panneau-tone-text);\n}\n\n.toned .icon {\n    color: var(--panneau-tone-text);\n}\n\n.content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n    padding-top: 0.125rem;\n}\n\n.title {\n    font-weight: var(--panneau-font-weight-medium);\n    overflow-wrap: anywhere;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-1);\n}\n"],"mappings":""}

package/dist/toast/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Toast. */
+export declare const toastTokens: import("..").ComponentTokens<"toast", "panneau-toast-width" | "panneau-toast-radius" | "panneau-toast-bg" | "panneau-toast-border-color" | "panneau-toast-shadow" | "panneau-toast-tone-width">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/toast/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/toast/tokens.ts"],"names":[],"mappings":"AAEA,uBAAuB;AACvB,eAAO,MAAM,WAAW,iMAatB,CAAC"}

package/dist/toast/tokens.js

@@ -0,0 +1,21 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/toast/tokens.ts
+/** Tokens of Toast. */
+var toastTokens = defineComponentTokens("toast", {
+	/** Width of the toasts. */
+	width: "24rem",
+	/** Background. */
+	bg: "var(--panneau-color-surface-raised)",
+	/** Border color. */
+	"border-color": "var(--panneau-color-border)",
+	/** Width of the colored edge of a toast with a tone. */
+	"tone-width": "4px",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-lg)",
+	/** Shadow. */
+	shadow: "var(--panneau-shadow-lg)"
+});
+//#endregion
+export { toastTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/toast/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/toast/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Toast. */\nexport const toastTokens = defineComponentTokens('toast', {\n    /** Width of the toasts. */\n    width: '24rem',\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Border color. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Width of the colored edge of a toast with a tone. */\n    'tone-width': '4px',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-lg)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,OAAO;;CAEP,IAAI;;CAEJ,gBAAgB;;CAEhB,cAAc;;CAEd,QAAQ;;CAER,QAAQ;AACZ,CAAC"}

package/dist/tooltip/Tooltip.css

@@ -1,24 +1,25 @@
-.panneau-tooltip--CWkTN {
+.panneau-tooltip {
     max-width: min(20rem, calc(100vw - 2 * var(--panneau-space-4)));
-    padding: var(--panneau-space-1) var(--panneau-space-2);
-    font-size: var(--panneau-font-size-sm);
+    padding: var(--panneau-tooltip-padding-y, var(--panneau-space-1))
+        var(--panneau-tooltip-padding-x, var(--panneau-space-2));
+    font-size: var(--panneau-tooltip-font-size, var(--panneau-font-size-sm));
     line-height: var(--panneau-line-height-tight);
-    color: var(--panneau-color-bg);
-    background-color: var(--panneau-color-text);
-    border-radius: var(--panneau-radius-sm);
+    color: var(--panneau-tooltip-color, var(--panneau-color-bg));
+    background-color: var(--panneau-tooltip-bg, var(--panneau-color-text));
+    border-radius: var(--panneau-tooltip-radius, var(--panneau-radius-sm));
     box-shadow: var(--panneau-shadow-md);
     z-index: var(--panneau-z-overlay);
 }
 
-.panneau-tooltip--CWkTN[data-entering] {
-    animation: panneau-fade--CCbVC var(--panneau-duration);
+.panneau-tooltip[data-entering] {
+    animation: panneau-tooltip-fade var(--panneau-duration);
 }
 
-.panneau-tooltip--CWkTN[data-exiting] {
-    animation: panneau-fade--CCbVC var(--panneau-duration) reverse ease-in;
+.panneau-tooltip[data-exiting] {
+    animation: panneau-tooltip-fade var(--panneau-duration) reverse ease-in;
 }
 
-@keyframes panneau-fade--CCbVC {
+@keyframes panneau-tooltip-fade {
     from {
         opacity: 0;
     }