chore: snapshot before agency split
This commit is contained in:
@@ -26,7 +26,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
ref
|
||||
) => {
|
||||
const baseStyles =
|
||||
"inline-flex items-center justify-center font-medium rounded-[6px] transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF3A05] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer";
|
||||
"inline-flex items-center justify-center font-medium rounded-[6px] transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer";
|
||||
|
||||
const variants = {
|
||||
primary: "text-white hover:opacity-90 active:opacity-80",
|
||||
|
||||
@@ -29,9 +29,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
type="checkbox"
|
||||
className={`
|
||||
appearance-none w-[18px] h-[18px] border rounded-sm
|
||||
border-[#E5E5E5] dark:border-gray-600 bg-white dark:bg-gray-700
|
||||
checked:border-[#FF3A05]
|
||||
focus:outline-none focus:border-[#FF3A05]
|
||||
border-zinc-200 dark:border-gray-600 bg-white dark:bg-gray-700
|
||||
checked:border-brand-500
|
||||
focus:outline-none focus:border-brand-500
|
||||
transition-colors cursor-pointer
|
||||
${className}
|
||||
`}
|
||||
@@ -48,13 +48,13 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
/>
|
||||
</div>
|
||||
{label && (
|
||||
<span className="text-[14px] text-[#000000] dark:text-white select-none">
|
||||
<span className="text-[14px] text-zinc-900 dark:text-white select-none">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
{error && (
|
||||
<p className="mt-1 text-[13px] text-[#FF3A05] flex items-center gap-1">
|
||||
<p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
|
||||
<i className="ri-error-warning-line" />
|
||||
{error}
|
||||
</p>
|
||||
|
||||
@@ -34,9 +34,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="block text-[13px] font-semibold text-[#000000] dark:text-white mb-2">
|
||||
<label className="block text-[13px] font-semibold text-zinc-900 dark:text-white mb-2">
|
||||
{label}
|
||||
{props.required && <span className="text-[#FF3A05] ml-1">*</span>}
|
||||
{props.required && <span className="text-brand-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
<div className="relative">
|
||||
@@ -51,16 +51,16 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
className={`
|
||||
w-full px-3.5 py-3 text-[14px] font-normal
|
||||
border rounded-md bg-white dark:bg-gray-700 dark:text-white
|
||||
placeholder:text-[#7D7D7D] dark:placeholder:text-gray-400
|
||||
placeholder:text-zinc-500 dark:placeholder:text-gray-400
|
||||
transition-all
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
${isPassword || rightIcon ? "pr-11" : ""}
|
||||
${error
|
||||
? "border-[#FF3A05]"
|
||||
: "border-[#E5E5E5] dark:border-gray-600 focus:border-[#FF3A05]"
|
||||
? "border-red-500 focus:border-red-500"
|
||||
: "border-zinc-200 dark:border-gray-600 focus:border-brand-500"
|
||||
}
|
||||
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
||||
disabled:bg-[#E5E5E5]/30 disabled:cursor-not-allowed
|
||||
disabled:bg-zinc-100 disabled:cursor-not-allowed
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
@@ -69,7 +69,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] hover:text-[#000000] transition-colors cursor-pointer"
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900 transition-colors cursor-pointer"
|
||||
>
|
||||
<i
|
||||
className={`${showPassword ? "ri-eye-off-line" : "ri-eye-line"} text-[20px]`}
|
||||
@@ -80,20 +80,20 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRightIconClick}
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] hover:text-[#000000] transition-colors cursor-pointer"
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900 transition-colors cursor-pointer"
|
||||
>
|
||||
<i className={`${rightIcon} text-[20px]`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{error && (
|
||||
<p className="mt-1 text-[13px] text-[#FF3A05] flex items-center gap-1">
|
||||
<p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
|
||||
<i className="ri-error-warning-line" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{helperText && !error && (
|
||||
<p className="mt-1 text-[13px] text-[#7D7D7D]">{helperText}</p>
|
||||
<p className="mt-1 text-[13px] text-zinc-500">{helperText}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -109,7 +109,7 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
{label && (
|
||||
<label className="block text-[13px] font-semibold text-zinc-900 dark:text-white mb-2">
|
||||
{label}
|
||||
{required && <span className="text-[#FF3A05] ml-1">*</span>}
|
||||
{required && <span className="text-brand-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
@@ -133,8 +133,8 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
pr-11
|
||||
${error
|
||||
? "border-[#FF3A05]"
|
||||
: "border-zinc-200 dark:border-zinc-700 focus:border-[#FF3A05]"
|
||||
? "border-red-500 focus:border-red-500"
|
||||
: "border-zinc-200 dark:border-zinc-700 focus:border-brand-500"
|
||||
}
|
||||
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
||||
${className}
|
||||
@@ -160,7 +160,7 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Buscar..."
|
||||
className="w-full pl-9 pr-3 py-2 text-[14px] border border-zinc-200 dark:border-zinc-700 rounded-md outline-none focus:border-[#FF3A05] shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder:text-zinc-500 dark:placeholder:text-zinc-400"
|
||||
className="w-full pl-9 pr-3 py-2 text-[14px] border border-zinc-200 dark:border-zinc-700 rounded-md outline-none focus:border-brand-500 shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder:text-zinc-500 dark:placeholder:text-zinc-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -176,7 +176,7 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
className={`
|
||||
w-full px-4 py-2.5 text-left text-[14px] transition-colors
|
||||
hover:bg-zinc-100 dark:hover:bg-zinc-700 cursor-pointer
|
||||
${selectedOption?.value === option.value ? 'bg-[#FF3A05]/10 text-[#FF3A05] font-medium' : 'text-zinc-900 dark:text-white'}
|
||||
${selectedOption?.value === option.value ? 'bg-brand-500/10 text-brand-600 font-medium' : 'text-zinc-900 dark:text-white'}
|
||||
`}
|
||||
>
|
||||
{option.label}
|
||||
@@ -196,7 +196,7 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
<p className="mt-1.5 text-[12px] text-zinc-600 dark:text-zinc-400">{helperText}</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="mt-1 text-[13px] text-[#FF3A05] flex items-center gap-1">
|
||||
<p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
|
||||
<i className="ri-error-warning-line" />
|
||||
{error}
|
||||
</p>
|
||||
|
||||
@@ -33,9 +33,9 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="block text-[13px] font-semibold text-[#000000] mb-2">
|
||||
<label className="block text-[13px] font-semibold text-zinc-900 mb-2">
|
||||
{label}
|
||||
{props.required && <span className="text-[#FF3A05] ml-1">*</span>}
|
||||
{props.required && <span className="text-brand-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
<div className="relative">
|
||||
@@ -49,17 +49,17 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
className={`
|
||||
w-full px-3.5 py-3 text-[14px] font-normal
|
||||
border rounded-md bg-white
|
||||
text-[#000000]
|
||||
text-zinc-900
|
||||
transition-all appearance-none
|
||||
cursor-pointer
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
pr-11
|
||||
${error
|
||||
? "border-[#FF3A05]"
|
||||
: "border-[#E5E5E5] focus:border-[#FF3A05]"
|
||||
? "border-red-500 focus:border-red-500"
|
||||
: "border-zinc-200 focus:border-brand-500"
|
||||
}
|
||||
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
||||
disabled:bg-[#F5F5F5] disabled:cursor-not-allowed
|
||||
disabled:bg-zinc-100 disabled:cursor-not-allowed
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
@@ -76,9 +76,9 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
<i className="ri-arrow-down-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none" />
|
||||
</div>
|
||||
{helperText && !error && (
|
||||
<p className="mt-1.5 text-[12px] text-[#7D7D7D]">{helperText}</p>
|
||||
<p className="mt-1.5 text-[12px] text-zinc-500">{helperText}</p>
|
||||
)}
|
||||
{error && <p className="mt-1.5 text-[12px] text-[#FF3A05]">{error}</p>}
|
||||
{error && <p className="mt-1.5 text-[12px] text-red-500">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user