@greatapps/common 1.1.215 → 1.1.217

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

@@ -1,31 +1,31 @@
-"use client";
-
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
-import { cn } from "../../../infra/utils/clsx";
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4.5 shrink-0 rounded-[4px] border-[1.6px] shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 hover:border-gray-950 cursor-pointer",
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
-      >
-        <CheckIcon className="size-3 text-current" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "../../../infra/utils/clsx";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4.5 shrink-0 rounded-[4px] border-[1.6px] shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 hover:border-gray-950 cursor-pointer",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3 text-current" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

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 { 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";

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 }