@rufous/ui 0.3.60 → 0.3.62

package/dist/main.cjs

@@ -1533,19 +1533,235 @@ var React132 = __toESM(require("react"), 1);
 
 // lib/utils/sx.ts
 var import_react5 = require("react");
+
+// lib/utils/sxResolver.ts
+var DEFAULT_SPACING = 8;
+var DEFAULT_BORDER_RADIUS = 4;
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
-function sxToCss(sx, selector) {
+function warn(msg) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production") {
+    console.warn(`[rufous-ui sx] ${msg}`);
+  }
+}
+var SPACING_MAP = {
+  m: ["margin"],
+  margin: ["margin"],
+  mt: ["margin-top"],
+  marginTop: ["margin-top"],
+  mb: ["margin-bottom"],
+  marginBottom: ["margin-bottom"],
+  ml: ["margin-left"],
+  marginLeft: ["margin-left"],
+  mr: ["margin-right"],
+  marginRight: ["margin-right"],
+  mx: ["margin-left", "margin-right"],
+  marginX: ["margin-left", "margin-right"],
+  my: ["margin-top", "margin-bottom"],
+  marginY: ["margin-top", "margin-bottom"],
+  marginInline: ["margin-inline"],
+  marginInlineStart: ["margin-inline-start"],
+  marginInlineEnd: ["margin-inline-end"],
+  marginBlock: ["margin-block"],
+  marginBlockStart: ["margin-block-start"],
+  marginBlockEnd: ["margin-block-end"],
+  p: ["padding"],
+  padding: ["padding"],
+  pt: ["padding-top"],
+  paddingTop: ["padding-top"],
+  pb: ["padding-bottom"],
+  paddingBottom: ["padding-bottom"],
+  pl: ["padding-left"],
+  paddingLeft: ["padding-left"],
+  pr: ["padding-right"],
+  paddingRight: ["padding-right"],
+  px: ["padding-left", "padding-right"],
+  paddingX: ["padding-left", "padding-right"],
+  py: ["padding-top", "padding-bottom"],
+  paddingY: ["padding-top", "padding-bottom"],
+  paddingInline: ["padding-inline"],
+  paddingInlineStart: ["padding-inline-start"],
+  paddingInlineEnd: ["padding-inline-end"],
+  paddingBlock: ["padding-block"],
+  paddingBlockStart: ["padding-block-start"],
+  paddingBlockEnd: ["padding-block-end"],
+  gap: ["gap"],
+  rowGap: ["row-gap"],
+  columnGap: ["column-gap"]
+};
+var BORDER_WIDTH_MAP = {
+  border: "border",
+  borderTop: "border-top",
+  borderRight: "border-right",
+  borderBottom: "border-bottom",
+  borderLeft: "border-left"
+};
+var SIZING_MAP = {
+  width: "width",
+  height: "height",
+  minWidth: "min-width",
+  maxWidth: "max-width",
+  minHeight: "min-height",
+  maxHeight: "max-height"
+};
+var PALETTE_MAP = {
+  bgcolor: "background-color",
+  color: "color",
+  borderColor: "border-color"
+};
+var POSITION_LENGTH_MAP = {
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left"
+};
+var PASS_THROUGH_KEYS = [
+  "boxSizing",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  // Flexbox (Group H)
+  "display",
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "flex",
+  "flexDirection",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "flexBasis",
+  "justifyContent",
+  "justifyItems",
+  "justifySelf",
+  "order",
+  // Grid (Group I)
+  "gridColumn",
+  "gridRow",
+  "gridAutoFlow",
+  "gridAutoColumns",
+  "gridAutoRows",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas",
+  "gridArea",
+  // Positioning (Group J)
+  "position",
+  // Typography (Group G)
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textTransform"
+];
+var SYSTEM_PROP_NAMES = /* @__PURE__ */ new Set([
+  ...Object.keys(SPACING_MAP),
+  ...Object.keys(BORDER_WIDTH_MAP),
+  "borderRadius",
+  ...Object.keys(SIZING_MAP),
+  ...Object.keys(PALETTE_MAP),
+  ...Object.keys(POSITION_LENGTH_MAP),
+  "boxShadow",
+  "zIndex",
+  "typography",
+  ...PASS_THROUGH_KEYS
+]);
+function resolvePaletteValue(value, theme) {
+  if (typeof value === "string" && value.includes(".")) {
+    if (theme?.palette) {
+      const [group, token] = value.split(".");
+      const resolved = theme.palette?.[group]?.[token];
+      if (typeof resolved === "string") return resolved;
+      warn(`palette token "${value}" not found in theme \u2014 passing through verbatim`);
+    }
+  }
+  return String(value);
+}
+function resolveSxProp(key, value, theme) {
+  if (value === void 0 || value === null) return [];
+  if (key in SPACING_MAP) {
+    const spacing = theme?.spacing ?? DEFAULT_SPACING;
+    const out = typeof value === "number" ? `${value * spacing}px` : String(value);
+    return SPACING_MAP[key].map((property) => ({ property, value: out }));
+  }
+  if (key in BORDER_WIDTH_MAP) {
+    const out = typeof value === "number" ? `${value}px solid` : String(value);
+    return [{ property: BORDER_WIDTH_MAP[key], value: out }];
+  }
+  if (key === "borderRadius") {
+    const radius = theme?.shape?.borderRadius ?? DEFAULT_BORDER_RADIUS;
+    const out = typeof value === "number" ? `${value * radius}px` : String(value);
+    return [{ property: "border-radius", value: out }];
+  }
+  if (key in PALETTE_MAP) {
+    return [{ property: PALETTE_MAP[key], value: resolvePaletteValue(value, theme) }];
+  }
+  if (key in SIZING_MAP) {
+    const out = typeof value === "number" ? `${value}px` : String(value);
+    return [{ property: SIZING_MAP[key], value: out }];
+  }
+  if (key in POSITION_LENGTH_MAP) {
+    const out = typeof value === "number" ? `${value}px` : String(value);
+    return [{ property: POSITION_LENGTH_MAP[key], value: out }];
+  }
+  if (key === "boxShadow") {
+    if (typeof value === "number") {
+      const shadow = theme?.shadows?.[value];
+      if (shadow === void 0) {
+        warn(`theme.shadows[${value}] not found \u2014 passing through verbatim`);
+        return [{ property: "box-shadow", value: String(value) }];
+      }
+      return [{ property: "box-shadow", value: shadow }];
+    }
+    return [{ property: "box-shadow", value: String(value) }];
+  }
+  if (key === "zIndex") {
+    if (typeof value === "string") {
+      const z = theme?.zIndex?.[value];
+      if (z === void 0) {
+        warn(`theme.zIndex["${value}"] not found \u2014 passing through verbatim`);
+        return [{ property: "z-index", value }];
+      }
+      return [{ property: "z-index", value: String(z) }];
+    }
+    return [{ property: "z-index", value: String(value) }];
+  }
+  if (key === "typography") {
+    const variant = theme?.typography?.[String(value)];
+    if (!variant) {
+      warn(`theme.typography["${String(value)}"] not found \u2014 skipping`);
+      return [];
+    }
+    const pairs = [
+      ["font-family", variant.fontFamily],
+      ["font-weight", variant.fontWeight],
+      ["font-size", variant.fontSize],
+      ["line-height", variant.lineHeight],
+      ["letter-spacing", variant.letterSpacing],
+      ["text-transform", variant.textTransform]
+    ];
+    return pairs.filter(([, v]) => v !== void 0).map(([property, v]) => ({ property, value: String(v) }));
+  }
+  return [{ property: camelToKebab(key), value: String(value) }];
+}
+
+// lib/utils/sx.ts
+function sxToCss(sx, selector, theme) {
   const props = [];
   const nested = [];
   for (const [key, value] of Object.entries(sx)) {
     if (value === void 0 || value === null) continue;
     if (typeof value === "object") {
       const nestedSel = key.includes("&") ? key.replace(/&/g, selector) : `${selector} ${key}`;
-      nested.push(sxToCss(value, nestedSel));
+      nested.push(sxToCss(value, nestedSel, theme));
     } else {
-      props.push(`  ${camelToKebab(key)}: ${value};`);
+      for (const { property, value: resolved } of resolveSxProp(key, value, theme)) {
+        props.push(`  ${property}: ${resolved};`);
+      }
     }
   }
   const blocks = [];
@@ -1556,10 +1772,11 @@ ${props.join("\n")}
   return blocks.join("\n");
 }
 var _sxUid = 0;
-function useSx(sx) {
+function useSx(sx, theme) {
   const cls = (0, import_react5.useRef)(`rf-sx-${++_sxUid}`).current;
+  const hasStyles = !!sx && Object.keys(sx).length > 0;
   (0, import_react5.useEffect)(() => {
-    if (!sx) return;
+    if (!hasStyles) return;
     const id = `style-${cls}`;
     let el = document.getElementById(id);
     if (!el) {
@@ -1567,12 +1784,12 @@ function useSx(sx) {
       el.id = id;
       document.head.appendChild(el);
     }
-    el.textContent = sxToCss(sx, `.${cls}`);
+    el.textContent = sxToCss(sx, `.${cls}`, theme);
     return () => {
       document.getElementById(id)?.remove();
     };
-  }, [sx, cls]);
-  return sx ? cls : "";
+  }, [sx, cls, theme, hasStyles]);
+  return hasStyles ? cls : "";
 }
 
 // lib/Buttons/addButton.tsx
@@ -2207,6 +2424,7 @@ var BaseDialog = ({
   showCloseButton = true,
   buttonAlign = "flex-end",
   showCancelButton = true,
+  showConfirmButton = true,
   formatTitle = true,
   fullWidth = false,
   className,
@@ -2283,7 +2501,7 @@ var BaseDialog = ({
       type: "button"
     },
     cancelText
-  ), form ? /* @__PURE__ */ React140.createElement(
+  ), showConfirmButton && (form ? /* @__PURE__ */ React140.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -2315,7 +2533,7 @@ var BaseDialog = ({
     },
     /* @__PURE__ */ React140.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
     isButtonLoading && /* @__PURE__ */ React140.createElement("span", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React140.createElement(circularProgress_default, { size: 18, color: "#ffffff80" }))
-  ));
+  )));
   const containerClass = ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" ");
   const containerStyle = { minWidth, minHeight };
   const dialogInner = /* @__PURE__ */ React140.createElement(React140.Fragment, null, !hideHeader && /* @__PURE__ */ React140.createElement(React140.Fragment, null, customHeader ?? /* @__PURE__ */ React140.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React140.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React140.createElement("button", { className: "btn-close", type: "button", onClick: onClose }, /* @__PURE__ */ React140.createElement(
@@ -4496,29 +4714,46 @@ var DateField = ({
           if (!rect) return {};
           const PICKER_H = 420;
           const GAP2 = 6;
-          const spaceBelow = window.innerHeight - rect.bottom - GAP2;
+          const MARGIN = 8;
+          const vw = window.innerWidth;
+          const vh = window.innerHeight;
+          const naturalW = isSideVariant ? 470 : 320;
+          const avail = vw - MARGIN * 2;
+          const scale = naturalW > avail ? avail / naturalW : 1;
+          const scaledW = naturalW * scale;
+          let left = rect.left;
+          const maxLeft = vw - scaledW - MARGIN;
+          if (left > maxLeft) left = maxLeft;
+          if (left < MARGIN) left = MARGIN;
+          const spaceBelow = vh - rect.bottom - GAP2;
           const spaceAbove = rect.top - GAP2;
-          const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
+          const useDropUp = spaceBelow < PICKER_H * scale && spaceAbove > spaceBelow;
+          const common = {
+            position: "fixed",
+            left,
+            width: naturalW,
+            transform: scale === 1 ? void 0 : `scale(${scale})`,
+            overflowY: "auto",
+            zIndex: 99999
+          };
           if (useDropUp) {
             return {
-              position: "fixed",
-              left: rect.left,
+              ...common,
               // bottom anchors picker's bottom edge exactly to field top — no gap regardless of actual height
-              bottom: window.innerHeight - rect.top + GAP2,
-              // prevent going above viewport
-              maxHeight: rect.top - GAP2 - 4,
-              overflowY: "auto",
-              zIndex: 99999,
-              animationName: "rf-date-picker-appear-up",
+              bottom: vh - rect.top + GAP2,
+              // unscaled max-height — visual height after scaling fits the gap above
+              maxHeight: (rect.top - GAP2 - MARGIN) / scale,
+              // skip the scale-animating keyframes when we apply a static scale (they'd flash full-size)
+              animationName: scale === 1 ? "rf-date-picker-appear-up" : "none",
               transformOrigin: "bottom left"
             };
           }
           return {
-            position: "fixed",
-            left: rect.left,
+            ...common,
             top: rect.bottom + GAP2,
-            zIndex: 99999,
-            animationName: "rf-date-picker-appear",
+            // unscaled max-height — visual height after scaling fits below the field
+            maxHeight: (vh - rect.bottom - GAP2 - MARGIN) / scale,
+            animationName: scale === 1 ? "rf-date-picker-appear" : "none",
             transformOrigin: "top left"
           };
         })(),
@@ -4894,6 +5129,43 @@ var DateRangeField = ({
   const [leftViewMonth, setLeftViewMonth] = (0, import_react16.useState)(() => today2.getMonth());
   const containerRef = (0, import_react16.useRef)(null);
   const inputId = (0, import_react16.useRef)(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
+  const [mobileStyle, setMobileStyle] = (0, import_react16.useState)({});
+  (0, import_react16.useEffect)(() => {
+    if (!open) {
+      setMobileStyle({});
+      return;
+    }
+    const compute = () => {
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const MARGIN = 8;
+      const GAP2 = 6;
+      const naturalW = pickerType === "panel" ? 520 : 640;
+      const avail = vw - MARGIN * 2;
+      if (naturalW <= avail) {
+        setMobileStyle({});
+        return;
+      }
+      const scale = avail / naturalW;
+      const rect = containerRef.current?.getBoundingClientRect();
+      const top = rect ? rect.bottom + GAP2 : 60;
+      setMobileStyle({
+        position: "fixed",
+        top,
+        left: "50%",
+        transform: `translateX(-50%) scale(${scale})`,
+        transformOrigin: "top center",
+        width: naturalW,
+        maxHeight: (vh - top - MARGIN) / scale,
+        overflowY: "auto",
+        animation: "none",
+        zIndex: 99999
+      });
+    };
+    compute();
+    window.addEventListener("resize", compute);
+    return () => window.removeEventListener("resize", compute);
+  }, [open, pickerType]);
   (0, import_react16.useEffect)(() => {
     const s2 = value?.start ? isoToDate2(value.start) : null;
     const e = value?.end ? isoToDate2(value.end) : null;
@@ -5091,7 +5363,7 @@ var DateRangeField = ({
     variant === "outlined" && /* @__PURE__ */ import_react16.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react16.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react16.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react16.default.createElement("legend", { className: "rf-text-field__legend--empty" }))
   ), open && !disabled && (pickerType === "panel" ? (
     /* ── Panel Mode ── */
-    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", style: mobileStyle, onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react16.default.createElement(
       "button",
       {
         type: "button",
@@ -5211,7 +5483,7 @@ var DateRangeField = ({
     ))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ import_react16.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react16.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
   ) : (
     /* ── Calendar Mode ── */
-    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", style: mobileStyle, onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react16.default.createElement(
       RangeCalendarBody,
       {
         viewYear: leftViewYear,
@@ -5614,6 +5886,7 @@ function DataGrid({
   const menuRef = (0, import_react17.useRef)(null);
   const [showManageColumns, setShowManageColumns] = (0, import_react17.useState)(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react17.useState)(false);
+  const [mobileToolbarExpanded, setMobileToolbarExpanded] = (0, import_react17.useState)(false);
   const [focusFilterIdx, setFocusFilterIdx] = (0, import_react17.useState)(-1);
   const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
   const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
@@ -6103,14 +6376,24 @@ function DataGrid({
         onClick: () => setShowAdvancedFilter(true)
       },
       /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
-    )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
+    )), /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-actions-overflow${mobileToolbarExpanded ? " dg-actions-overflow--expanded" : ""}` }, showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
       "button",
       {
         className: "dg-icon-btn",
         onClick: () => setShowManageColumns(true)
       },
       /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
-    )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
+    )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions")), (showColumnsBtn || showExportBtn || slots.some((s2) => s2.position === "after-actions" || !s2.position)) && /* @__PURE__ */ import_react17.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `dg-toolbar-toggle${mobileToolbarExpanded ? " dg-toolbar-toggle--expanded" : ""}`,
+        onClick: () => setMobileToolbarExpanded((v) => !v),
+        "aria-label": mobileToolbarExpanded ? "Hide toolbar options" : "Show all toolbar options",
+        "aria-expanded": mobileToolbarExpanded
+      },
+      /* @__PURE__ */ import_react17.default.createElement(ChevronDown, { size: 18 })
+    ));
   })())), !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
     const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
     return /* @__PURE__ */ import_react17.default.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ import_react17.default.createElement(Layers, { size: 11 }), /* @__PURE__ */ import_react17.default.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ import_react17.default.createElement(
@@ -7813,6 +8096,44 @@ ListSubheader.displayName = "ListSubheader";
 
 // lib/Typography/Typography.tsx
 var import_react28 = __toESM(require("react"), 1);
+
+// lib/utils/filterSystemProps.ts
+var NEVER_SYSTEM = /* @__PURE__ */ new Set([
+  "size",
+  "variant",
+  "disabled",
+  "open",
+  "value",
+  "checked",
+  "label",
+  "placeholder",
+  "rows",
+  "error",
+  "required",
+  "fullWidth",
+  "component",
+  "children",
+  "ref",
+  "key",
+  "sx",
+  "className",
+  "style"
+]);
+function filterSystemProps(props) {
+  const system = {};
+  const rest = {};
+  for (const key of Object.keys(props)) {
+    const value = props[key];
+    if (!NEVER_SYSTEM.has(key) && SYSTEM_PROP_NAMES.has(key)) {
+      system[key] = value;
+    } else {
+      rest[key] = value;
+    }
+  }
+  return { system, rest };
+}
+
+// lib/Typography/Typography.tsx
 var VARIANT_ELEMENT_MAP = {
   h1: "h1",
   h2: "h2",
@@ -7853,9 +8174,11 @@ var Typography = ({
   children,
   className = "",
   style,
-  sx
+  sx,
+  ...rest
 }) => {
-  const sxClass = useSx(sx);
+  const { system, rest: domRest } = filterSystemProps(rest);
+  const sxClass = useSx({ ...system, ...sx });
   const Tag = component || (paragraph ? "p" : VARIANT_ELEMENT_MAP[variant] || "span");
   const colorClass = color ? COLOR_CLASSES[color] : "";
   const colorStyle = color && !COLOR_CLASSES[color] ? { color } : {};
@@ -7886,7 +8209,15 @@ var Typography = ({
     ...weightStyle,
     ...style
   };
-  return /* @__PURE__ */ import_react28.default.createElement(Tag, { className: classes, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0 }, children);
+  return /* @__PURE__ */ import_react28.default.createElement(
+    Tag,
+    {
+      className: classes,
+      style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0,
+      ...domRest
+    },
+    children
+  );
 };
 Typography.displayName = "Typography";
 
@@ -7941,195 +8272,37 @@ Skeleton.displayName = "Skeleton";
 
 // lib/Box/Box.tsx
 var React165 = __toESM(require("react"), 1);
-function sp(val) {
-  if (val === void 0) return void 0;
-  return typeof val === "number" ? `${val * 8}px` : val;
-}
 var Box = React165.forwardRef(
-  ({
-    component = "div",
-    children,
-    display,
-    flexDirection,
-    alignItems,
-    justifyContent,
-    gap,
-    flex,
-    flexWrap,
-    flexGrow,
-    flexShrink,
-    overflow,
-    position,
-    top,
-    right,
-    bottom,
-    left,
-    borderRadius,
-    bgcolor,
-    color,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    margin,
-    padding,
-    m,
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    p,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
-    className,
-    style,
-    sx,
-    ...rest
-  }, ref) => {
-    const sxClass = useSx(sx);
-    const toSize = (val) => val === void 0 ? void 0 : typeof val === "number" ? `${val}px` : val;
-    const inlineStyle = {
-      ...display !== void 0 ? { display } : {},
-      ...flexDirection !== void 0 ? { flexDirection } : {},
-      ...alignItems !== void 0 ? { alignItems } : {},
-      ...justifyContent !== void 0 ? { justifyContent } : {},
-      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap}px` : gap } : {},
-      ...flex !== void 0 ? { flex } : {},
-      ...flexWrap !== void 0 ? { flexWrap } : {},
-      ...flexGrow !== void 0 ? { flexGrow } : {},
-      ...flexShrink !== void 0 ? { flexShrink } : {},
-      ...overflow !== void 0 ? { overflow } : {},
-      ...position !== void 0 ? { position } : {},
-      ...top !== void 0 ? { top: toSize(top) } : {},
-      ...right !== void 0 ? { right: toSize(right) } : {},
-      ...bottom !== void 0 ? { bottom: toSize(bottom) } : {},
-      ...left !== void 0 ? { left: toSize(left) } : {},
-      ...borderRadius !== void 0 ? { borderRadius: toSize(borderRadius) } : {},
-      ...bgcolor !== void 0 ? { backgroundColor: bgcolor } : {},
-      ...color !== void 0 ? { color } : {},
-      // Size
-      ...width !== void 0 ? { width: toSize(width) } : {},
-      ...height !== void 0 ? { height: toSize(height) } : {},
-      ...minWidth !== void 0 ? { minWidth: toSize(minWidth) } : {},
-      ...maxWidth !== void 0 ? { maxWidth: toSize(maxWidth) } : {},
-      ...minHeight !== void 0 ? { minHeight: toSize(minHeight) } : {},
-      ...maxHeight !== void 0 ? { maxHeight: toSize(maxHeight) } : {},
-      // Full margin/padding
-      ...margin !== void 0 ? { margin: toSize(margin) } : {},
-      ...padding !== void 0 ? { padding: toSize(padding) } : {},
-      // Margin shorthands (8px scale)
-      ...m !== void 0 ? { margin: sp(m) } : {},
-      ...my !== void 0 ? { marginTop: sp(my), marginBottom: sp(my) } : {},
-      ...mx !== void 0 ? { marginLeft: sp(mx), marginRight: sp(mx) } : {},
-      ...mt !== void 0 ? { marginTop: sp(mt) } : {},
-      ...mr !== void 0 ? { marginRight: sp(mr) } : {},
-      ...mb !== void 0 ? { marginBottom: sp(mb) } : {},
-      ...ml !== void 0 ? { marginLeft: sp(ml) } : {},
-      // Padding shorthands (8px scale)
-      ...p !== void 0 ? { padding: sp(p) } : {},
-      ...py !== void 0 ? { paddingTop: sp(py), paddingBottom: sp(py) } : {},
-      ...px !== void 0 ? { paddingLeft: sp(px), paddingRight: sp(px) } : {},
-      ...pt !== void 0 ? { paddingTop: sp(pt) } : {},
-      ...pr !== void 0 ? { paddingRight: sp(pr) } : {},
-      ...pb !== void 0 ? { paddingBottom: sp(pb) } : {},
-      ...pl !== void 0 ? { paddingLeft: sp(pl) } : {},
-      ...style
-    };
+  ({ component = "div", children, className, style, sx, ...rest }, ref) => {
+    const { system, rest: domRest } = filterSystemProps(rest);
+    const sxClass = useSx({ ...system, ...sx });
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
     const Tag = component;
-    return /* @__PURE__ */ React165.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React165.createElement(Tag, { ref, className: classes, style, ...domRest }, children);
   }
 );
 Box.displayName = "Box";
 
 // lib/Stack/Stack.tsx
 var React166 = __toESM(require("react"), 1);
-function sp2(val) {
-  if (val === void 0) return void 0;
-  return typeof val === "number" ? `${val * 8}px` : val;
-}
 var Stack = React166.forwardRef(
   ({
     direction = "column",
     spacing,
-    alignItems,
-    justifyContent,
     divider,
-    flexWrap,
     useFlexGap = true,
-    flex,
-    overflow,
     component = "div",
     children,
     className,
     style,
     sx,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    m,
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    p,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
     ...rest
   }, ref) => {
-    const sxClass = useSx(sx);
+    const { system, rest: domRest } = filterSystemProps(rest);
     const gapValue = spacing !== void 0 ? typeof spacing === "number" ? `${spacing * 8}px` : spacing : void 0;
-    const toSize = (val) => val === void 0 ? void 0 : typeof val === "number" ? `${val}px` : val;
-    const inlineStyle = {
-      flexDirection: direction,
-      ...alignItems !== void 0 ? { alignItems } : {},
-      ...justifyContent !== void 0 ? { justifyContent } : {},
-      ...flexWrap !== void 0 ? { flexWrap } : {},
-      ...gapValue !== void 0 && useFlexGap ? { gap: gapValue } : {},
-      ...flex !== void 0 ? { flex } : {},
-      ...overflow !== void 0 ? { overflow } : {},
-      // Layout
-      ...width !== void 0 ? { width: toSize(width) } : {},
-      ...height !== void 0 ? { height: toSize(height) } : {},
-      ...minWidth !== void 0 ? { minWidth: toSize(minWidth) } : {},
-      ...maxWidth !== void 0 ? { maxWidth: toSize(maxWidth) } : {},
-      ...minHeight !== void 0 ? { minHeight: toSize(minHeight) } : {},
-      ...maxHeight !== void 0 ? { maxHeight: toSize(maxHeight) } : {},
-      // Margin shorthands
-      ...m !== void 0 ? { margin: sp2(m) } : {},
-      ...my !== void 0 ? { marginTop: sp2(my), marginBottom: sp2(my) } : {},
-      ...mx !== void 0 ? { marginLeft: sp2(mx), marginRight: sp2(mx) } : {},
-      ...mt !== void 0 ? { marginTop: sp2(mt) } : {},
-      ...mr !== void 0 ? { marginRight: sp2(mr) } : {},
-      ...mb !== void 0 ? { marginBottom: sp2(mb) } : {},
-      ...ml !== void 0 ? { marginLeft: sp2(ml) } : {},
-      // Padding shorthands
-      ...p !== void 0 ? { padding: sp2(p) } : {},
-      ...py !== void 0 ? { paddingTop: sp2(py), paddingBottom: sp2(py) } : {},
-      ...px !== void 0 ? { paddingLeft: sp2(px), paddingRight: sp2(px) } : {},
-      ...pt !== void 0 ? { paddingTop: sp2(pt) } : {},
-      ...pr !== void 0 ? { paddingRight: sp2(pr) } : {},
-      ...pb !== void 0 ? { paddingBottom: sp2(pb) } : {},
-      ...pl !== void 0 ? { paddingLeft: sp2(pl) } : {},
-      ...style
-    };
+    const baseSx = { flexDirection: direction };
+    if (gapValue !== void 0 && useFlexGap) baseSx.gap = gapValue;
+    const sxClass = useSx({ ...baseSx, ...system, ...sx });
     const classes = ["rf-stack", sxClass, className].filter(Boolean).join(" ");
     let content;
     if (divider) {
@@ -8149,17 +8322,13 @@ var Stack = React166.forwardRef(
       content = children;
     }
     const Tag = component;
-    return /* @__PURE__ */ React166.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
+    return /* @__PURE__ */ React166.createElement(Tag, { ref, className: classes, style, ...domRest }, content);
   }
 );
 Stack.displayName = "Stack";
 
 // lib/Grid/Grid.tsx
 var React167 = __toESM(require("react"), 1);
-function sp3(val) {
-  if (val === void 0) return void 0;
-  return typeof val === "number" ? `${val * 8}px` : val;
-}
 function getBreakpointClass(bp, val) {
   if (val === void 0) return "";
   if (val === true) return `rf-grid-${bp}-12`;
@@ -8192,29 +8361,9 @@ var Grid = React167.forwardRef(
     className,
     style,
     sx,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    m,
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    p,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
     ...rest
   }, ref) => {
-    const sxClass = useSx(sx);
+    const { system, rest: domRest } = filterSystemProps(rest);
     const containerClasses = container ? ["rf-grid-container"] : [];
     const itemClasses = item || !container ? ["rf-grid-item"] : [];
     const bpClasses = [
@@ -8225,39 +8374,14 @@ var Grid = React167.forwardRef(
       getBreakpointClass("xl", xl)
     ].filter(Boolean);
     const gap = getSpacingGap(spacing);
-    const toSize = (val) => val === void 0 ? void 0 : typeof val === "number" ? `${val}px` : val;
-    const inlineStyle = {
-      ...container && gap ? { gap } : {},
-      ...container && direction ? { gridAutoFlow: direction.startsWith("column") ? "column" : "row" } : {},
-      ...container && alignItems ? { alignItems } : {},
-      ...container && justifyContent ? { justifyContent } : {},
-      ...container && wrap ? { flexWrap: wrap } : {},
-      ...zeroMinWidth ? { minWidth: 0 } : {},
-      // Layout
-      ...width !== void 0 ? { width: toSize(width) } : {},
-      ...height !== void 0 ? { height: toSize(height) } : {},
-      ...minWidth !== void 0 ? { minWidth: toSize(minWidth) } : {},
-      ...maxWidth !== void 0 ? { maxWidth: toSize(maxWidth) } : {},
-      ...minHeight !== void 0 ? { minHeight: toSize(minHeight) } : {},
-      ...maxHeight !== void 0 ? { maxHeight: toSize(maxHeight) } : {},
-      // Margin shorthands
-      ...m !== void 0 ? { margin: sp3(m) } : {},
-      ...my !== void 0 ? { marginTop: sp3(my), marginBottom: sp3(my) } : {},
-      ...mx !== void 0 ? { marginLeft: sp3(mx), marginRight: sp3(mx) } : {},
-      ...mt !== void 0 ? { marginTop: sp3(mt) } : {},
-      ...mr !== void 0 ? { marginRight: sp3(mr) } : {},
-      ...mb !== void 0 ? { marginBottom: sp3(mb) } : {},
-      ...ml !== void 0 ? { marginLeft: sp3(ml) } : {},
-      // Padding shorthands
-      ...p !== void 0 ? { padding: sp3(p) } : {},
-      ...py !== void 0 ? { paddingTop: sp3(py), paddingBottom: sp3(py) } : {},
-      ...px !== void 0 ? { paddingLeft: sp3(px), paddingRight: sp3(px) } : {},
-      ...pt !== void 0 ? { paddingTop: sp3(pt) } : {},
-      ...pr !== void 0 ? { paddingRight: sp3(pr) } : {},
-      ...pb !== void 0 ? { paddingBottom: sp3(pb) } : {},
-      ...pl !== void 0 ? { paddingLeft: sp3(pl) } : {},
-      ...style
-    };
+    const baseSx = {};
+    if (container && gap) baseSx.gap = gap;
+    if (container && direction) baseSx.gridAutoFlow = direction.startsWith("column") ? "column" : "row";
+    if (container && alignItems) baseSx.alignItems = alignItems;
+    if (container && justifyContent) baseSx.justifyContent = justifyContent;
+    if (container && wrap) baseSx.flexWrap = wrap;
+    if (zeroMinWidth) baseSx.minWidth = 0;
+    const sxClass = useSx({ ...baseSx, ...system, ...sx });
     const classes = [
       ...containerClasses,
       ...itemClasses,
@@ -8266,7 +8390,7 @@ var Grid = React167.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component;
-    return /* @__PURE__ */ React167.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React167.createElement(Tag, { ref, className: classes, style, ...domRest }, children);
   }
 );
 Grid.displayName = "Grid";