packages/ui: transition fixes

This commit is contained in:
vchikalkin 2023-11-09 23:38:49 +03:00
parent cda13faf9c
commit d5876d8e73
3 changed files with 15 additions and 12 deletions

View File

@ -4,17 +4,20 @@ import { cva } from 'class-variance-authority';
import type { ButtonHTMLAttributes } from 'react';
import { forwardRef } from 'react';
const variants = cva('rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white', {
defaultVariants: {
color: 'default',
},
variants: {
color: {
danger: 'bg-danger hover:bg-danger-700',
default: 'bg-primary hover:bg-primary-700',
const variants = cva(
'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
{
defaultVariants: {
color: 'default',
},
},
});
variants: {
color: {
danger: 'bg-danger hover:bg-danger-700',
default: 'bg-primary hover:bg-primary-700',
},
},
}
);
export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof variants>;

View File

@ -26,7 +26,7 @@ const Label = forwardRef<HTMLLabelElement, LabelProps>(
);
const variants = cva(
'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
);
export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &

View File

@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
import { forwardRef } from 'react';
const variants = cva(
'[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none focus:ring-0 hover:border-primary-500 focus:border-primary-500 block w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 h-9 p-2 px-3 text-sm text-gray-900 outline-none transition-all ease-in-out hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
'[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none focus:ring-0 hover:border-primary-500 focus:border-primary-500 block w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 h-9 p-2 px-3 text-sm text-gray-900 outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
);
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &