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

package/dist/icon/namedIcons.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+//#region src/icon/namedIcons.tsx
+var entries = /* @__PURE__ */ new Map();
+var components = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var imports = null;
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function setEntry(name, entry) {
+	entries.set(name, entry);
+	listeners.forEach((listener) => listener());
+}
+/**
+* Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and
+* resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own
+* module, and so is the list of names: neither is in the bundle until a named icon is used.
+*/
+function loadNamedIcon(name) {
+	const entry = entries.get(name);
+	if (entry?.status === "loaded") return Promise.resolve(entry.icon);
+	if (entry?.status === "missing") return Promise.resolve(null);
+	if (entry === void 0) setEntry(name, { status: "loading" });
+	imports ??= import("lucide-react/dynamicIconImports.mjs").then((module) => module.default);
+	return imports.then((all) => {
+		const load = Object.hasOwn(all, name) ? all[name] : void 0;
+		return load !== void 0 ? load().then((module) => module.default) : null;
+	}).then((icon) => {
+		if (icon === null) {
+			console.warn(`[panneau] Lucide has no icon named "${name}".`);
+			setEntry(name, { status: "missing" });
+		} else setEntry(name, {
+			status: "loaded",
+			icon
+		});
+		return icon;
+	}, (error) => {
+		entries.delete(name);
+		imports = null;
+		throw error;
+	});
+}
+/**
+* An icon component for a Lucide icon name, as definitions name them (`"icon": "send"`). It goes
+* wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same
+* component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),
+* and renders an empty space of the same size until then. A name Lucide doesn't have renders
+* nothing.
+*/
+function getNamedIcon(name) {
+	const existing = components.get(name);
+	if (existing !== void 0) return existing;
+	const NamedIcon = ({ size = 24, className, ...props }) => {
+		const entry = useSyncExternalStore(subscribe, () => entries.get(name), () => entries.get(name));
+		useEffect(() => {
+			if (entries.get(name) === void 0) loadNamedIcon(name).catch(() => void 0);
+		}, []);
+		if (entry?.status === "loaded") {
+			const Loaded = entry.icon;
+			return /* @__PURE__ */ jsx(Loaded, {
+				size,
+				className,
+				...props
+			});
+		}
+		if (entry?.status === "missing") return null;
+		const { "aria-hidden": hidden, "aria-label": label, role } = props;
+		return /* @__PURE__ */ jsx("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			className,
+			"aria-hidden": hidden,
+			"aria-label": label,
+			role,
+			"data-loading": ""
+		});
+	};
+	NamedIcon.displayName = `NamedIcon(${name})`;
+	components.set(name, NamedIcon);
+	return NamedIcon;
+}
+//#endregion
+export { getNamedIcon, loadNamedIcon };
+
+//# sourceMappingURL=namedIcons.js.map

package/dist/icon/namedIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namedIcons.js","names":[],"sources":["../../src/icon/namedIcons.tsx"],"sourcesContent":["import { useEffect, useSyncExternalStore } from 'react';\n\nimport type { IconComponent } from './Icon';\n\ntype IconImports = Readonly<Record<string, () => Promise<{ default: IconComponent }>>>;\n\ntype Entry =\n    { status: 'loading' } | { status: 'loaded'; icon: IconComponent } | { status: 'missing' };\n\nconst entries = new Map<string, Entry>();\nconst components = new Map<string, IconComponent>();\nconst listeners = new Set<() => void>();\nlet imports: Promise<IconImports> | null = null;\n\nfunction subscribe(listener: () => void): () => void {\n    listeners.add(listener);\n    return () => {\n        listeners.delete(listener);\n    };\n}\n\nfunction setEntry(name: string, entry: Entry) {\n    entries.set(name, entry);\n    listeners.forEach((listener) => listener());\n}\n\n/**\n * Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and\n * resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own\n * module, and so is the list of names: neither is in the bundle until a named icon is used.\n */\nexport function loadNamedIcon(name: string): Promise<IconComponent | null> {\n    const entry = entries.get(name);\n    if (entry?.status === 'loaded') {\n        return Promise.resolve(entry.icon);\n    }\n    if (entry?.status === 'missing') {\n        return Promise.resolve(null);\n    }\n    if (entry === undefined) {\n        setEntry(name, { status: 'loading' });\n    }\n    imports ??= import('lucide-react/dynamicIconImports.mjs').then(\n        (module) => module.default as unknown as IconImports,\n    );\n    return imports\n        .then((all) => {\n            const load = Object.hasOwn(all, name) ? all[name] : undefined;\n            return load !== undefined ? load().then((module) => module.default) : null;\n        })\n        .then(\n            (icon) => {\n                if (icon === null) {\n                    console.warn(`[panneau] Lucide has no icon named \"${name}\".`);\n                    setEntry(name, { status: 'missing' });\n                } else {\n                    setEntry(name, { status: 'loaded', icon });\n                }\n                return icon;\n            },\n            (error: unknown) => {\n                // A chunk that failed to load (offline): the icon is loaded again when it mounts.\n                entries.delete(name);\n                imports = null;\n                throw error;\n            },\n        );\n}\n\n/**\n * An icon component for a Lucide icon name, as definitions name them (`\"icon\": \"send\"`). It goes\n * wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same\n * component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),\n * and renders an empty space of the same size until then. A name Lucide doesn't have renders\n * nothing.\n */\nexport function getNamedIcon(name: string): IconComponent {\n    const existing = components.get(name);\n    if (existing !== undefined) {\n        return existing;\n    }\n    const NamedIcon: IconComponent = ({ size = 24, className, ...props }) => {\n        const entry = useSyncExternalStore(\n            subscribe,\n            () => entries.get(name),\n            () => entries.get(name),\n        );\n        useEffect(() => {\n            if (entries.get(name) === undefined) {\n                loadNamedIcon(name).catch(() => undefined);\n            }\n        }, []);\n        if (entry?.status === 'loaded') {\n            const Loaded = entry.icon;\n            return <Loaded size={size} className={className} {...props} />;\n        }\n        if (entry?.status === 'missing') {\n            return null;\n        }\n        const { 'aria-hidden': hidden, 'aria-label': label, role } = props;\n        return (\n            <svg\n                width={size}\n                height={size}\n                viewBox=\"0 0 24 24\"\n                className={className}\n                aria-hidden={hidden}\n                aria-label={label}\n                role={role}\n                data-loading=\"\"\n            />\n        );\n    };\n    NamedIcon.displayName = `NamedIcon(${name})`;\n    components.set(name, NamedIcon);\n    return NamedIcon;\n}\n"],"mappings":";;;AASA,IAAM,0BAAU,IAAI,IAAmB;AACvC,IAAM,6BAAa,IAAI,IAA2B;AAClD,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI,UAAuC;AAE3C,SAAS,UAAU,UAAkC;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa;EACT,UAAU,OAAO,QAAQ;CAC7B;AACJ;AAEA,SAAS,SAAS,MAAc,OAAc;CAC1C,QAAQ,IAAI,MAAM,KAAK;CACvB,UAAU,SAAS,aAAa,SAAS,CAAC;AAC9C;;;;;;AAOA,SAAgB,cAAc,MAA6C;CACvE,MAAM,QAAQ,QAAQ,IAAI,IAAI;CAC9B,IAAI,OAAO,WAAW,UAClB,OAAO,QAAQ,QAAQ,MAAM,IAAI;CAErC,IAAI,OAAO,WAAW,WAClB,OAAO,QAAQ,QAAQ,IAAI;CAE/B,IAAI,UAAU,KAAA,GACV,SAAS,MAAM,EAAE,QAAQ,UAAU,CAAC;CAExC,YAAY,OAAO,sCAAsC,CAAC,MACrD,WAAW,OAAO,OACvB;CACA,OAAO,QACF,MAAM,QAAQ;EACX,MAAM,OAAO,OAAO,OAAO,KAAK,IAAI,IAAI,IAAI,QAAQ,KAAA;EACpD,OAAO,SAAS,KAAA,IAAY,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,OAAO,IAAI;CAC1E,CAAC,CAAC,CACD,MACI,SAAS;EACN,IAAI,SAAS,MAAM;GACf,QAAQ,KAAK,uCAAuC,KAAI,GAAI;GAC5D,SAAS,MAAM,EAAE,QAAQ,UAAU,CAAC;EACxC,OACI,SAAS,MAAM;GAAE,QAAQ;GAAU;EAAK,CAAC;EAE7C,OAAO;CACX,IACC,UAAmB;EAEhB,QAAQ,OAAO,IAAI;EACnB,UAAU;EACV,MAAM;CACV,CACJ;AACR;;;;;;;;AASA,SAAgB,aAAa,MAA6B;CACtD,MAAM,WAAW,WAAW,IAAI,IAAI;CACpC,IAAI,aAAa,KAAA,GACb,OAAO;CAEX,MAAM,aAA4B,EAAE,OAAO,IAAI,WAAW,GAAG,YAAY;EACrE,MAAM,QAAQ,qBACV,iBACM,QAAQ,IAAI,IAAI,SAChB,QAAQ,IAAI,IAAI,CAC1B;EACA,gBAAgB;GACZ,IAAI,QAAQ,IAAI,IAAI,MAAM,KAAA,GACtB,cAAc,IAAI,CAAC,CAAC,YAAY,KAAA,CAAS;EAEjD,GAAG,CAAA,CAAE;EACL,IAAI,OAAO,WAAW,UAAU;GAC5B,MAAM,SAAS,MAAM;GACrB,OAAO,oBAAC,QAAD;IAAc;IAAiB;IAAW,GAAI;GAAM,CAAA;EAC/D;EACA,IAAI,OAAO,WAAW,WAClB,OAAO;EAEX,MAAM,EAAE,eAAe,QAAQ,cAAc,OAAO,SAAS;EAC7D,OACI,oBAAC,OAAD;GACI,OAAO;GACP,QAAQ;GACR,SAAQ;GACG;GACX,eAAa;GACb,cAAY;GACN;GACN,gBAAa;EAAE,CAAA;CAG3B;CACA,UAAU,cAAc,aAAa,KAAI;CACzC,WAAW,IAAI,MAAM,SAAS;CAC9B,OAAO;AACX"}

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":""}

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+export { Alert, type AlertProps, type AlertTone } from './alert/Alert';
+export { Badge, type BadgeProps, type BadgeTone } from './badge/Badge';
+export { Button, type ButtonProps, type ButtonVariant } from './button/Button';
+export { Card, type CardProps } from './card/Card';
+export { Checkbox, type CheckboxProps } from './checkbox/Checkbox';
+export { type ChoiceChromeProps } from './checkbox/ChoiceChrome';
+export { ComboBox, type ComboBoxItem, type ComboBoxProps } from './combo-box/ComboBox';
+export { DatePicker, type DatePickerProps } from './date-picker/DatePicker';
+export { Dialog, type DialogProps, DialogTrigger } from './dialog/Dialog';
+export { Disclosure, type DisclosureProps } from './disclosure/Disclosure';
+export { type FieldChromeProps } from './field/FieldParts';
+export { Fieldset, type FieldsetProps } from './field/Fieldset';
+export { Icon, type IconComponent, type IconProps, type IconSize } from './icon/Icon';
+export { getNamedIcon, loadNamedIcon } from './icon/namedIcons';
+export { IconButton, type IconButtonProps } from './icon-button/IconButton';
+export { usePanneauIntl } from './intl/usePanneauIntl';
+export { Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, } from './menu/Menu';
+export { NumberInput, type NumberInputProps } from './number-input/NumberInput';
+export { Popover, type PopoverProps, PopoverTrigger } from './popover/Popover';
+export { RadioGroup, type RadioGroupProps } from './radio-group/RadioGroup';
+export { PanneauRoot, type PanneauRootProps, usePortalContainer } from './root/PanneauRoot';
+export { type MultipleSelectProps, type OptionValue, Select, type SelectBaseProps, type SelectOption, type SelectProps, type SingleSelectProps, } from './select/Select';
+export { Spinner, type SpinnerProps } from './spinner/Spinner';
+export { Switch, type SwitchProps } from './switch/Switch';
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, } from './tabs/Tabs';
+export { TextArea, type TextAreaProps } from './text-area/TextArea';
+export { TextInput, type TextInputProps } from './text-input/TextInput';
+export { bootstrapTheme } from './theme/bootstrap';
+export { type ColorScheme, type Theme } from './theme/theme';
+export { TimeInput, type TimeInputProps } from './time-input/TimeInput';
+export { type ToastContent, type ToastOptions, type ToastTone, type Toasts, useToast, } from './toast/Toast';
+export { Tooltip, type TooltipProps } from './tooltip/Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,30 @@
+import { Icon } from "./icon/Icon.js";
+import { usePanneauIntl } from "./intl/usePanneauIntl.js";
+import { Spinner } from "./spinner/Spinner.js";
+import { Button } from "./button/Button.js";
+import { useToast } from "./toast/Toast.js";
+import { PanneauRoot, usePortalContainer } from "./root/PanneauRoot.js";
+import { Tooltip } from "./tooltip/Tooltip.js";
+import { IconButton } from "./icon-button/IconButton.js";
+import { Alert } from "./alert/Alert.js";
+import { Badge } from "./badge/Badge.js";
+import { Card } from "./card/Card.js";
+import { Checkbox } from "./checkbox/Checkbox.js";
+import { Popover, PopoverTrigger } from "./popover/Popover.js";
+import { ComboBox } from "./combo-box/ComboBox.js";
+import { DatePicker } from "./date-picker/DatePicker.js";
+import { Dialog, DialogTrigger } from "./dialog/Dialog.js";
+import { Disclosure } from "./disclosure/Disclosure.js";
+import { Fieldset } from "./field/Fieldset.js";
+import { getNamedIcon, loadNamedIcon } from "./icon/namedIcons.js";
+import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "./menu/Menu.js";
+import { NumberInput } from "./number-input/NumberInput.js";
+import { RadioGroup } from "./radio-group/RadioGroup.js";
+import { Select } from "./select/Select.js";
+import { Switch } from "./switch/Switch.js";
+import { Tab, TabList, TabPanel, Tabs } from "./tabs/Tabs.js";
+import { TextArea } from "./text-area/TextArea.js";
+import { TextInput } from "./text-input/TextInput.js";
+import { bootstrapTheme } from "./theme/bootstrap.js";
+import { TimeInput } from "./time-input/TimeInput.js";
+export { Alert, Badge, Button, Card, Checkbox, ComboBox, DatePicker, Dialog, DialogTrigger, Disclosure, Fieldset, Icon, IconButton, Menu, MenuItem, MenuSeparator, MenuTrigger, NumberInput, PanneauRoot, Popover, PopoverTrigger, RadioGroup, Select, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextInput, TimeInput, Tooltip, bootstrapTheme, getNamedIcon, loadNamedIcon, usePanneauIntl, usePortalContainer, useToast };

package/dist/intl/messages.d.ts

@@ -0,0 +1,2 @@
+export { uiMessages as messages } from '@panneau/intl';
+//# sourceMappingURL=messages.d.ts.map

package/dist/intl/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/intl/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/intl/messages.js

@@ -0,0 +1 @@
+export { uiMessages as messages } from "@panneau/intl";

package/dist/intl/usePanneauIntl.d.ts

@@ -0,0 +1,7 @@
+import { type IntlShape } from 'react-intl';
+/**
+ * The react-intl object of the closest `IntlProvider`. Without a provider, an English one with the
+ * default messages, so that Panneau components also render outside of an internationalized app.
+ */
+export declare function usePanneauIntl(): IntlShape;
+//# sourceMappingURL=usePanneauIntl.d.ts.map

package/dist/intl/usePanneauIntl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanneauIntl.d.ts","sourceRoot":"","sources":["../../src/intl/usePanneauIntl.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,SAAS,EAA+B,MAAM,YAAY,CAAC;AAItF;;;GAGG;AACH,wBAAgB,cAAc,IAAI,SAAS,CAO1C"}

package/dist/intl/usePanneauIntl.js

@@ -0,0 +1,22 @@
+import { use } from "react";
+import { IntlContext, createIntl, createIntlCache } from "react-intl";
+//#region src/intl/usePanneauIntl.ts
+var fallback = null;
+/**
+* The react-intl object of the closest `IntlProvider`. Without a provider, an English one with the
+* default messages, so that Panneau components also render outside of an internationalized app.
+*/
+function usePanneauIntl() {
+	const intl = use(IntlContext);
+	if (intl !== null && intl !== void 0) return intl;
+	fallback ??= createIntl({
+		locale: "en",
+		defaultLocale: "en",
+		messages: {}
+	}, createIntlCache());
+	return fallback;
+}
+//#endregion
+export { usePanneauIntl };
+
+//# sourceMappingURL=usePanneauIntl.js.map

package/dist/intl/usePanneauIntl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanneauIntl.js","names":[],"sources":["../../src/intl/usePanneauIntl.ts"],"sourcesContent":["import { use } from 'react';\nimport { IntlContext, type IntlShape, createIntl, createIntlCache } from 'react-intl';\n\nlet fallback: IntlShape | null = null;\n\n/**\n * The react-intl object of the closest `IntlProvider`. Without a provider, an English one with the\n * default messages, so that Panneau components also render outside of an internationalized app.\n */\nexport function usePanneauIntl(): IntlShape {\n    const intl = use(IntlContext) as IntlShape | null | undefined;\n    if (intl !== null && intl !== undefined) {\n        return intl;\n    }\n    fallback ??= createIntl({ locale: 'en', defaultLocale: 'en', messages: {} }, createIntlCache());\n    return fallback;\n}\n"],"mappings":";;;AAGA,IAAI,WAA6B;;;;;AAMjC,SAAgB,iBAA4B;CACxC,MAAM,OAAO,IAAI,WAAW;CAC5B,IAAI,SAAS,QAAQ,SAAS,KAAA,GAC1B,OAAO;CAEX,aAAa,WAAW;EAAE,QAAQ;EAAM,eAAe;EAAM,UAAU,CAAC;CAAE,GAAG,gBAAgB,CAAC;CAC9F,OAAO;AACX"}

package/dist/locales/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The English messages of `@panneau/ui`, by id. They are also the default messages.
+ *
+ * @deprecated Use `en`, or `withPanneauMessages()`, from `@panneau/intl`: they have the messages
+ * of every package.
+ */
+export declare const en: Record<string, string>;
+/**
+ * The French messages of `@panneau/ui`, by id.
+ *
+ * @deprecated Use `fr`, or `withPanneauMessages()`, from `@panneau/intl`: they have the messages
+ * of every package.
+ */
+export declare const fr: Record<string, string>;
+//# sourceMappingURL=index.d.ts.map

package/dist/locales/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/locales/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAgC,CAAC;AAEvE;;;;;GAKG;AACH,eAAO,MAAM,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAErC,CAAC"}

package/dist/locales/index.js

@@ -0,0 +1,21 @@
+import { messages } from "../intl/messages.js";
+import { fr as fr$1, getDefaultMessages } from "@panneau/intl";
+//#region src/locales/index.ts
+/**
+* The English messages of `@panneau/ui`, by id. They are also the default messages.
+*
+* @deprecated Use `en`, or `withPanneauMessages()`, from `@panneau/intl`: they have the messages
+* of every package.
+*/
+var en = getDefaultMessages(messages);
+/**
+* The French messages of `@panneau/ui`, by id.
+*
+* @deprecated Use `fr`, or `withPanneauMessages()`, from `@panneau/intl`: they have the messages
+* of every package.
+*/
+var fr = Object.fromEntries(Object.entries(fr$1).filter(([id]) => id in en));
+//#endregion
+export { en, fr };
+
+//# sourceMappingURL=index.js.map

package/dist/locales/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["allFr"],"sources":["../../src/locales/index.ts"],"sourcesContent":["import { fr as allFr, getDefaultMessages } from '@panneau/intl';\n\nimport { messages } from '../intl/messages';\n\n/**\n * The English messages of `@panneau/ui`, by id. They are also the default messages.\n *\n * @deprecated Use `en`, or `withPanneauMessages()`, from `@panneau/intl`: they have the messages\n * of every package.\n */\nexport const en: Record<string, string> = getDefaultMessages(messages);\n\n/**\n * The French messages of `@panneau/ui`, by id.\n *\n * @deprecated Use `fr`, or `withPanneauMessages()`, from `@panneau/intl`: they have the messages\n * of every package.\n */\nexport const fr: Record<string, string> = Object.fromEntries(\n    Object.entries(allFr).filter(([id]) => id in en),\n);\n"],"mappings":";;;;;;;;;AAUA,IAAa,KAA6B,mBAAmB,QAAQ;;;;;;;AAQrE,IAAa,KAA6B,OAAO,YAC7C,OAAO,QAAQA,IAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,EAAE,CACnD"}

package/dist/menu/Menu.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps } from 'react-aria-components';
+import { type IconComponent } from '../icon/Icon';
+export interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {
+    className?: string;
+    popoverClassName?: string;
+    placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';
+}
+/**
+ * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move
+ * between items, and typing a letter jumps to an item.
+ */
+export declare function Menu<T extends object>({ className, popoverClassName, placement, ...props }: MenuProps<T>): import("react").JSX.Element;
+export interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {
+    children?: ReactNode;
+    icon?: IconComponent;
+    description?: string;
+    /** Styles the item as destructive. */
+    isDanger?: boolean;
+    className?: string;
+}
+/** An item of a `Menu`. */
+export declare function MenuItem({ children, icon, description, isDanger, className, textValue, ...props }: MenuItemProps): import("react").JSX.Element;
+/** A line between groups of menu items. */
+export declare function MenuSeparator(): import("react").JSX.Element;
+export { MenuTrigger } from 'react-aria-components';
+//# sourceMappingURL=Menu.d.ts.map

package/dist/menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAGH,KAAK,aAAa,IAAI,iBAAiB,EACvC,KAAK,SAAS,IAAI,aAAa,EAGlC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAKxD,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;CACvE;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACnC,SAAS,EACT,gBAAgB,EAChB,SAA0B,EAC1B,GAAG,KAAK,EACX,EAAE,SAAS,CAAC,CAAC,CAAC,+BAMd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,2BAA2B;AAC3B,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACX,EAAE,aAAa,+BAqBf;AAED,2CAA2C;AAC3C,wBAAgB,aAAa,gCAE5B;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/menu/Menu.js

@@ -0,0 +1,57 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import { PopoverSurface } from "../popover/Popover.js";
+import ListBox_module_default from "../select/ListBox.module.js";
+import { Menu, MenuItem, MenuTrigger, Separator, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+//#region src/menu/Menu.tsx
+/**
+* A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move
+* between items, and typing a letter jumps to an item.
+*/
+function Menu$1({ className, popoverClassName, placement = "bottom start", ...props }) {
+	return /* @__PURE__ */ jsx(PopoverSurface, {
+		placement,
+		className: popoverClassName,
+		children: /* @__PURE__ */ jsx(Menu, {
+			...props,
+			className: cx(ListBox_module_default.listBox, className)
+		})
+	});
+}
+/** An item of a `Menu`. */
+function MenuItem$1({ children, icon, description, isDanger = false, className, textValue, ...props }) {
+	return /* @__PURE__ */ jsxs(MenuItem, {
+		...props,
+		textValue: textValue ?? (typeof children === "string" ? children : void 0),
+		className: cx(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,
+			children: [/* @__PURE__ */ jsx(Text, {
+				slot: "label",
+				className: ListBox_module_default.itemLabel,
+				children
+			}), description !== void 0 ? /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				className: ListBox_module_default.itemDescription,
+				children: description
+			}) : null]
+		})]
+	});
+}
+/** A line between groups of menu items. */
+function MenuSeparator() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Separator, { className: ListBox_module_default.separator });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuSeparator, MenuTrigger };
+
+//# sourceMappingURL=Menu.js.map

package/dist/menu/Menu.js.map

@@ -0,0 +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"}

package/dist/number-input/NumberInput.css

@@ -0,0 +1,57 @@
+.panneau-control-4aptNi.panneau-control-4aptNi {
+    padding-inline-end: 0;
+    overflow: hidden;
+}
+
+.panneau-input-qqs-MV {
+    font-variant-numeric: tabular-nums;
+}
+
+.panneau-steppers-JoTs6w {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-stepper-sAGR2f {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    padding: 0;
+    color: var(--panneau-color-text-muted);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+}
+
+.panneau-stepper-sAGR2f + .panneau-stepper-sAGR2f {
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-stepper-sAGR2f[data-hovered] {
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-stepper-sAGR2f[data-pressed] {
+    background-color: var(--panneau-color-pressed);
+}
+
+.panneau-stepper-sAGR2f[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 {
+        display: none;
+    }
+
+    .panneau-control-4aptNi.panneau-control-4aptNi {
+        padding-inline-end: var(--panneau-space-3);
+    }
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { type NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+export interface NumberInputProps extends Omit<AriaNumberFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'value' | 'defaultValue' | 'onChange'>, FieldChromeProps {
+    /** The number, or `null` when empty. */
+    value?: number | null;
+    defaultValue?: number | null;
+    /** Called with the number, or `null` when the input is cleared. */
+    onChange?: (value: number | null) => void;
+    placeholder?: string;
+    /** Content after the number, inside the control: a unit. */
+    suffix?: ReactNode;
+    controlClassName?: string;
+    inputClassName?: string;
+}
+/**
+ * A number input, formatted for the locale, with steppers and arrow keys. An empty input is
+ * `null`, not `NaN`.
+ */
+export declare function NumberInput({ label, description, errors, value, defaultValue, onChange, placeholder, suffix, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, inputClassName, isRequired, isReadOnly, ...props }: NumberInputProps): import("react").JSX.Element;
+//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/number-input/NumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACH,KAAK,gBAAgB,IAAI,oBAAoB,EAKhD,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,WAAW,gBACb,SACI,IAAI,CACA,oBAAoB,EAClB,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,CACf,EACD,gBAAgB;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAMD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,gBAAgB,+BA4ClB"}

package/dist/number-input/NumberInput.js

@@ -0,0 +1,82 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import NumberInput_module_default from "./NumberInput.module.js";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Button, Group, Input, NumberField } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/number-input/NumberInput.tsx
+function toAria(value) {
+	return value === null ? NaN : value;
+}
+/**
+* A number input, formatted for the locale, with steppers and arrow keys. An empty input is
+* `null`, not `NaN`.
+*/
+function NumberInput({ label, description, errors = [], value, defaultValue, onChange, placeholder, suffix, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, inputClassName, isRequired, isReadOnly, ...props }) {
+	const invalid = errors.length > 0;
+	return /* @__PURE__ */ jsxs(NumberField, {
+		...props,
+		value: toAria(value),
+		defaultValue: toAria(defaultValue),
+		onChange: (next) => onChange?.(Number.isNaN(next) ? null : next),
+		isRequired,
+		isReadOnly,
+		isInvalid: invalid,
+		validationBehavior: "aria",
+		className: cx(Field_module_default.field, className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				isRequired,
+				className: labelClassName,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				className: cx(Field_module_default.control, NumberInput_module_default.control, controlClassName),
+				"data-invalid": invalid || void 0,
+				"data-readonly": isReadOnly || void 0,
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						placeholder,
+						className: cx(Field_module_default.bare, NumberInput_module_default.input, inputClassName)
+					}),
+					suffix !== void 0 ? /* @__PURE__ */ jsx("span", {
+						className: Field_module_default.adornment,
+						children: suffix
+					}) : null,
+					isReadOnly !== true ? /* @__PURE__ */ jsxs("span", {
+						className: NumberInput_module_default.steppers,
+						children: [/* @__PURE__ */ jsx(Button, {
+							slot: "increment",
+							className: NumberInput_module_default.stepper,
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: ChevronUp,
+								size: "xs"
+							})
+						}), /* @__PURE__ */ jsx(Button, {
+							slot: "decrement",
+							className: NumberInput_module_default.stepper,
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: ChevronDown,
+								size: "xs"
+							})
+						})]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				className: descriptionClassName,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, {
+				errors,
+				className: errorsClassName
+			})
+		]
+	});
+}
+//#endregion
+export { NumberInput };
+
+//# sourceMappingURL=NumberInput.js.map