@greatapps/common 1.1.516 → 1.1.517

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 { 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";
+"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,133 +1,133 @@
-'use client';
-
-import { forwardRef, type ComponentPropsWithoutRef } from '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';
-
-type FormFieldSize = 'default' | 'large';
-
-interface FormFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
-  label?: string;
-  optional?: boolean;
-  required?: boolean;
-  leftIcon?: TablerIcon;
-  rightIcon?: TablerIcon;
-  rightIconColor?: string;
-  hintMessage?: string;
-  classnameContainer?: string;
-  size?: FormFieldSize;
-  error?: boolean;
-  errorMessage?: string;
-  showCharCount?: boolean;
-  showPassword?: boolean;
-  onTogglePassword?: () => void;
-}
-
-export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
-  (
-    {
-      label,
-      optional = false,
-      required = false,
-      leftIcon: LeftIcon,
-      rightIcon: RightIcon,
-      rightIconColor = 'var(--color-gray-400)',
-      hintMessage,
-      size = 'default',
-      type = 'text',
-      error = false,
-      errorMessage,
-      className,
-      classnameContainer,
-      showCharCount = false,
-      showPassword = false,
-      onTogglePassword,
-      ...inputProps
-    },
-    ref
-  ) => {
-    const isPasswordField = type === 'password';
-    const inputType = isPasswordField && showPassword ? 'text' : type;
-    const containerHeight = size === 'large' ? 'h-12' : 'h-10';
-
-    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';
-
-    const currentLength = typeof inputProps.value === 'string' ? inputProps.value.length : 0;
-    const shouldShowCharCount = showCharCount && inputProps.maxLength;
-
-    return (
-      <div className="flex flex-col gap-1.5 w-full">
-        <div className="flex items-center gap-1 paragraph-xsmall-semibold truncate">
-          {label && <span className="text-gray-600">{label}</span>}
-          {optional && <span className="text-gray-500">(Opcional)</span>}
-          {required && <span className="text-red-600">*</span>}
-        </div>
-
-        <div
-          className={cn(
-            'flex gap-2 px-4 items-center border rounded-lg transition-color',
-            containerHeight,
-            classnameContainer,
-            error
-              ? 'border-red-600 hover:border-red-700'
-              : inputProps.disabled
-                ? 'border-transparent'
-                : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950'
-          )}
-        >
-          {FinalLeftIcon && <FinalLeftIcon size={20} className="text-gray-400" />}
-
-          <Input
-            ref={ref}
-            type={inputType}
-            className={cn(
-              'paragraph-small-medium w-full h-full text-gray-950',
-              error && 'placeholder:text-red-400',
-              className
-            )}
-            {...inputProps}
-          />
-
-          {FinalRightIcon && (
-            <button
-              type="button"
-              onClick={isPasswordField ? onTogglePassword : undefined}
-              className={cn(
-                'flex items-center justify-center',
-                isPasswordField && 'cursor-pointer hover:opacity-70 transition-opacity'
-              )}
-              aria-label={
-                isPasswordField ? (showPassword ? 'Ocultar senha' : 'Mostrar senha') : undefined
-              }
-            >
-              <FinalRightIcon
-                size={20}
-                color={isPasswordField ? 'var(--color-gray-950)' : rightIconColor}
-              />
-            </button>
-          )}
-        </div>
-
-        {finalMessage && (
-          <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>
-        )}
-
-        {shouldShowCharCount && (
-          <span className="paragraph-xsmall-medium text-gray-600">
-            {currentLength}/{inputProps.maxLength}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-
-FormField.displayName = 'FormField';
-
-export default FormField;
+'use client';
+
+import { forwardRef, type ComponentPropsWithoutRef } from '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';
+
+type FormFieldSize = 'default' | 'large';
+
+interface FormFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+  label?: string;
+  optional?: boolean;
+  required?: boolean;
+  leftIcon?: TablerIcon;
+  rightIcon?: TablerIcon;
+  rightIconColor?: string;
+  hintMessage?: string;
+  classnameContainer?: string;
+  size?: FormFieldSize;
+  error?: boolean;
+  errorMessage?: string;
+  showCharCount?: boolean;
+  showPassword?: boolean;
+  onTogglePassword?: () => void;
+}
+
+export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
+  (
+    {
+      label,
+      optional = false,
+      required = false,
+      leftIcon: LeftIcon,
+      rightIcon: RightIcon,
+      rightIconColor = 'var(--color-gray-400)',
+      hintMessage,
+      size = 'default',
+      type = 'text',
+      error = false,
+      errorMessage,
+      className,
+      classnameContainer,
+      showCharCount = false,
+      showPassword = false,
+      onTogglePassword,
+      ...inputProps
+    },
+    ref
+  ) => {
+    const isPasswordField = type === 'password';
+    const inputType = isPasswordField && showPassword ? 'text' : type;
+    const containerHeight = size === 'large' ? 'h-12' : 'h-10';
+
+    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';
+
+    const currentLength = typeof inputProps.value === 'string' ? inputProps.value.length : 0;
+    const shouldShowCharCount = showCharCount && inputProps.maxLength;
+
+    return (
+      <div className="flex flex-col gap-1.5 w-full">
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold truncate">
+          {label && <span className="text-gray-600">{label}</span>}
+          {optional && <span className="text-gray-500">(Opcional)</span>}
+          {required && <span className="text-red-600">*</span>}
+        </div>
+
+        <div
+          className={cn(
+            'flex gap-2 px-4 items-center border rounded-lg transition-color',
+            containerHeight,
+            classnameContainer,
+            error
+              ? 'border-red-600 hover:border-red-700'
+              : inputProps.disabled
+                ? 'border-transparent'
+                : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950'
+          )}
+        >
+          {FinalLeftIcon && <FinalLeftIcon size={20} className="text-gray-400" />}
+
+          <Input
+            ref={ref}
+            type={inputType}
+            className={cn(
+              'paragraph-small-medium w-full h-full text-gray-950',
+              error && 'placeholder:text-red-400',
+              className
+            )}
+            {...inputProps}
+          />
+
+          {FinalRightIcon && (
+            <button
+              type="button"
+              onClick={isPasswordField ? onTogglePassword : undefined}
+              className={cn(
+                'flex items-center justify-center',
+                isPasswordField && 'cursor-pointer hover:opacity-70 transition-opacity'
+              )}
+              aria-label={
+                isPasswordField ? (showPassword ? 'Ocultar senha' : 'Mostrar senha') : undefined
+              }
+            >
+              <FinalRightIcon
+                size={20}
+                color={isPasswordField ? 'var(--color-gray-950)' : rightIconColor}
+              />
+            </button>
+          )}
+        </div>
+
+        {finalMessage && (
+          <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>
+        )}
+
+        {shouldShowCharCount && (
+          <span className="paragraph-xsmall-medium text-gray-600">
+            {currentLength}/{inputProps.maxLength}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+FormField.displayName = 'FormField';
+
+export default FormField;

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 }