passport-input

1"use client";
2 
3import { useId } from "react";
4import {
5  RegexInput,
6  type RegexInputProps,
7} from "@/components/domain-ui/regex-input";
8import { Label } from "@/components/ui/label";
9 
10const INDIAN_PASSPORT_REGEX = /^[A-Z][0-9]{7}$/;
11 
12export function PassportInput({
13  showLabel = true,
14  ...props
15}: Omit<RegexInputProps, "regex"> & { showLabel?: boolean }) {
16  const generatedId = useId();
17  const id = props.id || generatedId;
18 
19  if (!showLabel) {
20    return <RegexInput regex={INDIAN_PASSPORT_REGEX} {...props} id={id} />;
21  }
22 
23  return (
24    <div className="*:not-first:mt-2">
25      <Label htmlFor={id}>Indian Passport</Label>
26      <RegexInput regex={INDIAN_PASSPORT_REGEX} {...props} id={id} />
27    </div>
28  );
29}