@rovula/ui 0.1.8 → 0.1.10

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/components/Form/ValidationHintList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CircleCheck } from "lucide-react";
 import { cn } from "@/utils/cn";
 const resolveHintState = (values, rule) => {
     const shouldEvaluate = rule.when ? rule.when(values) : true;
@@ -7,24 +7,24 @@ const resolveHintState = (values, rule) => {
         return "pending";
     return rule.validate(values) ? "valid" : "invalid";
 };
-const hintTextStateClass = {
-    valid: "text-success",
+const hintLabelStateClass = {
+    valid: "text-text-g-contrast-high",
     invalid: "text-input-error",
-    pending: "text-text-g-contrast-medium",
+    pending: "text-text-g-contrast-high",
 };
 const hintIconStateClass = {
-    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 = ({ values, rules, mode = ["pending", "valid", "invalid"], className, itemClassName, }) => {
+export const ValidationHintList = ({ values, rules, mode = ["pending", "valid", "invalid"], className, itemClassName, labelStateClassName, iconStateClassName, }) => {
     const enabledStates = new Set(mode);
     return (_jsx("ul", { className: cn("mt-2 flex flex-col gap-3", className), children: rules.map((rule) => {
             const state = resolveHintState(values, rule);
             const normalizedState = enabledStates.has(state)
                 ? state
                 : "pending";
-            return (_jsxs("li", { className: cn("flex items-center gap-2 typography-small2", hintTextStateClass[normalizedState], itemClassName), children: [_jsx(CheckCircleIcon, { className: cn("size-4", hintIconStateClass[normalizedState]) }), _jsx("span", { children: rule.label })] }, rule.id));
+            return (_jsxs("li", { className: cn("flex items-center gap-2 typography-small2 ", hintLabelStateClass[normalizedState], labelStateClassName === null || labelStateClassName === void 0 ? void 0 : labelStateClassName[normalizedState], itemClassName), children: [_jsx(CircleCheck, { className: cn("size-4", hintIconStateClass[normalizedState], iconStateClassName === null || iconStateClassName === void 0 ? void 0 : iconStateClassName[normalizedState]) }), _jsx("span", { children: rule.label })] }, rule.id));
         }) }));
 };
 export default ValidationHintList;

package/dist/components/OtpInput/OtpInput.js

@@ -102,7 +102,7 @@ export const OtpInput = forwardRef(({ value, onChange, onBlur, onComplete, lengt
     };
     return (_jsx("div", { className: cn("flex items-center gap-3", className), ref: containerRef, children: slots.map((slot, index) => (_jsx("input", { ref: (element) => {
                 inputRefs.current[index] = element;
-            }, type: "text", inputMode: inputMode, autoComplete: index === 0 ? "one-time-code" : "off", value: slot, maxLength: 1, disabled: disabled, 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", "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), onFocus: (event) => {
+            }, type: "text", inputMode: inputMode, autoComplete: index === 0 ? "one-time-code" : "off", value: slot, maxLength: 1, disabled: disabled, autoFocus: autoFocus && index === 0, "aria-invalid": invalid || undefined, className: cn("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), onFocus: (event) => {
                 event.target.select();
             }, onBlur: (event) => {
                 var _a;

package/dist/components/TextArea/TextArea.js

@@ -10,15 +10,44 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import { cn } from "@/utils/cn";
 import { textareaVariant, labelVariant as textareaLabelVariant, helperTextVariant as textareaHelperTextVariant, clearIconWrapperVariant, clearIconVariant, } from "./TextArea.styles";
 import { XCircleIcon } from "@heroicons/react/16/solid";
 export const TextArea = forwardRef((_a, ref) => {
-    var { id, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, labelClassName, className } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "labelClassName", "className"]);
+    var { id, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, labelClassName, className, normalize, format, trimOnCommit, normalizeOnCommit } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "labelClassName", "className", "normalize", "format", "trimOnCommit", "normalizeOnCommit"]);
     const textareaRef = useRef(null);
     const _id = id || `textarea-${label !== null && label !== void 0 ? label : ""}`;
     useImperativeHandle(ref, () => textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current);
+    const handleChange = useCallback((e) => {
+        var _a;
+        if (normalize) {
+            e.target.value = normalize(e.target.value);
+        }
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [normalize, props.onChange]);
+    const commitValue = useCallback((e) => {
+        var _a;
+        const textarea = e.currentTarget;
+        let committed = textarea.value;
+        if (trimOnCommit)
+            committed = committed.trim();
+        if (normalizeOnCommit)
+            committed = normalizeOnCommit(committed);
+        if (committed !== textarea.value) {
+            textarea.value = committed;
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, Object.assign(Object.assign({}, e), { target: textarea }));
+        }
+    }, [trimOnCommit, normalizeOnCommit, props.onChange]);
+    const handleBlur = useCallback((e) => {
+        var _a;
+        if (trimOnCommit || normalizeOnCommit)
+            commitValue(e);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur]);
+    const displayValue = format && typeof props.value === "string"
+        ? format(props.value)
+        : props.value;
     // Reuse TextInput visual language via utility classes to stay consistent
     const containerClassName = useMemo(() => `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, [fullwidth]);
     const textareaClassName = textareaVariant({
@@ -31,7 +60,7 @@ export const TextArea = forwardRef((_a, ref) => {
         hasClearIcon,
         isFloatingLabel,
     });
-    return (_jsxs("div", { className: containerClassName, children: [_jsxs("div", { className: "relative", children: [_jsx("textarea", Object.assign({}, props, { id: _id, ref: textareaRef, disabled: disabled, placeholder: isFloatingLabel ? " " : props.placeholder, className: cn(textareaClassName, className) })), hasClearIcon && (_jsx("div", { className: clearIconWrapperVariant({ size }), style: {
+    return (_jsxs("div", { className: containerClassName, children: [_jsxs("div", { className: "relative", children: [_jsx("textarea", Object.assign({}, props, { id: _id, ref: textareaRef, disabled: disabled, placeholder: isFloatingLabel ? " " : props.placeholder, className: cn(textareaClassName, className), value: displayValue, onChange: normalize ? handleChange : props.onChange, onBlur: trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur })), hasClearIcon && (_jsx("div", { className: clearIconWrapperVariant({ size }), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
                         }, children: _jsx(XCircleIcon, { type: "button", className: clearIconVariant({ size }), onMouseDown: (e) => {
                                 e.preventDefault();

package/dist/components/TextArea/TextArea.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { TextArea } from "@/index";
 const meta = {
     title: "Components/TextArea",
@@ -84,3 +85,31 @@ export const Disabled = {
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
     },
 };
+const NormalizeDemo = () => {
+    const [value, setValue] = React.useState("");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "normalize" }), " strips disallowed characters on every keystroke. This example removes backslash and special path characters in real-time."] }), _jsx(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) })] }));
+};
+export const Normalize = {
+    render: () => _jsx(NormalizeDemo, {}),
+};
+const FormatDemo = () => {
+    const [value, setValue] = React.useState("hello world");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "format" }), " transforms the displayed value without changing the stored value. This example displays text in uppercase."] }), _jsx(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) })] }));
+};
+export const Format = {
+    render: () => _jsx(FormatDemo, {}),
+};
+const TrimOnCommitDemo = () => {
+    const [value, setValue] = React.useState("");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "trimOnCommit" }), " trims leading and trailing whitespace when the user blurs the textarea. Try typing ", _jsx("code", { children: "\"  hello   \"" }), " then click outside."] }), _jsx(TextArea, { id: "trim-commit-demo", label: "Description", size: "lg", rows: 4, helperText: `Stored value: "${value}"`, value: value, trimOnCommit: true, onChange: (e) => setValue(e.target.value) })] }));
+};
+export const TrimOnCommit = {
+    render: () => _jsx(TrimOnCommitDemo, {}),
+};
+const NormalizeOnCommitDemo = () => {
+    const [value, setValue] = React.useState("");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "normalizeOnCommit" }), " applies a custom transform when the user blurs. Use with ", _jsx("code", { children: "trimOnCommit" }), " to compose \u2014 trim runs first, then ", _jsx("code", { children: "normalizeOnCommit" }), ". This example trims and collapses multiple blank lines into one on blur."] }), _jsx(TextArea, { id: "normalize-on-commit-demo", label: "Notes", size: "lg", rows: 4, helperText: `Stored value: "${value}"`, value: value, trimOnCommit: true, normalizeOnCommit: (v) => v.replace(/\n{3,}/g, "\n\n"), onChange: (e) => setValue(e.target.value) })] }));
+};
+export const NormalizeOnCommit = {
+    render: () => _jsx(NormalizeOnCommitDemo, {}),
+};

package/dist/components/TextInput/TextInput.js

@@ -15,7 +15,7 @@ import { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inli
 import { CircleAlert, CircleX, Search, } from "lucide-react";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
-    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, warningMessage, status, fullwidth = true, disabled = false, error = false, warning = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "warningMessage", "status", "fullwidth", "disabled", "error", "warning", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes"]);
+    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, warningMessage, status, fullwidth = true, disabled = false, error = false, warning = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes, normalize, format, trimOnCommit, normalizeOnCommit } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "warningMessage", "status", "fullwidth", "disabled", "error", "warning", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes", "normalize", "format", "trimOnCommit", "normalizeOnCommit"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
@@ -82,6 +82,42 @@ export const TextInput = forwardRef((_a, ref) => {
         position: "end",
     });
     useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    const handleChange = useCallback((e) => {
+        var _a;
+        if (normalize) {
+            e.target.value = normalize(e.target.value);
+        }
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [normalize, props.onChange]);
+    const commitValue = useCallback((e) => {
+        var _a;
+        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;
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, Object.assign(Object.assign({}, e), { target: input }));
+        }
+    }, [trimOnCommit, normalizeOnCommit, props.onChange]);
+    const handleBlur = useCallback((e) => {
+        var _a;
+        if (trimOnCommit || normalizeOnCommit)
+            commitValue(e);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur]);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        if ((trimOnCommit || normalizeOnCommit) && e.key === "Enter") {
+            commitValue(e);
+        }
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, 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 = "";
@@ -147,7 +183,7 @@ export const TextInput = forwardRef((_a, ref) => {
         renderEndIcon,
         handleOnClickRightSectionIcon,
     ]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, 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 && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
                         }, children: _jsx(CircleX, { className: cn(iconActionClassname, 
                             // 'fill-none stroke-current',

package/dist/components/TextInput/TextInput.stories.js

@@ -101,3 +101,31 @@ const FeedbackApiDemo = () => {
 export const FeedbackApiCompatibility = {
     render: () => _jsx(FeedbackApiDemo, {}),
 };
+const NormalizeDemo = () => {
+    const [value, setValue] = useState("");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "normalize" }), " strips disallowed characters on every keystroke. This example removes backslash and special path characters in real-time."] }), _jsx(TextInput, { id: "normalize-demo", label: "Device Name", size: "lg", keepFooterSpace: true, helperText: `Stored value: "${value}"`, value: value, normalize: (v) => v.trimStart().replace(/[\\/:*?"'<>|]/g, ""), onChange: (e) => setValue(e.target.value) })] }));
+};
+export const Normalize = {
+    render: () => _jsx(NormalizeDemo, {}),
+};
+const FormatDemo = () => {
+    const [value, setValue] = useState("1000000");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "format" }), " transforms the displayed value without changing the stored value. This example displays numbers with comma separators."] }), _jsx(TextInput, { id: "format-demo", label: "Amount", size: "lg", keepFooterSpace: true, 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) })] }));
+};
+export const Format = {
+    render: () => _jsx(FormatDemo, {}),
+};
+const TrimOnCommitDemo = () => {
+    const [value, setValue] = useState("");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "trimOnCommit" }), " trims leading and trailing whitespace when the user blurs the input or presses Enter. Try typing", " ", _jsx("code", { children: "\"hello   \"" }), " then click outside or press Enter."] }), _jsx(TextInput, { id: "trim-commit-demo", label: "Name", size: "lg", keepFooterSpace: true, helperText: `Stored value: "${value}"`, value: value, trimOnCommit: true, onChange: (e) => setValue(e.target.value) })] }));
+};
+export const TrimOnCommit = {
+    render: () => _jsx(TrimOnCommitDemo, {}),
+};
+const NormalizeOnCommitDemo = () => {
+    const [value, setValue] = useState("");
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "normalizeOnCommit" }), " applies a custom transform when the user blurs or presses Enter. Use with ", _jsx("code", { children: "trimOnCommit" }), " to compose \u2014 trim runs first, then ", _jsx("code", { children: "normalizeOnCommit" }), ". This example trims and uppercases on commit."] }), _jsx(TextInput, { id: "normalize-on-commit-demo", label: "Code", size: "lg", keepFooterSpace: true, helperText: `Stored value: "${value}"`, value: value, trimOnCommit: true, normalizeOnCommit: (v) => v.toUpperCase(), onChange: (e) => setValue(e.target.value) })] }));
+};
+export const NormalizeOnCommit = {
+    render: () => _jsx(NormalizeOnCommitDemo, {}),
+};

package/dist/esm/bundle.css

@@ -3929,10 +3929,6 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -3953,12 +3949,6 @@ input[type=number] {
 .opacity-0{
   opacity: 0;
 }
-.opacity-100{
-  opacity: 1;
-}
-.opacity-40{
-  opacity: 0.4;
-}
 .opacity-50{
   opacity: 0.5;
 }