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

package/dist/number-input/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","names":["fieldStyles","styles"],"sources":["../../src/number-input/NumberInput.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    type NumberFieldProps as AriaNumberFieldProps,\n    Button,\n    Group,\n    Input,\n    NumberField,\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 { cx } from '../utils/cx';\nimport styles from './NumberInput.module.css';\n\nexport interface NumberInputProps\n    extends\n        Omit<\n            AriaNumberFieldProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The number, or `null` when empty. */\n    value?: number | null;\n    defaultValue?: number | null;\n    /** Called with the number, or `null` when the input is cleared. */\n    onChange?: (value: number | null) => void;\n    placeholder?: string;\n    /** Content after the number, inside the control: a unit. */\n    suffix?: ReactNode;\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\nfunction toAria(value: number | null | undefined): number | undefined {\n    return value === null ? Number.NaN : value;\n}\n\n/**\n * A number input, formatted for the locale, with steppers and arrow keys. An empty input is\n * `null`, not `NaN`.\n */\nexport function NumberInput({\n    label,\n    description,\n    errors = [],\n    value,\n    defaultValue,\n    onChange,\n    placeholder,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: NumberInputProps) {\n    const invalid = errors.length > 0;\n    return (\n        <NumberField\n            {...props}\n            value={toAria(value)}\n            defaultValue={toAria(defaultValue)}\n            onChange={(next) => onChange?.(Number.isNaN(next) ? null : next)}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx(fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Group\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-invalid={invalid || undefined}\n                data-readonly={isReadOnly || undefined}\n            >\n                <Input\n                    placeholder={placeholder}\n                    className={cx(fieldStyles.bare, styles.input, inputClassName)}\n                />\n                {suffix !== undefined ? (\n                    <span className={fieldStyles.adornment}>{suffix}</span>\n                ) : null}\n                {isReadOnly !== true ? (\n                    <span className={styles.steppers}>\n                        <Button slot=\"increment\" className={styles.stepper}>\n                            <Icon icon={ChevronUp} size=\"xs\" />\n                        </Button>\n                        <Button slot=\"decrement\" className={styles.stepper}>\n                            <Icon icon={ChevronDown} size=\"xs\" />\n                        </Button>\n                    </span>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </NumberField>\n    );\n}\n"],"mappings":";;;;;;;;;AA+CA,SAAS,OAAO,OAAsD;CAClE,OAAO,UAAU,OAAO,MAAa;AACzC;;;;;AAMA,SAAgB,YAAY,EACxB,OACA,aACA,SAAS,CAAA,GACT,OACA,cACA,UACA,aACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACc;CACjB,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAAC,aAAD;EACI,GAAI;EACJ,OAAO,OAAO,KAAK;EACnB,cAAc,OAAO,YAAY;EACjC,WAAW,SAAS,WAAW,OAAO,MAAM,IAAI,IAAI,OAAO,IAAI;EACnD;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGA,qBAAY,OAAO,SAAS;EAT9C,UAAA;GAWI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,2BAAO,SAAS,gBAAgB;IACnE,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAHjC,UAAA;KAKI,oBAAC,OAAD;MACiB;MACb,WAAW,GAAGD,qBAAY,MAAMC,2BAAO,OAAO,cAAc;KAAE,CAAA;KAEjE,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWD,qBAAY;MAAY,UAAA;KAAa,CAAA,IACtD;KACH,eAAe,OACZ,qBAAC,QAAD;MAAM,WAAWC,2BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAW,MAAK;OAAI,CAAA;MAC5B,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAa,MAAK;OAAI,CAAA;MAC9B,CAAA,CACN;KACN,CAAA,IAAA;IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC/C;;AAErB"}

package/dist/number-input/NumberInput.module.js

@@ -0,0 +1,16 @@
+import "./NumberInput.css";
+//#region src/number-input/NumberInput.module.css
+var control = "panneau-control-4aptNi";
+var input = "panneau-input-qqs-MV";
+var steppers = "panneau-steppers-JoTs6w";
+var stepper = "panneau-stepper-sAGR2f";
+var NumberInput_module_default = {
+	control,
+	input,
+	steppers,
+	stepper
+};
+//#endregion
+export { control, NumberInput_module_default as default, input, stepper, steppers };
+
+//# sourceMappingURL=NumberInput.module.js.map

package/dist/number-input/NumberInput.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.module.js","names":[],"sources":["../../src/number-input/NumberInput.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n    overflow: hidden;\n}\n\n.input {\n    font-variant-numeric: tabular-nums;\n}\n\n.steppers {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper {\n    display: flex;\n    flex: 1 1 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n}\n\n.stepper + .stepper {\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.stepper[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.stepper[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n/* Touch screens have their own keyboard for numbers: the steppers would be too small. */\n@media (pointer: coarse) {\n    .steppers {\n        display: none;\n    }\n\n    .control.control {\n        padding-inline-end: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}

package/dist/popover/Popover.css

@@ -0,0 +1,32 @@
+.panneau-popover-KacUIM {
+    min-width: var(--trigger-width, 10rem);
+    max-width: calc(100vw - 2 * 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-radius: var(--panneau-radius-lg);
+    box-shadow: var(--panneau-shadow-lg);
+    outline: none;
+    overflow: auto;
+    z-index: var(--panneau-z-overlay);
+}
+
+.panneau-popover-KacUIM[data-entering] {
+    animation: panneau-pop-fB47s- var(--panneau-duration) ease-out;
+}
+
+.panneau-popover-KacUIM[data-exiting] {
+    animation: panneau-pop-fB47s- var(--panneau-duration) ease-in reverse;
+}
+
+.panneau-dialog-2cVt0D {
+    padding: var(--panneau-space-3);
+    outline: none;
+}
+
+@keyframes panneau-pop-fB47s- {
+    from {
+        opacity: 0;
+        transform: scale(0.97);
+    }
+}

package/dist/popover/Popover.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { type PopoverProps as AriaPopoverProps } from 'react-aria-components';
+export interface PopoverProps extends Omit<AriaPopoverProps, 'className' | 'style' | 'children' | 'UNSTABLE_portalContainer'> {
+    children?: ReactNode;
+    /** Accessible label of the popover's dialog, when it has no heading. */
+    'aria-label'?: string;
+    className?: string;
+    dialogClassName?: string;
+}
+/**
+ * A popover with free content, inside a `PopoverTrigger` with its button as the first child. Its
+ * content is a non-modal dialog: focus moves into it and comes back to the button when it closes.
+ */
+export declare function Popover({ children, 'aria-label': ariaLabel, className, dialogClassName, offset, ...props }: PopoverProps): import("react").JSX.Element | null;
+/** The popover surface without a dialog, for listboxes and menus. */
+export declare function PopoverSurface({ children, className, offset, ...props }: Omit<PopoverProps, 'aria-label' | 'dialogClassName'>): import("react").JSX.Element | null;
+export { DialogTrigger as PopoverTrigger } from 'react-aria-components';
+//# sourceMappingURL=Popover.d.ts.map

package/dist/popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEH,KAAK,YAAY,IAAI,gBAAgB,EAExC,MAAM,uBAAuB,CAAC;AAM/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,gBAAgB,EAChB,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,0BAA0B,CAClE;IACG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACpB,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,eAAe,EACf,MAAU,EACV,GAAG,KAAK,EACX,EAAE,YAAY,sCAiBd;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,MAAU,EACV,GAAG,KAAK,EACX,EAAE,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,iBAAiB,CAAC,sCAetD;AAED,OAAO,EAAE,aAAa,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/popover/Popover.js

@@ -0,0 +1,41 @@
+import { cx } from "../utils/cx.js";
+import { usePortalContainer } from "../root/PanneauRoot.js";
+import Popover_module_default from "./Popover.module.js";
+import { Dialog, DialogTrigger as PopoverTrigger, Popover } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/popover/Popover.tsx
+/**
+* A popover with free content, inside a `PopoverTrigger` with its button as the first child. Its
+* content is a non-modal dialog: focus moves into it and comes back to the button when it closes.
+*/
+function Popover$1({ children, "aria-label": ariaLabel, className, dialogClassName, offset = 6, ...props }) {
+	const container = usePortalContainer();
+	if (container === null) return null;
+	return /* @__PURE__ */ jsx(Popover, {
+		...props,
+		offset,
+		className: cx(Popover_module_default.popover, className),
+		UNSTABLE_portalContainer: container,
+		children: /* @__PURE__ */ jsx(Dialog, {
+			"aria-label": ariaLabel,
+			className: cx(Popover_module_default.dialog, dialogClassName),
+			children
+		})
+	});
+}
+/** The popover surface without a dialog, for listboxes and menus. */
+function PopoverSurface({ children, className, offset = 6, ...props }) {
+	const container = usePortalContainer();
+	if (container === null) return null;
+	return /* @__PURE__ */ jsx(Popover, {
+		...props,
+		offset,
+		className: cx(Popover_module_default.popover, className),
+		UNSTABLE_portalContainer: container,
+		children
+	});
+}
+//#endregion
+export { Popover$1 as Popover, PopoverSurface, PopoverTrigger };
+
+//# sourceMappingURL=Popover.js.map

package/dist/popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["Popover","AriaPopover","styles"],"sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Popover as AriaPopover,\n    type PopoverProps as AriaPopoverProps,\n    Dialog,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<\n    AriaPopoverProps,\n    'className' | 'style' | 'children' | 'UNSTABLE_portalContainer'\n> {\n    children?: ReactNode;\n    /** Accessible label of the popover's dialog, when it has no heading. */\n    'aria-label'?: string;\n    className?: string;\n    dialogClassName?: string;\n}\n\n/**\n * A popover with free content, inside a `PopoverTrigger` with its button as the first child. Its\n * content is a non-modal dialog: focus moves into it and comes back to the button when it closes.\n */\nexport function Popover({\n    children,\n    'aria-label': ariaLabel,\n    className,\n    dialogClassName,\n    offset = 6,\n    ...props\n}: PopoverProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx(styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Dialog aria-label={ariaLabel} className={cx(styles.dialog, dialogClassName)}>\n                {children}\n            </Dialog>\n        </AriaPopover>\n    );\n}\n\n/** The popover surface without a dialog, for listboxes and menus. */\nexport function PopoverSurface({\n    children,\n    className,\n    offset = 6,\n    ...props\n}: Omit<PopoverProps, 'aria-label' | 'dialogClassName'>) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx(styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            {children}\n        </AriaPopover>\n    );\n}\n\nexport { DialogTrigger as PopoverTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;AA0BA,SAAgBA,UAAQ,EACpB,UACA,cAAc,WACd,WACA,iBACA,SAAS,GACT,GAAG,SACU;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACC,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;EACvC,0BAA0B;EAE1B,UAAA,oBAAC,QAAD;GAAQ,cAAY;GAAW,WAAW,GAAGA,uBAAO,QAAQ,eAAe;GACtE;EACG,CAAA;CACC,CAAA;AAErB;;AAGA,SAAgB,eAAe,EAC3B,UACA,WACA,SAAS,GACT,GAAG,SACkD;CACrD,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACD,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;EACvC,0BAA0B;EAEzB;CACQ,CAAA;AAErB"}

package/dist/popover/Popover.module.js

@@ -0,0 +1,14 @@
+import "./Popover.css";
+//#region src/popover/Popover.module.css
+var popover = "panneau-popover-KacUIM";
+var pop = "panneau-pop-fB47s-";
+var dialog = "panneau-dialog-2cVt0D";
+var Popover_module_default = {
+	popover,
+	pop,
+	dialog
+};
+//#endregion
+export { Popover_module_default as default, dialog, pop, popover };
+
+//# sourceMappingURL=Popover.module.js.map

package/dist/popover/Popover.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.module.js","names":[],"sources":["../../src/popover/Popover.module.css"],"sourcesContent":[".popover {\n    min-width: var(--trigger-width, 10rem);\n    max-width: calc(100vw - 2 * 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-radius: var(--panneau-radius-lg);\n    box-shadow: var(--panneau-shadow-lg);\n    outline: none;\n    overflow: auto;\n    z-index: var(--panneau-z-overlay);\n}\n\n.popover[data-entering] {\n    animation: pop var(--panneau-duration) ease-out;\n}\n\n.popover[data-exiting] {\n    animation: pop var(--panneau-duration) ease-in reverse;\n}\n\n.dialog {\n    padding: var(--panneau-space-3);\n    outline: none;\n}\n\n@keyframes pop {\n    from {\n        opacity: 0;\n        transform: scale(0.97);\n    }\n}\n"],"mappings":""}

package/dist/radio-group/RadioGroup.css

@@ -0,0 +1,83 @@
+.panneau-options-QPuFOV {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-horizontal-KgXsCy .panneau-options-QPuFOV {
+    flex-flow: row wrap;
+    gap: var(--panneau-space-1) var(--panneau-space-4);
+}
+
+.panneau-radio-zz4Tx- {
+    display: inline-flex;
+    align-items: flex-start;
+    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-radio-zz4Tx-[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.panneau-radio-zz4Tx-[data-readonly] {
+    cursor: default;
+}
+
+.panneau-circle-IySLxv {
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-top: 0.125rem;
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-full);
+    transition:
+        border-color var(--panneau-duration),
+        border-width var(--panneau-duration);
+}
+
+.panneau-radio-zz4Tx-[data-hovered] .panneau-circle-IySLxv {
+    border-color: var(--panneau-color-text-muted);
+}
+
+.panneau-radio-zz4Tx-[data-selected] .panneau-circle-IySLxv {
+    border-color: var(--panneau-color-accent);
+    border-width: 0.3125rem;
+}
+
+.panneau-radio-zz4Tx-[data-invalid] .panneau-circle-IySLxv {
+    border-color: var(--panneau-color-danger);
+}
+
+.panneau-radio-zz4Tx-[data-focus-visible] .panneau-circle-IySLxv {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-text-W98R9k {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panneau-description-SPgnUk {
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+@media (pointer: coarse) {
+    .panneau-radio-zz4Tx- {
+        min-height: 2.75rem;
+        align-items: center;
+    }
+
+    .panneau-circle-IySLxv {
+        margin-top: 0;
+    }
+}

package/dist/radio-group/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import { type RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+import type { OptionValue, SelectOption } from '../select/Select';
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'value' | 'defaultValue' | 'onChange'>, FieldChromeProps {
+    options: readonly SelectOption[];
+    value?: OptionValue | null;
+    onChange?: (value: OptionValue) => void;
+    radioClassName?: string;
+}
+/** A set of options where one can be picked, all visible at once. */
+export declare function RadioGroup({ options, value, onChange, label, description, errors, orientation, isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }: RadioGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/radio-group/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,eAAe,IAAI,mBAAmB,EAE9C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIlE,MAAM,WAAW,eACb,SACI,IAAI,CACA,mBAAmB,EACjB,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,CACf,EACD,gBAAgB;IACpB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAwB,EACxB,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BA+CjB"}

package/dist/radio-group/RadioGroup.js

@@ -0,0 +1,61 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import RadioGroup_module_default from "./RadioGroup.module.js";
+import { Radio, RadioGroup } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/radio-group/RadioGroup.tsx
+/** A set of options where one can be picked, all visible at once. */
+function RadioGroup$1({ options, value, onChange, label, description, errors = [], orientation = "vertical", isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }) {
+	const index = value === void 0 ? void 0 : options.findIndex((o) => o.value === value);
+	return /* @__PURE__ */ jsxs(RadioGroup, {
+		...props,
+		orientation,
+		isRequired,
+		value: index === void 0 ? void 0 : index === -1 ? null : String(index),
+		onChange: (key) => {
+			const option = options[Number(key)];
+			if (option !== void 0) onChange?.(option.value);
+		},
+		isInvalid: errors.length > 0,
+		validationBehavior: "aria",
+		className: cx(Field_module_default.field, orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				isRequired,
+				className: labelClassName,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: RadioGroup_module_default.options,
+				children: options.map((option_0, position) => /* @__PURE__ */ jsxs(Radio, {
+					value: String(position),
+					isDisabled: option_0.disabled,
+					className: cx(RadioGroup_module_default.radio, radioClassName),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: RadioGroup_module_default.circle,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: RadioGroup_module_default.text,
+						children: [/* @__PURE__ */ jsx("span", { children: option_0.label }), option_0.description !== void 0 ? /* @__PURE__ */ jsx("span", {
+							className: RadioGroup_module_default.description,
+							children: option_0.description
+						}) : null]
+					})]
+				}, position))
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				className: descriptionClassName,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, {
+				errors,
+				className: errorsClassName
+			})
+		]
+	});
+}
+//#endregion
+export { RadioGroup$1 as RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

package/dist/radio-group/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":["option","RadioGroup","AriaRadioGroup","fieldStyles","styles"],"sources":["../../src/radio-group/RadioGroup.tsx"],"sourcesContent":["import {\n    RadioGroup as AriaRadioGroup,\n    type RadioGroupProps as AriaRadioGroupProps,\n    Radio,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport type { OptionValue, SelectOption } from '../select/Select';\nimport { cx } from '../utils/cx';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps\n    extends\n        Omit<\n            AriaRadioGroupProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    options: readonly SelectOption[];\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue) => void;\n    radioClassName?: string;\n}\n\n/** A set of options where one can be picked, all visible at once. */\nexport function RadioGroup({\n    options,\n    value,\n    onChange,\n    label,\n    description,\n    errors = [],\n    orientation = 'vertical',\n    isRequired,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    radioClassName,\n    ...props\n}: RadioGroupProps) {\n    const index = value === undefined ? undefined : options.findIndex((o) => o.value === value);\n    return (\n        <AriaRadioGroup\n            {...props}\n            orientation={orientation}\n            isRequired={isRequired}\n            value={index === undefined ? undefined : index === -1 ? null : String(index)}\n            onChange={(key) => {\n                const option = options[Number(key)];\n                if (option !== undefined) {\n                    onChange?.(option.value);\n                }\n            }}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(\n                fieldStyles.field,\n                orientation === 'horizontal' && styles.horizontal,\n                className,\n            )}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <div className={styles.options}>\n                {options.map((option, position) => (\n                    <Radio\n                        key={position}\n                        value={String(position)}\n                        isDisabled={option.disabled}\n                        className={cx(styles.radio, radioClassName)}\n                    >\n                        <span className={styles.circle} aria-hidden=\"true\" />\n                        <span className={styles.text}>\n                            <span>{option.label}</span>\n                            {option.description !== undefined ? (\n                                <span className={styles.description}>{option.description}</span>\n                            ) : null}\n                        </span>\n                    </Radio>\n                ))}\n            </div>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </AriaRadioGroup>\n    );\n}\n"],"mappings":";;;;;;;;AAsCA,SAAgBC,aAAW,EACvB,SACA,OACA,UACA,OACA,aACA,SAAS,CAAA,GACT,cAAc,YACd,YACA,WACA,gBACA,sBACA,iBACA,gBACA,GAAG,SACa;CAChB,MAAM,QAAQ,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,WAAW,MAAM,EAAE,UAAU,KAAK;CAC1F,OACI,qBAACC,YAAD;EACI,GAAI;EACS;EACD;EACZ,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,UAAU,KAAK,OAAO,OAAO,KAAK;EAC3E,WAAW,QAAQ;GACf,MAAM,SAAS,QAAQ,OAAO,GAAG;GACjC,IAAI,WAAW,KAAA,GACX,WAAW,OAAO,KAAK;EAE/B;EACA,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GACPC,qBAAY,OACZ,gBAAgB,gBAAgBC,0BAAO,YACvC,SACJ;EAjBJ,UAAA;GAmBI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAClB,UAAA,QAAQ,KAAKJ,UAAQ,aAClB,qBAAC,OAAD;KAEI,OAAO,OAAO,QAAQ;KACtB,YAAYA,SAAO;KACnB,WAAW,GAAGI,0BAAO,OAAO,cAAc;KAJ9C,UAAA,CAMI,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAQ,eAAY;KAAM,CAAA,GAClD,qBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD,EAAA,UAAOJ,SAAO,MAAY,CAAA,GACzBA,SAAO,gBAAgB,KAAA,IACpB,oBAAC,QAAD;OAAM,WAAWI,0BAAO;OAAcJ,UAAAA,SAAO;MAAkB,CAAA,IAC/D,IACF;KACH,CAAA,CAAA;IAZE,GAAA,QAYF,CACV;GACA,CAAA;GACL,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC5C;;AAExB"}

package/dist/radio-group/RadioGroup.module.js

@@ -0,0 +1,20 @@
+import "./RadioGroup.css";
+//#region src/radio-group/RadioGroup.module.css
+var options = "panneau-options-QPuFOV";
+var horizontal = "panneau-horizontal-KgXsCy";
+var radio = "panneau-radio-zz4Tx-";
+var circle = "panneau-circle-IySLxv";
+var text = "panneau-text-W98R9k";
+var description = "panneau-description-SPgnUk";
+var RadioGroup_module_default = {
+	options,
+	horizontal,
+	radio,
+	circle,
+	text,
+	description
+};
+//#endregion
+export { circle, RadioGroup_module_default as default, description, horizontal, options, radio, text };
+
+//# sourceMappingURL=RadioGroup.module.js.map

package/dist/radio-group/RadioGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\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.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: 1.125rem;\n    height: 1.125rem;\n    margin-top: 0.125rem;\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-color-accent);\n    border-width: 0.3125rem;\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}

package/dist/root/PanneauRoot.css

@@ -0,0 +1,251 @@
+/*
+ * Design tokens of the default theme, and the base stylesheet of Panneau. Everything is scoped to
+ * the root element: nothing here applies outside of it (decision 0005).
+ *
+ * Defaults are wrapped in :where() so that they have no specificity: a theme, or a project's own
+ * class on the root, overrides any token without fighting the cascade.
+ */
+
+:where(.panneau-root--wA35w) {
+    /* Surfaces */
+    --panneau-color-bg: #ffffff;
+    --panneau-color-surface: #ffffff;
+    --panneau-color-surface-sunken: #f4f4f5;
+    --panneau-color-surface-raised: #ffffff;
+    --panneau-color-hover: rgb(24 24 27 / 0.06);
+    --panneau-color-pressed: rgb(24 24 27 / 0.1);
+    --panneau-color-backdrop: rgb(9 9 11 / 0.45);
+
+    /* Text */
+    --panneau-color-text: #18181b;
+    --panneau-color-text-muted: #52525b;
+    --panneau-color-link: #1d4ed8;
+
+    /* Borders: separators, and the outline of controls (3:1 against the surface) */
+    --panneau-color-border: #e4e4e7;
+    --panneau-color-border-control: #8b8b94;
+
+    /* Accent: primary buttons, checked controls, selection */
+    --panneau-color-accent: #18181b;
+    --panneau-color-accent-hover: #3f3f46;
+    --panneau-color-accent-text: #ffffff;
+    --panneau-color-accent-subtle: #f4f4f5;
+    --panneau-color-focus: #2563eb;
+
+    /* Tones: text on surfaces, subtle backgrounds, borders */
+    --panneau-color-danger: #b91c1c;
+    --panneau-color-danger-subtle: #fef2f2;
+    --panneau-color-danger-border: #fca5a5;
+    --panneau-color-danger-solid: #b91c1c;
+    --panneau-color-danger-solid-hover: #991b1b;
+    --panneau-color-danger-solid-text: #ffffff;
+    --panneau-color-success: #15803d;
+    --panneau-color-success-subtle: #f0fdf4;
+    --panneau-color-success-border: #86efac;
+    --panneau-color-warning: #a16207;
+    --panneau-color-warning-subtle: #fefce8;
+    --panneau-color-warning-border: #fcd34d;
+    --panneau-color-info: #1d4ed8;
+    --panneau-color-info-subtle: #eff6ff;
+    --panneau-color-info-border: #93c5fd;
+
+    /* Typography */
+    --panneau-font-family:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --panneau-font-size-xs: 0.75rem;
+    --panneau-font-size-sm: 0.8125rem;
+    --panneau-font-size-md: 0.875rem;
+    --panneau-font-size-lg: 1rem;
+    --panneau-font-size-xl: 1.25rem;
+    --panneau-font-size-control: 0.875rem;
+    --panneau-line-height: 1.5;
+    --panneau-line-height-tight: 1.25;
+    --panneau-font-weight-normal: 400;
+    --panneau-font-weight-medium: 500;
+    --panneau-font-weight-bold: 600;
+
+    /* Spacing, on a 4px scale */
+    --panneau-space-1: 0.25rem;
+    --panneau-space-2: 0.5rem;
+    --panneau-space-3: 0.75rem;
+    --panneau-space-4: 1rem;
+    --panneau-space-5: 1.25rem;
+    --panneau-space-6: 1.5rem;
+    --panneau-space-8: 2rem;
+    --panneau-space-10: 2.5rem;
+
+    /* Shapes */
+    --panneau-radius-sm: 0.25rem;
+    --panneau-radius-md: 0.375rem;
+    --panneau-radius-lg: 0.5rem;
+    --panneau-radius-full: 9999px;
+    --panneau-border-width: 1px;
+    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);
+    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);
+
+    /* Controls */
+    --panneau-control-height: 2.25rem;
+    --panneau-control-height-sm: 1.875rem;
+    --panneau-focus-width: 2px;
+
+    /* Motion and layers */
+    --panneau-duration: 150ms;
+    --panneau-z-overlay: 1000;
+    --panneau-z-toast: 1100;
+
+    color-scheme: light;
+}
+
+:where(.panneau-root--wA35w[data-color-scheme='dark']) {
+    --panneau-color-bg: #09090b;
+    --panneau-color-surface: #18181b;
+    --panneau-color-surface-sunken: #111113;
+    --panneau-color-surface-raised: #232326;
+    --panneau-color-hover: rgb(255 255 255 / 0.07);
+    --panneau-color-pressed: rgb(255 255 255 / 0.12);
+    --panneau-color-backdrop: rgb(0 0 0 / 0.6);
+    --panneau-color-text: #fafafa;
+    --panneau-color-text-muted: #a1a1aa;
+    --panneau-color-link: #93c5fd;
+    --panneau-color-border: #2e2e33;
+    --panneau-color-border-control: #71717a;
+    --panneau-color-accent: #fafafa;
+    --panneau-color-accent-hover: #d4d4d8;
+    --panneau-color-accent-text: #18181b;
+    --panneau-color-accent-subtle: #2e2e33;
+    --panneau-color-focus: #60a5fa;
+    --panneau-color-danger: #fca5a5;
+    --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);
+    --panneau-color-danger-border: #b91c1c;
+    --panneau-color-danger-solid: #dc2626;
+    --panneau-color-danger-solid-hover: #b91c1c;
+    --panneau-color-danger-solid-text: #ffffff;
+    --panneau-color-success: #86efac;
+    --panneau-color-success-subtle: rgb(20 83 45 / 0.35);
+    --panneau-color-success-border: #15803d;
+    --panneau-color-warning: #fcd34d;
+    --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);
+    --panneau-color-warning-border: #a16207;
+    --panneau-color-info: #93c5fd;
+    --panneau-color-info-subtle: rgb(30 58 138 / 0.35);
+    --panneau-color-info-border: #1d4ed8;
+    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);
+
+    color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+    :where(.panneau-root--wA35w[data-color-scheme='auto']) {
+        --panneau-color-bg: #09090b;
+        --panneau-color-surface: #18181b;
+        --panneau-color-surface-sunken: #111113;
+        --panneau-color-surface-raised: #232326;
+        --panneau-color-hover: rgb(255 255 255 / 0.07);
+        --panneau-color-pressed: rgb(255 255 255 / 0.12);
+        --panneau-color-backdrop: rgb(0 0 0 / 0.6);
+        --panneau-color-text: #fafafa;
+        --panneau-color-text-muted: #a1a1aa;
+        --panneau-color-link: #93c5fd;
+        --panneau-color-border: #2e2e33;
+        --panneau-color-border-control: #71717a;
+        --panneau-color-accent: #fafafa;
+        --panneau-color-accent-hover: #d4d4d8;
+        --panneau-color-accent-text: #18181b;
+        --panneau-color-accent-subtle: #2e2e33;
+        --panneau-color-focus: #60a5fa;
+        --panneau-color-danger: #fca5a5;
+        --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);
+        --panneau-color-danger-border: #b91c1c;
+        --panneau-color-danger-solid: #dc2626;
+        --panneau-color-danger-solid-hover: #b91c1c;
+        --panneau-color-danger-solid-text: #ffffff;
+        --panneau-color-success: #86efac;
+        --panneau-color-success-subtle: rgb(20 83 45 / 0.35);
+        --panneau-color-success-border: #15803d;
+        --panneau-color-warning: #fcd34d;
+        --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);
+        --panneau-color-warning-border: #a16207;
+        --panneau-color-info: #93c5fd;
+        --panneau-color-info-subtle: rgb(30 58 138 / 0.35);
+        --panneau-color-info-border: #1d4ed8;
+        --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+        --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+        --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);
+
+        color-scheme: dark;
+    }
+}
+
+/* Touch screens: larger targets, and 16px text in inputs so that iOS doesn't zoom on focus. */
+@media (pointer: coarse) {
+    :where(.panneau-root--wA35w) {
+        --panneau-control-height: 2.75rem;
+        --panneau-control-height-sm: 2.25rem;
+        --panneau-font-size-control: 1rem;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :where(.panneau-root--wA35w) {
+        --panneau-duration: 0ms;
+    }
+}
+
+/* Base stylesheet, scoped to the root, without specificity: components and projects override it. */
+
+.panneau-root--wA35w {
+    /* The class is mostly a hook for the rules below, which use :where(). */
+    display: block;
+}
+
+:where(.panneau-root--wA35w) {
+    font-family: var(--panneau-font-family);
+    font-size: var(--panneau-font-size-md);
+    line-height: var(--panneau-line-height);
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-bg);
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
+:where(.panneau-root--wA35w) :where(*, *::before, *::after) {
+    box-sizing: border-box;
+}
+
+:where(.panneau-root--wA35w) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, fieldset, legend) {
+    margin: 0;
+    padding: 0;
+}
+
+:where(.panneau-root--wA35w) :where(fieldset) {
+    border: 0;
+    min-width: 0;
+}
+
+:where(.panneau-root--wA35w) :where(button, input, select, textarea) {
+    font: inherit;
+    color: inherit;
+}
+
+:where(.panneau-root--wA35w) :where(a) {
+    color: var(--panneau-color-link);
+}
+
+:where(.panneau-root--wA35w) :where(img, svg, video) {
+    max-width: 100%;
+}
+
+:where(.panneau-root--wA35w) :where(:focus-visible) {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+/* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */
+.panneau-portal-keLcJN {
+    display: contents;
+}

package/dist/root/PanneauRoot.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ColorScheme, type Theme } from '../theme/theme';
+export interface PanneauRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tokens that override the default theme: `bootstrapTheme`, or a project's own. */
+    theme?: Theme | null;
+    /** Defaults to `light`. `auto` follows the system setting. */
+    colorScheme?: ColorScheme;
+    /**
+     * Locale of dates and numbers in React Aria components. Defaults to the react-intl locale, or
+     * to the browser's without an `IntlProvider`.
+     *
+     * Without an `IntlProvider` above it, the root provides one, with the messages of every Panneau
+     * package in this locale (English without a locale, or for a locale Panneau doesn't translate).
+     * An app with its own `IntlProvider` adds them with `withPanneauMessages()` from
+     * `@panneau/intl`.
+     */
+    locale?: string;
+    children?: ReactNode;
+}
+/**
+ * The element overlays render into: the closest `PanneauRoot`'s, or `undefined` for the body
+ * without a root. It is `null` during the first render of a root: overlays wait for it, since
+ * React Aria hides everything outside of a modal from assistive technologies when it opens.
+ */
+export declare function usePortalContainer(): Element | null | undefined;
+/**
+ * The root of every Panneau interface. It scopes the base stylesheet and the design tokens to its
+ * element (no global CSS), applies a theme and a color scheme, and hosts overlays and toasts so
+ * that they get the tokens too. Panneau components must render inside one. A project can override
+ * any token with its own class on the root. Without an `IntlProvider` above it, it provides one
+ * with Panneau's messages in its `locale`.
+ */
+export declare function PanneauRoot({ theme, colorScheme, locale, className, children, ...props }: PanneauRootProps): import("react").JSX.Element;
+//# sourceMappingURL=PanneauRoot.d.ts.map

package/dist/root/PanneauRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanneauRoot.d.ts","sourceRoot":"","sources":["../../src/root/PanneauRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAM1F,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,KAAK,EAA2B,MAAM,gBAAgB,CAAC;AAKvF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,oFAAoF;IACpF,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAKD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,GAAG,IAAI,GAAG,SAAS,CAE/D;AA2BD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAY,EACZ,WAAqB,EACrB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,gBAAgB,+BAqClB"}