@orianatech/pire 0.21.0 → 0.23.0

package/dist/index.cjs

@@ -1515,6 +1515,15 @@ function typeIntoInput(el, text) {
   const caret = start + text.length;
   el.setSelectionRange(caret, caret);
 }
+function toAriaNumber(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (value === null || value === "") {
+    return NaN;
+  }
+  return typeof value === "number" ? value : Number(value);
+}
 function NumberField({
   label,
   suffix,
@@ -1525,10 +1534,16 @@ function NumberField({
   fullWidth = true,
   className,
   style,
+  value,
+  defaultValue,
+  onChange,
+  emptyValue,
   ...rest
 }) {
   const msg = usePireMessages();
   const { locale } = (0, import_react_aria_components17.useLocale)();
+  const empty = emptyValue === void 0 ? NaN : emptyValue;
+  const handleChange = onChange && ((next) => onChange(Number.isNaN(next) ? empty : next));
   const handleDecimalKey = (event) => {
     if (event.key !== "." || event.ctrlKey || event.metaKey || event.altKey) {
       return;
@@ -1547,36 +1562,77 @@ function NumberField({
     event.preventDefault();
     typeIntoInput(event.currentTarget, separator);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components17.NumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components17.Label, { className: "pire-field-label", children: [
-      label,
-      rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-      import_react_aria_components17.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: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Input, { className: "pire-input", "data-numeric": "true", onKeyDown: handleDecimalKey }),
-          suffix ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-affix", children: suffix }) : null,
-          hideStepper ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "pire-stepper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Button, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "plus", size: 10 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Button, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "minus", size: 10 }) })
-          ] })
-        ]
-      }
-    ),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.FieldError, { className: "pire-field-error", children: errorMessage })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    import_react_aria_components17.NumberField,
+    {
+      className: cx("pire-field", className),
+      style,
+      validationBehavior: "aria",
+      value: toAriaNumber(value),
+      defaultValue: toAriaNumber(defaultValue),
+      onChange: handleChange,
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components17.Label, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          import_react_aria_components17.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: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Input, { className: "pire-input", "data-numeric": "true", onKeyDown: handleDecimalKey }),
+              suffix ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-affix", children: suffix }) : null,
+              hideStepper ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "pire-stepper", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Button, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "plus", size: 10 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Button, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "minus", size: 10 }) })
+              ] })
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.FieldError, { className: "pire-field-error", children: errorMessage })
+      ]
+    }
+  );
 }
 
 // src/components/forms/DatePicker.tsx
 var import_react_aria_components18 = require("react-aria-components");
+
+// src/components/forms/dateValues.ts
+var import_date = require("@internationalized/date");
+var ISO_DATE = /^(\d{4}-\d{2}-\d{2})(?:[T ].*)?$/;
+function coerceDateValue(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (value === null || value === "") {
+    return null;
+  }
+  if (typeof value !== "string") {
+    return value;
+  }
+  const match = ISO_DATE.exec(value);
+  if (!match) {
+    return null;
+  }
+  try {
+    return (0, import_date.parseDate)(match[1]);
+  } catch {
+    return null;
+  }
+}
+function coerceBound(value) {
+  return coerceDateValue(value) ?? void 0;
+}
+
+// src/components/forms/DatePicker.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function DatePicker({
   label,
@@ -1586,49 +1642,88 @@ function DatePicker({
   fullWidth = true,
   className,
   style,
+  value,
+  defaultValue,
+  onChange,
+  valueFormat,
+  minValue,
+  maxValue,
   ...rest
 }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.DatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.Label, { className: "pire-field-label", children: [
-      label,
-      rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      import_react_aria_components18.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: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.DateSegment, { segment, className: "pire-datesegment" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "calendar", size: 16 }) })
-        ]
-      }
-    ),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.FieldError, { className: "pire-field-error", children: errorMessage }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.Calendar, { className: "pire-calendar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("header", { className: "pire-calendar-head", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Button, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerPreviousMonth, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "chevron-left", size: 16 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Heading, { className: "pire-calendar-title" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Button, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerNextMonth, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "chevron-right", size: 16 }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.CalendarGrid, { className: "pire-calendar-grid", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarHeaderCell, { children: day }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarCell, { date, className: "pire-calendar-cell" }) })
-      ] })
-    ] }) }) })
-  ] });
+  const handleChange = onChange && ((next) => onChange(
+    valueFormat === "iso" && next ? next.toString() : next
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    import_react_aria_components18.DatePicker,
+    {
+      className: cx("pire-field", className),
+      style,
+      validationBehavior: "aria",
+      value: coerceDateValue(value),
+      defaultValue: coerceDateValue(defaultValue),
+      minValue: coerceBound(minValue),
+      maxValue: coerceBound(maxValue),
+      onChange: handleChange,
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.Label, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          import_react_aria_components18.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: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.DateSegment, { segment, className: "pire-datesegment" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "calendar", size: 16 }) })
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.FieldError, { className: "pire-field-error", children: errorMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.Calendar, { className: "pire-calendar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("header", { className: "pire-calendar-head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Button, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerPreviousMonth, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "chevron-left", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Heading, { className: "pire-calendar-title" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Button, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerNextMonth, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "chevron-right", size: 16 }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.CalendarGrid, { className: "pire-calendar-grid", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarHeaderCell, { children: day }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.CalendarCell, { date, className: "pire-calendar-cell" }) })
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 // src/components/forms/DateRangePicker.tsx
 var import_react_aria_components19 = require("react-aria-components");
 var import_jsx_runtime27 = require("react/jsx-runtime");
+function coerceRange(range) {
+  if (range === void 0) {
+    return void 0;
+  }
+  if (range === null) {
+    return null;
+  }
+  const start = coerceDateValue(range.start) ?? null;
+  const end = coerceDateValue(range.end) ?? null;
+  return start === null && end === null ? null : { start, end };
+}
 function rangeLengthInDays(range) {
-  return range.end.toDate("UTC").getTime() / 864e5 - range.start.toDate("UTC").getTime() / 864e5 + 1;
+  const start = coerceDateValue(range?.start) ?? null;
+  const end = coerceDateValue(range?.end) ?? null;
+  if (start === null || end === null) {
+    return null;
+  }
+  return end.toDate("UTC").getTime() / 864e5 - start.toDate("UTC").getTime() / 864e5 + 1;
 }
 function DateRangePicker({
   label,
@@ -1642,11 +1737,28 @@ function DateRangePicker({
   endName,
   className,
   style,
+  value,
+  defaultValue,
+  onChange,
+  valueFormat,
+  minValue,
+  maxValue,
   ...rest
 }) {
   const msg = usePireMessages();
-  const current = rest.value ?? rest.defaultValue ?? null;
-  const tooLong = maxRangeDays != null && current != null && rangeLengthInDays(current) > maxRangeDays;
+  const current = coerceRange(value) ?? coerceRange(defaultValue) ?? null;
+  const span = current === null ? null : rangeLengthInDays(current);
+  const tooLong = maxRangeDays != null && span != null && span > maxRangeDays;
+  const emit = (next) => {
+    if (!onChange) {
+      return;
+    }
+    if (!next?.start || !next.end) {
+      onChange(null);
+      return;
+    }
+    onChange(valueFormat === "iso" ? { start: next.start.toString(), end: next.end.toString() } : { start: next.start, end: next.end });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     import_react_aria_components19.DateRangePicker,
     {
@@ -1655,8 +1767,13 @@ function DateRangePicker({
       startName,
       endName,
       validationBehavior: "aria",
+      value: coerceRange(value),
+      defaultValue: coerceRange(defaultValue),
+      minValue: coerceBound(minValue),
+      maxValue: coerceBound(maxValue),
+      onChange: onChange && emit,
       ...rest,
-      isInvalid: rest.isInvalid || tooLong,
+      isInvalid: rest.isInvalid || tooLong || void 0,
       children: [
         label ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_aria_components19.Label, { className: "pire-field-label", children: [
           label,
@@ -1697,7 +1814,7 @@ function DateRangePicker({
               import_react_aria_components19.Button,
               {
                 className: "pire-daterange-preset",
-                onPress: () => rest.onChange?.(preset.range()),
+                onPress: () => emit(coerceRange(preset.range()) ?? null),
                 children: preset.label
               },
               preset.id