twico-ui 1.7.0 → 1.8.1

package/dist/index.cjs

@@ -32,17 +32,21 @@ function useScopedStyles(id, css) {
   const nonce = React36__namespace.useContext(NonceContext);
   React36__namespace.useInsertionEffect(() => {
     if (SUPPORTS_STYLE_HOIST) return;
-    if (typeof document === "undefined" || document.getElementById(id)) return;
-    const el = document.createElement("style");
-    el.id = id;
-    if (nonce) {
-      el.setAttribute("nonce", nonce);
-      el.nonce = nonce;
-    }
-    el.textContent = css;
-    document.head.appendChild(el);
+    if (typeof document === "undefined") return;
+    if (!css) return;
+    let el = document.getElementById(id);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = id;
+      if (nonce) {
+        el.setAttribute("nonce", nonce);
+        el.nonce = nonce;
+      }
+      document.head.appendChild(el);
+    }
+    if (el.textContent !== css) el.textContent = css;
   }, [id, css, nonce]);
-  return SUPPORTS_STYLE_HOIST ? React36__namespace.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
+  return SUPPORTS_STYLE_HOIST && css ? React36__namespace.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
 }
 
 // components/TwicoProvider.jsx
@@ -228,10 +232,13 @@ function Portal({ children }) {
   const render = usePortal();
   return render(children);
 }
+function encodeScriptLiteral(value) {
+  return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (c) => "\\u" + c.charCodeAt(0).toString(16).padStart(4, "0"));
+}
 function getColorSchemeScript({ storageKey = "twico-theme", attribute = "class", defaultScheme } = {}) {
-  const k = JSON.stringify(storageKey);
-  const a = JSON.stringify(attribute);
-  const d = defaultScheme === "dark" || defaultScheme === "light" ? JSON.stringify(defaultScheme) : "null";
+  const k = encodeScriptLiteral(storageKey);
+  const a = encodeScriptLiteral(attribute);
+  const d = defaultScheme === "dark" || defaultScheme === "light" ? encodeScriptLiteral(defaultScheme) : "null";
   return `(function(){try{var k=${k},a=${a},d=${d},t=localStorage.getItem(k);if(t!=='light'){if(t!=='dark'){t=d?d:(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');}}if(a==='class'){document.documentElement.classList.toggle('dark',t==='dark');}else{document.documentElement.setAttribute(a,t);}}catch(e){}})();`;
 }
 function ColorSchemeScript({ storageKey = "twico-theme", attribute = "class", nonce, defaultScheme }) {
@@ -1214,6 +1221,122 @@ function Button({
     }
   );
 }
+var UNITLESS = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexPositive",
+  "flexNegative",
+  "flexOrder",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "fontWeight",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth",
+  "scale"
+]);
+var isObject = (v) => v != null && typeof v === "object" && !Array.isArray(v);
+var isNestedKey = (k, v) => isObject(v) || k.charCodeAt(0) === 38 || k.charCodeAt(0) === 64 || k.charCodeAt(0) === 58;
+function kebab(prop) {
+  if (prop.startsWith("--")) return prop;
+  return prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function cssValue(key, value) {
+  if (typeof value !== "number") return String(value);
+  if (value === 0 || key.startsWith("--") || UNITLESS.has(key)) return String(value);
+  return `${value}px`;
+}
+function resolveSelector(key, scope) {
+  if (key.includes("&")) return key.replace(/&/g, scope);
+  if (key.charCodeAt(0) === 58) return `${scope}${key}`;
+  return `${scope} ${key}`;
+}
+function compileSx(obj, selector) {
+  if (!isObject(obj)) return "";
+  let decls = "";
+  let rules = "";
+  for (const key of Object.keys(obj)) {
+    const value = obj[key];
+    if (isNestedKey(key, value)) {
+      if (!isObject(value)) continue;
+      if (key.charCodeAt(0) === 64) {
+        const inner = compileSx(value, selector);
+        if (inner) rules += `${key} { ${inner.trim()} }
+`;
+      } else {
+        rules += compileSx(value, resolveSelector(key, selector));
+      }
+    } else {
+      decls += `${kebab(key)}: ${cssValue(key, value)}; `;
+    }
+  }
+  let out = "";
+  if (decls) out += `${selector} { ${decls.trimEnd()} }
+`;
+  out += rules;
+  return out;
+}
+function buildSx(sx, uid) {
+  if (!isObject(sx)) return { flatStyle: void 0, css: "" };
+  const scope = `[data-twc-sx="${uid}"]`;
+  let flatStyle;
+  let css = "";
+  for (const key of Object.keys(sx)) {
+    const value = sx[key];
+    if (isNestedKey(key, value)) {
+      if (!isObject(value)) continue;
+      if (key.charCodeAt(0) === 64) {
+        const inner = compileSx(value, scope);
+        if (inner) css += `${key} { ${inner.trim()} }
+`;
+      } else {
+        css += compileSx(value, resolveSelector(key, scope));
+      }
+    } else {
+      (flatStyle || (flatStyle = {}))[key] = value;
+    }
+  }
+  return { flatStyle, css };
+}
+function useSx(sx) {
+  const rawId = React36__namespace.default.useId();
+  const uid = `sx${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
+  const { flatStyle, css } = React36__namespace.default.useMemo(() => buildSx(sx, uid), [sx, uid]);
+  const styleNode = useScopedStyles(`twc-sx-${uid}`, css);
+  return { flatStyle, styleNode, sxAttr: css ? uid : void 0 };
+}
 var CARD_CSS = `
 .twc-card {
   display: flex; flex-direction: column;
@@ -1253,10 +1376,13 @@ function Card({
   padding = "md",
   interactive = false,
   fullHeight = false,
+  sx,
   className = "",
+  style,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-card-styles", CARD_CSS);
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1265,9 +1391,12 @@ function Card({
       "data-pad": padding,
       "data-interactive": interactive || void 0,
       "data-full": fullHeight || void 0,
+      "data-twc-sx": sxAttr,
+      style: style || flatStyle ? { ...style, ...flatStyle } : void 0,
       ...rest,
       children: [
         __twcStyles,
+        styleNode,
         title || subtitle || actions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-card__header", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-card__heading", children: [
             title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__title", children: title }) : null,
@@ -1686,6 +1815,10 @@ var COLORPICKER_CSS = `
 .twc-cp__hue { position: relative; height: 12px; margin-top: var(--space-3); border-radius: var(--radius-full); cursor: pointer; touch-action: none;
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
 .twc-cp__hue-knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-sm), inset 0 0 0 1px rgb(0 0 0 / 0.2); transform: translate(-50%, -50%); pointer-events: none; }
+.twc-cp__alpha { position: relative; height: 12px; margin-top: var(--space-2); border-radius: var(--radius-full); cursor: pointer; touch-action: none;
+  background-image: linear-gradient(to right, transparent, var(--_solid, #000)), conic-gradient(#c8c8c8 0 25%, #fff 0 50%, #c8c8c8 0 75%, #fff 0);
+  background-size: 100% 100%, 10px 10px; }
+.twc-cp__alpha:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-cp__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
 .twc-cp__hex { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
   color: var(--color-text); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); outline: none; }
@@ -1723,11 +1856,17 @@ function rgbToHex(r, g, b) {
 function hsvToHex(h, s, v) {
   return rgbToHex(...hsvToRgb(h, s, v));
 }
+function hsvaToHex8(h, s, v, a) {
+  return rgbToHex(...hsvToRgb(h, s, v)) + Math.round(Math.min(1, Math.max(0, a)) * 255).toString(16).padStart(2, "0");
+}
 function hexToHsv(hex) {
-  const m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
+  let str = String(hex || "").replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(str)) str = str.split("").map((c) => c + c).join("");
+  const m = /^([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(str);
   if (!m) return null;
   const int = parseInt(m[1], 16);
   const r = (int >> 16) / 255, g = (int >> 8 & 255) / 255, b = (int & 255) / 255;
+  const a = m[2] != null ? parseInt(m[2], 16) / 255 : 1;
   const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
   let h = 0;
   if (d) {
@@ -1737,7 +1876,7 @@ function hexToHsv(hex) {
     h *= 60;
     if (h < 0) h += 360;
   }
-  return { h, s: max ? d / max * 100 : 0, v: max * 100 };
+  return { h, s: max ? d / max * 100 : 0, v: max * 100, a };
 }
 var DEFAULT_PRESETS = ["#6366F1", "#0EA5E9", "#14B8A6", "#22C55E", "#F59E0B", "#F43F5E", "#8B5CF6", "#0F172A"];
 function ColorPicker({
@@ -1749,6 +1888,7 @@ function ColorPicker({
   defaultValue = "#6366F1",
   presets = DEFAULT_PRESETS,
   disabled = false,
+  alpha = false,
   tone = "primary",
   onChange,
   className = "",
@@ -1758,16 +1898,18 @@ function ColorPicker({
   const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
   const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
+  const hexRe = alpha ? /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i : /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
   const lastValidRef = React36__namespace.default.useRef(hex);
-  if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
+  if (hexRe.test(hex)) lastValidRef.current = hex;
   const [open, setOpen] = React36__namespace.default.useState(false);
-  const [hsv, setHsv] = React36__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
+  const [hsv, setHsv] = React36__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94, a: 1 });
   const [coords, setCoords] = React36__namespace.default.useState(null);
   const wrapRef = React36__namespace.default.useRef(null);
   const triggerRef = React36__namespace.default.useRef(null);
   const popRef = React36__namespace.default.useRef(null);
   const areaRef = React36__namespace.default.useRef(null);
   const hueRef = React36__namespace.default.useRef(null);
+  const alphaRef = React36__namespace.default.useRef(null);
   const POP_W = 240;
   const place = React36__namespace.default.useCallback(() => {
     const el = triggerRef.current;
@@ -1820,10 +1962,10 @@ function ColorPicker({
   }, [open]);
   useFocusTrap(popRef, open && !!coords, { initialFocus: areaRef });
   const commit = (next) => {
-    const h = hsvToHex(next.h, next.s, next.v);
+    const out = alpha ? hsvaToHex8(next.h, next.s, next.v, next.a ?? 1) : hsvToHex(next.h, next.s, next.v);
     setHsv(next);
-    if (value === void 0) setInternal(h);
-    onChange?.(h);
+    if (value === void 0) setInternal(out);
+    onChange?.(out);
   };
   const dragArea = (e) => {
     const r = areaRef.current.getBoundingClientRect();
@@ -1867,6 +2009,21 @@ function ColorPicker({
     e.preventDefault();
     commit({ ...hsv, h });
   };
+  const dragAlpha = (e) => {
+    const r = alphaRef.current.getBoundingClientRect();
+    const a = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
+    commit({ ...hsv, a });
+  };
+  const onAlphaKeyDown = (e) => {
+    let a = hsv.a ?? 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") a = Math.min(1, a + 0.01);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") a = Math.max(0, a - 0.01);
+    else if (e.key === "Home") a = 0;
+    else if (e.key === "End") a = 1;
+    else return;
+    e.preventDefault();
+    commit({ ...hsv, a: Math.round(a * 100) / 100 });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, children: [
     __twcStyles0,
     __twcStyles1,
@@ -1953,6 +2110,23 @@ function ColorPicker({
                 children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cp__hue-knob", style: { left: `${hsv.h / 360 * 100}%` } })
               }
             ),
+            alpha ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "twc-cp__alpha",
+                ref: alphaRef,
+                onPointerDown: startDrag(dragAlpha),
+                role: "slider",
+                tabIndex: 0,
+                "aria-label": "Alpha",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round((hsv.a ?? 1) * 100),
+                onKeyDown: onAlphaKeyDown,
+                style: { "--_solid": hsvToHex(hsv.h, hsv.s, hsv.v) },
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cp__hue-knob", style: { left: `${(hsv.a ?? 1) * 100}%` } })
+              }
+            ) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-cp__foot", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cp__swatch", style: { background: hex } }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1961,10 +2135,10 @@ function ColorPicker({
                   className: "twc-cp__hex",
                   "data-tone": tone,
                   value: hex,
-                  maxLength: 7,
+                  maxLength: alpha ? 9 : 7,
                   "aria-label": "Hex color",
-                  "aria-invalid": !/^#[0-9a-f]{6}$/i.test(hex) || void 0,
-                  "data-invalid": !/^#[0-9a-f]{6}$/i.test(hex) || void 0,
+                  "aria-invalid": !hexRe.test(hex) || void 0,
+                  "data-invalid": !hexRe.test(hex) || void 0,
                   onChange: (e) => {
                     let v = e.target.value;
                     if (!v.startsWith("#")) v = "#" + v;
@@ -1974,7 +2148,7 @@ function ColorPicker({
                     if (p) setHsv(p);
                   },
                   onBlur: () => {
-                    if (/^#[0-9a-f]{6}$/i.test(hex)) return;
+                    if (hexRe.test(hex)) return;
                     const revert = lastValidRef.current;
                     if (revert === hex) return;
                     if (value === void 0) setInternal(revert);
@@ -2132,6 +2306,8 @@ function Combobox({
   loading = false,
   emptyText = "No results found",
   name,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onFocus,
@@ -2150,6 +2326,8 @@ function Combobox({
   const [query, setQuery] = React36__namespace.default.useState("");
   const [active, setActive] = React36__namespace.default.useState(0);
   const [coords, setCoords] = React36__namespace.default.useState(null);
+  const [scrollTop, setScrollTop] = React36__namespace.default.useState(0);
+  const [listH, setListH] = React36__namespace.default.useState(260);
   const wrapRef = React36__namespace.default.useRef(null);
   const controlRef = React36__namespace.default.useRef(null);
   const inputRef = React36__namespace.default.useRef(null);
@@ -2162,6 +2340,26 @@ function Combobox({
     return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
   }, [groups, query, filter]);
   const visible = React36__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React36__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React36__namespace.default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
     while (i >= 0 && i < visible.length) {
@@ -2215,8 +2413,27 @@ function Combobox({
     setActive(idx >= 0 ? idx : 0);
   }, [open]);
   React36__namespace.default.useEffect(() => {
-    if (open) ensureVisible(listRef.current, activeRef.current);
-  }, [active, open]);
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized]);
+  React36__namespace.default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
   function openMenu() {
     if (disabled) return;
     setQuery("");
@@ -2261,45 +2478,60 @@ function Combobox({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
+  const renderOption = (o, idx) => {
+    const isSel = o.value === current;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: o.disabled || void 0,
+        "aria-disabled": o.disabled || void 0,
+        "data-disabled": o.disabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!o.disabled) setActive(idx);
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => commit(o.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] }),
+          isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
   let counter = -1;
-  const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+  const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
     "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
+  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+    vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+    vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+  ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
       const idx = counter;
-      const isSel = o.value === current;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          id: optionId(idx),
-          type: "button",
-          className: "twc-opt",
-          role: "option",
-          "aria-selected": isSel,
-          ref: idx === active ? activeRef : null,
-          disabled: o.disabled || void 0,
-          "aria-disabled": o.disabled || void 0,
-          "data-disabled": o.disabled || void 0,
-          "data-selected": isSel || void 0,
-          "data-active": idx === active || void 0,
-          onMouseEnter: () => {
-            if (!o.disabled) setActive(idx);
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => commit(o.value),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-            ] }),
-            isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
-          ]
-        },
-        o.value
-      );
+      return renderOption(o, idx);
     })
   ] }, gi)) });
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
@@ -2896,6 +3128,8 @@ function Select({
   loading = false,
   emptyText = "No results found",
   name,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onClick,
@@ -2916,6 +3150,8 @@ function Select({
   const [active, setActive] = React36__namespace.default.useState(0);
   const [coords, setCoords] = React36__namespace.default.useState(null);
   const [query, setQuery] = React36__namespace.default.useState("");
+  const [scrollTop, setScrollTop] = React36__namespace.default.useState(0);
+  const [listH, setListH] = React36__namespace.default.useState(260);
   const wrapRef = React36__namespace.default.useRef(null);
   const triggerRef = React36__namespace.default.useRef(null);
   const popRef = React36__namespace.default.useRef(null);
@@ -2929,6 +3165,26 @@ function Select({
     return groups.map((g) => ({ group: g.group, options: g.options.filter((o) => o.label.toLowerCase().includes(q) || o.description && o.description.toLowerCase().includes(q)) })).filter((g) => g.options.length);
   }, [groups, query]);
   const visible = React36__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React36__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React36__namespace.default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const selected = flat.find((o) => o.value === current);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
@@ -2985,8 +3241,27 @@ function Select({
     setActive(0);
   }, [query]);
   React36__namespace.default.useEffect(() => {
-    if (open) ensureVisible2(listRef.current, activeRef.current);
-  }, [active, open]);
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized, render]);
+  React36__namespace.default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible2(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
   React36__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
@@ -3060,6 +3335,45 @@ function Select({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
+  const renderOption = (o, idx) => {
+    const isSel = o.value === current;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: o.disabled || void 0,
+        "aria-disabled": o.disabled || void 0,
+        "data-disabled": o.disabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!o.disabled) setActive(idx);
+        },
+        onClick: () => commit(o.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] }),
+          isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
   let counter = -1;
   const popInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     showSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__search", children: [
@@ -3087,43 +3401,19 @@ function Select({
         searchRef.current?.focus();
       }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
       "Loading\u2026"
-    ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
+    ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+      vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+      vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+    ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
         const idx = counter;
-        const isSel = o.value === current;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            id: optionId(idx),
-            type: "button",
-            className: "twc-opt",
-            role: "option",
-            "aria-selected": isSel,
-            ref: idx === active ? activeRef : null,
-            disabled: o.disabled || void 0,
-            "aria-disabled": o.disabled || void 0,
-            "data-disabled": o.disabled || void 0,
-            "data-selected": isSel || void 0,
-            "data-active": idx === active || void 0,
-            onMouseEnter: () => {
-              if (!o.disabled) setActive(idx);
-            },
-            onClick: () => commit(o.value),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-                o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-              ] }),
-              isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
-            ]
-          },
-          o.value
-        );
+        return renderOption(o, idx);
       })
     ] }, gi)) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sel__sr", role: "status", "aria-live": "polite", children: loading ? "Loading\u2026" : visible.length === 0 ? emptyText : `${visible.length} result${visible.length === 1 ? "" : "s"}` })
@@ -3669,6 +3959,8 @@ function MultiSelect({
   name,
   max,
   maxTagCount,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onFocus,
@@ -3686,6 +3978,8 @@ function MultiSelect({
   const [query, setQuery] = React36__namespace.default.useState("");
   const [active, setActive] = React36__namespace.default.useState(0);
   const [coords, setCoords] = React36__namespace.default.useState(null);
+  const [scrollTop, setScrollTop] = React36__namespace.default.useState(0);
+  const [listH, setListH] = React36__namespace.default.useState(260);
   const wrapRef = React36__namespace.default.useRef(null);
   const controlRef = React36__namespace.default.useRef(null);
   const inputRef = React36__namespace.default.useRef(null);
@@ -3697,6 +3991,26 @@ function MultiSelect({
     [groups, query]
   );
   const visible = React36__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React36__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React36__namespace.default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const capReached = max != null && (value !== void 0 ? value : internal).length >= max;
   const isOptDisabled = (o) => o.disabled || capReached && !(value !== void 0 ? value : internal).includes(o.value);
   const nextEnabled = (from, dir) => {
@@ -3748,8 +4062,27 @@ function MultiSelect({
     setActive(0);
   }, [query]);
   React36__namespace.default.useEffect(() => {
-    if (open) ensureVisible3(listRef.current, activeRef.current);
-  }, [active, open]);
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized]);
+  React36__namespace.default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible3(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
   function commit(next) {
     if (value === void 0) setInternal(next);
     onChange?.(next);
@@ -3786,48 +4119,74 @@ function MultiSelect({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  let counter = -1;
-  const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": "true", children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
-    "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
-    g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
-    g.options.map((o) => {
-      counter += 1;
-      const idx = counter;
-      const isSel = selected.includes(o.value);
-      const optDisabled = isOptDisabled(o);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          id: optionId(idx),
-          type: "button",
-          className: "twc-opt",
-          role: "option",
-          "aria-selected": isSel,
-          ref: idx === active ? activeRef : null,
-          disabled: optDisabled || void 0,
-          "aria-disabled": optDisabled || void 0,
-          "data-disabled": optDisabled || void 0,
-          "data-selected": isSel || void 0,
-          "data-active": idx === active || void 0,
-          onMouseEnter: () => {
-            if (!optDisabled) setActive(idx);
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => toggle(o.value),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-            ] })
-          ]
+  const renderOption = (o, idx) => {
+    const isSel = selected.includes(o.value);
+    const optDisabled = isOptDisabled(o);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: optDisabled || void 0,
+        "aria-disabled": optDisabled || void 0,
+        "data-disabled": optDisabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!optDisabled) setActive(idx);
         },
-        o.value
-      );
-    })
-  ] }, gi)) });
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => toggle(o.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] })
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
+  let counter = -1;
+  const popInner = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "twc-pop__list",
+      id: listboxId,
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": "true",
+      onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
+        "Loading\u2026"
+      ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+        vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+        vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+      ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
+        g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
+        g.options.map((o) => {
+          counter += 1;
+          const idx = counter;
+          return renderOption(o, idx);
+        })
+      ] }, gi))
+    }
+  );
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const canPortal = portal && RD && RD.createPortal;
   let popEl = null;
@@ -5001,6 +5360,9 @@ function Datatable({
   density: densityProp = "comfortable",
   pageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
+  page,
+  onPageChange,
+  onPageSizeChange,
   height = 440,
   serverMode = false,
   rowCount,
@@ -5115,8 +5477,21 @@ function Datatable({
   const [selected, setSelected] = React36__namespace.default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React36__namespace.default.useState(null);
   const [activeCell, setActiveCell] = React36__namespace.default.useState(null);
-  const [page, setPage] = React36__namespace.default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React36__namespace.default.useState(pageSize > 0 ? pageSize : 10);
+  const [internalPage, setInternalPage] = React36__namespace.default.useState(0);
+  const [internalRpp, setInternalRpp] = React36__namespace.default.useState(pageSize > 0 ? pageSize : 10);
+  const pageControlled = page !== void 0;
+  const pageSizeControlled = onPageSizeChange !== void 0;
+  const pageVal = pageControlled ? page : internalPage;
+  const sizeVal = pageSizeControlled ? pageSize > 0 ? pageSize : 10 : internalRpp;
+  const commitPage = (next) => {
+    onPageChange?.(next);
+    if (!pageControlled) setInternalPage(next);
+  };
+  const commitPageSize = (next) => {
+    onPageSizeChange?.(next);
+    if (!pageSizeControlled) setInternalRpp(next);
+    commitPage(0);
+  };
   const [colQuery, setColQuery] = React36__namespace.default.useState("");
   const [widths, setWidths] = React36__namespace.default.useState({});
   const [order, setOrder] = React36__namespace.default.useState(() => columns.map((c) => c.field));
@@ -5182,6 +5557,11 @@ function Datatable({
   React36__namespace.default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
+  React36__namespace.default.useEffect(() => {
+    if (pageSizeControlled) return;
+    setInternalRpp(pageSize > 0 ? pageSize : 10);
+    setInternalPage(0);
+  }, [pageSize]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
   const rowGroupingKeyRef = React36__namespace.default.useRef(rowGroupingKey);
   React36__namespace.default.useEffect(() => {
@@ -5365,10 +5745,10 @@ function Datatable({
   const paginated = pageSize > 0;
   const serverTotal = rowCount == null ? processed.length : rowCount;
   const totalRows = serverMode ? serverTotal : processed.length;
-  const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / rowsPerPage)) : 1;
-  const paged = !paginated || serverMode ? processed : processed.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+  const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / sizeVal)) : 1;
+  const paged = !paginated || serverMode ? processed : processed.slice(pageVal * sizeVal, pageVal * sizeVal + sizeVal);
   React36__namespace.default.useEffect(() => {
-    if (page > totalPages - 1) setPage(0);
+    if (pageVal > totalPages - 1) commitPage(0);
   }, [totalPages]);
   const activeGroupBy = React36__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
@@ -5631,15 +6011,15 @@ function Datatable({
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
-        page,
-        pageSize: rowsPerPage,
+        page: pageVal,
+        pageSize: sizeVal,
         sort,
         filters: filters.map(({ id, ...f }) => f),
         quickFilter: quick.trim()
       });
     }, 250);
     return () => clearTimeout(t);
-  }, [serverMode, page, rowsPerPage, sort, filters, quick]);
+  }, [serverMode, pageVal, sizeVal, sort, filters, quick]);
   function cycleSort(field) {
     setSort((s) => !s || s.field !== field ? { field, dir: "asc" } : s.dir === "asc" ? { field, dir: "desc" } : null);
   }
@@ -5920,7 +6300,7 @@ function Datatable({
   }
   React36__namespace.default.useEffect(() => {
     setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
-  }, [leafRows.length, ordered.length, page]);
+  }, [leafRows.length, ordered.length, pageVal]);
   const selectedRows = React36__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
@@ -6165,7 +6545,7 @@ function Datatable({
       {
         className: "twc-dt__row",
         role: "row",
-        "aria-rowindex": (paginated && !serverMode ? page * rowsPerPage : 0) + ri + 2,
+        "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
         "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
         "data-selected": sel || void 0,
         "data-active": rowActive || void 0,
@@ -6223,7 +6603,7 @@ function Datatable({
             ] }),
             rowResize && !pinSide ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
           ] }) : null,
-          showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? page * rowsPerPage : 0) + ri + 1 : "" }) : null,
+          showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
           ordered.map((c, ci) => {
             const st = stickyOf(c.field);
             const val = row[c.field];
@@ -6551,7 +6931,7 @@ function Datatable({
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
         /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => {
           setQuick(e.target.value);
-          setPage(0);
+          commitPage(0);
         } })
       ] })
     ] }),
@@ -6753,7 +7133,7 @@ function Datatable({
               );
             })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(rowsPerPage, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
             checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: 44 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
             showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
             ordered.map((c, ci) => {
@@ -6797,7 +7177,7 @@ function Datatable({
           const nf = (n) => n.toLocaleString();
           if (totalRows === 0) return "No rows";
           const shown = paged.length;
-          const start = paginated ? page * rowsPerPage + 1 : 1;
+          const start = paginated ? pageVal * sizeVal + 1 : 1;
           const end = paginated ? start + shown - 1 : shown;
           return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             paginated ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -6825,13 +7205,10 @@ function Datatable({
         })() }),
         paginated ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__rpp", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__rpp-label", children: "Rows per page" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 78 }, children: /* @__PURE__ */ jsxRuntime.jsx(Select, { size: "sm", portal: true, searchable: false, value: String(rowsPerPage), options: rppOptions, placement: "top", onChange: (v) => {
-            setRowsPerPage(Number(v));
-            setPage(0);
-          } }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 78 }, children: /* @__PURE__ */ jsxRuntime.jsx(Select, { size: "sm", portal: true, searchable: false, value: String(sizeVal), options: rppOptions, placement: "top", onChange: (v) => commitPageSize(Number(v)) }) })
         ] }) : null
       ] }),
-      paginated ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { size: "sm", page: page + 1, total: totalPages, boundaries: 3, showPageJumper: showPageJumper && totalPages > 5, onChange: (p) => setPage(p - 1) }) }) : null
+      paginated ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { size: "sm", page: pageVal + 1, total: totalPages, boundaries: 3, showPageJumper: showPageJumper && totalPages > 5, onChange: (p) => commitPage(p - 1) }) }) : null
     ] }) : null,
     exportOpen && exportPos ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -7480,6 +7857,18 @@ var DATEPICKER_CSS = `
 .twc-dp__clear { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-full); }
 .twc-dp__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-dp__clear svg { width: 14px; height: 14px; }
+/* #105: editable (typed entry) variant \u2014 the control wraps a real text input + a trailing toggle. */
+.twc-dp__control--editable { cursor: text; gap: 0; padding-inline-end: var(--space-1); }
+.twc-dp__input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; padding: 0;
+  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); }
+.twc-dp__input::placeholder { color: var(--color-text-subtle); }
+.twc-dp__input:disabled { cursor: not-allowed; }
+.twc-dp__clear--inline { position: static; transform: none; flex: none; }
+.twc-dp__toggle { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: transparent;
+  color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
+.twc-dp__toggle:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-dp__toggle:disabled { cursor: not-allowed; }
+.twc-dp__toggle svg { width: 17px; height: 17px; }
 
 .twc-dp__pop {
   position: fixed; z-index: var(--z-popover); width: 280px;
@@ -7539,6 +7928,8 @@ function DatePicker({
   disabled = false,
   tone = "primary",
   clearable = true,
+  editable = false,
+  parse,
   format,
   locale,
   weekStartsOn = 0,
@@ -7560,6 +7951,7 @@ function DatePicker({
   const [mode, setMode] = React36__namespace.default.useState("days");
   const [focusDate, setFocusDate] = React36__namespace.default.useState(null);
   const [focusMonth, setFocusMonth] = React36__namespace.default.useState(null);
+  const [editText, setEditText] = React36__namespace.default.useState(null);
   const [coords, setCoords] = React36__namespace.default.useState(null);
   const wrapRef = React36__namespace.default.useRef(null);
   const triggerRef = React36__namespace.default.useRef(null);
@@ -7623,8 +8015,33 @@ function DatePicker({
   const pick = (d) => {
     if (value === void 0) setInternal(d);
     onChange?.(d);
+    setEditText(null);
     setOpen(false);
   };
+  const parseTyped = (s) => {
+    const str = s.trim();
+    if (str === "") return null;
+    if (parse) {
+      const d = parse(str);
+      return d instanceof Date && !Number.isNaN(d.getTime()) ? d : void 0;
+    }
+    const t = Date.parse(str);
+    return Number.isNaN(t) ? void 0 : new Date(t);
+  };
+  const commitText = () => {
+    if (editText == null) return;
+    const parsed = parseTyped(editText);
+    if (parsed === null) {
+      setEditText(null);
+      if (selected) pick(null);
+      return;
+    }
+    if (parsed === void 0 || outOfRange(parsed)) {
+      setEditText(null);
+      return;
+    }
+    pick(parsed);
+  };
   const y = view.getFullYear(), m = view.getMonth();
   const first = new Date(y, m, 1);
   const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
@@ -7700,7 +8117,82 @@ function DatePicker({
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dp__field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dp__field", children: editable ? (
+      // #105: typed entry — the trigger is a real text input with a trailing
+      // calendar toggle button; typing commits via `parse` on Enter/blur.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "twc-dp__control twc-dp__control--editable",
+          "data-open": open || void 0,
+          "data-disabled": disabled || void 0,
+          "data-tone": tone,
+          "data-invalid": invalid || void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: triggerRef,
+                className: "twc-dp__input",
+                id: fieldId,
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "off",
+                disabled,
+                placeholder,
+                value: editText != null ? editText : selected ? fmt(selected) : "",
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                "aria-labelledby": label ? `${fieldId}-label` : void 0,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": error || hint ? descId : void 0,
+                onChange: (e) => setEditText(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitText();
+                  } else if (e.key === "ArrowDown" && (e.altKey || !open)) {
+                    e.preventDefault();
+                    setOpen(true);
+                  } else if (e.key === "Escape" && open) setOpen(false);
+                },
+                onBlur: (e) => {
+                  if (popRef.current && popRef.current.contains(e.relatedTarget)) return;
+                  commitText();
+                }
+              }
+            ),
+            clearable && selected && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "twc-dp__clear twc-dp__clear--inline",
+                "aria-label": "Clear",
+                tabIndex: -1,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => pick(null),
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "twc-dp__toggle",
+                "aria-label": "Open calendar",
+                tabIndex: -1,
+                disabled,
+                onClick: () => !disabled && setOpen((o) => !o),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -7739,7 +8231,7 @@ function DatePicker({
         e.stopPropagation();
         pick(null);
       }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
-    ] }),
+    ] }) }),
     open && coords ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -7838,6 +8330,17 @@ var RANGE_CSS = `
 .twc-drp__ic svg { width: 17px; height: 17px; }
 .twc-drp__text { flex: 1; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; }
 .twc-drp__text[data-placeholder="true"] { color: var(--color-text-subtle); }
+/* #105: editable (typed entry) variant. */
+.twc-drp__control--editable { cursor: text; gap: 0; padding-inline-end: var(--space-1); }
+.twc-drp__input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; padding: 0;
+  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); }
+.twc-drp__input::placeholder { color: var(--color-text-subtle); }
+.twc-drp__input:disabled { cursor: not-allowed; }
+.twc-drp__toggle { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: transparent;
+  color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
+.twc-drp__toggle:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-drp__toggle:disabled { cursor: not-allowed; }
+.twc-drp__toggle svg { width: 17px; height: 17px; }
 .twc-drp__pop { position: fixed; z-index: var(--z-popover); display: flex;
   background: var(--color-surface-raised); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg); animation: twico-scale-in var(--duration-fast) var(--ease-spring); transform-origin: top; }
@@ -7892,6 +8395,8 @@ function DateRangePicker({
   disabledDate,
   disabled = false,
   tone = "primary",
+  editable = false,
+  parse,
   onChange,
   className = "",
   ...rest
@@ -7904,6 +8409,7 @@ function DateRangePicker({
   const [view, setView] = React36__namespace.default.useState(range.start || /* @__PURE__ */ new Date());
   const [hover, setHover] = React36__namespace.default.useState(null);
   const [focusDate, setFocusDate] = React36__namespace.default.useState(null);
+  const [editText, setEditText] = React36__namespace.default.useState(null);
   const [coords, setCoords] = React36__namespace.default.useState(null);
   const wrapRef = React36__namespace.default.useRef(null);
   const triggerRef = React36__namespace.default.useRef(null);
@@ -7959,6 +8465,40 @@ function DateRangePicker({
     if (value === void 0) setInternal(r);
     onChange?.(r);
   };
+  const parseOne = (s) => {
+    const str = s.trim();
+    if (str === "") return null;
+    if (parse) {
+      const d = parse(str);
+      return d instanceof Date && !Number.isNaN(d.getTime()) ? d : void 0;
+    }
+    const t = Date.parse(str);
+    return Number.isNaN(t) ? void 0 : new Date(t);
+  };
+  const commitText = () => {
+    if (editText == null) return;
+    const raw = editText.trim();
+    if (raw === "") {
+      setEditText(null);
+      if (range.start || range.end) set({ start: null, end: null });
+      return;
+    }
+    const parts = raw.split(/\s*(?:–|—|\bto\b|\.\.+)\s*/i).map((p) => p.trim());
+    let a = parseOne(parts[0] || "");
+    let b = parts.length > 1 ? parseOne(parts[1] || "") : null;
+    if (a === void 0 || b === void 0 || a && outOfRange(a) || b && outOfRange(b)) {
+      setEditText(null);
+      return;
+    }
+    if (a && b && ymd(b) < ymd(a)) {
+      const t = a;
+      a = b;
+      b = t;
+    }
+    set({ start: a || null, end: b || null });
+    setEditText(null);
+    setOpen(false);
+  };
   useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
   const outOfRange = (d) => min && ymd(d) < ymd(min) || max && ymd(d) > ymd(max) || Boolean(disabledDate && disabledDate(d));
   const sameDay2 = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -8054,7 +8594,57 @@ function DateRangePicker({
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    editable ? (
+      // #105: typed entry — a text input accepting "start – end"; commits via `parse` on Enter/blur.
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drp__control twc-drp__control--editable", "data-open": open || void 0, "data-disabled": disabled || void 0, "data-invalid": invalid || void 0, "data-tone": tone, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: triggerRef,
+            className: "twc-drp__input",
+            type: "text",
+            autoComplete: "off",
+            disabled,
+            placeholder,
+            value: editText != null ? editText : text,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-labelledby": label ? labelId : void 0,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": error || hint ? descId : void 0,
+            onChange: (e) => setEditText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitText();
+              } else if (e.key === "ArrowDown" && (e.altKey || !open)) {
+                e.preventDefault();
+                setOpen(true);
+              } else if (e.key === "Escape" && open) setOpen(false);
+            },
+            onBlur: (e) => {
+              if (popRef.current && popRef.current.contains(e.relatedTarget)) return;
+              commitText();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "twc-drp__toggle",
+            "aria-label": "Open calendar",
+            tabIndex: -1,
+            disabled,
+            onClick: () => !disabled && setOpen((o) => !o),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+            ] })
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref: triggerRef,
@@ -11528,11 +12118,13 @@ var Box = React36__namespace.default.forwardRef(function Box2({
   border = false,
   radius,
   shadow,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const s = {
     paddingTop: sp(pt ?? py ?? p),
     paddingRight: sp(pr ?? px ?? p),
@@ -11546,10 +12138,14 @@ var Box = React36__namespace.default.forwardRef(function Box2({
     border: border ? "var(--border-thin, 1px) solid var(--color-border)" : void 0,
     borderRadius: radius ? `var(--radius-${radius})` : void 0,
     boxShadow: shadow ? `var(--shadow-${shadow})` : void 0,
-    ...style
+    ...style,
+    ...flatStyle
   };
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag2, { ref, className: `twc-box ${className}`.trim(), style: s, ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-box ${className}`.trim(), style: s, "data-twc-sx": sxAttr, ...rest, children: [
+    styleNode,
+    children
+  ] });
 });
 Box.displayName = "Box";
 var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
@@ -11562,27 +12158,34 @@ var Container = React36__namespace.default.forwardRef(function Container2({
   as: Tag2 = "div",
   size = "lg",
   padded = true,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const max = SIZES[size] ?? size;
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
       ref,
       className: `twc-container ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         width: "100%",
         maxWidth: typeof max === "number" ? `${max}px` : max,
         marginInline: "auto",
         paddingInline: padded ? "var(--space-5)" : void 0,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
 });
@@ -11612,11 +12215,13 @@ var Grid = React36__namespace.default.forwardRef(function Grid2({
   justify,
   alignContent,
   justifyContent,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const responsive = columns != null && typeof columns === "object";
   const uid = React36__namespace.default.useId();
   const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
@@ -11639,6 +12244,7 @@ var Grid = React36__namespace.default.forwardRef(function Grid2({
       ref,
       className: `twc-grid ${className}`.trim(),
       "data-twc-grid-id": gridId || void 0,
+      "data-twc-sx": sxAttr,
       style: {
         display: "grid",
         gridTemplateColumns: templateColumns,
@@ -11648,11 +12254,13 @@ var Grid = React36__namespace.default.forwardRef(function Grid2({
         justifyItems: justify,
         alignContent,
         justifyContent,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
       children: [
         responsive ? __twcStyles : null,
+        styleNode,
         children
       ]
     }
@@ -11685,18 +12293,21 @@ var Stack = React36__namespace.default.forwardRef(function Stack2({
   pb,
   pl,
   divider,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
   const kids = divider != null ? React36__namespace.default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsxRuntime.jsx(React36__namespace.default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
       ref,
       className: `twc-stack ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         display: inline ? "inline-flex" : "flex",
         flexDirection: direction,
@@ -11709,10 +12320,14 @@ var Stack = React36__namespace.default.forwardRef(function Stack2({
         paddingBottom: space2(pb ?? py ?? p),
         paddingLeft: space2(pl ?? px ?? p),
         minWidth: 0,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children: kids
+      children: [
+        styleNode,
+        kids
+      ]
     }
   );
 });
@@ -11795,19 +12410,22 @@ var Heading = React36__namespace.default.forwardRef(function Heading2({
   align,
   truncate,
   lineClamp,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const Tag2 = as || `h${level}`;
   const sz = size || (display ? "display" : LEVEL_SIZE[level]) || "2xl";
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
       ref,
       className: `twc-heading ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         margin: 0,
         fontFamily: "var(--font-sans)",
@@ -11818,10 +12436,14 @@ var Heading = React36__namespace.default.forwardRef(function Heading2({
         fontSize: `var(--text-${sz})`,
         textAlign: align,
         ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
 });
@@ -11854,18 +12476,21 @@ var Text = React36__namespace.default.forwardRef(function Text2({
   align,
   truncate,
   lineClamp,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
   const toneToken = TONE[tone] || TONE.default;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
       ref,
       className: `twc-text ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         margin: 0,
         fontFamily: "var(--font-sans)",
@@ -11875,10 +12500,14 @@ var Text = React36__namespace.default.forwardRef(function Text2({
         fontWeight: weight ? `var(--font-${weight})` : void 0,
         textAlign: align,
         ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
 });