Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx

@@ -17,8 +17,11 @@ const IncrementerBlockContainer = ({
   labelSize = "s",
   palette = "default",
   blockClassName = "",
+  state = "default",
+  disabled,
   ...incrementerProps
 }: IncrementerBlockProps) => {
+  const isDisabled = state === "disabled" || Boolean(disabled);
   return (
     <IncrementerBlockView
       label={label}
@@ -28,6 +31,8 @@ const IncrementerBlockContainer = ({
       labelSize={labelSize}
       palette={palette}
       blockClassName={blockClassName}
+      state={state}
+      disabled={isDisabled}
       {...incrementerProps}
     />
   );

app/components/controls/IncrementerBlock/IncrementerBlock.types.ts

@@ -1,3 +1,4 @@
+import type { IncrementerBlockStateValue } from "../../../../lib/propNormalization";
 import type { IncrementerProps } from "../Incrementer/Incrementer.types";
 import type {
   InputLabelPaletteValue,
@@ -5,6 +6,11 @@ import type {
 } from "../../type/InputLabel/InputLabel.types";
 
 export interface IncrementerBlockProps extends IncrementerProps {
+  /**
+   * One state axis. Disabled dims the block and turns off both buttons.
+   * @default "default"
+   */
+  state?: IncrementerBlockStateValue;
   /** Label text displayed above the incrementer. */
   label: string;
   /** Show the help "?" icon next to the label. Defaults to `true`. */
@@ -31,6 +37,7 @@ export interface IncrementerBlockProps extends IncrementerProps {
 }
 
 export interface IncrementerBlockViewProps extends IncrementerProps {
+  state: IncrementerBlockStateValue;
   label: string;
   helpIcon: boolean;
   helperText: boolean | string | undefined;

app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx

@@ -13,12 +13,14 @@ function IncrementerBlockView({
   labelSize,
   palette,
   blockClassName,
+  state: _state,
+  disabled,
   className,
   ...incrementerProps
 }: IncrementerBlockViewProps) {
   return (
     <div
-      className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
+      className={`flex flex-col items-start gap-[var(--space-300)] py-[8px] ${disabled ? "opacity-60" : ""} ${blockClassName}`.trim()}
       data-figma-node="19883:13283"
     >
       <InputLabel
@@ -29,7 +31,11 @@ function IncrementerBlockView({
         size={labelSize}
         palette={palette}
       />
-      <Incrementer {...incrementerProps} className={className} />
+      <Incrementer
+        {...incrementerProps}
+        disabled={disabled}
+        className={className}
+      />
     </div>
   );
 }