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

package/dist/date-picker/DatePicker.css

@@ -0,0 +1,135 @@
+.panneau-control-DKgKDX.panneau-control-DKgKDX {
+    padding-inline-end: 0;
+}
+
+.panneau-input-wYghuH {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+    overflow-x: auto;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+.panneau-segment-hRUT-e {
+    padding: 0 0.0625rem;
+    border-radius: var(--panneau-radius-sm);
+    outline: none;
+    caret-color: transparent;
+}
+
+.panneau-segment-hRUT-e[data-type='literal'] {
+    padding: 0;
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-segment-hRUT-e[data-placeholder] {
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-segment-hRUT-e[data-focused] {
+    color: var(--panneau-color-accent-text);
+    background-color: var(--panneau-color-accent);
+}
+
+.panneau-button-SywO8u {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    width: 2.25rem;
+    padding: 0;
+    color: var(--panneau-color-text-muted);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-button-SywO8u[data-hovered] {
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-button-SywO8u[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: -2px;
+}
+
+.panneau-calendar-F3LtsQ {
+    width: max-content;
+    max-width: 100%;
+}
+
+.panneau-header-p4dCKF {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+    margin-bottom: var(--panneau-space-2);
+}
+
+.panneau-heading-V16FH- {
+    margin: 0;
+    font-size: var(--panneau-font-size-md);
+    font-weight: var(--panneau-font-weight-bold);
+    text-transform: capitalize;
+}
+
+.panneau-grid-eanFoG {
+    border-collapse: collapse;
+}
+
+.panneau-weekday-DwEU9E {
+    padding-bottom: var(--panneau-space-1);
+    font-size: var(--panneau-font-size-xs);
+    font-weight: var(--panneau-font-weight-medium);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-cell-WCk0GL {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: var(--panneau-font-size-md);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    border-radius: var(--panneau-radius-md);
+    outline: none;
+}
+
+.panneau-cell-WCk0GL[data-outside-month] {
+    display: none;
+}
+
+.panneau-cell-WCk0GL[data-hovered] {
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-cell-WCk0GL[data-selected] {
+    color: var(--panneau-color-accent-text);
+    background-color: var(--panneau-color-accent);
+}
+
+.panneau-cell-WCk0GL[data-today]:not([data-selected]) {
+    font-weight: var(--panneau-font-weight-bold);
+    box-shadow: inset 0 0 0 1px var(--panneau-color-border-control);
+}
+
+.panneau-cell-WCk0GL[data-disabled],
+.panneau-cell-WCk0GL[data-unavailable] {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+.panneau-cell-WCk0GL[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+.panneau-time-3Ejhhf {
+    margin-top: var(--panneau-space-3);
+}

package/dist/date-picker/DatePicker.d.ts

@@ -0,0 +1,12 @@
+import { type DatePickerProps as AriaDatePickerProps, type DateValue } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+export interface DatePickerProps extends Omit<AriaDatePickerProps<DateValue>, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>, FieldChromeProps {
+    controlClassName?: string;
+    popoverClassName?: string;
+}
+/**
+ * A date, or a date and time with `granularity="minute"`, typed segment by segment in the order of
+ * the locale, or picked in a calendar. Values are `@internationalized/date` objects.
+ */
+export declare function DatePicker({ label, description, errors, isRequired, isReadOnly, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, popoverClassName, ...props }: DatePickerProps): import("react").JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/date-picker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,eAAe,IAAI,mBAAmB,EAU3C,KAAK,SAAS,EAIjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAO7B,MAAM,WAAW,eACb,SACI,IAAI,CACA,mBAAmB,CAAC,SAAS,CAAC,EAC9B,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAChE,EACD,gBAAgB;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,+BA0DjB"}

package/dist/date-picker/DatePicker.js

@@ -0,0 +1,93 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import Popover_module_default from "../popover/Popover.module.js";
+import { PopoverSurface } from "../popover/Popover.js";
+import DatePicker_module_default from "./DatePicker.module.js";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DateInput, DatePicker, DateSegment, Dialog, Group, Heading } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/date-picker/DatePicker.tsx
+/**
+* A date, or a date and time with `granularity="minute"`, typed segment by segment in the order of
+* the locale, or picked in a calendar. Values are `@internationalized/date` objects.
+*/
+function DatePicker$1({ label, description, errors = [], isRequired, isReadOnly, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, popoverClassName, ...props }) {
+	const invalid = errors.length > 0;
+	return /* @__PURE__ */ jsxs(DatePicker, {
+		...props,
+		isRequired,
+		isReadOnly,
+		isInvalid: invalid,
+		validationBehavior: "aria",
+		className: cx(Field_module_default.field, className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				isRequired,
+				className: labelClassName,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				className: cx(Field_module_default.control, DatePicker_module_default.control, controlClassName),
+				"data-readonly": isReadOnly || void 0,
+				children: [/* @__PURE__ */ jsx(DateInput, {
+					className: DatePicker_module_default.input,
+					children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
+						segment,
+						className: DatePicker_module_default.segment
+					})
+				}), isReadOnly !== true ? /* @__PURE__ */ jsx(Button, {
+					className: DatePicker_module_default.button,
+					children: /* @__PURE__ */ jsx(Icon, { icon: CalendarDays })
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				className: descriptionClassName,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, {
+				errors,
+				className: errorsClassName
+			}),
+			/* @__PURE__ */ jsx(PopoverSurface, {
+				className: popoverClassName,
+				children: /* @__PURE__ */ jsx(Dialog, {
+					className: Popover_module_default.dialog,
+					children: /* @__PURE__ */ jsxs(Calendar, {
+						className: DatePicker_module_default.calendar,
+						children: [/* @__PURE__ */ jsxs("header", {
+							className: DatePicker_module_default.header,
+							children: [
+								/* @__PURE__ */ jsx(Button, {
+									slot: "previous",
+									className: DatePicker_module_default.button,
+									children: /* @__PURE__ */ jsx(Icon, { icon: ChevronLeft })
+								}),
+								/* @__PURE__ */ jsx(Heading, { className: DatePicker_module_default.heading }),
+								/* @__PURE__ */ jsx(Button, {
+									slot: "next",
+									className: DatePicker_module_default.button,
+									children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })
+								})
+							]
+						}), /* @__PURE__ */ jsxs(CalendarGrid, {
+							className: DatePicker_module_default.grid,
+							children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
+								className: DatePicker_module_default.weekday,
+								children: day
+							}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
+								date,
+								className: DatePicker_module_default.cell
+							}) })]
+						})]
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { DatePicker$1 as DatePicker };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/date-picker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["DatePicker","AriaDatePicker","fieldStyles","styles","popoverStyles"],"sources":["../../src/date-picker/DatePicker.tsx"],"sourcesContent":["import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n    DatePicker as AriaDatePicker,\n    type DatePickerProps as AriaDatePickerProps,\n    Button,\n    Calendar,\n    CalendarCell,\n    CalendarGrid,\n    CalendarGridBody,\n    CalendarGridHeader,\n    CalendarHeaderCell,\n    DateInput,\n    DateSegment,\n    type DateValue,\n    Dialog,\n    Group,\n    Heading,\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 { PopoverSurface } from '../popover/Popover';\nimport popoverStyles from '../popover/Popover.module.css';\nimport { cx } from '../utils/cx';\nimport styles from './DatePicker.module.css';\n\nexport interface DatePickerProps\n    extends\n        Omit<\n            AriaDatePickerProps<DateValue>,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate'\n        >,\n        FieldChromeProps {\n    controlClassName?: string;\n    popoverClassName?: string;\n}\n\n/**\n * A date, or a date and time with `granularity=\"minute\"`, typed segment by segment in the order of\n * the locale, or picked in a calendar. Values are `@internationalized/date` objects.\n */\nexport function DatePicker({\n    label,\n    description,\n    errors = [],\n    isRequired,\n    isReadOnly,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    popoverClassName,\n    ...props\n}: DatePickerProps) {\n    const invalid = errors.length > 0;\n    return (\n        <AriaDatePicker\n            {...props}\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-readonly={isReadOnly || undefined}\n            >\n                <DateInput className={styles.input}>\n                    {(segment) => <DateSegment segment={segment} className={styles.segment} />}\n                </DateInput>\n                {isReadOnly !== true ? (\n                    <Button className={styles.button}>\n                        <Icon icon={CalendarDays} />\n                    </Button>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <Dialog className={popoverStyles.dialog}>\n                    <Calendar className={styles.calendar}>\n                        <header className={styles.header}>\n                            <Button slot=\"previous\" className={styles.button}>\n                                <Icon icon={ChevronLeft} />\n                            </Button>\n                            <Heading className={styles.heading} />\n                            <Button slot=\"next\" className={styles.button}>\n                                <Icon icon={ChevronRight} />\n                            </Button>\n                        </header>\n                        <CalendarGrid className={styles.grid}>\n                            <CalendarGridHeader>\n                                {(day) => (\n                                    <CalendarHeaderCell className={styles.weekday}>\n                                        {day}\n                                    </CalendarHeaderCell>\n                                )}\n                            </CalendarGridHeader>\n                            <CalendarGridBody>\n                                {(date) => <CalendarCell date={date} className={styles.cell} />}\n                            </CalendarGridBody>\n                        </CalendarGrid>\n                    </Calendar>\n                </Dialog>\n            </PopoverSurface>\n        </AriaDatePicker>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA+CA,SAAgBA,aAAW,EACvB,OACA,aACA,SAAS,CAAA,GACT,YACA,YACA,WACA,gBACA,sBACA,iBACA,kBACA,kBACA,GAAG,SACa;CAChB,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAACC,YAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGC,qBAAY,OAAO,SAAS;EAN9C,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,0BAAO,SAAS,gBAAgB;IACnE,iBAAe,cAAc,KAAA;IAFjC,UAAA,CAII,oBAAC,WAAD;KAAW,WAAWA,0BAAO;KACvB,WAAA,YAAY,oBAAC,aAAD;MAAsB;MAAS,WAAWA,0BAAO;KAAQ,CAAA;IAChE,CAAA,GACV,eAAe,OACZ,oBAAC,QAAD;KAAQ,WAAWA,0BAAO;KACtB,UAAA,oBAAC,MAAD,EAAM,MAAM,aAAa,CAAA;IACrB,CAAA,IACR,IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;GACxD,oBAAC,gBAAD;IAAgB,WAAW;IACvB,UAAA,oBAAC,QAAD;KAAQ,WAAWC,uBAAc;KAC7B,UAAA,qBAAC,UAAD;MAAU,WAAWD,0BAAO;MAA5B,UAAA,CACI,qBAAC,UAAD;OAAQ,WAAWA,0BAAO;OAA1B,UAAA;QACI,oBAAC,QAAD;SAAQ,MAAK;SAAW,WAAWA,0BAAO;SACtC,UAAA,oBAAC,MAAD,EAAM,MAAM,YAAY,CAAA;QACpB,CAAA;QACR,oBAAC,SAAD,EAAS,WAAWA,0BAAO,QAAQ,CAAA;QACnC,oBAAC,QAAD;SAAQ,MAAK;SAAO,WAAWA,0BAAO;SAClC,UAAA,oBAAC,MAAD,EAAM,MAAM,aAAa,CAAA;QACrB,CAAA;OACJ;MACR,CAAA,GAAA,qBAAC,cAAD;OAAc,WAAWA,0BAAO;OAAhC,UAAA,CACI,oBAAC,oBAAD,EAAA,WACM,QACE,oBAAC,oBAAD;QAAoB,WAAWA,0BAAO;QACjC,UAAA;OACe,CAAA,EAER,CAAA,GACpB,oBAAC,kBAAD,EAAA,WACM,SAAS,oBAAC,cAAD;QAAoB;QAAM,WAAWA,0BAAO;OAAK,CAAA,EAC9C,CAAA,CACR;MACR,CAAA,CAAA;;IACN,CAAA;GACI,CAAA;EACJ;;AAExB"}

package/dist/date-picker/DatePicker.module.js

@@ -0,0 +1,30 @@
+import "./DatePicker.css";
+//#region src/date-picker/DatePicker.module.css
+var control = "panneau-control-DKgKDX";
+var input = "panneau-input-wYghuH";
+var segment = "panneau-segment-hRUT-e";
+var button = "panneau-button-SywO8u";
+var calendar = "panneau-calendar-F3LtsQ";
+var header = "panneau-header-p4dCKF";
+var heading = "panneau-heading-V16FH-";
+var grid = "panneau-grid-eanFoG";
+var weekday = "panneau-weekday-DwEU9E";
+var cell = "panneau-cell-WCk0GL";
+var time = "panneau-time-3Ejhhf";
+var DatePicker_module_default = {
+	control,
+	input,
+	segment,
+	button,
+	calendar,
+	header,
+	heading,
+	grid,
+	weekday,
+	cell,
+	time
+};
+//#endregion
+export { button, calendar, cell, control, DatePicker_module_default as default, grid, header, heading, input, segment, time, weekday };
+
+//# sourceMappingURL=DatePicker.module.js.map

package/dist/date-picker/DatePicker.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.module.js","names":[],"sources":["../../src/date-picker/DatePicker.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n}\n\n.input {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    min-width: 0;\n    overflow-x: auto;\n    white-space: nowrap;\n    font-variant-numeric: tabular-nums;\n}\n\n.segment {\n    padding: 0 0.0625rem;\n    border-radius: var(--panneau-radius-sm);\n    outline: none;\n    caret-color: transparent;\n}\n\n.segment[data-type='literal'] {\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n}\n\n.segment[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.segment[data-focused] {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n}\n\n.button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    align-self: stretch;\n    width: 2.25rem;\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.button[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.button[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.calendar {\n    width: max-content;\n    max-width: 100%;\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    margin-bottom: var(--panneau-space-2);\n}\n\n.heading {\n    margin: 0;\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-bold);\n    text-transform: capitalize;\n}\n\n.grid {\n    border-collapse: collapse;\n}\n\n.weekday {\n    padding-bottom: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n}\n\n.cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    font-size: var(--panneau-font-size-md);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    border-radius: var(--panneau-radius-md);\n    outline: none;\n}\n\n.cell[data-outside-month] {\n    display: none;\n}\n\n.cell[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.cell[data-selected] {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n}\n\n.cell[data-today]:not([data-selected]) {\n    font-weight: var(--panneau-font-weight-bold);\n    box-shadow: inset 0 0 0 1px var(--panneau-color-border-control);\n}\n\n.cell[data-disabled],\n.cell[data-unavailable] {\n    cursor: not-allowed;\n    opacity: 0.4;\n}\n\n.cell[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.time {\n    margin-top: var(--panneau-space-3);\n}\n"],"mappings":""}

package/dist/dialog/Dialog.css

@@ -0,0 +1,126 @@
+.panneau-overlay-nLaR62 {
+    position: fixed;
+    inset: 0;
+    z-index: var(--panneau-z-overlay);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100dvh;
+    padding: var(--panneau-space-4);
+    background-color: var(--panneau-color-backdrop);
+}
+
+.panneau-overlay-nLaR62[data-entering] {
+    animation: panneau-fade-wJ4pz5 var(--panneau-duration) ease-out;
+}
+
+.panneau-overlay-nLaR62[data-exiting] {
+    animation: panneau-fade-wJ4pz5 var(--panneau-duration) ease-in reverse;
+}
+
+.panneau-modal-Ucsou3 {
+    display: flex;
+    width: 100%;
+    max-width: 32rem;
+    max-height: calc(100dvh - 2 * var(--panneau-space-4));
+    outline: none;
+}
+
+.panneau-sm-pQA1LI {
+    max-width: 24rem;
+}
+
+.panneau-lg-YG9jfw {
+    max-width: 48rem;
+}
+
+.panneau-modal-Ucsou3[data-entering] {
+    animation: panneau-rise-13o1zo var(--panneau-duration) ease-out;
+}
+
+.panneau-dialog-Q-k-Yw {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: inherit;
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-surface-raised);
+    border-radius: var(--panneau-radius-lg);
+    box-shadow: var(--panneau-shadow-lg);
+    outline: none;
+}
+
+.panneau-header-rSdjF8 {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--panneau-space-3);
+    padding: var(--panneau-space-4) var(--panneau-space-4) 0 var(--panneau-space-5);
+}
+
+.panneau-title-JCRwmh {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-top: var(--panneau-space-1);
+    font-size: var(--panneau-font-size-lg);
+    font-weight: var(--panneau-font-weight-bold);
+    line-height: var(--panneau-line-height-tight);
+    overflow-wrap: anywhere;
+}
+
+.panneau-body-HZoCzz {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--panneau-space-3) var(--panneau-space-5) var(--panneau-space-4);
+    overflow-y: auto;
+}
+
+.panneau-footer-zpq7M7 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--panneau-space-2);
+    padding: var(--panneau-space-3) var(--panneau-space-5) var(--panneau-space-4);
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+/* Phones: the dialog is a sheet at the bottom, with full-width buttons. */
+@media (max-width: 30rem) {
+    .panneau-overlay-nLaR62 {
+        align-items: flex-end;
+        padding: 0;
+    }
+
+    .panneau-modal-Ucsou3,
+    .panneau-sm-pQA1LI,
+    .panneau-lg-YG9jfw {
+        max-width: none;
+        max-height: calc(100dvh - var(--panneau-space-8));
+    }
+
+    .panneau-dialog-Q-k-Yw {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .panneau-footer-zpq7M7 {
+        flex-direction: column-reverse;
+    }
+
+    .panneau-footer-zpq7M7 > * {
+        width: 100%;
+    }
+}
+
+@keyframes panneau-fade-wJ4pz5 {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes panneau-rise-13o1zo {
+    from {
+        opacity: 0;
+        transform: translateY(0.5rem);
+    }
+}

package/dist/dialog/Dialog.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { type ModalOverlayProps } from 'react-aria-components';
+export interface DialogProps extends Pick<ModalOverlayProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'isKeyboardDismissDisabled'> {
+    /** Heading of the dialog, which also labels it. */
+    title: ReactNode;
+    /** Content, or a function that gets `close()`. */
+    children?: ReactNode | ((close: () => void) => ReactNode);
+    /** Buttons at the bottom, or a function that gets `close()`. */
+    footer?: ReactNode | ((close: () => void) => ReactNode);
+    /**
+     * Closes on a click outside and shows a close button. Defaults to true. Turn it off for dialogs
+     * that need an answer.
+     */
+    isDismissable?: boolean;
+    /** `alertdialog` for confirmations and interruptions. Defaults to `dialog`. */
+    role?: 'dialog' | 'alertdialog';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    overlayClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
+}
+/**
+ * A modal dialog. Controlled with `isOpen` and `onOpenChange`, or inside a `DialogTrigger` with
+ * its button as the first child. It traps focus, closes with Escape, and returns focus when it
+ * closes. On phones, it opens as a sheet at the bottom of the screen.
+ */
+export declare function Dialog({ title, children, footer, isDismissable, role, size, className, overlayClassName, headerClassName, bodyClassName, footerClassName, ...props }: DialogProps): import("react").JSX.Element | null;
+export { DialogTrigger } from 'react-aria-components';
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,iBAAiB,EACjB,QAAQ,GAAG,aAAa,GAAG,cAAc,GAAG,2BAA2B,CAC1E;IACG,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IAC1D,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IACxD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,aAAoB,EACpB,IAAe,EACf,IAAW,EACX,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,sCA6Cb;AAED,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/dialog/Dialog.js

@@ -0,0 +1,61 @@
+import { cx } from "../utils/cx.js";
+import { messages } from "../intl/messages.js";
+import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import { usePortalContainer } from "../root/PanneauRoot.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import Dialog_module_default from "./Dialog.module.js";
+import { X } from "lucide-react";
+import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/dialog/Dialog.tsx
+/**
+* A modal dialog. Controlled with `isOpen` and `onOpenChange`, or inside a `DialogTrigger` with
+* its button as the first child. It traps focus, closes with Escape, and returns focus when it
+* closes. On phones, it opens as a sheet at the bottom of the screen.
+*/
+function Dialog$1({ title, children, footer, isDismissable = true, role = "dialog", size = "md", className, overlayClassName, headerClassName, bodyClassName, footerClassName, ...props }) {
+	const intl = usePanneauIntl();
+	const container = usePortalContainer();
+	if (container === null) return null;
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		...props,
+		isDismissable,
+		className: cx(Dialog_module_default.overlay, overlayClassName),
+		UNSTABLE_portalContainer: container,
+		children: /* @__PURE__ */ jsx(Modal, {
+			className: cx(Dialog_module_default.modal, Dialog_module_default[size]),
+			children: /* @__PURE__ */ jsx(Dialog, {
+				role,
+				className: cx(Dialog_module_default.dialog, className),
+				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cx(Dialog_module_default.header, headerClassName),
+						children: [/* @__PURE__ */ jsx(Heading, {
+							slot: "title",
+							className: Dialog_module_default.title,
+							children: title
+						}), isDismissable ? /* @__PURE__ */ jsx(IconButton, {
+							icon: X,
+							size: "sm",
+							label: intl.formatMessage(messages.close),
+							showTooltip: false,
+							onPress: close
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cx(Dialog_module_default.body, bodyClassName),
+						children: typeof children === "function" ? children(close) : children
+					}),
+					footer !== void 0 && footer !== null ? /* @__PURE__ */ jsx("div", {
+						className: cx(Dialog_module_default.footer, footerClassName),
+						children: typeof footer === "function" ? footer(close) : footer
+					}) : null
+				] })
+			})
+		})
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog, DialogTrigger };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["Dialog","styles","AriaDialog","_Fragment"],"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Dialog as AriaDialog,\n    Heading,\n    Modal,\n    ModalOverlay,\n    type ModalOverlayProps,\n} from 'react-aria-components';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Dialog.module.css';\n\nexport interface DialogProps extends Pick<\n    ModalOverlayProps,\n    'isOpen' | 'defaultOpen' | 'onOpenChange' | 'isKeyboardDismissDisabled'\n> {\n    /** Heading of the dialog, which also labels it. */\n    title: ReactNode;\n    /** Content, or a function that gets `close()`. */\n    children?: ReactNode | ((close: () => void) => ReactNode);\n    /** Buttons at the bottom, or a function that gets `close()`. */\n    footer?: ReactNode | ((close: () => void) => ReactNode);\n    /**\n     * Closes on a click outside and shows a close button. Defaults to true. Turn it off for dialogs\n     * that need an answer.\n     */\n    isDismissable?: boolean;\n    /** `alertdialog` for confirmations and interruptions. Defaults to `dialog`. */\n    role?: 'dialog' | 'alertdialog';\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n    overlayClassName?: string;\n    headerClassName?: string;\n    bodyClassName?: string;\n    footerClassName?: string;\n}\n\n/**\n * A modal dialog. Controlled with `isOpen` and `onOpenChange`, or inside a `DialogTrigger` with\n * its button as the first child. It traps focus, closes with Escape, and returns focus when it\n * closes. On phones, it opens as a sheet at the bottom of the screen.\n */\nexport function Dialog({\n    title,\n    children,\n    footer,\n    isDismissable = true,\n    role = 'dialog',\n    size = 'md',\n    className,\n    overlayClassName,\n    headerClassName,\n    bodyClassName,\n    footerClassName,\n    ...props\n}: DialogProps) {\n    const intl = usePanneauIntl();\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <ModalOverlay\n            {...props}\n            isDismissable={isDismissable}\n            className={cx(styles.overlay, overlayClassName)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Modal className={cx(styles.modal, styles[size])}>\n                <AriaDialog role={role} className={cx(styles.dialog, className)}>\n                    {({ close }) => (\n                        <>\n                            <div className={cx(styles.header, headerClassName)}>\n                                <Heading slot=\"title\" className={styles.title}>\n                                    {title}\n                                </Heading>\n                                {isDismissable ? (\n                                    <IconButton\n                                        icon={X}\n                                        size=\"sm\"\n                                        label={intl.formatMessage(messages.close)}\n                                        showTooltip={false}\n                                        onPress={close}\n                                    />\n                                ) : null}\n                            </div>\n                            <div className={cx(styles.body, bodyClassName)}>\n                                {typeof children === 'function' ? children(close) : children}\n                            </div>\n                            {footer !== undefined && footer !== null ? (\n                                <div className={cx(styles.footer, footerClassName)}>\n                                    {typeof footer === 'function' ? footer(close) : footer}\n                                </div>\n                            ) : null}\n                        </>\n                    )}\n                </AriaDialog>\n            </Modal>\n        </ModalOverlay>\n    );\n}\n\nexport { DialogTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;;;;AA+CA,SAAgBA,SAAO,EACnB,OACA,UACA,QACA,gBAAgB,MAChB,OAAO,UACP,OAAO,MACP,WACA,kBACA,iBACA,eACA,iBACA,GAAG,SACS;CACZ,MAAM,OAAO,eAAe;CAC5B,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAAC,cAAD;EACI,GAAI;EACW;EACf,WAAW,GAAGC,sBAAO,SAAS,gBAAgB;EAC9C,0BAA0B;EAE1B,UAAA,oBAAC,OAAD;GAAO,WAAW,GAAGA,sBAAO,OAAOA,sBAAO,KAAK;GAC3C,UAAA,oBAACC,QAAD;IAAkB;IAAM,WAAW,GAAGD,sBAAO,QAAQ,SAAS;IACxD,WAAA,EAAE,YACA,qBAAAE,UAAA,EAAA,UAAA;KACI,qBAAC,OAAD;MAAK,WAAW,GAAGF,sBAAO,QAAQ,eAAe;MAAjD,UAAA,CACI,oBAAC,SAAD;OAAS,MAAK;OAAQ,WAAWA,sBAAO;OACnC,UAAA;MACI,CAAA,GACR,gBACG,oBAAC,YAAD;OACI,MAAM;OACN,MAAK;OACL,OAAO,KAAK,cAAc,SAAS,KAAK;OACxC,aAAa;OACb,SAAS;MAAM,CAAA,IAEnB,IACH;;KACL,oBAAC,OAAD;MAAK,WAAW,GAAGA,sBAAO,MAAM,aAAa;MACxC,UAAA,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;KACnD,CAAA;KACJ,WAAW,KAAA,KAAa,WAAW,OAChC,oBAAC,OAAD;MAAK,WAAW,GAAGA,sBAAO,QAAQ,eAAe;MAC5C,UAAA,OAAO,WAAW,aAAa,OAAO,KAAK,IAAI;KAC/C,CAAA,IACL;IACR,EAAA,CAAA;GAEI,CAAA;EACT,CAAA;CACG,CAAA;AAEtB"}

package/dist/dialog/Dialog.module.js

@@ -0,0 +1,30 @@
+import "./Dialog.css";
+//#region src/dialog/Dialog.module.css
+var overlay = "panneau-overlay-nLaR62";
+var fade = "panneau-fade-wJ4pz5";
+var modal = "panneau-modal-Ucsou3";
+var sm = "panneau-sm-pQA1LI";
+var lg = "panneau-lg-YG9jfw";
+var rise = "panneau-rise-13o1zo";
+var dialog = "panneau-dialog-Q-k-Yw";
+var header = "panneau-header-rSdjF8";
+var title = "panneau-title-JCRwmh";
+var body = "panneau-body-HZoCzz";
+var footer = "panneau-footer-zpq7M7";
+var Dialog_module_default = {
+	overlay,
+	fade,
+	modal,
+	sm,
+	lg,
+	rise,
+	dialog,
+	header,
+	title,
+	body,
+	footer
+};
+//#endregion
+export { body, Dialog_module_default as default, dialog, fade, footer, header, lg, modal, overlay, rise, sm, title };
+
+//# sourceMappingURL=Dialog.module.js.map

package/dist/dialog/Dialog.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.module.js","names":[],"sources":["../../src/dialog/Dialog.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--panneau-z-overlay);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100dvh;\n    padding: var(--panneau-space-4);\n    background-color: var(--panneau-color-backdrop);\n}\n\n.overlay[data-entering] {\n    animation: fade var(--panneau-duration) ease-out;\n}\n\n.overlay[data-exiting] {\n    animation: fade var(--panneau-duration) ease-in reverse;\n}\n\n.modal {\n    display: flex;\n    width: 100%;\n    max-width: 32rem;\n    max-height: calc(100dvh - 2 * var(--panneau-space-4));\n    outline: none;\n}\n\n.sm {\n    max-width: 24rem;\n}\n\n.lg {\n    max-width: 48rem;\n}\n\n.modal[data-entering] {\n    animation: rise var(--panneau-duration) ease-out;\n}\n\n.dialog {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: inherit;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-raised);\n    border-radius: var(--panneau-radius-lg);\n    box-shadow: var(--panneau-shadow-lg);\n    outline: none;\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-4) var(--panneau-space-4) 0 var(--panneau-space-5);\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding-top: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-bold);\n    line-height: var(--panneau-line-height-tight);\n    overflow-wrap: anywhere;\n}\n\n.body {\n    flex: 1 1 auto;\n    min-height: 0;\n    padding: var(--panneau-space-3) var(--panneau-space-5) var(--panneau-space-4);\n    overflow-y: auto;\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3) var(--panneau-space-5) var(--panneau-space-4);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n/* Phones: the dialog is a sheet at the bottom, with full-width buttons. */\n@media (max-width: 30rem) {\n    .overlay {\n        align-items: flex-end;\n        padding: 0;\n    }\n\n    .modal,\n    .sm,\n    .lg {\n        max-width: none;\n        max-height: calc(100dvh - var(--panneau-space-8));\n    }\n\n    .dialog {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        padding-bottom: env(safe-area-inset-bottom);\n    }\n\n    .footer {\n        flex-direction: column-reverse;\n    }\n\n    .footer > * {\n        width: 100%;\n    }\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes rise {\n    from {\n        opacity: 0;\n        transform: translateY(0.5rem);\n    }\n}\n"],"mappings":""}

package/dist/disclosure/Disclosure.css

@@ -0,0 +1,54 @@
+.panneau-disclosure-WME8SS {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panneau-trigger-0Jo--Y {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    width: 100%;
+    min-height: var(--panneau-control-height);
+    padding: 0;
+    font-size: var(--panneau-font-size-lg);
+    font-weight: var(--panneau-font-weight-bold);
+    text-align: start;
+    color: var(--panneau-color-text);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: var(--panneau-radius-sm);
+}
+
+.panneau-trigger-0Jo--Y[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-chevron-1tYsh0 {
+    color: var(--panneau-color-text-muted);
+    transition: transform var(--panneau-duration);
+}
+
+.panneau-disclosure-WME8SS[data-expanded] .panneau-chevron-1tYsh0 {
+    transform: rotate(90deg);
+}
+
+.panneau-title-DSKeDu {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.panneau-panel-heR-bQ {
+    min-width: 0;
+}
+
+.panneau-panelContent-FQV3Na {
+    padding-top: var(--panneau-space-3);
+}
+
+.panneau-heading-pnG2s2 {
+    margin: 0;
+    font: inherit;
+}

package/dist/disclosure/Disclosure.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export interface DisclosureProps {
+    /** Title of the button that expands and collapses the content. */
+    title: ReactNode;
+    /** Content after the title, in the button: a count of errors. */
+    titleEnd?: ReactNode;
+    /** Heading level of the title. Defaults to 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    children?: ReactNode;
+    isExpanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
+    id?: string;
+    className?: string;
+    triggerClassName?: string;
+    panelClassName?: string;
+}
+/** A section whose content can be collapsed under its title. */
+export declare function Disclosure({ title, titleEnd, headingLevel, children, className, triggerClassName, panelClassName, ...props }: DisclosureProps): import("react").JSX.Element;
+//# sourceMappingURL=Disclosure.d.ts.map

package/dist/disclosure/Disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disclosure.d.ts","sourceRoot":"","sources":["../../src/disclosure/Disclosure.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,MAAM,WAAW,eAAe;IAC5B,kEAAkE;IAClE,KAAK,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,gEAAgE;AAChE,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,YAAgB,EAChB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BAejB"}