@greatapps/common 1.1.698 → 1.1.700

package/src/components/ui/form/InputOtp.tsx

@@ -1,80 +1,80 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { IconMinus } from '@tabler/icons-react'
-import { cn } from "../../../infra/utils/clsx"
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  )
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center", className)}
-      {...props}
-    />
-  )
-}
-
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  index: number
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
-
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        "relative flex h-9 w-9 items-center justify-center border text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
-        "border-gray-200 hover:border-gray-400 data-[active=true]:border-gray-950",
-        "data-[active=true]:z-10",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <IconMinus />
-    </div>
-  )
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+'use client';
+
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { IconMinus } from '@tabler/icons-react'
+import { cn } from "../../../infra/utils/clsx"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
+        "border-gray-200 hover:border-gray-400 data-[active=true]:border-gray-950",
+        "data-[active=true]:z-10",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <IconMinus />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/components/ui/form/PhoneInput.tsx

@@ -1,210 +1,210 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { useTranslations } from 'next-intl';
-import { AsYouType, CountryCode } from 'libphonenumber-js';
-import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';
-import { IconChevronDown, IconSearch } from '@tabler/icons-react';
-import { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';
-
-function formatNational(digits: string, iso: string): string {
-  const raw = digits.replace(/\D/g, '');
-  if (!raw) return '';
-  return new AsYouType(iso as CountryCode).input(raw);
-}
-
-interface PhoneInputProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  label?: string;
-  optional?: boolean;
-  required?: boolean;
-  hintMessage?: string;
-  error?: boolean;
-  errorMessage?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  classnameContainer?: string;
-  className?: string;
-}
-
-export default function PhoneInput({
-  value,
-  onChange,
-  label,
-  optional = false,
-  required = false,
-  hintMessage,
-  error = false,
-  errorMessage,
-  placeholder,
-  disabled = false,
-  classnameContainer,
-  className,
-}: PhoneInputProps) {
-  const translate = useTranslations();
-  const parsed = parsePhoneValue(value ?? '');
-  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);
-  const [phoneNumber, setPhoneNumber] = useState(parsed.number);
-  const [search, setSearch] = useState('');
-  const [open, setOpen] = useState(false);
-  const prevValueRef = useRef(value);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (value !== prevValueRef.current) {
-      prevValueRef.current = value;
-      const p = parsePhoneValue(value ?? '');
-      setSelectedCountry(p.country);
-      setPhoneNumber(formatNational(p.number, p.country.iso));
-    }
-  }, [value]);
-
-  const emit = (country: Country, number: string) => {
-    onChange?.(`${country.dial} ${number}`);
-  };
-
-  const handleCountrySelect = (country: Country) => {
-    const reformatted = formatNational(phoneNumber, country.iso);
-    setSelectedCountry(country);
-    setPhoneNumber(reformatted);
-    setOpen(false);
-    setSearch('');
-    emit(country, reformatted);
-  };
-
-  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const rawInput = e.target.value;
-    const digits = rawInput.replace(/\D/g, '');
-    if (digits.length > 15) return;
-
-    const cursorPos = e.target.selectionStart ?? rawInput.length;
-    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\D/g, '').length;
-
-    const formatted = formatNational(rawInput, selectedCountry.iso);
-    setPhoneNumber(formatted);
-    emit(selectedCountry, formatted);
-
-    requestAnimationFrame(() => {
-      if (!inputRef.current) return;
-      let digitCount = 0;
-      let newPos = formatted.length;
-      for (let i = 0; i < formatted.length; i++) {
-        if (/\d/.test(formatted[i])) {
-          digitCount++;
-          if (digitCount === digitsBeforeCursor) {
-            newPos = i + 1;
-            break;
-          }
-        }
-      }
-      inputRef.current.setSelectionRange(newPos, newPos);
-    });
-  };
-
-  const filtered = COUNTRIES.filter(
-    (c) =>
-      c.name.toLowerCase().includes(search.toLowerCase()) ||
-      c.dial.includes(search) ||
-      c.iso.toLowerCase().includes(search.toLowerCase())
-  );
-
-  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
-  const showMessage = finalMessage && finalMessage.trim() !== '';
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      {label && (
-        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
-          <span className="text-zinc-600">{label}</span>
-          {optional && <span className="text-zinc-500">{translate('common.forms.phoneInput.optional')}</span>}
-          {required && <span className="text-red-600">*</span>}
-        </div>
-      )}
-
-      <div
-        className={cn(
-          'flex gap-2 items-center border rounded-lg h-10 transition-colors',
-          error
-            ? 'border-red-600 hover:border-red-700'
-            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',
-          disabled && 'cursor-not-allowed',
-          classnameContainer
-        )}
-      >
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <button
-              type="button"
-              className="flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none"
-              disabled={disabled}
-            >
-              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className="w-5 h-5 rounded-full" />
-              <span className="paragraph-small-regular text-zinc-950">{selectedCountry.dial}</span>
-              <IconChevronDown size={14} className={cn("text-zinc-500 transition-transform duration-200", open && "rotate-180")} />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent className="w-72 p-0 z-[1010]" align="start" side="top">
-            <div className="flex items-center gap-2 p-2 border-b border-zinc-100">
-              <IconSearch size={14} className="text-zinc-400 shrink-0" />
-              <input
-                type="text"
-                className="flex-1 text-sm outline-none placeholder:text-zinc-400"
-                placeholder={translate('common.forms.phoneInput.searchPlaceholder')}
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                autoFocus
-              />
-            </div>
-            <div className="max-h-60 overflow-y-auto overscroll-contain" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>
-              {filtered.map((country) => (
-                <button
-                  key={country.iso}
-                  type="button"
-                  className={cn(
-                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',
-                    selectedCountry.iso === country.iso && 'bg-zinc-100'
-                  )}
-                  onClick={() => handleCountrySelect(country)}
-                >
-                  <img src={flagUrl(country.iso)} alt={country.iso} className="w-5 h-5 rounded-full shrink-0" />
-                  <span className="paragraph-small-regular text-zinc-950 flex-1 truncate">
-                    {country.name}
-                  </span>
-                  <span className="paragraph-small-regular text-zinc-500 shrink-0">
-                    {country.dial}
-                  </span>
-                </button>
-              ))}
-              {filtered.length === 0 && (
-                <p className="text-sm text-zinc-500 p-3 text-center">{translate('common.forms.phoneInput.emptyMessage')}</p>
-              )}
-            </div>
-          </PopoverContent>
-        </Popover>
-
-        <Separator orientation="vertical" />
-
-        <Input
-          ref={inputRef}
-          type="tel"
-          value={phoneNumber}
-          onChange={handleNumberChange}
-          placeholder={placeholder}
-          disabled={disabled}
-          className={cn(
-            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',
-            disabled && 'cursor-not-allowed',
-            className
-          )}
-        />
-      </div>
-
-      {showMessage && (
-        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>
-          {finalMessage}
-        </span>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { AsYouType, CountryCode } from 'libphonenumber-js';
+import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';
+import { IconChevronDown, IconSearch } from '@tabler/icons-react';
+import { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';
+
+function formatNational(digits: string, iso: string): string {
+  const raw = digits.replace(/\D/g, '');
+  if (!raw) return '';
+  return new AsYouType(iso as CountryCode).input(raw);
+}
+
+interface PhoneInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+  optional?: boolean;
+  required?: boolean;
+  hintMessage?: string;
+  error?: boolean;
+  errorMessage?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  classnameContainer?: string;
+  className?: string;
+}
+
+export default function PhoneInput({
+  value,
+  onChange,
+  label,
+  optional = false,
+  required = false,
+  hintMessage,
+  error = false,
+  errorMessage,
+  placeholder,
+  disabled = false,
+  classnameContainer,
+  className,
+}: PhoneInputProps) {
+  const translate = useTranslations();
+  const parsed = parsePhoneValue(value ?? '');
+  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);
+  const [phoneNumber, setPhoneNumber] = useState(parsed.number);
+  const [search, setSearch] = useState('');
+  const [open, setOpen] = useState(false);
+  const prevValueRef = useRef(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (value !== prevValueRef.current) {
+      prevValueRef.current = value;
+      const p = parsePhoneValue(value ?? '');
+      setSelectedCountry(p.country);
+      setPhoneNumber(formatNational(p.number, p.country.iso));
+    }
+  }, [value]);
+
+  const emit = (country: Country, number: string) => {
+    onChange?.(`${country.dial} ${number}`);
+  };
+
+  const handleCountrySelect = (country: Country) => {
+    const reformatted = formatNational(phoneNumber, country.iso);
+    setSelectedCountry(country);
+    setPhoneNumber(reformatted);
+    setOpen(false);
+    setSearch('');
+    emit(country, reformatted);
+  };
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawInput = e.target.value;
+    const digits = rawInput.replace(/\D/g, '');
+    if (digits.length > 15) return;
+
+    const cursorPos = e.target.selectionStart ?? rawInput.length;
+    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\D/g, '').length;
+
+    const formatted = formatNational(rawInput, selectedCountry.iso);
+    setPhoneNumber(formatted);
+    emit(selectedCountry, formatted);
+
+    requestAnimationFrame(() => {
+      if (!inputRef.current) return;
+      let digitCount = 0;
+      let newPos = formatted.length;
+      for (let i = 0; i < formatted.length; i++) {
+        if (/\d/.test(formatted[i])) {
+          digitCount++;
+          if (digitCount === digitsBeforeCursor) {
+            newPos = i + 1;
+            break;
+          }
+        }
+      }
+      inputRef.current.setSelectionRange(newPos, newPos);
+    });
+  };
+
+  const filtered = COUNTRIES.filter(
+    (c) =>
+      c.name.toLowerCase().includes(search.toLowerCase()) ||
+      c.dial.includes(search) ||
+      c.iso.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+  const showMessage = finalMessage && finalMessage.trim() !== '';
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label && (
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          <span className="text-zinc-600">{label}</span>
+          {optional && <span className="text-zinc-500">{translate('common.forms.phoneInput.optional')}</span>}
+          {required && <span className="text-red-600">*</span>}
+        </div>
+      )}
+
+      <div
+        className={cn(
+          'flex gap-2 items-center border rounded-lg h-10 transition-colors',
+          error
+            ? 'border-red-600 hover:border-red-700'
+            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',
+          disabled && 'cursor-not-allowed',
+          classnameContainer
+        )}
+      >
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none"
+              disabled={disabled}
+            >
+              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className="w-5 h-5 rounded-full" />
+              <span className="paragraph-small-regular text-zinc-950">{selectedCountry.dial}</span>
+              <IconChevronDown size={14} className={cn("text-zinc-500 transition-transform duration-200", open && "rotate-180")} />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72 p-0 z-[1010]" align="start" side="top">
+            <div className="flex items-center gap-2 p-2 border-b border-zinc-100">
+              <IconSearch size={14} className="text-zinc-400 shrink-0" />
+              <input
+                type="text"
+                className="flex-1 text-sm outline-none placeholder:text-zinc-400"
+                placeholder={translate('common.forms.phoneInput.searchPlaceholder')}
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div className="max-h-60 overflow-y-auto overscroll-contain" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>
+              {filtered.map((country) => (
+                <button
+                  key={country.iso}
+                  type="button"
+                  className={cn(
+                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',
+                    selectedCountry.iso === country.iso && 'bg-zinc-100'
+                  )}
+                  onClick={() => handleCountrySelect(country)}
+                >
+                  <img src={flagUrl(country.iso)} alt={country.iso} className="w-5 h-5 rounded-full shrink-0" />
+                  <span className="paragraph-small-regular text-zinc-950 flex-1 truncate">
+                    {country.name}
+                  </span>
+                  <span className="paragraph-small-regular text-zinc-500 shrink-0">
+                    {country.dial}
+                  </span>
+                </button>
+              ))}
+              {filtered.length === 0 && (
+                <p className="text-sm text-zinc-500 p-3 text-center">{translate('common.forms.phoneInput.emptyMessage')}</p>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <Separator orientation="vertical" />
+
+        <Input
+          ref={inputRef}
+          type="tel"
+          value={phoneNumber}
+          onChange={handleNumberChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={cn(
+            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+            disabled && 'cursor-not-allowed',
+            className
+          )}
+        />
+      </div>
+
+      {showMessage && (
+        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>
+          {finalMessage}
+        </span>
+      )}
+    </div>
+  );
+}