@recursica/adapter-mui-v7 1.0.0

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,231 @@
+import React, { forwardRef } from "react";
+import {
+  Dialog as MuiDialog,
+  type DialogProps as MuiDialogProps,
+  DialogTitle as MuiDialogTitle,
+  type DialogTitleProps as MuiDialogTitleProps,
+  DialogContent as MuiDialogContent,
+  type DialogContentProps as MuiDialogContentProps,
+  DialogActions as MuiDialogActions,
+  type DialogActionsProps as MuiDialogActionsProps,
+  IconButton as MuiIconButton,
+} from "@mui/material";
+import {
+  filterStylingProps,
+  mergeClassNames,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Modal.module.css";
+
+// ============================================================
+// MODAL ROOT (Dialog)
+// ============================================================
+
+import { type RecursicaModalProps } from "@recursica/adapter-common";
+
+export type ModalProps = RecursicaOverStyled<
+  Omit<MuiDialogProps, "size" | "radius" | "shadow" | "open"> &
+    RecursicaModalProps
+>;
+
+const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+
+const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
+  {
+    overStyled = false,
+    opened = false,
+    withCloseButton = true,
+    title,
+    children,
+    onClose,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+
+  const mergedClassNames = mergeClassNames(
+    { paper: styles.inner },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
+
+  let footer: React.ReactNode = null;
+  const bodyChildren: React.ReactNode[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (
+      React.isValidElement(child) &&
+      (child.type === ModalFooter ||
+        (child.type as unknown as { displayName?: string })?.displayName ===
+          "Modal.Footer")
+    ) {
+      footer = child;
+    } else {
+      bodyChildren.push(child);
+    }
+  });
+
+  return (
+    <MuiDialog
+      ref={ref}
+      {...(sanitizedProps as MuiDialogProps)}
+      className={`${styles.root} ${className || ""}`}
+      classes={mergedClassNames}
+      open={
+        opened ||
+        ((sanitizedProps as Record<string, unknown>).open as boolean) ||
+        false
+      }
+      onClose={onClose}
+    >
+      {(title || withCloseButton) && (
+        <div className={styles.header}>
+          {title && <div className={styles.title}>{title}</div>}
+          {withCloseButton && (
+            <MuiIconButton
+              onClick={(e) => onClose?.(e, "backdropClick")}
+              className={styles.close}
+            >
+              <CloseIcon />
+            </MuiIconButton>
+          )}
+        </div>
+      )}
+      <ModalBody>{bodyChildren}</ModalBody>
+      {footer}
+    </MuiDialog>
+  );
+});
+
+ModalRoot.displayName = "Modal";
+
+// ============================================================
+// MODAL TITLE (DialogTitle)
+// ============================================================
+
+export type ModalTitleProps = RecursicaOverStyled<MuiDialogTitleProps>;
+
+const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(
+  function ModalTitle({ overStyled = false, className, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+
+    return (
+      <MuiDialogTitle
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        {...(sanitizedProps as MuiDialogTitleProps)}
+        className={`${styles.title} ${className || ""}`}
+      />
+    );
+  },
+);
+
+ModalTitle.displayName = "Modal.Title";
+
+// ============================================================
+// MODAL BODY (DialogContent)
+// ============================================================
+
+export type ModalBodyProps = RecursicaOverStyled<MuiDialogContentProps>;
+
+const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(
+  { overStyled = false, className, children, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const internalRef = React.useRef<HTMLDivElement>(null);
+  const [scrolledTop, setScrolledTop] = React.useState(false);
+  const [scrolledBottom, setScrolledBottom] = React.useState(false);
+
+  const checkScroll = React.useCallback(() => {
+    if (internalRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = internalRef.current;
+      setScrolledTop(scrollTop > 0);
+      setScrolledBottom(Math.ceil(scrollTop + clientHeight) < scrollHeight);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    checkScroll();
+    window.addEventListener("resize", checkScroll);
+    return () => window.removeEventListener("resize", checkScroll);
+  }, [checkScroll, children]);
+
+  return (
+    <MuiDialogContent
+      ref={(node) => {
+        if (typeof ref === "function") ref(node as HTMLDivElement);
+        else if (ref)
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+            node as HTMLDivElement;
+        if (internalRef)
+          (
+            internalRef as React.MutableRefObject<HTMLDivElement | null>
+          ).current = node as HTMLDivElement;
+      }}
+      {...(sanitizedProps as MuiDialogContentProps)}
+      onScroll={() => checkScroll()}
+      data-scrolled-top={scrolledTop || undefined}
+      data-scrolled-bottom={scrolledBottom || undefined}
+      className={`${styles.content} ${styles.scrollArea} ${className || ""}`}
+    >
+      {children}
+    </MuiDialogContent>
+  );
+});
+
+ModalBody.displayName = "Modal.Body";
+
+// ============================================================
+// MODAL FOOTER (DialogActions)
+// ============================================================
+
+export type ModalFooterProps = RecursicaOverStyled<MuiDialogActionsProps>;
+
+const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
+  function ModalFooter({ overStyled = false, className, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+
+    return (
+      <MuiDialogActions
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        {...(sanitizedProps as MuiDialogActionsProps)}
+        className={`${styles.footer} ${className || ""}`}
+      />
+    );
+  },
+);
+
+ModalFooter.displayName = "Modal.Footer";
+
+// ============================================================
+// EXPORT COMPOSITION
+// ============================================================
+
+export const Modal = ModalRoot as typeof ModalRoot & {
+  Title: typeof ModalTitle;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+};
+
+Modal.Title = ModalTitle;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;

package/src/components/Modal/USAGE.md

@@ -0,0 +1,40 @@
+# Modal - Usage Guide
+
+This document describes how to integrate and use the `Modal` component in your projects using `@recursica/adapter-mui-v7`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Modal } from "@recursica/adapter-mui-v7";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Modal } from "@recursica/adapter-mui-v7";
+
+export default function Demo() {
+  return (
+    <Modal opened={isOpen} onClose={close} title="Modal Title">
+      <Text>This is a styled Modal wrapping the native primitive.</Text>
+    </Modal>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mui-v7` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export * from "./Modal";

package/src/components/NumberInput/NUMBER_INPUT_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,93 @@
+# NumberInput – implementation notes
+
+Decisions and design tweaks specific to the UI Kit's NumberInput wrapped against `@mui/material`.
+
+---
+
+## 1. `InputBase` instead of `TextField` (source-of-truth audit, 2026-08-30)
+
+**Decision:** Render the naked field with MUI's `InputBase`, not `TextField`.
+
+**Root cause:** The component previously rendered `<TextField>` and passed the CSS-module class
+map (`root`/`input`/`section`/`controls`/`control`) through TextField's own `classes` prop.
+`TextField`'s `classes` type only exposes a single `root` key
+(`@mui/material/TextField/textFieldClasses.d.ts`), and that `root` maps to the outer
+`FormControl` wrapper `TextField` renders around everything — not to the actual `<input>`
+element or its border/background. Every rule in `NumberInput.module.css` scoped to `.input`
+(padding, border-radius, colors, focus box-shadow) or to `.root` (min-height, border, background)
+was therefore never attached to any real DOM node. `TextField`'s default `variant="outlined"`
+also draws its own border via an internal `<fieldset>` (`notchedOutline`) with MUI's own
+default focus/hover treatment, independent of any of our CSS — which is why the focus ring came
+through as MUI's stock primary-color ring instead of the Recursica focus tokens, and why
+border-radius/height/icon-gutter tokens had no visible effect.
+
+**Implementation:** Switched to `InputBase`, which supports real `classes.root`/`classes.input`
+slots (`root` = the bordered/backgrounded box InputBase renders around the input + adornments;
+`input` = the actual `<input>` element) — the exact same fix already used by the sibling
+`TextField` (Recursica) component (`src/components/TextField/TextField.tsx`), which this
+implementation now mirrors structurally: border/background/color/font/border-radius moved onto
+`.root`, box geometry (padding) on `.input`, and `.section` (icon/adornment slots) made
+`position: absolute` inset to the root's edges instead of an inline flex sibling, matching how
+Mantine's own `Input.Wrapper` reserves icon-gutter space via `.input`'s dynamic
+`padding-left`/`padding-right` (`--input-left-section-size` / `--input-right-section-size`).
+`data-disabled`/`data-error`/`data-with-left-section`/`data-with-right-section` are now set
+explicitly on `<InputBase>` (previously never set at all, so the `[data-error]`/`[data-disabled]`
+state selectors in the CSS module were dead code too).
+
+This one root-cause fix resolves several source-of-truth-audit findings at once:
+
+- Focus ring now uses the Recursica focus tokens (was MUI's default blue).
+- `.root`'s border-radius token now actually renders (was invisible; `states` story).
+- `.root`'s min-height token now actually renders, matching Mantine's height exactly instead of
+  being taller (`hidden-controls` story) — MUI's own default `TextField` padding/line-height was
+  filling the gap our own (unattached) `min-height` was supposed to constrain.
+- Icon-gutter padding (`--input-left-section-size`/`--input-right-section-size`) now actually
+  reserves space on `.input`, fixing both the crowded left icon (`with-left-icon`) and the right
+  icon sitting further from the edge than Mantine's (`with-right-icon`).
+
+**Border-width also switched from a hardcoded `1px` to the existing
+`--recursica_ui-kit_components_number-input_properties_border-size` token** (previously unused
+by this component, in violation of the "no hardcoded sizing" rule — Mantine's own module already
+used it). The per-state `border-size` exemption comments were ported from `mantine-adapter`'s
+`NumberInput.module.css` since disabled/error only ever recolor the border, never resize it.
+
+## 2. Icon/adornment section color applies to the whole slot, not just `<svg>` (2026-08-30)
+
+**Decision:** `.section[data-position="left"|"right"]` now sets `color` directly, in addition to
+keeping the icon-sizing rule scoped to `:global(svg)`.
+
+**Context:** The `with-left-icon`/`with-right-icon` stories pass a plain `<span>$</span>` /
+`<span>%</span>` as the section content, not a real icon component. Mantine's own
+`mantine-Input-section` ships a library-default `color: var(--mantine-color-placeholder)` (a
+generic gray, independent of any Recursica token) that free-rides under any content dropped into
+that slot; our own CSS only ever recolored `:global(svg)` descendants, so plain text fell back to
+inheriting `.root`'s text-color token (near-black) instead. Applying the leading/trailing-icon
+token to the section itself (not just its `<svg>` children) makes any section content —
+icon or plain text — consistently use the Recursica icon-color token.
+
+**Caveat (documented, not a further attempt):** The Recursica
+`--recursica_ui-kit_components_number-input_properties_colors_trailing-icon` /
+`_leading-icon` tokens both resolve to `#131313` (near-black) in this token set. Mantine's demo
+stories render a lighter gray only because of the unrelated `--mantine-color-placeholder`
+library default described above — that gray is not backed by any Recursica variable. Since
+hardcoding a copy of Mantine's incidental placeholder-gray would violate the "no hardcoded
+colors" rule, this component now applies the actual token value everywhere a section renders,
+which is the token-correct behavior even though it no longer color-matches Mantine's demo-only
+`<span>` stand-in pixel-for-pixel. If the intent is for real icon color to look lighter than
+`#131313`, that's a token value question for the design system, not an adapter bug.
+
+## 3. Numeric-only keystroke filtering (source-of-truth audit, 2026-08-30)
+
+**Decision:** Restrict typed/pasted characters to digits, a single decimal point, and (only when
+negative values aren't excluded by `min`) a single leading minus sign.
+
+**Root cause:** MUI's `InputBase` has no numeric-parsing behavior built in — unlike Mantine's
+`NumberInput`, which validates/rejects non-numeric characters internally, this component
+previously behaved like a plain text field, silently accepting any input.
+
+**Implementation:** `onKeyDown` calls `isAllowedNumericKeystroke` (rejecting anything that isn't
+a digit, a first `-` when `min === undefined || min < 0`, a single `.`, a navigation/editing key,
+or a modifier-held shortcut) before forwarding the event to any caller-supplied `onKeyDown`.
+`onPaste` runs the same allowance against the full pasted string. This is deliberately a
+keystroke gate, not a value-transforming `onChange` wrapper — it never rewrites a caller's
+controlled `value`, only prevents the illegal keystroke from landing in the first place.

package/src/components/NumberInput/NumberInput.module.css

@@ -0,0 +1,303 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Global hover/focus/disabled state tokens (recursica_variables_scoped.css header, 'Hover & Focus states' / 'Disabled state' — implicit rule for every interactive element; components must not define their own per-component treatment).
+ *   recursica-allow-brand: --recursica_brand_states_focus_blur
+ *   recursica-allow-brand: --recursica_brand_states_focus_border-size
+ *   recursica-allow-brand: --recursica_brand_states_focus_color
+ *   recursica-allow-brand: --recursica_brand_states_focus_margin
+ */
+
+/* LAYOUT SPACING OVERRIDES:
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens.
+   - Also sets the --number-input-control-{max,min}-width hooks consumed inline in NumberInput.tsx,
+     since the token schema no longer provides a single layout-agnostic min/max width. */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_top-bottom-margin
+  );
+  --number-input-control-max-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_max-width
+  );
+  --number-input-control-min-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_min-width
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+  --number-input-control-max-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_max-width
+  );
+  --number-input-control-min-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_min-width
+  );
+}
+
+/* HARDCODED VALUES:
+   - border-style: solid. Native structural rendering rule.
+   - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
+   - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
+   - Controls: Hardcoded to bypass MUI's default borders and backgrounds on the increment/decrement arrows.
+*/
+
+/* EXEMPTIONS:
+   - border-size is constant across disabled/error states — only border-color changes; the
+     disabled/error border-size tokens are never applied by design. */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_border-size */
+
+.root {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: var(
+    --recursica_ui-kit_components_number-input_properties_min-height
+  );
+
+  /* Strict Typography Unification placed on root for MUI InputBase inheritance */
+  font-family: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_number-input_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_number-input_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_number-input_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_number-input_properties_text_text-transform
+  );
+
+  /* Box Geometry placed on root so MUI InputBase boundary executes */
+  border-radius: var(
+    --recursica_ui-kit_components_number-input_properties_border-radius
+  );
+  border-width: var(
+    --recursica_ui-kit_components_number-input_properties_border-size
+  );
+  border-style: solid;
+
+  /* Base State Default Execution */
+  background-color: var(
+    --recursica_ui-kit_components_number-input_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_number-input_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_number-input_properties_colors_text-color
+  );
+
+  /* Override native Input variables governing section spacing padding mathematics safely */
+  --input-left-section-size: calc(
+    var(
+        --recursica_ui-kit_components_number-input_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-size) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-text-gap)
+  );
+  --input-right-section-size: calc(
+    var(
+        --recursica_ui-kit_components_number-input_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-size) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-text-gap)
+  );
+}
+
+.input {
+  /* Structural Overrides */
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+
+  /* Box Geometry */
+  min-height: var(
+    --recursica_ui-kit_components_number-input_properties_min-height
+  );
+  padding-top: var(
+    --recursica_ui-kit_components_number-input_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_number-input_properties_vertical-padding
+  );
+  padding-left: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+  padding-right: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+
+  outline: none;
+  border: none; /* Because root handles border in MUI */
+  background: transparent;
+  color: inherit;
+  height: auto; /* overrides MUI's 1.1876em */
+}
+
+.input::placeholder {
+  opacity: var(
+    --recursica_ui-kit_components_number-input_properties_placeholder-opacity
+  );
+  color: inherit;
+}
+
+/* Dynamic Padding Overrides */
+.root[data-with-left-section="true"] .input {
+  padding-left: var(--input-left-section-size);
+}
+
+.root[data-with-right-section="true"] .input {
+  padding-right: var(--input-right-section-size);
+}
+
+/* Flexible End-Caps (Icons, actions) */
+.section {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  position: absolute;
+}
+
+.section[data-position="left"] {
+  justify-content: flex-start;
+  left: 0;
+  padding-left: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+  /* Mantine's native Input.Section slot defaults its own text color to the icon-muted gray
+     regardless of whether the slot holds an <svg> or plain text (e.g. a "$"/"%" span) — set it
+     here too, not just on :global(svg) below, so non-icon section content matches visually. */
+  color: var(
+    --recursica_ui-kit_components_number-input_properties_colors_leading-icon
+  );
+}
+
+.section[data-position="right"] {
+  justify-content: flex-end;
+  right: 0;
+  padding-right: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+  color: var(
+    --recursica_ui-kit_components_number-input_properties_colors_trailing-icon
+  );
+}
+
+.section :global(svg) {
+  width: var(--recursica_ui-kit_components_number-input_properties_icon-size);
+  height: var(--recursica_ui-kit_components_number-input_properties_icon-size);
+}
+
+/* -------------------------------------
+   CONTROLS (increment/decrement arrows — not currently rendered by this adapter; rules kept
+   for structural parity with Mantine's class map and to style them if/when implemented).
+-------------------------------------- */
+
+.controls {
+  padding-right: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+}
+
+.control {
+  border: none;
+  background: transparent;
+  color: var(
+    --recursica_ui-kit_components_number-input_properties_colors_trailing-icon
+  );
+}
+
+.control:hover {
+  background: transparent;
+}
+
+/* -------------------------------------
+   STATE CASCADE ARCHITECTURE
+-------------------------------------- */
+
+/* Focus State Mapping (Triggered internally via browser focus rules) */
+/* The token schema no longer provides per-component focus colors; apply the generic focus ring
+   tokens as a box-shadow ring instead of a color swap (matches mantine-adapter reference). */
+.root:focus-within,
+.root:focus {
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
+}
+
+/* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-error="true"] {
+  border-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_text-color
+  );
+}
+
+.root[data-error="true"] .section[data-position="left"] {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_leading-icon
+  );
+}
+
+.root[data-error="true"] .section[data-position="right"],
+.root[data-error="true"] .control {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_trailing-icon
+  );
+}
+
+/* Disabled State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-disabled="true"] {
+  border-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_text-color
+  );
+  opacity: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_opacity
+  );
+  cursor: not-allowed;
+}
+
+.root[data-disabled="true"] .input {
+  cursor: not-allowed;
+}
+
+.root[data-disabled="true"] .section[data-position="left"] {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_leading-icon
+  );
+}
+
+.root[data-disabled="true"] .section[data-position="right"],
+.root[data-disabled="true"] .control {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_trailing-icon
+  );
+}