@rovula/ui 0.1.8 → 0.1.10

package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts

@@ -82,6 +82,7 @@ declare const meta: {
         width?: number | string | undefined | undefined;
         role?: React.AriaRole | undefined;
         tabIndex?: number | undefined | undefined;
+        format?: ((value: string) => string) | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -302,6 +303,7 @@ declare const meta: {
         list?: string | undefined | undefined;
         status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        normalize?: ((value: string) => string) | undefined;
         warning?: boolean | undefined;
         title?: string | undefined | undefined;
         startIcon?: React.ReactNode;
@@ -382,6 +384,8 @@ declare const meta: {
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
+        trimOnCommit?: boolean | undefined;
+        normalizeOnCommit?: ((value: string) => string) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/esm/types/components/Form/ValidationHintList.d.ts

@@ -6,12 +6,15 @@ export type ValidationHintRule<TValues> = {
     validate: (values: TValues) => boolean;
     when?: (values: TValues) => boolean;
 };
+export type ValidationHintStateClassMap = Partial<Record<ValidationHintState, string>>;
 export type ValidationHintListProps<TValues> = {
     values: TValues;
     rules: ValidationHintRule<TValues>[];
     mode?: ValidationHintMode;
     className?: string;
     itemClassName?: string;
+    labelStateClassName?: ValidationHintStateClassMap;
+    iconStateClassName?: ValidationHintStateClassMap;
 };
-export declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, labelStateClassName, iconStateClassName, }: ValidationHintListProps<TValues>) => import("react/jsx-runtime").JSX.Element;
 export default ValidationHintList;

package/dist/esm/types/components/InputFilter/InputFilter.stories.d.ts

@@ -67,6 +67,7 @@ declare const meta: {
         width?: number | string | undefined | undefined;
         role?: React.AriaRole | undefined;
         tabIndex?: number | undefined | undefined;
+        format?: ((value: string) => string) | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -287,6 +288,7 @@ declare const meta: {
         list?: string | undefined | undefined;
         status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        normalize?: ((value: string) => string) | undefined;
         warning?: boolean | undefined;
         title?: string | undefined | undefined;
         startIcon?: React.ReactNode;
@@ -367,6 +369,8 @@ declare const meta: {
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
+        trimOnCommit?: boolean | undefined;
+        normalizeOnCommit?: ((value: string) => string) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/esm/types/components/MaskedTextInput/MaskedTextInput.d.ts

@@ -67,6 +67,10 @@ export declare const MaskedTextInput: React.ForwardRefExoticComponent<{
     onClickEndIcon?: () => void;
     renderStartIcon?: () => React.ReactNode;
     renderEndIcon?: () => React.ReactNode;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     mask?: string;
     maskChar?: string;

package/dist/esm/types/components/MaskedTextInput/MaskedTextInput.stories.d.ts

@@ -38,6 +38,10 @@ declare const meta: {
         onClickEndIcon?: () => void;
         renderStartIcon?: () => React.ReactNode;
         renderEndIcon?: () => React.ReactNode;
+        normalize?: (value: string) => string;
+        format?: (value: string) => string;
+        trimOnCommit?: boolean;
+        normalizeOnCommit?: (value: string) => string;
     } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
         mask?: string;
         maskChar?: string;
@@ -88,6 +92,10 @@ declare const meta: {
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
+        normalize?: ((value: string) => string) | undefined;
+        format?: ((value: string) => string) | undefined;
+        trimOnCommit?: boolean | undefined;
+        normalizeOnCommit?: ((value: string) => string) | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
         height?: number | string | undefined | undefined;

package/dist/esm/types/components/PasswordInput/PasswordInput.stories.d.ts

@@ -25,6 +25,7 @@ declare const meta: {
         width?: number | string | undefined | undefined;
         role?: React.AriaRole | undefined;
         tabIndex?: number | undefined | undefined;
+        format?: ((value: string) => string) | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -246,6 +247,7 @@ declare const meta: {
         list?: string | undefined | undefined;
         status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        normalize?: ((value: string) => string) | undefined;
         warning?: boolean | undefined;
         error?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
@@ -336,6 +338,8 @@ declare const meta: {
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
+        trimOnCommit?: boolean | undefined;
+        normalizeOnCommit?: ((value: string) => string) | undefined;
         showToggle?: boolean | undefined;
         hideIcon?: React.ReactNode;
         showIcon?: React.ReactNode;

package/dist/esm/types/components/Search/Search.stories.d.ts

@@ -61,6 +61,7 @@ declare const meta: {
         width?: number | string | undefined | undefined;
         role?: React.AriaRole | undefined;
         tabIndex?: number | undefined | undefined;
+        format?: ((value: string) => string) | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -281,6 +282,7 @@ declare const meta: {
         list?: string | undefined | undefined;
         status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        normalize?: ((value: string) => string) | undefined;
         warning?: boolean | undefined;
         title?: string | undefined | undefined;
         startIcon?: React.ReactNode;
@@ -361,6 +363,8 @@ declare const meta: {
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
+        trimOnCommit?: boolean | undefined;
+        normalizeOnCommit?: ((value: string) => string) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/esm/types/components/TextArea/TextArea.d.ts

@@ -16,6 +16,10 @@ export type TextAreaProps = {
     hasClearIcon?: boolean;
     labelClassName?: string;
     className?: string;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
 export declare const TextArea: React.ForwardRefExoticComponent<{
     id?: string;
@@ -34,5 +38,9 @@ export declare const TextArea: React.ForwardRefExoticComponent<{
     hasClearIcon?: boolean;
     labelClassName?: string;
     className?: string;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/dist/esm/types/components/TextArea/TextArea.stories.d.ts

@@ -7,3 +7,7 @@ export declare const Default: Story;
 export declare const ErrorState: Story;
 export declare const HelperText: Story;
 export declare const Disabled: Story;
+export declare const Normalize: Story;
+export declare const Format: Story;
+export declare const TrimOnCommit: Story;
+export declare const NormalizeOnCommit: Story;

package/dist/esm/types/components/TextInput/TextInput.d.ts

@@ -36,6 +36,10 @@ export type InputProps = {
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 export declare const TextInput: React.ForwardRefExoticComponent<{
     id?: string;
@@ -74,5 +78,9 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/esm/types/components/TextInput/TextInput.stories.d.ts

@@ -38,6 +38,10 @@ declare const meta: {
         onClickEndIcon?: () => void;
         renderStartIcon?: () => React.ReactNode;
         renderEndIcon?: () => React.ReactNode;
+        normalize?: (value: string) => string;
+        format?: (value: string) => string;
+        trimOnCommit?: boolean;
+        normalizeOnCommit?: (value: string) => string;
     } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
@@ -80,6 +84,10 @@ declare const meta: {
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
+        normalize?: ((value: string) => string) | undefined;
+        format?: ((value: string) => string) | undefined;
+        trimOnCommit?: boolean | undefined;
+        normalizeOnCommit?: ((value: string) => string) | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
         height?: number | string | undefined | undefined;
@@ -415,3 +423,15 @@ export declare const KeepFooterSpace: {
 export declare const FeedbackApiCompatibility: {
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Normalize: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Format: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const TrimOnCommit: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const NormalizeOnCommit: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/index.d.ts

@@ -85,6 +85,10 @@ type InputProps = {
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">;
 declare const TextInput: React__default.ForwardRefExoticComponent<{
     id?: string;
@@ -123,6 +127,10 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
 type MaskRule = {
@@ -177,6 +185,10 @@ declare const MaskedTextInput: React__default.ForwardRefExoticComponent<{
     onClickEndIcon?: () => void;
     renderStartIcon?: () => React__default.ReactNode;
     renderEndIcon?: () => React__default.ReactNode;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     mask?: string;
     maskChar?: string;
@@ -258,6 +270,10 @@ type TextAreaProps = {
     hasClearIcon?: boolean;
     labelClassName?: string;
     className?: string;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
 declare const TextArea: React__default.ForwardRefExoticComponent<{
     id?: string;
@@ -276,6 +292,10 @@ declare const TextArea: React__default.ForwardRefExoticComponent<{
     hasClearIcon?: boolean;
     labelClassName?: string;
     className?: string;
+    normalize?: (value: string) => string;
+    format?: (value: string) => string;
+    trimOnCommit?: boolean;
+    normalizeOnCommit?: (value: string) => string;
 } & Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React__default.RefAttributes<HTMLTextAreaElement>>;
 
 type TextProps = {
@@ -1230,14 +1250,17 @@ type ValidationHintRule<TValues> = {
     validate: (values: TValues) => boolean;
     when?: (values: TValues) => boolean;
 };
+type ValidationHintStateClassMap = Partial<Record<ValidationHintState, string>>;
 type ValidationHintListProps<TValues> = {
     values: TValues;
     rules: ValidationHintRule<TValues>[];
     mode?: ValidationHintMode;
     className?: string;
     itemClassName?: string;
+    labelStateClassName?: ValidationHintStateClassMap;
+    iconStateClassName?: ValidationHintStateClassMap;
 };
-declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => react_jsx_runtime.JSX.Element;
+declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, labelStateClassName, iconStateClassName, }: ValidationHintListProps<TValues>) => react_jsx_runtime.JSX.Element;
 
 type OptionValue = string | number;
 type OptionLike<TValue extends OptionValue = string> = {

package/dist/src/theme/global.css

@@ -7889,11 +7889,6 @@ input[type=number] {
   color: color-mix(in srgb, var(--text-g-contrast-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.text-text-white {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-white) calc(100% * var(--tw-text-opacity, 1)), transparent);
-}
-
 .text-warning {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -7920,14 +7915,6 @@ input[type=number] {
   opacity: 0;
 }
 
-.opacity-100 {
-  opacity: 1;
-}
-
-.opacity-40 {
-  opacity: 0.4;
-}
-
 .opacity-50 {
   opacity: 0.5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Form/ValidationHintList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CircleCheck } from "lucide-react";
 import { cn } from "@/utils/cn";
 
 export type ValidationHintState = "pending" | "valid" | "invalid";
@@ -12,12 +12,18 @@ export type ValidationHintRule<TValues> = {
   when?: (values: TValues) => boolean;
 };
 
+export type ValidationHintStateClassMap = Partial<
+  Record<ValidationHintState, string>
+>;
+
 export type ValidationHintListProps<TValues> = {
   values: TValues;
   rules: ValidationHintRule<TValues>[];
   mode?: ValidationHintMode;
   className?: string;
   itemClassName?: string;
+  labelStateClassName?: ValidationHintStateClassMap;
+  iconStateClassName?: ValidationHintStateClassMap;
 };
 
 const resolveHintState = <TValues,>(
@@ -30,16 +36,16 @@ const resolveHintState = <TValues,>(
   return rule.validate(values) ? "valid" : "invalid";
 };
 
-const hintTextStateClass: Record<ValidationHintState, string> = {
-  valid: "text-success",
+const hintLabelStateClass: Record<ValidationHintState, string> = {
+  valid: "text-text-g-contrast-high",
   invalid: "text-input-error",
-  pending: "text-text-g-contrast-medium",
+  pending: "text-text-g-contrast-high",
 };
 
 const hintIconStateClass: Record<ValidationHintState, string> = {
-  valid: "opacity-100",
-  invalid: "opacity-100",
-  pending: "opacity-40",
+  valid: "text-primary",
+  invalid: "text-input-error",
+  pending: "text-text-g-contrast-low",
 };
 
 export const ValidationHintList = <TValues,>({
@@ -48,6 +54,8 @@ export const ValidationHintList = <TValues,>({
   mode = ["pending", "valid", "invalid"],
   className,
   itemClassName,
+  labelStateClassName,
+  iconStateClassName,
 }: ValidationHintListProps<TValues>) => {
   const enabledStates = new Set<ValidationHintState>(mode);
 
@@ -63,13 +71,18 @@ export const ValidationHintList = <TValues,>({
           <li
             key={rule.id}
             className={cn(
-              "flex items-center gap-2 typography-small2",
-              hintTextStateClass[normalizedState],
+              "flex items-center gap-2 typography-small2 ",
+              hintLabelStateClass[normalizedState],
+              labelStateClassName?.[normalizedState],
               itemClassName,
             )}
           >
-            <CheckCircleIcon
-              className={cn("size-4", hintIconStateClass[normalizedState])}
+            <CircleCheck
+              className={cn(
+                "size-4",
+                hintIconStateClass[normalizedState],
+                iconStateClassName?.[normalizedState],
+              )}
             />
             <span>{rule.label}</span>
           </li>

package/src/components/OtpInput/OtpInput.tsx

@@ -26,7 +26,7 @@ export type OtpInputProps = {
 const sanitizeChars = (
   raw: string,
   charPattern: RegExp,
-  maxLength: number
+  maxLength: number,
 ): string[] => {
   const chars = Array.from(raw).filter((char) => charPattern.test(char));
   return chars.slice(0, maxLength);
@@ -48,7 +48,7 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       className,
       inputClassName,
     },
-    ref
+    ref,
   ) => {
     const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -58,7 +58,11 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       return Array.from({ length }, (_, index) => normalizedValue[index] || "");
     }, [length, value]);
 
-    useImperativeHandle(ref, () => inputRefs.current[0] as HTMLInputElement, []);
+    useImperativeHandle(
+      ref,
+      () => inputRefs.current[0] as HTMLInputElement,
+      [],
+    );
 
     const setCode = (nextSlots: string[]) => {
       const nextValue = nextSlots.join("");
@@ -107,7 +111,10 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       }
     };
 
-    const handlePaste = (index: number, event: ClipboardEvent<HTMLInputElement>) => {
+    const handlePaste = (
+      index: number,
+      event: ClipboardEvent<HTMLInputElement>,
+    ) => {
       event.preventDefault();
       if (disabled) return;
 
@@ -125,7 +132,10 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       focusInput(nextFocusIndex);
     };
 
-    const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (
+      index: number,
+      event: KeyboardEvent<HTMLInputElement>,
+    ) => {
       if (disabled) return;
 
       if (event.key === "ArrowLeft") {
@@ -160,7 +170,10 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
     };
 
     return (
-      <div className={cn("flex items-center gap-3", className)} ref={containerRef}>
+      <div
+        className={cn("flex items-center gap-3", className)}
+        ref={containerRef}
+      >
         {slots.map((slot, index) => (
           <input
             key={index}
@@ -176,11 +189,11 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
             autoFocus={autoFocus && index === 0}
             aria-invalid={invalid || undefined}
             className={cn(
-              "h-14 w-[46px] rounded-[8px] border bg-transparent text-center text-2xl font-semibold text-text-white outline-none transition-all duration-200",
+              "h-14 w-[46px] rounded-[8px] text-input-filled-text border bg-transparent text-center text-2xl font-semibold outline-none transition-all duration-200",
               "border-input-default-stroke focus:border-input-active-stroke",
               "disabled:cursor-not-allowed disabled:opacity-50",
               invalid && "border-input-error focus:border-input-error",
-              inputClassName
+              inputClassName,
             )}
             onFocus={(event) => {
               event.target.select();
@@ -202,7 +215,7 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
         ))}
       </div>
     );
-  }
+  },
 );
 
 OtpInput.displayName = "OtpInput";

package/src/components/TextArea/TextArea.stories.tsx

@@ -132,3 +132,111 @@ export const Disabled: Story = {
     );
   },
 };
+
+const NormalizeDemo = () => {
+  const [value, setValue] = React.useState("");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>normalize</code> strips disallowed characters on every keystroke.
+        This example removes backslash and special path characters in real-time.
+      </p>
+      <TextArea
+        id="normalize-demo"
+        label="Notes"
+        size="lg"
+        rows={4}
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        normalize={(v) => v.replace(/[\\/:*?"'<>|]/g, "")}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const Normalize: Story = {
+  render: () => <NormalizeDemo />,
+};
+
+const FormatDemo = () => {
+  const [value, setValue] = React.useState("hello world");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>format</code> transforms the displayed value without changing the
+        stored value. This example displays text in uppercase.
+      </p>
+      <TextArea
+        id="format-demo"
+        label="Template"
+        size="lg"
+        rows={4}
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        format={(v) => v.toUpperCase()}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const Format: Story = {
+  render: () => <FormatDemo />,
+};
+
+const TrimOnCommitDemo = () => {
+  const [value, setValue] = React.useState("");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>trimOnCommit</code> trims leading and trailing whitespace when
+        the user blurs the textarea. Try typing <code>"  hello   "</code> then
+        click outside.
+      </p>
+      <TextArea
+        id="trim-commit-demo"
+        label="Description"
+        size="lg"
+        rows={4}
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        trimOnCommit
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const TrimOnCommit: Story = {
+  render: () => <TrimOnCommitDemo />,
+};
+
+const NormalizeOnCommitDemo = () => {
+  const [value, setValue] = React.useState("");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>normalizeOnCommit</code> applies a custom transform when the user
+        blurs. Use with <code>trimOnCommit</code> to compose — trim runs first,
+        then <code>normalizeOnCommit</code>. This example trims and collapses
+        multiple blank lines into one on blur.
+      </p>
+      <TextArea
+        id="normalize-on-commit-demo"
+        label="Notes"
+        size="lg"
+        rows={4}
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        trimOnCommit
+        normalizeOnCommit={(v) => v.replace(/\n{3,}/g, "\n\n")}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const NormalizeOnCommit: Story = {
+  render: () => <NormalizeOnCommitDemo />,
+};