@greatapps/common 1.0.0

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

@@ -0,0 +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";

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

@@ -0,0 +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";

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

@@ -0,0 +1,18 @@
+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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

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

@@ -0,0 +1,78 @@
+"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 }

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

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+import { cn } from "../../../infra/utils/clsx"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-gray-300 text-gray-950 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

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

@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { cn } from "../../../infra/utils/clsx"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "group/data-select border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
+        className
+      )}
+      {...props}
+    >
+      {children}
+
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon
+          className="
+          size-4 opacity-50 transition-all duration-200
+          group-data-[state=open]/data-select:rotate-180
+          group-data-[state=open]/data-select:opacity-100
+          group-data-[state=open]/data-select:text-gray-950!
+        "
+        />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[1001] max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-pointer",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText className="cursor-pointer">{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

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

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cn } from "../../../infra/utils/clsx"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 cursor-pointer dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

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

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "../../../infra/utils/clsx"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }