@jirawatpyk/aura-react 4.19.0 → 5.0.0

package/dist/esm/DataTable.js

@@ -16,7 +16,16 @@ const DEFAULT_COLUMNS = [
   { key: "owner", label: "OWNER" }
 ];
 const SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
-const STACK_WIDTHS = [360, 400, 480, 520, 560, 600, 640, 720, 768, 800, 900, 960, 1024];
+const Q = 1e4;
+const MAX_HIDE_LEVELS = 3;
+function below(w, threshold) {
+  return w < threshold * (1 - 0.5 / Q);
+}
+function hidePx(c) {
+  if (c.hideBelow == null) return void 0;
+  const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
+  return px != null && px > 0 ? px : void 0;
+}
 const ROW_H_DEFAULT = 48, OVERSCAN = 8, FLEX_MIN = 160;
 const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const t = useStrings();
@@ -90,36 +99,55 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const measure = !!props.stackBelow || columns.some(function(c) {
     return c.hideBelow != null;
   });
-  const dual = !!props.stackBelow && boxWidth[0] == null && STACK_WIDTHS.indexOf(props.stackBelow) >= 0;
   React.useEffect(
     function() {
       if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
       const ro = new ResizeObserver(function(en) {
-        boxWidth[1](en[0].contentRect.width);
+        const bb = en[0].borderBoxSize && en[0].borderBoxSize[0];
+        boxWidth[1](bb ? bb.inlineSize : en[0].target.getBoundingClientRect().width);
       });
       ro.observe(wrapRef.current);
       return function() {
         ro.disconnect();
       };
     },
-    [measure, dual]
+    [measure]
   );
-  const stacked = !!props.stackBelow && boxWidth[0] != null && boxWidth[0] < props.stackBelow;
+  const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
   useIsoLayoutEffect(
     function() {
       if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
     },
     [measure]
   );
+  const hideLevels = [];
+  columns.forEach(function(c) {
+    const px = hidePx(c);
+    if (px != null && hideLevels.indexOf(px) < 0) hideLevels.push(px);
+  });
+  hideLevels.sort(function(a, b) {
+    return b - a;
+  });
+  hideLevels.length = Math.min(hideLevels.length, MAX_HIDE_LEVELS);
+  const levels = [];
+  if (props.stackBelow && props.stackBelow > 0) levels.push({ name: "stack", px: props.stackBelow });
+  hideLevels.forEach(function(px, i) {
+    levels.push({ name: "h" + (i + 1), px });
+  });
+  function hideLevel(c) {
+    const px = hidePx(c);
+    const i = px == null ? -1 : hideLevels.indexOf(px);
+    return i < 0 ? void 0 : i + 1;
+  }
   function tooNarrow(c) {
     if (c.hideBelow == null || boxWidth[0] == null || stacked) return false;
-    const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
-    return px != null && boxWidth[0] < px;
+    const px = hidePx(c);
+    return px != null && below(boxWidth[0], px);
   }
   const scrollRef = React.useRef(null);
   const tipState = React.useState(null), tip = tipState[0], setTip = tipState[1];
   function showFull(e) {
-    const el = e.target.closest ? e.target.closest(".aura-table__td, .aura-table__card-fields dd") : null;
+    const el = e.target.closest ? e.target.closest(".aura-table__td") : null;
     if (!el || el.scrollWidth <= el.clientWidth + 1 || el.querySelector("button, input, .aura-pill"))
       return setTip(null);
     const r = el.getBoundingClientRect();
@@ -151,7 +179,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const pending = React.useRef(null);
   const resizing = React.useRef(false);
   useIsoLayoutEffect(function() {
-    if (stacked || !gridRef.current) return;
+    if (!gridRef.current) return;
     const els = gridRef.current.querySelectorAll(
       '.aura-table__td button, .aura-table__td a[href], .aura-table__td input, .aura-table__td select, .aura-table__td textarea, .aura-table__td [tabindex="0"]'
     );
@@ -183,12 +211,31 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     })
   );
   const nPinned = vis.filter(isPinned).length;
+  const pillKey = (vis.filter(function(c, i) {
+    return i > 0 && c.pill;
+  })[0] || { key: "" }).key;
+  function cardPart(c, i) {
+    return i === 0 ? "title" : c.key === pillKey ? "pill" : c.actions ? "actions" : "field";
+  }
+  function cardAttrs(c, i) {
+    const part = cardPart(c, i), lv = hideLevel(c);
+    return {
+      "data-card": part,
+      "data-label": part === "field" ? c.label || void 0 : void 0,
+      "data-hide": lv ? String(lv) : void 0
+    };
+  }
+  const hasFields = vis.some(function(c, i) {
+    return cardPart(c, i) === "field";
+  });
   const hasFlex = vis.some(function(c) {
     return widthOf(c) == null;
   });
-  let fixedSum = 0;
+  let fixedSum = 0, hideTerms = "";
   vis.forEach(function(c) {
-    fixedSum += widthOf(c) != null ? widthOf(c) : FLEX_MIN;
+    const w = widthOf(c) != null ? widthOf(c) : FLEX_MIN, lv = hideLevel(c);
+    if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
+    else fixedSum += w;
   });
   let pinOffsets = {}, acc = 0;
   vis.forEach(function(c) {
@@ -199,13 +246,17 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   });
   const selW = selectable ? " + var(--aura-table-select-width)" : "";
   const gutterR = controls ? "var(--aura-space-12)" : "var(--aura-space-6)";
-  const rowMinWidth = "calc(" + fixedSum + "px + var(--aura-space-6) + " + gutterR + selW + ")";
+  const rowMinWidth = "calc(" + fixedSum + "px" + hideTerms + " + var(--aura-space-6) + " + gutterR + selW + ")";
   function cellStyle(c, i) {
-    let w = widthOf(c), s;
-    if (w == null) s = { flex: "1 1 0", minWidth: (c.minWidth || FLEX_MIN) + "px" };
-    else if (!hasFlex && i === vis.length - 1) s = { flex: "1 0 auto", width: w + "px" };
-    else s = { width: w + "px", flex: "none" };
-    if (isPinned(c)) s.left = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
+    const w = widthOf(c), s = {};
+    if (w == null) {
+      s["--aura-cell-flex"] = "1 1 0";
+      s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
+    } else {
+      s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
+      s["--aura-cell-w"] = w + "px";
+    }
+    if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
     return s;
   }
   const view = React.useMemo(
@@ -288,7 +339,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return rowHref ? /* @__PURE__ */ React.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
   }
   const height = props.height || 0;
-  const virtual = !!height && !loading && pageRows.length > 0;
+  const virtual = !!height && !loading && pageRows.length > 0 && !stacked;
   const bodyH = Math.max(ROW_H, height - ROW_H);
   let start = 0, end = pageRows.length;
   if (virtual) {
@@ -643,7 +694,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             label: all ? t.deselectAllRows : t.selectAllRows,
             onChange: toggleAll
           }
-        ) : null
+        ) : null,
+        nRows ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, t.selectRows)
       )
     );
   vis.forEach(function(c, i) {
@@ -661,6 +713,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           "aria-sort": ariaSort,
           "aria-colindex": ci + 1,
           style: cellStyle(c, i),
+          "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
           tabIndex: tabFor(0, ci),
           "data-rc": "0:" + ci,
           className: cx(
@@ -817,6 +870,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
               pin && j === nPinned - 1 && "is-pin-edge"
             ),
             style: cellStyle(c, j),
+            ...cardAttrs(c, j),
             onFocus: function() {
               if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
             }
@@ -825,6 +879,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         )
       );
     });
+    if (hasFields) cells.push(/* @__PURE__ */ React.createElement("span", { key: "__br", className: "aura-table__break", "aria-hidden": true }));
     cells.push(
       /* @__PURE__ */ React.createElement(
         "span",
@@ -838,7 +893,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return cells;
   }
   let body;
-  const rowStyle = { minWidth: rowMinWidth };
+  const rowStyle = { ["--aura-row-min"]: rowMinWidth };
   if (loading) {
     const n = pageSize || props.skeletonRows || 5;
     const skRows = body = [];
@@ -855,7 +910,9 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             {
               key: c.key,
               className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
-              style: cellStyle(c, j)
+              style: cellStyle(c, j),
+              ...cardAttrs(c, j),
+              "data-label": void 0
             },
             /* @__PURE__ */ React.createElement(
               "span",
@@ -867,6 +924,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           )
         );
       });
+      if (hasFields) sk.push(/* @__PURE__ */ React.createElement("span", { key: "__br", className: "aura-table__break" }));
       sk.push(
         /* @__PURE__ */ React.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
@@ -952,102 +1010,6 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   } else if (height && rows.length && !loading) {
     foot = /* @__PURE__ */ React.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React.createElement("span", null));
   }
-  function renderStacked(wrapRefArg) {
-    const titleCol = vis[0], pillCol = vis.filter(function(c) {
-      return c.pill && c !== titleCol;
-    })[0];
-    const actionCols = vis.filter(function(c) {
-      return c.actions && c !== titleCol;
-    });
-    const rest = vis.filter(function(c) {
-      return c !== titleCol && c !== pillCol && !c.actions;
-    });
-    let cardBody;
-    if (loading) {
-      cardBody = /* @__PURE__ */ React.createElement("ul", { className: "aura-table__cards", "aria-busy": true }, [0, 1, 2].map(function(i) {
-        return /* @__PURE__ */ React.createElement("li", { key: i, className: "aura-table__card", "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel", style: { width: "50%", height: "14px" } }), /* @__PURE__ */ React.createElement("span", { className: "aura-skel", style: { width: "80%" } }), /* @__PURE__ */ React.createElement("span", { className: "aura-skel", style: { width: "64%" } }));
-      }));
-    } else if (!rows.length) {
-      const em2 = props.empty || {};
-      cardBody = /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: em2.icon || "inbox", size: "lg" })), /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-title" }, em2.title || t.empty), em2.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-text" }, em2.description) : null, em2.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty-action" }, em2.action) : null));
-    } else {
-      const cellVal = cellContent;
-      cardBody = /* @__PURE__ */ React.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
-        const k = r[rowKey], isSel = !!selSet[k];
-        return /* @__PURE__ */ React.createElement(
-          "li",
-          {
-            key: k,
-            className: cx(
-              "aura-table__card",
-              isSel && "is-selected",
-              (props.onRowActivate || rowHref) && "is-actionable"
-            ),
-            tabIndex: props.onRowActivate && !rowHref ? 0 : void 0,
-            onClick: function(e) {
-              const el = e.target;
-              if (el.closest && el.closest(".aura-check, button, a, input")) return;
-              if (rowHref) followRow(e.currentTarget, e);
-              else if (props.onRowActivate) props.onRowActivate(r);
-            },
-            onKeyDown: function(e) {
-              if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate && !rowHref)
-                props.onRowActivate(r);
-            }
-          },
-          /* @__PURE__ */ React.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React.createElement(
-            Checkbox,
-            {
-              checked: isSel,
-              label: t.selectRow(k),
-              onChange: function(on) {
-                toggle(k, on);
-              }
-            }
-          ) : null, /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, rowLinkWrap(r, cellVal(titleCol, r))), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
-            return /* @__PURE__ */ React.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
-          })),
-          rest.length ? /* @__PURE__ */ React.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
-            return /* @__PURE__ */ React.createElement("div", { key: c.key }, /* @__PURE__ */ React.createElement("dt", null, c.label), /* @__PURE__ */ React.createElement("dd", { className: cx(c.mono && "aura-table__mono", c.align === "end" && "is-end") }, cellVal(c, r)));
-          })) : null
-        );
-      }));
-    }
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: wrapRefArg,
-        "data-density": props.density,
-        className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
-        onMouseOver: showFull,
-        onMouseLeave: hideFull,
-        onFocus: showFull,
-        onBlur: hideFull,
-        role: "region",
-        "aria-label": props.label,
-        "aria-busy": busy || void 0
-      },
-      refreshing ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
-      selectable && pageRows.length && !busy ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          checked: all,
-          indeterminate: nSel > 0 && !all,
-          label: all ? t.deselectAllRows : t.selectAllRows,
-          onChange: toggleAll
-        }
-      ), /* @__PURE__ */ React.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
-      cardBody,
-      props.footer && rows.length && !loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__card aura-table__card--total", role: "group", "aria-label": t.totals }, /* @__PURE__ */ React.createElement("dl", { className: "aura-table__card-fields" }, vis.filter(function(c) {
-        return props.footer[c.key] != null;
-      }).map(function(c) {
-        return /* @__PURE__ */ React.createElement("div", { key: c.key }, /* @__PURE__ */ React.createElement("dt", null, c.label || t.totals), /* @__PURE__ */ React.createElement("dd", { className: cx(c.mono && "aura-table__mono", c.align === "end" && "is-end") }, props.footer[c.key]));
-      }))) : null,
-      foot,
-      tipEl
-    );
-  }
-  if (stacked) return renderStacked(wrapMerged);
   const totalRow = props.footer && rows.length && !loading ? /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -1072,13 +1034,17 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             c.mono && "aura-table__mono",
             c.align === "end" && "is-end",
             pin && "is-pinned",
-            pin && j === nPinned - 1 && "is-pin-edge"
+            pin && j === nPinned - 1 && "is-pin-edge",
+            props.footer[c.key] == null && "is-blank"
           ),
-          style: cellStyle(c, j)
+          style: cellStyle(c, j),
+          ...cardAttrs(c, j),
+          "data-label": j === 0 ? void 0 : c.label || t.totals
         },
         props.footer[c.key]
       );
     }),
+    hasFields ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__break", "aria-hidden": true }) : null,
     /* @__PURE__ */ React.createElement(
       "span",
       {
@@ -1091,13 +1057,20 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
     scrollPaddingTop: ROW_H + "px"
   };
-  if (height) scrollStyle.height = height + "px";
+  if (height) scrollStyle["--aura-table-h"] = height + "px";
   const gridEl = /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: dual ? void 0 : wrapMerged,
+      ref: levels.length ? wrapRef : wrapMerged,
       "data-density": props.density,
-      className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
+      className: cx(
+        "aura-table",
+        stacked && "aura-table--stacked",
+        scrolledX[0] && "is-scrolled-x",
+        refreshing && "is-refreshing",
+        !levels.length && props.className
+      ),
+      style: levels.length ? { ["--aura-q-back"]: String(levels[levels.length - 1].px / Q) } : void 0
     },
     refreshing ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
     /* @__PURE__ */ React.createElement(
@@ -1129,7 +1102,16 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           if (sx !== scrolledX[0]) scrolledX[1](sx);
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cx("aura-table__head", selectable && nRows > 0 && !busy && "has-select-all"),
+          role: "row",
+          "aria-rowindex": 1,
+          style: rowStyle
+        },
+        head
+      ),
       body,
       totalRow
     ),
@@ -1157,8 +1139,20 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     ) : null,
     tipEl
   );
-  if (!dual) return gridEl;
-  return /* @__PURE__ */ React.createElement("div", { ref: wrapMerged, className: "aura-table-dual", "data-stack-below": props.stackBelow }, renderStacked(void 0), gridEl);
+  if (!levels.length) return gridEl;
+  let out = gridEl;
+  for (let i = levels.length - 1; i >= 0; i--) {
+    const prev = i === 0 ? Q : levels[i - 1].px;
+    out = /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx("aura-table-q", "aura-table-q--" + levels[i].name),
+        style: { ["--aura-q-scale"]: String(prev / levels[i].px) }
+      },
+      out
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
 });
 export {
   DataTable

package/dist/esm/DatePicker.js

@@ -13,7 +13,7 @@ import {
   dateText,
   defaultCalendar,
   fmt,
-  formatDate,
+  formatDate as formatDateBase,
   fromISO,
   localeTag,
   parseDate,
@@ -21,13 +21,13 @@ import {
   toISO,
   todayIn
 } from "./dates.js";
-import { formatDate as formatDate2, parseDate as parseDate2 } from "./dates.js";
+import { formatDate, parseDate as parseDate2 } from "./dates.js";
 function useFormatDate() {
   const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
   return React.useCallback(
     function(iso, opts) {
       const o = opts || {}, loc = o.locale || locale;
-      return formatDate(
+      return formatDateBase(
         iso,
         Object.assign({}, o, {
           locale: loc,
@@ -459,7 +459,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
       boxRef,
       inputRef: inputMerged,
       open: pop.open,
-      display: formatDate(st[0], { locale, calendar }),
+      display: formatDateBase(st[0], { locale, calendar }),
       placeholder: props.placeholder || dt.datePlaceholder,
       hasValue: st[0] != null,
       clearable: props.clearable,
@@ -493,8 +493,8 @@ const DateRangePicker = React.forwardRef(
     const o = { locale, calendar };
     function show(r) {
       if (!r.start) return "";
-      if (!r.end) return formatDate(r.start, o) + " \u2013";
-      return formatDate(r.start, o) + " \u2013 " + formatDate(r.end, o);
+      if (!r.end) return formatDateBase(r.start, o) + " \u2013";
+      return formatDateBase(r.start, o) + " \u2013 " + formatDateBase(r.end, o);
     }
     function commit(text) {
       const parts = String(text).split(/\s[–-]\s|\s*–\s*/);
@@ -599,7 +599,7 @@ export {
   Calendar,
   DatePicker,
   DateRangePicker,
-  formatDate2 as formatDate,
+  formatDate,
   parseDate2 as parseDate,
   useFormatDate
 };

package/dist/esm/Separator.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const Separator = React.forwardRef(function Separator2(props, ref) {
+  const vertical = props.orientation === "vertical";
+  const decorative = props.decorative !== false;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx("aura-separator", vertical && "aura-separator--vertical", props.className),
+      role: decorative ? "none" : "separator",
+      "aria-orientation": !decorative && vertical ? "vertical" : void 0,
+      style: props.spacing != null ? { ["--aura-separator-space"]: "var(--aura-space-" + props.spacing + ")" } : void 0
+    }
+  );
+});
+export {
+  Separator
+};

package/dist/esm/Table.js

@@ -0,0 +1,79 @@
+'use client';
+import * as React from "react";
+import { cx, uid, useIsoLayoutEffect } from "./internal.js";
+const Table = React.forwardRef(function Table2(props, ref) {
+  const { caption, captionHidden, density, className, children, ...rest } = props;
+  const capId = uid();
+  const wrap = React.useRef(null);
+  const sc = React.useState(false), scrolls = sc[0];
+  useIsoLayoutEffect(function() {
+    const el = wrap.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    function check() {
+      sc[1](el.scrollWidth > el.clientWidth + 1);
+    }
+    check();
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    return function() {
+      ro.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: wrap,
+      className: "aura-tbl-wrap",
+      "data-density": density,
+      tabIndex: scrolls ? 0 : void 0,
+      role: scrolls ? "region" : void 0,
+      "aria-labelledby": scrolls && caption != null ? capId : void 0
+    },
+    /* @__PURE__ */ React.createElement("table", { ref, className: cx("aura-tbl", className), ...rest }, caption != null ? /* @__PURE__ */ React.createElement("caption", { id: capId, className: cx("aura-tbl__caption", captionHidden && "aura-sr-only") }, caption) : null, children)
+  );
+});
+function section(tag, cls) {
+  const C = React.forwardRef(function TableSection(props, ref) {
+    const { className, ...rest } = props;
+    return React.createElement(tag, Object.assign({ ref, className: cx(cls, className) }, rest));
+  });
+  return C;
+}
+const THead = section("thead", "aura-tbl__head");
+THead.displayName = "THead";
+const TBody = section("tbody", "aura-tbl__body");
+TBody.displayName = "TBody";
+const TFoot = section("tfoot", "aura-tbl__foot");
+TFoot.displayName = "TFoot";
+const Tr = React.forwardRef(function Tr2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("tr", { ref, className: cx("aura-tbl__row", className), ...rest });
+});
+function cellClass(base, p) {
+  const align = p.align || (p.numeric ? "end" : void 0);
+  return cx(
+    base,
+    align === "end" && "is-end",
+    align === "center" && "is-center",
+    p.numeric && "is-numeric",
+    p.mono && "aura-table__mono",
+    p.className
+  );
+}
+const Th = React.forwardRef(function Th2(props, ref) {
+  const { align, numeric, mono, className, scope, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("th", { ref, scope: scope || "col", className: cellClass("aura-tbl__th", props), ...rest });
+});
+const Td = React.forwardRef(function Td2(props, ref) {
+  const { align, numeric, mono, className, scope, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("td", { ref, className: cellClass("aura-tbl__td", props), ...rest });
+});
+export {
+  TBody,
+  TFoot,
+  THead,
+  Table,
+  Td,
+  Th,
+  Tr
+};

package/dist/esm/Tooltip.js

@@ -23,9 +23,27 @@ const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
     function() {
       if (!open || !anchor.current || !tip.current) return;
       const r = anchor.current.getBoundingClientRect(), t = tip.current.getBoundingClientRect();
-      let side = props.side || "top", top = side === "top" ? r.top - t.height - 8 : r.bottom + 8;
-      if (side === "top" && top < 8) top = r.bottom + 8;
-      const left = Math.max(8, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 8));
+      const vw = window.innerWidth, vh = window.innerHeight, gap = 8, m = 8;
+      let side = props.side || "top";
+      if (side === "top" && r.top - t.height - gap < m && r.bottom + gap + t.height <= vh - m) side = "bottom";
+      else if (side === "bottom" && r.bottom + gap + t.height > vh - m && r.top - t.height - gap >= m) side = "top";
+      else if (side === "left" && r.left - t.width - gap < m && r.right + gap + t.width <= vw - m) side = "right";
+      else if (side === "right" && r.right + gap + t.width > vw - m && r.left - t.width - gap >= m) side = "left";
+      const clampX = function(x) {
+        return Math.max(m, Math.min(x, vw - t.width - m));
+      };
+      const clampY = function(y) {
+        return Math.max(m, Math.min(y, vh - t.height - m));
+      };
+      let top, left;
+      if (side === "top" || side === "bottom") {
+        top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
+        left = clampX(r.left + r.width / 2 - t.width / 2);
+      } else {
+        left = side === "left" ? r.left - t.width - gap : r.right + gap;
+        left = clampX(left);
+        top = clampY(r.top + r.height / 2 - t.height / 2);
+      }
       pos[1]({ top, left });
     },
     [open]

package/dist/esm/dates.js

@@ -101,7 +101,7 @@ function formatDate(iso, opts) {
   const o = opts || {}, d = fromISO(iso);
   if (!d) return "";
   const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
-  const loc = o.locale || "th";
+  const loc = o.locale || "en";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
 let MONTHS = null;

package/dist/esm/index.js

@@ -34,6 +34,8 @@ import { Grid } from "./Grid.js";
 import { Container } from "./Container.js";
 import { AppShell } from "./AppShell.js";
 import { ActionBar } from "./ActionBar.js";
+import { Separator } from "./Separator.js";
+import { Table, THead, TBody, TFoot, Tr, Th, Td } from "./Table.js";
 import { BottomNav } from "./BottomNav.js";
 import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
@@ -99,6 +101,7 @@ export {
   STRINGS,
   SegmentedControl,
   Select,
+  Separator,
   SideNav,
   Skeleton,
   Stack,
@@ -107,14 +110,21 @@ export {
   Stepper,
   Surface,
   Switch,
+  TBody,
+  TFoot,
+  THead,
+  Table,
   Tabs,
   Tag,
+  Td,
   TextField,
   Textarea,
+  Th,
   ThemeStyle,
   TimePicker,
   Toaster,
   Tooltip,
+  Tr,
   scale as brandScale,
   breakpoints,
   colorSchemeScript,