@greatapps/common 1.1.217 → 1.1.219

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

@@ -1,97 +1,97 @@
-"use client";
-
-import { useState, forwardRef, useEffect } from "react";
-import { format } from "date-fns";
-import { Calendar } from "./Calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
-import { cn } from "../../../infra/utils/clsx";
-
-// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local
-// Evita bug de timezone onde new Date("2025-08-02") interpreta como UTC
-const isoParaDataLocal = (iso: string): Date => {
-  const [ano, mes, dia] = iso.split("-").map(Number);
-  return new Date(ano, mes - 1, dia);
-};
-
-interface DatePickerProps {
-  value?: string;
-  onChange?: (date: string | undefined) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
-  (
-    { value, onChange, placeholder = "Selecione a data", className, disabled },
-    ref,
-  ) => {
-    const [open, setOpen] = useState(false);
-    const [date, setDate] = useState<Date | undefined>(() => {
-      return value ? isoParaDataLocal(value) : undefined;
-    });
-
-    // Sincroniza estado interno quando value mudar externamente
-    useEffect(() => {
-      if (value) {
-        setDate(isoParaDataLocal(value));
-      } else {
-        setDate(undefined);
-      }
-    }, [value]);
-
-    const handleDateSelect = (selectedDate: Date | undefined) => {
-      setDate(selectedDate);
-
-      if (selectedDate) {
-        onChange?.(format(selectedDate, "yyyy-MM-dd"));
-        setOpen(false); // Fecha o popover após seleção
-      } else {
-        onChange?.(undefined);
-      }
-    };
-
-    const displayText = date ? format(date, "dd/MM/yyyy") : placeholder;
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <button
-            ref={ref}
-            disabled={disabled}
-            className={cn(
-              "flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start",
-              "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              className,
-            )}
-          >
-            <span
-              className={cn(
-                "paragraph-small-medium",
-                date ? "text-gray-950" : "text-gray-500",
-              )}
-            >
-              {displayText}
-            </span>
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200"
-          align="start"
-          sideOffset={8}
-        >
-          <div className="p-3">
-            <Calendar
-              mode="single"
-              selected={date}
-              onSelect={handleDateSelect}
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-
-DatePicker.displayName = "DatePicker";
+"use client";
+
+import { useState, forwardRef, useEffect } from "react";
+import { format } from "date-fns";
+import { Calendar } from "./Calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
+import { cn } from "../../../infra/utils/clsx";
+
+// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local
+// Evita bug de timezone onde new Date("2025-08-02") interpreta como UTC
+const isoParaDataLocal = (iso: string): Date => {
+  const [ano, mes, dia] = iso.split("-").map(Number);
+  return new Date(ano, mes - 1, dia);
+};
+
+interface DatePickerProps {
+  value?: string;
+  onChange?: (date: string | undefined) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
+  (
+    { value, onChange, placeholder = "Selecione a data", className, disabled },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const [date, setDate] = useState<Date | undefined>(() => {
+      return value ? isoParaDataLocal(value) : undefined;
+    });
+
+    // Sincroniza estado interno quando value mudar externamente
+    useEffect(() => {
+      if (value) {
+        setDate(isoParaDataLocal(value));
+      } else {
+        setDate(undefined);
+      }
+    }, [value]);
+
+    const handleDateSelect = (selectedDate: Date | undefined) => {
+      setDate(selectedDate);
+
+      if (selectedDate) {
+        onChange?.(format(selectedDate, "yyyy-MM-dd"));
+        setOpen(false); // Fecha o popover após seleção
+      } else {
+        onChange?.(undefined);
+      }
+    };
+
+    const displayText = date ? format(date, "dd/MM/yyyy") : placeholder;
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              "flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start",
+              "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              className,
+            )}
+          >
+            <span
+              className={cn(
+                "paragraph-small-medium",
+                date ? "text-gray-950" : "text-gray-500",
+              )}
+            >
+              {displayText}
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200"
+          align="start"
+          sideOffset={8}
+        >
+          <div className="p-3">
+            <Calendar
+              mode="single"
+              selected={date}
+              onSelect={handleDateSelect}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+DatePicker.displayName = "DatePicker";

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

@@ -1,108 +1,108 @@
-"use client";
-
-import { useState, forwardRef, useEffect } from "react";
-import { format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { DateRange } from "react-day-picker";
-import { Calendar } from "./Calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
-import { cn } from "../../../infra/utils/clsx";
-
-// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local
-// Evita bug de timezone onde new Date("2025-08-02") interpreta como UTC
-const isoParaDataLocal = (iso: string): Date => {
-  const [ano, mes, dia] = iso.split("-").map(Number);
-  return new Date(ano, mes - 1, dia);
-};
-
-interface DateRangePickerProps {
-  value?: { from: string; to: string };
-  onChange?: (range: { from: string; to: string } | undefined) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProps>(
-  ({ value, onChange, placeholder = "Selecione o período", className, disabled }, ref) => {
-    const [open, setOpen] = useState(false);
-    const [range, setRange] = useState<DateRange | undefined>(() => {
-      if (value?.from && value?.to) {
-        return {
-          from: isoParaDataLocal(value.from),
-          to: isoParaDataLocal(value.to)
-        };
-      }
-      return undefined;
-    });
-
-    useEffect(() => {
-      if (value?.from && value?.to) {
-        setRange({
-          from: isoParaDataLocal(value.from),
-          to: isoParaDataLocal(value.to)
-        });
-      } else {
-        setRange(undefined);
-      }
-    }, [value]);
-
-    const handleRangeSelect = (newRange: DateRange | undefined) => {
-      setRange(newRange);
-
-      if (newRange?.from && newRange?.to) {
-        onChange?.({
-          from: format(newRange.from, "yyyy-MM-dd"),
-          to: format(newRange.to, "yyyy-MM-dd")
-        });
-      } else {
-        onChange?.(undefined);
-      }
-    };
-
-    const displayText = range?.from && range?.to
-      ? `${format(range.from, "dd/MM/yyyy")} - ${format(range.to, "dd/MM/yyyy")}`
-      : placeholder;
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <button
-            ref={ref}
-            disabled={disabled}
-            className={cn(
-              "flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start",
-              "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              className
-            )}
-          >
-            <CalendarIcon size={20} className="text-gray-400" />
-            <span className={cn(
-              "paragraph-small-medium",
-              range?.from && range?.to ? "text-gray-950" : "text-gray-500"
-            )}>
-              {displayText}
-            </span>
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200"
-          align="start"
-          sideOffset={8}
-        >
-          <div className="p-3">
-            <Calendar
-              mode="range"
-              selected={range}
-              onSelect={handleRangeSelect}
-              numberOfMonths={1}
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  }
-);
-
-DateRangePicker.displayName = "DateRangePicker";
+"use client";
+
+import { useState, forwardRef, useEffect } from "react";
+import { format } from "date-fns";
+import { IconCalendar } from '@tabler/icons-react';
+import { DateRange } from "react-day-picker";
+import { Calendar } from "./Calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
+import { cn } from "../../../infra/utils/clsx";
+
+// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local
+// Evita bug de timezone onde new Date("2025-08-02") interpreta como UTC
+const isoParaDataLocal = (iso: string): Date => {
+  const [ano, mes, dia] = iso.split("-").map(Number);
+  return new Date(ano, mes - 1, dia);
+};
+
+interface DateRangePickerProps {
+  value?: { from: string; to: string };
+  onChange?: (range: { from: string; to: string } | undefined) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProps>(
+  ({ value, onChange, placeholder = "Selecione o período", className, disabled }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [range, setRange] = useState<DateRange | undefined>(() => {
+      if (value?.from && value?.to) {
+        return {
+          from: isoParaDataLocal(value.from),
+          to: isoParaDataLocal(value.to)
+        };
+      }
+      return undefined;
+    });
+
+    useEffect(() => {
+      if (value?.from && value?.to) {
+        setRange({
+          from: isoParaDataLocal(value.from),
+          to: isoParaDataLocal(value.to)
+        });
+      } else {
+        setRange(undefined);
+      }
+    }, [value]);
+
+    const handleRangeSelect = (newRange: DateRange | undefined) => {
+      setRange(newRange);
+
+      if (newRange?.from && newRange?.to) {
+        onChange?.({
+          from: format(newRange.from, "yyyy-MM-dd"),
+          to: format(newRange.to, "yyyy-MM-dd")
+        });
+      } else {
+        onChange?.(undefined);
+      }
+    };
+
+    const displayText = range?.from && range?.to
+      ? `${format(range.from, "dd/MM/yyyy")} - ${format(range.to, "dd/MM/yyyy")}`
+      : placeholder;
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              "flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start",
+              "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              className
+            )}
+          >
+            <IconCalendar size={20} className="text-gray-400" />
+            <span className={cn(
+              "paragraph-small-medium",
+              range?.from && range?.to ? "text-gray-950" : "text-gray-500"
+            )}>
+              {displayText}
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200"
+          align="start"
+          sideOffset={8}
+        >
+          <div className="p-3">
+            <Calendar
+              mode="range"
+              selected={range}
+              onSelect={handleRangeSelect}
+              numberOfMonths={1}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+);
+
+DateRangePicker.displayName = "DateRangePicker";

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

@@ -1,7 +1,8 @@
 'use client';
 
 import { forwardRef, type ComponentPropsWithoutRef } from 'react';
-import { Lock, Eye, EyeOff, type LucideIcon } from 'lucide-react';
+import { IconLock, IconEye, IconEyeOff } from '@tabler/icons-react';
+import type { TablerIcon } from '@tabler/icons-react';
 import { Input } from './Input';
 import { cn } from '../../../infra/utils/clsx';
 
@@ -11,8 +12,8 @@ interface FormFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>
   label?: string;
   optional?: boolean;
   required?: boolean;
-  leftIcon?: LucideIcon;
-  rightIcon?: LucideIcon;
+  leftIcon?: TablerIcon;
+  rightIcon?: TablerIcon;
   rightIconColor?: string;
   hintMessage?: string;
   classnameContainer?: string;
@@ -51,8 +52,8 @@ export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
     const inputType = isPasswordField && showPassword ? 'text' : type;
     const containerHeight = size === 'large' ? 'h-12' : 'h-10';
 
-    const FinalLeftIcon = isPasswordField ? Lock : LeftIcon;
-    const FinalRightIcon = isPasswordField ? (!showPassword ? EyeOff : Eye) : RightIcon;
+    const FinalLeftIcon = isPasswordField ? IconLock : LeftIcon;
+    const FinalRightIcon = isPasswordField ? (!showPassword ? IconEyeOff : IconEye) : RightIcon;
 
     const finalMessage = error && errorMessage ? errorMessage : hintMessage;
     const messageColor = error ? 'text-red-600' : 'text-gray-600';

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

@@ -1,20 +1,20 @@
-'use client';
-
-import * as React from "react"
-import { cn } from "../../../infra/utils/clsx"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "outline-none disabled:opacity-50 disabled:placeholder:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
+'use client';
+
+import * as React from "react"
+import { cn } from "../../../infra/utils/clsx"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "outline-none disabled:opacity-50 disabled:placeholder:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

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 { MinusIcon } from "lucide-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}>
-      <MinusIcon />
-    </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 }