@orianatech/pire 0.20.0 → 0.21.0

package/dist/index.js

@@ -461,6 +461,7 @@ var IconButton = React3.forwardRef(function IconButton2({
 });
 
 // src/components/core/Badge.tsx
+import * as React4 from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var STATUS_ICON = {
   positive: "check-circle-2",
@@ -469,18 +470,19 @@ var STATUS_ICON = {
   informative: "info",
   neutral: "circle"
 };
-function Badge({ children, status = "neutral", showIcon = true, className, ...rest }) {
-  return /* @__PURE__ */ jsxs4("span", { className: cx("pire-badge", className), "data-status": status, ...rest, children: [
+var Badge = React4.forwardRef(function Badge2({ children, status = "neutral", showIcon = true, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs4("span", { ref, className: cx("pire-badge", className), "data-status": status, ...rest, children: [
     showIcon ? /* @__PURE__ */ jsx5(Icon, { name: STATUS_ICON[status], size: 12 }) : null,
     children
   ] });
-}
+});
 
 // src/components/core/Tag.tsx
+import * as React5 from "react";
 import { Button as AriaButton3 } from "react-aria-components";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function Tag({ children, onRemove, isDisabled, category, className, ...rest }) {
-  return /* @__PURE__ */ jsxs5("span", { className: cx("pire-tag", className), "data-disabled": isDisabled ? "true" : void 0, ...rest, children: [
+var Tag = React5.forwardRef(function Tag2({ children, onRemove, isDisabled, category, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs5("span", { ref, className: cx("pire-tag", className), "data-disabled": isDisabled ? "true" : void 0, ...rest, children: [
     category ? /* @__PURE__ */ jsx6("span", { className: "pire-tag-swatch", "data-category": category, "aria-hidden": "true" }) : null,
     children,
     onRemove ? /* @__PURE__ */ jsx6(
@@ -494,7 +496,7 @@ function Tag({ children, onRemove, isDisabled, category, className, ...rest }) {
       }
     ) : null
   ] });
-}
+});
 
 // src/components/core/Card.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -514,11 +516,11 @@ function Card({ title, subtitle, icon, actions, footer, interactive, children, c
 }
 
 // src/components/core/Avatar.tsx
-import * as React4 from "react";
+import * as React6 from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var initials = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 function Avatar({ name, size = "md", src, className, ...rest }) {
-  const [failed, setFailed] = React4.useState(false);
+  const [failed, setFailed] = React6.useState(false);
   return /* @__PURE__ */ jsx8("span", { className: cx("pire-avatar", className), "data-size": size, role: "img", "aria-label": name, ...rest, children: src && !failed ? /* @__PURE__ */ jsx8(
     "img",
     {
@@ -531,7 +533,7 @@ function Avatar({ name, size = "md", src, className, ...rest }) {
 }
 
 // src/components/core/SegmentedControl.tsx
-import * as React5 from "react";
+import * as React7 from "react";
 import { ToggleButtonGroup, ToggleButton } from "react-aria-components";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function SegmentedControl({
@@ -545,7 +547,7 @@ function SegmentedControl({
   style,
   ...rest
 }) {
-  const selected = React5.useMemo(() => new Set(value ? [value] : defaultValue ? [defaultValue] : []), [value, defaultValue]);
+  const selected = React7.useMemo(() => new Set(value ? [value] : defaultValue ? [defaultValue] : []), [value, defaultValue]);
   return /* @__PURE__ */ jsx9(
     ToggleButtonGroup,
     {
@@ -579,8 +581,9 @@ function SegmentedControl({
 }
 
 // src/components/core/Text.tsx
+import * as React8 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-function Text({
+var Text = React8.forwardRef(function Text2({
   size = "body",
   color = "primary",
   weight = "regular",
@@ -591,12 +594,13 @@ function Text({
   className,
   style,
   ...rest
-}) {
+}, ref) {
   const lineClamp = typeof truncate === "number" ? truncate : truncate ? 1 : void 0;
   const clampStyle = lineClamp == null ? style : { ["--pire-text-clamp"]: lineClamp, ...style };
   return /* @__PURE__ */ jsx10(
     Wrapper,
     {
+      ref,
       className: cx("pire-text", className),
       "data-size": size,
       "data-color": color,
@@ -608,10 +612,10 @@ function Text({
       ...rest
     }
   );
-}
-function Strong({ className, ...rest }) {
-  return /* @__PURE__ */ jsx10(Text, { elementType: "span", weight: "strong", className, ...rest });
-}
+});
+var Strong = React8.forwardRef(function Strong2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx10(Text, { ref, elementType: "span", weight: "strong", className, ...rest });
+});
 
 // src/components/core/Heading.tsx
 import { Heading as AriaHeading } from "react-aria-components";
@@ -707,19 +711,19 @@ function FormField({ label, htmlFor, isRequired, hint, error, layout = "stacked"
 }
 
 // src/components/forms/Input.tsx
-import * as React7 from "react";
+import * as React10 from "react";
 import {
   TextField,
   Label,
   Input as AriaInput,
   Group,
-  Text as Text2,
+  Text as Text3,
   FieldError,
   Button as AriaButton4
 } from "react-aria-components";
 
 // src/i18n/PireIntlProvider.tsx
-import * as React6 from "react";
+import * as React9 from "react";
 
 // src/i18n/messages.ts
 var enMessages = {
@@ -730,6 +734,7 @@ var enMessages = {
   dataTableSelectRow: "Select row",
   dataTableLoading: "Loading records",
   dataTableSummaryRow: "Summary",
+  dataTableEmpty: "No records match the current filters.",
   dialogClose: "Close",
   sidePanelClose: "Close panel",
   inlineMessageDismiss: "Dismiss message",
@@ -789,6 +794,7 @@ var esMessages = {
   dataTableSelectRow: "Seleccionar fila",
   dataTableLoading: "Cargando registros",
   dataTableSummaryRow: "Resumen",
+  dataTableEmpty: "Ning\xFAn registro coincide con los filtros actuales.",
   dialogClose: "Cerrar",
   sidePanelClose: "Cerrar panel",
   inlineMessageDismiss: "Descartar mensaje",
@@ -843,19 +849,19 @@ var esMessages = {
 
 // src/i18n/PireIntlProvider.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var MessagesContext = React6.createContext(enMessages);
+var MessagesContext = React9.createContext(enMessages);
 function PireIntlProvider({ messages, children }) {
-  const value = React6.useMemo(
+  const value = React9.useMemo(
     () => messages ? { ...enMessages, ...messages } : enMessages,
     [messages]
   );
   return /* @__PURE__ */ jsx16(MessagesContext.Provider, { value, children });
 }
 function usePireMessages() {
-  return React6.useContext(MessagesContext);
+  return React9.useContext(MessagesContext);
 }
 function useMessage(key, override) {
-  const messages = React6.useContext(MessagesContext);
+  const messages = React9.useContext(MessagesContext);
   return override ?? messages[key];
 }
 
@@ -880,7 +886,7 @@ function Input({
 }) {
   const msg = usePireMessages();
   const isControlled = rest.value !== void 0;
-  const [ownValue, setOwnValue] = React7.useState(rest.defaultValue ?? "");
+  const [ownValue, setOwnValue] = React10.useState(rest.defaultValue ?? "");
   const currentValue = isControlled ? rest.value : ownValue;
   const handleChange = (next) => {
     setOwnValue(next);
@@ -919,7 +925,7 @@ function Input({
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsx17(Text2, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        description ? /* @__PURE__ */ jsx17(Text3, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx17(FieldError, { className: "pire-field-error", children: errorMessage })
       ]
     }
@@ -927,10 +933,10 @@ function Input({
 }
 
 // src/components/forms/TextArea.tsx
-import * as React8 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 * as React11 from "react";
+import { TextField as TextField2, Label as Label2, TextArea as AriaTextArea, Group as Group2, Text as Text4, FieldError as FieldError2 } from "react-aria-components";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect = typeof document === "undefined" ? React8.useEffect : React8.useLayoutEffect;
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React11.useEffect : React11.useLayoutEffect;
 function TextArea({
   label,
   description,
@@ -946,13 +952,13 @@ function TextArea({
   onChange,
   ...rest
 }) {
-  const innerRef = React8.useRef(null);
-  const ref = React8.useCallback((node) => {
+  const innerRef = React11.useRef(null);
+  const ref = React11.useCallback((node) => {
     innerRef.current = node;
     if (typeof textAreaRef === "function") textAreaRef(node);
     else if (textAreaRef) textAreaRef.current = node;
   }, [textAreaRef]);
-  const grow = React8.useCallback(() => {
+  const grow = React11.useCallback(() => {
     const el = innerRef.current;
     if (!el || !autoGrow) return;
     const styles = getComputedStyle(el);
@@ -1004,7 +1010,7 @@ function TextArea({
             )
           }
         ),
-        description ? /* @__PURE__ */ jsx18(Text3, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        description ? /* @__PURE__ */ jsx18(Text4, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx18(FieldError2, { className: "pire-field-error", children: errorMessage })
       ]
     }
@@ -1020,7 +1026,7 @@ import {
   Popover,
   ListBox,
   ListBoxItem,
-  Text as Text4,
+  Text as Text5,
   FieldError as FieldError3
 } from "react-aria-components";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -1073,7 +1079,7 @@ function Select({
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsx19(Text4, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        description ? /* @__PURE__ */ jsx19(Text5, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx19(FieldError3, { className: "pire-field-error", children: errorMessage }),
         /* @__PURE__ */ jsx19(Popover, { className: "pire-popover", children: /* @__PURE__ */ jsx19(
           ListBox,
@@ -1107,7 +1113,7 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio,
   Label as Label4,
-  Text as Text5,
+  Text as Text6,
   FieldError as FieldError4
 } from "react-aria-components";
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -1115,7 +1121,7 @@ function RadioGroup({ label, description, errorMessage, children, className, ...
   return /* @__PURE__ */ jsxs14(AriaRadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
     label ? /* @__PURE__ */ jsx21(Label4, { className: "pire-field-label", children: label }) : null,
     /* @__PURE__ */ jsx21("div", { className: "pire-radiogroup", children }),
-    description ? /* @__PURE__ */ jsx21(Text5, { slot: "description", className: "pire-field-hint", children: description }) : null,
+    description ? /* @__PURE__ */ jsx21(Text6, { slot: "description", className: "pire-field-hint", children: description }) : null,
     /* @__PURE__ */ jsx21(FieldError4, { className: "pire-field-error", children: errorMessage })
   ] });
 }
@@ -1140,6 +1146,7 @@ function Switch({ label, children, className, ...rest }) {
 }
 
 // src/components/forms/ComboBox.tsx
+import * as React12 from "react";
 import {
   ComboBox as AriaComboBox,
   Label as Label5,
@@ -1149,7 +1156,7 @@ import {
   Popover as Popover2,
   ListBox as ListBox2,
   ListBoxItem as ListBoxItem2,
-  Text as Text6,
+  Text as Text7,
   FieldError as FieldError5
 } from "react-aria-components";
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -1170,6 +1177,8 @@ function ComboBox({
   isLoading,
   loadingLabel,
   emptyLabel,
+  isClearable,
+  clearLabel,
   onLoadMore,
   className,
   style,
@@ -1177,6 +1186,23 @@ function ComboBox({
 }) {
   const msg = usePireMessages();
   const items = options.map(norm2);
+  const isSelectionControlled = value !== void 0;
+  const [ownSelection, setOwnSelection] = React12.useState(defaultValue ?? null);
+  const takesOverSelection = isClearable === true && !isSelectionControlled;
+  const currentSelection = isSelectionControlled ? value : ownSelection;
+  const [typedText, setTypedText] = React12.useState("");
+  const currentText = inputValue !== void 0 ? inputValue : typedText;
+  const handleInputChange = isClearable ? (text) => {
+    setTypedText(text);
+    onInputChange?.(text);
+  } : onInputChange;
+  const showsClear = isClearable && !rest.isDisabled && !rest.isReadOnly && (currentText !== "" || currentSelection != null);
+  const clear = () => {
+    setTypedText("");
+    if (takesOverSelection) setOwnSelection(null);
+    onChange?.(null);
+    onInputChange?.("");
+  };
   const collection = isFilteredExternally ? { items } : { defaultItems: items };
   const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
   return /* @__PURE__ */ jsxs16(
@@ -1184,14 +1210,16 @@ function ComboBox({
     {
       className: cx("pire-field", className),
       style,
-      selectedKey: value,
-      defaultSelectedKey: defaultValue,
+      selectedKey: takesOverSelection ? ownSelection : value,
+      defaultSelectedKey: takesOverSelection ? void 0 : defaultValue,
       onSelectionChange: (k) => {
         if (isLoading) return;
-        onChange?.(k == null ? null : String(k));
+        const next = k == null ? null : String(k);
+        if (takesOverSelection) setOwnSelection(next);
+        onChange?.(next);
       },
       inputValue,
-      onInputChange,
+      onInputChange: handleInputChange,
       ...collection,
       allowsEmptyCollection: isFilteredExternally || isLoading,
       menuTrigger: "input",
@@ -1212,11 +1240,12 @@ function ComboBox({
             children: [
               /* @__PURE__ */ jsx23(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
               /* @__PURE__ */ jsx23(AriaInput2, { className: "pire-input", placeholder: rest.placeholder }),
+              showsClear ? /* @__PURE__ */ jsx23(AriaButton6, { className: "pire-input-clear", slot: null, onPress: clear, children: clearLabel ?? msg.inputClear }) : null,
               /* @__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 }) })
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsx23(Text6, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        description ? /* @__PURE__ */ jsx23(Text7, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx23(FieldError5, { className: "pire-field-error", children: errorMessage }),
         /* @__PURE__ */ jsx23(Popover2, { className: "pire-popover", children: /* @__PURE__ */ jsx23(
           ListBox2,
@@ -1239,7 +1268,7 @@ function ComboBox({
 }
 
 // src/components/forms/MultiComboBox.tsx
-import * as React9 from "react";
+import * as React13 from "react";
 import {
   ComboBox as AriaComboBox2,
   Label as Label6,
@@ -1250,7 +1279,7 @@ import {
   Popover as Popover3,
   ListBox as ListBox3,
   ListBoxItem as ListBoxItem3,
-  Text as Text7,
+  Text as Text8,
   FieldError as FieldError6,
   VisuallyHidden
 } from "react-aria-components";
@@ -1278,15 +1307,15 @@ function MultiComboBox({
   ...rest
 }) {
   const msg = usePireMessages();
-  const items = React9.useMemo(() => options.map(norm3), [options]);
+  const items = React13.useMemo(() => options.map(norm3), [options]);
   const collection = isFilteredExternally ? { items } : { defaultItems: items };
   const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
-  const [uncontrolled, setUncontrolled] = React9.useState(defaultValue ?? []);
-  const [announcement, setAnnouncement] = React9.useState("");
-  const inputRef = React9.useRef(null);
+  const [uncontrolled, setUncontrolled] = React13.useState(defaultValue ?? []);
+  const [announcement, setAnnouncement] = React13.useState("");
+  const inputRef = React13.useRef(null);
   const raw = value ?? uncontrolled;
   const contentKey = raw.join("\0");
-  const values = React9.useMemo(() => raw, [contentKey]);
+  const values = React13.useMemo(() => raw, [contentKey]);
   const labelOf = (v) => items.find((o) => o.value === v)?.label ?? v;
   const isEditable = !rest.isDisabled && !rest.isReadOnly;
   const commit = (next) => {
@@ -1372,7 +1401,7 @@ function MultiComboBox({
           }
         ),
         /* @__PURE__ */ jsx24(VisuallyHidden, { children: /* @__PURE__ */ jsx24("span", { "aria-live": "polite", children: announcement }) }),
-        description ? /* @__PURE__ */ jsx24(Text7, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        description ? /* @__PURE__ */ jsx24(Text8, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx24(FieldError6, { className: "pire-field-error", children: errorMessage }),
         /* @__PURE__ */ jsx24(Popover3, { className: "pire-popover", children: /* @__PURE__ */ jsx24(
           ListBox3,
@@ -1401,10 +1430,23 @@ import {
   Input as AriaInput4,
   Group as Group5,
   Button as AriaButton8,
-  Text as Text8,
-  FieldError as FieldError7
+  Text as Text9,
+  FieldError as FieldError7,
+  useLocale
 } from "react-aria-components";
 import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+function decimalSeparatorFor(locale) {
+  return new Intl.NumberFormat(locale).formatToParts(1.1).find((part) => part.type === "decimal")?.value ?? ".";
+}
+function typeIntoInput(el, text) {
+  const start = el.selectionStart ?? el.value.length;
+  const end = el.selectionEnd ?? start;
+  const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  setValue?.call(el, el.value.slice(0, start) + text + el.value.slice(end));
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  const caret = start + text.length;
+  el.setSelectionRange(caret, caret);
+}
 function NumberField({
   label,
   suffix,
@@ -1418,6 +1460,25 @@ function NumberField({
   ...rest
 }) {
   const msg = usePireMessages();
+  const { locale } = useLocale();
+  const handleDecimalKey = (event) => {
+    if (event.key !== "." || event.ctrlKey || event.metaKey || event.altKey) {
+      return;
+    }
+    if (rest.isReadOnly || rest.isDisabled) {
+      return;
+    }
+    const separator = decimalSeparatorFor(locale);
+    if (separator === ".") {
+      return;
+    }
+    const { maximumFractionDigits } = new Intl.NumberFormat(locale, rest.formatOptions).resolvedOptions();
+    if (!maximumFractionDigits) {
+      return;
+    }
+    event.preventDefault();
+    typeIntoInput(event.currentTarget, separator);
+  };
   return /* @__PURE__ */ jsxs18(AriaNumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
     label ? /* @__PURE__ */ jsxs18(Label7, { className: "pire-field-label", children: [
       label,
@@ -1432,7 +1493,7 @@ function NumberField({
         "data-invalid": rest.isInvalid ? "true" : void 0,
         "data-readonly": rest.isReadOnly ? "true" : void 0,
         children: [
-          /* @__PURE__ */ jsx25(AriaInput4, { className: "pire-input", "data-numeric": "true" }),
+          /* @__PURE__ */ jsx25(AriaInput4, { className: "pire-input", "data-numeric": "true", onKeyDown: handleDecimalKey }),
           suffix ? /* @__PURE__ */ jsx25("span", { className: "pire-affix", children: suffix }) : null,
           hideStepper ? null : /* @__PURE__ */ jsxs18("span", { className: "pire-stepper", children: [
             /* @__PURE__ */ jsx25(AriaButton8, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ jsx25(Icon, { name: "plus", size: 10 }) }),
@@ -1441,7 +1502,7 @@ function NumberField({
         ]
       }
     ),
-    description ? /* @__PURE__ */ jsx25(Text8, { slot: "description", className: "pire-field-hint", children: description }) : null,
+    description ? /* @__PURE__ */ jsx25(Text9, { slot: "description", className: "pire-field-hint", children: description }) : null,
     /* @__PURE__ */ jsx25(FieldError7, { className: "pire-field-error", children: errorMessage })
   ] });
 }
@@ -1463,7 +1524,7 @@ import {
   CalendarGridBody,
   CalendarCell,
   Heading as Heading2,
-  Text as Text9,
+  Text as Text10,
   FieldError as FieldError8
 } from "react-aria-components";
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -1497,7 +1558,7 @@ function DatePicker({
         ]
       }
     ),
-    description ? /* @__PURE__ */ jsx26(Text9, { slot: "description", className: "pire-field-hint", children: description }) : null,
+    description ? /* @__PURE__ */ jsx26(Text10, { slot: "description", className: "pire-field-hint", children: description }) : null,
     /* @__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: [
@@ -1530,7 +1591,7 @@ import {
   CalendarGridBody as CalendarGridBody2,
   CalendarCell as CalendarCell2,
   Heading as Heading3,
-  Text as Text10,
+  Text as Text11,
   FieldError as FieldError9
 } from "react-aria-components";
 import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -1594,7 +1655,7 @@ function DateRangePicker({
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsx27(Text10, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        description ? /* @__PURE__ */ jsx27(Text11, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx27(FieldError9, { className: "pire-field-error", children: errorMessage }),
         /* @__PURE__ */ jsx27(Popover5, { className: "pire-popover", children: /* @__PURE__ */ jsxs20(AriaDialog2, { className: "pire-daterange-dialog", children: [
           presets?.length ? (
@@ -1646,13 +1707,13 @@ function DateRangePicker({
 }
 
 // src/components/forms/ValueHelpField.tsx
-import * as React12 from "react";
+import * as React16 from "react";
 
 // src/components/patterns/ValueHelpDialog.tsx
-import * as React11 from "react";
+import * as React15 from "react";
 
 // src/components/feedback/Dialog.tsx
-import * as React10 from "react";
+import * as React14 from "react";
 import { ModalOverlay, Modal, Dialog as AriaDialog3, Heading as Heading4 } from "react-aria-components";
 import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function DialogTitle({ children, className }) {
@@ -1686,8 +1747,8 @@ function Dialog({
     onClose?.();
     onOpenChange?.(false);
   };
-  const parts = React10.Children.toArray(children);
-  const slotOf = (type) => parts.find((node) => React10.isValidElement(node) && node.type === type);
+  const parts = React14.Children.toArray(children);
+  const slotOf = (type) => parts.find((node) => React14.isValidElement(node) && node.type === type);
   const titleSlot = slotOf(DialogTitle);
   const descriptionSlot = slotOf(DialogDescription);
   const bodySlot = slotOf(DialogBody);
@@ -1791,7 +1852,7 @@ function DataTable({
   onSortChange,
   onRowAction,
   stickyHeader = true,
-  emptyLabel = "No records match the current filters.",
+  emptyLabel,
   isLoading,
   loadingRowCount,
   loadingLabel,
@@ -1804,6 +1865,8 @@ function DataTable({
   ...rest
 }) {
   const msg = usePireMessages();
+  const selectionMode = selectable === true || selectable === "multiple" ? "multiple" : selectable === "single" ? "single" : "none";
+  const hasCheckboxColumn = selectionMode === "multiple";
   const sortDescriptor = sort ? { column: sort.key, direction: sort.dir === "asc" ? "ascending" : "descending" } : void 0;
   const handleSelection = (keys) => {
     if (keys === "all") return onSelectionChange?.(rows.map((r) => r.id));
@@ -1811,14 +1874,14 @@ function DataTable({
   };
   const skeletonRows = loadingRowCount ?? (rows.length || 5);
   const skeletonColumns = [
-    ...selectable ? [{ width: 44 }] : [],
+    ...hasCheckboxColumn ? [{ width: 44 }] : [],
     ...columns.map((c) => ({ width: c.width, align: c.align, numeric: c.numeric }))
   ];
   const body = isLoading ? [] : rows;
   const presentation = new Map(rows.map((row) => [row.id, rowProps?.(row) ?? {}]));
   const disabledKeys = rows.filter((row) => presentation.get(row.id)?.isDisabled).map((row) => row.id);
   const expanded = new Set((expandedIds ?? []).map(String));
-  const spanAll = columns.length + (selectable ? 1 : 0);
+  const spanAll = columns.length + (hasCheckboxColumn ? 1 : 0);
   const expandedKey = (id) => `${id}::__pire_expanded__`;
   return /* @__PURE__ */ jsx30(
     "div",
@@ -1835,7 +1898,7 @@ function DataTable({
           "data-sticky": String(stickyHeader),
           "aria-label": rest["aria-label"],
           disabledKeys: disabledKeys.length ? new Set(disabledKeys) : void 0,
-          selectionMode: selectable ? "multiple" : "none",
+          selectionMode,
           selectedKeys: selected ? new Set(selected) : void 0,
           onSelectionChange: handleSelection,
           sortDescriptor,
@@ -1846,13 +1909,13 @@ function DataTable({
           } : void 0,
           children: [
             /* @__PURE__ */ jsxs22(TableHeader, { className: "pire-thead-row", children: [
-              selectable ? /* @__PURE__ */ jsx30(Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ jsx30(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectAll }) }) : null,
+              hasCheckboxColumn ? /* @__PURE__ */ jsx30(Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ jsx30(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectAll }) }) : null,
               columns.map((c, i) => /* @__PURE__ */ jsx30(
                 Column,
                 {
                   id: c.key,
                   className: "pire-th",
-                  isRowHeader: i === 0 && !selectable,
+                  isRowHeader: i === 0 && !hasCheckboxColumn,
                   allowsSorting: c.sortable,
                   width: c.width,
                   "data-align": c.numeric || c.align === "right" ? "right" : c.align,
@@ -1878,7 +1941,7 @@ function DataTable({
                 // biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows are positional.
                 /* @__PURE__ */ jsx30(SkeletonTableRow, { columns: skeletonColumns, density }, i)
               ))
-            ] }) : /* @__PURE__ */ jsx30("div", { className: "pire-table-empty", children: emptyLabel }), children: body.flatMap((row) => {
+            ] }) : /* @__PURE__ */ jsx30("div", { className: "pire-table-empty", children: emptyLabel ?? msg.dataTableEmpty }), children: body.flatMap((row) => {
               const rowIsDisabled = presentation.get(row.id)?.isDisabled;
               const record = /* @__PURE__ */ jsxs22(
                 Row,
@@ -1887,7 +1950,7 @@ function DataTable({
                   className: cx("pire-tr", presentation.get(row.id)?.className),
                   "data-pressable": onRowAction && !rowIsDisabled ? "true" : void 0,
                   children: [
-                    selectable ? /* @__PURE__ */ jsx30(Cell, { className: "pire-td", children: /* @__PURE__ */ jsx30(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
+                    hasCheckboxColumn ? /* @__PURE__ */ jsx30(Cell, { className: "pire-td", children: /* @__PURE__ */ jsx30(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
                     columns.map((c) => /* @__PURE__ */ jsx30(
                       Cell,
                       {
@@ -1906,14 +1969,14 @@ function DataTable({
               return [record, /* @__PURE__ */ jsx30(Row, { id: expandedKey(row.id), className: "pire-tr-expanded", children: /* @__PURE__ */ jsx30(Cell, { className: "pire-td-expanded", colSpan: spanAll, children: renderExpanded(row) }) }, expandedKey(row.id))];
             }) }),
             footer && !isLoading ? /* @__PURE__ */ jsx30(TableFooter, { className: "pire-tfoot", children: /* @__PURE__ */ jsxs22(Row, { id: "__pire_footer__", className: "pire-tr-footer", children: [
-              selectable ? /* @__PURE__ */ jsx30(Cell, { className: "pire-tf" }) : null,
+              hasCheckboxColumn ? /* @__PURE__ */ jsx30(Cell, { className: "pire-tf" }) : null,
               columns.map((c, i) => /* @__PURE__ */ jsx30(
                 Cell,
                 {
                   className: "pire-tf",
                   "data-numeric": c.numeric ? "true" : void 0,
                   style: { textAlign: c.align && !c.numeric ? c.align : void 0 },
-                  children: footer[c.key] ?? (i === 0 && !selectable ? /* @__PURE__ */ jsx30("span", { className: "pire-sr-only", children: msg.dataTableSummaryRow }) : null)
+                  children: footer[c.key] ?? (i === 0 && !hasCheckboxColumn ? /* @__PURE__ */ jsx30("span", { className: "pire-sr-only", children: msg.dataTableSummaryRow }) : null)
                 },
                 c.key
               ))
@@ -1942,11 +2005,11 @@ function ValueHelpDialog({
   onClose
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React11.useState("");
-  React11.useEffect(() => {
+  const [query, setQuery] = React15.useState("");
+  React15.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const filtered = React11.useMemo(() => {
+  const filtered = React15.useMemo(() => {
     if (isFilteredExternally) return rows;
     const q = query.trim().toLowerCase();
     if (!q) return rows;
@@ -2028,7 +2091,7 @@ function ValueHelpField({
   style
 }) {
   const msg = usePireMessages();
-  const [open, setOpen] = React12.useState(false);
+  const [open, setOpen] = React16.useState(false);
   return /* @__PURE__ */ jsxs24("div", { className: cx(className), style, children: [
     /* @__PURE__ */ jsx32(
       Input,
@@ -2084,8 +2147,8 @@ function ValueHelpField({
 }
 
 // src/components/forms/FileUpload.tsx
-import * as React13 from "react";
-import { FileTrigger, Text as Text11 } from "react-aria-components";
+import * as React17 from "react";
+import { FileTrigger, Text as Text12 } from "react-aria-components";
 
 // src/components/feedback/ProgressBar.tsx
 import { ProgressBar as AriaProgressBar, Label as Label10 } from "react-aria-components";
@@ -2171,13 +2234,14 @@ function FileUpload({
   isRequired,
   fullWidth = true,
   className,
-  style
+  style,
+  ...rest
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React13.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React17.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React13.useRef([]);
-  React13.useEffect(() => () => {
+  const created = React17.useRef([]);
+  React17.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -2204,6 +2268,7 @@ function FileUpload({
       style,
       "data-full-width": String(fullWidth),
       "data-invalid": isInvalid ? "true" : void 0,
+      ...rest,
       children: [
         label ? /* @__PURE__ */ jsxs26("span", { className: "pire-field-label", children: [
           label,
@@ -2233,7 +2298,7 @@ function FileUpload({
           )
         ] }, `${file.name}-${file.size}-${file.lastModified}`)) }) : null,
         uploadProgress != null ? /* @__PURE__ */ jsx34(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
-        description ? /* @__PURE__ */ jsx34(Text11, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        description ? /* @__PURE__ */ jsx34(Text12, { slot: "description", className: "pire-field-hint", children: description }) : null,
         isInvalid && errorMessage ? /* @__PURE__ */ jsx34("span", { className: "pire-field-error", children: errorMessage }) : null
       ]
     }
@@ -2288,7 +2353,7 @@ function ShellBar({
 }
 
 // src/components/navigation/SideNav.tsx
-import * as React14 from "react";
+import * as React18 from "react";
 import {
   Button as AriaButton12,
   Disclosure,
@@ -2388,10 +2453,10 @@ function SideNav({
   const msg = usePireMessages();
   const activeParent = findActiveParent(groups, value);
   const isControlled = expandedIds != null;
-  const [ownExpanded, setOwnExpanded] = React14.useState(
+  const [ownExpanded, setOwnExpanded] = React18.useState(
     () => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
   );
-  const [lastValue, setLastValue] = React14.useState(value);
+  const [lastValue, setLastValue] = React18.useState(value);
   if (value !== lastValue) {
     setLastValue(value);
     if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
@@ -2655,7 +2720,7 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
 }
 
 // src/components/feedback/Toast.tsx
-import * as React15 from "react";
+import * as React19 from "react";
 import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var KIND_ICON2 = {
   info: "info",
@@ -2681,26 +2746,26 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
     }
   );
 }
-var ToastContext = React15.createContext(null);
+var ToastContext = React19.createContext(null);
 function ToastProvider({ children, timeout = 6e3 }) {
   const msg = usePireMessages();
-  const [toasts, setToasts] = React15.useState([]);
-  const close = React15.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
-  const add = React15.useCallback((toast) => {
+  const [toasts, setToasts] = React19.useState([]);
+  const close = React19.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const add = React19.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 = React15.useMemo(() => ({ add, close }), [add, close]);
+  const value = React19.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 = React15.useContext(ToastContext);
+  const ctx = React19.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
   return ctx;
 }
@@ -3050,14 +3115,14 @@ function BarChart({
 }
 
 // src/components/data/LineChart.tsx
-import * as React16 from "react";
+import * as React20 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" ? React16.useEffect : React16.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React20.useEffect : React20.useLayoutEffect;
 function useMeasuredWidth() {
-  const ref = React16.useRef(null);
-  const [width, setWidth] = React16.useState(0);
+  const ref = React20.useRef(null);
+  const [width, setWidth] = React20.useState(0);
   useIsomorphicLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -3220,7 +3285,7 @@ function LineChart({
 }
 
 // src/components/data/DonutChart.tsx
-import * as React17 from "react";
+import * as React21 from "react";
 import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 var SEGMENT_GAP_DEGREES = 1.5;
 function DonutChart({
@@ -3241,7 +3306,7 @@ function DonutChart({
 }) {
   const label = rest["aria-label"];
   const msg = usePireMessages();
-  const [hoveredIndex, setHoveredIndex] = React17.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React21.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);
@@ -3478,7 +3543,7 @@ function ConfirmDialog({
 }
 
 // src/components/patterns/CommandPalette.tsx
-import * as React18 from "react";
+import * as React22 from "react";
 import {
   Autocomplete,
   ModalOverlay as ModalOverlay2,
@@ -3512,17 +3577,17 @@ function CommandPalette({
   style
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React18.useState("");
+  const [query, setQuery] = React22.useState("");
   const { contains } = useFilter({ sensitivity: "base" });
-  React18.useEffect(() => {
+  React22.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const searchableById = React18.useMemo(() => {
+  const searchableById = React22.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 = React18.useCallback((textValue, inputValue, node) => {
+  const filter = React22.useCallback((textValue, inputValue, node) => {
     if (node.parentKey === RESULTS_SECTION_KEY) return true;
     return contains(searchableById.get(String(node.key)) ?? textValue, inputValue);
   }, [contains, searchableById]);
@@ -3605,9 +3670,9 @@ function CommandPalette({
   );
 }
 function useCommandPaletteShortcut(onTrigger, { key = "k", isDisabled } = {}) {
-  const handler = React18.useRef(onTrigger);
+  const handler = React22.useRef(onTrigger);
   handler.current = onTrigger;
-  React18.useEffect(() => {
+  React22.useEffect(() => {
     if (isDisabled) return;
     const onKeyDown = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
@@ -3661,7 +3726,7 @@ function EmptyState({ icon = "file-text", title, action, compact, children, clas
 }
 
 // src/components/patterns/FileDropZone.tsx
-import * as React19 from "react";
+import * as React23 from "react";
 import { DropZone, FileTrigger as FileTrigger2, isFileDropItem } from "react-aria-components";
 import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
 var isImage2 = (file) => file.type.startsWith("image/");
@@ -3686,13 +3751,15 @@ function FileDropZone({
   isRequired,
   fullWidth = true,
   className,
-  style
+  style,
+  "aria-label": ariaLabel,
+  ...rest
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React19.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React23.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React19.useRef([]);
-  React19.useEffect(() => () => {
+  const created = React23.useRef([]);
+  React23.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -3712,7 +3779,7 @@ function FileDropZone({
     commit(allowsMultiple ? [...files, ...wrapped] : wrapped.slice(0, 1));
   };
   const remove = (target) => commit(files.filter((f) => f.file !== target));
-  return /* @__PURE__ */ jsxs54("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
+  return /* @__PURE__ */ jsxs54("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), ...rest, children: [
     label ? /* @__PURE__ */ jsxs54("span", { className: "pire-field-label", children: [
       label,
       isRequired ? /* @__PURE__ */ jsx63("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
@@ -3721,6 +3788,7 @@ function FileDropZone({
       DropZone,
       {
         className: "pire-dropzone",
+        "aria-label": ariaLabel,
         "data-height": height,
         isDisabled: isDisabled || isReadOnly,
         onDrop: async (e) => {