Implement modals across create flow

2026-04-17 23:45:29 -06:00
parent 36dcb79870
commit 4854c49c4a
21 changed files with 2089 additions and 318 deletions
@@ -0,0 +1,72 @@
+"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);