@panneau/ui 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/segmented-control/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of SegmentedControl. */
+export declare const segmentedControlTokens: import("..").ComponentTokens<"segmented-control", "panneau-segmented-control-radius" | "panneau-segmented-control-padding" | "panneau-segmented-control-bg" | "panneau-segmented-control-border-color" | "panneau-segmented-control-segment-padding-x" | "panneau-segmented-control-segment-font-weight" | "panneau-segmented-control-segment-color" | "panneau-segmented-control-segment-color-selected" | "panneau-segmented-control-segment-bg-selected" | "panneau-segmented-control-segment-shadow-selected">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/segmented-control/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/segmented-control/tokens.ts"],"names":[],"mappings":"AAEA,kCAAkC;AAClC,eAAO,MAAM,sBAAsB,ofAqBjC,CAAC"}

package/dist/segmented-control/tokens.js

@@ -0,0 +1,29 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/segmented-control/tokens.ts
+/** Tokens of SegmentedControl. */
+var segmentedControlTokens = defineComponentTokens("segmented-control", {
+	/** Background of the group, behind the segments. */
+	bg: "var(--panneau-color-surface-sunken)",
+	/** Color of the border around the group. */
+	"border-color": "var(--panneau-color-border)",
+	/** Corner radius of the group. */
+	radius: "var(--panneau-radius-md)",
+	/** Space between the group's border and its segments. */
+	padding: "2px",
+	/** Horizontal padding of a segment. */
+	"segment-padding-x": "var(--panneau-space-3)",
+	/** Font weight of a segment. */
+	"segment-font-weight": "var(--panneau-font-weight-medium)",
+	/** Text color of a segment. */
+	"segment-color": "var(--panneau-color-text-muted)",
+	/** Text color of the selected segment, and of a hovered one. */
+	"segment-color-selected": "var(--panneau-color-text)",
+	/** Background of the selected segment. */
+	"segment-bg-selected": "var(--panneau-color-surface-raised)",
+	/** Shadow of the selected segment. */
+	"segment-shadow-selected": "var(--panneau-shadow-sm)"
+});
+//#endregion
+export { segmentedControlTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/segmented-control/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/segmented-control/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of SegmentedControl. */\nexport const segmentedControlTokens = defineComponentTokens('segmented-control', {\n    /** Background of the group, behind the segments. */\n    bg: 'var(--panneau-color-surface-sunken)',\n    /** Color of the border around the group. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Corner radius of the group. */\n    radius: 'var(--panneau-radius-md)',\n    /** Space between the group's border and its segments. */\n    padding: '2px',\n    /** Horizontal padding of a segment. */\n    'segment-padding-x': 'var(--panneau-space-3)',\n    /** Font weight of a segment. */\n    'segment-font-weight': 'var(--panneau-font-weight-medium)',\n    /** Text color of a segment. */\n    'segment-color': 'var(--panneau-color-text-muted)',\n    /** Text color of the selected segment, and of a hovered one. */\n    'segment-color-selected': 'var(--panneau-color-text)',\n    /** Background of the selected segment. */\n    'segment-bg-selected': 'var(--panneau-color-surface-raised)',\n    /** Shadow of the selected segment. */\n    'segment-shadow-selected': 'var(--panneau-shadow-sm)',\n});\n"],"mappings":";;;AAGA,IAAa,yBAAyB,sBAAsB,qBAAqB;;CAE7E,IAAI;;CAEJ,gBAAgB;;CAEhB,QAAQ;;CAER,SAAS;;CAET,qBAAqB;;CAErB,uBAAuB;;CAEvB,iBAAiB;;CAEjB,0BAA0B;;CAE1B,uBAAuB;;CAEvB,2BAA2B;AAC/B,CAAC"}

package/dist/select/ListBox.css

@@ -47,15 +47,22 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
+    gap: 0.125rem;
     min-width: 0;
 }
 
+/* An option with a description has two lines: more room above and below them. */
+.panneau-list-box-item:has(.panneau-list-box-item-description) {
+    padding-block: var(--panneau-list-box-item-padding-y-described, var(--panneau-space-2));
+}
+
 .panneau-list-box-item-label {
     overflow-wrap: anywhere;
 }
 
 .panneau-list-box-item-description {
-    font-size: var(--panneau-font-size-sm);
+    font-size: var(--panneau-font-size-xs);
+    line-height: var(--panneau-line-height-tight);
     color: var(--panneau-color-text-muted);
 }
 
@@ -96,6 +103,21 @@
     white-space: nowrap;
 }
 
+/* The chosen option, in the trigger: its description follows its label on the same line. */
+.panneau-list-box-value .panneau-list-box-item-text {
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-list-box-value .panneau-list-box-item-label,
+.panneau-list-box-value .panneau-list-box-item-description {
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .panneau-list-box-value[data-placeholder] {
     color: var(--panneau-color-text-muted);
 }

package/dist/select/ListBox.module.js

@@ -3,8 +3,8 @@ import "./ListBox.css";
 var listBox = "panneau-list-box";
 var item = "panneau-list-box-item";
 var itemText = "panneau-list-box-item-text";
-var itemLabel = "panneau-list-box-item-label";
 var itemDescription = "panneau-list-box-item-description";
+var itemLabel = "panneau-list-box-item-label";
 var check = "panneau-list-box-check";
 var placeholder = "panneau-list-box-placeholder";
 var empty = "panneau-list-box-empty";
@@ -16,8 +16,8 @@ var ListBox_module_default = {
 	listBox,
 	item,
 	itemText,
-	itemLabel,
 	itemDescription,
+	itemLabel,
 	check,
 	placeholder,
 	empty,

package/dist/select/ListBox.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-list-box-padding, var(--panneau-space-1));\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-list-box-item-padding-y, calc(var(--panneau-row-padding-y) / 2))\n        var(--panneau-list-box-item-padding-x, var(--panneau-space-2));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-list-box-item-radius, var(--panneau-radius-sm));\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover));\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}
+{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-list-box-padding, var(--panneau-space-1));\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-list-box-item-padding-y, calc(var(--panneau-row-padding-y) / 2))\n        var(--panneau-list-box-item-padding-x, var(--panneau-space-2));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-list-box-item-radius, var(--panneau-radius-sm));\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover));\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: 0.125rem;\n    min-width: 0;\n}\n\n/* An option with a description has two lines: more room above and below them. */\n.item:has(.itemDescription) {\n    padding-block: var(--panneau-list-box-item-padding-y-described, var(--panneau-space-2));\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-xs);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* The chosen option, in the trigger: its description follows its label on the same line. */\n.value .itemText {\n    flex-direction: row;\n    align-items: baseline;\n    gap: var(--panneau-space-2);\n}\n\n.value .itemLabel,\n.value .itemDescription {\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}

package/dist/select/listBoxTokens.d.ts

@@ -1,3 +1,3 @@
 /** Tokens of the options of `Select`, `ComboBox` and `Menu`. */
-export declare const listBoxTokens: import("..").ComponentTokens<"list-box", "panneau-list-box-padding" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-radius" | "panneau-list-box-item-bg-hover">;
+export declare const listBoxTokens: import("..").ComponentTokens<"list-box", "panneau-list-box-padding" | "panneau-list-box-item-radius" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-y-described" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-bg-hover">;
 //# sourceMappingURL=listBoxTokens.d.ts.map

package/dist/select/listBoxTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listBoxTokens.d.ts","sourceRoot":"","sources":["../../src/select/listBoxTokens.ts"],"names":[],"mappings":"AAEA,gEAAgE;AAChE,eAAO,MAAM,aAAa,kNAWxB,CAAC"}
+{"version":3,"file":"listBoxTokens.d.ts","sourceRoot":"","sources":["../../src/select/listBoxTokens.ts"],"names":[],"mappings":"AAEA,gEAAgE;AAChE,eAAO,MAAM,aAAa,gQAaxB,CAAC"}

package/dist/select/listBoxTokens.js

@@ -6,6 +6,8 @@ var listBoxTokens = defineComponentTokens("list-box", {
 	padding: "var(--panneau-space-1)",
 	/** Vertical padding of an option. */
 	"item-padding-y": "calc(var(--panneau-row-padding-y) / 2)",
+	/** Vertical padding of an option with a description, on two lines. */
+	"item-padding-y-described": "var(--panneau-space-2)",
 	/** Horizontal padding of an option. */
 	"item-padding-x": "var(--panneau-space-2)",
 	/** Corner radius of an option. */

package/dist/select/listBoxTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"listBoxTokens.js","names":[],"sources":["../../src/select/listBoxTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */\nexport const listBoxTokens = defineComponentTokens('list-box', {\n    /** Padding around the options. */\n    padding: 'var(--panneau-space-1)',\n    /** Vertical padding of an option. */\n    'item-padding-y': 'calc(var(--panneau-row-padding-y) / 2)',\n    /** Horizontal padding of an option. */\n    'item-padding-x': 'var(--panneau-space-2)',\n    /** Corner radius of an option. */\n    'item-radius': 'var(--panneau-radius-sm)',\n    /** Background of a focused or hovered option. */\n    'item-bg-hover': 'var(--panneau-color-hover)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,YAAY;;CAE3D,SAAS;;CAET,kBAAkB;;CAElB,kBAAkB;;CAElB,eAAe;;CAEf,iBAAiB;AACrB,CAAC"}
+{"version":3,"file":"listBoxTokens.js","names":[],"sources":["../../src/select/listBoxTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */\nexport const listBoxTokens = defineComponentTokens('list-box', {\n    /** Padding around the options. */\n    padding: 'var(--panneau-space-1)',\n    /** Vertical padding of an option. */\n    'item-padding-y': 'calc(var(--panneau-row-padding-y) / 2)',\n    /** Vertical padding of an option with a description, on two lines. */\n    'item-padding-y-described': 'var(--panneau-space-2)',\n    /** Horizontal padding of an option. */\n    'item-padding-x': 'var(--panneau-space-2)',\n    /** Corner radius of an option. */\n    'item-radius': 'var(--panneau-radius-sm)',\n    /** Background of a focused or hovered option. */\n    'item-bg-hover': 'var(--panneau-color-hover)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,YAAY;;CAE3D,SAAS;;CAET,kBAAkB;;CAElB,4BAA4B;;CAE5B,kBAAkB;;CAElB,eAAe;;CAEf,iBAAiB;AACrB,CAAC"}

package/dist/slider/Slider.css

@@ -0,0 +1,84 @@
+/* A track with the part before the thumb filled, and the value next to the label. */
+
+.panneau-slider {
+    width: 100%;
+}
+
+.panneau-slider-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-slider-output {
+    font-size: var(--panneau-font-size-sm);
+    font-variant-numeric: var(--panneau-font-numeric);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-slider-track {
+    position: relative;
+    height: var(--panneau-control-height-sm);
+    cursor: pointer;
+}
+
+/* The rail, centered in the track. */
+.panneau-slider-track::before {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    height: 0.25rem;
+    content: '';
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-full);
+    transform: translateY(-50%);
+}
+
+.panneau-slider-fill {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 0.25rem;
+    background-color: var(--panneau-color-accent);
+    border-radius: var(--panneau-radius-full);
+    transform: translateY(-50%);
+}
+
+.panneau-slider-thumb {
+    top: 50%;
+    width: 1.125rem;
+    height: 1.125rem;
+    background-color: var(--panneau-color-surface);
+    border: 2px solid var(--panneau-color-accent);
+    border-radius: var(--panneau-radius-full);
+    box-shadow: var(--panneau-shadow-sm);
+    transform: translateY(-50%);
+}
+
+.panneau-slider[data-empty] .panneau-slider-thumb {
+    border-color: var(--panneau-color-border-control);
+}
+
+.panneau-slider-thumb[data-dragging] {
+    background-color: var(--panneau-color-accent);
+}
+
+.panneau-slider-thumb[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-slider[data-invalid] .panneau-slider-thumb {
+    border-color: var(--panneau-color-danger);
+}
+
+.panneau-slider[data-disabled] {
+    opacity: 0.6;
+}
+
+.panneau-slider[data-disabled] .panneau-slider-track {
+    cursor: not-allowed;
+}

package/dist/slider/Slider.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type SliderProps as AriaSliderProps } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+export interface SliderProps extends Omit<AriaSliderProps<number>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange'>, FieldChromeProps {
+    /** The number, or `null` until the slider is moved: the thumb then rests at the start. */
+    value?: number | null;
+    defaultValue?: number | null;
+    onChange?: (value: number) => void;
+    /** Content after the value: a unit. */
+    suffix?: ReactNode;
+    /** Name of the input, in a form. */
+    name?: string;
+    isRequired?: boolean;
+}
+/**
+ * A number between `minValue` and `maxValue` (0 and 100 by default), picked on a track by mouse,
+ * touch or arrow keys. Its value shows next to its label, formatted for the locale.
+ */
+export declare function Slider({ label, description, errors, value, defaultValue, onChange, suffix, name, isRequired, minValue, maxValue, className, labelClassName, descriptionClassName, errorsClassName, ...props }: SliderProps): import("react").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEH,KAAK,WAAW,IAAI,eAAe,EAItC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,gBAAgB,EAA2B,MAAM,qBAAqB,CAAC;AAIrF,MAAM,WAAW,WACb,SACI,IAAI,CACA,eAAe,CAAC,MAAM,CAAC,EACvB,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAC7E,EACD,gBAAgB;IACpB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,WAAW,EACX,MAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,UAAU,EACV,QAAY,EACZ,QAAc,EACd,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,+BAyEb"}

package/dist/slider/Slider.js

@@ -0,0 +1,70 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldLabel } from "../field/FieldParts.js";
+import Slider_module_default from "./Slider.module.js";
+import { Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/slider/Slider.tsx
+/**
+* A number between `minValue` and `maxValue` (0 and 100 by default), picked on a track by mouse,
+* touch or arrow keys. Its value shows next to its label, formatted for the locale.
+*/
+function Slider$1({ label, description, errors = [], value, defaultValue, onChange, suffix, name, isRequired, minValue = 0, maxValue = 100, className, labelClassName, descriptionClassName, errorsClassName, ...props }) {
+	const id = useId();
+	const invalid = errors.length > 0;
+	const describedBy = [description !== void 0 && description !== null ? `${id}-description` : null, invalid ? `${id}-errors` : null].filter((part) => part !== null).join(" ");
+	const empty = value === null || value === void 0 && defaultValue == null;
+	return /* @__PURE__ */ jsxs(Slider, {
+		...props,
+		minValue,
+		maxValue,
+		...value !== void 0 ? { value: value ?? minValue } : {},
+		...defaultValue !== void 0 ? { defaultValue: defaultValue ?? minValue } : {},
+		...onChange !== void 0 ? { onChange } : {},
+		className: cx("panneau-slider", Field_module_default.field, Slider_module_default.slider, className),
+		"data-invalid": invalid || void 0,
+		"data-empty": empty || void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: Slider_module_default.header,
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					isRequired,
+					className: labelClassName,
+					children: label
+				}), /* @__PURE__ */ jsx(SliderOutput, {
+					className: Slider_module_default.output,
+					children: ({ state }) => empty ? "—" : /* @__PURE__ */ jsxs(Fragment, { children: [state.getThumbValueLabel(0), suffix !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", suffix] }) : null] })
+				})]
+			}),
+			/* @__PURE__ */ jsx(SliderTrack, {
+				className: Slider_module_default.track,
+				children: ({ state: state_0 }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					className: Slider_module_default.fill,
+					style: { width: empty ? 0 : `${state_0.getThumbPercent(0) * 100}%` }
+				}), /* @__PURE__ */ jsx(SliderThumb, {
+					className: Slider_module_default.thumb,
+					...name !== void 0 ? { name } : {},
+					...describedBy !== "" ? { "aria-describedby": describedBy } : {}
+				})] })
+			}),
+			description !== void 0 && description !== null ? /* @__PURE__ */ jsx("div", {
+				id: `${id}-description`,
+				className: cx(Field_module_default.description, descriptionClassName),
+				children: description
+			}) : null,
+			invalid ? /* @__PURE__ */ jsx("div", {
+				id: `${id}-errors`,
+				className: cx(Field_module_default.errors, errorsClassName),
+				children: errors.map((error, index) => /* @__PURE__ */ jsx("span", {
+					className: Field_module_default.error,
+					children: error
+				}, index))
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Slider$1 as Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["state","Slider","AriaSlider","fieldStyles","styles","_Fragment"],"sources":["../../src/slider/Slider.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\nimport {\n    Slider as AriaSlider,\n    type SliderProps as AriaSliderProps,\n    SliderOutput,\n    SliderThumb,\n    SliderTrack,\n} from 'react-aria-components';\n\nimport { type FieldChromeProps, FieldLabel, fieldStyles } from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './Slider.module.css';\n\nexport interface SliderProps\n    extends\n        Omit<\n            AriaSliderProps<number>,\n            'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The number, or `null` until the slider is moved: the thumb then rests at the start. */\n    value?: number | null;\n    defaultValue?: number | null;\n    onChange?: (value: number) => void;\n    /** Content after the value: a unit. */\n    suffix?: ReactNode;\n    /** Name of the input, in a form. */\n    name?: string;\n    isRequired?: boolean;\n}\n\n/**\n * A number between `minValue` and `maxValue` (0 and 100 by default), picked on a track by mouse,\n * touch or arrow keys. Its value shows next to its label, formatted for the locale.\n */\nexport function Slider({\n    label,\n    description,\n    errors = [],\n    value,\n    defaultValue,\n    onChange,\n    suffix,\n    name,\n    isRequired,\n    minValue = 0,\n    maxValue = 100,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: SliderProps) {\n    const id = useId();\n    const invalid = errors.length > 0;\n    const describedBy = [\n        description !== undefined && description !== null ? `${id}-description` : null,\n        invalid ? `${id}-errors` : null,\n    ]\n        .filter((part) => part !== null)\n        .join(' ');\n    const empty = value === null || (value === undefined && defaultValue == null);\n    return (\n        <AriaSlider\n            {...props}\n            minValue={minValue}\n            maxValue={maxValue}\n            {...(value !== undefined ? { value: value ?? minValue } : {})}\n            {...(defaultValue !== undefined ? { defaultValue: defaultValue ?? minValue } : {})}\n            {...(onChange !== undefined ? { onChange } : {})}\n            className={cx('panneau-slider', fieldStyles.field, styles.slider, className)}\n            data-invalid={invalid || undefined}\n            data-empty={empty || undefined}\n        >\n            <div className={styles.header}>\n                <FieldLabel isRequired={isRequired} className={labelClassName}>\n                    {label}\n                </FieldLabel>\n                <SliderOutput className={styles.output}>\n                    {({ state }) =>\n                        empty ? (\n                            '—'\n                        ) : (\n                            <>\n                                {state.getThumbValueLabel(0)}\n                                {suffix !== undefined ? <> {suffix}</> : null}\n                            </>\n                        )\n                    }\n                </SliderOutput>\n            </div>\n            <SliderTrack className={styles.track}>\n                {({ state }) => (\n                    <>\n                        <div\n                            className={styles.fill}\n                            style={{ width: empty ? 0 : `${state.getThumbPercent(0) * 100}%` }}\n                        />\n                        <SliderThumb\n                            className={styles.thumb}\n                            {...(name !== undefined ? { name } : {})}\n                            {...(describedBy !== '' ? { 'aria-describedby': describedBy } : {})}\n                        />\n                    </>\n                )}\n            </SliderTrack>\n            {description !== undefined && description !== null ? (\n                <div\n                    id={`${id}-description`}\n                    className={cx(fieldStyles.description, descriptionClassName)}\n                >\n                    {description}\n                </div>\n            ) : null}\n            {invalid ? (\n                <div id={`${id}-errors`} className={cx(fieldStyles.errors, errorsClassName)}>\n                    {errors.map((error, index) => (\n                        <span key={index} className={fieldStyles.error}>\n                            {error}\n                        </span>\n                    ))}\n                </div>\n            ) : null}\n        </AriaSlider>\n    );\n}\n"],"mappings":";;;;;;;;;;;;AAmCA,SAAgBC,SAAO,EACnB,OACA,aACA,SAAS,CAAA,GACT,OACA,cACA,UACA,QACA,MACA,YACA,WAAW,GACX,WAAW,KACX,WACA,gBACA,sBACA,iBACA,GAAG,SACS;CACZ,MAAM,KAAK,MAAM;CACjB,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,cAAc,CAChB,gBAAgB,KAAA,KAAa,gBAAgB,OAAO,GAAG,GAAE,gBAAiB,MAC1E,UAAU,GAAG,GAAE,WAAY,IAAI,CAClC,CACI,QAAQ,SAAS,SAAS,IAAI,CAAC,CAC/B,KAAK,GAAG;CACb,MAAM,QAAQ,UAAU,QAAS,UAAU,KAAA,KAAa,gBAAgB;CACxE,OACI,qBAACC,QAAD;EACI,GAAI;EACM;EACA;EACV,GAAK,UAAU,KAAA,IAAY,EAAE,OAAO,SAAS,SAAS,IAAI,CAAC;EAC3D,GAAK,iBAAiB,KAAA,IAAY,EAAE,cAAc,gBAAgB,SAAS,IAAI,CAAC;EAChF,GAAK,aAAa,KAAA,IAAY,EAAE,SAAS,IAAI,CAAC;EAC9C,WAAW,GAAG,kBAAkBC,qBAAY,OAAOC,sBAAO,QAAQ,SAAS;EAC3E,gBAAc,WAAW,KAAA;EACzB,cAAY,SAAS,KAAA;EATzB,UAAA;GAWI,qBAAC,OAAD;IAAK,WAAWA,sBAAO;IAAvB,UAAA,CACI,oBAAC,YAAD;KAAwB;KAAY,WAAW;KAC1C,UAAA;IACO,CAAA,GACZ,oBAAC,cAAD;KAAc,WAAWA,sBAAO;KAC1B,WAAA,EAAE,YACA,QACI,MAEA,qBAAAC,UAAA,EAAA,UAAA,CACK,MAAM,mBAAmB,CAAC,GAC1B,WAAW,KAAA,IAAY,qBAAAA,UAAA,EAAA,UAAA,CAAE,KAAE,MAAO,EAAA,CAAA,IAAM,IAC7C,EAAA,CAAA;IAGE,CAAA,CACb;;GACL,oBAAC,aAAD;IAAa,WAAWD,sBAAO;IACzB,WAAA,EAAE,OAAAJ,cACA,qBAAAK,UAAA,EAAA,UAAA,CACI,oBAAC,OAAD;KACI,WAAWD,sBAAO;KAClB,OAAO,EAAE,OAAO,QAAQ,IAAI,GAAGJ,QAAM,gBAAgB,CAAC,IAAI,IAAG,GAAI;IAAE,CAAA,GAEvE,oBAAC,aAAD;KACI,WAAWI,sBAAO;KAClB,GAAK,SAAS,KAAA,IAAY,EAAE,KAAK,IAAI,CAAC;KACtC,GAAK,gBAAgB,KAAK,EAAE,oBAAoB,YAAY,IAAI,CAAC;IAAG,CAAA,CAE5E,EAAA,CAAA;GAEK,CAAA;GACZ,gBAAgB,KAAA,KAAa,gBAAgB,OAC1C,oBAAC,OAAD;IACI,IAAI,GAAG,GAAE;IACT,WAAW,GAAGD,qBAAY,aAAa,oBAAoB;IAE1D,UAAA;GACA,CAAA,IACL;GACH,UACG,oBAAC,OAAD;IAAK,IAAI,GAAG,GAAE;IAAW,WAAW,GAAGA,qBAAY,QAAQ,eAAe;IACrE,UAAA,OAAO,KAAK,OAAO,UAChB,oBAAC,QAAD;KAAkB,WAAWA,qBAAY;KACpC,UAAA;IACC,GAFK,KAEL,CACT;GACA,CAAA,IACL;EACI;;AAEpB"}

package/dist/slider/Slider.module.js

@@ -0,0 +1,20 @@
+import "./Slider.css";
+//#region src/slider/Slider.module.css
+var slider = "panneau-slider";
+var header = "panneau-slider-header";
+var output = "panneau-slider-output";
+var track = "panneau-slider-track";
+var fill = "panneau-slider-fill";
+var thumb = "panneau-slider-thumb";
+var Slider_module_default = {
+	slider,
+	header,
+	output,
+	track,
+	fill,
+	thumb
+};
+//#endregion
+export { Slider_module_default as default, fill, header, output, slider, thumb, track };
+
+//# sourceMappingURL=Slider.module.js.map

package/dist/slider/Slider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.js","names":[],"sources":["../../src/slider/Slider.module.css"],"sourcesContent":["/* A track with the part before the thumb filled, and the value next to the label. */\n\n.slider {\n    width: 100%;\n}\n\n.header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n}\n\n.output {\n    font-size: var(--panneau-font-size-sm);\n    font-variant-numeric: var(--panneau-font-numeric);\n    color: var(--panneau-color-text-muted);\n}\n\n.track {\n    position: relative;\n    height: var(--panneau-control-height-sm);\n    cursor: pointer;\n}\n\n/* The rail, centered in the track. */\n.track::before {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    left: 0;\n    height: 0.25rem;\n    content: '';\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-full);\n    transform: translateY(-50%);\n}\n\n.fill {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    height: 0.25rem;\n    background-color: var(--panneau-color-accent);\n    border-radius: var(--panneau-radius-full);\n    transform: translateY(-50%);\n}\n\n.thumb {\n    top: 50%;\n    width: 1.125rem;\n    height: 1.125rem;\n    background-color: var(--panneau-color-surface);\n    border: 2px solid var(--panneau-color-accent);\n    border-radius: var(--panneau-radius-full);\n    box-shadow: var(--panneau-shadow-sm);\n    transform: translateY(-50%);\n}\n\n.slider[data-empty] .thumb {\n    border-color: var(--panneau-color-border-control);\n}\n\n.thumb[data-dragging] {\n    background-color: var(--panneau-color-accent);\n}\n\n.thumb[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.slider[data-invalid] .thumb {\n    border-color: var(--panneau-color-danger);\n}\n\n.slider[data-disabled] {\n    opacity: 0.6;\n}\n\n.slider[data-disabled] .track {\n    cursor: not-allowed;\n}\n"],"mappings":""}

package/dist/tags-input/TagsInput.css

@@ -0,0 +1,60 @@
+/* The tags as chips in the control, before the input. */
+
+.panneau-tags-input-control.panneau-tags-input-control {
+    flex-wrap: wrap;
+    gap: var(--panneau-space-1);
+    height: auto;
+    padding-block: var(--panneau-space-1);
+}
+
+.panneau-tags-input-group {
+    display: contents;
+}
+
+.panneau-tags-input-list {
+    display: contents;
+}
+
+.panneau-tags-input-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    max-width: 100%;
+    padding: 0.125rem var(--panneau-space-1) 0.125rem var(--panneau-space-2);
+    font-size: var(--panneau-font-size-sm);
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-full);
+    outline: none;
+    overflow-wrap: anywhere;
+}
+
+.panneau-tags-input-tag[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+.panneau-tags-input-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.125rem;
+    color: var(--panneau-color-text-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--panneau-radius-full);
+    outline: none;
+}
+
+.panneau-tags-input-remove[data-hovered] {
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-tags-input-input {
+    flex: 1 1 6rem;
+    min-width: 6rem;
+}

package/dist/tags-input/TagsInput.d.ts

@@ -0,0 +1,32 @@
+import { type FieldChromeProps } from '../field/FieldParts';
+/** A suggested tag: its value, and the label shown for it. */
+export interface TagSuggestion {
+    value: string;
+    label?: string;
+}
+export interface TagsInputProps extends FieldChromeProps {
+    /** The tags, or `null` when there are none. */
+    value?: readonly string[] | null;
+    /** Called with the tags, or `null` when the last one is removed. */
+    onChange?: (value: string[] | null) => void;
+    onBlur?: () => void;
+    /** Tags offered as the user types. */
+    suggestions?: readonly TagSuggestion[];
+    /** Whether tags outside the suggestions are allowed. Defaults to true. */
+    allowCustom?: boolean;
+    placeholder?: string;
+    name?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    autoFocus?: boolean;
+    controlClassName?: string;
+}
+/**
+ * A list of words. Enter, Tab or a comma adds what is typed, Backspace in the empty input removes
+ * the last tag, and pasting a list separated by commas or lines adds each one. Tags are trimmed,
+ * and a tag already in the list isn't added again. Suggestions complete what is typed; without
+ * `allowCustom`, only they can be added.
+ */
+export declare function TagsInput({ label, description, errors, value, onChange, onBlur, suggestions, allowCustom, placeholder, name, isRequired, isDisabled, isReadOnly, autoFocus, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, }: TagsInputProps): import("react").JSX.Element;
+//# sourceMappingURL=TagsInput.d.ts.map

package/dist/tags-input/TagsInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../src/tags-input/TagsInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAe,MAAM,qBAAqB,CAAC;AAOzE,8DAA8D;AAC9D,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IACvC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,MAAW,EACX,KAAK,EACL,QAAQ,EACR,MAAM,EACN,WAAgB,EAChB,WAAkB,EAClB,WAAW,EACX,IAAI,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,GACnB,EAAE,cAAc,+BAyLhB"}

package/dist/tags-input/TagsInput.js

@@ -0,0 +1,160 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import { messages } from "../intl/messages.js";
+import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import Field_module_default from "../field/Field.module.js";
+import TagsInput_module_default from "./TagsInput.module.js";
+import { X } from "lucide-react";
+import { Button, Tag, TagGroup, TagList } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/tags-input/TagsInput.tsx
+/**
+* A list of words. Enter, Tab or a comma adds what is typed, Backspace in the empty input removes
+* the last tag, and pasting a list separated by commas or lines adds each one. Tags are trimmed,
+* and a tag already in the list isn't added again. Suggestions complete what is typed; without
+* `allowCustom`, only they can be added.
+*/
+function TagsInput({ label, description, errors = [], value, onChange, onBlur, suggestions = [], allowCustom = true, placeholder, name, isRequired, isDisabled, isReadOnly, autoFocus, className, labelClassName, descriptionClassName, errorsClassName, controlClassName }) {
+	const intl = usePanneauIntl();
+	const id = useId();
+	const [draft, setDraft] = useState("");
+	const tags = value ?? [];
+	const invalid = errors.length > 0;
+	const editable = isDisabled !== true && isReadOnly !== true;
+	const labelOf = (tag) => suggestions.find((suggestion) => suggestion.value === tag)?.label ?? tag;
+	/** The tag a text adds: the suggestion it names, or the text itself when allowed. */
+	const resolve = (text) => {
+		const trimmed = text.trim();
+		if (trimmed === "") return null;
+		const lower = trimmed.toLocaleLowerCase();
+		const suggestion_0 = suggestions.find((candidate) => candidate.value.toLocaleLowerCase() === lower || (candidate.label ?? "").toLocaleLowerCase() === lower);
+		if (suggestion_0 !== void 0) return suggestion_0.value;
+		return allowCustom ? trimmed : null;
+	};
+	const add = (texts) => {
+		const next = [...tags];
+		texts.forEach((text_0) => {
+			const tag_0 = resolve(text_0);
+			if (tag_0 !== null && !next.includes(tag_0)) next.push(tag_0);
+		});
+		if (next.length !== tags.length) onChange?.(next);
+	};
+	const remove = (removed) => {
+		const next_0 = tags.filter((tag_1) => !removed.has(tag_1));
+		onChange?.(next_0.length > 0 ? next_0 : null);
+	};
+	const commit = () => {
+		if (draft.trim() !== "") {
+			add([draft]);
+			setDraft("");
+		}
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === "," || event.key === "Tab" && draft !== "") {
+			if (draft.trim() !== "") {
+				event.preventDefault();
+				commit();
+			} else if (event.key !== "Tab") event.preventDefault();
+		} else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+			event.preventDefault();
+			remove(/* @__PURE__ */ new Set([tags[tags.length - 1]]));
+		}
+	};
+	const onPaste = (event_0) => {
+		const text_1 = event_0.clipboardData.getData("text");
+		if (/[,\n]/.test(text_1)) {
+			event_0.preventDefault();
+			add(text_1.split(/[,\n]/));
+		}
+	};
+	const describedBy = [description !== void 0 && description !== null ? `${id}-description` : null, invalid ? `${id}-errors` : null].filter((part) => part !== null).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("panneau-tags-input", Field_module_default.field, className),
+		children: [
+			label !== void 0 && label !== null ? /* @__PURE__ */ jsxs("label", {
+				htmlFor: `${id}-input`,
+				className: cx(Field_module_default.label, labelClassName),
+				children: [label, isRequired === true ? /* @__PURE__ */ jsx("span", {
+					className: Field_module_default.required,
+					"aria-hidden": "true",
+					children: "*"
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: cx(Field_module_default.control, TagsInput_module_default.control, controlClassName),
+				"data-invalid": invalid || void 0,
+				"data-disabled": isDisabled || void 0,
+				"data-readonly": isReadOnly || void 0,
+				children: [
+					tags.length > 0 ? /* @__PURE__ */ jsx(TagGroup, {
+						"aria-label": intl.formatMessage(messages.tags, { label: typeof label === "string" ? label : "" }),
+						onRemove: editable ? remove : void 0,
+						className: TagsInput_module_default.group,
+						children: /* @__PURE__ */ jsx(TagList, {
+							className: TagsInput_module_default.list,
+							children: tags.map((tag_2) => /* @__PURE__ */ jsxs(Tag, {
+								id: tag_2,
+								textValue: labelOf(tag_2),
+								className: TagsInput_module_default.tag,
+								children: [labelOf(tag_2), editable ? /* @__PURE__ */ jsx(Button, {
+									slot: "remove",
+									className: TagsInput_module_default.remove,
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: X,
+										size: "xs"
+									})
+								}) : null]
+							}, tag_2))
+						})
+					}) : null,
+					editable ? /* @__PURE__ */ jsx("input", {
+						id: `${id}-input`,
+						className: cx(Field_module_default.bare, TagsInput_module_default.input),
+						value: draft,
+						placeholder: tags.length === 0 ? placeholder : void 0,
+						list: suggestions.length > 0 ? `${id}-suggestions` : void 0,
+						autoComplete: "off",
+						autoFocus,
+						"aria-invalid": invalid || void 0,
+						"aria-required": isRequired || void 0,
+						"aria-describedby": describedBy !== "" ? describedBy : void 0,
+						onChange: (event_1) => setDraft(event_1.target.value),
+						onKeyDown,
+						onPaste,
+						onBlur: () => {
+							commit();
+							onBlur?.();
+						}
+					}) : null,
+					suggestions.length > 0 ? /* @__PURE__ */ jsx("datalist", {
+						id: `${id}-suggestions`,
+						children: suggestions.filter((suggestion_1) => !tags.includes(suggestion_1.value)).map((suggestion_2) => /* @__PURE__ */ jsx("option", { value: suggestion_2.label ?? suggestion_2.value }, suggestion_2.value))
+					}) : null
+				]
+			}),
+			name !== void 0 ? tags.map((tag_3) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}[]`,
+				value: tag_3
+			}, tag_3)) : null,
+			description !== void 0 && description !== null ? /* @__PURE__ */ jsx("div", {
+				id: `${id}-description`,
+				className: cx(Field_module_default.description, descriptionClassName),
+				children: description
+			}) : null,
+			invalid ? /* @__PURE__ */ jsx("div", {
+				id: `${id}-errors`,
+				className: cx(Field_module_default.errors, errorsClassName),
+				children: errors.map((error, index) => /* @__PURE__ */ jsx("span", {
+					className: Field_module_default.error,
+					children: error
+				}, index))
+			}) : null
+		]
+	});
+}
+//#endregion
+export { TagsInput };
+
+//# sourceMappingURL=TagsInput.js.map