Establish cursor rules

app/components/controls/Incrementer/Incrementer.container.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { memo, useCallback } from "react";
+import IncrementerView from "./Incrementer.view";
+import type { IncrementerProps } from "./Incrementer.types";
+
+/**
+ * Figma: "Control / Incrementer" (`17857:30943`). A compact `[ - value + ]`
+ * row used for numeric step inputs (e.g. a percentage setting).
+ *
+ * For a labelled variant that matches "Control / Incrementer Block"
+ * (`19883:13283`), compose with `IncrementerBlock` instead.
+ */
+const IncrementerContainer = ({
+  value,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  onChange,
+  formatValue,
+  disabled = false,
+  decrementAriaLabel = "Decrease",
+  incrementAriaLabel = "Increase",
+  className = "",
+}: IncrementerProps) => {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const atMin = clampedValue <= min;
+  const atMax = clampedValue >= max;
+
+  const handleDecrement = useCallback(() => {
+    if (disabled || atMin) return;
+    onChange(Math.max(min, clampedValue - step));
+  }, [disabled, atMin, onChange, min, clampedValue, step]);
+
+  const handleIncrement = useCallback(() => {
+    if (disabled || atMax) return;
+    onChange(Math.min(max, clampedValue + step));
+  }, [disabled, atMax, onChange, max, clampedValue, step]);
+
+  return (
+    <IncrementerView
+      displayValue={formatValue ? formatValue(clampedValue) : clampedValue}
+      disabled={disabled}
+      atMin={atMin}
+      atMax={atMax}
+      onDecrement={handleDecrement}
+      onIncrement={handleIncrement}
+      decrementAriaLabel={decrementAriaLabel}
+      incrementAriaLabel={incrementAriaLabel}
+      className={className}
+    />
+  );
+};
+
+IncrementerContainer.displayName = "Incrementer";
+
+export default memo(IncrementerContainer);

app/components/controls/Incrementer/Incrementer.types.ts

@@ -0,0 +1,37 @@
+export interface IncrementerProps {
+  value: number;
+  /** Minimum value (default `-Infinity`). */
+  min?: number;
+  /** Maximum value (default `Infinity`). */
+  max?: number;
+  /** Step size applied to +/- actions (default `1`). */
+  step?: number;
+  onChange: (_next: number) => void;
+  /**
+   * Optional formatter for the displayed value. Receives the raw number and
+   * should return the rendered content. Default: `String(value)`.
+   */
+  formatValue?: (_value: number) => React.ReactNode;
+  /**
+   * When true, the whole incrementer is non-interactive and the value renders
+   * in the "inactive" (tertiary) color per Figma.
+   */
+  disabled?: boolean;
+  /** Accessible label for the decrement button (default "Decrease"). */
+  decrementAriaLabel?: string;
+  /** Accessible label for the increment button (default "Increase"). */
+  incrementAriaLabel?: string;
+  className?: string;
+}
+
+export interface IncrementerViewProps {
+  displayValue: React.ReactNode;
+  disabled: boolean;
+  atMin: boolean;
+  atMax: boolean;
+  onDecrement: () => void;
+  onIncrement: () => void;
+  decrementAriaLabel: string;
+  incrementAriaLabel: string;
+  className: string;
+}

app/components/controls/Incrementer/Incrementer.view.tsx

@@ -1,32 +1,7 @@
 "use client";
 
 import { memo } from "react";
-
-export interface IncrementerProps {
-  value: number;
-  /** Minimum value (default `-Infinity`). */
-  min?: number;
-  /** Maximum value (default `Infinity`). */
-  max?: number;
-  /** Step size applied to +/- actions (default `1`). */
-  step?: number;
-  onChange: (_next: number) => void;
-  /**
-   * Optional formatter for the displayed value. Receives the raw number and
-   * should return the rendered content. Default: `String(value)`.
-   */
-  formatValue?: (_value: number) => React.ReactNode;
-  /**
-   * When true, the whole incrementer is non-interactive and the value renders
-   * in the "inactive" (tertiary) color per Figma.
-   */
-  disabled?: boolean;
-  /** Accessible label for the decrement button (default "Decrease"). */
-  decrementAriaLabel?: string;
-  /** Accessible label for the increment button (default "Increase"). */
-  incrementAriaLabel?: string;
-  className?: string;
-}
+import type { IncrementerViewProps } from "./Incrementer.types";
 
 const STEP_BUTTON_CLASSES =
   "bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-200,8px)] py-[var(--measures-spacing-150,6px)] transition-[background,color,transform] duration-200 ease-in-out hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100";
@@ -69,38 +44,17 @@ function PlusIcon() {
   );
 }
 
-/**
- * Figma: "Control / Incrementer" (`17857:30943`). A compact `[ - value + ]`
- * row used for numeric step inputs (e.g. a percentage setting).
- *
- * For a labelled variant that matches "Control / Incrementer Block"
- * (`19883:13283`), compose with {@link IncrementerBlock} instead.
- */
-function IncrementerComponent({
-  value,
-  min = Number.NEGATIVE_INFINITY,
-  max = Number.POSITIVE_INFINITY,
-  step = 1,
-  onChange,
-  formatValue,
-  disabled = false,
-  decrementAriaLabel = "Decrease",
-  incrementAriaLabel = "Increase",
-  className = "",
-}: IncrementerProps) {
-  const clampedValue = Math.min(Math.max(value, min), max);
-  const atMin = clampedValue <= min;
-  const atMax = clampedValue >= max;
-
-  const decrement = () => {
-    if (disabled || atMin) return;
-    onChange(Math.max(min, clampedValue - step));
-  };
-  const increment = () => {
-    if (disabled || atMax) return;
-    onChange(Math.min(max, clampedValue + step));
-  };
-
+function IncrementerView({
+  displayValue,
+  disabled,
+  atMin,
+  atMax,
+  onDecrement,
+  onIncrement,
+  decrementAriaLabel,
+  incrementAriaLabel,
+  className,
+}: IncrementerViewProps) {
   const valueColor = disabled
     ? "text-[color:var(--color-content-default-tertiary,#b4b4b4)]"
     : "text-[color:var(--color-content-default-primary,#fff)]";
@@ -112,7 +66,7 @@ function IncrementerComponent({
     >
       <button
         type="button"
-        onClick={decrement}
+        onClick={onDecrement}
         disabled={disabled || atMin}
         aria-label={decrementAriaLabel}
         className={STEP_BUTTON_CLASSES}
@@ -123,11 +77,11 @@ function IncrementerComponent({
         aria-live="polite"
         className={`shrink-0 whitespace-nowrap font-inter text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`}
       >
-        {formatValue ? formatValue(clampedValue) : clampedValue}
+        {displayValue}
       </span>
       <button
         type="button"
-        onClick={increment}
+        onClick={onIncrement}
         disabled={disabled || atMax}
         aria-label={incrementAriaLabel}
         className={STEP_BUTTON_CLASSES}
@@ -138,6 +92,6 @@ function IncrementerComponent({
   );
 }
 
-IncrementerComponent.displayName = "Incrementer";
+IncrementerView.displayName = "IncrementerView";
 
-export default memo(IncrementerComponent);
+export default memo(IncrementerView);

app/components/controls/Incrementer/IncrementerBlock.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import Incrementer, { type IncrementerProps } from "./Incrementer";
-import InputLabel from "../../utility/InputLabel";
-import type {
-  InputLabelPaletteValue,
-  InputLabelSizeValue,
-} from "../../utility/InputLabel/InputLabel.types";
-
-export interface IncrementerBlockProps extends IncrementerProps {
-  /** Label text displayed above the incrementer. */
-  label: string;
-  /** Show the help "?" icon next to the label. Defaults to `true`. */
-  helpIcon?: boolean;
-  /**
-   * Helper text shown to the right of the label. Pass a string or `true` to
-   * render the default "Optional text".
-   */
-  helperText?: boolean | string;
-  /** Show an asterisk indicating a required field. */
-  asterisk?: boolean;
-  /**
-   * Size of the label (`"s"` or `"m"`). Defaults to `"s"` to match the Figma
-   * "Incrementer Block" spec.
-   */
-  labelSize?: InputLabelSizeValue;
-  /** Palette. Defaults to `"default"`. */
-  palette?: InputLabelPaletteValue;
-  /**
-   * Class applied to the root `<div>` wrapping the label + incrementer. Use
-   * this to control the block's layout width (e.g. `w-full`).
-   */
-  blockClassName?: string;
-}
-
-/**
- * Figma: "Control / Incrementer Block" (`19883:13283`). An `InputLabel` plus
- * an {@link Incrementer} row, stacked with a 12px gap.
- */
-function IncrementerBlockComponent({
-  label,
-  helpIcon = true,
-  helperText,
-  asterisk,
-  labelSize = "s",
-  palette = "default",
-  blockClassName = "",
-  className,
-  ...incrementerProps
-}: IncrementerBlockProps) {
-  return (
-    <div
-      className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
-      data-figma-node="19883:13283"
-    >
-      <InputLabel
-        label={label}
-        helpIcon={helpIcon}
-        helperText={helperText}
-        asterisk={asterisk}
-        size={labelSize}
-        palette={palette}
-      />
-      <Incrementer {...incrementerProps} className={className} />
-    </div>
-  );
-}
-
-IncrementerBlockComponent.displayName = "IncrementerBlock";
-
-export default memo(IncrementerBlockComponent);

app/components/controls/Incrementer/index.tsx

@@ -1,5 +1,5 @@
-export { default } from "./Incrementer";
-export { default as Incrementer } from "./Incrementer";
-export { default as IncrementerBlock } from "./IncrementerBlock";
-export type { IncrementerProps } from "./Incrementer";
-export type { IncrementerBlockProps } from "./IncrementerBlock";
+export { default } from "./Incrementer.container";
+export type {
+  IncrementerProps,
+  IncrementerViewProps,
+} from "./Incrementer.types";

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

@@ -0,0 +1,38 @@
+"use client";
+
+import { memo } from "react";
+import IncrementerBlockView from "./IncrementerBlock.view";
+import type { IncrementerBlockProps } from "./IncrementerBlock.types";
+
+/**
+ * Figma: "Control / Incrementer Block" (`19883:13283`). An `InputLabel` plus
+ * an `Incrementer` row, stacked with a 12px gap. Consumers can pass any
+ * `IncrementerProps` alongside the label-specific props.
+ */
+const IncrementerBlockContainer = ({
+  label,
+  helpIcon = true,
+  helperText,
+  asterisk,
+  labelSize = "s",
+  palette = "default",
+  blockClassName = "",
+  ...incrementerProps
+}: IncrementerBlockProps) => {
+  return (
+    <IncrementerBlockView
+      label={label}
+      helpIcon={helpIcon}
+      helperText={helperText}
+      asterisk={asterisk}
+      labelSize={labelSize}
+      palette={palette}
+      blockClassName={blockClassName}
+      {...incrementerProps}
+    />
+  );
+};
+
+IncrementerBlockContainer.displayName = "IncrementerBlock";
+
+export default memo(IncrementerBlockContainer);

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

@@ -0,0 +1,41 @@
+import type { IncrementerProps } from "../Incrementer/Incrementer.types";
+import type {
+  InputLabelPaletteValue,
+  InputLabelSizeValue,
+} from "../../utility/InputLabel/InputLabel.types";
+
+export interface IncrementerBlockProps extends IncrementerProps {
+  /** Label text displayed above the incrementer. */
+  label: string;
+  /** Show the help "?" icon next to the label. Defaults to `true`. */
+  helpIcon?: boolean;
+  /**
+   * Helper text shown to the right of the label. Pass a string or `true` to
+   * render the default "Optional text".
+   */
+  helperText?: boolean | string;
+  /** Show an asterisk indicating a required field. */
+  asterisk?: boolean;
+  /**
+   * Size of the label (`"s"` or `"m"`). Defaults to `"s"` to match the Figma
+   * "Incrementer Block" spec.
+   */
+  labelSize?: InputLabelSizeValue;
+  /** Palette. Defaults to `"default"`. */
+  palette?: InputLabelPaletteValue;
+  /**
+   * Class applied to the root `<div>` wrapping the label + incrementer. Use
+   * this to control the block's layout width (e.g. `w-full`).
+   */
+  blockClassName?: string;
+}
+
+export interface IncrementerBlockViewProps extends IncrementerProps {
+  label: string;
+  helpIcon: boolean;
+  helperText: boolean | string | undefined;
+  asterisk: boolean | undefined;
+  labelSize: InputLabelSizeValue;
+  palette: InputLabelPaletteValue;
+  blockClassName: string;
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { memo } from "react";
+import Incrementer from "../Incrementer";
+import InputLabel from "../../utility/InputLabel";
+import type { IncrementerBlockViewProps } from "./IncrementerBlock.types";
+
+function IncrementerBlockView({
+  label,
+  helpIcon,
+  helperText,
+  asterisk,
+  labelSize,
+  palette,
+  blockClassName,
+  className,
+  ...incrementerProps
+}: IncrementerBlockViewProps) {
+  return (
+    <div
+      className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
+      data-figma-node="19883:13283"
+    >
+      <InputLabel
+        label={label}
+        helpIcon={helpIcon}
+        helperText={helperText}
+        asterisk={asterisk}
+        size={labelSize}
+        palette={palette}
+      />
+      <Incrementer {...incrementerProps} className={className} />
+    </div>
+  );
+}
+
+IncrementerBlockView.displayName = "IncrementerBlockView";
+
+export default memo(IncrementerBlockView);

app/components/controls/IncrementerBlock/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./IncrementerBlock.container";
+export type { IncrementerBlockProps } from "./IncrementerBlock.types";