Establish cursor rules

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";