@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/inline/Inline.js

@@ -0,0 +1,21 @@
+import { cx } from "../utils/cx.js";
+import { justification, responsiveVariables, space, withVariables } from "../layout/responsive.js";
+import Inline_module_default from "./Inline.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/inline/Inline.tsx
+/** Items side by side, wrapping when they don't fit, like Bootstrap's `.hstack`. */
+function Inline({ as: Element = "div", gap, align, justify, wrap = true, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-inline", Inline_module_default.inline, !wrap && Inline_module_default.nowrap, className),
+		style: withVariables([
+			responsiveVariables("inline", "gap", gap, space),
+			responsiveVariables("inline", "align", align, String),
+			responsiveVariables("inline", "justify", justify, justification)
+		], style)
+	});
+}
+//#endregion
+export { Inline };
+
+//# sourceMappingURL=Inline.js.map

package/dist/inline/Inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.js","names":["styles"],"sources":["../../src/inline/Inline.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport {\n    type Justification,\n    type Responsive,\n    type Space,\n    justification,\n    responsiveVariables,\n    space,\n    withVariables,\n} from '../layout/responsive';\nimport { cx } from '../utils/cx';\nimport styles from './Inline.module.css';\n\nexport interface InlineProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'section' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'span';\n    /** Space between items, from the space scale. Defaults to the `--panneau-inline-gap` token. */\n    gap?: Responsive<Space>;\n    /** Vertical alignment of the items. Defaults to `center`. */\n    align?: Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;\n    /** Horizontal distribution of the items. Defaults to `start`. */\n    justify?: Responsive<Justification>;\n    /** Items wrap to the next line when they don't fit. Defaults to `true`. */\n    wrap?: boolean;\n}\n\n/** Items side by side, wrapping when they don't fit, like Bootstrap's `.hstack`. */\nexport function Inline({\n    as: Element = 'div',\n    gap,\n    align,\n    justify,\n    wrap = true,\n    className,\n    style,\n    ...props\n}: InlineProps) {\n    return (\n        <Element\n            {...props}\n            className={cx('panneau-inline', styles.inline, !wrap && styles.nowrap, className)}\n            style={withVariables(\n                [\n                    responsiveVariables('inline', 'gap', gap, space),\n                    responsiveVariables('inline', 'align', align, String),\n                    responsiveVariables('inline', 'justify', justify, justification),\n                ],\n                style,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;AA4BA,SAAgB,OAAO,EACnB,IAAI,UAAU,OACd,KACA,OACA,SACA,OAAO,MACP,WACA,OACA,GAAG,SACS;CACZ,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GAAG,kBAAkBA,sBAAO,QAAQ,CAAC,QAAQA,sBAAO,QAAQ,SAAS;EAChF,OAAO,cACH;GACI,oBAAoB,UAAU,OAAO,KAAK,KAAK;GAC/C,oBAAoB,UAAU,SAAS,OAAO,MAAM;GACpD,oBAAoB,UAAU,WAAW,SAAS,aAAa;EAAC,GAEpE,KACJ;CAAE,CAAA;AAGd"}

package/dist/inline/Inline.module.js

@@ -0,0 +1,12 @@
+import "./Inline.css";
+//#region src/inline/Inline.module.css
+var inline = "panneau-inline";
+var nowrap = "panneau-inline-nowrap";
+var Inline_module_default = {
+	inline,
+	nowrap
+};
+//#endregion
+export { Inline_module_default as default, inline, nowrap };
+
+//# sourceMappingURL=Inline.module.js.map

package/dist/inline/Inline.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.module.js","names":[],"sources":["../../src/inline/Inline.module.css"],"sourcesContent":["/* A horizontal row that wraps: each prop can change at the breakpoints of the nearest container. */\n\n.inline {\n    display: flex;\n    flex-wrap: wrap;\n    min-width: 0;\n}\n\n.nowrap {\n    flex-wrap: nowrap;\n}\n/* Responsive values are set inline; children reset them so that they aren't inherited. */\n.inline > * {\n    --_panneau-inline-gap-base: initial;\n    --_panneau-inline-gap-sm: initial;\n    --_panneau-inline-gap-md: initial;\n    --_panneau-inline-gap-lg: initial;\n    --_panneau-inline-gap-xl: initial;\n    --_panneau-inline-align-base: initial;\n    --_panneau-inline-align-sm: initial;\n    --_panneau-inline-align-md: initial;\n    --_panneau-inline-align-lg: initial;\n    --_panneau-inline-align-xl: initial;\n    --_panneau-inline-justify-base: initial;\n    --_panneau-inline-justify-sm: initial;\n    --_panneau-inline-justify-md: initial;\n    --_panneau-inline-justify-lg: initial;\n    --_panneau-inline-justify-xl: initial;\n}\n\n.inline {\n    gap: var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)));\n    align-items: var(--_panneau-inline-align-base, center);\n    justify-content: var(--_panneau-inline-justify-base, start);\n}\n\n@container (min-width: 40rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-sm,\n            var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))\n        );\n        align-items: var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center));\n        justify-content: var(\n            --_panneau-inline-justify-sm,\n            var(--_panneau-inline-justify-base, start)\n        );\n    }\n}\n\n@container (min-width: 48rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-md,\n            var(\n                --_panneau-inline-gap-sm,\n                var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))\n            )\n        );\n        align-items: var(\n            --_panneau-inline-align-md,\n            var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))\n        );\n        justify-content: var(\n            --_panneau-inline-justify-md,\n            var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))\n        );\n    }\n}\n\n@container (min-width: 64rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-lg,\n            var(\n                --_panneau-inline-gap-md,\n                var(\n                    --_panneau-inline-gap-sm,\n                    var(\n                        --_panneau-inline-gap-base,\n                        var(--panneau-inline-gap, var(--panneau-space-2))\n                    )\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-inline-align-lg,\n            var(\n                --_panneau-inline-align-md,\n                var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))\n            )\n        );\n        justify-content: var(\n            --_panneau-inline-justify-lg,\n            var(\n                --_panneau-inline-justify-md,\n                var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))\n            )\n        );\n    }\n}\n\n@container (min-width: 80rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-xl,\n            var(\n                --_panneau-inline-gap-lg,\n                var(\n                    --_panneau-inline-gap-md,\n                    var(\n                        --_panneau-inline-gap-sm,\n                        var(\n                            --_panneau-inline-gap-base,\n                            var(--panneau-inline-gap, var(--panneau-space-2))\n                        )\n                    )\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-inline-align-xl,\n            var(\n                --_panneau-inline-align-lg,\n                var(\n                    --_panneau-inline-align-md,\n                    var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))\n                )\n            )\n        );\n        justify-content: var(\n            --_panneau-inline-justify-xl,\n            var(\n                --_panneau-inline-justify-lg,\n                var(\n                    --_panneau-inline-justify-md,\n                    var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))\n                )\n            )\n        );\n    }\n}\n"],"mappings":""}

package/dist/inline/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Inline. */
+export declare const inlineTokens: import("..").ComponentTokens<"inline", "panneau-inline-gap">;
+//# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/inline/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/inline/tokens.ts
+/** Tokens of Inline. */
+var inlineTokens = defineComponentTokens("inline", { 
+/** Space between items, in both directions, when the `gap` prop is not set. */
+gap: "var(--panneau-space-2)" });
+//#endregion
+export { inlineTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/inline/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/inline/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Inline. */\nexport const inlineTokens = defineComponentTokens('inline', {\n    /** Space between items, in both directions, when the `gap` prop is not set. */\n    gap: 'var(--panneau-space-2)',\n});\n"],"mappings":";;;AAGA,IAAa,eAAe,sBAAsB,UAAU;;AAExD,KAAK,yBACT,CAAC"}

package/dist/layout/responsive.d.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react';
+/**
+ * Breakpoints of the layout primitives, like Bootstrap's `$grid-breakpoints`: the minimum width of
+ * the nearest container at which a responsive value applies. They are constants, since CSS
+ * variables can't be used in queries; the stylesheets of the primitives use the same values.
+ */
+export declare const BREAKPOINTS: Readonly<{
+    sm: "40rem";
+    md: "48rem";
+    lg: "64rem";
+    xl: "80rem";
+}>;
+/** A breakpoint: `sm`, `md`, `lg` or `xl`. */
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * A value, or values by breakpoint: `{ base: 1, md: 2, lg: 3 }`. Each value applies from its
+ * breakpoint up, until a larger one sets another. Breakpoints are widths of the nearest container
+ * (`PanneauRoot`, `Container`, a form, a list), not of the viewport, so that a grid in a narrow
+ * sidebar behaves as on a phone.
+ */
+export type Responsive<T> = T | Partial<Record<'base' | Breakpoint, T>>;
+/** A step of the space scale of the theme (`--panneau-space-<step>`), or 0. */
+export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10;
+/** The CSS value of a step of the space scale. */
+export declare function space(step: Space): string;
+/**
+ * The inline variables of a responsive prop, `--_panneau-<component>-<prop>-<breakpoint>`, which
+ * the static rules of the component read in each container query. Unset breakpoints fall back to
+ * smaller ones in CSS.
+ */
+export declare function responsiveVariables<T>(component: string, prop: string, value: Responsive<T> | undefined, toCss: (value: T) => string): Record<string, string>;
+/** Merges inline variables with the `style` prop, which wins. */
+export declare function withVariables(variables: Record<string, string>[], style: CSSProperties | undefined): CSSProperties | undefined;
+/** How the primitives distribute items along their axis: `between` is `space-between`. */
+export type Justification = 'start' | 'center' | 'end' | 'between';
+/** The CSS value of a justification. */
+export declare function justification(value: Justification): string;
+//# sourceMappingURL=responsive.d.ts.map

package/dist/layout/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/layout/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AAEH,8CAA8C;AAC9C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAExE,+EAA+E;AAC/E,MAAM,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAEvD,kDAAkD;AAClD,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC;AAQD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EACjC,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,EAChC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAC5B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAexB;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EACnC,KAAK,EAAE,aAAa,GAAG,SAAS,GACjC,aAAa,GAAG,SAAS,CAG3B;AAED,0FAA0F;AAC1F,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE,wCAAwC;AACxC,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAE1D"}

package/dist/layout/responsive.js

@@ -0,0 +1,49 @@
+//#region src/layout/responsive.ts
+/**
+* Breakpoints of the layout primitives, like Bootstrap's `$grid-breakpoints`: the minimum width of
+* the nearest container at which a responsive value applies. They are constants, since CSS
+* variables can't be used in queries; the stylesheets of the primitives use the same values.
+*/
+var BREAKPOINTS = Object.freeze({
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem",
+	xl: "80rem"
+});
+/** The CSS value of a step of the space scale. */
+function space(step) {
+	return step === 0 ? "0" : `var(--panneau-space-${step})`;
+}
+var KEYS = ["base", ...Object.keys(BREAKPOINTS)];
+function isByBreakpoint(value) {
+	return typeof value === "object" && value !== null;
+}
+/**
+* The inline variables of a responsive prop, `--_panneau-<component>-<prop>-<breakpoint>`, which
+* the static rules of the component read in each container query. Unset breakpoints fall back to
+* smaller ones in CSS.
+*/
+function responsiveVariables(component, prop, value, toCss) {
+	if (value === void 0) return {};
+	const values = isByBreakpoint(value) ? value : { base: value };
+	return Object.fromEntries(KEYS.flatMap((key) => {
+		const item = values[key];
+		return item !== void 0 ? [[`--_panneau-${component}-${prop}-${key}`, toCss(item)]] : [];
+	}));
+}
+/** Merges inline variables with the `style` prop, which wins. */
+function withVariables(variables, style) {
+	const merged = Object.assign({}, ...variables);
+	return Object.keys(merged).length > 0 ? {
+		...merged,
+		...style
+	} : style;
+}
+/** The CSS value of a justification. */
+function justification(value) {
+	return value === "between" ? "space-between" : value;
+}
+//#endregion
+export { BREAKPOINTS, justification, responsiveVariables, space, withVariables };
+
+//# sourceMappingURL=responsive.js.map

package/dist/layout/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","names":[],"sources":["../../src/layout/responsive.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/**\n * Breakpoints of the layout primitives, like Bootstrap's `$grid-breakpoints`: the minimum width of\n * the nearest container at which a responsive value applies. They are constants, since CSS\n * variables can't be used in queries; the stylesheets of the primitives use the same values.\n */\nexport const BREAKPOINTS = Object.freeze({\n    sm: '40rem',\n    md: '48rem',\n    lg: '64rem',\n    xl: '80rem',\n});\n\n/** A breakpoint: `sm`, `md`, `lg` or `xl`. */\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * A value, or values by breakpoint: `{ base: 1, md: 2, lg: 3 }`. Each value applies from its\n * breakpoint up, until a larger one sets another. Breakpoints are widths of the nearest container\n * (`PanneauRoot`, `Container`, a form, a list), not of the viewport, so that a grid in a narrow\n * sidebar behaves as on a phone.\n */\nexport type Responsive<T> = T | Partial<Record<'base' | Breakpoint, T>>;\n\n/** A step of the space scale of the theme (`--panneau-space-<step>`), or 0. */\nexport type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10;\n\n/** The CSS value of a step of the space scale. */\nexport function space(step: Space): string {\n    return step === 0 ? '0' : `var(--panneau-space-${step})`;\n}\n\nconst KEYS = ['base', ...(Object.keys(BREAKPOINTS) as Breakpoint[])] as const;\n\nfunction isByBreakpoint<T>(value: Responsive<T>): value is Partial<Record<'base' | Breakpoint, T>> {\n    return typeof value === 'object' && value !== null;\n}\n\n/**\n * The inline variables of a responsive prop, `--_panneau-<component>-<prop>-<breakpoint>`, which\n * the static rules of the component read in each container query. Unset breakpoints fall back to\n * smaller ones in CSS.\n */\nexport function responsiveVariables<T>(\n    component: string,\n    prop: string,\n    value: Responsive<T> | undefined,\n    toCss: (value: T) => string,\n): Record<string, string> {\n    if (value === undefined) {\n        return {};\n    }\n    const values: Partial<Record<'base' | Breakpoint, T>> = isByBreakpoint(value)\n        ? value\n        : { base: value };\n    return Object.fromEntries(\n        KEYS.flatMap((key) => {\n            const item = values[key];\n            return item !== undefined\n                ? [[`--_panneau-${component}-${prop}-${key}`, toCss(item)]]\n                : [];\n        }),\n    );\n}\n\n/** Merges inline variables with the `style` prop, which wins. */\nexport function withVariables(\n    variables: Record<string, string>[],\n    style: CSSProperties | undefined,\n): CSSProperties | undefined {\n    const merged = Object.assign({}, ...variables) as Record<string, string>;\n    return Object.keys(merged).length > 0 ? { ...merged, ...style } : style;\n}\n\n/** How the primitives distribute items along their axis: `between` is `space-between`. */\nexport type Justification = 'start' | 'center' | 'end' | 'between';\n\n/** The CSS value of a justification. */\nexport function justification(value: Justification): string {\n    return value === 'between' ? 'space-between' : value;\n}\n"],"mappings":";;;;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACR,CAAC;;AAiBD,SAAgB,MAAM,MAAqB;CACvC,OAAO,SAAS,IAAI,MAAM,uBAAuB,KAAI;AACzD;AAEA,IAAM,OAAO,CAAC,QAAQ,GAAI,OAAO,KAAK,WAAW,CAAkB;AAEnE,SAAS,eAAkB,OAAwE;CAC/F,OAAO,OAAO,UAAU,YAAY,UAAU;AAClD;;;;;;AAOA,SAAgB,oBACZ,WACA,MACA,OACA,OACsB;CACtB,IAAI,UAAU,KAAA,GACV,OAAO,CAAC;CAEZ,MAAM,SAAkD,eAAe,KAAK,IACtE,QACA,EAAE,MAAM,MAAM;CACpB,OAAO,OAAO,YACV,KAAK,SAAS,QAAQ;EAClB,MAAM,OAAO,OAAO;EACpB,OAAO,SAAS,KAAA,IACV,CAAC,CAAC,cAAc,UAAS,GAAI,KAAI,GAAI,OAAO,MAAM,IAAI,CAAC,CAAC,IACxD,CAAA;CACV,CAAC,CACL;AACJ;;AAGA,SAAgB,cACZ,WACA,OACyB;CACzB,MAAM,SAAS,OAAO,OAAO,CAAC,GAAG,GAAG,SAAS;CAC7C,OAAO,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,IAAI;EAAE,GAAG;EAAQ,GAAG;CAAM,IAAI;AACtE;;AAMA,SAAgB,cAAc,OAA8B;CACxD,OAAO,UAAU,YAAY,kBAAkB;AACnD"}

package/dist/menu/Menu.js

@@ -16,7 +16,7 @@ function Menu$1({ className, popoverClassName, placement = "bottom start", ...pr
 		className: popoverClassName,
 		children: /* @__PURE__ */ jsx(Menu, {
 			...props,
-			className: cx(ListBox_module_default.listBox, className)
+			className: cx("panneau-menu", ListBox_module_default.listBox, className)
 		})
 	});
 }
@@ -25,7 +25,7 @@ function MenuItem$1({ children, icon, description, isDanger = false, className,
 	return /* @__PURE__ */ jsxs(MenuItem, {
 		...props,
 		textValue: textValue ?? (typeof children === "string" ? children : void 0),
-		className: cx(ListBox_module_default.item, className),
+		className: cx("panneau-menu-item", ListBox_module_default.item, className),
 		"data-danger": isDanger || void 0,
 		children: [icon !== void 0 ? /* @__PURE__ */ jsx(Icon, { icon }) : null, /* @__PURE__ */ jsxs("span", {
 			className: ListBox_module_default.itemText,

package/dist/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","AriaMenu","styles","MenuItem","AriaMenuItem","_c"],"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    Separator,\n    Text,\n} from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport styles from '../select/ListBox.module.css';\nimport { cx } from '../utils/cx';\n\nexport interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {\n    className?: string;\n    popoverClassName?: string;\n    placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';\n}\n\n/**\n * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move\n * between items, and typing a letter jumps to an item.\n */\nexport function Menu<T extends object>({\n    className,\n    popoverClassName,\n    placement = 'bottom start',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <PopoverSurface placement={placement} className={popoverClassName}>\n            <AriaMenu {...props} className={cx(styles.listBox, className)} />\n        </PopoverSurface>\n    );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    icon?: IconComponent;\n    description?: string;\n    /** Styles the item as destructive. */\n    isDanger?: boolean;\n    className?: string;\n}\n\n/** An item of a `Menu`. */\nexport function MenuItem({\n    children,\n    icon,\n    description,\n    isDanger = false,\n    className,\n    textValue,\n    ...props\n}: MenuItemProps) {\n    return (\n        <AriaMenuItem\n            {...props}\n            textValue={textValue ?? (typeof children === 'string' ? children : undefined)}\n            className={cx(styles.item, className)}\n            data-danger={isDanger || undefined}\n        >\n            {icon !== undefined ? <Icon icon={icon} /> : null}\n            <span className={styles.itemText}>\n                <Text slot=\"label\" className={styles.itemLabel}>\n                    {children}\n                </Text>\n                {description !== undefined ? (\n                    <Text slot=\"description\" className={styles.itemDescription}>\n                        {description}\n                    </Text>\n                ) : null}\n            </span>\n        </AriaMenuItem>\n    );\n}\n\n/** A line between groups of menu items. */\nexport function MenuSeparator() {\n    return <Separator className={styles.separator} />;\n}\n\nexport { MenuTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;AAyBA,SAAgBA,OAAuB,EACnC,WACA,kBACA,YAAY,gBACZ,GAAG,SACU;CACb,OACI,oBAAC,gBAAD;EAA2B;EAAW,WAAW;EAC7C,UAAA,oBAACC,MAAD;GAAU,GAAI;GAAO,WAAW,GAAGC,uBAAO,SAAS,SAAS;EAAE,CAAA;CAClD,CAAA;AAExB;;AAYA,SAAgBC,WAAS,EACrB,UACA,MACA,aACA,WAAW,OACX,WACA,WACA,GAAG,SACW;CACd,OACI,qBAACC,UAAD;EACI,GAAI;EACJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,WAAW,GAAGF,uBAAO,MAAM,SAAS;EACpC,eAAa,YAAY,KAAA;EAJ7B,UAAA,CAMK,SAAS,KAAA,IAAY,oBAAC,MAAD,EAAY,KAAK,CAAA,IAAM,MAC7C,qBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAxB,UAAA,CACI,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAWA,uBAAO;IAChC;GACC,CAAA,GACL,gBAAgB,KAAA,IACb,oBAAC,MAAD;IAAM,MAAK;IAAc,WAAWA,uBAAO;IACtC,UAAA;GACC,CAAA,IACN,IACF;EACI,CAAA,CAAA;;AAEtB;;AAGA,SAAO,gBAAA;CAAA,MAAA,IAAAG,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACI,KAAA,oBAAC,WAAD,EAAsB,WAAAH,uBAAM,UAAU,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA1C;AAA0C"}
+{"version":3,"file":"Menu.js","names":["Menu","AriaMenu","styles","MenuItem","AriaMenuItem","_c"],"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    Separator,\n    Text,\n} from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport styles from '../select/ListBox.module.css';\nimport { cx } from '../utils/cx';\n\nexport interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {\n    className?: string;\n    popoverClassName?: string;\n    placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';\n}\n\n/**\n * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move\n * between items, and typing a letter jumps to an item.\n */\nexport function Menu<T extends object>({\n    className,\n    popoverClassName,\n    placement = 'bottom start',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <PopoverSurface placement={placement} className={popoverClassName}>\n            <AriaMenu {...props} className={cx('panneau-menu', styles.listBox, className)} />\n        </PopoverSurface>\n    );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    icon?: IconComponent;\n    description?: string;\n    /** Styles the item as destructive. */\n    isDanger?: boolean;\n    className?: string;\n}\n\n/** An item of a `Menu`. */\nexport function MenuItem({\n    children,\n    icon,\n    description,\n    isDanger = false,\n    className,\n    textValue,\n    ...props\n}: MenuItemProps) {\n    return (\n        <AriaMenuItem\n            {...props}\n            textValue={textValue ?? (typeof children === 'string' ? children : undefined)}\n            className={cx('panneau-menu-item', styles.item, className)}\n            data-danger={isDanger || undefined}\n        >\n            {icon !== undefined ? <Icon icon={icon} /> : null}\n            <span className={styles.itemText}>\n                <Text slot=\"label\" className={styles.itemLabel}>\n                    {children}\n                </Text>\n                {description !== undefined ? (\n                    <Text slot=\"description\" className={styles.itemDescription}>\n                        {description}\n                    </Text>\n                ) : null}\n            </span>\n        </AriaMenuItem>\n    );\n}\n\n/** A line between groups of menu items. */\nexport function MenuSeparator() {\n    return <Separator className={styles.separator} />;\n}\n\nexport { MenuTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;AAyBA,SAAgBA,OAAuB,EACnC,WACA,kBACA,YAAY,gBACZ,GAAG,SACU;CACb,OACI,oBAAC,gBAAD;EAA2B;EAAW,WAAW;EAC7C,UAAA,oBAACC,MAAD;GAAU,GAAI;GAAO,WAAW,GAAG,gBAAgBC,uBAAO,SAAS,SAAS;EAAE,CAAA;CAClE,CAAA;AAExB;;AAYA,SAAgBC,WAAS,EACrB,UACA,MACA,aACA,WAAW,OACX,WACA,WACA,GAAG,SACW;CACd,OACI,qBAACC,UAAD;EACI,GAAI;EACJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,WAAW,GAAG,qBAAqBF,uBAAO,MAAM,SAAS;EACzD,eAAa,YAAY,KAAA;EAJ7B,UAAA,CAMK,SAAS,KAAA,IAAY,oBAAC,MAAD,EAAY,KAAK,CAAA,IAAM,MAC7C,qBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAxB,UAAA,CACI,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAWA,uBAAO;IAChC;GACC,CAAA,GACL,gBAAgB,KAAA,IACb,oBAAC,MAAD;IAAM,MAAK;IAAc,WAAWA,uBAAO;IACtC,UAAA;GACC,CAAA,IACN,IACF;EACI,CAAA,CAAA;;AAEtB;;AAGA,SAAO,gBAAA;CAAA,MAAA,IAAAG,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACI,KAAA,oBAAC,WAAD,EAAsB,WAAAH,uBAAM,UAAU,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA1C;AAA0C"}

package/dist/named-icons/index.d.ts

@@ -0,0 +1,2 @@
+export { lucideIconLoader } from '../icon/lucideIconLoader';
+//# sourceMappingURL=index.d.ts.map

package/dist/named-icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/named-icons/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/named-icons/index.js

@@ -0,0 +1 @@
+export { lucideIconLoader } from "../icon/lucideIconLoader.js";

package/dist/number-input/NumberInput.css

@@ -1,25 +1,25 @@
-.panneau-control-4aptNi.panneau-control-4aptNi {
+.panneau-number-input-control.panneau-number-input-control {
     padding-inline-end: 0;
     overflow: hidden;
 }
 
-.panneau-input-qqs-MV {
-    font-variant-numeric: tabular-nums;
+.panneau-number-input-input {
+    font-variant-numeric: var(--panneau-font-numeric);
 }
 
-.panneau-steppers-JoTs6w {
+.panneau-number-input-steppers {
     display: flex;
     flex-direction: column;
     align-self: stretch;
     border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
 }
 
-.panneau-stepper-sAGR2f {
+.panneau-number-input-stepper {
     display: flex;
     flex: 1 1 0;
     align-items: center;
     justify-content: center;
-    width: 1.75rem;
+    width: var(--panneau-number-input-stepper-width, 1.75rem);
     padding: 0;
     color: var(--panneau-color-text-muted);
     cursor: pointer;
@@ -27,31 +27,31 @@
     border: 0;
 }
 
-.panneau-stepper-sAGR2f + .panneau-stepper-sAGR2f {
+.panneau-number-input-stepper + .panneau-number-input-stepper {
     border-top: var(--panneau-border-width) solid var(--panneau-color-border);
 }
 
-.panneau-stepper-sAGR2f[data-hovered] {
+.panneau-number-input-stepper[data-hovered] {
     color: var(--panneau-color-text);
     background-color: var(--panneau-color-hover);
 }
 
-.panneau-stepper-sAGR2f[data-pressed] {
+.panneau-number-input-stepper[data-pressed] {
     background-color: var(--panneau-color-pressed);
 }
 
-.panneau-stepper-sAGR2f[data-disabled] {
+.panneau-number-input-stepper[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
 /* Touch screens have their own keyboard for numbers: the steppers would be too small. */
 @media (pointer: coarse) {
-    .panneau-steppers-JoTs6w {
+    .panneau-number-input-steppers {
         display: none;
     }
 
-    .panneau-control-4aptNi.panneau-control-4aptNi {
+    .panneau-number-input-control.panneau-number-input-control {
         padding-inline-end: var(--panneau-space-3);
     }
 }

package/dist/number-input/NumberInput.js

@@ -25,7 +25,7 @@ function NumberInput({ label, description, errors = [], value, defaultValue, onC
 		isReadOnly,
 		isInvalid: invalid,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-number-input", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

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

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

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

@@ -1,9 +1,9 @@
 import "./NumberInput.css";
 //#region src/number-input/NumberInput.module.css
-var control = "panneau-control-4aptNi";
-var input = "panneau-input-qqs-MV";
-var steppers = "panneau-steppers-JoTs6w";
-var stepper = "panneau-stepper-sAGR2f";
+var control = "panneau-number-input-control";
+var input = "panneau-number-input-input";
+var steppers = "panneau-number-input-steppers";
+var stepper = "panneau-number-input-stepper";
 var NumberInput_module_default = {
 	control,
 	input,

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

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

package/dist/number-input/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of NumberInput. */
+export declare const numberInputTokens: import("..").ComponentTokens<"number-input", "panneau-number-input-stepper-width">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/number-input/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/number-input/tokens.ts"],"names":[],"mappings":"AAEA,6BAA6B;AAC7B,eAAO,MAAM,iBAAiB,oFAG5B,CAAC"}

package/dist/number-input/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/number-input/tokens.ts
+/** Tokens of NumberInput. */
+var numberInputTokens = defineComponentTokens("number-input", { 
+/** Width of the increment and decrement buttons. */
+"stepper-width": "1.75rem" });
+//#endregion
+export { numberInputTokens };
+
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/number-input/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of NumberInput. */\nexport const numberInputTokens = defineComponentTokens('number-input', {\n    /** Width of the increment and decrement buttons. */\n    'stepper-width': '1.75rem',\n});\n"],"mappings":";;;AAGA,IAAa,oBAAoB,sBAAsB,gBAAgB;;AAEnE,iBAAiB,UACrB,CAAC"}

package/dist/popover/Popover.css

@@ -1,30 +1,31 @@
-.panneau-popover-KacUIM {
+.panneau-popover {
     min-width: var(--trigger-width, 10rem);
     max-width: calc(100vw - 2 * var(--panneau-space-4));
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-raised);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-radius: var(--panneau-radius-lg);
-    box-shadow: var(--panneau-shadow-lg);
+    background-color: var(--panneau-popover-bg, var(--panneau-color-surface-raised));
+    border: var(--panneau-border-width) solid
+        var(--panneau-popover-border-color, var(--panneau-color-border));
+    border-radius: var(--panneau-popover-radius, var(--panneau-radius-lg));
+    box-shadow: var(--panneau-popover-shadow, var(--panneau-shadow-lg));
     outline: none;
     overflow: auto;
     z-index: var(--panneau-z-overlay);
 }
 
-.panneau-popover-KacUIM[data-entering] {
-    animation: panneau-pop-fB47s- var(--panneau-duration) ease-out;
+.panneau-popover[data-entering] {
+    animation: panneau-popover-pop var(--panneau-duration) ease-out;
 }
 
-.panneau-popover-KacUIM[data-exiting] {
-    animation: panneau-pop-fB47s- var(--panneau-duration) ease-in reverse;
+.panneau-popover[data-exiting] {
+    animation: panneau-popover-pop var(--panneau-duration) ease-in reverse;
 }
 
-.panneau-dialog-2cVt0D {
-    padding: var(--panneau-space-3);
+.panneau-popover-dialog {
+    padding: var(--panneau-popover-padding, var(--panneau-space-3));
     outline: none;
 }
 
-@keyframes panneau-pop-fB47s- {
+@keyframes panneau-popover-pop {
     from {
         opacity: 0;
         transform: scale(0.97);

package/dist/popover/Popover.js

@@ -14,7 +14,7 @@ function Popover$1({ children, "aria-label": ariaLabel, className, dialogClassNa
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
 		offset,
-		className: cx(Popover_module_default.popover, className),
+		className: cx("panneau-popover", Popover_module_default.popover, className),
 		UNSTABLE_portalContainer: container,
 		children: /* @__PURE__ */ jsx(Dialog, {
 			"aria-label": ariaLabel,
@@ -30,7 +30,7 @@ function PopoverSurface({ children, className, offset = 6, ...props }) {
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
 		offset,
-		className: cx(Popover_module_default.popover, className),
+		className: cx("panneau-popover", Popover_module_default.popover, className),
 		UNSTABLE_portalContainer: container,
 		children
 	});

package/dist/popover/Popover.js.map

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

package/dist/popover/Popover.module.js

@@ -1,8 +1,8 @@
 import "./Popover.css";
 //#region src/popover/Popover.module.css
-var popover = "panneau-popover-KacUIM";
-var pop = "panneau-pop-fB47s-";
-var dialog = "panneau-dialog-2cVt0D";
+var popover = "panneau-popover";
+var pop = "panneau-popover-pop";
+var dialog = "panneau-popover-dialog";
 var Popover_module_default = {
 	popover,
 	pop,

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

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

package/dist/popover/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Popover. */
+export declare const popoverTokens: import("..").ComponentTokens<"popover", "panneau-popover-radius" | "panneau-popover-padding" | "panneau-popover-bg" | "panneau-popover-border-color" | "panneau-popover-shadow">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/popover/tokens.ts"],"names":[],"mappings":"AAEA,yBAAyB;AACzB,eAAO,MAAM,aAAa,kLAWxB,CAAC"}

package/dist/popover/tokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/popover/tokens.ts
+/** Tokens of Popover. */
+var popoverTokens = defineComponentTokens("popover", {
+	/** Background. */
+	bg: "var(--panneau-color-surface-raised)",
+	/** Border color. */
+	"border-color": "var(--panneau-color-border)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-lg)",
+	/** Shadow. */
+	shadow: "var(--panneau-shadow-lg)",
+	/** Padding of the content. */
+	padding: "var(--panneau-space-3)"
+});
+//#endregion
+export { popoverTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/popover/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/popover/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Popover. */\nexport const popoverTokens = defineComponentTokens('popover', {\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Border color. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-lg)',\n    /** Padding of the content. */\n    padding: 'var(--panneau-space-3)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,WAAW;;CAE1D,IAAI;;CAEJ,gBAAgB;;CAEhB,QAAQ;;CAER,QAAQ;;CAER,SAAS;AACb,CAAC"}