Form Fields

1"use client";
2 
3import * as React from "react";
4import { Minus, Plus, Search, Eye, EyeOff, Phone, Globe } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { Input, InputGroup, InputGroupAddon, type InputProps } from "@/components/ui/atoms/input";
8import { Button } from "@/components/ui/atoms/button";
9 
10/* ================================================================== */
11/*  SHARED WRAPPER                                                     */
12/* ================================================================== */
13 
14const innerInput = [
15  "min-w-0 border-0 bg-transparent shadow-none outline-none ring-0 ring-offset-0 focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-offset-0",
16].join(" ");
17 
18type MaskToken = "#" | "A" | "*";
19const maskRules: Record<MaskToken, RegExp> = {
20  "#": /\d/,
21  A: /[a-zA-Z]/,
22  "*": /[a-zA-Z0-9]/,
23};
24 
25function applyInputMask(value: string, mask: string) {
26  const source = value.replace(/[^a-zA-Z0-9]/g, "");
27  let sourceIndex = 0;
28  let result = "";
29 
30  for (const character of mask) {
31    const rule = maskRules[character as MaskToken];
32    if (!rule) {
33      if (source.length > 0 && (sourceIndex > 0 || result.length === 0)) result += character;
34      continue;
35    }
36 
37    while (sourceIndex < source.length && !rule.test(source[sourceIndex])) sourceIndex += 1;
38    if (sourceIndex >= source.length) break;
39    result += source[sourceIndex];
40    sourceIndex += 1;
41  }
42 
43  return result;
44}
45 
46export interface MaskedInputProps extends Omit<InputProps, "value" | "defaultValue"> {
47  mask: string;
48  value?: string;
49  defaultValue?: string;
50  onValueChange?: (formattedValue: string, rawValue: string) => void;
51}
52 
53const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
54  ({ defaultValue, mask, onChange, onValueChange, value, ...props }, ref) => {
55    const format = (input: string) => applyInputMask(input, mask);
56    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
57      const formatted = format(event.currentTarget.value);
58      event.currentTarget.value = formatted;
59      onValueChange?.(formatted, formatted.replace(/[^a-zA-Z0-9]/g, ""));
60      onChange?.(event);
61    };
62 
63    return (
64      <Input
65        ref={ref}
66        value={value === undefined ? undefined : format(value)}
67        defaultValue={defaultValue === undefined ? undefined : format(defaultValue)}
68        maxLength={mask.length}
69        onChange={handleChange}
70        {...props}
71      />
72    );
73  },
74);
75// … truncated