input-number
input-number
ts
export default {
slots: {
root: 'relative inline-flex items-center',
base: 'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors',
increment: 'absolute flex items-center',
decrement: 'absolute flex items-center',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
size: {
xs: 'px-2 py-1 text-xs gap-1',
sm: 'px-2.5 py-1.5 text-xs gap-1.5',
md: 'px-2.5 py-1.5 text-sm gap-1.5',
lg: 'px-3 py-2 text-sm gap-2',
xl: 'px-3 py-2 text-base gap-2',
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent',
},
disabled: {
true: {
increment: 'opacity-75 cursor-not-allowed',
decrement: 'opacity-75 cursor-not-allowed',
},
},
orientation: {
horizontal: {
base: 'text-center',
increment: 'inset-y-0 end-0 pe-1',
decrement: 'inset-y-0 start-0 ps-1',
},
vertical: {
increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80',
},
},
highlight: {
true: '',
},
},
compoundVariants: [
{
color: 'primary' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary',
} as const,
{
color: 'secondary' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
},
{
color: 'secondary',
highlight: true,
class: 'ring ring-inset ring-secondary',
} as const,
{
color: 'success' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
},
{
color: 'success',
highlight: true,
class: 'ring ring-inset ring-success',
} as const,
{
color: 'info' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
},
{
color: 'info',
highlight: true,
class: 'ring ring-inset ring-info',
} as const,
{
color: 'warning' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
},
{
color: 'warning',
highlight: true,
class: 'ring ring-inset ring-warning',
} as const,
{
color: 'error' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
},
{
color: 'error',
highlight: true,
class: 'ring ring-inset ring-error',
} as const,
{
color: 'neutral' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted',
} as const,
{
orientation: 'horizontal',
size: 'xs',
class: 'px-7',
} as const,
{
orientation: 'horizontal',
size: 'sm',
class: 'px-8',
} as const,
{
orientation: 'horizontal',
size: 'md',
class: 'px-9',
} as const,
{
orientation: 'horizontal',
size: 'lg',
class: 'px-10',
} as const,
{
orientation: 'horizontal',
size: 'xl',
class: 'px-11',
} as const,
{
orientation: 'vertical',
size: 'xs',
class: 'pe-7',
} as const,
{
orientation: 'vertical',
size: 'sm',
class: 'pe-8',
} as const,
{
orientation: 'vertical',
size: 'md',
class: 'pe-9',
} as const,
{
orientation: 'vertical',
size: 'lg',
class: 'pe-10',
} as const,
{
orientation: 'vertical',
size: 'xl',
class: 'pe-11',
} as const,
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline',
} as const,
}ts
export default {
slots: {
root: 'relative inline-flex items-center',
base: 'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors',
increment: 'absolute flex items-center',
decrement: 'absolute flex items-center',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
size: {
xs: 'px-2 py-1 text-xs gap-1',
sm: 'px-2.5 py-1.5 text-xs gap-1.5',
md: 'px-2.5 py-1.5 text-sm gap-1.5',
lg: 'px-3 py-2 text-sm gap-2',
xl: 'px-3 py-2 text-base gap-2',
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent',
},
disabled: {
true: {
increment: 'opacity-75 cursor-not-allowed',
decrement: 'opacity-75 cursor-not-allowed',
},
},
orientation: {
horizontal: {
base: 'text-center',
increment: 'inset-y-0 end-0 pe-1',
decrement: 'inset-y-0 start-0 ps-1',
},
vertical: {
increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80',
},
},
highlight: {
true: '',
},
},
compoundVariants: [
{
color: 'primary' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary',
} as const,
{
color: 'secondary' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
},
{
color: 'secondary',
highlight: true,
class: 'ring ring-inset ring-secondary',
} as const,
{
color: 'success' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
},
{
color: 'success',
highlight: true,
class: 'ring ring-inset ring-success',
} as const,
{
color: 'info' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
},
{
color: 'info',
highlight: true,
class: 'ring ring-inset ring-info',
} as const,
{
color: 'warning' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
},
{
color: 'warning',
highlight: true,
class: 'ring ring-inset ring-warning',
} as const,
{
color: 'error' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
},
{
color: 'error',
highlight: true,
class: 'ring ring-inset ring-error',
} as const,
{
color: 'neutral' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted',
} as const,
{
orientation: 'horizontal',
size: 'xs',
class: 'px-7',
} as const,
{
orientation: 'horizontal',
size: 'sm',
class: 'px-8',
} as const,
{
orientation: 'horizontal',
size: 'md',
class: 'px-9',
} as const,
{
orientation: 'horizontal',
size: 'lg',
class: 'px-10',
} as const,
{
orientation: 'horizontal',
size: 'xl',
class: 'px-11',
} as const,
{
orientation: 'vertical',
size: 'xs',
class: 'pe-7',
} as const,
{
orientation: 'vertical',
size: 'sm',
class: 'pe-8',
} as const,
{
orientation: 'vertical',
size: 'md',
class: 'pe-9',
} as const,
{
orientation: 'vertical',
size: 'lg',
class: 'pe-10',
} as const,
{
orientation: 'vertical',
size: 'xl',
class: 'pe-11',
} as const,
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline',
} as const,
}