vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added @primevue/tailwindcss-presets package

Browse source
This commit is contained in:
Mert Sincan 2024-06-28 10:02:59 +01:00
parent 8f1952d1f0
commit c491181d8d
188 changed files with 26790 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

103
packages/tailwindcss-presets/src/aura/radiobutton/index.js Normal file
View file

@ -0,0 +1,103 @@
export default {
root: {
class: [
'relative',
// Flexbox & Alignment
'inline-flex',
'align-bottom',
// Size
'w-5 h-5',
// Misc
'cursor-pointer',
'select-none'
]
},
box: ({ props }) => ({
class: [
// Flexbox
'flex justify-center items-center',
// Size
'w-5 h-5',
// Shape
'border',
'rounded-full',
// Transition
'transition duration-200 ease-in-out',
// Colors
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
{
'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
'border-primary': props.value == props.modelValue && props.value !== undefined && !props.disabled
},
// Invalid State
{ 'border-red-500 dark:border-red-400': props.invalid },
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-400': !props.disabled && !props.invalid && props.value !== props.modelValue,
'peer-hover:border-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined,
'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300': !props.disabled && props.value == props.modelValue && props.value !== undefined,
'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
input: {
class: [
'peer',
// Size
'w-full ',
'h-full',
// Position
'absolute',
'top-0 left-0',
'z-10',
// Spacing
'p-0',
'm-0',
// Shape
'opacity-0',
'rounded-md',
'outline-none',
'border-1 border-surface-200 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: ({ props }) => ({
class: [
'block',
// Shape
'rounded-full',
// Size
'w-3 h-3',
// Conditions
{
'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue,
'bg-primary': props.value == props.modelValue,
'backface-hidden invisible scale-[0.1]': props.value !== props.modelValue,
'transform visible translate-z-0 scale-[1,1]': props.value == props.modelValue
},
// Transition
'transition duration-200'
]
})
};