@greatapps/common 1.1.218 → 1.1.221

package/src/components/ui/data-display/Accordion.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import { IconChevronDown } from '@tabler/icons-react'
 import { cn } from "../../../infra/utils/clsx"
 
 function Accordion({
@@ -56,7 +56,7 @@ function AccordionTrigger({
         {...props}
       >
         {children}
-        <ChevronDownIcon className="size-5! text-gray-950 pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200" />
+        <IconChevronDown className="size-5! text-gray-950 pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )

package/src/components/ui/data-display/Pagination.tsx

@@ -2,10 +2,10 @@
 
 import * as React from "react"
 import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react"
+  IconChevronLeft,
+  IconChevronRight,
+  IconDots,
+} from "@tabler/icons-react"
 import { cn } from "../../../infra/utils/clsx"
 import { Button, buttonVariants } from "../buttons/Button"
 
@@ -77,7 +77,7 @@ function PaginationPrevious({
       className={cn("gap-1 size-8 sm:pl-2.5", className)}
       {...props}
     >
-      <ChevronLeftIcon />
+      <IconChevronLeft />
     </PaginationLink>
   )
 }
@@ -93,7 +93,7 @@ function PaginationNext({
       className={cn("gap-1 size-8 sm:pr-2.5", className)}
       {...props}
     >
-      <ChevronRightIcon />
+      <IconChevronRight />
     </PaginationLink>
   )
 }
@@ -109,7 +109,7 @@ function PaginationEllipsis({
       className={cn("flex size-9 items-center justify-center", className)}
       {...props}
     >
-      <MoreHorizontalIcon className="size-4 mt-1.5" />
+      <IconDots className="size-4 mt-1.5" />
       <span className="sr-only">More pages</span>
     </span>
   )

package/src/components/ui/feedback/Toast.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-import { CheckCircle, XCircle, AlertCircle, Info, Circle, X } from "lucide-react"
+import { IconCircleCheck, IconCircleX, IconAlertCircle, IconInfoCircle, IconCircle, IconX } from "@tabler/icons-react"
 import { toast } from "sonner"
 import { cn } from "../../../infra/utils/clsx"
 import { Button } from "../buttons/Button"
@@ -46,11 +46,11 @@ const toastIconContainerVariants = cva(
 )
 
 const TOAST_ICONS = {
-  success: CheckCircle,
-  error: XCircle,
-  warning: AlertCircle,
-  info: Info,
-  default: Circle,
+  success: IconCircleCheck,
+  error: IconCircleX,
+  warning: IconAlertCircle,
+  info: IconInfoCircle,
+  default: IconCircle,
 } as const
 
 interface ToastProps extends VariantProps<typeof toastIconContainerVariants> {
@@ -89,7 +89,7 @@ function Toast({
             className="size-8 rounded-full"
             onClick={() => toastId && toast.dismiss(toastId)}
           >
-            <X size={18} />
+            <IconX size={18} />
           </Button>
         </div>
       )}

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

@@ -5,10 +5,10 @@
 import * as React from "react"
 import { ptBR } from "date-fns/locale"
 import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+} from "@tabler/icons-react"
 import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 import { Button, buttonVariants } from "../buttons/Button"
 import { cn } from "../../../infra/utils/clsx"
@@ -153,13 +153,13 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+              <IconChevronLeft className={cn("size-4", className)} {...props} />
             )
           }
 
           if (orientation === "right") {
             return (
-              <ChevronRightIcon
+              <IconChevronRight
                 className={cn("size-4", className)}
                 {...props}
               />
@@ -167,7 +167,7 @@ function Calendar({
           }
 
           return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+            <IconChevronDown className={cn("size-4", className)} {...props} />
           )
         },
         DayButton: CalendarDayButton,

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { IconCheck } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
 
 function Checkbox({
@@ -22,7 +22,7 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none"
       >
-        <CheckIcon className="size-3 text-current" />
+        <IconCheck className="size-3 text-current" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );

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

@@ -1,154 +1,154 @@
-'use client';
-
-import { useState, useMemo } from 'react';
-import { CheckIcon, ChevronDownIcon, SearchIcon } from 'lucide-react';
-import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
-import { cn } from '../../../infra/utils/clsx';
-
-export type ComboboxOption = {
-  value: string;
-  label: string;
-  displayValue?: string;
-};
-
-interface ComboboxFieldProps {
-  options: ComboboxOption[];
-  label?: string;
-  placeholder?: string;
-  searchPlaceholder?: string;
-  emptyMessage?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  icon?: React.ReactNode;
-  className?: string;
-  containerClassName?: string;
-}
-
-export function ComboboxField({
-  options,
-  label,
-  placeholder = 'Selecione uma opção',
-  searchPlaceholder = 'Buscar...',
-  emptyMessage = 'Nenhuma opção encontrada.',
-  value,
-  onChange,
-  disabled = false,
-  icon,
-  className,
-  containerClassName,
-}: ComboboxFieldProps) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-
-  const selectedOption = useMemo(
-    () => options.find((o) => o.value === value),
-    [options, value]
-  );
-
-  const filteredOptions = useMemo(() => {
-    const q = search.trim().toLowerCase();
-    if (!q) return options;
-    return options.filter((o) => o.label.toLowerCase().includes(q));
-  }, [options, search]);
-
-  const handleSelect = (optionValue: string) => {
-    onChange?.(optionValue);
-    setOpen(false);
-    setSearch('');
-  };
-
-  return (
-    <div className={cn('flex flex-col gap-1.5', containerClassName)}>
-      {label && (
-        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
-          <span className="text-gray-600">{label}</span>
-        </div>
-      )}
-
-      <Popover
-        open={open}
-        onOpenChange={(v) => {
-          if (!disabled) {
-            setOpen(v);
-            if (!v) setSearch('');
-          }
-        }}
-      >
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            disabled={disabled}
-            className={cn(
-              'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',
-              'flex items-center justify-between gap-2 rounded-md border bg-transparent',
-              'border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none',
-              disabled && 'cursor-not-allowed opacity-50',
-              className
-            )}
-          >
-            <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>
-              {selectedOption
-                ? (selectedOption.displayValue ?? selectedOption.label)
-                : placeholder}
-            </span>
-            {icon ?? (
-              <ChevronDownIcon
-                className={cn(
-                  'size-4 opacity-50 shrink-0 transition-all duration-200',
-                  open && 'rotate-180 opacity-100 text-gray-950'
-                )}
-              />
-            )}
-          </button>
-        </PopoverTrigger>
-
-        <PopoverContent
-          className="p-0 overflow-hidden rounded-md border shadow-md"
-          align="start"
-          sideOffset={4}
-          style={{ width: 'var(--radix-popover-trigger-width)' }}
-          onWheel={(e) => e.stopPropagation()}
-        >
-          <div className="flex items-center gap-2 border-b border-gray-100 px-3 h-9">
-            <SearchIcon className="size-4 shrink-0 opacity-50 text-gray-500" />
-            <input
-              autoFocus
-              placeholder={searchPlaceholder}
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
-            />
-          </div>
-
-          <div className="overflow-y-auto max-h-[280px] p-1">
-            {filteredOptions.length === 0 ? (
-              <p className="py-6 text-center paragraph-small-medium text-gray-500">{emptyMessage}</p>
-            ) : (
-              filteredOptions.map((option) => {
-                const isSelected = value === option.value;
-                return (
-                  <div
-                    key={option.value}
-                    className={cn(
-                      'flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none',
-                      'paragraph-small-medium text-gray-950',
-                      'hover:bg-gray-100',
-                      isSelected && 'bg-gray-50'
-                    )}
-                    onClick={() => handleSelect(option.value)}
-                  >
-                    <span className="flex-1 truncate">{option.label}</span>
-                    {isSelected && <CheckIcon className="size-4 shrink-0 text-pages-600" />}
-                  </div>
-                );
-              })
-            )}
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
-
-export default ComboboxField;
+'use client';
+
+import { useState, useMemo } from 'react';
+import { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
+import { cn } from '../../../infra/utils/clsx';
+
+export type ComboboxOption = {
+  value: string;
+  label: string;
+  displayValue?: string;
+};
+
+interface ComboboxFieldProps {
+  options: ComboboxOption[];
+  label?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}
+
+export function ComboboxField({
+  options,
+  label,
+  placeholder = 'Selecione uma opção',
+  searchPlaceholder = 'Buscar...',
+  emptyMessage = 'Nenhuma opção encontrada.',
+  value,
+  onChange,
+  disabled = false,
+  icon,
+  className,
+  containerClassName,
+}: ComboboxFieldProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const selectedOption = useMemo(
+    () => options.find((o) => o.value === value),
+    [options, value]
+  );
+
+  const filteredOptions = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, search]);
+
+  const handleSelect = (optionValue: string) => {
+    onChange?.(optionValue);
+    setOpen(false);
+    setSearch('');
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', containerClassName)}>
+      {label && (
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          <span className="text-gray-600">{label}</span>
+        </div>
+      )}
+
+      <Popover
+        open={open}
+        onOpenChange={(v) => {
+          if (!disabled) {
+            setOpen(v);
+            if (!v) setSearch('');
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',
+              'flex items-center justify-between gap-2 rounded-md border bg-transparent',
+              'border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none',
+              disabled && 'cursor-not-allowed opacity-50',
+              className
+            )}
+          >
+            <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>
+              {selectedOption
+                ? (selectedOption.displayValue ?? selectedOption.label)
+                : placeholder}
+            </span>
+            {icon ?? (
+              <IconChevronDown
+                className={cn(
+                  'size-4 opacity-50 shrink-0 transition-all duration-200',
+                  open && 'rotate-180 opacity-100 text-gray-950'
+                )}
+              />
+            )}
+          </button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="p-0 overflow-hidden rounded-md border shadow-md"
+          align="start"
+          sideOffset={4}
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-2 border-b border-gray-100 px-3 h-9">
+            <IconSearch className="size-4 shrink-0 opacity-50 text-gray-500" />
+            <input
+              autoFocus
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
+            />
+          </div>
+
+          <div className="overflow-y-auto max-h-[280px] p-1">
+            {filteredOptions.length === 0 ? (
+              <p className="py-6 text-center paragraph-small-medium text-gray-500">{emptyMessage}</p>
+            ) : (
+              filteredOptions.map((option) => {
+                const isSelected = value === option.value;
+                return (
+                  <div
+                    key={option.value}
+                    className={cn(
+                      'flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none',
+                      'paragraph-small-medium text-gray-950',
+                      'hover:bg-gray-100',
+                      isSelected && 'bg-gray-50'
+                    )}
+                    onClick={() => handleSelect(option.value)}
+                  >
+                    <span className="flex-1 truncate">{option.label}</span>
+                    {isSelected && <IconCheck className="size-4 shrink-0 text-pages-600" />}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export default ComboboxField;

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

@@ -2,7 +2,7 @@
 
 import { useState, forwardRef, useEffect } from "react";
 import { format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
+import { IconCalendar } from '@tabler/icons-react';
 import { DateRange } from "react-day-picker";
 import { Calendar } from "./Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
@@ -77,7 +77,7 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
               className
             )}
           >
-            <CalendarIcon size={20} className="text-gray-400" />
+            <IconCalendar size={20} className="text-gray-400" />
             <span className={cn(
               "paragraph-small-medium",
               range?.from && range?.to ? "text-gray-950" : "text-gray-500"