@orianatech/pire 0.15.0 → 0.16.0

package/dist/index.js

@@ -704,158 +704,19 @@ function FormField({ label, htmlFor, isRequired, hint, error, layout = "stacked"
 }
 
 // src/components/forms/Input.tsx
-import { TextField, Label, Input as AriaInput, Group, Text as Text2, FieldError } from "react-aria-components";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-function Input({
-  label,
-  icon,
-  suffix,
-  description,
-  errorMessage,
-  size = "md",
-  numeric,
-  fullWidth = true,
-  className,
-  style,
-  inputRef,
-  onChange,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs10(
-    TextField,
-    {
-      className: cx("pire-field", className),
-      style,
-      onChange,
-      validationBehavior: "aria",
-      ...rest,
-      children: [
-        label ? /* @__PURE__ */ jsxs10(Label, { className: "pire-field-label", children: [
-          label,
-          rest.isRequired ? /* @__PURE__ */ jsx16("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
-        ] }) : null,
-        /* @__PURE__ */ jsxs10(
-          Group,
-          {
-            className: "pire-control",
-            "data-size": size,
-            "data-full-width": String(fullWidth),
-            "data-invalid": rest.isInvalid ? "true" : void 0,
-            "data-readonly": rest.isReadOnly ? "true" : void 0,
-            children: [
-              icon ? /* @__PURE__ */ jsx16(Icon, { name: icon, size: 16, className: "pire-leading-icon" }) : null,
-              /* @__PURE__ */ jsx16(AriaInput, { ref: inputRef, className: "pire-input", "data-numeric": numeric ? "true" : void 0 }),
-              suffix ? /* @__PURE__ */ jsx16("span", { className: "pire-affix", children: suffix }) : null
-            ]
-          }
-        ),
-        description ? /* @__PURE__ */ jsx16(Text2, { slot: "description", className: "pire-field-hint", children: description }) : null,
-        /* @__PURE__ */ jsx16(FieldError, { className: "pire-field-error", children: errorMessage })
-      ]
-    }
-  );
-}
-
-// src/components/forms/TextArea.tsx
-import * as React5 from "react";
-import { TextField as TextField2, Label as Label2, TextArea as AriaTextArea, Group as Group2, Text as Text3, FieldError as FieldError2 } from "react-aria-components";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect = typeof document === "undefined" ? React5.useEffect : React5.useLayoutEffect;
-function TextArea({
-  label,
-  description,
-  errorMessage,
-  size = "md",
-  rows = 3,
-  autoGrow,
-  maxRows,
-  fullWidth = true,
-  className,
-  style,
-  textAreaRef,
-  onChange,
-  ...rest
-}) {
-  const innerRef = React5.useRef(null);
-  const ref = React5.useCallback((node) => {
-    innerRef.current = node;
-    if (typeof textAreaRef === "function") textAreaRef(node);
-    else if (textAreaRef) textAreaRef.current = node;
-  }, [textAreaRef]);
-  const grow = React5.useCallback(() => {
-    const el = innerRef.current;
-    if (!el || !autoGrow) return;
-    const styles = getComputedStyle(el);
-    const lineHeight = Number.parseFloat(styles.lineHeight) || Number.parseFloat(styles.fontSize) * 1.5;
-    const chrome = el.offsetHeight - el.clientHeight;
-    el.style.height = "auto";
-    const wanted = maxRows ? Math.min(el.scrollHeight, Math.ceil(lineHeight * maxRows)) : el.scrollHeight;
-    const next = `${wanted + chrome}px`;
-    if (el.style.height !== next) el.style.height = next;
-  }, [autoGrow, maxRows]);
-  useIsomorphicLayoutEffect(() => {
-    if (!autoGrow) {
-      if (innerRef.current) innerRef.current.style.height = "";
-      return;
-    }
-    grow();
-  }, [autoGrow, grow, rest.value]);
-  return /* @__PURE__ */ jsxs11(
-    TextField2,
-    {
-      className: cx("pire-field", className),
-      style,
-      onChange,
-      validationBehavior: "aria",
-      ...rest,
-      children: [
-        label ? /* @__PURE__ */ jsxs11(Label2, { className: "pire-field-label", children: [
-          label,
-          rest.isRequired ? /* @__PURE__ */ jsx17("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
-        ] }) : null,
-        /* @__PURE__ */ jsx17(
-          Group2,
-          {
-            className: "pire-control",
-            "data-size": size,
-            "data-full-width": String(fullWidth),
-            "data-multiline": "true",
-            "data-invalid": rest.isInvalid ? "true" : void 0,
-            "data-readonly": rest.isReadOnly ? "true" : void 0,
-            children: /* @__PURE__ */ jsx17(
-              AriaTextArea,
-              {
-                ref,
-                rows,
-                onInput: autoGrow ? grow : void 0,
-                className: cx("pire-input", "pire-textarea"),
-                "data-auto-grow": autoGrow ? "true" : void 0
-              }
-            )
-          }
-        ),
-        description ? /* @__PURE__ */ jsx17(Text3, { slot: "description", className: "pire-field-hint", children: description }) : null,
-        /* @__PURE__ */ jsx17(FieldError2, { className: "pire-field-error", children: errorMessage })
-      ]
-    }
-  );
-}
-
-// src/components/forms/Select.tsx
+import * as React6 from "react";
 import {
-  Select as AriaSelect,
-  Label as Label3,
-  Button as AriaButton4,
-  SelectValue,
-  Popover,
-  ListBox,
-  ListBoxItem,
-  Text as Text4,
-  FieldError as FieldError3
+  TextField,
+  Label,
+  Input as AriaInput,
+  Group,
+  Text as Text2,
+  FieldError,
+  Button as AriaButton4
 } from "react-aria-components";
 
 // src/i18n/PireIntlProvider.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 
 // src/i18n/messages.ts
 var enMessages = {
@@ -879,6 +740,7 @@ var enMessages = {
   dateRangePresetsLabel: "Date range shortcuts",
   numberFieldIncrease: "Increase",
   numberFieldDecrease: "Decrease",
+  inputClear: "Clear",
   valueHelpFieldPlaceholder: "Not selected",
   valueHelpFieldClear: "Clear selection",
   valueHelpFieldOpenNamed: "Select {label}",
@@ -933,6 +795,7 @@ var esMessages = {
   dateRangePresetsLabel: "Atajos de rango de fechas",
   numberFieldIncrease: "Aumentar",
   numberFieldDecrease: "Disminuir",
+  inputClear: "Limpiar",
   valueHelpFieldPlaceholder: "Sin seleccionar",
   valueHelpFieldClear: "Limpiar selecci\xF3n",
   valueHelpFieldOpenNamed: "Seleccionar {label}",
@@ -968,24 +831,187 @@ var esMessages = {
 };
 
 // src/i18n/PireIntlProvider.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var MessagesContext = React6.createContext(enMessages);
+import { jsx as jsx16 } from "react/jsx-runtime";
+var MessagesContext = React5.createContext(enMessages);
 function PireIntlProvider({ messages, children }) {
-  const value = React6.useMemo(
+  const value = React5.useMemo(
     () => messages ? { ...enMessages, ...messages } : enMessages,
     [messages]
   );
-  return /* @__PURE__ */ jsx18(MessagesContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx16(MessagesContext.Provider, { value, children });
 }
 function usePireMessages() {
-  return React6.useContext(MessagesContext);
+  return React5.useContext(MessagesContext);
 }
 function useMessage(key, override) {
-  const messages = React6.useContext(MessagesContext);
+  const messages = React5.useContext(MessagesContext);
   return override ?? messages[key];
 }
 
+// src/components/forms/Input.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function Input({
+  label,
+  icon,
+  suffix,
+  description,
+  errorMessage,
+  size = "md",
+  numeric,
+  isClearable,
+  clearLabel,
+  fullWidth = true,
+  className,
+  style,
+  inputRef,
+  onChange,
+  ...rest
+}) {
+  const msg = usePireMessages();
+  const isControlled = rest.value !== void 0;
+  const [ownValue, setOwnValue] = React6.useState(rest.defaultValue ?? "");
+  const currentValue = isControlled ? rest.value : ownValue;
+  const handleChange = (next) => {
+    setOwnValue(next);
+    onChange?.(next);
+  };
+  const takesOverValue = isClearable && !isControlled;
+  const valueProps = takesOverValue ? { value: ownValue, defaultValue: void 0 } : {};
+  const showsClear = isClearable && currentValue !== "" && !rest.isDisabled && !rest.isReadOnly;
+  return /* @__PURE__ */ jsxs10(
+    TextField,
+    {
+      className: cx("pire-field", className),
+      style,
+      onChange: handleChange,
+      validationBehavior: "aria",
+      ...rest,
+      ...valueProps,
+      children: [
+        label ? /* @__PURE__ */ jsxs10(Label, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ jsx17("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs10(
+          Group,
+          {
+            className: "pire-control",
+            "data-size": size,
+            "data-full-width": String(fullWidth),
+            "data-invalid": rest.isInvalid ? "true" : void 0,
+            "data-readonly": rest.isReadOnly ? "true" : void 0,
+            children: [
+              icon ? /* @__PURE__ */ jsx17(Icon, { name: icon, size: 16, className: "pire-leading-icon" }) : null,
+              /* @__PURE__ */ jsx17(AriaInput, { ref: inputRef, className: "pire-input", "data-numeric": numeric ? "true" : void 0 }),
+              showsClear ? /* @__PURE__ */ jsx17(AriaButton4, { className: "pire-input-clear", onPress: () => handleChange(""), children: clearLabel ?? msg.inputClear }) : null,
+              suffix ? /* @__PURE__ */ jsx17("span", { className: "pire-affix", children: suffix }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx17(Text2, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ jsx17(FieldError, { className: "pire-field-error", children: errorMessage })
+      ]
+    }
+  );
+}
+
+// src/components/forms/TextArea.tsx
+import * as React7 from "react";
+import { TextField as TextField2, Label as Label2, TextArea as AriaTextArea, Group as Group2, Text as Text3, FieldError as FieldError2 } from "react-aria-components";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React7.useEffect : React7.useLayoutEffect;
+function TextArea({
+  label,
+  description,
+  errorMessage,
+  size = "md",
+  rows = 3,
+  autoGrow,
+  maxRows,
+  fullWidth = true,
+  className,
+  style,
+  textAreaRef,
+  onChange,
+  ...rest
+}) {
+  const innerRef = React7.useRef(null);
+  const ref = React7.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof textAreaRef === "function") textAreaRef(node);
+    else if (textAreaRef) textAreaRef.current = node;
+  }, [textAreaRef]);
+  const grow = React7.useCallback(() => {
+    const el = innerRef.current;
+    if (!el || !autoGrow) return;
+    const styles = getComputedStyle(el);
+    const lineHeight = Number.parseFloat(styles.lineHeight) || Number.parseFloat(styles.fontSize) * 1.5;
+    const chrome = el.offsetHeight - el.clientHeight;
+    el.style.height = "auto";
+    const wanted = maxRows ? Math.min(el.scrollHeight, Math.ceil(lineHeight * maxRows)) : el.scrollHeight;
+    const next = `${wanted + chrome}px`;
+    if (el.style.height !== next) el.style.height = next;
+  }, [autoGrow, maxRows]);
+  useIsomorphicLayoutEffect(() => {
+    if (!autoGrow) {
+      if (innerRef.current) innerRef.current.style.height = "";
+      return;
+    }
+    grow();
+  }, [autoGrow, grow, rest.value]);
+  return /* @__PURE__ */ jsxs11(
+    TextField2,
+    {
+      className: cx("pire-field", className),
+      style,
+      onChange,
+      validationBehavior: "aria",
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ jsxs11(Label2, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ jsx18("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx18(
+          Group2,
+          {
+            className: "pire-control",
+            "data-size": size,
+            "data-full-width": String(fullWidth),
+            "data-multiline": "true",
+            "data-invalid": rest.isInvalid ? "true" : void 0,
+            "data-readonly": rest.isReadOnly ? "true" : void 0,
+            children: /* @__PURE__ */ jsx18(
+              AriaTextArea,
+              {
+                ref,
+                rows,
+                onInput: autoGrow ? grow : void 0,
+                className: cx("pire-input", "pire-textarea"),
+                "data-auto-grow": autoGrow ? "true" : void 0
+              }
+            )
+          }
+        ),
+        description ? /* @__PURE__ */ jsx18(Text3, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ jsx18(FieldError2, { className: "pire-field-error", children: errorMessage })
+      ]
+    }
+  );
+}
+
 // src/components/forms/Select.tsx
+import {
+  Select as AriaSelect,
+  Label as Label3,
+  Button as AriaButton5,
+  SelectValue,
+  Popover,
+  ListBox,
+  ListBoxItem,
+  Text as Text4,
+  FieldError as FieldError3
+} from "react-aria-components";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
 function Select({
@@ -1024,7 +1050,7 @@ function Select({
           rest.isRequired ? /* @__PURE__ */ jsx19("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
         /* @__PURE__ */ jsxs12(
-          AriaButton4,
+          AriaButton5,
           {
             className: "pire-control",
             "data-size": size,
@@ -1107,7 +1133,7 @@ import {
   ComboBox as AriaComboBox,
   Label as Label5,
   Input as AriaInput2,
-  Button as AriaButton5,
+  Button as AriaButton6,
   Group as Group3,
   Popover as Popover2,
   ListBox as ListBox2,
@@ -1175,7 +1201,7 @@ function ComboBox({
             children: [
               /* @__PURE__ */ jsx23(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
               /* @__PURE__ */ jsx23(AriaInput2, { className: "pire-input", placeholder: rest.placeholder }),
-              /* @__PURE__ */ jsx23(AriaButton5, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx23(Icon, { name: "chevron-down", size: 16 }) })
+              /* @__PURE__ */ jsx23(AriaButton6, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx23(Icon, { name: "chevron-down", size: 16 }) })
             ]
           }
         ),
@@ -1202,12 +1228,12 @@ function ComboBox({
 }
 
 // src/components/forms/MultiComboBox.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import {
   ComboBox as AriaComboBox2,
   Label as Label6,
   Input as AriaInput3,
-  Button as AriaButton6,
+  Button as AriaButton7,
   ButtonContext,
   Group as Group4,
   Popover as Popover3,
@@ -1241,15 +1267,15 @@ function MultiComboBox({
   ...rest
 }) {
   const msg = usePireMessages();
-  const items = React7.useMemo(() => options.map(norm3), [options]);
+  const items = React8.useMemo(() => options.map(norm3), [options]);
   const collection = isFilteredExternally ? { items } : { defaultItems: items };
   const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
-  const [uncontrolled, setUncontrolled] = React7.useState(defaultValue ?? []);
-  const [announcement, setAnnouncement] = React7.useState("");
-  const inputRef = React7.useRef(null);
+  const [uncontrolled, setUncontrolled] = React8.useState(defaultValue ?? []);
+  const [announcement, setAnnouncement] = React8.useState("");
+  const inputRef = React8.useRef(null);
   const raw = value ?? uncontrolled;
   const contentKey = raw.join("\0");
-  const values = React7.useMemo(() => raw, [contentKey]);
+  const values = React8.useMemo(() => raw, [contentKey]);
   const labelOf = (v) => items.find((o) => o.value === v)?.label ?? v;
   const isEditable = !rest.isDisabled && !rest.isReadOnly;
   const commit = (next) => {
@@ -1330,7 +1356,7 @@ function MultiComboBox({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx24(AriaButton6, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx24(Icon, { name: "chevron-down", size: 16 }) })
+              /* @__PURE__ */ jsx24(AriaButton7, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx24(Icon, { name: "chevron-down", size: 16 }) })
             ]
           }
         ),
@@ -1363,7 +1389,7 @@ import {
   Label as Label7,
   Input as AriaInput4,
   Group as Group5,
-  Button as AriaButton7,
+  Button as AriaButton8,
   Text as Text8,
   FieldError as FieldError7
 } from "react-aria-components";
@@ -1398,8 +1424,8 @@ function NumberField({
           /* @__PURE__ */ jsx25(AriaInput4, { className: "pire-input", "data-numeric": "true" }),
           suffix ? /* @__PURE__ */ jsx25("span", { className: "pire-affix", children: suffix }) : null,
           hideStepper ? null : /* @__PURE__ */ jsxs18("span", { className: "pire-stepper", children: [
-            /* @__PURE__ */ jsx25(AriaButton7, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ jsx25(Icon, { name: "plus", size: 10 }) }),
-            /* @__PURE__ */ jsx25(AriaButton7, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ jsx25(Icon, { name: "minus", size: 10 }) })
+            /* @__PURE__ */ jsx25(AriaButton8, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ jsx25(Icon, { name: "plus", size: 10 }) }),
+            /* @__PURE__ */ jsx25(AriaButton8, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ jsx25(Icon, { name: "minus", size: 10 }) })
           ] })
         ]
       }
@@ -1416,7 +1442,7 @@ import {
   Group as Group6,
   DateInput,
   DateSegment,
-  Button as AriaButton8,
+  Button as AriaButton9,
   Popover as Popover4,
   Dialog as AriaDialog,
   Calendar,
@@ -1456,7 +1482,7 @@ function DatePicker({
         "data-readonly": rest.isReadOnly ? "true" : void 0,
         children: [
           /* @__PURE__ */ jsx26(DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx26(DateSegment, { segment, className: "pire-datesegment" }) }),
-          /* @__PURE__ */ jsx26(AriaButton8, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: 16 }) })
+          /* @__PURE__ */ jsx26(AriaButton9, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: 16 }) })
         ]
       }
     ),
@@ -1464,9 +1490,9 @@ function DatePicker({
     /* @__PURE__ */ jsx26(FieldError8, { className: "pire-field-error", children: errorMessage }),
     /* @__PURE__ */ jsx26(Popover4, { className: "pire-popover", children: /* @__PURE__ */ jsx26(AriaDialog, { children: /* @__PURE__ */ jsxs19(Calendar, { className: "pire-calendar", children: [
       /* @__PURE__ */ jsxs19("header", { className: "pire-calendar-head", children: [
-        /* @__PURE__ */ jsx26(AriaButton8, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerPreviousMonth, children: /* @__PURE__ */ jsx26(Icon, { name: "chevron-left", size: 16 }) }),
+        /* @__PURE__ */ jsx26(AriaButton9, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerPreviousMonth, children: /* @__PURE__ */ jsx26(Icon, { name: "chevron-left", size: 16 }) }),
         /* @__PURE__ */ jsx26(Heading2, { className: "pire-calendar-title" }),
-        /* @__PURE__ */ jsx26(AriaButton8, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerNextMonth, children: /* @__PURE__ */ jsx26(Icon, { name: "chevron-right", size: 16 }) })
+        /* @__PURE__ */ jsx26(AriaButton9, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerNextMonth, children: /* @__PURE__ */ jsx26(Icon, { name: "chevron-right", size: 16 }) })
       ] }),
       /* @__PURE__ */ jsxs19(CalendarGrid, { className: "pire-calendar-grid", children: [
         /* @__PURE__ */ jsx26(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx26(CalendarHeaderCell, { children: day }) }),
@@ -1483,7 +1509,7 @@ import {
   Group as Group7,
   DateInput as DateInput2,
   DateSegment as DateSegment2,
-  Button as AriaButton9,
+  Button as AriaButton10,
   Popover as Popover5,
   Dialog as AriaDialog2,
   RangeCalendar,
@@ -1545,7 +1571,7 @@ function DateRangePicker({
               /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", className: "pire-daterange-dash", children: "\u2013" }),
               /* @__PURE__ */ jsx27(DateInput2, { slot: "end", className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx27(DateSegment2, { segment, className: "pire-datesegment" }) }),
               /* @__PURE__ */ jsx27(
-                AriaButton9,
+                AriaButton10,
                 {
                   className: "pire-iconbtn",
                   "data-size": "sm",
@@ -1564,7 +1590,7 @@ function DateRangePicker({
             // Before the calendar in the DOM, so keyboard users reach the shortcut without
             // arrowing through a month first.
             /* @__PURE__ */ jsx27("div", { className: "pire-daterange-presets", role: "group", "aria-label": msg.dateRangePresetsLabel, children: presets.map((preset) => /* @__PURE__ */ jsx27(
-              AriaButton9,
+              AriaButton10,
               {
                 className: "pire-daterange-preset",
                 onPress: () => rest.onChange?.(preset.range()),
@@ -1576,7 +1602,7 @@ function DateRangePicker({
           /* @__PURE__ */ jsxs20(RangeCalendar, { className: "pire-calendar", children: [
             /* @__PURE__ */ jsxs20("header", { className: "pire-calendar-head", children: [
               /* @__PURE__ */ jsx27(
-                AriaButton9,
+                AriaButton10,
                 {
                   slot: "previous",
                   className: "pire-iconbtn",
@@ -1587,7 +1613,7 @@ function DateRangePicker({
               ),
               /* @__PURE__ */ jsx27(Heading3, { className: "pire-calendar-title" }),
               /* @__PURE__ */ jsx27(
-                AriaButton9,
+                AriaButton10,
                 {
                   slot: "next",
                   className: "pire-iconbtn",
@@ -1609,10 +1635,10 @@ function DateRangePicker({
 }
 
 // src/components/forms/ValueHelpField.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/components/patterns/ValueHelpDialog.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 
 // src/components/feedback/Dialog.tsx
 import { ModalOverlay, Modal, Dialog as AriaDialog3, Heading as Heading4 } from "react-aria-components";
@@ -1842,11 +1868,11 @@ function ValueHelpDialog({
   onClose
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React8.useState("");
-  React8.useEffect(() => {
+  const [query, setQuery] = React9.useState("");
+  React9.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const filtered = React8.useMemo(() => {
+  const filtered = React9.useMemo(() => {
     if (isFilteredExternally) return rows;
     const q = query.trim().toLowerCase();
     if (!q) return rows;
@@ -1873,6 +1899,7 @@ function ValueHelpDialog({
             type: "search",
             value: query,
             onChange: handleSearch,
+            isClearable: true,
             placeholder: searchPlaceholder ?? msg.valueHelpDialogSearchPlaceholder,
             autoFocus: true
           }
@@ -1927,7 +1954,7 @@ function ValueHelpField({
   style
 }) {
   const msg = usePireMessages();
-  const [open, setOpen] = React9.useState(false);
+  const [open, setOpen] = React10.useState(false);
   return /* @__PURE__ */ jsxs24("div", { className: cx(className), style, children: [
     /* @__PURE__ */ jsx32(
       Input,
@@ -1983,7 +2010,7 @@ function ValueHelpField({
 }
 
 // src/components/forms/FileUpload.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { FileTrigger, Text as Text11 } from "react-aria-components";
 
 // src/components/feedback/ProgressBar.tsx
@@ -2073,10 +2100,10 @@ function FileUpload({
   style
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React10.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React11.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React10.useRef([]);
-  React10.useEffect(() => () => {
+  const created = React11.useRef([]);
+  React11.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -2140,7 +2167,7 @@ function FileUpload({
 }
 
 // src/components/navigation/ShellBar.tsx
-import { MenuTrigger, Button as AriaButton10, Popover as Popover6 } from "react-aria-components";
+import { MenuTrigger, Button as AriaButton11, Popover as Popover6 } from "react-aria-components";
 import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var initials2 = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 function ShellBar({
@@ -2173,7 +2200,7 @@ function ShellBar({
       // rendered here rather than expected from the consumer so the panel keeps shell placement.
       /* @__PURE__ */ jsxs27(MenuTrigger, { children: [
         /* @__PURE__ */ jsx35(
-          AriaButton10,
+          AriaButton11,
           {
             className: "pire-avatar pire-avatar-trigger",
             "aria-label": (userMenuLabel ?? msg.shellBarUserMenu).replace("{user}", user),
@@ -2187,9 +2214,9 @@ function ShellBar({
 }
 
 // src/components/navigation/SideNav.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import {
-  Button as AriaButton11,
+  Button as AriaButton12,
   Disclosure,
   DisclosureGroup,
   DisclosurePanel,
@@ -2287,10 +2314,10 @@ function SideNav({
   const msg = usePireMessages();
   const activeParent = findActiveParent(groups, value);
   const isControlled = expandedIds != null;
-  const [ownExpanded, setOwnExpanded] = React11.useState(
+  const [ownExpanded, setOwnExpanded] = React12.useState(
     () => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
   );
-  const [lastValue, setLastValue] = React11.useState(value);
+  const [lastValue, setLastValue] = React12.useState(value);
   if (value !== lastValue) {
     setLastValue(value);
     if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
@@ -2311,7 +2338,7 @@ function SideNav({
   const renderRow = (item, onPress, isGroup) => {
     const selected = !isGroup && item.id === value;
     const button = /* @__PURE__ */ jsxs29(
-      AriaButton11,
+      AriaButton12,
       {
         className: "pire-sidenav-item",
         "data-selected": selected ? "true" : void 0,
@@ -2331,7 +2358,7 @@ function SideNav({
   };
   const renderRailFlyout = (item) => /* @__PURE__ */ jsxs29(MenuTrigger2, { children: [
     /* @__PURE__ */ jsx37(
-      AriaButton11,
+      AriaButton12,
       {
         className: "pire-sidenav-item",
         "aria-label": item.label,
@@ -2351,7 +2378,7 @@ function SideNav({
   ] }, item.id);
   const renderSection = (item) => /* @__PURE__ */ jsxs29(Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
     /* @__PURE__ */ jsxs29(
-      AriaButton11,
+      AriaButton12,
       {
         slot: "trigger",
         className: "pire-sidenav-item",
@@ -2368,7 +2395,7 @@ function SideNav({
     /* @__PURE__ */ jsx37(DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
       const selected = child.id === value;
       return /* @__PURE__ */ jsxs29(
-        AriaButton11,
+        AriaButton12,
         {
           className: "pire-sidenav-item pire-sidenav-subitem",
           "data-selected": selected ? "true" : void 0,
@@ -2554,7 +2581,7 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
 }
 
 // src/components/feedback/Toast.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var KIND_ICON2 = {
   info: "info",
@@ -2580,32 +2607,32 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
     }
   );
 }
-var ToastContext = React12.createContext(null);
+var ToastContext = React13.createContext(null);
 function ToastProvider({ children, timeout = 6e3 }) {
   const msg = usePireMessages();
-  const [toasts, setToasts] = React12.useState([]);
-  const close = React12.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
-  const add = React12.useCallback((toast) => {
+  const [toasts, setToasts] = React13.useState([]);
+  const close = React13.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const add = React13.useCallback((toast) => {
     const id = Math.random().toString(36).slice(2);
     setToasts((t) => [...t, { ...toast, id }]);
     const ms = toast.timeout ?? timeout;
     if (ms > 0) setTimeout(() => close(id), ms);
     return id;
   }, [close, timeout]);
-  const value = React12.useMemo(() => ({ add, close }), [add, close]);
+  const value = React13.useMemo(() => ({ add, close }), [add, close]);
   return /* @__PURE__ */ jsxs34(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ jsx42("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ jsx42(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
-  const ctx = React12.useContext(ToastContext);
+  const ctx = React13.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
   return ctx;
 }
 
 // src/components/data/KpiTile.tsx
-import { Button as AriaButton12 } from "react-aria-components";
+import { Button as AriaButton13 } from "react-aria-components";
 import { Fragment as Fragment3, jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 function KpiTile({
   label,
@@ -2638,7 +2665,7 @@ function KpiTile({
     footnote ? /* @__PURE__ */ jsx43("span", { className: "pire-kpi-foot", children: footnote }) : null
   ] });
   const props = { className: cx("pire-kpi", className), "data-status": status, style };
-  return onPress ? /* @__PURE__ */ jsx43(AriaButton12, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ jsx43("div", { ...props, children: body });
+  return onPress ? /* @__PURE__ */ jsx43(AriaButton13, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ jsx43("div", { ...props, children: body });
 }
 
 // src/components/data/ObjectHeader.tsx
@@ -2949,14 +2976,14 @@ function BarChart({
 }
 
 // src/components/data/LineChart.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
 var PLOT_INSET = { top: 10, right: 14, bottom: 24, left: 58 };
 var MARKER_LIMIT = 20;
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React13.useEffect : React13.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React14.useEffect : React14.useLayoutEffect;
 function useMeasuredWidth() {
-  const ref = React13.useRef(null);
-  const [width, setWidth] = React13.useState(0);
+  const ref = React14.useRef(null);
+  const [width, setWidth] = React14.useState(0);
   useIsomorphicLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -3119,7 +3146,7 @@ function LineChart({
 }
 
 // src/components/data/DonutChart.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 var SEGMENT_GAP_DEGREES = 1.5;
 function DonutChart({
@@ -3140,7 +3167,7 @@ function DonutChart({
 }) {
   const label = rest["aria-label"];
   const msg = usePireMessages();
-  const [hoveredIndex, setHoveredIndex] = React14.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React15.useState(null);
   warnOnDonutShape(series, categories.length, label);
   const values = (series[0]?.values ?? []).slice(0, categories.length);
   const segments = categories.map((category, index) => ({ category, index, value: values[index] ?? 0 })).filter((segment) => segment.value > 0);
@@ -3218,14 +3245,14 @@ function colorForSegment(index) {
 }
 
 // src/components/data/LinkList.tsx
-import { Button as AriaButton13 } from "react-aria-components";
+import { Button as AriaButton14 } from "react-aria-components";
 import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
 function LinkList({ items, onSelect, emphasis = "key", className, ...rest }) {
   return /* @__PURE__ */ jsx52("div", { className: cx("pire-linklist", className), role: "list", "data-emphasis": emphasis, ...rest, children: items.map((item) => {
     const keySlot = item.key ? /* @__PURE__ */ jsx52("span", { className: "pire-linklist-key", children: item.key }) : null;
     const textSlot = item.text ? /* @__PURE__ */ jsx52("span", { className: "pire-linklist-text", children: item.text }) : null;
     const [first, second] = emphasis === "text" ? [textSlot, keySlot] : [keySlot, textSlot];
-    return /* @__PURE__ */ jsx52("div", { role: "listitem", className: "pire-linklist-row", children: /* @__PURE__ */ jsxs44(AriaButton13, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
+    return /* @__PURE__ */ jsx52("div", { role: "listitem", className: "pire-linklist-row", children: /* @__PURE__ */ jsxs44(AriaButton14, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
       item.icon ? /* @__PURE__ */ jsx52(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
       first,
       second,
@@ -3342,7 +3369,7 @@ function ConfirmDialog({
 }
 
 // src/components/patterns/CommandPalette.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import {
   Autocomplete,
   ModalOverlay as ModalOverlay2,
@@ -3376,17 +3403,17 @@ function CommandPalette({
   style
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React15.useState("");
+  const [query, setQuery] = React16.useState("");
   const { contains } = useFilter({ sensitivity: "base" });
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const searchableById = React15.useMemo(() => {
+  const searchableById = React16.useMemo(() => {
     const byId = /* @__PURE__ */ new Map();
     for (const group of groups) for (const item of group.items) byId.set(item.id, searchableText(item));
     return byId;
   }, [groups]);
-  const filter = React15.useCallback((textValue, inputValue, node) => {
+  const filter = React16.useCallback((textValue, inputValue, node) => {
     if (node.parentKey === RESULTS_SECTION_KEY) return true;
     return contains(searchableById.get(String(node.key)) ?? textValue, inputValue);
   }, [contains, searchableById]);
@@ -3469,9 +3496,9 @@ function CommandPalette({
   );
 }
 function useCommandPaletteShortcut(onTrigger, { key = "k", isDisabled } = {}) {
-  const handler = React15.useRef(onTrigger);
+  const handler = React16.useRef(onTrigger);
   handler.current = onTrigger;
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (isDisabled) return;
     const onKeyDown = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
@@ -3525,7 +3552,7 @@ function EmptyState({ icon = "file-text", title, action, compact, children, clas
 }
 
 // src/components/patterns/FileDropZone.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { DropZone, FileTrigger as FileTrigger2, isFileDropItem } from "react-aria-components";
 import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
 var isImage2 = (file) => file.type.startsWith("image/");
@@ -3553,10 +3580,10 @@ function FileDropZone({
   style
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React16.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React17.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React16.useRef([]);
-  React16.useEffect(() => () => {
+  const created = React17.useRef([]);
+  React17.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {