@rovula/ui 0.0.76 → 0.0.77

package/src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,428 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import {
+  TextInput,
+  InputProps as TextInputProps,
+} from "../TextInput/TextInput";
+import { ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
+
+export type NumberInputProps = Omit<
+  TextInputProps,
+  "type" | "value" | "defaultValue" | "onChange"
+> & {
+  value?: number | string;
+  defaultValue?: number | string;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+  hideControls?: boolean;
+  allowDecimal?: boolean;
+  allowNegative?: boolean;
+  formatDisplay?: boolean;
+  thousandSeparator?: string;
+  decimalSeparator?: string;
+  prefix?: string;
+  suffix?: string;
+  onChange?: (value: number | undefined) => void;
+  onValueChange?: (value: string) => void;
+};
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      value,
+      defaultValue,
+      min,
+      max,
+      step = 1,
+      precision,
+      hideControls = false,
+      allowDecimal = true,
+      allowNegative = true,
+      formatDisplay = false,
+      thousandSeparator = ",",
+      decimalSeparator = ".",
+      prefix = "",
+      suffix = "",
+      disabled = false,
+      onChange,
+      onValueChange,
+      className,
+      size = "md",
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [internalValue, setInternalValue] = useState<string>(
+      (value ?? defaultValue ?? "").toString()
+    );
+    const [isFocused, setIsFocused] = useState(false);
+
+    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
+
+    // Helper function to remove formatting
+    const unformatNumber = useCallback(
+      (formattedValue: string): string => {
+        let cleaned = formattedValue;
+
+        // Remove prefix and suffix
+        if (prefix) cleaned = cleaned.replace(prefix, "");
+        if (suffix) cleaned = cleaned.replace(suffix, "");
+
+        // Remove thousand separators
+        if (thousandSeparator) {
+          cleaned = cleaned.split(thousandSeparator).join("");
+        }
+
+        // Replace decimal separator with standard dot
+        if (decimalSeparator !== ".") {
+          cleaned = cleaned.replace(decimalSeparator, ".");
+        }
+
+        return cleaned.trim();
+      },
+      [prefix, suffix, thousandSeparator, decimalSeparator]
+    );
+
+    // Helper function to format number for display
+    const formatNumber = useCallback(
+      (numValue: string): string => {
+        if (!formatDisplay || numValue === "" || numValue === "-")
+          return numValue;
+
+        const num = parseFloat(numValue);
+        if (isNaN(num)) return numValue;
+
+        let formatted = num.toString();
+
+        // Apply precision formatting
+        if (precision !== undefined) {
+          formatted = num.toFixed(precision);
+        }
+
+        // Split into integer and decimal parts
+        const parts = formatted.split(".");
+        let integerPart = parts[0];
+        const decimalPart = parts[1];
+
+        // Add thousand separators
+        if (thousandSeparator) {
+          integerPart = integerPart.replace(
+            /\B(?=(\d{3})+(?!\d))/g,
+            thousandSeparator
+          );
+        }
+
+        // Combine with decimal separator
+        formatted = decimalPart
+          ? `${integerPart}${decimalSeparator}${decimalPart}`
+          : integerPart;
+
+        // Add prefix and suffix
+        if (prefix) formatted = `${prefix}${formatted}`;
+        if (suffix) formatted = `${formatted}${suffix}`;
+
+        return formatted;
+      },
+      [
+        formatDisplay,
+        precision,
+        thousandSeparator,
+        decimalSeparator,
+        prefix,
+        suffix,
+      ]
+    );
+
+    const validateAndFormat = useCallback(
+      (val: string): string => {
+        if (val === "" || val === "-") return val;
+
+        let numValue = parseFloat(val);
+
+        if (isNaN(numValue)) return internalValue;
+
+        // Apply min/max constraints
+        if (min !== undefined && numValue < min) numValue = min;
+        if (max !== undefined && numValue > max) numValue = max;
+
+        // Apply precision
+        if (precision !== undefined) {
+          numValue = parseFloat(numValue.toFixed(precision));
+        }
+
+        return numValue.toString();
+      },
+      [min, max, precision, internalValue]
+    );
+
+    const handleInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        let inputValue = e.target.value;
+
+        // Unformat the input if formatting is enabled
+        if (formatDisplay) {
+          inputValue = unformatNumber(inputValue);
+        }
+
+        // Allow empty input
+        if (inputValue === "") {
+          setInternalValue("");
+          onChange?.(undefined);
+          onValueChange?.("");
+          return;
+        }
+
+        // Allow negative sign at the start
+        if (allowNegative && inputValue === "-") {
+          setInternalValue("-");
+          onValueChange?.("-");
+          return;
+        }
+
+        // Filter non-numeric characters based on settings
+        const regex = allowDecimal
+          ? allowNegative
+            ? /^-?\d*\.?\d*$/
+            : /^\d*\.?\d*$/
+          : allowNegative
+          ? /^-?\d*$/
+          : /^\d*$/;
+
+        if (!regex.test(inputValue)) {
+          return;
+        }
+
+        setInternalValue(inputValue);
+        onValueChange?.(inputValue);
+
+        // Only call onChange with a valid number
+        const numValue = parseFloat(inputValue);
+        if (!isNaN(numValue)) {
+          onChange?.(numValue);
+        }
+      },
+      [
+        allowDecimal,
+        allowNegative,
+        formatDisplay,
+        unformatNumber,
+        onChange,
+        onValueChange,
+      ]
+    );
+
+    const handleFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+      },
+      [props]
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        setIsFocused(false);
+
+        const formatted = validateAndFormat(internalValue);
+        setInternalValue(formatted);
+
+        const numValue = parseFloat(formatted);
+        if (!isNaN(numValue)) {
+          onChange?.(numValue);
+        }
+
+        props.onBlur?.(e);
+      },
+      [internalValue, validateAndFormat, onChange, props]
+    );
+
+    const increment = useCallback(
+      (
+        e:
+          | React.MouseEvent<HTMLButtonElement>
+          | React.KeyboardEvent<HTMLInputElement>
+      ) => {
+        if (disabled) return;
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        const currentValue = parseFloat(internalValue) || 0;
+        let newValue = currentValue + step;
+
+        if (max !== undefined && newValue > max) {
+          newValue = max;
+        }
+
+        const formatted = validateAndFormat(newValue.toString());
+        setInternalValue(formatted);
+        onChange?.(parseFloat(formatted));
+        onValueChange?.(formatted);
+      },
+      [
+        internalValue,
+        step,
+        max,
+        disabled,
+        validateAndFormat,
+        onChange,
+        onValueChange,
+      ]
+    );
+
+    const decrement = useCallback(
+      (
+        e:
+          | React.MouseEvent<HTMLButtonElement>
+          | React.KeyboardEvent<HTMLInputElement>
+      ) => {
+        if (disabled) return;
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        const currentValue = parseFloat(internalValue) || 0;
+        let newValue = currentValue - step;
+
+        if (min !== undefined && newValue < min) {
+          newValue = min;
+        }
+
+        const formatted = validateAndFormat(newValue.toString());
+        setInternalValue(formatted);
+        onChange?.(parseFloat(formatted));
+        onValueChange?.(formatted);
+      },
+      [
+        internalValue,
+        step,
+        min,
+        disabled,
+        validateAndFormat,
+        onChange,
+        onValueChange,
+      ]
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        switch (e.key) {
+          case "ArrowUp":
+            increment(e);
+            break;
+          case "ArrowDown":
+            decrement(e);
+            break;
+          case "Enter":
+            e.currentTarget.blur();
+            break;
+          default:
+            break;
+        }
+        props.onKeyDown?.(e);
+      },
+      [increment, decrement, props]
+    );
+
+    // Sync internal value with external value prop
+    React.useEffect(() => {
+      if (value !== undefined) {
+        setInternalValue(value.toString());
+      }
+    }, [value]);
+
+    // Get the display value (formatted when not focused)
+    const displayValue = React.useMemo(() => {
+      if (isFocused || !formatDisplay) {
+        return internalValue;
+      }
+      return formatNumber(internalValue);
+    }, [isFocused, formatDisplay, internalValue, formatNumber]);
+
+    const controlsSize = {
+      sm: "w-3 h-3",
+      md: "w-4 h-4",
+      lg: "w-6 h-6",
+    }[size];
+
+    const paddingSize = {
+      sm: "absolute top-0.5",
+      md: "absolute top-1",
+      lg: "absolute top-1",
+    }[size];
+
+    const renderControls = () => {
+      if (hideControls) return null;
+
+      return (
+        <div
+          className={cn(
+            "flex flex-col",
+            props.iconMode === "flat" && paddingSize
+          )}
+        >
+          <button
+            type="button"
+            onClick={increment}
+            disabled={
+              disabled ||
+              (max !== undefined && parseFloat(internalValue) >= max)
+            }
+            className={cn(
+              " hover:bg-input-active-stroke/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-full text-input-filled-text"
+            )}
+            tabIndex={-1}
+          >
+            <ChevronUpIcon className={controlsSize} />
+          </button>
+          <button
+            type="button"
+            onClick={decrement}
+            disabled={
+              disabled ||
+              (min !== undefined && parseFloat(internalValue) <= min)
+            }
+            className={cn(
+              " hover:bg-input-active-stroke/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-full text-input-filled-text"
+            )}
+            tabIndex={-1}
+          >
+            <ChevronDownIcon className={controlsSize} />
+          </button>
+        </div>
+      );
+    };
+
+    return (
+      <TextInput
+        {...props}
+        ref={inputRef}
+        type="text"
+        inputMode="decimal"
+        value={displayValue}
+        onChange={handleInputChange as any}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        size={size}
+        hasClearIcon={false}
+        endIcon={renderControls()}
+        className={cn(className)}
+      />
+    );
+  }
+);
+
+NumberInput.displayName = "NumberInput";
+
+export default NumberInput;

package/src/components/NumberInput/index.ts

@@ -0,0 +1,2 @@
+export { NumberInput, default } from "./NumberInput";
+export type { NumberInputProps } from "./NumberInput";

package/src/components/TextInput/TextInput.tsx

@@ -45,6 +45,13 @@ export type InputProps = {
   endIcon?: ReactNode;
   className?: string;
   labelClassName?: string;
+  classes?: {
+    iconWrapper?: string;
+    iconSearchWrapper?: string;
+    icon?: string;
+    startIconWrapper?: string;
+    endIconWrapper?: string;
+  };
   onClickStartIcon?: () => void;
   onClickEndIcon?: () => void;
   renderStartIcon?: () => ReactNode;
@@ -78,6 +85,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       onClickEndIcon,
       renderStartIcon,
       renderEndIcon,
+      classes,
       ...props
     },
     ref
@@ -164,13 +172,30 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const startIconElement = useMemo(() => {
       if (!hasLeftSectionIcon) return;
 
-      if (renderStartIcon) return renderStartIcon();
+      if (renderStartIcon) {
+        return (
+          <div
+            className={cn(
+              iconSearchWrapperClassname,
+              "flex",
+              classes?.iconSearchWrapper
+            )}
+          >
+            {renderStartIcon()}
+          </div>
+        );
+      }
 
       if (iconMode === "flat") {
         return (
-          <div className={iconSearchWrapperClassname}>
+          <div
+            className={cn(
+              iconSearchWrapperClassname,
+              classes?.iconSearchWrapper
+            )}
+          >
             <div
-              className={iconClassname}
+              className={cn(iconClassname, classes?.icon)}
               onClick={handleOnClickLeftSectionIcon}
             >
               {startIcon}
@@ -181,7 +206,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={startIconWrapperClassname}
+          className={cn(startIconWrapperClassname, classes?.startIconWrapper)}
           onClick={handleOnClickLeftSectionIcon}
         >
           {startIcon}
@@ -201,13 +226,23 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const endIconElement = useMemo(() => {
       if (!hasRightSectionIcon) return;
 
-      if (renderEndIcon) return renderEndIcon();
+      if (renderEndIcon) {
+        return (
+          <div
+            className={cn(iconWrapperClassname, "flex", classes?.iconWrapper)}
+          >
+            {renderEndIcon()}
+          </div>
+        );
+      }
 
       if (iconMode === "flat") {
         return (
-          <div className={cn(iconWrapperClassname, "flex")}>
+          <div
+            className={cn(iconWrapperClassname, "flex", classes?.iconWrapper)}
+          >
             <div
-              className={iconClassname}
+              className={cn(iconClassname, classes?.icon)}
               onClick={handleOnClickRightSectionIcon}
             >
               {endIcon}
@@ -218,7 +253,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={endIconWrapperClassname}
+          className={cn(endIconWrapperClassname, classes?.endIconWrapper)}
           onClick={handleOnClickRightSectionIcon}
         >
           {endIcon}
@@ -239,8 +274,15 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
           {hasSearchIcon && !hasLeftSectionIcon && (
-            <div className={iconSearchWrapperClassname}>
-              <MagnifyingGlassIcon className={iconClassname} />
+            <div
+              className={cn(
+                iconSearchWrapperClassname,
+                classes?.iconSearchWrapper
+              )}
+            >
+              <MagnifyingGlassIcon
+                className={cn(iconClassname, classes?.icon)}
+              />
             </div>
           )}
           <input
@@ -256,7 +298,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
           {hasClearIcon && !hasRightSectionIcon && (
             <div
-              className={iconWrapperClassname}
+              className={cn(iconWrapperClassname, classes?.iconWrapper)}
               style={{
                 display:
                   keepCloseIconOnValue && props.value ? "flex" : undefined,
@@ -264,7 +306,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             >
               <XCircleIcon
                 type="button"
-                className={iconClassname}
+                className={cn(iconClassname, classes?.icon)}
                 onMouseDown={handleClearInput}
               />
             </div>

package/src/index.ts

@@ -5,6 +5,7 @@ import "./icons/iconConfig";
 
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
@@ -47,6 +48,7 @@ export * from "./components/RadioGroup/RadioGroup";
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps } from "./components/Navbar/Navbar";