@jirawatpyk/aura-react 5.25.0 → 5.27.0

package/dist/esm/Accordion.js

@@ -49,6 +49,8 @@ const Accordion = React.forwardRef(function Accordion2(props, ref) {
       {
         type: "button",
         id: bid,
+        "aria-labelledby": it.description ? bid + "-title" : void 0,
+        "aria-describedby": it.description ? bid + "-desc" : void 0,
         "aria-expanded": on,
         "aria-controls": pid,
         disabled: it.disabled,
@@ -57,9 +59,19 @@ const Accordion = React.forwardRef(function Accordion2(props, ref) {
         }
       },
       it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
-      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
+      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, /* @__PURE__ */ React.createElement("span", { id: it.description ? bid + "-title" : void 0 }, it.title), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc", id: bid + "-desc" }, it.description) : null),
       /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-accordion__chevron" })
-    )), /* @__PURE__ */ React.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
+    )), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        id: pid,
+        role: "region",
+        "aria-labelledby": it.description ? bid + "-title" : bid,
+        className: "aura-accordion__panel",
+        hidden: !on
+      },
+      it.content
+    ));
   }));
 });
 export {

package/dist/esm/Checkbox.js

@@ -33,6 +33,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       "Checkbox `label` is only the accessible name: it is not shown. In 6.0 it will be shown beside the box, like Switch and TextField. For visible text now pass it as children; for a bare box (a table row) add `hideLabel`."
     );
   const descId = props.description ? (props.id || auto) + "-desc" : void 0;
+  const labelId = labelled && descId && !props["aria-label"] && !props["aria-labelledby"] ? (props.id || auto) + "-label" : void 0;
   const ha = props.hitArea;
   const hit = !labelled && ha && ha !== "box" ? ha === "target" ? { x: 4, y: 4 } : ha : null;
   return /* @__PURE__ */ React.createElement(
@@ -61,7 +62,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
         tabIndex: props.tabIndex,
         disabled: props.disabled,
         "aria-describedby": cx(props["aria-describedby"], descId) || void 0,
-        "aria-label": labelled ? void 0 : props.label,
+        "aria-label": (labelled ? void 0 : props.label) || props["aria-label"] || void 0,
+        "aria-labelledby": labelId || props["aria-labelledby"],
         onChange: function(e) {
           st[1](e.target.checked);
         }
@@ -69,7 +71,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
     ),
     /* @__PURE__ */ React.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconMinus, null), size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null),
     !labelled && props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: descId }, props.description) : null,
-    labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label" }, text), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
+    labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label", id: labelId }, text), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
   );
 });
 export {

package/dist/esm/Combobox.js

@@ -234,6 +234,8 @@ const Combobox = React.forwardRef(
           id: optId(i),
           role: "option",
           "data-idx": i,
+          "aria-labelledby": o.description ? optId(i) + "-label" : void 0,
+          "aria-describedby": o.description ? optId(i) + "-desc" : void 0,
           "aria-selected": isSel,
           "aria-disabled": blocked || void 0,
           className: cx(
@@ -253,7 +255,7 @@ const Combobox = React.forwardRef(
           }
         },
         o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
-        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label", id: o.description ? optId(i) + "-label" : void 0 }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc", id: optId(i) + "-desc" }, o.description) : null),
         isSel ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : null
       );
     }

package/dist/esm/Command.js

@@ -202,6 +202,8 @@ function Command(props) {
                     key: it.id,
                     id: optId(n),
                     role: "option",
+                    "aria-labelledby": it.description ? optId(n) + "-label" + (it.shortcut ? " " + optId(n) + "-kbd" : "") : void 0,
+                    "aria-describedby": it.description ? optId(n) + "-desc" : void 0,
                     "aria-selected": n === active,
                     "aria-disabled": it.disabled || void 0,
                     className: cx(
@@ -220,8 +222,8 @@ function Command(props) {
                     }
                   },
                   it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : null,
-                  /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label" }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc" }, it.description) : null),
-                  it.shortcut ? /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, it.shortcut) : null
+                  /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label", id: it.description ? optId(n) + "-label" : void 0 }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc", id: optId(n) + "-desc" }, it.description) : null),
+                  it.shortcut ? /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd", id: it.description ? optId(n) + "-kbd" : void 0 }, it.shortcut) : null
                 );
               })
             );

package/dist/esm/Container.js

@@ -1,15 +1,25 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
+import { cx } from "./classes.js";
 const h = React.createElement;
 const Container = React.forwardRef(function Container2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
   return h(
     props.as || "div",
-    {
+    Object.assign(attrs, {
       ref,
-      className: cx("aura-container", props.size === "narrow" && "is-narrow", props.className),
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
       style: props.style
-    },
+    }),
     props.children
   );
 });

package/dist/esm/DataTable.js

@@ -1318,6 +1318,11 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       "data-density": props.density,
       className: cx(
         "aura-table",
+        /* 5.26 (Chamber-OS 127): bleed and bordered={false}; the outermost element carries aura-bleed. */
+        props.bleed && "aura-bleed-frame",
+        props.bleed && !levels.length && "aura-bleed",
+        props.bleed && props.bleedEnd && !levels.length && "aura-bleed-end",
+        props.bordered === false && "aura-table--borderless",
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
         scrolledX[0] && "is-scrolled-x",
@@ -1415,7 +1420,19 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       out
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx(
+        "aura-table-box",
+        props.bleed && "aura-bleed",
+        props.bleed && props.bleedEnd && "aura-bleed-end",
+        props.className
+      )
+    },
+    out
+  );
 });
 const DataTable2 = DataTableImpl;
 export {

package/dist/esm/DatePicker.js

@@ -663,7 +663,9 @@ export {
   Calendar,
   DatePicker,
   DateRangePicker,
+  allowedDate,
   formatDate,
   parseDate2 as parseDate,
+  useCalendarPopover,
   useFormatDate
 };

package/dist/esm/FilterDateRange.js

@@ -0,0 +1,157 @@
+'use client';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Calendar, allowedDate, useCalendarPopover } from "./DatePicker.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { IconChevronDown } from "./icons.js";
+import { cx, trapTab, uid, useMaybeControlled, useMergedRef } from "./internal.js";
+import { useAuraLocale } from "./locale.js";
+import { dateText, defaultCalendar, formatDateRange } from "./dates.js";
+const NONE = { start: null, end: null };
+const FilterDateRange = React.forwardRef(
+  function FilterDateRange2(props, ref) {
+    const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
+    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
+    const st = useMaybeControlled(props.value, props.defaultValue || NONE, props.onChange);
+    const raw = st[0] || NONE;
+    const v = raw.start && raw.end ? raw.start <= raw.end ? raw : { start: raw.end, end: raw.start } : NONE;
+    const draft = React.useState(null);
+    const boxRef = React.useRef(null), faceRef = React.useRef(null);
+    const pop = useCalendarPopover(boxRef);
+    const anyLabel = props.anyLabel || dt.anyTime;
+    const value = v.start && v.end ? formatDateRange(v.start, v.end, { locale, calendar }) : anyLabel;
+    const setFace = useMergedRef(ref, faceRef);
+    const limits = {
+      min: props.min,
+      max: props.max,
+      today: props.today,
+      timeZone: props.timeZone || ctx.timeZone,
+      isDateDisabled: props.isDateDisabled
+    };
+    function close() {
+      pop.setOpen(false);
+      draft[1](null);
+      if (faceRef.current) faceRef.current.focus();
+    }
+    function choose(r) {
+      if (r.start !== raw.start || r.end !== raw.end) st[1](r);
+      close();
+    }
+    function pick(iso) {
+      if (!iso) return;
+      if (!draft[0]) {
+        draft[1](iso);
+        return;
+      }
+      const a = draft[0];
+      choose(a <= iso ? { start: a, end: iso } : { start: iso, end: a });
+    }
+    const isAny = !v.start || !v.end;
+    const attrs = {};
+    Object.keys(props).forEach(function(k) {
+      if (k === "style" || /^(aria|data)-/.test(k) && k !== "aria-label")
+        attrs[k] = props[k];
+    });
+    const presetBtn = function(label, r, on, key) {
+      return /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          key,
+          size: "sm",
+          variant: "ghost",
+          touchHeight: true,
+          disabled: !!r.start && !!r.end && !(allowedDate(r.start, limits) && allowedDate(r.end, limits)),
+          className: cx("aura-filterdate__preset", on && "is-selected"),
+          "aria-pressed": on,
+          onClick: function() {
+            choose(r);
+          }
+        },
+        label
+      );
+    };
+    const cal = pop.open && pop.mounted && pop.pos ? createPortal(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: pop.popRef,
+          id: dialogId,
+          role: "dialog",
+          "aria-modal": false,
+          "aria-label": props.label,
+          className: "aura-cal__popover aura-filterdate__pop",
+          style: Object.assign({}, pop.pos, {
+            maxHeight: window.innerHeight - (pop.pos.top != null ? pop.pos.top : pop.pos.bottom) - 8
+          }),
+          onKeyDown: function(e) {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              close();
+            } else trapTab(e, pop.popRef.current);
+          }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "aura-filterdate__presets" }, presetBtn(anyLabel, NONE, isAny, "__any"), (props.presets || []).map(function(p, i) {
+          return presetBtn(
+            p.label,
+            p.range,
+            !isAny && p.range.start === v.start && p.range.end === v.end,
+            "p" + i
+          );
+        })),
+        /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? dt.chooseEnd : dt.chooseStart), /* @__PURE__ */ React.createElement(
+          Calendar,
+          {
+            range: true,
+            locale,
+            calendar,
+            weekStartsOn: props.weekStartsOn,
+            min: props.min,
+            max: props.max,
+            timeZone: props.timeZone,
+            today: props.today,
+            isDateDisabled: props.isDateDisabled,
+            start: draft[0] || v.start,
+            end: draft[0] ? null : v.end,
+            focus: draft[0] || v.start,
+            footer: false,
+            onSelect: pick
+          }
+        ))
+      ),
+      document.body
+    ) : null;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: boxRef,
+        className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+      },
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          ...attrs,
+          ref: setFace,
+          id,
+          type: "button",
+          className: "aura-filterselect__face",
+          disabled: props.disabled,
+          "aria-label": props["aria-label"] || props.label + ": " + value,
+          "aria-haspopup": "dialog",
+          "aria-expanded": pop.open,
+          "aria-controls": pop.open ? dialogId : void 0,
+          onClick: function() {
+            pop.setOpen(!pop.open);
+            draft[1](null);
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__name" }, props.label),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__value" }, value),
+        /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })
+      )
+    ), cal);
+  }
+);
+export {
+  FilterDateRange
+};

package/dist/esm/RadioGroup.js

@@ -34,8 +34,9 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
       disabled: props.disabled
     },
     props.label ? /* @__PURE__ */ React.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
-    /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o) {
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o, i) {
       const v = typeof o === "object" ? o : { value: o, label: o };
+      const oid = v.description ? id + "-opt-" + i : "";
       return /* @__PURE__ */ React.createElement("label", { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") }, /* @__PURE__ */ React.createElement(
         "input",
         {
@@ -45,12 +46,14 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
           value: v.value,
           disabled: v.disabled,
           required: props.required || void 0,
+          "aria-labelledby": oid ? oid + "-label" : void 0,
+          "aria-describedby": oid ? oid + "-desc" : void 0,
           checked: st[0] === v.value,
           onChange: function() {
             st[1](v.value);
           }
         }
-      ), /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-choice__label" }, v.label), v.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc" }, v.description) : null));
+      ), /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-choice__label", id: oid ? oid + "-label" : void 0 }, v.label), v.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: oid + "-desc" }, v.description) : null));
     })),
     props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
   );

package/dist/esm/Table.js

@@ -55,6 +55,10 @@ const Table = React.forwardRef(function Table2(props, ref) {
     stackBelow,
     align,
     bordered,
+    bleed,
+    bleedEnd,
+    stickyHeader,
+    maxHeight,
     stackStyle,
     rowHeight,
     className,
@@ -62,6 +66,11 @@ const Table = React.forwardRef(function Table2(props, ref) {
     ...rest
   } = props;
   const cards = !!stackBelow && stackStyle === "cards";
+  if (maxHeight != null && caption == null && !rest["aria-label"] && !rest["aria-labelledby"])
+    devWarnOnce(
+      "tbl-max-name",
+      "Table maxHeight: the box scrolls, so keyboard users get it as a focusable region \u2014 give the table a `caption` (captionHidden keeps it for screen readers) or an `aria-label` to name it."
+    );
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
     devWarnOnce(
@@ -73,15 +82,19 @@ const Table = React.forwardRef(function Table2(props, ref) {
   const capId = uid();
   const wrap = React.useRef(null);
   const sc = React.useState(false), scrolls = sc[0];
+  const wide = React.useState(false);
   useIsoLayoutEffect(function() {
     const el = wrap.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     function check() {
-      sc[1](el.scrollWidth > el.clientWidth + 1);
+      const sideways = el.scrollWidth > el.clientWidth + 1;
+      wide[1](sideways);
+      sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();
     const ro = new ResizeObserver(check);
     ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
     return function() {
       ro.disconnect();
     };
@@ -90,11 +103,24 @@ const Table = React.forwardRef(function Table2(props, ref) {
     "div",
     {
       ref: wrap,
-      className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
+      className: cx(
+        "aura-tbl-wrap",
+        stackBelow && "is-stackable",
+        bordered === false && "is-flush",
+        /* 5.26 (Chamber-OS 127): the frame that bleeds; the outermost element carries aura-bleed. */
+        bleed && "aura-bleed-frame",
+        bleed && !cards && "aura-bleed",
+        bleed && bleedEnd && !cards && "aura-bleed-end",
+        /* 5.26 (Chamber-OS 129): stickyHeader pins to the page, or inside the box when it has a maxHeight. */
+        stickyHeader && (maxHeight != null ? "is-sticky-box" : "is-sticky-page"),
+        maxHeight != null && "has-max",
+        wide[0] && "is-wide"
+      ),
+      style: maxHeight != null ? { maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight } : void 0,
       "data-density": density || pageDensity,
       tabIndex: scrolls ? 0 : void 0,
-      role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
-      "aria-labelledby": scrolls && caption != null ? capId : void 0,
+      role: scrolls && (caption != null || rest["aria-label"] || rest["aria-labelledby"]) ? "region" : void 0,
+      "aria-labelledby": scrolls ? caption != null ? capId : rest["aria-labelledby"] : void 0,
       "aria-label": scrolls && caption == null ? rest["aria-label"] : void 0
     },
     /* @__PURE__ */ React.createElement(
@@ -117,7 +143,17 @@ const Table = React.forwardRef(function Table2(props, ref) {
       labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
     )
   );
-  return cards ? /* @__PURE__ */ React.createElement("div", { className: "aura-tbl-cards aura-tbl-cards--" + stackBelow }, table) : table;
+  return cards ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + stackBelow,
+        bleed && "aura-bleed",
+        bleed && bleedEnd && "aura-bleed-end"
+      )
+    },
+    table
+  ) : table;
 });
 function section(tag, cls) {
   const C = React.forwardRef(function TableSection(props, ref) {

package/dist/esm/dates.js

@@ -56,6 +56,7 @@ const DATE_TEXT = {
     clearDates: "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
     chooseStart: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19",
     chooseEnd: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14",
+    anyTime: "\u0E17\u0E38\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E40\u0E27\u0E25\u0E32",
     dateUnavailable: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49 \u0E25\u0E2D\u0E07\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19\u0E14\u0E39\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E14\u0E49"
   },
   en: {
@@ -74,6 +75,7 @@ const DATE_TEXT = {
     clearDates: "Clear dates",
     chooseStart: "Choose the start date",
     chooseEnd: "Choose the end date",
+    anyTime: "Any time",
     dateUnavailable: "That date can't be chosen. Open the calendar to see the dates you can pick."
   },
   sv: {
@@ -92,6 +94,7 @@ const DATE_TEXT = {
     clearDates: "Rensa datumen",
     chooseStart: "V\xE4lj startdatum",
     chooseEnd: "V\xE4lj slutdatum",
+    anyTime: "N\xE4r som helst",
     dateUnavailable: "Det datumet g\xE5r inte att v\xE4lja. \xD6ppna kalendern f\xF6r att se vilka datum som g\xE5r."
   }
 };
@@ -116,6 +119,16 @@ function formatDate(iso, opts) {
   const loc = o.locale || "en";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
+function formatDateRange(start, end, opts) {
+  const o = opts || {}, a = fromISO(start), b = fromISO(end);
+  if (!a || !b) return "";
+  if (start > end) return formatDateRange(end, start, opts);
+  const loc = o.locale || "en", tag = localeTag(loc, o.calendar || defaultCalendar(loc)), f = PRESETS.short;
+  const k = tag + JSON.stringify(f);
+  if (!fmtCache[k]) fmtCache[k] = new Intl.DateTimeFormat(tag, f);
+  const F = fmtCache[k];
+  return F.formatRange ? F.formatRange(a, b).replace(/\s?(พ\.ศ\.|\bBE\b)\s?/g, " ").replace(/[\s\u2009\u202f]*[–-][\s\u2009\u202f]*/g, " \u2013 ").trim() : start === end ? formatDate(start, o) : formatDate(start, o) + " \u2013 " + formatDate(end, o);
+}
 let MONTHS = null;
 function monthIndex(word) {
   if (!MONTHS) {
@@ -188,6 +201,7 @@ export {
   fmt,
   fmtCache,
   formatDate,
+  formatDateRange,
   fromISO,
   localeTag,
   makeDate,

package/dist/esm/index.js

@@ -11,6 +11,7 @@ import { TextField } from "./TextField.js";
 import { Textarea } from "./Textarea.js";
 import { Select } from "./Select.js";
 import { FilterSelect } from "./FilterSelect.js";
+import { FilterDateRange } from "./FilterDateRange.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
@@ -88,6 +89,7 @@ export {
   Field,
   FileUpload,
   FilterBar,
+  FilterDateRange,
   FilterSelect,
   FormErrorSummary,
   Grid,