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

package/dist/radio-group/RadioGroup.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: var(--panneau-radio-size, 1.125rem);\n    height: var(--panneau-radio-size, 1.125rem);\n    margin-top: 0.125rem;\n    background-color: var(--panneau-radio-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-radio-checked-color, var(--panneau-color-accent));\n    border-width: var(--panneau-radio-checked-border-width, 0.3125rem);\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: var(--panneau-radio-size, 1.125rem);\n    height: var(--panneau-radio-size, 1.125rem);\n    margin-top: 0.125rem;\n    background-color: var(--panneau-radio-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-radio-checked-color, var(--panneau-color-accent));\n    border-width: var(--panneau-radio-checked-border-width, 0.3125rem);\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.optionLabel {\n    overflow-wrap: anywhere;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n/* Leading media of an option, between the radio and the label. */\n.media {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-radio-media-size, 2rem);\n    height: var(--panneau-radio-media-size, 2rem);\n    overflow: hidden;\n    border-radius: var(--panneau-radio-media-radius, var(--panneau-radius-full));\n}\n\n.media > :is(img, svg, video, picture) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n/*\n * Cards: the options in a grid of --_panneau-radio-group-columns columns, inside a size container\n * of their own, so that they become a single column when the group is narrow, wherever it is.\n */\n\n.grid {\n    container-type: inline-size;\n}\n\n.cards .options {\n    display: grid;\n    grid-template-columns: repeat(var(--_panneau-radio-group-columns, 2), minmax(0, 1fr));\n    gap: var(--panneau-radio-card-gap, var(--panneau-space-2));\n}\n\n@container (max-width: 28rem) {\n    .cards .options {\n        grid-template-columns: minmax(0, 1fr);\n    }\n}\n\n.card {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-radio-card-padding, var(--panneau-space-3));\n    background-color: var(--panneau-radio-card-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-card-border-color, var(--panneau-color-border));\n    border-radius: var(--panneau-radio-card-radius, var(--panneau-radius-md));\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.card .circle {\n    margin-top: 0;\n}\n\n.card .optionLabel {\n    font-weight: var(--panneau-radio-card-label-font-weight, var(--panneau-font-weight-medium));\n}\n\n.card[data-hovered] {\n    border-color: var(--panneau-radio-card-border-color-hover, var(--panneau-color-border-control));\n}\n\n/* The selected card: a border of twice the width, drawn inside so that nothing moves. */\n.card[data-selected] {\n    border-color: var(--panneau-radio-card-border-color-selected, var(--panneau-color-accent));\n    box-shadow: inset 0 0 0 var(--panneau-border-width)\n        var(--panneau-radio-card-border-color-selected, var(--panneau-color-accent));\n}\n\n.card[data-invalid] {\n    border-color: var(--panneau-color-danger);\n}\n\n/* A card shows the focus ring around itself, instead of around its radio. */\n.card[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.card[data-focus-visible] .circle {\n    outline: none;\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}

package/dist/radio-group/tokens.d.ts

@@ -1,3 +1,3 @@
-/** Tokens of RadioGroup. */
-export declare const radioTokens: import("..").ComponentTokens<"radio", "panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-checked-border-width">;
+/** Tokens of RadioGroup: its radios, the media of its options, and its cards. */
+export declare const radioTokens: import("..").ComponentTokens<"radio", "panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-media-size" | "panneau-radio-media-radius" | "panneau-radio-checked-border-width" | "panneau-radio-card-gap" | "panneau-radio-card-padding" | "panneau-radio-card-bg" | "panneau-radio-card-border-color" | "panneau-radio-card-border-color-hover" | "panneau-radio-card-border-color-selected" | "panneau-radio-card-radius" | "panneau-radio-card-label-font-weight">;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/radio-group/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/radio-group/tokens.ts"],"names":[],"mappings":"AAEA,4BAA4B;AAC5B,eAAO,MAAM,WAAW,wLAWtB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/radio-group/tokens.ts"],"names":[],"mappings":"AAEA,iFAAiF;AACjF,eAAO,MAAM,WAAW,0gBA+BtB,CAAC"}

package/dist/radio-group/tokens.js

@@ -1,6 +1,6 @@
 import { defineComponentTokens } from "../theme/componentTokens.js";
 //#region src/radio-group/tokens.ts
-/** Tokens of RadioGroup. */
+/** Tokens of RadioGroup: its radios, the media of its options, and its cards. */
 var radioTokens = defineComponentTokens("radio", {
 	/** Size of the circle. */
 	size: "1.125rem",
@@ -11,7 +11,27 @@ var radioTokens = defineComponentTokens("radio", {
 	/** Color of a selected circle. */
 	"checked-color": "var(--panneau-color-accent)",
 	/** Border width of a selected circle, which draws the dot. */
-	"checked-border-width": "0.3125rem"
+	"checked-border-width": "0.3125rem",
+	/** Size of the leading media of an option. */
+	"media-size": "2rem",
+	/** Corner radius of the leading media of an option: its content is clipped to it. */
+	"media-radius": "var(--panneau-radius-full)",
+	/** Space between the cards, with `appearance="cards"`. */
+	"card-gap": "var(--panneau-space-2)",
+	/** Padding of a card. */
+	"card-padding": "var(--panneau-space-3)",
+	/** Background of a card. */
+	"card-bg": "var(--panneau-color-surface)",
+	/** Border color of a card. */
+	"card-border-color": "var(--panneau-color-border)",
+	/** Border color of a hovered card. */
+	"card-border-color-hover": "var(--panneau-color-border-control)",
+	/** Border color of the selected card, which is twice as wide. */
+	"card-border-color-selected": "var(--panneau-color-accent)",
+	/** Corner radius of a card. */
+	"card-radius": "var(--panneau-radius-md)",
+	/** Font weight of the label of a card. */
+	"card-label-font-weight": "var(--panneau-font-weight-medium)"
 });
 //#endregion
 export { radioTokens };

package/dist/radio-group/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../../src/radio-group/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of RadioGroup. */\nexport const radioTokens = defineComponentTokens('radio', {\n    /** Size of the circle. */\n    size: '1.125rem',\n    /** Background of the circle. */\n    bg: 'var(--panneau-color-surface)',\n    /** Border color of the circle. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Color of a selected circle. */\n    'checked-color': 'var(--panneau-color-accent)',\n    /** Border width of a selected circle, which draws the dot. */\n    'checked-border-width': '0.3125rem',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,MAAM;;CAEN,IAAI;;CAEJ,gBAAgB;;CAEhB,iBAAiB;;CAEjB,wBAAwB;AAC5B,CAAC"}
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/radio-group/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of RadioGroup: its radios, the media of its options, and its cards. */\nexport const radioTokens = defineComponentTokens('radio', {\n    /** Size of the circle. */\n    size: '1.125rem',\n    /** Background of the circle. */\n    bg: 'var(--panneau-color-surface)',\n    /** Border color of the circle. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Color of a selected circle. */\n    'checked-color': 'var(--panneau-color-accent)',\n    /** Border width of a selected circle, which draws the dot. */\n    'checked-border-width': '0.3125rem',\n    /** Size of the leading media of an option. */\n    'media-size': '2rem',\n    /** Corner radius of the leading media of an option: its content is clipped to it. */\n    'media-radius': 'var(--panneau-radius-full)',\n    /** Space between the cards, with `appearance=\"cards\"`. */\n    'card-gap': 'var(--panneau-space-2)',\n    /** Padding of a card. */\n    'card-padding': 'var(--panneau-space-3)',\n    /** Background of a card. */\n    'card-bg': 'var(--panneau-color-surface)',\n    /** Border color of a card. */\n    'card-border-color': 'var(--panneau-color-border)',\n    /** Border color of a hovered card. */\n    'card-border-color-hover': 'var(--panneau-color-border-control)',\n    /** Border color of the selected card, which is twice as wide. */\n    'card-border-color-selected': 'var(--panneau-color-accent)',\n    /** Corner radius of a card. */\n    'card-radius': 'var(--panneau-radius-md)',\n    /** Font weight of the label of a card. */\n    'card-label-font-weight': 'var(--panneau-font-weight-medium)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,MAAM;;CAEN,IAAI;;CAEJ,gBAAgB;;CAEhB,iBAAiB;;CAEjB,wBAAwB;;CAExB,cAAc;;CAEd,gBAAgB;;CAEhB,YAAY;;CAEZ,gBAAgB;;CAEhB,WAAW;;CAEX,qBAAqB;;CAErB,2BAA2B;;CAE3B,8BAA8B;;CAE9B,eAAe;;CAEf,0BAA0B;AAC9B,CAAC"}

package/dist/select/ListBox.css

@@ -103,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.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    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.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/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

package/dist/tags-input/TagsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.js","names":["suggestion","text","tag","next","event","fieldStyles","styles"],"sources":["../../src/tags-input/TagsInput.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { type ClipboardEvent, type KeyboardEvent, useId, useState } from 'react';\nimport { Button, Tag, TagGroup, TagList } from 'react-aria-components';\n\nimport { type FieldChromeProps, fieldStyles } from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './TagsInput.module.css';\n\n/** A suggested tag: its value, and the label shown for it. */\nexport interface TagSuggestion {\n    value: string;\n    label?: string;\n}\n\nexport interface TagsInputProps extends FieldChromeProps {\n    /** The tags, or `null` when there are none. */\n    value?: readonly string[] | null;\n    /** Called with the tags, or `null` when the last one is removed. */\n    onChange?: (value: string[] | null) => void;\n    onBlur?: () => void;\n    /** Tags offered as the user types. */\n    suggestions?: readonly TagSuggestion[];\n    /** Whether tags outside the suggestions are allowed. Defaults to true. */\n    allowCustom?: boolean;\n    placeholder?: string;\n    name?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    isReadOnly?: boolean;\n    autoFocus?: boolean;\n    controlClassName?: string;\n}\n\n/**\n * A list of words. Enter, Tab or a comma adds what is typed, Backspace in the empty input removes\n * the last tag, and pasting a list separated by commas or lines adds each one. Tags are trimmed,\n * and a tag already in the list isn't added again. Suggestions complete what is typed; without\n * `allowCustom`, only they can be added.\n */\nexport function TagsInput({\n    label,\n    description,\n    errors = [],\n    value,\n    onChange,\n    onBlur,\n    suggestions = [],\n    allowCustom = true,\n    placeholder,\n    name,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n    autoFocus,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n}: TagsInputProps) {\n    const intl = usePanneauIntl();\n    const id = useId();\n    const [draft, setDraft] = useState('');\n    const tags = value ?? [];\n    const invalid = errors.length > 0;\n    const editable = isDisabled !== true && isReadOnly !== true;\n    const labelOf = (tag: string) =>\n        suggestions.find((suggestion) => suggestion.value === tag)?.label ?? tag;\n\n    /** The tag a text adds: the suggestion it names, or the text itself when allowed. */\n    const resolve = (text: string): string | null => {\n        const trimmed = text.trim();\n        if (trimmed === '') {\n            return null;\n        }\n        const lower = trimmed.toLocaleLowerCase();\n        const suggestion = suggestions.find(\n            (candidate) =>\n                candidate.value.toLocaleLowerCase() === lower ||\n                (candidate.label ?? '').toLocaleLowerCase() === lower,\n        );\n        if (suggestion !== undefined) {\n            return suggestion.value;\n        }\n        return allowCustom ? trimmed : null;\n    };\n\n    const add = (texts: readonly string[]) => {\n        const next = [...tags];\n        texts.forEach((text) => {\n            const tag = resolve(text);\n            if (tag !== null && !next.includes(tag)) {\n                next.push(tag);\n            }\n        });\n        if (next.length !== tags.length) {\n            onChange?.(next);\n        }\n    };\n\n    const remove = (removed: ReadonlySet<string | number>) => {\n        const next = tags.filter((tag) => !removed.has(tag));\n        onChange?.(next.length > 0 ? next : null);\n    };\n\n    const commit = () => {\n        if (draft.trim() !== '') {\n            add([draft]);\n            setDraft('');\n        }\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter' || event.key === ',' || (event.key === 'Tab' && draft !== '')) {\n            if (draft.trim() !== '') {\n                event.preventDefault();\n                commit();\n            } else if (event.key !== 'Tab') {\n                event.preventDefault();\n            }\n        } else if (event.key === 'Backspace' && draft === '' && tags.length > 0) {\n            event.preventDefault();\n            remove(new Set([tags[tags.length - 1] as string]));\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>) => {\n        const text = event.clipboardData.getData('text');\n        if (/[,\\n]/.test(text)) {\n            event.preventDefault();\n            add(text.split(/[,\\n]/));\n        }\n    };\n\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\n    return (\n        <div className={cx('panneau-tags-input', fieldStyles.field, className)}>\n            {label !== undefined && label !== null ? (\n                <label htmlFor={`${id}-input`} className={cx(fieldStyles.label, labelClassName)}>\n                    {label}\n                    {isRequired === true ? (\n                        <span className={fieldStyles.required} aria-hidden=\"true\">\n                            *\n                        </span>\n                    ) : null}\n                </label>\n            ) : null}\n            <div\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-invalid={invalid || undefined}\n                data-disabled={isDisabled || undefined}\n                data-readonly={isReadOnly || undefined}\n            >\n                {tags.length > 0 ? (\n                    <TagGroup\n                        aria-label={intl.formatMessage(messages.tags, {\n                            label: typeof label === 'string' ? label : '',\n                        })}\n                        onRemove={editable ? remove : undefined}\n                        className={styles.group}\n                    >\n                        <TagList className={styles.list}>\n                            {tags.map((tag) => (\n                                <Tag\n                                    key={tag}\n                                    id={tag}\n                                    textValue={labelOf(tag)}\n                                    className={styles.tag}\n                                >\n                                    {labelOf(tag)}\n                                    {editable ? (\n                                        <Button slot=\"remove\" className={styles.remove}>\n                                            <Icon icon={X} size=\"xs\" />\n                                        </Button>\n                                    ) : null}\n                                </Tag>\n                            ))}\n                        </TagList>\n                    </TagGroup>\n                ) : null}\n                {editable ? (\n                    <input\n                        id={`${id}-input`}\n                        className={cx(fieldStyles.bare, styles.input)}\n                        value={draft}\n                        placeholder={tags.length === 0 ? placeholder : undefined}\n                        list={suggestions.length > 0 ? `${id}-suggestions` : undefined}\n                        autoComplete=\"off\"\n                        autoFocus={autoFocus}\n                        aria-invalid={invalid || undefined}\n                        aria-required={isRequired || undefined}\n                        aria-describedby={describedBy !== '' ? describedBy : undefined}\n                        onChange={(event) => setDraft(event.target.value)}\n                        onKeyDown={onKeyDown}\n                        onPaste={onPaste}\n                        onBlur={() => {\n                            commit();\n                            onBlur?.();\n                        }}\n                    />\n                ) : null}\n                {suggestions.length > 0 ? (\n                    <datalist id={`${id}-suggestions`}>\n                        {suggestions\n                            .filter((suggestion) => !tags.includes(suggestion.value))\n                            .map((suggestion) => (\n                                <option\n                                    key={suggestion.value}\n                                    value={suggestion.label ?? suggestion.value}\n                                />\n                            ))}\n                    </datalist>\n                ) : null}\n            </div>\n            {name !== undefined\n                ? tags.map((tag) => (\n                      <input key={tag} type=\"hidden\" name={`${name}[]`} value={tag} />\n                  ))\n                : null}\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        </div>\n    );\n}\n"],"mappings":"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"}