regex-input-incremental

1"use client";
2 
3import type * as React from "react";
4import { Input } from "@/components/ui/input";
5import { 
6  useIncrementalRegex,
7  type ValidationStatusType 
8} from "@/hooks/use-incremental-regex";
9 
10export interface RegexInputIncrementalProps
11  extends React.ComponentProps<"input"> {
12  regex: RegExp;
13  onValidation?: (status: ValidationStatusType) => void;
14  transformToUppercase?: boolean;
15}
16 
17export function RegexInputIncremental({
18  regex,
19  value,
20  onChange,
21  onValidation,
22  defaultValue,
23  transformToUppercase,
24  ...props
25}: RegexInputIncrementalProps) {
26  const {
27    value: displayValue,
28    onChange: handleChange,
29    onPaste: handlePaste,
30  } = useIncrementalRegex({
31    regex,
32    value: value as string | undefined,
33    onChange: onChange
34      ? (newValue: string) => {
35          const syntheticEvent = {
36            target: { value: newValue },
37            currentTarget: { value: newValue },
38          } as React.ChangeEvent<HTMLInputElement>;
39          onChange(syntheticEvent);
40        }
41      : undefined,
42    onValidation,
43    defaultValue: defaultValue as string | undefined,
44    transformToUppercase,
45  });
46 
47  return (
48    <Input
49      {...props}
50      value={displayValue}
51      onChange={handleChange}
52      onPaste={handlePaste}
53    />
54  );
55}