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

package/dist/select/ListBox.css

@@ -0,0 +1,104 @@
+/* Options of selects, combo boxes and menus. */
+
+.panneau-listBox-8esRuh {
+    display: flex;
+    flex-direction: column;
+    max-height: inherit;
+    padding: var(--panneau-space-1);
+    overflow: auto;
+    outline: none;
+}
+
+.panneau-item-Zfuva9 {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height-sm);
+    padding: var(--panneau-space-1) var(--panneau-space-2);
+    font-size: var(--panneau-font-size-control);
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-color-text);
+    cursor: default;
+    border-radius: var(--panneau-radius-sm);
+    outline: none;
+}
+
+.panneau-item-Zfuva9[data-focused],
+.panneau-item-Zfuva9[data-hovered] {
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-item-Zfuva9[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: -2px;
+}
+
+.panneau-item-Zfuva9[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.panneau-item-Zfuva9[data-danger] {
+    color: var(--panneau-color-danger);
+}
+
+.panneau-itemText-P7FtjI {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panneau-itemLabel-nLMoU0 {
+    overflow-wrap: anywhere;
+}
+
+.panneau-itemDescription--u64pt {
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-check-o1OMYv {
+    flex: 0 0 auto;
+    width: 1rem;
+    color: var(--panneau-color-text);
+}
+
+.panneau-placeholder-Ln7J3j {
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-empty-4GCKMh {
+    padding: var(--panneau-space-2);
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-separator-FjQdQ6 {
+    height: 1px;
+    margin: var(--panneau-space-1) 0;
+    background-color: var(--panneau-color-border);
+}
+
+.panneau-trigger-3OeZeM {
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+    text-align: start;
+    cursor: pointer;
+}
+
+.panneau-value-J-b74F {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-value-J-b74F[data-placeholder] {
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-chevron-w-papm {
+    color: var(--panneau-color-text-muted);
+}

package/dist/select/ListBox.module.js

@@ -0,0 +1,32 @@
+import "./ListBox.css";
+//#region src/select/ListBox.module.css
+var listBox = "panneau-listBox-8esRuh";
+var item = "panneau-item-Zfuva9";
+var itemText = "panneau-itemText-P7FtjI";
+var itemLabel = "panneau-itemLabel-nLMoU0";
+var itemDescription = "panneau-itemDescription--u64pt";
+var check = "panneau-check-o1OMYv";
+var placeholder = "panneau-placeholder-Ln7J3j";
+var empty = "panneau-empty-4GCKMh";
+var separator = "panneau-separator-FjQdQ6";
+var trigger = "panneau-trigger-3OeZeM";
+var value = "panneau-value-J-b74F";
+var chevron = "panneau-chevron-w-papm";
+var ListBox_module_default = {
+	listBox,
+	item,
+	itemText,
+	itemLabel,
+	itemDescription,
+	check,
+	placeholder,
+	empty,
+	separator,
+	trigger,
+	value,
+	chevron
+};
+//#endregion
+export { check, chevron, ListBox_module_default as default, empty, item, itemDescription, itemLabel, itemText, listBox, placeholder, separator, trigger, value };
+
+//# sourceMappingURL=ListBox.module.js.map

package/dist/select/ListBox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-space-1);\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-radius-sm);\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}

package/dist/select/Select.d.ts

@@ -0,0 +1,45 @@
+import { type FieldChromeProps } from '../field/FieldParts';
+/** The value of an option. */
+export type OptionValue = string | number | boolean;
+/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */
+export interface SelectOption {
+    value: OptionValue;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+/** Props of both single and multiple selects. */
+export interface SelectBaseProps extends FieldChromeProps {
+    options: readonly SelectOption[];
+    /** Text shown without a value. Defaults to "Select…". */
+    placeholder?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    onBlur?: () => void;
+    'aria-label'?: string;
+    id?: string;
+    /** Class name of the button that opens the options. */
+    triggerClassName?: string;
+    popoverClassName?: string;
+}
+export interface SingleSelectProps extends SelectBaseProps {
+    multiple?: false;
+    /** The selected value, or `null`. */
+    value?: OptionValue | null;
+    onChange?: (value: OptionValue | null) => void;
+}
+export interface MultipleSelectProps extends SelectBaseProps {
+    /** Several values can be selected. */
+    multiple: true;
+    value?: readonly OptionValue[];
+    onChange?: (value: OptionValue[]) => void;
+}
+export type SelectProps = SingleSelectProps | MultipleSelectProps;
+/**
+ * A dropdown to pick one option, or several with `multiple`. Option values can be strings,
+ * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.
+ */
+export declare function Select(props: SelectProps): import("react").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/select/Select.tsx"],"names":[],"mappings":"AAWA,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAQ7B,8BAA8B;AAC9B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,iGAAiG;AACjG,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iDAAiD;AACjD,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACrD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IACxD,sCAAsC;IACtC,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAgBlE;;;GAGG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAsIxC"}

package/dist/select/Select.js

@@ -0,0 +1,136 @@
+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 Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import { PopoverSurface } from "../popover/Popover.js";
+import ListBox_module_default from "./ListBox.module.js";
+import { Check, ChevronDown } from "lucide-react";
+import { Button, ListBox, ListBoxItem, Select, SelectValue, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/select/Select.tsx
+var EMPTY_KEY = "__panneau_empty__";
+function keyOf(options, value) {
+	const index = options.findIndex((option) => option.value === value);
+	return index === -1 ? null : String(index);
+}
+function valueOf(options, key) {
+	if (key === null || key === EMPTY_KEY) return null;
+	return options[Number(key)]?.value ?? null;
+}
+/**
+* A dropdown to pick one option, or several with `multiple`. Option values can be strings,
+* numbers or booleans. Unless `isRequired`, a single select has an empty choice first.
+*/
+function Select$1(props) {
+	const intl = usePanneauIntl();
+	const { options, label, description, errors = [], placeholder = intl.formatMessage(messages.selectPlaceholder), isRequired = false, isDisabled, name, autoFocus, onBlur, id, className, labelClassName, descriptionClassName, errorsClassName, triggerClassName, popoverClassName } = props;
+	const invalid = errors.length > 0;
+	const items = options.map((option, index) => ({
+		...option,
+		key: String(index)
+	}));
+	const withEmpty = props.multiple !== true && !isRequired;
+	const shared = {
+		id,
+		name,
+		autoFocus,
+		isDisabled,
+		isRequired,
+		isInvalid: invalid,
+		placeholder,
+		"aria-label": props["aria-label"],
+		validationBehavior: "aria",
+		onBlur: onBlur !== void 0 ? () => onBlur() : void 0,
+		disabledKeys: items.filter((item) => item.disabled === true).map((item_0) => item_0.key),
+		className: cx(Field_module_default.field, className)
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(FieldLabel, {
+			isRequired,
+			className: labelClassName,
+			children: label
+		}),
+		/* @__PURE__ */ jsxs(Button, {
+			className: cx(Field_module_default.control, ListBox_module_default.trigger, triggerClassName),
+			children: [/* @__PURE__ */ jsx(SelectValue, { className: ListBox_module_default.value }), /* @__PURE__ */ jsx(Icon, {
+				icon: ChevronDown,
+				className: ListBox_module_default.chevron
+			})]
+		}),
+		/* @__PURE__ */ jsx(FieldDescription, {
+			className: descriptionClassName,
+			children: description
+		}),
+		/* @__PURE__ */ jsx(FieldErrors, {
+			errors,
+			className: errorsClassName
+		}),
+		/* @__PURE__ */ jsx(PopoverSurface, {
+			className: popoverClassName,
+			children: /* @__PURE__ */ jsxs(ListBox, {
+				className: ListBox_module_default.listBox,
+				children: [withEmpty ? /* @__PURE__ */ jsxs(ListBoxItem, {
+					id: EMPTY_KEY,
+					textValue: placeholder,
+					className: ListBox_module_default.item,
+					children: [/* @__PURE__ */ jsx("span", { className: ListBox_module_default.check }), /* @__PURE__ */ jsx("span", {
+						className: ListBox_module_default.placeholder,
+						children: placeholder
+					})]
+				}) : null, items.map((item_1) => /* @__PURE__ */ jsx(ListBoxItem, {
+					id: item_1.key,
+					textValue: item_1.label,
+					className: ListBox_module_default.item,
+					children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: ListBox_module_default.check,
+						children: isSelected ? /* @__PURE__ */ jsx(Icon, {
+							icon: Check,
+							size: "sm"
+						}) : null
+					}), /* @__PURE__ */ jsxs("span", {
+						className: ListBox_module_default.itemText,
+						children: [/* @__PURE__ */ jsx(Text, {
+							slot: "label",
+							className: ListBox_module_default.itemLabel,
+							children: item_1.label
+						}), item_1.description !== void 0 ? /* @__PURE__ */ jsx(Text, {
+							slot: "description",
+							className: ListBox_module_default.itemDescription,
+							children: item_1.description
+						}) : null]
+					})] })
+				}, item_1.key))]
+			})
+		})
+	] });
+	if (props.multiple === true) {
+		const { value, onChange } = props;
+		return /* @__PURE__ */ jsx(Select, {
+			...shared,
+			selectionMode: "multiple",
+			value: value !== void 0 ? value.flatMap((item_2) => {
+				const key = keyOf(options, item_2);
+				return key !== null ? [key] : [];
+			}) : void 0,
+			onChange: (keys) => onChange?.(keys.flatMap((key_0) => {
+				const item_3 = valueOf(options, key_0);
+				return item_3 !== null ? [item_3] : [];
+			})),
+			children: content
+		});
+	}
+	const { value: value_0, onChange: onChange_0 } = props;
+	return /* @__PURE__ */ jsx(Select, {
+		...shared,
+		selectionMode: "single",
+		value: value_0 !== void 0 ? value_0 !== null ? keyOf(options, value_0) : null : void 0,
+		onChange: (key_1) => onChange_0?.(valueOf(options, key_1)),
+		children: content
+	});
+}
+//#endregion
+export { Select$1 as Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx(fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}

package/dist/spinner/Spinner.css

@@ -0,0 +1,40 @@
+.panneau-spinner-iIx6pg {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-circle-A2p14W {
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 1.25em;
+    height: 1.25em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--panneau-radius-full);
+    animation: panneau-spin-qVmYu0 0.7s linear infinite;
+}
+
+.panneau-sm-JoTrRC .panneau-circle-A2p14W {
+    width: 1em;
+    height: 1em;
+}
+
+.panneau-lg-PkO03p .panneau-circle-A2p14W {
+    width: 2em;
+    height: 2em;
+    border-width: 3px;
+}
+
+@keyframes panneau-spin-qVmYu0 {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .panneau-circle-A2p14W {
+        animation-duration: 2s;
+    }
+}

package/dist/spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+export interface SpinnerProps {
+    /** Accessible label, and visible text with `showLabel`. Defaults to "Loading…". */
+    label?: string;
+    /** Shows the label next to the spinner. */
+    showLabel?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/** An indeterminate progress indicator, announced as loading. */
+export declare function Spinner({ label, showLabel, size, className }: SpinnerProps): import("react").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/spinner/Spinner.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,YAAY;IACzB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,SAAiB,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,YAAY,+BAazF"}

package/dist/spinner/Spinner.js

@@ -0,0 +1,25 @@
+import { cx } from "../utils/cx.js";
+import { messages } from "../intl/messages.js";
+import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import Spinner_module_default from "./Spinner.module.js";
+import { ProgressBar } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/spinner/Spinner.tsx
+/** An indeterminate progress indicator, announced as loading. */
+function Spinner({ label, showLabel = false, size = "md", className }) {
+	const intl = usePanneauIntl();
+	const text = label ?? intl.formatMessage(messages.loading);
+	return /* @__PURE__ */ jsxs(ProgressBar, {
+		isIndeterminate: true,
+		"aria-label": text,
+		className: cx(Spinner_module_default.spinner, Spinner_module_default[size], className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: Spinner_module_default.circle,
+			"aria-hidden": "true"
+		}), showLabel ? /* @__PURE__ */ jsx("span", { children: text }) : null]
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["styles"],"sources":["../../src/spinner/Spinner.tsx"],"sourcesContent":["import { ProgressBar } from 'react-aria-components';\n\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps {\n    /** Accessible label, and visible text with `showLabel`. Defaults to \"Loading…\". */\n    label?: string;\n    /** Shows the label next to the spinner. */\n    showLabel?: boolean;\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n}\n\n/** An indeterminate progress indicator, announced as loading. */\nexport function Spinner({ label, showLabel = false, size = 'md', className }: SpinnerProps) {\n    const intl = usePanneauIntl();\n    const text = label ?? intl.formatMessage(messages.loading);\n    return (\n        <ProgressBar\n            isIndeterminate\n            aria-label={text}\n            className={cx(styles.spinner, styles[size], className)}\n        >\n            <span className={styles.circle} aria-hidden=\"true\" />\n            {showLabel ? <span>{text}</span> : null}\n        </ProgressBar>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,QAAQ,EAAE,OAAO,YAAY,OAAO,OAAO,MAAM,aAA2B;CACxF,MAAM,OAAO,eAAe;CAC5B,MAAM,OAAO,SAAS,KAAK,cAAc,SAAS,OAAO;CACzD,OACI,qBAAC,aAAD;EACI,iBAAA;EACA,cAAY;EACZ,WAAW,GAAGA,uBAAO,SAASA,uBAAO,OAAO,SAAS;EAHzD,UAAA,CAKI,oBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAQ,eAAY;EAAM,CAAA,GACjD,YAAY,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI,IAC1B;;AAErB"}

package/dist/spinner/Spinner.module.js

@@ -0,0 +1,18 @@
+import "./Spinner.css";
+//#region src/spinner/Spinner.module.css
+var spinner = "panneau-spinner-iIx6pg";
+var circle = "panneau-circle-A2p14W";
+var spin = "panneau-spin-qVmYu0";
+var sm = "panneau-sm-JoTrRC";
+var lg = "panneau-lg-PkO03p";
+var Spinner_module_default = {
+	spinner,
+	circle,
+	spin,
+	sm,
+	lg
+};
+//#endregion
+export { circle, Spinner_module_default as default, lg, sm, spin, spinner };
+
+//# sourceMappingURL=Spinner.module.js.map

package/dist/spinner/Spinner.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.js","names":[],"sources":["../../src/spinner/Spinner.module.css"],"sourcesContent":[".spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n}\n\n.circle {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 1.25em;\n    height: 1.25em;\n    border: 2px solid currentColor;\n    border-right-color: transparent;\n    border-radius: var(--panneau-radius-full);\n    animation: spin 0.7s linear infinite;\n}\n\n.sm .circle {\n    width: 1em;\n    height: 1em;\n}\n\n.lg .circle {\n    width: 2em;\n    height: 2em;\n    border-width: 3px;\n}\n\n@keyframes spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .circle {\n        animation-duration: 2s;\n    }\n}\n"],"mappings":""}

package/dist/switch/Switch.css

@@ -0,0 +1,69 @@
+.panneau-switch-pwmftu {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: 1.5rem;
+    font-size: var(--panneau-font-size-md);
+    color: var(--panneau-color-text);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.panneau-switch-pwmftu[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.panneau-switch-pwmftu[data-readonly] {
+    cursor: default;
+}
+
+.panneau-track-PtpuqW {
+    position: relative;
+    flex: 0 0 auto;
+    width: 2.25rem;
+    height: 1.25rem;
+    background-color: var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-full);
+    transition: background-color var(--panneau-duration);
+}
+
+.panneau-thumb-pQGDyC {
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--panneau-color-surface);
+    border-radius: var(--panneau-radius-full);
+    box-shadow: var(--panneau-shadow-sm);
+    transition: transform var(--panneau-duration);
+}
+
+.panneau-switch-pwmftu[data-selected] .panneau-track-PtpuqW {
+    background-color: var(--panneau-color-accent);
+}
+
+.panneau-switch-pwmftu[data-selected] .panneau-thumb-pQGDyC {
+    background-color: var(--panneau-color-accent-text);
+    transform: translateX(1rem);
+}
+
+.panneau-switch-pwmftu[data-selected] .panneau-thumb-pQGDyC:dir(rtl) {
+    transform: translateX(-1rem);
+}
+
+.panneau-switch-pwmftu[data-focus-visible] .panneau-track-PtpuqW {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-label-L3fUnh {
+    overflow-wrap: anywhere;
+}
+
+@media (pointer: coarse) {
+    .panneau-switch-pwmftu {
+        min-height: 2.75rem;
+    }
+}

package/dist/switch/Switch.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { type SwitchProps as AriaSwitchProps } from 'react-aria-components';
+import { type ChoiceChromeProps } from '../checkbox/ChoiceChrome';
+export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'>, ChoiceChromeProps {
+    /** Label, next to the switch. */
+    children?: ReactNode;
+    switchClassName?: string;
+}
+/** An on and off switch, for settings that apply at once. */
+export declare function Switch({ children, description, errors, className, switchClassName, descriptionClassName, errorsClassName, ...props }: SwitchProps): import("react").JSX.Element;
+//# sourceMappingURL=Switch.d.ts.map

package/dist/switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIhF,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,iBAAiB;IACpF,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,6DAA6D;AAC7D,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,WAAW,EACX,MAAW,EACX,SAAS,EACT,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,+BAyBb"}

package/dist/switch/Switch.js

@@ -0,0 +1,33 @@
+import { cx } from "../utils/cx.js";
+import { ChoiceChrome } from "../checkbox/ChoiceChrome.js";
+import Switch_module_default from "./Switch.module.js";
+import { Switch } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/switch/Switch.tsx
+/** An on and off switch, for settings that apply at once. */
+function Switch$1({ children, description, errors = [], className, switchClassName, descriptionClassName, errorsClassName, ...props }) {
+	return /* @__PURE__ */ jsx(ChoiceChrome, {
+		description,
+		errors,
+		className,
+		descriptionClassName,
+		errorsClassName,
+		children: (describedBy) => /* @__PURE__ */ jsxs(Switch, {
+			...props,
+			"aria-describedby": describedBy,
+			className: cx(Switch_module_default.switch, switchClassName),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: Switch_module_default.track,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", { className: Switch_module_default.thumb })
+			}), children !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: Switch_module_default.label,
+				children
+			}) : null]
+		})
+	});
+}
+//#endregion
+export { Switch$1 as Switch };
+
+//# sourceMappingURL=Switch.js.map

package/dist/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["Switch","AriaSwitch","styles"],"sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\nimport { ChoiceChrome, type ChoiceChromeProps } from '../checkbox/ChoiceChrome';\nimport { cx } from '../utils/cx';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps\n    extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'>, ChoiceChromeProps {\n    /** Label, next to the switch. */\n    children?: ReactNode;\n    switchClassName?: string;\n}\n\n/** An on and off switch, for settings that apply at once. */\nexport function Switch({\n    children,\n    description,\n    errors = [],\n    className,\n    switchClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: SwitchProps) {\n    return (\n        <ChoiceChrome\n            description={description}\n            errors={errors}\n            className={className}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {(describedBy) => (\n                <AriaSwitch\n                    {...props}\n                    aria-describedby={describedBy}\n                    className={cx(styles.switch, switchClassName)}\n                >\n                    <span className={styles.track} aria-hidden=\"true\">\n                        <span className={styles.thumb} />\n                    </span>\n                    {children !== undefined ? (\n                        <span className={styles.label}>{children}</span>\n                    ) : null}\n                </AriaSwitch>\n            )}\n        </ChoiceChrome>\n    );\n}\n"],"mappings":";;;;;;;AAeA,SAAgBA,SAAO,EACnB,UACA,aACA,SAAS,CAAA,GACT,WACA,iBACA,sBACA,iBACA,GAAG,SACS;CACZ,OACI,oBAAC,cAAD;EACiB;EACL;EACG;EACW;EACL;EAEf,WAAA,gBACE,qBAACC,QAAD;GACI,GAAI;GACJ,oBAAkB;GAClB,WAAW,GAAGC,sBAAO,QAAQ,eAAe;GAHhD,UAAA,CAKI,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAO,eAAY;IACvC,UAAA,oBAAC,QAAD,EAAM,WAAWA,sBAAO,MAAM,CAAA;GAC5B,CAAA,GACL,aAAa,KAAA,IACV,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAQ;GAAe,CAAA,IAC/C,IACI;;CAEN,CAAA;AAEtB"}

package/dist/switch/Switch.module.js

@@ -0,0 +1,15 @@
+import "./Switch.css";
+//#region src/switch/Switch.module.css
+var track = "panneau-track-PtpuqW";
+var thumb = "panneau-thumb-pQGDyC";
+var label = "panneau-label-L3fUnh";
+var Switch_module_default = {
+	"switch": "panneau-switch-pwmftu",
+	track,
+	thumb,
+	label
+};
+//#endregion
+export { Switch_module_default as default, label, thumb, track };
+
+//# sourceMappingURL=Switch.module.js.map

package/dist/switch/Switch.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.js","names":[],"sources":["../../src/switch/Switch.module.css"],"sourcesContent":[".switch {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.switch[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.switch[data-readonly] {\n    cursor: default;\n}\n\n.track {\n    position: relative;\n    flex: 0 0 auto;\n    width: 2.25rem;\n    height: 1.25rem;\n    background-color: var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-full);\n    transition: background-color var(--panneau-duration);\n}\n\n.thumb {\n    position: absolute;\n    top: 0.125rem;\n    left: 0.125rem;\n    width: 1rem;\n    height: 1rem;\n    background-color: var(--panneau-color-surface);\n    border-radius: var(--panneau-radius-full);\n    box-shadow: var(--panneau-shadow-sm);\n    transition: transform var(--panneau-duration);\n}\n\n.switch[data-selected] .track {\n    background-color: var(--panneau-color-accent);\n}\n\n.switch[data-selected] .thumb {\n    background-color: var(--panneau-color-accent-text);\n    transform: translateX(1rem);\n}\n\n.switch[data-selected] .thumb:dir(rtl) {\n    transform: translateX(-1rem);\n}\n\n.switch[data-focus-visible] .track {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.label {\n    overflow-wrap: anywhere;\n}\n\n@media (pointer: coarse) {\n    .switch {\n        min-height: 2.75rem;\n    }\n}\n"],"mappings":""}