@orianatech/pire 0.21.0 → 0.22.0

package/dist/index.js

@@ -1447,6 +1447,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,
@@ -1457,10 +1466,16 @@ function NumberField({
   fullWidth = true,
   className,
   style,
+  value,
+  defaultValue,
+  onChange,
+  emptyValue,
   ...rest
 }) {
   const msg = usePireMessages();
   const { locale } = 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;
@@ -1479,32 +1494,44 @@ function NumberField({
     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,
-      rest.isRequired ? /* @__PURE__ */ jsx25("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
-    ] }) : null,
-    /* @__PURE__ */ jsxs18(
-      Group5,
-      {
-        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__ */ 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 }) }),
-            /* @__PURE__ */ jsx25(AriaButton8, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ jsx25(Icon, { name: "minus", size: 10 }) })
-          ] })
-        ]
-      }
-    ),
-    description ? /* @__PURE__ */ jsx25(Text9, { slot: "description", className: "pire-field-hint", children: description }) : null,
-    /* @__PURE__ */ jsx25(FieldError7, { className: "pire-field-error", children: errorMessage })
-  ] });
+  return /* @__PURE__ */ jsxs18(
+    AriaNumberField,
+    {
+      className: cx("pire-field", className),
+      style,
+      validationBehavior: "aria",
+      value: toAriaNumber(value),
+      defaultValue: toAriaNumber(defaultValue),
+      onChange: handleChange,
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ jsxs18(Label7, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ jsx25("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs18(
+          Group5,
+          {
+            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__ */ 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 }) }),
+                /* @__PURE__ */ jsx25(AriaButton8, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ jsx25(Icon, { name: "minus", size: 10 }) })
+              ] })
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx25(Text9, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ jsx25(FieldError7, { className: "pire-field-error", children: errorMessage })
+      ]
+    }
+  );
 }
 
 // src/components/forms/DatePicker.tsx
@@ -1527,7 +1554,29 @@ import {
   Text as Text10,
   FieldError as FieldError8
 } from "react-aria-components";
+import { parseDate } from "@internationalized/date";
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+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 parseDate(match[1]);
+  } catch {
+    return null;
+  }
+}
 function DatePicker({
   label,
   description,
@@ -1536,42 +1585,61 @@ function DatePicker({
   fullWidth = true,
   className,
   style,
+  value,
+  defaultValue,
+  onChange,
+  valueFormat,
   ...rest
 }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ jsxs19(AriaDatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ jsxs19(Label8, { className: "pire-field-label", children: [
-      label,
-      rest.isRequired ? /* @__PURE__ */ jsx26("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
-    ] }) : null,
-    /* @__PURE__ */ jsxs19(
-      Group6,
-      {
-        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__ */ jsx26(DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx26(DateSegment, { segment, className: "pire-datesegment" }) }),
-          /* @__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 }) })
-        ]
-      }
-    ),
-    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: [
-        /* @__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(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 }) }),
-        /* @__PURE__ */ jsx26(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx26(CalendarCell, { date, className: "pire-calendar-cell" }) })
-      ] })
-    ] }) }) })
-  ] });
+  const handleChange = onChange && ((next) => onChange(
+    valueFormat === "iso" && next ? next.toString() : next
+  ));
+  return /* @__PURE__ */ jsxs19(
+    AriaDatePicker,
+    {
+      className: cx("pire-field", className),
+      style,
+      validationBehavior: "aria",
+      value: coerceDateValue(value),
+      defaultValue: coerceDateValue(defaultValue),
+      onChange: handleChange,
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ jsxs19(Label8, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ jsx26("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs19(
+          Group6,
+          {
+            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__ */ jsx26(DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx26(DateSegment, { segment, className: "pire-datesegment" }) }),
+              /* @__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 }) })
+            ]
+          }
+        ),
+        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: [
+            /* @__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(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 }) }),
+            /* @__PURE__ */ jsx26(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx26(CalendarCell, { date, className: "pire-calendar-cell" }) })
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 // src/components/forms/DateRangePicker.tsx