@panneau/ui 0.0.0-stage → 5.0.0-alpha.0

package/dist/time-input/TimeInput.d.ts

@@ -0,0 +1,8 @@
+import { type TimeFieldProps, type TimeValue } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+export interface TimeInputProps extends Omit<TimeFieldProps<TimeValue>, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>, FieldChromeProps {
+    controlClassName?: string;
+}
+/** A time of day, typed segment by segment in the format of the locale. */
+export declare function TimeInput({ label, description, errors, isRequired, isReadOnly, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, ...props }: TimeInputProps): import("react").JSX.Element;
+//# sourceMappingURL=TimeInput.d.ts.map

package/dist/time-input/TimeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/time-input/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,cAAc,EACnB,KAAK,SAAS,EACjB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,cACb,SACI,IAAI,CACA,cAAc,CAAC,SAAS,CAAC,EACzB,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAChE,EACD,gBAAgB;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,2EAA2E;AAC3E,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,MAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,cAAc,+BAyBhB"}

package/dist/time-input/TimeInput.js

@@ -0,0 +1,45 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import DatePicker_module_default from "../date-picker/DatePicker.module.js";
+import { DateInput, DateSegment, TimeField } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/time-input/TimeInput.tsx
+/** A time of day, typed segment by segment in the format of the locale. */
+function TimeInput({ label, description, errors = [], isRequired, isReadOnly, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(TimeField, {
+		...props,
+		isRequired,
+		isReadOnly,
+		isInvalid: errors.length > 0,
+		validationBehavior: "aria",
+		className: cx(Field_module_default.field, className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				isRequired,
+				className: labelClassName,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(DateInput, {
+				className: cx(Field_module_default.control, DatePicker_module_default.input, controlClassName),
+				"data-readonly": isReadOnly || void 0,
+				children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
+					segment,
+					className: DatePicker_module_default.segment
+				})
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				className: descriptionClassName,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, {
+				errors,
+				className: errorsClassName
+			})
+		]
+	});
+}
+//#endregion
+export { TimeInput };
+
+//# sourceMappingURL=TimeInput.js.map

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

@@ -0,0 +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"}

package/dist/toast/Toast.css

@@ -0,0 +1,109 @@
+/* The region carries the root's class (tokens), since React Aria renders it in the body. */
+.panneau-region-wzx1vG.panneau-region-wzx1vG {
+    position: fixed;
+    inset-block-end: var(--panneau-space-4);
+    inset-inline-end: var(--panneau-space-4);
+    z-index: var(--panneau-z-toast);
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--panneau-space-2);
+    width: min(24rem, calc(100vw - 2 * var(--panneau-space-4)));
+    background: transparent;
+    outline: none;
+}
+
+.panneau-region-wzx1vG[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 {
+        inset-inline: var(--panneau-space-2);
+        inset-block-end: var(--panneau-space-2);
+        width: auto;
+    }
+}
+
+.panneau-toast-zcR9rJ {
+    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);
+    outline: none;
+}
+
+.panneau-toast-zcR9rJ[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 {
+    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);
+}
+
+.panneau-info-3p-uFF .panneau-icon-xCysks {
+    color: var(--panneau-color-info);
+}
+
+.panneau-content-oL01to {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    min-width: 0;
+    padding-top: 0.125rem;
+}
+
+.panneau-title-ZUmw4H {
+    font-weight: var(--panneau-font-weight-medium);
+    overflow-wrap: anywhere;
+}
+
+.panneau-description-bQFVpf {
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+    overflow-wrap: anywhere;
+}
+
+.panneau-actions-4GKOfg {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--panneau-space-1);
+}

package/dist/toast/Toast.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+export type ToastTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';
+/** What a toast says. */
+export interface ToastContent {
+    title: string;
+    description?: string;
+    /** Defaults to `neutral`. */
+    tone?: ToastTone;
+    /** A button in the toast, such as "Retry" or "Undo". The toast closes when it is pressed. */
+    action?: {
+        label: string;
+        onAction: () => void;
+    };
+}
+export interface ToastOptions {
+    /**
+     * Milliseconds before the toast closes by itself. Defaults to 5000, and to no timeout for
+     * toasts with an action, which users must have time to reach.
+     */
+    timeout?: number | null;
+    onClose?: () => void;
+}
+export interface Toasts {
+    /** Shows a toast. Returns its key. */
+    show(content: ToastContent, options?: ToastOptions): string;
+    /** Closes a toast by key. */
+    close(key: string): void;
+}
+/** Shows toasts in the closest `PanneauRoot`. */
+export declare function useToast(): Toasts;
+export interface ToastProviderProps {
+    children?: ReactNode;
+    /** Class names that give the region its tokens, since it renders in the body. */
+    regionClassName?: string;
+    regionProps?: Record<`data-${string}`, string | undefined>;
+}
+/** Holds the toasts of a `PanneauRoot` and renders them in an accessible region. */
+export declare function ToastProvider({ children, regionClassName, regionProps }: ToastProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +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"}

package/dist/toast/Toast.js

@@ -0,0 +1,152 @@
+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 { Button as Button$1 } from "../button/Button.js";
+import Toast_module_default from "./Toast.module.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useState } from "react";
+import { c } from "react/compiler-runtime";
+//#region src/toast/Toast.tsx
+var TONE_ICONS = {
+	neutral: null,
+	success: CircleCheck,
+	danger: CircleAlert,
+	warning: TriangleAlert,
+	info: Info
+};
+var ToastContext = createContext(null);
+/** Shows toasts in the closest `PanneauRoot`. */
+function useToast() {
+	const toasts = use(ToastContext);
+	if (toasts === null) throw new Error("useToast() must be used inside <PanneauRoot>.");
+	return toasts;
+}
+/** Holds the toasts of a `PanneauRoot` and renders them in an accessible region. */
+function ToastProvider(t0) {
+	const $ = c(19);
+	const { children, regionClassName, regionProps } = t0;
+	const intl = usePanneauIntl();
+	const [queue] = useState(_temp);
+	let t1;
+	if ($[0] !== queue) {
+		t1 = () => ({
+			show(content, t2) {
+				const { timeout, onClose } = t2 === void 0 ? {} : t2;
+				const delay = timeout === void 0 ? content.action ? null : 5e3 : timeout;
+				return queue.add(content, {
+					...delay !== null ? { timeout: delay } : {},
+					...onClose !== void 0 ? { onClose } : {}
+				});
+			},
+			close(key) {
+				queue.close(key);
+			}
+		});
+		$[0] = queue;
+		$[1] = t1;
+	} else t1 = $[1];
+	const [toasts] = useState(t1);
+	let t2;
+	if ($[2] !== intl) {
+		t2 = intl.formatMessage(messages.notifications);
+		$[2] = intl;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== regionClassName) {
+		t3 = cx(regionClassName, Toast_module_default.region);
+		$[4] = regionClassName;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== intl || $[7] !== queue) {
+		t4 = (t5) => {
+			const { toast } = t5;
+			const tone = toast.content.tone ?? "neutral";
+			const icon = TONE_ICONS[tone];
+			const { action } = toast.content;
+			return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
+				toast,
+				className: cx(Toast_module_default.toast, Toast_module_default[tone]),
+				children: [
+					icon !== null ? /* @__PURE__ */ jsx(Icon, {
+						icon,
+						size: "lg",
+						className: Toast_module_default.icon
+					}) : null,
+					/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
+						className: Toast_module_default.content,
+						children: [/* @__PURE__ */ jsx(Text, {
+							slot: "title",
+							className: Toast_module_default.title,
+							children: toast.content.title
+						}), toast.content.description !== void 0 ? /* @__PURE__ */ jsx(Text, {
+							slot: "description",
+							className: Toast_module_default.description,
+							children: toast.content.description
+						}) : null]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: Toast_module_default.actions,
+						children: [action !== void 0 ? /* @__PURE__ */ jsx(Button$1, {
+							size: "sm",
+							onPress: () => {
+								action.onAction();
+								queue.close(toast.key);
+							},
+							children: action.label
+						}) : null, /* @__PURE__ */ jsx(IconButton, {
+							slot: "close",
+							icon: X,
+							size: "sm",
+							label: intl.formatMessage(messages.close),
+							showTooltip: false
+						})]
+					})
+				]
+			});
+		};
+		$[6] = intl;
+		$[7] = queue;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== queue || $[10] !== regionProps || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(UNSTABLE_ToastRegion, {
+			queue,
+			"aria-label": t2,
+			className: t3,
+			...regionProps,
+			children: t4
+		});
+		$[9] = queue;
+		$[10] = regionProps;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== children || $[16] !== t5 || $[17] !== toasts) {
+		t6 = /* @__PURE__ */ jsxs(ToastContext, {
+			value: toasts,
+			children: [children, t5]
+		});
+		$[15] = children;
+		$[16] = t5;
+		$[17] = toasts;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+function _temp() {
+	return new UNSTABLE_ToastQueue({ maxVisibleToasts: 5 });
+}
+//#endregion
+export { ToastProvider, useToast };
+
+//# sourceMappingURL=Toast.js.map

package/dist/toast/Toast.js.map

@@ -0,0 +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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"}

package/dist/toast/Toast.module.js

@@ -0,0 +1,30 @@
+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 Toast_module_default = {
+	region,
+	toast,
+	success,
+	danger,
+	warning,
+	info,
+	icon,
+	content,
+	title,
+	description,
+	actions
+};
+//#endregion
+export { actions, content, danger, Toast_module_default as default, description, icon, info, region, success, title, toast, warning };
+
+//# sourceMappingURL=Toast.module.js.map

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

@@ -0,0 +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":""}

package/dist/tooltip/Tooltip.css

@@ -0,0 +1,25 @@
+.panneau-tooltip--CWkTN {
+    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);
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-color-bg);
+    background-color: var(--panneau-color-text);
+    border-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--CWkTN[data-exiting] {
+    animation: panneau-fade--CCbVC var(--panneau-duration) reverse ease-in;
+}
+
+@keyframes panneau-fade--CCbVC {
+    from {
+        opacity: 0;
+    }
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from 'react';
+import { type TooltipProps as AriaTooltipProps } from 'react-aria-components';
+export interface TooltipProps {
+    /** Content of the tooltip. */
+    content: ReactNode;
+    /** The element that shows the tooltip on hover and focus: a focusable React Aria element. */
+    children: ReactElement;
+    placement?: AriaTooltipProps['placement'];
+    /** Delay before showing, in milliseconds. Defaults to 600. */
+    delay?: number;
+    isDisabled?: boolean;
+    className?: string;
+}
+/**
+ * A tooltip on hover and keyboard focus. It only adds a description: never put information or
+ * actions in it that aren't available otherwise, since touch screens don't show it.
+ */
+export declare function Tooltip({ content, children, placement, delay, isDisabled, className, }: TooltipProps): import("react").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEH,KAAK,YAAY,IAAI,gBAAgB,EAExC,MAAM,uBAAuB,CAAC;AAM/B,MAAM,WAAW,YAAY;IACzB,8BAA8B;IAC9B,OAAO,EAAE,SAAS,CAAC;IACnB,6FAA6F;IAC7F,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAW,EACX,UAAkB,EAClB,SAAS,GACZ,EAAE,YAAY,+BAkBd"}

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,29 @@
+import { cx } from "../utils/cx.js";
+import { usePortalContainer } from "../root/PanneauRoot.js";
+import Tooltip_module_default from "./Tooltip.module.js";
+import { Tooltip, TooltipTrigger } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/tooltip/Tooltip.tsx
+/**
+* A tooltip on hover and keyboard focus. It only adds a description: never put information or
+* actions in it that aren't available otherwise, since touch screens don't show it.
+*/
+function Tooltip$1({ content, children, placement = "top", delay = 600, isDisabled = false, className }) {
+	const container = usePortalContainer();
+	if (container === null) return children;
+	return /* @__PURE__ */ jsxs(TooltipTrigger, {
+		delay,
+		isDisabled,
+		children: [children, /* @__PURE__ */ jsx(Tooltip, {
+			placement,
+			offset: 6,
+			className: cx(Tooltip_module_default.tooltip, className),
+			UNSTABLE_portalContainer: container,
+			children: content
+		})]
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["Tooltip","AriaTooltip","styles"],"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport {\n    Tooltip as AriaTooltip,\n    type TooltipProps as AriaTooltipProps,\n    TooltipTrigger,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n    /** Content of the tooltip. */\n    content: ReactNode;\n    /** The element that shows the tooltip on hover and focus: a focusable React Aria element. */\n    children: ReactElement;\n    placement?: AriaTooltipProps['placement'];\n    /** Delay before showing, in milliseconds. Defaults to 600. */\n    delay?: number;\n    isDisabled?: boolean;\n    className?: string;\n}\n\n/**\n * A tooltip on hover and keyboard focus. It only adds a description: never put information or\n * actions in it that aren't available otherwise, since touch screens don't show it.\n */\nexport function Tooltip({\n    content,\n    children,\n    placement = 'top',\n    delay = 600,\n    isDisabled = false,\n    className,\n}: TooltipProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return children;\n    }\n    return (\n        <TooltipTrigger delay={delay} isDisabled={isDisabled}>\n            {children}\n            <AriaTooltip\n                placement={placement}\n                offset={6}\n                className={cx(styles.tooltip, className)}\n                UNSTABLE_portalContainer={container}\n            >\n                {content}\n            </AriaTooltip>\n        </TooltipTrigger>\n    );\n}\n"],"mappings":";;;;;;;;;;AA2BA,SAAgBA,UAAQ,EACpB,SACA,UACA,YAAY,OACZ,QAAQ,KACR,aAAa,OACb,aACa;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,qBAAC,gBAAD;EAAuB;EAAmB;EAA1C,UAAA,CACK,UACD,oBAACC,SAAD;GACe;GACX,QAAQ;GACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;GACvC,0BAA0B;GAEzB,UAAA;EACQ,CAAA,CACD;;AAExB"}

package/dist/tooltip/Tooltip.module.js

@@ -0,0 +1,12 @@
+import "./Tooltip.css";
+//#region src/tooltip/Tooltip.module.css
+var tooltip = "panneau-tooltip--CWkTN";
+var fade = "panneau-fade--CCbVC";
+var Tooltip_module_default = {
+	tooltip,
+	fade
+};
+//#endregion
+export { Tooltip_module_default as default, fade, tooltip };
+
+//# sourceMappingURL=Tooltip.module.js.map

package/dist/tooltip/Tooltip.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../src/tooltip/Tooltip.module.css"],"sourcesContent":[".tooltip {\n    max-width: min(20rem, calc(100vw - 2 * var(--panneau-space-4)));\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-bg);\n    background-color: var(--panneau-color-text);\n    border-radius: var(--panneau-radius-sm);\n    box-shadow: var(--panneau-shadow-md);\n    z-index: var(--panneau-z-overlay);\n}\n\n.tooltip[data-entering] {\n    animation: fade var(--panneau-duration);\n}\n\n.tooltip[data-exiting] {\n    animation: fade var(--panneau-duration) reverse ease-in;\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n    }\n}\n"],"mappings":""}

package/dist/utils/cx.d.ts

@@ -0,0 +1,3 @@
+/** Joins class names, skipping empty ones. */
+export declare function cx(...classNames: (string | false | null | undefined)[]): string;
+//# sourceMappingURL=cx.d.ts.map

package/dist/utils/cx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../../src/utils/cx.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE/E"}

package/dist/utils/cx.js

@@ -0,0 +1,9 @@
+//#region src/utils/cx.ts
+/** Joins class names, skipping empty ones. */
+function cx(...classNames) {
+	return classNames.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };
+
+//# sourceMappingURL=cx.js.map

package/dist/utils/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","names":[],"sources":["../../src/utils/cx.ts"],"sourcesContent":["/** Joins class names, skipping empty ones. */\nexport function cx(...classNames: (string | false | null | undefined)[]): string {\n    return classNames.filter(Boolean).join(' ');\n}\n"],"mappings":";;AACA,SAAgB,GAAG,GAAG,YAA2D;CAC7E,OAAO,WAAW,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC9C"}

package/package.json

@@ -1,6 +1,49 @@
 {
-  "name": "@panneau/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@panneau/ui",
+    "version": "5.0.0-alpha.0",
+    "description": "Design tokens, themes and accessible primitives of Panneau, built on React Aria Components.",
+    "type": "module",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/folkloreinc/panneau-js.git",
+        "directory": "packages/ui"
+    },
+    "sideEffects": [
+        "*.css"
+    ],
+    "exports": {
+        ".": {
+            "@panneau/source": "./src/index.ts",
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./locales": {
+            "@panneau/source": "./src/locales/index.ts",
+            "types": "./dist/locales/index.d.ts",
+            "default": "./dist/locales/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build && tsc -p tsconfig.build.json",
+        "typecheck": "tsc --noEmit",
+        "api": "tsc -p tsconfig.build.json && node ../../scripts/api-report.js"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "react-aria-components": "^1.22.0",
+        "react-intl": "^12.0.0"
+    },
+    "dependencies": {
+        "@panneau/intl": "5.0.0-alpha.0",
+        "lucide-react": "^1.57.0"
+    }
+}