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

package/dist/container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","names":["styles"],"sources":["../../src/container/Container.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Container.module.css';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'section' | 'main' | 'article' | 'header' | 'footer';\n    /** Maximum width, from the `--panneau-container-width-*` tokens, or `full`. Defaults to `lg`. */\n    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n    /** Removes the horizontal padding. */\n    flush?: boolean;\n}\n\n/**\n * A centered column with a maximum width. It is a size container: responsive props inside it follow\n * its width. Like any size container, it needs a width from its parent: in a row, give it one.\n */\nexport function Container({\n    as: Element = 'div',\n    size = 'lg',\n    flush = false,\n    className,\n    ...props\n}: ContainerProps) {\n    return (\n        <Element\n            {...props}\n            className={cx(\n                'panneau-container',\n                styles.container,\n                size !== 'full' && styles[size],\n                flush && styles.flush,\n                className,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,UAAU,EACtB,IAAI,UAAU,OACd,OAAO,MACP,QAAQ,OACR,WACA,GAAG,SACY;CACf,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GACP,qBACAA,yBAAO,WACP,SAAS,UAAUA,yBAAO,OAC1B,SAASA,yBAAO,OAChB,SACJ;CAAE,CAAA;AAGd"}

package/dist/container/Container.module.js

@@ -0,0 +1,20 @@
+import "./Container.css";
+//#region src/container/Container.module.css
+var container = "panneau-container";
+var sm = "panneau-container-sm";
+var md = "panneau-container-md";
+var lg = "panneau-container-lg";
+var xl = "panneau-container-xl";
+var flush = "panneau-container-flush";
+var Container_module_default = {
+	container,
+	sm,
+	md,
+	lg,
+	xl,
+	flush
+};
+//#endregion
+export { container, Container_module_default as default, flush, lg, md, sm, xl };
+
+//# sourceMappingURL=Container.module.js.map

package/dist/container/Container.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.js","names":[],"sources":["../../src/container/Container.module.css"],"sourcesContent":["/*\n * A centered column with a maximum width. It is a size container: the responsive props of the\n * primitives inside it follow its width.\n */\n\n.container {\n    box-sizing: border-box;\n    width: 100%;\n    margin-inline: auto;\n    padding-inline: var(--panneau-container-padding-x, var(--panneau-space-4));\n    container-type: inline-size;\n}\n\n.sm {\n    max-width: var(--panneau-container-width-sm, 40rem);\n}\n\n.md {\n    max-width: var(--panneau-container-width-md, 48rem);\n}\n\n.lg {\n    max-width: var(--panneau-container-width-lg, 64rem);\n}\n\n.xl {\n    max-width: var(--panneau-container-width-xl, 80rem);\n}\n\n.flush {\n    padding-inline: 0;\n}\n"],"mappings":""}

package/dist/container/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Container. */
+export declare const containerTokens: import("..").ComponentTokens<"container", "panneau-container-padding-x" | "panneau-container-width-sm" | "panneau-container-width-md" | "panneau-container-width-lg" | "panneau-container-width-xl">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/container/tokens.ts"],"names":[],"mappings":"AAEA,2BAA2B;AAC3B,eAAO,MAAM,eAAe,sMAW1B,CAAC"}

package/dist/container/tokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/container/tokens.ts
+/** Tokens of Container. */
+var containerTokens = defineComponentTokens("container", {
+	/** Maximum width of the `sm` size. */
+	"width-sm": "40rem",
+	/** Maximum width of the `md` size. */
+	"width-md": "48rem",
+	/** Maximum width of the `lg` size, the default. */
+	"width-lg": "64rem",
+	/** Maximum width of the `xl` size. */
+	"width-xl": "80rem",
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-space-4)"
+});
+//#endregion
+export { containerTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/container/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/container/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Container. */\nexport const containerTokens = defineComponentTokens('container', {\n    /** Maximum width of the `sm` size. */\n    'width-sm': '40rem',\n    /** Maximum width of the `md` size. */\n    'width-md': '48rem',\n    /** Maximum width of the `lg` size, the default. */\n    'width-lg': '64rem',\n    /** Maximum width of the `xl` size. */\n    'width-xl': '80rem',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-4)',\n});\n"],"mappings":";;;AAGA,IAAa,kBAAkB,sBAAsB,aAAa;;CAE9D,YAAY;;CAEZ,YAAY;;CAEZ,YAAY;;CAEZ,YAAY;;CAEZ,aAAa;AACjB,CAAC"}

package/dist/date-picker/DatePicker.css

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

package/dist/date-picker/DatePicker.js

@@ -21,7 +21,7 @@ function DatePicker$1({ label, description, errors = [], isRequired, isReadOnly,
 		isReadOnly,
 		isInvalid: invalid,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-date-picker", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

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

@@ -1 +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"}
+{"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('panneau-date-picker', 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,GAAG,uBAAuBC,qBAAY,OAAO,SAAS;EANrE,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

@@ -1,16 +1,16 @@
 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 control = "panneau-date-picker-control";
+var input = "panneau-date-picker-input";
+var segment = "panneau-date-picker-segment";
+var button = "panneau-date-picker-button";
+var calendar = "panneau-date-picker-calendar";
+var header = "panneau-date-picker-header";
+var heading = "panneau-date-picker-heading";
+var grid = "panneau-date-picker-grid";
+var weekday = "panneau-date-picker-weekday";
+var cell = "panneau-date-picker-cell";
+var time = "panneau-date-picker-time";
 var DatePicker_module_default = {
 	control,
 	input,

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

@@ -1 +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":""}
+{"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: var(--panneau-font-numeric);\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: var(--panneau-calendar-cell-size, 2.25rem);\n    height: var(--panneau-calendar-cell-size, 2.25rem);\n    font-size: var(--panneau-font-size-md);\n    font-variant-numeric: var(--panneau-font-numeric);\n    cursor: pointer;\n    border-radius: var(--panneau-calendar-cell-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-calendar-selected-color, var(--panneau-color-accent-text));\n    background-color: var(--panneau-calendar-selected-bg, 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/date-picker/calendarTokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of the calendar of `DatePicker`. */
+export declare const calendarTokens: import("..").ComponentTokens<"calendar", "panneau-calendar-cell-size" | "panneau-calendar-cell-radius" | "panneau-calendar-selected-color" | "panneau-calendar-selected-bg">;
+//# sourceMappingURL=calendarTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendarTokens.d.ts","sourceRoot":"","sources":["../../src/date-picker/calendarTokens.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C,eAAO,MAAM,cAAc,8KASzB,CAAC"}

package/dist/date-picker/calendarTokens.js

@@ -0,0 +1,17 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/date-picker/calendarTokens.ts
+/** Tokens of the calendar of `DatePicker`. */
+var calendarTokens = defineComponentTokens("calendar", {
+	/** Size of a day. */
+	"cell-size": "2.25rem",
+	/** Corner radius of a day. */
+	"cell-radius": "var(--panneau-radius-md)",
+	/** Text color of the selected day. */
+	"selected-color": "var(--panneau-color-accent-text)",
+	/** Background of the selected day. */
+	"selected-bg": "var(--panneau-color-accent)"
+});
+//#endregion
+export { calendarTokens };
+
+//# sourceMappingURL=calendarTokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendarTokens.js","names":[],"sources":["../../src/date-picker/calendarTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the calendar of `DatePicker`. */\nexport const calendarTokens = defineComponentTokens('calendar', {\n    /** Size of a day. */\n    'cell-size': '2.25rem',\n    /** Corner radius of a day. */\n    'cell-radius': 'var(--panneau-radius-md)',\n    /** Text color of the selected day. */\n    'selected-color': 'var(--panneau-color-accent-text)',\n    /** Background of the selected day. */\n    'selected-bg': 'var(--panneau-color-accent)',\n});\n"],"mappings":";;;AAGA,IAAa,iBAAiB,sBAAsB,YAAY;;CAE5D,aAAa;;CAEb,eAAe;;CAEf,kBAAkB;;CAElB,eAAe;AACnB,CAAC"}

package/dist/dialog/Dialog.css

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

package/dist/dialog/Dialog.js

@@ -26,7 +26,7 @@ function Dialog$1({ title, children, footer, isDismissable = true, role = "dialo
 			className: cx(Dialog_module_default.modal, Dialog_module_default[size]),
 			children: /* @__PURE__ */ jsx(Dialog, {
 				role,
-				className: cx(Dialog_module_default.dialog, className),
+				className: cx("panneau-dialog", Dialog_module_default.dialog, className),
 				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: cx(Dialog_module_default.header, headerClassName),

package/dist/dialog/Dialog.js.map

@@ -1 +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"}
+{"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('panneau-dialog', 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,GAAG,kBAAkBD,sBAAO,QAAQ,SAAS;IAC1E,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

@@ -1,16 +1,16 @@
 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 overlay = "panneau-dialog-overlay";
+var fade = "panneau-dialog-fade";
+var modal = "panneau-dialog-modal";
+var sm = "panneau-dialog-sm";
+var lg = "panneau-dialog-lg";
+var rise = "panneau-dialog-rise";
+var dialog = "panneau-dialog";
+var header = "panneau-dialog-header";
+var title = "panneau-dialog-title";
+var body = "panneau-dialog-body";
+var footer = "panneau-dialog-footer";
 var Dialog_module_default = {
 	overlay,
 	fade,

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

@@ -1 +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":""}
+{"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-dialog-backdrop, 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: var(--panneau-dialog-width, 32rem);\n    max-height: calc(100dvh - 2 * var(--panneau-space-4));\n    outline: none;\n}\n\n.sm {\n    max-width: var(--panneau-dialog-width-sm, 24rem);\n}\n\n.lg {\n    max-width: var(--panneau-dialog-width-lg, 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-dialog-bg, var(--panneau-color-surface-raised));\n    border-radius: var(--panneau-dialog-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-dialog-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\n        var(--panneau-dialog-padding-x, 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-dialog-title-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-dialog-title-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-line-height-tight);\n    overflow-wrap: anywhere;\n    margin: 0;\n}\n\n.body {\n    flex: 1 1 auto;\n    min-height: 0;\n    padding: var(--panneau-space-3) var(--panneau-dialog-padding-x, var(--panneau-space-5))\n        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-dialog-padding-x, var(--panneau-space-5))\n        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/dialog/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Dialog. */
+export declare const dialogTokens: import("..").ComponentTokens<"dialog", "panneau-dialog-width" | "panneau-dialog-radius" | "panneau-dialog-padding-x" | "panneau-dialog-title-font-weight" | "panneau-dialog-bg" | "panneau-dialog-shadow" | "panneau-dialog-title-font-size" | "panneau-dialog-width-sm" | "panneau-dialog-width-lg" | "panneau-dialog-backdrop">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/dialog/tokens.ts"],"names":[],"mappings":"AAEA,wBAAwB;AACxB,eAAO,MAAM,YAAY,mUAqBvB,CAAC"}

package/dist/dialog/tokens.js

@@ -0,0 +1,29 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/dialog/tokens.ts
+/** Tokens of Dialog. */
+var dialogTokens = defineComponentTokens("dialog", {
+	/** Color of the backdrop. */
+	backdrop: "var(--panneau-color-backdrop)",
+	/** Maximum width of the default size. */
+	width: "32rem",
+	/** Maximum width of the small size. */
+	"width-sm": "24rem",
+	/** Maximum width of the large size. */
+	"width-lg": "48rem",
+	/** Background. */
+	bg: "var(--panneau-color-surface-raised)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-lg)",
+	/** Shadow. */
+	shadow: "var(--panneau-shadow-lg)",
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-space-5)",
+	/** Font size of the title. */
+	"title-font-size": "var(--panneau-font-size-lg)",
+	/** Font weight of the title. */
+	"title-font-weight": "var(--panneau-font-weight-bold)"
+});
+//#endregion
+export { dialogTokens };
+
+//# sourceMappingURL=tokens.js.map