@rovula/ui 0.1.9 → 0.1.11

package/src/components/TextInput/TextInput.stories.tsx

@@ -237,7 +237,9 @@ const KeepFooterSpaceDemo = () => {
               keepFooterSpace
               size="lg"
               error={hasError}
-              errorMessage={hasError ? "Please enter a valid email address" : undefined}
+              errorMessage={
+                hasError ? "Please enter a valid email address" : undefined
+              }
             />
           </div>
           <div>
@@ -249,7 +251,9 @@ const KeepFooterSpaceDemo = () => {
               label="Email"
               size="lg"
               error={hasError}
-              errorMessage={hasError ? "Please enter a valid email address" : undefined}
+              errorMessage={
+                hasError ? "Please enter a valid email address" : undefined
+              }
             />
           </div>
           <div></div>
@@ -315,7 +319,9 @@ const FeedbackApiDemo = () => {
             error={legacyError}
             errorMessage={legacyError ? "Invalid email format." : undefined}
             warning={legacyWarning}
-            warningMessage={legacyWarning ? "Please verify this email." : undefined}
+            warningMessage={
+              legacyWarning ? "Please verify this email." : undefined
+            }
           />
         </div>
 
@@ -336,8 +342,8 @@ const FeedbackApiDemo = () => {
               useStatusOverride
                 ? "Status explicitly sets warning."
                 : legacyWarning
-                  ? "Please verify this email."
-                  : undefined
+                ? "Please verify this email."
+                : undefined
             }
           />
         </div>
@@ -349,3 +355,112 @@ const FeedbackApiDemo = () => {
 export const FeedbackApiCompatibility = {
   render: () => <FeedbackApiDemo />,
 } satisfies StoryObj;
+
+const NormalizeDemo = () => {
+  const [value, setValue] = 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>
+      <TextInput
+        id="normalize-demo"
+        label="Device Name"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        normalize={(v) => v.trimStart().replace(/[\\/:*?"'<>|]/g, "")}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const Normalize = {
+  render: () => <NormalizeDemo />,
+} satisfies StoryObj;
+
+const FormatDemo = () => {
+  const [value, setValue] = useState("1000000");
+  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 numbers with comma separators.
+      </p>
+      <TextInput
+        id="format-demo"
+        label="Amount"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        format={(v) => Number(v.replace(/,/g, "") || 0).toLocaleString()}
+        normalize={(v) => v.replace(/[^0-9]/g, "")}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const Format = {
+  render: () => <FormatDemo />,
+} satisfies StoryObj;
+
+const TrimOnCommitDemo = () => {
+  const [value, setValue] = 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 input or presses Enter. Try typing{" "}
+        <code>"hello   "</code> then click outside or press Enter.
+      </p>
+      <TextInput
+        id="trim-commit-demo"
+        label="Name"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        trimOnCommit
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const TrimOnCommit = {
+  render: () => <TrimOnCommitDemo />,
+} satisfies StoryObj;
+
+const NormalizeOnCommitDemo = () => {
+  const [value, setValue] = 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 or presses Enter. Use with <code>trimOnCommit</code> to compose —
+        trim runs first, then <code>normalizeOnCommit</code>. This example trims
+        and uppercases on commit.
+      </p>
+      <TextInput
+        id="normalize-on-commit-demo"
+        label="Code"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        trimOnCommit
+        normalizeOnCommit={(v) => v.toUpperCase()}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const NormalizeOnCommit = {
+  render: () => <NormalizeOnCommitDemo />,
+} satisfies StoryObj;

package/src/components/TextInput/TextInput.tsx

@@ -5,6 +5,9 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
+  FocusEvent,
+  KeyboardEvent,
+  ChangeEvent,
 } from "react";
 import {
   helperTextVariant,
@@ -60,6 +63,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 const TextInput = forwardRef<HTMLInputElement, InputProps>(
@@ -94,6 +101,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       renderStartIcon,
       renderEndIcon,
       classes,
+      normalize,
+      format,
+      trimOnCommit,
+      normalizeOnCommit,
       ...props
     },
     ref
@@ -174,6 +185,56 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        if (normalize) {
+          e.target.value = normalize(e.target.value);
+        }
+        props.onChange?.(e);
+      },
+      [normalize, props.onChange]
+    );
+
+    const commitValue = useCallback(
+      (e: FocusEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => {
+        const input = e.currentTarget;
+        let committed = input.value;
+        if (trimOnCommit) committed = committed.trim();
+        if (normalizeOnCommit) committed = normalizeOnCommit(committed);
+        if (committed !== input.value) {
+          input.value = committed;
+          props.onChange?.({
+            ...e,
+            target: input,
+          } as unknown as ChangeEvent<HTMLInputElement>);
+        }
+      },
+      [trimOnCommit, normalizeOnCommit, props.onChange]
+    );
+
+    const handleBlur = useCallback(
+      (e: FocusEvent<HTMLInputElement>) => {
+        if (trimOnCommit || normalizeOnCommit) commitValue(e);
+        props.onBlur?.(e);
+      },
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur]
+    );
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLInputElement>) => {
+        if ((trimOnCommit || normalizeOnCommit) && e.key === "Enter") {
+          commitValue(e);
+        }
+        props.onKeyDown?.(e);
+      },
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onKeyDown]
+    );
+
+    const displayValue =
+      format && typeof props.value === "string"
+        ? format(props.value)
+        : props.value;
+
     const handleClearInput = useCallback(() => {
       if (inputRef.current) {
         inputRef.current.value = "";
@@ -325,7 +386,11 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             type={type}
             id={_id}
             disabled={disabled}
+            value={displayValue}
             className={cn(inputClassname, props.className)}
+            onChange={normalize ? handleChange : props.onChange}
+            onBlur={trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur}
+            onKeyDown={trimOnCommit || normalizeOnCommit ? handleKeyDown : props.onKeyDown}
           />
           {hasSearchIcon && !hasLeftSectionIcon && (
             <div

package/src/theme/themes/variable.css

@@ -197,34 +197,34 @@
   --state-success-text-pressed-skyller: #166534;
   --state-warning-default-xspector: #ffc107;
   --state-warning-default-report-xspector-light-mode: #ffc107;
-  --state-warning-default-skyller: #fbbf24;
+  --state-warning-default-skyller: #f59e0b;
   --state-warning-hover-xspector: #ffdf1b;
   --state-warning-hover-report-xspector-light-mode: #ffdf1b;
-  --state-warning-hover-skyller: #fde68a;
+  --state-warning-hover-skyller: #fbbf24;
   --state-warning-stroke-xspector: rgba(255 193 7 / 0.48);
   --state-warning-stroke-report-xspector-light-mode: rgba(255 223 27 / 0.48);
-  --state-warning-stroke-skyller: rgba(251 191 36 / 0.48);
+  --state-warning-stroke-skyller: rgba(245 158 11 / 0.48);
   --state-warning-hover-bg-xspector: rgba(255 193 7 / 0.08);
   --state-warning-hover-bg-report-xspector-light-mode: rgba(255 193 7 / 0.08);
-  --state-warning-hover-bg-skyller: rgba(253 230 138 / 0.08);
+  --state-warning-hover-bg-skyller: rgba(251 191 36 / 0.08);
   --state-warning-pressed-xspector: #985108;
   --state-warning-pressed-report-xspector-light-mode: #985108;
-  --state-warning-pressed-skyller: #f59e0b;
+  --state-warning-pressed-skyller: #d97706;
   --state-warning-active-xspector: #ffc107;
   --state-warning-active-report-xspector-light-mode: #ffc107;
-  --state-warning-active-skyller: #d97706;
+  --state-warning-active-skyller: #b45309;
   --state-warning-text-solid-xspector: #212b36;
   --state-warning-text-solid-report-xspector-light-mode: #ffffff;
   --state-warning-text-solid-skyller: #ffffff;
   --state-warning-text-outline-xspector: #ffc107;
   --state-warning-text-outline-report-xspector-light-mode: #ffc107;
-  --state-warning-text-outline-skyller: #fbbf24;
+  --state-warning-text-outline-skyller: #f59e0b;
   --state-warning-text-hover-xspector: #ffdf1b;
   --state-warning-text-hover-report-xspector-light-mode: #ffdf1b;
-  --state-warning-text-hover-skyller: #fde68a;
+  --state-warning-text-hover-skyller: #fbbf24;
   --state-warning-text-pressed-xspector: #985108;
   --state-warning-text-pressed-report-xspector-light-mode: #985108;
-  --state-warning-text-pressed-skyller: #f59e0b;
+  --state-warning-text-pressed-skyller: #d97706;
   --state-error-default-xspector: #ff4d35;
   --state-error-default-report-xspector-light-mode: #ed2f15;
   --state-error-default-skyller: #ef4444;
@@ -827,19 +827,19 @@
   --modal-overlay-skyller: rgba(0 0 0 / 0.64);
   --bg-bg1-xspector: #030c15;
   --bg-bg1-report-xspector-light-mode: #ffffff;
-  --bg-bg1-skyller: #2563eb;
+  --bg-bg1-skyller: #ffffff;
   --bg-bg2-xspector: #0a1b2e;
   --bg-bg2-report-xspector-light-mode: #ffffff;
   --bg-bg2-skyller: #f8fbff;
-  --bg-bg3-xspector: #000000;
-  --bg-bg3-report-xspector-light-mode: #d8d8d8;
-  --bg-bg3-skyller: #f5f5f5;
-  --bg-stroke1-xspector: #000000;
+  --bg-bg3-xspector: #0e2841;
+  --bg-bg3-report-xspector-light-mode: #ffffff;
+  --bg-bg3-skyller: #f8fbff;
+  --bg-stroke1-xspector: #1c3955;
   --bg-stroke1-report-xspector-light-mode: #e2e2e2;
-  --bg-stroke1-skyller: #e5e5e5;
-  --bg-stroke2-xspector: #000000;
-  --bg-stroke2-report-xspector-light-mode: #c5c5c5;
-  --bg-stroke2-skyller: #d4d4d4;
+  --bg-stroke1-skyller: #ececec;
+  --bg-stroke2-xspector: #294664;
+  --bg-stroke2-report-xspector-light-mode: #e5e5e5;
+  --bg-stroke2-skyller: #e5e5e5;
   --input-default-text-xspector: #9e9e9e;
   --input-default-text-report-xspector-light-mode: #9e9e9e;
   --input-default-text-skyller: #737373;
@@ -1038,21 +1038,21 @@
   --modal-line-xspector: rgba(158 158 158 / 0.24);
   --modal-line-report-xspector-light-mode: #cfcfcf;
   --modal-line-skyller: #d4d4d4;
-  --bg-bg4-xspector: #000000;
-  --bg-bg4-report-xspector-light-mode: #d8d8d8;
-  --bg-bg4-skyller: #f5f5f5;
+  --bg-bg4-xspector: #0f2a46;
+  --bg-bg4-report-xspector-light-mode: #ffffff;
+  --bg-bg4-skyller: #ffffff;
   --bg-bg5-xspector: #000000;
-  --bg-bg5-report-xspector-light-mode: #d8d8d8;
-  --bg-bg5-skyller: #f5f5f5;
+  --bg-bg5-report-xspector-light-mode: #000000;
+  --bg-bg5-skyller: #000000;
   --bg-stroke3-xspector: #000000;
-  --bg-stroke3-report-xspector-light-mode: #c5c5c5;
-  --bg-stroke3-skyller: #d4d4d4;
+  --bg-stroke3-report-xspector-light-mode: #000000;
+  --bg-stroke3-skyller: #000000;
   --bg-stroke4-xspector: #000000;
-  --bg-stroke4-report-xspector-light-mode: #c5c5c5;
-  --bg-stroke4-skyller: #d4d4d4;
+  --bg-stroke4-report-xspector-light-mode: #000000;
+  --bg-stroke4-skyller: #000000;
   --bg-stroke5-xspector: #000000;
-  --bg-stroke5-report-xspector-light-mode: #c5c5c5;
-  --bg-stroke5-skyller: #d4d4d4;
+  --bg-stroke5-report-xspector-light-mode: #000000;
+  --bg-stroke5-skyller: #000000;
 
   /* BUTTON RADIUS */
   --button-l-round: 8px;