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

package/dist/disclosure/Disclosure.js

@@ -0,0 +1,43 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import Disclosure_module_default from "./Disclosure.module.js";
+import { ChevronRight } from "lucide-react";
+import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/disclosure/Disclosure.tsx
+/** A section whose content can be collapsed under its title. */
+function Disclosure$1({ title, titleEnd, headingLevel = 3, children, className, triggerClassName, panelClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(Disclosure, {
+		...props,
+		className: cx(Disclosure_module_default.disclosure, className),
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: headingLevel,
+			className: Disclosure_module_default.heading,
+			children: /* @__PURE__ */ jsxs(Button, {
+				slot: "trigger",
+				className: cx(Disclosure_module_default.trigger, triggerClassName),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						icon: ChevronRight,
+						className: Disclosure_module_default.chevron
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: Disclosure_module_default.title,
+						children: title
+					}),
+					titleEnd !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", titleEnd] }) : null
+				]
+			})
+		}), /* @__PURE__ */ jsx(DisclosurePanel, {
+			className: cx(Disclosure_module_default.panel, panelClassName),
+			children: /* @__PURE__ */ jsx("div", {
+				className: Disclosure_module_default.panelContent,
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { Disclosure$1 as Disclosure };
+
+//# sourceMappingURL=Disclosure.js.map

package/dist/disclosure/Disclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disclosure.js","names":["Disclosure","AriaDisclosure","styles","_Fragment"],"sources":["../../src/disclosure/Disclosure.tsx"],"sourcesContent":["import { ChevronRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Disclosure as AriaDisclosure,\n    Button,\n    DisclosurePanel,\n    Heading,\n} from 'react-aria-components';\n\nimport { Icon } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './Disclosure.module.css';\n\nexport interface DisclosureProps {\n    /** Title of the button that expands and collapses the content. */\n    title: ReactNode;\n    /** Content after the title, in the button: a count of errors. */\n    titleEnd?: ReactNode;\n    /** Heading level of the title. Defaults to 3. */\n    headingLevel?: 2 | 3 | 4 | 5 | 6;\n    children?: ReactNode;\n    isExpanded?: boolean;\n    defaultExpanded?: boolean;\n    onExpandedChange?: (isExpanded: boolean) => void;\n    id?: string;\n    className?: string;\n    triggerClassName?: string;\n    panelClassName?: string;\n}\n\n/** A section whose content can be collapsed under its title. */\nexport function Disclosure({\n    title,\n    titleEnd,\n    headingLevel = 3,\n    children,\n    className,\n    triggerClassName,\n    panelClassName,\n    ...props\n}: DisclosureProps) {\n    return (\n        <AriaDisclosure {...props} className={cx(styles.disclosure, className)}>\n            <Heading level={headingLevel} className={styles.heading}>\n                <Button slot=\"trigger\" className={cx(styles.trigger, triggerClassName)}>\n                    <Icon icon={ChevronRight} className={styles.chevron} />\n                    <span className={styles.title}>{title}</span>\n                    {titleEnd !== undefined ? <> {titleEnd}</> : null}\n                </Button>\n            </Heading>\n            <DisclosurePanel className={cx(styles.panel, panelClassName)}>\n                <div className={styles.panelContent}>{children}</div>\n            </DisclosurePanel>\n        </AriaDisclosure>\n    );\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,aAAW,EACvB,OACA,UACA,eAAe,GACf,UACA,WACA,kBACA,gBACA,GAAG,SACa;CAChB,OACI,qBAACC,YAAD;EAAgB,GAAI;EAAO,WAAW,GAAGC,0BAAO,YAAY,SAAS;EAArE,UAAA,CACI,oBAAC,SAAD;GAAS,OAAO;GAAc,WAAWA,0BAAO;GAC5C,UAAA,qBAAC,QAAD;IAAQ,MAAK;IAAU,WAAW,GAAGA,0BAAO,SAAS,gBAAgB;IAArE,UAAA;KACI,oBAAC,MAAD;MAAM,MAAM;MAAc,WAAWA,0BAAO;KAAQ,CAAA;KACpD,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAQ,UAAA;KAAY,CAAA;KAC3C,aAAa,KAAA,IAAY,qBAAAC,UAAA,EAAA,UAAA,CAAE,KAAE,QAAS,EAAA,CAAA,IAAM;IACzC;;EACH,CAAA,GACT,oBAAC,iBAAD;GAAiB,WAAW,GAAGD,0BAAO,OAAO,cAAc;GACvD,UAAA,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAAe;GAAc,CAAA;EACvC,CAAA,CACL;;AAExB"}

package/dist/disclosure/Disclosure.module.js

@@ -0,0 +1,22 @@
+import "./Disclosure.css";
+//#region src/disclosure/Disclosure.module.css
+var disclosure = "panneau-disclosure-WME8SS";
+var trigger = "panneau-trigger-0Jo--Y";
+var chevron = "panneau-chevron-1tYsh0";
+var title = "panneau-title-DSKeDu";
+var panel = "panneau-panel-heR-bQ";
+var panelContent = "panneau-panelContent-FQV3Na";
+var heading = "panneau-heading-pnG2s2";
+var Disclosure_module_default = {
+	disclosure,
+	trigger,
+	chevron,
+	title,
+	panel,
+	panelContent,
+	heading
+};
+//#endregion
+export { chevron, Disclosure_module_default as default, disclosure, heading, panel, panelContent, title, trigger };
+
+//# sourceMappingURL=Disclosure.module.js.map

package/dist/disclosure/Disclosure.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disclosure.module.js","names":[],"sources":["../../src/disclosure/Disclosure.module.css"],"sourcesContent":[".disclosure {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    width: 100%;\n    min-height: var(--panneau-control-height);\n    padding: 0;\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-bold);\n    text-align: start;\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n}\n\n.trigger[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n    transition: transform var(--panneau-duration);\n}\n\n.disclosure[data-expanded] .chevron {\n    transform: rotate(90deg);\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.panel {\n    min-width: 0;\n}\n\n.panelContent {\n    padding-top: var(--panneau-space-3);\n}\n\n.heading {\n    margin: 0;\n    font: inherit;\n}\n"],"mappings":""}

package/dist/field/Field.css

@@ -0,0 +1,145 @@
+/* Shared look of labelled controls: label, description, errors and the control itself. */
+
+.panneau-field-llXva6 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    min-width: 0;
+}
+
+.panneau-label-Q70cID {
+    font-size: var(--panneau-font-size-md);
+    font-weight: var(--panneau-font-weight-medium);
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-color-text);
+    overflow-wrap: anywhere;
+}
+
+.panneau-required-qGQQMa {
+    margin-inline-start: 0.2em;
+    color: var(--panneau-color-danger);
+}
+
+.panneau-description-6IPisp {
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-errors-YFI9As {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-danger);
+}
+
+.panneau-error-UWz-28 {
+    display: block;
+}
+
+.panneau-control-eHvm-h {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--panneau-control-height);
+    padding: 0 var(--panneau-space-3);
+    font-size: var(--panneau-font-size-control);
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-md);
+    transition:
+        border-color var(--panneau-duration),
+        box-shadow var(--panneau-duration);
+}
+
+.panneau-control-eHvm-h::placeholder {
+    color: var(--panneau-color-text-muted);
+    opacity: 1;
+}
+
+.panneau-control-eHvm-h[data-hovered],
+.panneau-control-eHvm-h:hover {
+    border-color: var(--panneau-color-text-muted);
+}
+
+.panneau-control-eHvm-h[data-focused],
+.panneau-control-eHvm-h[data-focus-within],
+.panneau-control-eHvm-h[data-focus-visible],
+.panneau-control-eHvm-h:focus-within {
+    border-color: var(--panneau-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 1px var(--panneau-color-focus);
+}
+
+.panneau-control-eHvm-h[data-invalid] {
+    border-color: var(--panneau-color-danger);
+}
+
+.panneau-control-eHvm-h[data-invalid][data-focused],
+.panneau-control-eHvm-h[data-invalid][data-focus-within],
+.panneau-control-eHvm-h[data-invalid]:focus-within {
+    box-shadow: 0 0 0 1px var(--panneau-color-danger);
+}
+
+.panneau-control-eHvm-h[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--panneau-color-surface-sunken);
+}
+
+.panneau-control-eHvm-h[data-readonly],
+.panneau-control-eHvm-h[readonly] {
+    background-color: var(--panneau-color-surface-sunken);
+}
+
+/* An input inside a control (with adornments, segments or buttons): the control draws the box. */
+.panneau-bare-V21ZoZ {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    min-height: calc(var(--panneau-control-height) - 2 * var(--panneau-border-width));
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    outline: none;
+}
+
+.panneau-bare-V21ZoZ::placeholder {
+    color: var(--panneau-color-text-muted);
+    opacity: 1;
+}
+
+.panneau-adornment-A3klaS {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    color: var(--panneau-color-text-muted);
+    white-space: nowrap;
+}
+
+.panneau-adornment-A3klaS:first-child {
+    margin-inline-end: var(--panneau-space-2);
+}
+
+.panneau-adornment-A3klaS:last-child {
+    margin-inline-start: var(--panneau-space-2);
+}
+
+.panneau-fieldset-g-kI7H {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+    min-width: 0;
+}
+
+.panneau-legend-vlWMl- {
+    display: block;
+    width: 100%;
+    margin-bottom: var(--panneau-space-1);
+}

package/dist/field/Field.module.js

@@ -0,0 +1,30 @@
+import "./Field.css";
+//#region src/field/Field.module.css
+var field = "panneau-field-llXva6";
+var label = "panneau-label-Q70cID";
+var required = "panneau-required-qGQQMa";
+var description = "panneau-description-6IPisp";
+var errors = "panneau-errors-YFI9As";
+var error = "panneau-error-UWz-28";
+var control = "panneau-control-eHvm-h";
+var bare = "panneau-bare-V21ZoZ";
+var adornment = "panneau-adornment-A3klaS";
+var fieldset = "panneau-fieldset-g-kI7H";
+var legend = "panneau-legend-vlWMl-";
+var Field_module_default = {
+	field,
+	label,
+	required,
+	description,
+	errors,
+	error,
+	control,
+	bare,
+	adornment,
+	fieldset,
+	legend
+};
+//#endregion
+export { adornment, bare, control, Field_module_default as default, description, error, errors, field, fieldset, label, legend, required };
+
+//# sourceMappingURL=Field.module.js.map

package/dist/field/Field.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.module.js","names":[],"sources":["../../src/field/Field.module.css"],"sourcesContent":["/* Shared look of labelled controls: label, description, errors and the control itself. */\n\n.field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.label {\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-medium);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    overflow-wrap: anywhere;\n}\n\n.required {\n    margin-inline-start: 0.2em;\n    color: var(--panneau-color-danger);\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.errors {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-danger);\n}\n\n.error {\n    display: block;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-space-3);\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-md);\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.control::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.control[data-hovered],\n.control:hover {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.control[data-focused],\n.control[data-focus-within],\n.control[data-focus-visible],\n.control:focus-within {\n    border-color: var(--panneau-color-focus);\n    outline: none;\n    box-shadow: 0 0 0 1px var(--panneau-color-focus);\n}\n\n.control[data-invalid] {\n    border-color: var(--panneau-color-danger);\n}\n\n.control[data-invalid][data-focused],\n.control[data-invalid][data-focus-within],\n.control[data-invalid]:focus-within {\n    box-shadow: 0 0 0 1px var(--panneau-color-danger);\n}\n\n.control[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.control[data-readonly],\n.control[readonly] {\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* An input inside a control (with adornments, segments or buttons): the control draws the box. */\n.bare {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    min-height: calc(var(--panneau-control-height) - 2 * var(--panneau-border-width));\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    background: transparent;\n    border: 0;\n    outline: none;\n}\n\n.bare::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.adornment {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n}\n\n.adornment:first-child {\n    margin-inline-end: var(--panneau-space-2);\n}\n\n.adornment:last-child {\n    margin-inline-start: var(--panneau-space-2);\n}\n\n.fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.legend {\n    display: block;\n    width: 100%;\n    margin-bottom: var(--panneau-space-1);\n}\n"],"mappings":""}

package/dist/field/FieldParts.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import styles from './Field.module.css';
+/** Props that every labelled control of `@panneau/ui` accepts. */
+export interface FieldChromeProps {
+    /** Visible label. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Help text under the control. */
+    description?: ReactNode;
+    /** Error messages. Any message makes the control invalid. */
+    errors?: readonly string[];
+    /** Class name of the outer element. */
+    className?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorsClassName?: string;
+}
+export declare function FieldLabel({ children, isRequired, className, }: {
+    children?: ReactNode;
+    isRequired?: boolean;
+    className?: string | undefined;
+}): import("react").JSX.Element | null;
+export declare function FieldDescription({ children, className, }: {
+    children?: ReactNode;
+    className?: string | undefined;
+}): import("react").JSX.Element | null;
+/** Error messages of a React Aria field. They show when the field is invalid. */
+export declare function FieldErrors({ errors, className, }: {
+    errors?: readonly string[] | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element | null;
+export { styles as fieldStyles };
+//# sourceMappingURL=FieldParts.d.ts.map

package/dist/field/FieldParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldParts.d.ts","sourceRoot":"","sources":["../../src/field/FieldParts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,kEAAkE;AAClE,MAAM,WAAW,gBAAgB;IAC7B,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mCAAmC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAS,GACZ,EAAE;IACC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC,sCAcA;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC,sCASA;AAED,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EACxB,MAAW,EACX,SAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC,sCAeA;AAED,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,CAAC"}

package/dist/field/FieldParts.js

@@ -0,0 +1,56 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "./Field.module.js";
+import { FieldError, Label, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { c } from "react/compiler-runtime";
+//#region src/field/FieldParts.tsx
+function FieldLabel({ children, isRequired = false, className }) {
+	if (children === void 0 || children === null) return null;
+	return /* @__PURE__ */ jsxs(Label, {
+		className: cx(Field_module_default.label, className),
+		children: [children, isRequired ? /* @__PURE__ */ jsx("span", {
+			className: Field_module_default.required,
+			"aria-hidden": "true",
+			children: "*"
+		}) : null]
+	});
+}
+function FieldDescription(t0) {
+	const $ = c(5);
+	const { children, className } = t0;
+	if (children === void 0 || children === null) return null;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cx(Field_module_default.description, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Text, {
+			slot: "description",
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+/** Error messages of a React Aria field. They show when the field is invalid. */
+function FieldErrors({ errors = [], className }) {
+	if (errors.length === 0) return null;
+	return /* @__PURE__ */ jsx(FieldError, {
+		className: cx(Field_module_default.errors, className),
+		children: errors.map((error, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 ? " " : null, /* @__PURE__ */ jsx("span", {
+			className: Field_module_default.error,
+			children: error
+		})] }, index))
+	});
+}
+//#endregion
+export { FieldDescription, FieldErrors, FieldLabel, Field_module_default as fieldStyles };
+
+//# sourceMappingURL=FieldParts.js.map

package/dist/field/FieldParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldParts.js","names":["children","styles","_c","Fragment"],"sources":["../../src/field/FieldParts.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from 'react';\nimport { FieldError, Label, Text } from 'react-aria-components';\n\nimport { cx } from '../utils/cx';\nimport styles from './Field.module.css';\n\n/** Props that every labelled control of `@panneau/ui` accepts. */\nexport interface FieldChromeProps {\n    /** Visible label. Without one, pass `aria-label`. */\n    label?: ReactNode;\n    /** Help text under the control. */\n    description?: ReactNode;\n    /** Error messages. Any message makes the control invalid. */\n    errors?: readonly string[];\n    /** Class name of the outer element. */\n    className?: string;\n    labelClassName?: string;\n    descriptionClassName?: string;\n    errorsClassName?: string;\n}\n\nexport function FieldLabel({\n    children,\n    isRequired = false,\n    className,\n}: {\n    children?: ReactNode;\n    isRequired?: boolean;\n    className?: string | undefined;\n}) {\n    if (children === undefined || children === null) {\n        return null;\n    }\n    return (\n        <Label className={cx(styles.label, className)}>\n            {children}\n            {isRequired ? (\n                <span className={styles.required} aria-hidden=\"true\">\n                    *\n                </span>\n            ) : null}\n        </Label>\n    );\n}\n\nexport function FieldDescription({\n    children,\n    className,\n}: {\n    children?: ReactNode;\n    className?: string | undefined;\n}) {\n    if (children === undefined || children === null) {\n        return null;\n    }\n    return (\n        <Text slot=\"description\" className={cx(styles.description, className)}>\n            {children}\n        </Text>\n    );\n}\n\n/** Error messages of a React Aria field. They show when the field is invalid. */\nexport function FieldErrors({\n    errors = [],\n    className,\n}: {\n    errors?: readonly string[] | undefined;\n    className?: string | undefined;\n}) {\n    if (errors.length === 0) {\n        return null;\n    }\n    return (\n        <FieldError className={cx(styles.errors, className)}>\n            {errors.map((error, index) => (\n                <Fragment key={index}>\n                    {/* A space between messages, for assistive technologies. */}\n                    {index > 0 ? ' ' : null}\n                    <span className={styles.error}>{error}</span>\n                </Fragment>\n            ))}\n        </FieldError>\n    );\n}\n\nexport { styles as fieldStyles };\n"],"mappings":";;;;;;;AAqBA,SAAgB,WAAW,EACvB,UACA,aAAa,OACb,aAKD;CACC,IAAI,aAAa,KAAA,KAAa,aAAa,MACvC,OAAO;CAEX,OACI,qBAAC,OAAD;EAAO,WAAW,GAAGC,qBAAO,OAAO,SAAS;EAA5C,UAAA,CACK,UACA,aACG,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GAAU,eAAY;GAAM,UAAA;EAE9C,CAAA,IACN,IACD;;AAEf;AAEA,SAAO,iBAAA,IAAA;CAAA,MAAA,IAAAC,EAAA,CAAA;CAA0B,MAAA,EAAA,UAAA,cAAA;CAO7B,IAAI,aAAa,KAAA,KAAa,aAAa,MAAI,OACpC;CACV,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA;EAEuC,KAAA,GAAGD,qBAAM,aAAc,SAAS;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,IAAA;EAArE,KAAA,oBAAC,MAAD;GAAW,MAAA;GAAyB,WAAA;GAC/B;EADA,CAAA;EAEE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFP;AAEO;;AAKf,SAAgB,YAAY,EACxB,SAAS,CAAA,GACT,aAID;CACC,IAAI,OAAO,WAAW,GAClB,OAAO;CAEX,OACI,oBAAC,YAAD;EAAY,WAAW,GAAGA,qBAAO,QAAQ,SAAS;EAC7C,UAAA,OAAO,KAAK,OAAO,UAChB,qBAACE,YAAD,EAAA,UAAA,CAEK,QAAQ,IAAI,MAAM,MACnB,oBAAC,QAAD;GAAM,WAAWF,qBAAO;GAAQ,UAAA;EAAY,CAAA,CACtC,EAAA,GAJK,KAIL,CACb;CACO,CAAA;AAEpB"}

package/dist/field/Fieldset.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export interface FieldsetProps {
+    /** Title of the group of controls. */
+    legend?: ReactNode;
+    description?: ReactNode;
+    /** Errors of the group as a whole. */
+    errors?: readonly string[];
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    legendClassName?: string;
+    descriptionClassName?: string;
+    errorsClassName?: string;
+}
+/**
+ * Groups related controls under a legend, with a description and errors: for composite values
+ * (a group of fields, a list of blocks, a value per locale). The description and the errors
+ * describe the group for assistive technologies.
+ */
+export declare function Fieldset({ legend, description, errors, isRequired, isDisabled, children, className, legendClassName, descriptionClassName, errorsClassName, }: FieldsetProps): import("react").JSX.Element;
+//# sourceMappingURL=Fieldset.d.ts.map

package/dist/field/Fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/field/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAKxD,MAAM,WAAW,aAAa;IAC1B,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACrB,MAAM,EACN,WAAW,EACX,MAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,QAAQ,EACR,SAAS,EACT,eAAe,EACf,oBAAoB,EACpB,eAAe,GAClB,EAAE,aAAa,+BAyCf"}

package/dist/field/Fieldset.js

@@ -0,0 +1,50 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "./Field.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useId } from "react";
+//#region src/field/Fieldset.tsx
+/**
+* Groups related controls under a legend, with a description and errors: for composite values
+* (a group of fields, a list of blocks, a value per locale). The description and the errors
+* describe the group for assistive technologies.
+*/
+function Fieldset({ legend, description, errors = [], isRequired = false, isDisabled = false, children, className, legendClassName, descriptionClassName, errorsClassName }) {
+	const id = useId();
+	const descriptionId = description !== void 0 ? `${id}-description` : null;
+	const errorsId = errors.length > 0 ? `${id}-errors` : null;
+	const describedBy = [descriptionId, errorsId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: cx(Field_module_default.fieldset, className),
+		"aria-describedby": describedBy !== "" ? describedBy : void 0,
+		"aria-invalid": errors.length > 0 ? true : void 0,
+		disabled: isDisabled,
+		children: [
+			legend !== void 0 && legend !== null ? /* @__PURE__ */ jsxs("legend", {
+				className: cx(Field_module_default.legend, Field_module_default.label, legendClassName),
+				children: [legend, isRequired ? /* @__PURE__ */ jsx("span", {
+					className: Field_module_default.required,
+					"aria-hidden": "true",
+					children: "*"
+				}) : null]
+			}) : null,
+			descriptionId !== null ? /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: cx(Field_module_default.description, descriptionClassName),
+				children: description
+			}) : null,
+			children,
+			errorsId !== null ? /* @__PURE__ */ jsx("div", {
+				id: errorsId,
+				className: cx(Field_module_default.errors, errorsClassName),
+				children: errors.map((error, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 ? " " : null, /* @__PURE__ */ jsx("span", {
+					className: Field_module_default.error,
+					children: error
+				})] }, index))
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Fieldset };
+
+//# sourceMappingURL=Fieldset.js.map

package/dist/field/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","names":["styles","Fragment"],"sources":["../../src/field/Fieldset.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useId } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Field.module.css';\n\nexport interface FieldsetProps {\n    /** Title of the group of controls. */\n    legend?: ReactNode;\n    description?: ReactNode;\n    /** Errors of the group as a whole. */\n    errors?: readonly string[];\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    children?: ReactNode;\n    className?: string;\n    legendClassName?: string;\n    descriptionClassName?: string;\n    errorsClassName?: string;\n}\n\n/**\n * Groups related controls under a legend, with a description and errors: for composite values\n * (a group of fields, a list of blocks, a value per locale). The description and the errors\n * describe the group for assistive technologies.\n */\nexport function Fieldset({\n    legend,\n    description,\n    errors = [],\n    isRequired = false,\n    isDisabled = false,\n    children,\n    className,\n    legendClassName,\n    descriptionClassName,\n    errorsClassName,\n}: FieldsetProps) {\n    const id = useId();\n    const descriptionId = description !== undefined ? `${id}-description` : null;\n    const errorsId = errors.length > 0 ? `${id}-errors` : null;\n    const describedBy = [descriptionId, errorsId].filter(Boolean).join(' ');\n    return (\n        <fieldset\n            className={cx(styles.fieldset, className)}\n            aria-describedby={describedBy !== '' ? describedBy : undefined}\n            aria-invalid={errors.length > 0 ? true : undefined}\n            disabled={isDisabled}\n        >\n            {legend !== undefined && legend !== null ? (\n                <legend className={cx(styles.legend, styles.label, legendClassName)}>\n                    {legend}\n                    {isRequired ? (\n                        <span className={styles.required} aria-hidden=\"true\">\n                            *\n                        </span>\n                    ) : null}\n                </legend>\n            ) : null}\n            {descriptionId !== null ? (\n                <div id={descriptionId} className={cx(styles.description, descriptionClassName)}>\n                    {description}\n                </div>\n            ) : null}\n            {children}\n            {errorsId !== null ? (\n                <div id={errorsId} className={cx(styles.errors, errorsClassName)}>\n                    {errors.map((error, index) => (\n                        <Fragment key={index}>\n                            {/* A space between messages, for assistive technologies. */}\n                            {index > 0 ? ' ' : null}\n                            <span className={styles.error}>{error}</span>\n                        </Fragment>\n                    ))}\n                </div>\n            ) : null}\n        </fieldset>\n    );\n}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,SAAS,EACrB,QACA,aACA,SAAS,CAAA,GACT,aAAa,OACb,aAAa,OACb,UACA,WACA,iBACA,sBACA,mBACc;CACd,MAAM,KAAK,MAAM;CACjB,MAAM,gBAAgB,gBAAgB,KAAA,IAAY,GAAG,GAAE,gBAAiB;CACxE,MAAM,WAAW,OAAO,SAAS,IAAI,GAAG,GAAE,WAAY;CACtD,MAAM,cAAc,CAAC,eAAe,QAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACtE,OACI,qBAAC,YAAD;EACI,WAAW,GAAGA,qBAAO,UAAU,SAAS;EACxC,oBAAkB,gBAAgB,KAAK,cAAc,KAAA;EACrD,gBAAc,OAAO,SAAS,IAAI,OAAO,KAAA;EACzC,UAAU;EAJd,UAAA;GAMK,WAAW,KAAA,KAAa,WAAW,OAChC,qBAAC,UAAD;IAAQ,WAAW,GAAGA,qBAAO,QAAQA,qBAAO,OAAO,eAAe;IAAlE,UAAA,CACK,QACA,aACG,oBAAC,QAAD;KAAM,WAAWA,qBAAO;KAAU,eAAY;KAAM,UAAA;IAE9C,CAAA,IACN,IACA;GACR,CAAA,IAAA;GACH,kBAAkB,OACf,oBAAC,OAAD;IAAK,IAAI;IAAe,WAAW,GAAGA,qBAAO,aAAa,oBAAoB;IACzE,UAAA;GACA,CAAA,IACL;GACH;GACA,aAAa,OACV,oBAAC,OAAD;IAAK,IAAI;IAAU,WAAW,GAAGA,qBAAO,QAAQ,eAAe;IAC1D,UAAA,OAAO,KAAK,OAAO,UAChB,qBAACC,YAAD,EAAA,UAAA,CAEK,QAAQ,IAAI,MAAM,MACnB,oBAAC,QAAD;KAAM,WAAWD,qBAAO;KAAQ,UAAA;IAAY,CAAA,CACtC,EAAA,GAJK,KAIL,CACb;GACA,CAAA,IACL;EACE;;AAElB"}

package/dist/icon/Icon.css

@@ -0,0 +1,5 @@
+.panneau-icon-Y4DzXz {
+    display: inline-block;
+    flex: 0 0 auto;
+    vertical-align: middle;
+}

package/dist/icon/Icon.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentType } from 'react';
+/**
+ * An icon component: any Lucide icon (`import { Pencil } from 'lucide-react'`), or a component
+ * with the same props.
+ */
+export type IconComponent = ComponentType<{
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    className?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+    'aria-label'?: string;
+    role?: string;
+    focusable?: boolean | 'true' | 'false';
+}>;
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface IconProps {
+    /** The icon: a Lucide icon component. */
+    icon: IconComponent;
+    /** Defaults to `md` (16px). A number is in pixels. */
+    size?: IconSize | number;
+    /**
+     * Accessible label. Icons without a label are decorative and hidden from assistive
+     * technologies, which is right next to a text that says the same.
+     */
+    label?: string;
+    className?: string;
+}
+/** Renders an icon of the icon set (Lucide) at a size of the scale, decorative by default. */
+export declare function Icon({ icon: Component, size, label, className }: IconProps): import("react").JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAC1C,CAAC,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIxD,MAAM,WAAW,SAAS;IACtB,yCAAyC;IACzC,IAAI,EAAE,aAAa,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,8FAA8F;AAC9F,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAW,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,+BAcjF"}

package/dist/icon/Icon.js

@@ -0,0 +1,29 @@
+import { cx } from "../utils/cx.js";
+import Icon_module_default from "./Icon.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/icon/Icon.tsx
+var SIZES = {
+	xs: 12,
+	sm: 14,
+	md: 16,
+	lg: 20,
+	xl: 24
+};
+/** Renders an icon of the icon set (Lucide) at a size of the scale, decorative by default. */
+function Icon({ icon: Component, size = "md", label, className }) {
+	const pixels = typeof size === "number" ? size : SIZES[size];
+	return /* @__PURE__ */ jsx(Component, {
+		size: pixels,
+		strokeWidth: 2,
+		absoluteStrokeWidth: pixels < 16,
+		className: cx(Icon_module_default.icon, className),
+		"aria-hidden": label === void 0 ? "true" : void 0,
+		"aria-label": label,
+		role: label !== void 0 ? "img" : void 0,
+		focusable: "false"
+	});
+}
+//#endregion
+export { Icon };
+
+//# sourceMappingURL=Icon.js.map

package/dist/icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":["styles"],"sources":["../../src/icon/Icon.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Icon.module.css';\n\n/**\n * An icon component: any Lucide icon (`import { Pencil } from 'lucide-react'`), or a component\n * with the same props.\n */\nexport type IconComponent = ComponentType<{\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    className?: string;\n    'aria-hidden'?: boolean | 'true' | 'false';\n    'aria-label'?: string;\n    role?: string;\n    focusable?: boolean | 'true' | 'false';\n}>;\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst SIZES: Record<IconSize, number> = { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 };\n\nexport interface IconProps {\n    /** The icon: a Lucide icon component. */\n    icon: IconComponent;\n    /** Defaults to `md` (16px). A number is in pixels. */\n    size?: IconSize | number;\n    /**\n     * Accessible label. Icons without a label are decorative and hidden from assistive\n     * technologies, which is right next to a text that says the same.\n     */\n    label?: string;\n    className?: string;\n}\n\n/** Renders an icon of the icon set (Lucide) at a size of the scale, decorative by default. */\nexport function Icon({ icon: Component, size = 'md', label, className }: IconProps) {\n    const pixels = typeof size === 'number' ? size : SIZES[size];\n    return (\n        <Component\n            size={pixels}\n            strokeWidth={2}\n            absoluteStrokeWidth={pixels < 16}\n            className={cx(styles.icon, className)}\n            aria-hidden={label === undefined ? 'true' : undefined}\n            aria-label={label}\n            role={label !== undefined ? 'img' : undefined}\n            focusable=\"false\"\n        />\n    );\n}\n"],"mappings":";;;;AAsBA,IAAM,QAAkC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;;AAgBjF,SAAgB,KAAK,EAAE,MAAM,WAAW,OAAO,MAAM,OAAO,aAAwB;CAChF,MAAM,SAAS,OAAO,SAAS,WAAW,OAAO,MAAM;CACvD,OACI,oBAAC,WAAD;EACI,MAAM;EACN,aAAa;EACb,qBAAqB,SAAS;EAC9B,WAAW,GAAGA,oBAAO,MAAM,SAAS;EACpC,eAAa,UAAU,KAAA,IAAY,SAAS,KAAA;EAC5C,cAAY;EACZ,MAAM,UAAU,KAAA,IAAY,QAAQ,KAAA;EACpC,WAAU;CAAO,CAAA;AAG7B"}

package/dist/icon/Icon.module.js

@@ -0,0 +1,8 @@
+import "./Icon.css";
+//#region src/icon/Icon.module.css
+var icon = "panneau-icon-Y4DzXz";
+var Icon_module_default = { icon };
+//#endregion
+export { Icon_module_default as default, icon };
+
+//# sourceMappingURL=Icon.module.js.map

package/dist/icon/Icon.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.module.js","names":[],"sources":["../../src/icon/Icon.module.css"],"sourcesContent":[".icon {\n    display: inline-block;\n    flex: 0 0 auto;\n    vertical-align: middle;\n}\n"],"mappings":""}

package/dist/icon-button/IconButton.css

@@ -0,0 +1,9 @@
+/* Doubled classes: more specific than the button's own padding, whatever the CSS order. */
+.panneau-iconButton-eXWLoz.panneau-iconButton-eXWLoz {
+    width: var(--panneau-control-height);
+    padding: 0;
+}
+
+.panneau-iconButton-eXWLoz.panneau-sm-i6-bGf {
+    width: var(--panneau-control-height-sm);
+}

package/dist/icon-button/IconButton.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+import { type ButtonProps } from '../button/Button';
+import type { IconComponent } from '../icon/Icon';
+export interface IconButtonProps extends Omit<ButtonProps, 'icon' | 'iconEnd' | 'children' | 'fullWidth' | 'aria-label'> {
+    icon: IconComponent;
+    /** Accessible label, also shown as a tooltip. */
+    label: string;
+    /** Shows the label in a tooltip on hover and focus. Defaults to true. */
+    showTooltip?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A square button with only an icon. Its label is announced and shown as a tooltip. */
+export declare function IconButton({ icon, label, variant, size, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/icon-button/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAKlD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CACzC,WAAW,EACX,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAC/D;IACG,IAAI,EAAE,aAAa,CAAC;IACpB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,OAAiB,EACjB,IAAW,EACX,WAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,eAAe,+BAejB"}

package/dist/icon-button/IconButton.js

@@ -0,0 +1,26 @@
+import { cx } from "../utils/cx.js";
+import { Button } from "../button/Button.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import IconButton_module_default from "./IconButton.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/icon-button/IconButton.tsx
+/** A square button with only an icon. Its label is announced and shown as a tooltip. */
+function IconButton({ icon, label, variant = "ghost", size = "md", showTooltip = true, className, ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		...props,
+		variant,
+		size,
+		icon,
+		"aria-label": label,
+		className: cx(IconButton_module_default.iconButton, size === "sm" && IconButton_module_default.sm, className)
+	});
+	if (!showTooltip) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: button
+	});
+}
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":["styles"],"sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { Button, type ButtonProps } from '../button/Button';\nimport type { IconComponent } from '../icon/Icon';\nimport { Tooltip } from '../tooltip/Tooltip';\nimport { cx } from '../utils/cx';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<\n    ButtonProps,\n    'icon' | 'iconEnd' | 'children' | 'fullWidth' | 'aria-label'\n> {\n    icon: IconComponent;\n    /** Accessible label, also shown as a tooltip. */\n    label: string;\n    /** Shows the label in a tooltip on hover and focus. Defaults to true. */\n    showTooltip?: boolean;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/** A square button with only an icon. Its label is announced and shown as a tooltip. */\nexport function IconButton({\n    icon,\n    label,\n    variant = 'ghost',\n    size = 'md',\n    showTooltip = true,\n    className,\n    ...props\n}: IconButtonProps) {\n    const button = (\n        <Button\n            {...props}\n            variant={variant}\n            size={size}\n            icon={icon}\n            aria-label={label}\n            className={cx(styles.iconButton, size === 'sm' && styles.sm, className)}\n        />\n    );\n    if (!showTooltip) {\n        return button;\n    }\n    return <Tooltip content={label}>{button}</Tooltip>;\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,WAAW,EACvB,MACA,OACA,UAAU,SACV,OAAO,MACP,cAAc,MACd,WACA,GAAG,SACa;CAChB,MAAM,SACF,oBAAC,QAAD;EACI,GAAI;EACK;EACH;EACA;EACN,cAAY;EACZ,WAAW,GAAGA,0BAAO,YAAY,SAAS,QAAQA,0BAAO,IAAI,SAAS;CAAE,CAAA;CAGhF,IAAI,CAAC,aACD,OAAO;CAEX,OAAO,oBAAC,SAAD;EAAS,SAAS;EAAQ,UAAA;CAAgB,CAAA;AACrD"}

package/dist/icon-button/IconButton.module.js

@@ -0,0 +1,12 @@
+import "./IconButton.css";
+//#region src/icon-button/IconButton.module.css
+var iconButton = "panneau-iconButton-eXWLoz";
+var sm = "panneau-sm-i6-bGf";
+var IconButton_module_default = {
+	iconButton,
+	sm
+};
+//#endregion
+export { IconButton_module_default as default, iconButton, sm };
+
+//# sourceMappingURL=IconButton.module.js.map

package/dist/icon-button/IconButton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.module.js","names":[],"sources":["../../src/icon-button/IconButton.module.css"],"sourcesContent":["/* Doubled classes: more specific than the button's own padding, whatever the CSS order. */\n.iconButton.iconButton {\n    width: var(--panneau-control-height);\n    padding: 0;\n}\n\n.iconButton.sm {\n    width: var(--panneau-control-height-sm);\n}\n"],"mappings":""}