@greatapps/common 1.1.218 → 1.1.221

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

@@ -1,130 +1,131 @@
-'use client';
-
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
-import { Lock, Eye, EyeOff, type LucideIcon } from 'lucide-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?: LucideIcon;
-  rightIcon?: LucideIcon;
-  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 ? Lock : LeftIcon;
-    const FinalRightIcon = isPasswordField ? (!showPassword ? EyeOff : Eye) : 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'
-              : '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'
+              : '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/InputOtp.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import { IconMinus } from '@tabler/icons-react'
 import { cn } from "../../../infra/utils/clsx"
 
 function InputOTP({
@@ -72,7 +72,7 @@ function InputOTPSlot({
 function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
   return (
     <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
+      <IconMinus />
     </div>
   )
 }

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

@@ -4,7 +4,7 @@
 
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import { IconCircle } from '@tabler/icons-react'
 import { cn } from "../../../infra/utils/clsx"
 
 const RadioGroup = React.forwardRef<
@@ -35,7 +35,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        <IconCircle className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
 
 function Select({
@@ -47,7 +47,7 @@ function SelectTrigger({
 
       <SelectPrimitive.Icon asChild>
         {icon ?? (
-          <ChevronDownIcon
+          <IconChevronDown
             className="
             size-4 opacity-50 transition-all duration-200
             group-data-[state=open]/data-select:rotate-180
@@ -127,7 +127,7 @@ function SelectItem({
     >
       <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <IconCheck className="size-4" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText className="cursor-pointer">
@@ -163,7 +163,7 @@ function SelectScrollUpButton({
       )}
       {...props}
     >
-      <ChevronUpIcon className="size-4" />
+      <IconChevronUp className="size-4" />
     </SelectPrimitive.ScrollUpButton>
   );
 }
@@ -181,7 +181,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <ChevronDownIcon className="size-4" />
+      <IconChevronDown className="size-4" />
     </SelectPrimitive.ScrollDownButton>
   );
 }

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

@@ -1,8 +1,8 @@
-import { LucideIcon } from 'lucide-react';
+import type { TablerIcon } from '@tabler/icons-react';
 import { Switch } from './Switch';
 
 type SwitchOptionFieldWithIconProps = {
-  icon: LucideIcon;
+  icon: TablerIcon;
   label: string;
   description: string;
   checked: boolean;

package/src/components/ui/overlay/Command.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react";
+import { IconSearch } from '@tabler/icons-react';
 import {
   Dialog,
   DialogContent,
@@ -70,7 +70,7 @@ function CommandInput({
       data-slot="command-input-wrapper"
       className="flex h-9 items-center gap-2 border-b px-3"
     >
-      <SearchIcon className="size-5 shrink-0 opacity-50" />
+      <IconSearch className="size-5 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(

package/src/components/ui/overlay/Dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
+import { IconX } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
 
 function Dialog({
@@ -74,7 +74,7 @@ function DialogContent({
                 data-slot="dialog-close"
                 className="hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
               >
-                <XIcon className="size-[18px]" />
+                <IconX className="size-[18px]" />
                 <span className="sr-only">Close</span>
               </DialogPrimitive.Close>
             </div>

package/src/components/ui/overlay/Sheet.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
+import { IconX } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
 import { hideCrisp, showCrisp } from "../../embeds/CrispEmbed";
 
@@ -99,7 +99,7 @@ function SheetContent({
             data-slot="sheet-close"
             className="absolute top-3 right-3 hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
           >
-            <XIcon className="size-[18px]" />
+            <IconX className="size-[18px]" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}

package/src/components/widgets/notifications/NotificationCard.tsx

@@ -1,68 +1,68 @@
-import { Clock } from 'lucide-react';
-import { ReactNode } from 'react';
-import { cn } from '../../../infra/utils/clsx';
-
-type NotificationCardProps = {
-  icon: ReactNode;
-  iconBgColor?: string;
-  title: string;
-  description?: string;
-  time: string;
-  actions?: ReactNode;
-  isUnread?: boolean;
-  showBorder?: boolean;
-  className?: string;
-  gapPx: number;
-};
-
-export default function NotificationCard({
-  icon,
-  iconBgColor,
-  title,
-  description,
-  time,
-  actions,
-  isUnread = false,
-  showBorder = true,
-  className,
-  gapPx = 16
-}: NotificationCardProps) {
-  return (
-    <div
-      className={cn(
-        'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',
-        showBorder && 'border-b border-gray-200',
-        className
-      )}
-    >
-      <div
-        className={cn(
-          'flex items-center justify-center size-10 rounded-full shrink-0',
-          iconBgColor
-        )}
-      >
-        {icon}
-      </div>
-
-      <div className="flex flex-col flex-1" style={{ gap: `${gapPx}px` }}>
-        <div className="flex flex-col gap-1">
-          <span className="paragraph-small-semibold text-gray-950">{title}</span>
-          {description && (
-            <span className="paragraph-small-regular text-gray-600">{description}</span>
-          )}
-        </div>
-
-        <div className="flex items-center gap-1.5">
-          <Clock size={14} className="text-gray-400" />
-          <span className="paragraph-xsmall-medium text-gray-600">{time}</span>
-        </div>
-
-        {actions && <div className="flex items-center gap-2">{actions}</div>}
-      </div>
-
-      {isUnread && <div className="size-2 bg-pages-400 rounded-full shrink-0 mt-1" />}
-    </div>
-  );
-}
-
-export type { NotificationCardProps };
+import { IconClock } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import { cn } from '../../../infra/utils/clsx';
+
+type NotificationCardProps = {
+  icon: ReactNode;
+  iconBgColor?: string;
+  title: string;
+  description?: string;
+  time: string;
+  actions?: ReactNode;
+  isUnread?: boolean;
+  showBorder?: boolean;
+  className?: string;
+  gapPx: number;
+};
+
+export default function NotificationCard({
+  icon,
+  iconBgColor,
+  title,
+  description,
+  time,
+  actions,
+  isUnread = false,
+  showBorder = true,
+  className,
+  gapPx = 16
+}: NotificationCardProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',
+        showBorder && 'border-b border-gray-200',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center justify-center size-10 rounded-full shrink-0',
+          iconBgColor
+        )}
+      >
+        {icon}
+      </div>
+
+      <div className="flex flex-col flex-1" style={{ gap: `${gapPx}px` }}>
+        <div className="flex flex-col gap-1">
+          <span className="paragraph-small-semibold text-gray-950">{title}</span>
+          {description && (
+            <span className="paragraph-small-regular text-gray-600">{description}</span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <IconClock size={14} className="text-gray-400" />
+          <span className="paragraph-xsmall-medium text-gray-600">{time}</span>
+        </div>
+
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+
+      {isUnread && <div className="size-2 bg-pages-400 rounded-full shrink-0 mt-1" />}
+    </div>
+  );
+}
+
+export type { NotificationCardProps };