Informational and text templates

app/components/controls/TextInput/TextInput.container.tsx

@@ -4,12 +4,13 @@ import { memo, forwardRef, useState, useRef } from "react";
 import { useComponentId, useFormField } from "../../../hooks";
 import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
-import { normalizeInputState } from "../../../../lib/propNormalization";
+import { normalizeInputState, normalizeTextInputSize } from "../../../../lib/propNormalization";
 
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
       state: externalStateProp = "default",
+      inputSize: inputSizeProp = "medium",
       disabled = false,
       error = false,
       label,
@@ -31,6 +32,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   ) => {
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
     const externalState = normalizeInputState(externalStateProp);
+    const inputSize = normalizeTextInputSize(inputSizeProp);
     
     // Generate unique ID for accessibility if not provided
     const { id: inputId, labelId } = useComponentId("text-input", id);
@@ -59,13 +61,20 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
     // Determine if input is filled (has value)
     const isFilled = Boolean(value && value.trim().length > 0);
 
-    // Fixed size styles (medium only per Figma designs)
-    const sizeStyles = {
-      input: "h-[40px] px-[12px] py-[8px] text-[16px]",
-      label: "text-[14px] leading-[20px] font-medium",
-      container: "gap-[8px]",
-      radius: "var(--measures-radius-200,8px)",
-    };
+    // Size styles based on inputSize prop
+    const sizeStyles = inputSize === "small"
+      ? {
+          input: "h-[32px] px-[10px] py-[6px] text-[14px]",
+          label: "text-[12px] leading-[16px] font-medium",
+          container: "gap-[6px]",
+          radius: "var(--measures-radius-200,8px)",
+        }
+      : {
+          input: "h-[40px] px-[12px] py-[8px] text-[16px]",
+          label: "text-[14px] leading-[20px] font-medium",
+          container: "gap-[8px]",
+          radius: "var(--measures-radius-200,8px)",
+        };
 
     // State styles based on Figma designs
     const getStateStyles = (): {

app/components/controls/TextInput/TextInput.types.ts

@@ -1,5 +1,7 @@
 import type { InputStateValue } from "../../../../lib/propNormalization";
 
+export type TextInputSizeValue = "small" | "medium" | "Small" | "Medium";
+
 export interface TextInputProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "size" | "onChange" | "onFocus" | "onBlur"
@@ -9,6 +11,12 @@ export interface TextInputProps extends Omit<
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: InputStateValue;
+  /**
+   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * @default "medium"
+   */
+  inputSize?: TextInputSizeValue;
   disabled?: boolean;
   error?: boolean;
   label?: string;
@@ -21,9 +29,10 @@ export interface TextInputProps extends Omit<
   showHelpIcon?: boolean;
   /**
    * Whether to show hint text below input (Figma prop).
+   * Can be a boolean or a string to display custom text (e.g., character count).
    * @default false
    */
-  textHint?: boolean;
+  textHint?: boolean | string;
   /**
    * Whether to show form header (label and help icon) above input (Figma prop).
    * @default true
@@ -55,6 +64,6 @@ export interface TextInputViewProps {
   isFilled?: boolean;
   inputWrapperClasses?: string;
   focusRingClasses?: string;
-  textHint?: boolean;
+  textHint?: boolean | string;
   formHeader?: boolean;
 }

app/components/controls/TextInput/TextInput.view.tsx

@@ -80,7 +80,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
         {textHint && (
           <div className="flex items-start relative shrink-0 w-full">
             <p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
-              Hint text here
+              {typeof textHint === "string" ? textHint : "Hint text here"}
             </p>
           </div>
         )}