@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
63 lines (62 loc) • 2.07 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Size } from '../variants.js';
export const slider = tv({
slots: {
base: 'relative w-full',
track: 'absolute h-2 w-full rounded-full bg-default-200 cursor-pointer',
range: 'absolute h-full rounded-full bg-primary-500',
thumb: [
'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
'hover:scale-110 transition-transform cursor-pointer'
],
mark: 'absolute text-sm text-default-500 -translate-x-1/2',
label: 'mb-2 block text-sm font-medium text-default-700',
value: 'mt-1 text-sm text-default-500'
},
variants: {
size: {
[Size.SM]: {
track: 'h-1',
thumb: 'w-3 h-3',
mark: 'text-xs top-4',
label: 'text-xs',
value: 'text-xs'
},
[Size.BASE]: {
track: 'h-2',
thumb: 'w-4 h-4',
mark: 'text-sm top-6',
label: 'text-sm',
value: 'text-sm'
},
[Size.LG]: {
track: 'h-3',
thumb: 'w-5 h-5',
mark: 'text-base top-7',
label: 'text-base',
value: 'text-base'
}
},
disabled: {
true: {
base: 'opacity-50 cursor-not-allowed',
thumb: 'cursor-not-allowed hover:scale-100 active:scale-100'
}
},
hasError: {
true: {
track: 'bg-danger-200',
range: 'bg-danger-500',
thumb: 'border-danger-500 focus:ring-danger-500',
label: 'text-danger-600',
value: 'text-danger-600'
}
}
},
defaultVariants: {
size: Size.BASE,
disabled: false,
hasError: false
}
});