@jirawatpyk/aura-react 4.8.0 → 4.10.0

package/dist/esm/DatePicker.js

@@ -29,8 +29,69 @@ function addMonths(d, n) {
 function same(a, b) {
   return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
+const TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
+function defaultCalendar(locale) {
+  return locale === "sv" ? "gregory" : "buddhist";
+}
 function localeTag(locale, calendar) {
-  return (locale === "en" ? "en-GB" : "th-TH") + "-u-ca-" + (calendar === "gregory" ? "gregory" : "buddhist");
+  const cal = calendar || defaultCalendar(locale);
+  return (TAGS[locale || "th"] || "th-TH") + "-u-ca-" + (cal === "gregory" ? "gregory" : "buddhist");
+}
+const DATE_TEXT = {
+  th: {
+    prevYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
+    nextYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B",
+    prevMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
+    nextMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B",
+    today: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49",
+    clear: "\u0E25\u0E49\u0E32\u0E07",
+    chooseDate: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
+    datePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
+    clearDate: "\u0E25\u0E49\u0E32\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
+    openCalendar: "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19",
+    chooseDates: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
+    rangePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
+    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"
+  },
+  en: {
+    prevYears: "Previous years",
+    nextYears: "Next years",
+    prevMonth: "Previous month",
+    nextMonth: "Next month",
+    today: "Today",
+    clear: "Clear",
+    chooseDate: "Choose date",
+    datePlaceholder: "dd/mm/yyyy",
+    clearDate: "Clear date",
+    openCalendar: "Open calendar",
+    chooseDates: "Choose dates",
+    rangePlaceholder: "dd/mm/yyyy \u2013 dd/mm/yyyy",
+    clearDates: "Clear dates",
+    chooseStart: "Choose the start date",
+    chooseEnd: "Choose the end date"
+  },
+  sv: {
+    prevYears: "Tidigare \xE5r",
+    nextYears: "Senare \xE5r",
+    prevMonth: "F\xF6reg\xE5ende m\xE5nad",
+    nextMonth: "N\xE4sta m\xE5nad",
+    today: "Idag",
+    clear: "Rensa",
+    chooseDate: "V\xE4lj datum",
+    datePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd",
+    clearDate: "Rensa datum",
+    openCalendar: "\xD6ppna kalendern",
+    chooseDates: "V\xE4lj datum",
+    rangePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd \u2013 \xE5\xE5\xE5\xE5-mm-dd",
+    clearDates: "Rensa datumen",
+    chooseStart: "V\xE4lj startdatum",
+    chooseEnd: "V\xE4lj slutdatum"
+  }
+};
+function dateText(locale) {
+  return DATE_TEXT[locale || "th"] || DATE_TEXT.th;
 }
 const fmtCache = {};
 const PRESETS = {
@@ -53,12 +114,12 @@ let MONTHS = null;
 function monthIndex(word) {
   if (!MONTHS) {
     MONTHS = {};
-    ["th-TH", "en-GB"].forEach(function(tag) {
+    ["th-TH", "en-GB", "sv-SE"].forEach(function(tag) {
       ["short", "long"].forEach(function(w) {
         for (let i = 0; i < 12; i++) {
           const n = new Intl.DateTimeFormat(tag, { month: w }).format(new Date(2020, i, 1)).toLowerCase().replace(/\.$/, "");
           MONTHS[n] = i;
-          if (/^[a-z]/.test(n)) MONTHS[n.slice(0, 3)] = i;
+          if (/^[a-zåäö]/.test(n)) MONTHS[n.slice(0, 3)] = i;
         }
       });
     });
@@ -87,8 +148,8 @@ function parseDate(text) {
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
 const Calendar = React.forwardRef(function Calendar2(props, ref) {
-  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", tag = localeTag(locale, calendar);
-  const weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
+  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
+  const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
   let today = /* @__PURE__ */ new Date();
   today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
   const min = fromISO(props.min), max = fromISO(props.max);
@@ -98,7 +159,8 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
   const viewState = React.useState("days"), view = viewState[0], setView = viewState[1];
   const hoverState = React.useState(null);
   const gridRef = React.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React.useRef(false);
-  const th = locale !== "en";
+  const th = locale === "th";
+  const dt = dateText(locale);
   function disabled(d) {
     return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
   }
@@ -164,7 +226,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
       IconButton,
       {
         icon: "chevron-left",
-        label: th ? "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32" : "Previous years",
+        label: dt.prevYears,
         onClick: function() {
           setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
         }
@@ -183,7 +245,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
       IconButton,
       {
         icon: "chevron-right",
-        label: th ? "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B" : "Next years",
+        label: dt.nextYears,
         onClick: function() {
           setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
         }
@@ -211,7 +273,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
     IconButton,
     {
       icon: "chevron-left",
-      label: th ? "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32" : "Previous month",
+      label: dt.prevMonth,
       onClick: function() {
         setFocus(addMonths(focusDate, -1));
       }
@@ -232,7 +294,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
     IconButton,
     {
       icon: "chevron-right",
-      label: th ? "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B" : "Next month",
+      label: dt.nextMonth,
       onClick: function() {
         setFocus(addMonths(focusDate, 1));
       }
@@ -306,8 +368,8 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
         props.onSelect(toISO(today));
       }
     },
-    th ? "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49" : "Today"
-  ), props.onClear ? /* @__PURE__ */ React.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, th ? "\u0E25\u0E49\u0E32\u0E07" : "Clear") : null));
+    dt.today
+  ), props.onClear ? /* @__PURE__ */ React.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, dt.clear) : null));
 });
 function useCalendarPopover(boxRef) {
   const openState = React.useState(false), open = openState[0], setOpen = openState[1];
@@ -429,7 +491,7 @@ function DateField(props) {
 }
 const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
   const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
-  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
+  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
   const st = useMaybeControlled(
     props.value,
     props.defaultValue == null ? null : props.defaultValue,
@@ -457,7 +519,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
         id: dialogId,
         role: "dialog",
         "aria-modal": false,
-        "aria-label": props.label || (th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Choose date"),
+        "aria-label": props.label || dt.chooseDate,
         className: "aura-cal__popover",
         style: pop.pos,
         onKeyDown: function(e) {
@@ -504,15 +566,15 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
       inputRef: inputMerged,
       open: pop.open,
       display: formatDate(st[0], { locale, calendar }),
-      placeholder: props.placeholder || (th ? "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B" : "dd/mm/yyyy"),
+      placeholder: props.placeholder || dt.datePlaceholder,
       hasValue: st[0] != null,
       clearable: props.clearable,
       onClear: function() {
         st[1](null);
         inputRef.current && inputRef.current.focus();
       },
-      clearLabel: th ? "\u0E25\u0E49\u0E32\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Clear date",
-      toggleLabel: th ? "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19" : "Open calendar",
+      clearLabel: dt.clearDate,
+      toggleLabel: dt.openCalendar,
       onCommit: commit,
       onToggle: function(o) {
         pop.setOpen(o);
@@ -524,7 +586,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
 const DateRangePicker = React.forwardRef(
   function DateRangePicker2(props, ref) {
     const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
-    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
+    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
     const st = useMaybeControlled(
       props.value,
       props.defaultValue || { start: null, end: null },
@@ -571,7 +633,7 @@ const DateRangePicker = React.forwardRef(
           id: dialogId,
           role: "dialog",
           "aria-modal": false,
-          "aria-label": props.label || (th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Choose dates"),
+          "aria-label": props.label || dt.chooseDates,
           className: "aura-cal__popover",
           style: pop.pos,
           onKeyDown: function(e) {
@@ -581,7 +643,7 @@ const DateRangePicker = React.forwardRef(
             } else trapTab(e, pop.popRef.current);
           }
         },
-        /* @__PURE__ */ React.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" : "Choose the end date" : th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" : "Choose the start date"),
+        /* @__PURE__ */ React.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? dt.chooseEnd : dt.chooseStart),
         /* @__PURE__ */ React.createElement(
           Calendar,
           {
@@ -618,15 +680,15 @@ const DateRangePicker = React.forwardRef(
         inputRef: inputMerged,
         open: pop.open,
         display: show(v),
-        placeholder: props.placeholder || (th ? "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B" : "dd/mm/yyyy \u2013 dd/mm/yyyy"),
+        placeholder: props.placeholder || dt.rangePlaceholder,
         hasValue: v.start != null,
         clearable: props.clearable,
         onClear: function() {
           st[1]({ start: null, end: null });
           inputRef.current && inputRef.current.focus();
         },
-        clearLabel: th ? "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Clear dates",
-        toggleLabel: th ? "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19" : "Open calendar",
+        clearLabel: dt.clearDates,
+        toggleLabel: dt.openCalendar,
         onCommit: commit,
         onToggle: function(op) {
           pop.setOpen(op);

package/dist/esm/Icon.js

@@ -5,9 +5,20 @@ const h = React.createElement;
 const ICONS = { "check": [["path", { "d": "M20 6 9 17l-5-5" }]], "x": [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]], "plus": [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]], "minus": [["path", { "d": "M5 12h14" }]], "search": [["path", { "d": "m21 21-4.34-4.34" }], ["circle", { "cx": "11", "cy": "11", "r": "8" }]], "chevron-down": [["path", { "d": "m6 9 6 6 6-6" }]], "chevron-up": [["path", { "d": "m18 15-6-6-6 6" }]], "chevron-left": [["path", { "d": "m15 18-6-6 6-6" }]], "chevron-right": [["path", { "d": "m9 18 6-6-6-6" }]], "arrow-right": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]], "arrow-up-right": [["path", { "d": "M7 7h10v10" }], ["path", { "d": "M7 17 17 7" }]], "arrow-up-down": [["path", { "d": "m21 16-4 4-4-4" }], ["path", { "d": "M17 20V4" }], ["path", { "d": "m3 8 4-4 4 4" }], ["path", { "d": "M7 4v16" }]], "loader-circle": [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]], "circle-alert": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }], ["line", { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }]], "circle-check": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "m16 9-5.5 5.5L8 12" }]], "info": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 16v-4" }], ["path", { "d": "M12 8h.01" }]], "triangle-alert": [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]], "settings": [["path", { "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "user": [["path", { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { "cx": "12", "cy": "7", "r": "4" }]], "users": [["path", { "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { "d": "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { "d": "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { "cx": "9", "cy": "7", "r": "4" }]], "filter": [["path", { "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" }]], "ellipsis": [["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "19", "cy": "12", "r": "1" }], ["circle", { "cx": "5", "cy": "12", "r": "1" }]], "external-link": [["path", { "d": "M15 3h6v6" }], ["path", { "d": "M10 14 21 3" }], ["path", { "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]], "copy": [["rect", { "width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2" }], ["path", { "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]], "trash-2": [["path", { "d": "M10 11v6" }], ["path", { "d": "M14 11v6" }], ["path", { "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { "d": "M3 6h18" }], ["path", { "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]], "pencil": [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]], "download": [["path", { "d": "M12 15V3" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { "d": "m7 10 5 5 5-5" }]], "upload": [["path", { "d": "M12 3v12" }], ["path", { "d": "m17 8-5-5-5 5" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]], "calendar": [["path", { "d": "M8 2v3" }], ["path", { "d": "M16 2v3" }], ["rect", { "x": "3", "y": "3", "width": "18", "height": "18", "rx": "2" }], ["path", { "d": "M3 9h18" }]], "bell": [["path", { "d": "M10.268 21a2 2 0 0 0 3.464 0" }], ["path", { "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]], "menu": [["path", { "d": "M4 5h16" }], ["path", { "d": "M4 12h16" }], ["path", { "d": "M4 19h16" }]], "eye": [["path", { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "log-out": [["path", { "d": "m16 17 5-5-5-5" }], ["path", { "d": "M21 12H9" }], ["path", { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }]], "circle": [["circle", { "cx": "12", "cy": "12", "r": "10" }]], "circle-dot-dashed": [["path", { "d": "M10.1 2.18a9.93 9.93 0 0 1 3.8 0" }], ["path", { "d": "M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" }], ["path", { "d": "M21.82 10.1a9.93 9.93 0 0 1 0 3.8" }], ["path", { "d": "M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" }], ["path", { "d": "M13.9 21.82a9.94 9.94 0 0 1-3.8 0" }], ["path", { "d": "M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" }], ["path", { "d": "M2.18 13.9a9.93 9.93 0 0 1 0-3.8" }], ["path", { "d": "M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }]], "ban": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M4.929 4.929 19.07 19.071" }]], "arrow-up": [["path", { "d": "m5 12 7-7 7 7" }], ["path", { "d": "M12 19V5" }]], "arrow-down": [["path", { "d": "M12 5v14" }], ["path", { "d": "m19 12-7 7-7-7" }]], "inbox": [["polyline", { "points": "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }]], "pin": [["path", { "d": "M12 17v5" }], ["path", { "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }]], "pin-off": [["path", { "d": "M12 17v5" }], ["path", { "d": "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }], ["path", { "d": "m2 2 20 20" }], ["path", { "d": "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" }]], "eye-off": [["path", { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { "d": "m2 2 20 20" }]], "columns-3": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "M15 3v18" }]], "arrow-left": [["path", { "d": "m12 19-7-7 7-7" }], ["path", { "d": "M19 12H5" }]], "rotate-ccw": [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]], "house": [["path", { "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }], ["path", { "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }]], "layout-dashboard": [["rect", { "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }]], "folder": [["path", { "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }]], "chart-column": [["path", { "d": "M3 3v16a2 2 0 0 0 2 2h16" }], ["path", { "d": "M18 17V9" }], ["path", { "d": "M13 17V5" }], ["path", { "d": "M8 17v-3" }]], "file-text": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }], ["path", { "d": "M10 9H8" }], ["path", { "d": "M16 13H8" }], ["path", { "d": "M16 17H8" }]], "mail": [["path", { "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { "x": "2", "y": "4", "width": "20", "height": "16", "rx": "2" }]], "lock": [["rect", { "width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2" }], ["path", { "d": "M7 11V7a5 5 0 0 1 10 0v4" }]], "clock": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 6v6l4 2" }]], "trending-up": [["path", { "d": "M16 7h6v6" }], ["path", { "d": "m22 7-8.5 8.5-5-5L2 17" }]], "trending-down": [["path", { "d": "M16 17h6v-6" }], ["path", { "d": "m22 17-8.5-8.5-5 5L2 7" }]], "image": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }], ["circle", { "cx": "9", "cy": "9", "r": "2" }], ["path", { "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]], "paperclip": [["path", { "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]], "cloud-upload": [["path", { "d": "M12 13v8" }], ["path", { "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }], ["path", { "d": "m8 17 4-4 4 4" }]], "file": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]], "sun": [["circle", { "cx": "12", "cy": "12", "r": "4" }], ["path", { "d": "M12 2v2" }], ["path", { "d": "M12 20v2" }], ["path", { "d": "m4.93 4.93 1.41 1.41" }], ["path", { "d": "m17.66 17.66 1.41 1.41" }], ["path", { "d": "M2 12h2" }], ["path", { "d": "M20 12h2" }], ["path", { "d": "m6.34 17.66-1.41 1.41" }], ["path", { "d": "m19.07 4.93-1.41 1.41" }]], "moon": [["path", { "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" }]], "monitor": [["rect", { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }], ["line", { "x1": "8", "x2": "16", "y1": "21", "y2": "21" }], ["line", { "x1": "12", "x2": "12", "y1": "17", "y2": "21" }]] };
 const SIZES = { sm: 16, md: 20, lg: 24 };
 const Icon = React.forwardRef(function Icon2(props, ref) {
+  const size = SIZES[props.size] || props.size || 16;
+  if (React.isValidElement(props.name)) {
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: cx("aura-icon", "aura-icon--custom", props.className),
+        style: { width: size, height: size, ["--aura-icon-stroke"]: props.strokeWidth || 2 },
+        ...props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true }
+      },
+      props.name
+    );
+  }
   const shapes = ICONS[props.name];
   if (!shapes) return null;
-  const size = SIZES[props.size] || props.size || 16;
   const a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
   return /* @__PURE__ */ React.createElement(
     "svg",

package/dist/esm/IconButton.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cx, omit } from "./internal.js";
 import { Icon } from "./Icon.js";
 const IconButton = React.forwardRef(function IconButton2(props, ref) {
-  const rest = omit(props, ["icon", "label", "className", "size"]);
+  const rest = omit(props, ["icon", "label", "className", "size", "tone"]);
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -12,7 +12,7 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
       type: props.type || "button",
       "aria-label": props.label,
       title: props.label,
-      className: cx("aura-icon-btn", props.className)
+      className: cx("aura-icon-btn", props.tone === "danger" && "aura-icon-btn--danger", props.className)
     },
     /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: props.size || "sm" })
   );

package/dist/esm/NumberField.js

@@ -0,0 +1,175 @@
+'use client';
+import * as React from "react";
+import { Field, describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+function decimalsOf(n) {
+  const s = String(n);
+  const i = s.indexOf(".");
+  return i < 0 ? 0 : s.length - i - 1;
+}
+function parse(text) {
+  const s = text.replace(/[,\s ]/g, "");
+  if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
+  return Number(s);
+}
+const NumberField = React.forwardRef(function NumberField2(props, ref) {
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto;
+  const step = props.step || 1;
+  const decimals = props.decimals != null ? props.decimals : decimalsOf(step);
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue == null ? null : props.defaultValue,
+    props.onChange
+  );
+  const value = st[0], setValue = st[1];
+  const draftState = React.useState(null), draft = draftState[0], setDraft = draftState[1];
+  function fmt(n) {
+    if (n == null || isNaN(n)) return "";
+    return n.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+  }
+  function fit(n) {
+    let v = n;
+    if (props.min != null && v < props.min) v = props.min;
+    if (props.max != null && v > props.max) v = props.max;
+    const f = Math.pow(10, decimals);
+    return Math.round(v * f) / f;
+  }
+  function nudge(by) {
+    if (props.disabled || props.readOnly) return;
+    const base = value == null ? props.min != null && props.min > 0 ? props.min - by : 0 : value;
+    const next = fit(base + by);
+    setValue(next);
+    setDraft(null);
+  }
+  function onKeyDown(e) {
+    const k = e.key;
+    let by = 0;
+    if (k === "ArrowUp") by = step;
+    else if (k === "ArrowDown") by = -step;
+    else if (k === "PageUp") by = step * 10;
+    else if (k === "PageDown") by = -step * 10;
+    else if (k === "Home" && props.min != null) {
+      e.preventDefault();
+      setValue(props.min);
+      setDraft(null);
+      return;
+    } else if (k === "End" && props.max != null) {
+      e.preventDefault();
+      setValue(props.max);
+      setDraft(null);
+      return;
+    }
+    if (by) {
+      e.preventDefault();
+      nudge(by);
+    }
+  }
+  const atMin = value != null && props.min != null && value <= props.min;
+  const atMax = value != null && props.max != null && value >= props.max;
+  const affixText = function(x) {
+    return typeof x === "string" || typeof x === "number" ? String(x) : "";
+  };
+  const valueText = value == null ? void 0 : [affixText(props.prefix), fmt(value), affixText(props.suffix)].join(" ").trim();
+  const stepper = props.stepper !== false && !props.readOnly;
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref,
+        id,
+        type: "text",
+        role: "spinbutton",
+        inputMode: decimals > 0 || props.min != null && props.min < 0 ? "decimal" : "numeric",
+        autoComplete: "off",
+        className: "aura-input__control",
+        name: props.name,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        "aria-valuenow": value == null ? void 0 : value,
+        "aria-valuemin": props.min,
+        "aria-valuemax": props.max,
+        "aria-valuetext": valueText,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props),
+        value: draft != null ? draft : fmt(value),
+        onFocus: function() {
+          setDraft(fmt(value));
+        },
+        onChange: function(e) {
+          const text = e.target.value;
+          setDraft(text);
+          if (!text.trim()) setValue(null);
+          else {
+            const n = parse(text);
+            if (!isNaN(n)) setValue(n);
+          }
+        },
+        onBlur: function(e) {
+          const n = draft == null ? value : !draft.trim() ? null : parse(draft);
+          if (n == null) {
+            if (value != null) setValue(null);
+          } else if (!isNaN(n)) {
+            const f = fit(n);
+            if (f !== value) setValue(f);
+          }
+          setDraft(null);
+          if (props.onBlur) props.onBlur(e);
+        },
+        onKeyDown
+      }
+    ), props.suffix != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.suffix) : null, stepper ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__steps" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.decrease,
+        "aria-controls": id,
+        disabled: props.disabled || atMin,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(-step);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "minus" })
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.increase,
+        "aria-controls": id,
+        disabled: props.disabled || atMax,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(step);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "plus" })
+    )) : null)
+  );
+});
+export {
+  NumberField
+};

package/dist/esm/Pagination.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { IconButton } from "./IconButton.js";
 import { cx, useMaybeControlled } from "./internal.js";
-import { useStrings } from "./locale.js";
+import { useLinkComponent, useStrings } from "./locale.js";
 function pageList(page, count, sib) {
   let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
   if (page - sib <= 3) {
@@ -31,6 +31,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
     if (p >= 1 && p <= count && p !== page) st[1](p);
   }
   const link = props.getHref;
+  const Link = useLinkComponent();
   function item(p, label, extra) {
     const common = Object.assign(
       {
@@ -41,7 +42,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
       extra
     );
     return link ? /* @__PURE__ */ React.createElement(
-      "a",
+      Link,
       {
         href: link(p),
         onClick: function(e) {

package/dist/esm/SegmentedControl.js

@@ -0,0 +1,104 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+function toOpt(o) {
+  return typeof o === "object" ? o : { value: o, label: o };
+}
+const SegmentedControl = React.forwardRef(
+  function SegmentedControl2(props, ref) {
+    const options = (props.options || []).map(toOpt);
+    const firstEnabled = options.filter(function(o) {
+      return !o.disabled;
+    })[0];
+    const st = useMaybeControlled(
+      props.value,
+      props.defaultValue != null ? props.defaultValue : firstEnabled ? firstEnabled.value : void 0,
+      props.onChange
+    );
+    const value = st[0], setValue = st[1];
+    const auto = uid(), id = props.id || auto;
+    const refs = React.useRef([]);
+    const selIdx = options.findIndex(function(o) {
+      return o.value === value;
+    });
+    const tabIdx = selIdx >= 0 && !options[selIdx].disabled ? selIdx : options.indexOf(firstEnabled);
+    function move(from, dir) {
+      const n = options.length;
+      for (let k = 1; k <= n; k++) {
+        const i = ((from + dir * k) % n + n) % n;
+        if (!options[i].disabled) {
+          setValue(options[i].value);
+          const el = refs.current[i];
+          if (el) el.focus();
+          return;
+        }
+      }
+    }
+    function onKeyDown(e, i) {
+      const k = e.key;
+      if (k === "ArrowRight" || k === "ArrowDown") {
+        e.preventDefault();
+        move(i, 1);
+      } else if (k === "ArrowLeft" || k === "ArrowUp") {
+        e.preventDefault();
+        move(i, -1);
+      } else if (k === "Home") {
+        e.preventDefault();
+        move(-1, 1);
+      } else if (k === "End") {
+        e.preventDefault();
+        move(options.length, -1);
+      }
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        id,
+        role: "radiogroup",
+        "aria-label": props.label,
+        "aria-disabled": props.disabled || void 0,
+        className: cx(
+          "aura-segmented",
+          props.size === "sm" && "aura-segmented--sm",
+          props.fullWidth && "is-full",
+          props.disabled && "is-disabled",
+          props.className
+        )
+      },
+      options.map(function(o, i) {
+        const on = o.value === value;
+        const off = props.disabled || o.disabled;
+        return /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            key: o.value,
+            ref: function(el) {
+              refs.current[i] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            "aria-label": o.iconOnly ? o.label : void 0,
+            title: o.iconOnly ? o.label : void 0,
+            tabIndex: i === tabIdx && !props.disabled ? 0 : -1,
+            disabled: off,
+            className: cx("aura-segmented__option", on && "is-selected", o.iconOnly && "is-icon"),
+            onClick: function() {
+              setValue(o.value);
+            },
+            onKeyDown: function(e) {
+              onKeyDown(e, i);
+            }
+          },
+          o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
+          o.iconOnly ? null : /* @__PURE__ */ React.createElement("span", null, o.label)
+        );
+      })
+    );
+  }
+);
+export {
+  SegmentedControl
+};