diff --git a/presets/aura/badgedirective/index.js b/presets/aura/badgedirective/index.js index 4c25273d..e906b2ff 100644 --- a/presets/aura/badgedirective/index.js +++ b/presets/aura/badgedirective/index.js @@ -1,43 +1,43 @@ -export default { - root: ({ context }) => ({ - class: [ - // Font - 'font-bold font-sans', - 'text-xs leading-5', - - // Alignment - 'flex items-center justify-center', - 'text-center', - - // Position - 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right', - - // Size - 'm-0', - { - 'p-0': context.nogutter || context.dot, - 'px-2': !context.nogutter && !context.dot, - 'min-w-[0.5rem] w-2 h-2': context.dot, - 'min-w-[1.5rem] h-6': !context.dot - }, - - // Shape - { - 'rounded-full': context.nogutter || context.dot, - 'rounded-[10px]': !context.nogutter && !context.dot - }, - - // Color - 'text-white dark:text-surface-900', - { - 'bg-primary-500 dark:bg-primary-400': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary, - 'bg-surface-500 dark:bg-surface-400': context.secondary, - 'bg-green-500 dark:bg-green-400': context.success, - 'bg-blue-500 dark:bg-blue-400': context.info, - 'bg-orange-500 dark:bg-orange-400': context.warning, - 'bg-purple-500 dark:bg-purple-400': context.help, - 'bg-red-500 dark:bg-red-400': context.danger - } - ] - }) -}; +export default { + root: ({ context }) => ({ + class: [ + // Font + 'font-bold', + 'text-xs leading-5', + + // Alignment + 'flex items-center justify-center', + 'text-center', + + // Position + 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right', + + // Size + 'm-0', + { + 'p-0': context.nogutter || context.dot, + 'px-2': !context.nogutter && !context.dot, + 'min-w-[0.5rem] w-2 h-2': context.dot, + 'min-w-[1.5rem] h-6': !context.dot + }, + + // Shape + { + 'rounded-full': context.nogutter || context.dot, + 'rounded-[10px]': !context.nogutter && !context.dot + }, + + // Color + 'text-white dark:text-surface-900', + { + 'bg-primary-500 dark:bg-primary-400': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary, + 'bg-surface-500 dark:bg-surface-400': context.secondary, + 'bg-green-500 dark:bg-green-400': context.success, + 'bg-blue-500 dark:bg-blue-400': context.info, + 'bg-orange-500 dark:bg-orange-400': context.warning, + 'bg-purple-500 dark:bg-purple-400': context.help, + 'bg-red-500 dark:bg-red-400': context.danger + } + ] + }) +}; diff --git a/presets/aura/colorpicker/index.js b/presets/aura/colorpicker/index.js index f2aeb399..1ca55c5d 100644 --- a/presets/aura/colorpicker/index.js +++ b/presets/aura/colorpicker/index.js @@ -1,126 +1,126 @@ -export default { - root: ({ props }) => ({ - class: [ - // Display - 'inline-block', - - // Misc - { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } - ] - }), - input: { - class: [ - // Font - 'font-sans text-base ', - - // Spacing - 'm-0', - 'p-0', - - //Size - 'w-6 h-6', - - // Shape - 'rounded-md', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // States - 'hover:border-surface-400 dark:hover:border-surface-600', - 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10', - - // Transition - 'transition-colors duration-200', - - // Misc - 'cursor-pointer' - ] - }, - panel: ({ props }) => ({ - class: [ - // Position & Size - { - 'relative h-[166px] w-[193px]': props.inline, - 'absolute h-[166px] w-[193px]': !props.inline - }, - - // Shape - 'shadow-md border', - - // Colors - 'bg-surface-800 dark:bg-surface-900 border-surface-600 dark:border-surface-700' - ] - }), - selector: { - class: [ - // Position - 'absolute top-[8px] left-[8px]', - - // Size - 'h-[150px] w-[150px]' - ] - }, - color: { - class: [ - // Size - 'h-[150px] w-[150px]' - ], - style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' - }, - colorhandle: { - class: [ - 'absolute', - - // Shape - 'rounded-full border border-solid', - - // Size - 'h-[10px] w-[10px]', - - // Spacing - '-ml-[5px] -mt-[5px]', - - // Colors - 'border-white', - - // Misc - 'cursor-pointer opacity-85' - ] - }, - hue: { - class: [ - // Position - 'absolute top-[8px] left-[167px]', - - // Size - 'h-[150px] w-[17px]', - - // Opacity - 'opacity-85' - ], - style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' - }, - huehandle: { - class: [ - // Position - 'absolute left-0 -ml-[2px] -mt-[5px]', - - // Size - 'h-[10px] w-[21px]', - - // Shape - 'border-solid border-2', - - // Misc - 'cursor-pointer opacity-85' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props }) => ({ + class: [ + // Display + 'inline-block', + + // Misc + { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } + ] + }), + input: { + class: [ + // Font + 'text-base leading-none', + + // Spacing + 'm-0', + 'p-0', + + //Size + 'w-6 h-6', + + // Shape + 'rounded-md', + + // Colors + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-700', + + // States + 'hover:border-surface-400 dark:hover:border-surface-600', + 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10', + + // Transition + 'transition-colors duration-200', + + // Misc + 'cursor-pointer' + ] + }, + panel: ({ props }) => ({ + class: [ + // Position & Size + { + 'relative h-[166px] w-[193px]': props.inline, + 'absolute h-[166px] w-[193px]': !props.inline + }, + + // Shape + 'shadow-md border', + + // Colors + 'bg-surface-800 dark:bg-surface-900 border-surface-600 dark:border-surface-700' + ] + }), + selector: { + class: [ + // Position + 'absolute top-[8px] left-[8px]', + + // Size + 'h-[150px] w-[150px]' + ] + }, + color: { + class: [ + // Size + 'h-[150px] w-[150px]' + ], + style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' + }, + colorhandle: { + class: [ + 'absolute', + + // Shape + 'rounded-full border border-solid', + + // Size + 'h-[10px] w-[10px]', + + // Spacing + '-ml-[5px] -mt-[5px]', + + // Colors + 'border-white', + + // Misc + 'cursor-pointer opacity-85' + ] + }, + hue: { + class: [ + // Position + 'absolute top-[8px] left-[167px]', + + // Size + 'h-[150px] w-[17px]', + + // Opacity + 'opacity-85' + ], + style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' + }, + huehandle: { + class: [ + // Position + 'absolute left-0 -ml-[2px] -mt-[5px]', + + // Size + 'h-[10px] w-[21px]', + + // Shape + 'border-solid border-2', + + // Misc + 'cursor-pointer opacity-85' + ] + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/aura/paginator/index.js b/presets/aura/paginator/index.js index dd5ec486..61bbfe3d 100644 --- a/presets/aura/paginator/index.js +++ b/presets/aura/paginator/index.js @@ -205,8 +205,7 @@ export default { input: { class: [ //Font - 'font-sans', - 'leading-5', + 'leading-[normal]', // Display 'block', @@ -332,7 +331,6 @@ export default { 'relative', //Font - 'font-sans', 'leading-none', // Display @@ -405,8 +403,7 @@ export default { input: { class: [ //Font - 'font-sans', - 'leading-5', + 'leading-[normal]', // Display 'block', diff --git a/presets/lara/autocomplete/index.js b/presets/lara/autocomplete/index.js index d45e7f24..6b8d474d 100644 --- a/presets/lara/autocomplete/index.js +++ b/presets/lara/autocomplete/index.js @@ -1,259 +1,259 @@ -export default { - root: ({ props }) => ({ - class: [ - 'relative', - - // Flex - 'inline-flex', - - // Size - { 'w-full': props.multiple }, - - // Color - 'text-surface-900 dark:text-surface-0', - - //States - { - 'opacity-60 select-none pointer-events-none cursor-default': props.disabled - } - ] - }), - container: ({ props, state }) => ({ - class: [ - // Font - 'font-sans text-base leading-none', - - // Flex - 'flex items-center flex-wrap', - 'gap-2', - - // Spacing - 'm-0 list-none', - 'px-3 py-1.5', - - // Size - 'w-full', - 'min-h-[2.877rem]', - - // Shape - 'appearance-none rounded-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { 'hover:border-primary-500 dark:hover:border-primary-400': !props.invalid }, - 'focus:outline-none focus:outline-offset-0', - { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered }, - // Transition - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-text overflow-hidden' - ] - }), - inputtoken: { - class: ['py-1.5 px-0', 'inline-flex flex-auto'] - }, - input: ({ props }) => ({ - class: [ - // Font - 'font-sans text-base leading-none', - - // Shape - 'appearance-none rounded-md', - { 'rounded-tr-none rounded-br-none': props.dropdown }, - { 'outline-none shadow-none rounded-none': props.multiple }, - - // Size - { 'w-full': props.multiple }, - - // Spacing - 'm-0', - { 'p-3': !props.multiple, 'p-0': props.multiple }, - - // Colors - 'text-surface-700 dark:text-white/80', - 'border', - { - 'bg-surface-0 dark:bg-surface-900': !props.multiple, - ' border-surface-300 dark:border-surface-700': !props.multiple && !props.invalid, - 'border-0 bg-transparent': props.multiple - }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !props.multiple }, - - // Transition - 'transition-colors duration-200' - ] - }), - token: { - class: [ - // Flex - 'inline-flex items-center', - - // Spacings - 'py-1.5 px-3', - - // Shape - 'rounded-[1.14rem]', - - // Colors - 'bg-surface-200 dark:bg-surface-700', - 'text-surface-700 dark:text-white/70', - - // Misc - 'cursor-default' - ] - }, - label: { - class: 'leading-5' - }, - removeTokenIcon: { - class: [ - // Shape - 'rounded-md leading-6', - - // Spacing - 'ml-2', - - // Size - 'w-4 h-4', - - // Transition - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer' - ] - }, - dropdownbutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom', - - // Shape - 'rounded-r-md', - - // Size - 'px-4 py-3 leading-none', - - // Colors - 'text-white dark:text-surface-900', - 'bg-primary-500 dark:bg-primary-400', - 'border border-primary-500 dark:border-primary-400', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50' - ] - } - }, - loadingicon: { - class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin'] - }, - panel: { - class: [ - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-white/80', - - // Shape - 'border-0', - 'rounded-md', - 'shadow-md', - - // Size - 'max-h-[200px] overflow-auto' - ] - }, - list: { - class: 'py-3 px-0 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - 'relative', - - // Font - 'font-normal text-base leading-none', - - // Spacing - 'm-0 px-5 py-3', - - // Shape - 'border-0 rounded-none', - - // Colors - { - 'text-surface-700 dark:text-white/80': !context.focused && !context.selected, - 'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected, - 'text-surface-700 dark:text-white/80': context.focused && !context.selected, - - 'text-primary-700 dark:text-white/80': context.focused && context.selected, - 'bg-primary-100 dark:bg-primary-400': context.focused && context.selected, - 'text-primary-700 dark:text-white/80': !context.focused && context.selected, - 'bg-primary-50 dark:bg-primary-300': !context.focused && context.selected - }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transition - 'transition-shadow duration-200', - - // Misc - 'cursor-pointer overflow-hidden whitespace-nowrap' - ] - }), - itemgroup: { - class: [ - 'font-bold', - - // Spacing - 'm-0 p-3', - - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'text-surface-800 dark:text-white/80', - - // Misc - 'cursor-auto' - ] - }, - emptymessage: { - class: [ - // Font - 'leading-none', - - // Spacing - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-transparent' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props }) => ({ + class: [ + 'relative', + + // Flex + 'inline-flex', + + // Size + { 'w-full': props.multiple }, + + // Color + 'text-surface-900 dark:text-surface-0', + + //States + { + 'opacity-60 select-none pointer-events-none cursor-default': props.disabled + } + ] + }), + container: ({ props, state }) => ({ + class: [ + // Font + 'text-base leading-none', + + // Flex + 'flex items-center flex-wrap', + 'gap-2', + + // Spacing + 'm-0 list-none', + 'px-3 py-1.5', + + // Size + 'w-full', + 'min-h-[2.877rem]', + + // Shape + 'appearance-none rounded-md', + + // Color + 'text-surface-700 dark:text-white/80', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { 'hover:border-primary-500 dark:hover:border-primary-400': !props.invalid }, + 'focus:outline-none focus:outline-offset-0', + { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered }, + // Transition + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-text overflow-hidden' + ] + }), + inputtoken: { + class: ['py-1.5 px-0', 'inline-flex flex-auto'] + }, + input: ({ props }) => ({ + class: [ + // Font + 'text-base leading-none', + + // Shape + 'appearance-none rounded-md', + { 'rounded-tr-none rounded-br-none': props.dropdown }, + { 'outline-none shadow-none rounded-none': props.multiple }, + + // Size + { 'w-full': props.multiple }, + + // Spacing + 'm-0', + { 'p-3': !props.multiple, 'p-0': props.multiple }, + + // Colors + 'text-surface-700 dark:text-white/80', + 'border', + { + 'bg-surface-0 dark:bg-surface-900': !props.multiple, + ' border-surface-300 dark:border-surface-700': !props.multiple && !props.invalid, + 'border-0 bg-transparent': props.multiple + }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !props.multiple }, + + // Transition + 'transition-colors duration-200' + ] + }), + token: { + class: [ + // Flex + 'inline-flex items-center', + + // Spacings + 'py-1.5 px-3', + + // Shape + 'rounded-[1.14rem]', + + // Colors + 'bg-surface-200 dark:bg-surface-700', + 'text-surface-700 dark:text-white/70', + + // Misc + 'cursor-default' + ] + }, + label: { + class: 'leading-[normal]' + }, + removeTokenIcon: { + class: [ + // Shape + 'rounded-md leading-6', + + // Spacing + 'ml-2', + + // Size + 'w-4 h-4', + + // Transition + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer' + ] + }, + dropdownbutton: { + root: { + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom', + + // Shape + 'rounded-r-md', + + // Size + 'px-4 py-3 leading-none', + + // Colors + 'text-white dark:text-surface-900', + 'bg-primary-500 dark:bg-primary-400', + 'border border-primary-500 dark:border-primary-400', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50' + ] + } + }, + loadingicon: { + class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin'] + }, + panel: { + class: [ + // Colors + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-700 dark:text-white/80', + + // Shape + 'border-0', + 'rounded-md', + 'shadow-md', + + // Size + 'max-h-[200px] overflow-auto' + ] + }, + list: { + class: 'py-3 px-0 list-none m-0' + }, + item: ({ context }) => ({ + class: [ + 'relative', + + // Font + 'font-normal text-base leading-none', + + // Spacing + 'm-0 px-5 py-3', + + // Shape + 'border-0 rounded-none', + + // Colors + { + 'text-surface-700 dark:text-white/80': !context.focused && !context.selected, + 'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected, + 'text-surface-700 dark:text-white/80': context.focused && !context.selected, + + 'text-primary-700 dark:text-white/80': context.focused && context.selected, + 'bg-primary-100 dark:bg-primary-400': context.focused && context.selected, + 'text-primary-700 dark:text-white/80': !context.focused && context.selected, + 'bg-primary-50 dark:bg-primary-300': !context.focused && context.selected + }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, + + // Transition + 'transition-shadow duration-200', + + // Misc + 'cursor-pointer overflow-hidden whitespace-nowrap' + ] + }), + itemgroup: { + class: [ + 'font-bold', + + // Spacing + 'm-0 p-3', + + // Colors + 'bg-surface-0 dark:bg-surface-700', + 'text-surface-800 dark:text-white/80', + + // Misc + 'cursor-auto' + ] + }, + emptymessage: { + class: [ + // Font + 'leading-none', + + // Spacing + 'py-3 px-5', + + // Color + 'text-surface-800 dark:text-white/80', + 'bg-transparent' + ] + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/lara/badgedirective/index.js b/presets/lara/badgedirective/index.js index 4c25273d..3ff2da27 100644 --- a/presets/lara/badgedirective/index.js +++ b/presets/lara/badgedirective/index.js @@ -1,43 +1,43 @@ -export default { - root: ({ context }) => ({ - class: [ - // Font - 'font-bold font-sans', - 'text-xs leading-5', - - // Alignment - 'flex items-center justify-center', - 'text-center', - - // Position - 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right', - - // Size - 'm-0', - { - 'p-0': context.nogutter || context.dot, - 'px-2': !context.nogutter && !context.dot, - 'min-w-[0.5rem] w-2 h-2': context.dot, - 'min-w-[1.5rem] h-6': !context.dot - }, - - // Shape - { - 'rounded-full': context.nogutter || context.dot, - 'rounded-[10px]': !context.nogutter && !context.dot - }, - - // Color - 'text-white dark:text-surface-900', - { - 'bg-primary-500 dark:bg-primary-400': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary, - 'bg-surface-500 dark:bg-surface-400': context.secondary, - 'bg-green-500 dark:bg-green-400': context.success, - 'bg-blue-500 dark:bg-blue-400': context.info, - 'bg-orange-500 dark:bg-orange-400': context.warning, - 'bg-purple-500 dark:bg-purple-400': context.help, - 'bg-red-500 dark:bg-red-400': context.danger - } - ] - }) -}; +export default { + root: ({ context }) => ({ + class: [ + // Font + 'font-bold', + 'text-xs leading-[normal]', + + // Alignment + 'flex items-center justify-center', + 'text-center', + + // Position + 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right', + + // Size + 'm-0', + { + 'p-0': context.nogutter || context.dot, + 'px-2': !context.nogutter && !context.dot, + 'min-w-[0.5rem] w-2 h-2': context.dot, + 'min-w-[1.5rem] h-6': !context.dot + }, + + // Shape + { + 'rounded-full': context.nogutter || context.dot, + 'rounded-[10px]': !context.nogutter && !context.dot + }, + + // Color + 'text-white dark:text-surface-900', + { + 'bg-primary-500 dark:bg-primary-400': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary, + 'bg-surface-500 dark:bg-surface-400': context.secondary, + 'bg-green-500 dark:bg-green-400': context.success, + 'bg-blue-500 dark:bg-blue-400': context.info, + 'bg-orange-500 dark:bg-orange-400': context.warning, + 'bg-purple-500 dark:bg-purple-400': context.help, + 'bg-red-500 dark:bg-red-400': context.danger + } + ] + }) +}; diff --git a/presets/lara/calendar/index.js b/presets/lara/calendar/index.js index 8834ea09..c3899f1f 100644 --- a/presets/lara/calendar/index.js +++ b/presets/lara/calendar/index.js @@ -1,643 +1,643 @@ -export default { - root: ({ props }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'max-w-full', - 'relative', - - // Misc - { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } - ] - }), - input: ({ props }) => ({ - class: [ - // Display - 'flex flex-auto', - - // Font - 'font-sans leading-none', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Spacing - 'm-0 p-3', - - // Shape - 'appearance-none', - { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' }, - { 'rounded-l-md flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' }, - { 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' }, - - // Transitions - 'transition-colors', - 'duration-200', - - // States - { 'hover:border-primary-500 dark:hover:border-primary-400': !props.invalid }, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50' - ] - }), - inputicon: { - class: ['absolute top-[50%] -mt-2', 'text-surface-600 dark:text-surface-200', 'right-[.75rem]'] - }, - dropdownbutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom', - - // Shape - 'rounded-r-md', - - // Size - 'px-4 py-3 leading-none', - - // Colors - 'text-white dark:text-surface-900', - 'bg-primary-500 dark:bg-primary-400', - 'border border-primary-500 dark:border-primary-400', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50' - ] - } - }, - panel: ({ props }) => ({ - class: [ - // Display & Position - { - absolute: !props.inline, - 'inline-block': props.inline - }, - - // Size - { 'w-auto p-2 ': !props.inline }, - { 'min-w-[80vw] w-auto p-2 ': props.touchUI }, - { 'p-2 min-w-full': props.inline }, - - // Shape - 'border rounded-lg', - { - 'shadow-md': !props.inline - }, - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - - //misc - { 'overflow-x-auto': props.inline } - ] - }), - datepickerMask: { - class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90'] - }, - header: { - class: [ - //Font - 'font-semibold', - - // Flexbox and Alignment - 'flex items-center justify-between', - - // Spacing - 'p-2', - 'm-0', - - // Shape - 'border-b', - 'rounded-t-md', - - // Colors - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700' - ] - }, - previousbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - title: { - class: [ - // Text - 'leading-8', - 'mx-auto my-0' - ] - }, - monthTitle: { - class: [ - // Font - 'text-base leading-5', - 'font-semibold', - - // Colors - 'text-surface-700 dark:text-white/80', - - // Transitions - 'transition duration-200', - - // Spacing - 'p-2', - 'm-0 mr-2', - - // States - 'hover:text-primary-500 dark:hover:text-primary-400', - - // Misc - 'cursor-pointer' - ] - }, - yearTitle: { - class: [ - // Font - 'text-base leading-5', - 'font-semibold', - - // Colors - 'text-surface-700 dark:text-white/80', - - // Transitions - 'transition duration-200', - - // Spacing - 'p-2', - 'm-0', - - // States - 'hover:text-primary-500 dark:hover:text-primary-400', - - // Misc - 'cursor-pointer' - ] - }, - nextbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - table: { - class: [ - // Font - 'text-base leading-none', - // Size & Shape - 'border-collapse', - 'w-full', - - // Spacing - 'm-0 my-2' - ] - }, - tableheadercell: { - class: [ - // Spacing - 'p-0 md:p-2' - ] - }, - weekheader: { - class: ['leading-5', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default'] - }, - weeknumber: { - class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default'] - }, - weekday: { - class: [ - // Colors - 'text-surface-500 dark:text-white/60' - ] - }, - day: { - class: [ - // Spacing - 'p-0 md:p-2' - ] - }, - weeklabelcontainer: ({ context }) => ({ - class: [ - // Flexbox and Alignment - 'flex items-center justify-center', - 'mx-auto', - - // Shape & Size - 'w-10 h-10', - 'rounded-full', - 'border-transparent border', - - // Colors - { - 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, - 'text-primary-700 bg-primary-100': context.selected && !context.disabled - }, - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-800/80': !context.selected && !context.disabled, - 'hover:bg-primary-200': context.selected && !context.disabled - }, - { - 'opacity-60 cursor-default': context.disabled, - 'cursor-pointer': !context.disabled - } - ] - }), - daylabel: ({ context }) => ({ - class: [ - // Flexbox and Alignment - 'flex items-center justify-center', - 'mx-auto', - - // Shape & Size - 'w-10 h-10', - 'rounded-full', - 'border-transparent border', - - // Colors - { - 'text-primary-500 dark:text-primary-400': context.date.today, - 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled && !context.date.today, - 'text-primary-700 bg-primary-100 dark:text-surface-0 dark:bg-primary-300/40': context.selected && !context.disabled - }, - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, - 'hover:bg-primary-200 dark:hover:bg-primary-200/40': context.selected && !context.disabled - }, - { - 'opacity-60 cursor-default': context.disabled, - 'cursor-pointer': !context.disabled - } - ] - }), - monthpicker: { - class: [ - // Spacing - 'my-2' - ] - }, - month: ({ context }) => ({ - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-1/3', - 'p-2', - - // Shape - 'rounded-md', - - // Colors - { - 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, - 'text-primary-700 bg-primary-100 dark:text-surface-0 dark:bg-primary-300/40': context.selected && !context.disabled - }, - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, - 'hover:bg-primary-200 dark:hover:bg-primary-200/40': context.selected && !context.disabled - }, - - // Misc - 'cursor-pointer' - ] - }), - yearpicker: { - class: [ - // Spacing - 'my-2' - ] - }, - year: ({ context }) => ({ - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-1/3', - 'p-2', - - // Shape - 'rounded-md', - - // Colors - { - 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, - 'text-primary-700 bg-primary-100 dark:text-surface-0 dark:bg-primary-300/40': context.selected && !context.disabled - }, - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, - 'hover:bg-primary-200 dark:hover:bg-primary-200/40': context.selected && !context.disabled - }, - - // Misc - 'cursor-pointer' - ] - }), - timepicker: { - class: [ - // Flexbox - 'flex', - 'justify-center items-center', - - // Borders - 'border-t-1', - 'border-solid border-surface-200', - - // Spacing - 'p-2' - ] - }, - separatorcontainer: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - separator: { - class: [ - // Text - 'text-xl' - ] - }, - hourpicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - minutepicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - secondPicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - ampmpicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - incrementbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - decrementbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - groupcontainer: { - class: [ - // Flexbox - 'flex' - ] - }, - group: { - class: [ - // Flexbox and Sizing - 'flex-1', - - // Borders - 'border-l', - 'border-surface-200', - - // Spacing - 'pr-0.5', - 'pl-0.5', - 'pt-0', - 'pb-0', - - // Pseudo-Classes - 'first:pl-0', - 'first:border-l-0' - ] - }, - buttonbar: { - class: [ - // Flexbox - 'flex justify-between items-center', - - // Spacing - 'py-3 px-0', - - // Shape - 'border-t border-surface-200 dark:border-surface-700' - ] - }, - todaybutton: { - root: { - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Spacing - 'px-4 py-3 leading-none', - - // Shape - 'rounded-md', - - // Colors - 'bg-transparent border-transparent', - 'text-primary-500 dark:text-primary-400', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-300/20', - - // Misc - 'cursor-pointer' - ] - } - }, - clearbutton: { - root: { - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Spacing - 'px-4 py-3 leading-none', - - // Shape - 'rounded-md', - - // Colors - 'bg-transparent border-transparent', - 'text-primary-500 dark:text-primary-400', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-300/20', - - // Misc - 'cursor-pointer' - ] - } - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'max-w-full', + 'relative', + + // Misc + { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } + ] + }), + input: ({ props }) => ({ + class: [ + // Display + 'flex flex-auto', + + // Font + 'leading-none', + + // Colors + 'text-surface-600 dark:text-surface-200', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // Spacing + 'm-0 p-3', + + // Shape + 'appearance-none', + { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' }, + { 'rounded-l-md flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' }, + { 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' }, + + // Transitions + 'transition-colors', + 'duration-200', + + // States + { 'hover:border-primary-500 dark:hover:border-primary-400': !props.invalid }, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50' + ] + }), + inputicon: { + class: ['absolute top-[50%] -mt-2', 'text-surface-600 dark:text-surface-200', 'right-[.75rem]'] + }, + dropdownbutton: { + root: { + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom', + + // Shape + 'rounded-r-md', + + // Size + 'px-4 py-3 leading-none', + + // Colors + 'text-white dark:text-surface-900', + 'bg-primary-500 dark:bg-primary-400', + 'border border-primary-500 dark:border-primary-400', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50' + ] + } + }, + panel: ({ props }) => ({ + class: [ + // Display & Position + { + absolute: !props.inline, + 'inline-block': props.inline + }, + + // Size + { 'w-auto p-2 ': !props.inline }, + { 'min-w-[80vw] w-auto p-2 ': props.touchUI }, + { 'p-2 min-w-full': props.inline }, + + // Shape + 'border rounded-lg', + { + 'shadow-md': !props.inline + }, + + // Colors + 'bg-surface-0 dark:bg-surface-800', + 'border-surface-200 dark:border-surface-700', + + //misc + { 'overflow-x-auto': props.inline } + ] + }), + datepickerMask: { + class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90'] + }, + header: { + class: [ + //Font + 'font-semibold', + + // Flexbox and Alignment + 'flex items-center justify-between', + + // Spacing + 'p-2', + 'm-0', + + // Shape + 'border-b', + 'rounded-t-md', + + // Colors + 'text-surface-700 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-800', + 'border-surface-200 dark:border-surface-700' + ] + }, + previousbutton: { + class: [ + 'relative', + + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Size + 'w-8 h-8', + 'p-0 m-0', + + // Shape + 'rounded-full', + + // Colors + 'text-surface-600 dark:text-white/70', + 'border-0', + 'bg-transparent', + + // Transitions + 'transition-colors duration-200 ease-in-out', + + // States + 'hover:text-surface-700 dark:hover:text-white/80', + 'hover:bg-surface-100 dark:hover:bg-surface-800/80', + + // Misc + 'cursor-pointer overflow-hidden' + ] + }, + title: { + class: [ + // Text + 'leading-8', + 'mx-auto my-0' + ] + }, + monthTitle: { + class: [ + // Font + 'text-base leading-[normal]', + 'font-semibold', + + // Colors + 'text-surface-700 dark:text-white/80', + + // Transitions + 'transition duration-200', + + // Spacing + 'p-2', + 'm-0 mr-2', + + // States + 'hover:text-primary-500 dark:hover:text-primary-400', + + // Misc + 'cursor-pointer' + ] + }, + yearTitle: { + class: [ + // Font + 'text-base leading-[normal]', + 'font-semibold', + + // Colors + 'text-surface-700 dark:text-white/80', + + // Transitions + 'transition duration-200', + + // Spacing + 'p-2', + 'm-0', + + // States + 'hover:text-primary-500 dark:hover:text-primary-400', + + // Misc + 'cursor-pointer' + ] + }, + nextbutton: { + class: [ + 'relative', + + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Size + 'w-8 h-8', + 'p-0 m-0', + + // Shape + 'rounded-full', + + // Colors + 'text-surface-600 dark:text-white/70', + 'border-0', + 'bg-transparent', + + // Transitions + 'transition-colors duration-200 ease-in-out', + + // States + 'hover:text-surface-700 dark:hover:text-white/80', + 'hover:bg-surface-100 dark:hover:bg-surface-800/80', + + // Misc + 'cursor-pointer overflow-hidden' + ] + }, + table: { + class: [ + // Font + 'text-base leading-none', + // Size & Shape + 'border-collapse', + 'w-full', + + // Spacing + 'm-0 my-2' + ] + }, + tableheadercell: { + class: [ + // Spacing + 'p-0 md:p-2' + ] + }, + weekheader: { + class: ['leading-[normal]', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default'] + }, + weeknumber: { + class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default'] + }, + weekday: { + class: [ + // Colors + 'text-surface-500 dark:text-white/60' + ] + }, + day: { + class: [ + // Spacing + 'p-0 md:p-2' + ] + }, + weeklabelcontainer: ({ context }) => ({ + class: [ + // Flexbox and Alignment + 'flex items-center justify-center', + 'mx-auto', + + // Shape & Size + 'w-10 h-10', + 'rounded-full', + 'border-transparent border', + + // Colors + { + 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, + 'text-primary-700 bg-primary-100': context.selected && !context.disabled + }, + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + { + 'hover:bg-surface-100 dark:hover:bg-surface-800/80': !context.selected && !context.disabled, + 'hover:bg-primary-200': context.selected && !context.disabled + }, + { + 'opacity-60 cursor-default': context.disabled, + 'cursor-pointer': !context.disabled + } + ] + }), + daylabel: ({ context }) => ({ + class: [ + // Flexbox and Alignment + 'flex items-center justify-center', + 'mx-auto', + + // Shape & Size + 'w-10 h-10', + 'rounded-full', + 'border-transparent border', + + // Colors + { + 'text-primary-500 dark:text-primary-400': context.date.today, + 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled && !context.date.today, + 'text-primary-700 bg-primary-100 dark:text-surface-0 dark:bg-primary-300/40': context.selected && !context.disabled + }, + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + { + 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, + 'hover:bg-primary-200 dark:hover:bg-primary-200/40': context.selected && !context.disabled + }, + { + 'opacity-60 cursor-default': context.disabled, + 'cursor-pointer': !context.disabled + } + ] + }), + monthpicker: { + class: [ + // Spacing + 'my-2' + ] + }, + month: ({ context }) => ({ + class: [ + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Size + 'w-1/3', + 'p-2', + + // Shape + 'rounded-md', + + // Colors + { + 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, + 'text-primary-700 bg-primary-100 dark:text-surface-0 dark:bg-primary-300/40': context.selected && !context.disabled + }, + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + { + 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, + 'hover:bg-primary-200 dark:hover:bg-primary-200/40': context.selected && !context.disabled + }, + + // Misc + 'cursor-pointer' + ] + }), + yearpicker: { + class: [ + // Spacing + 'my-2' + ] + }, + year: ({ context }) => ({ + class: [ + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Size + 'w-1/3', + 'p-2', + + // Shape + 'rounded-md', + + // Colors + { + 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, + 'text-primary-700 bg-primary-100 dark:text-surface-0 dark:bg-primary-300/40': context.selected && !context.disabled + }, + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + { + 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, + 'hover:bg-primary-200 dark:hover:bg-primary-200/40': context.selected && !context.disabled + }, + + // Misc + 'cursor-pointer' + ] + }), + timepicker: { + class: [ + // Flexbox + 'flex', + 'justify-center items-center', + + // Borders + 'border-t-1', + 'border-solid border-surface-200', + + // Spacing + 'p-2' + ] + }, + separatorcontainer: { + class: [ + // Flexbox and Alignment + 'flex', + 'items-center', + 'flex-col', + + // Spacing + 'px-2' + ] + }, + separator: { + class: [ + // Text + 'text-xl' + ] + }, + hourpicker: { + class: [ + // Flexbox and Alignment + 'flex', + 'items-center', + 'flex-col', + + // Spacing + 'px-2' + ] + }, + minutepicker: { + class: [ + // Flexbox and Alignment + 'flex', + 'items-center', + 'flex-col', + + // Spacing + 'px-2' + ] + }, + secondPicker: { + class: [ + // Flexbox and Alignment + 'flex', + 'items-center', + 'flex-col', + + // Spacing + 'px-2' + ] + }, + ampmpicker: { + class: [ + // Flexbox and Alignment + 'flex', + 'items-center', + 'flex-col', + + // Spacing + 'px-2' + ] + }, + incrementbutton: { + class: [ + 'relative', + + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Size + 'w-8 h-8', + 'p-0 m-0', + + // Shape + 'rounded-full', + + // Colors + 'text-surface-600 dark:text-white/70', + 'border-0', + 'bg-transparent', + + // Transitions + 'transition-colors duration-200 ease-in-out', + + // States + 'hover:text-surface-700 dark:hover:text-white/80', + 'hover:bg-surface-100 dark:hover:bg-surface-800/80', + + // Misc + 'cursor-pointer overflow-hidden' + ] + }, + decrementbutton: { + class: [ + 'relative', + + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Size + 'w-8 h-8', + 'p-0 m-0', + + // Shape + 'rounded-full', + + // Colors + 'text-surface-600 dark:text-white/70', + 'border-0', + 'bg-transparent', + + // Transitions + 'transition-colors duration-200 ease-in-out', + + // States + 'hover:text-surface-700 dark:hover:text-white/80', + 'hover:bg-surface-100 dark:hover:bg-surface-800/80', + + // Misc + 'cursor-pointer overflow-hidden' + ] + }, + groupcontainer: { + class: [ + // Flexbox + 'flex' + ] + }, + group: { + class: [ + // Flexbox and Sizing + 'flex-1', + + // Borders + 'border-l', + 'border-surface-200', + + // Spacing + 'pr-0.5', + 'pl-0.5', + 'pt-0', + 'pb-0', + + // Pseudo-Classes + 'first:pl-0', + 'first:border-l-0' + ] + }, + buttonbar: { + class: [ + // Flexbox + 'flex justify-between items-center', + + // Spacing + 'py-3 px-0', + + // Shape + 'border-t border-surface-200 dark:border-surface-700' + ] + }, + todaybutton: { + root: { + class: [ + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Spacing + 'px-4 py-3 leading-none', + + // Shape + 'rounded-md', + + // Colors + 'bg-transparent border-transparent', + 'text-primary-500 dark:text-primary-400', + + // Transitions + 'transition-colors duration-200 ease-in-out', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'hover:bg-primary-300/20', + + // Misc + 'cursor-pointer' + ] + } + }, + clearbutton: { + root: { + class: [ + // Flexbox and Alignment + 'inline-flex items-center justify-center', + + // Spacing + 'px-4 py-3 leading-none', + + // Shape + 'rounded-md', + + // Colors + 'bg-transparent border-transparent', + 'text-primary-500 dark:text-primary-400', + + // Transitions + 'transition-colors duration-200 ease-in-out', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'hover:bg-primary-300/20', + + // Misc + 'cursor-pointer' + ] + } + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/lara/cascadeselect/index.js b/presets/lara/cascadeselect/index.js index e51adb2b..a3e42cc3 100644 --- a/presets/lara/cascadeselect/index.js +++ b/presets/lara/cascadeselect/index.js @@ -1,209 +1,208 @@ -export default { - root: ({ props, state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - label: ({ props }) => ({ - class: [ - //Font - 'font-sans', - 'leading-none', - - // Flex & Alignment - ' flex flex-auto', - - // Sizing and Spacing - 'w-[1%]', - 'p-3', - - //Shape - 'rounded-none', - - // Color and Background - 'bg-transparent', - 'border-0', - { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }), - dropdownbutton: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-700', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': context.focused && context.active, - 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': !context.focused && context.active - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, - 'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80': context.active - }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - content: { - class: [ - 'relative', - - // Flexbox - 'flex', - 'items-center', - - // Spacing - 'py-3', - 'px-5', - - // Misc - 'no-underline', - 'overflow-hidden', - 'cursor-pointer', - 'select-none' - ] - }, - groupicon: { - class: [ - // Alignment - 'ml-auto' - ] - }, - sublist: { - class: [ - // Size - 'w-full', - - // Spacing - 'py-1', - 'm-0', - 'list-none', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Position - 'static sm:absolute', - 'z-10', - - // Color - 'bg-surface-0 dark:bg-surface-700' - ] - }, - separator: { - class: 'border-t border-surface-200 dark:border-surface-600 my-1' - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props, state }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + 'rounded-md', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // Transitions + 'transition-all', + 'duration-200', + + // States + { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, + { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + + // Misc + 'cursor-pointer', + 'select-none', + { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } + ] + }), + label: ({ props }) => ({ + class: [ + //Font + 'leading-none', + + // Flex & Alignment + ' flex flex-auto', + + // Sizing and Spacing + 'w-[1%]', + 'p-3', + + //Shape + 'rounded-none', + + // Color and Background + 'bg-transparent', + 'border-0', + { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue }, + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + + // Transitions + 'transition', + 'duration-200', + + // States + 'focus:outline-none focus:shadow-none', + + // Misc + 'relative', + 'cursor-pointer', + 'overflow-hidden overflow-ellipsis', + 'whitespace-nowrap', + 'appearance-none' + ] + }), + dropdownbutton: { + class: [ + // Flexbox + 'flex items-center justify-center', + 'shrink-0', + + // Color and Background + 'bg-transparent', + 'text-surface-500', + + // Size + 'w-12', + + // Shape + 'rounded-tr-md', + 'rounded-br-md' + ] + }, + panel: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Color + 'bg-surface-0 dark:bg-surface-700', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + wrapper: { + class: [ + // Sizing + 'max-h-[200px]', + + // Misc + 'overflow-auto' + ] + }, + list: { + class: 'py-3 list-none m-0' + }, + item: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + + // Colors + { + 'text-surface-500 dark:text-white/70': !context.focused && !context.active, + 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, + 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': context.focused && context.active, + 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': !context.focused && context.active + }, + + // Hover States + { + 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, + 'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80': context.active + }, + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + 'cursor-pointer', + 'overflow-hidden', + 'whitespace-nowrap' + ] + }), + content: { + class: [ + 'relative', + + // Flexbox + 'flex', + 'items-center', + + // Spacing + 'py-3', + 'px-5', + + // Misc + 'no-underline', + 'overflow-hidden', + 'cursor-pointer', + 'select-none' + ] + }, + groupicon: { + class: [ + // Alignment + 'ml-auto' + ] + }, + sublist: { + class: [ + // Size + 'w-full', + + // Spacing + 'py-1', + 'm-0', + 'list-none', + + // Shape + 'shadow-none sm:shadow-md', + 'border-0', + + // Position + 'static sm:absolute', + 'z-10', + + // Color + 'bg-surface-0 dark:bg-surface-700' + ] + }, + separator: { + class: 'border-t border-surface-200 dark:border-surface-600 my-1' + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/lara/chips/index.js b/presets/lara/chips/index.js index 4042944b..b290b41e 100644 --- a/presets/lara/chips/index.js +++ b/presets/lara/chips/index.js @@ -1,114 +1,114 @@ -export default { - root: ({ props }) => ({ - class: [ - 'flex', - { - 'opacity-60 select-none pointer-events-none cursor-default': props.disabled - } - ] - }), - container: ({ state, props }) => ({ - class: [ - // Font - 'font-sans text-base leading-none', - - // Flex - 'flex items-center flex-wrap gap-2', - - // Spacing - 'm-0 py-1.5 px-3', - - // Size - 'w-full', - 'min-h-[2.877rem]', - - // Shape - 'list-none', - 'rounded-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { 'hover:border-primary-500 dark:hover:border-primary-400': !props.invalid }, - 'focus:outline-none focus:outline-offset-0', - { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered }, - - // Transition - 'transition-colors duration-200', - - // Misc - 'cursor-text overflow-hidden', - 'appearance-none' - ] - }), - - inputtoken: { - class: ['py-1.5 px-0', 'inline-flex flex-auto'] - }, - input: { - class: [ - // Font - 'font-sans text-base leading-[1.2]', - - // Size - 'w-full', - - // Spacing - 'p-0 m-0', - - // Shape - 'appearance-none rounded-none', - 'border-0 outline-none', - 'shadow-none', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-transparent' - ] - }, - token: { - class: [ - // Flexbox - 'inline-flex items-center', - - // Spacing - 'py-1.5 px-3', - - // Shape - 'rounded-[1.14rem]', - - // Colors - 'text-surface-700 dark:text-white/70', - 'bg-surface-200 dark:bg-surface-700' - ] - }, - label: { - class: 'leading-5' - }, - removeTokenIcon: { - class: [ - // Shape - 'rounded-md leading-6', - - // Spacing - 'ml-2', - - // Size - 'w-4 h-4', - - // Transition - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer' - ] - } -}; +export default { + root: ({ props }) => ({ + class: [ + 'flex', + { + 'opacity-60 select-none pointer-events-none cursor-default': props.disabled + } + ] + }), + container: ({ state, props }) => ({ + class: [ + // Font + 'text-base leading-none', + + // Flex + 'flex items-center flex-wrap gap-2', + + // Spacing + 'm-0 py-1.5 px-3', + + // Size + 'w-full', + 'min-h-[2.877rem]', + + // Shape + 'list-none', + 'rounded-md', + + // Color + 'text-surface-700 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { 'hover:border-primary-500 dark:hover:border-primary-400': !props.invalid }, + 'focus:outline-none focus:outline-offset-0', + { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered }, + + // Transition + 'transition-colors duration-200', + + // Misc + 'cursor-text overflow-hidden', + 'appearance-none' + ] + }), + + inputtoken: { + class: ['py-1.5 px-0', 'inline-flex flex-auto'] + }, + input: { + class: [ + // Font + 'text-base leading-[1.2]', + + // Size + 'w-full', + + // Spacing + 'p-0 m-0', + + // Shape + 'appearance-none rounded-none', + 'border-0 outline-none', + 'shadow-none', + + // Color + 'text-surface-700 dark:text-white/80', + 'bg-transparent' + ] + }, + token: { + class: [ + // Flexbox + 'inline-flex items-center', + + // Spacing + 'py-1.5 px-3', + + // Shape + 'rounded-[1.14rem]', + + // Colors + 'text-surface-700 dark:text-white/70', + 'bg-surface-200 dark:bg-surface-700' + ] + }, + label: { + class: 'leading-[normal]' + }, + removeTokenIcon: { + class: [ + // Shape + 'rounded-md leading-6', + + // Spacing + 'ml-2', + + // Size + 'w-4 h-4', + + // Transition + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer' + ] + } +}; diff --git a/presets/lara/colorpicker/index.js b/presets/lara/colorpicker/index.js index 4b22e21c..476c3440 100644 --- a/presets/lara/colorpicker/index.js +++ b/presets/lara/colorpicker/index.js @@ -1,123 +1,123 @@ -export default { - root: ({ props }) => ({ - class: [ - // Display - 'inline-block', - - // Misc - { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } - ] - }), - input: { - class: [ - // Font - 'font-sans text-base ', - - // Spacing - 'm-0', - 'p-3', - - // Size & Shape - 'rounded-lg w-8 h-8', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // States - 'hover:border-primary-500 dark:hover:border-primary-400', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition-colors duration-200', - - // Misc - 'cursor-pointer' - ] - }, - panel: ({ props }) => ({ - class: [ - // Position & Size - { - 'relative h-[166px] w-[193px]': props.inline, - 'absolute h-[166px] w-[193px]': !props.inline - }, - - // Shape - 'shadow-md border', - - // Colors - 'bg-surface-800 border-surface-900 dark:border-surface-600' - ] - }), - selector: { - class: [ - // Position - 'absolute top-[8px] left-[8px]', - - // Size - 'h-[150px] w-[150px]' - ] - }, - color: { - class: [ - // Size - 'h-[150px] w-[150px]' - ], - style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' - }, - colorhandle: { - class: [ - 'absolute', - - // Shape - 'rounded-full border border-solid', - - // Size - 'h-[10px] w-[10px]', - - // Spacing - '-ml-[5px] -mt-[5px]', - - // Colors - 'border-white', - - // Misc - 'cursor-pointer opacity-85' - ] - }, - hue: { - class: [ - // Position - 'absolute top-[8px] left-[167px]', - - // Size - 'h-[150px] w-[17px]', - - // Opacity - 'opacity-85' - ], - style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' - }, - huehandle: { - class: [ - // Position - 'absolute left-0 -ml-[2px] -mt-[5px]', - - // Size - 'h-[10px] w-[21px]', - - // Shape - 'border-solid border-2', - - // Misc - 'cursor-pointer opacity-85' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props }) => ({ + class: [ + // Display + 'inline-block', + + // Misc + { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } + ] + }), + input: { + class: [ + // Font + 'text-base ', + + // Spacing + 'm-0', + 'p-3', + + // Size & Shape + 'rounded-lg w-8 h-8', + + // Colors + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-700', + + // States + 'hover:border-primary-500 dark:hover:border-primary-400', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Transition + 'transition-colors duration-200', + + // Misc + 'cursor-pointer' + ] + }, + panel: ({ props }) => ({ + class: [ + // Position & Size + { + 'relative h-[166px] w-[193px]': props.inline, + 'absolute h-[166px] w-[193px]': !props.inline + }, + + // Shape + 'shadow-md border', + + // Colors + 'bg-surface-800 border-surface-900 dark:border-surface-600' + ] + }), + selector: { + class: [ + // Position + 'absolute top-[8px] left-[8px]', + + // Size + 'h-[150px] w-[150px]' + ] + }, + color: { + class: [ + // Size + 'h-[150px] w-[150px]' + ], + style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' + }, + colorhandle: { + class: [ + 'absolute', + + // Shape + 'rounded-full border border-solid', + + // Size + 'h-[10px] w-[10px]', + + // Spacing + '-ml-[5px] -mt-[5px]', + + // Colors + 'border-white', + + // Misc + 'cursor-pointer opacity-85' + ] + }, + hue: { + class: [ + // Position + 'absolute top-[8px] left-[167px]', + + // Size + 'h-[150px] w-[17px]', + + // Opacity + 'opacity-85' + ], + style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' + }, + huehandle: { + class: [ + // Position + 'absolute left-0 -ml-[2px] -mt-[5px]', + + // Size + 'h-[10px] w-[21px]', + + // Shape + 'border-solid border-2', + + // Misc + 'cursor-pointer opacity-85' + ] + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/lara/datatable/index.js b/presets/lara/datatable/index.js index 0f6c4782..86762dd9 100644 --- a/presets/lara/datatable/index.js +++ b/presets/lara/datatable/index.js @@ -1,1171 +1,1170 @@ -export default { - root: ({ props }) => ({ - class: [ - 'relative', - - // Flex & Alignment - { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' }, - - // Size - { 'h-full': props.scrollable && props.scrollHeight === 'flex' } - ] - }), - loadingoverlay: { - class: [ - // Position - 'absolute', - 'top-0 left-0', - 'z-20', - - // Flex & Alignment - 'flex items-center justify-center', - - // Size - 'w-full h-full', - - // Color - 'bg-surface-100/40 dark:bg-surface-800/40', - - // Transition - 'transition duration-200' - ] - }, - loadingicon: { - class: 'w-8 h-8 animate-spin' - }, - wrapper: ({ props }) => ({ - class: [ - { relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' }, - - // Size - { 'h-full': props.scrollable && props.scrollHeight === 'flex' } - ] - }), - header: ({ props }) => ({ - class: [ - 'font-bold', - - // Shape - props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0', - - // Spacing - 'p-4', - - // Color - 'bg-surface-50 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80' - ] - }), - table: { - class: 'w-full border-spacing-0 border-separate' - }, - thead: ({ context }) => ({ - class: [ - { - 'bg-surface-50 dark:bg-surface-800 top-0 z-40 sticky': context.scrollable - } - ] - }), - tbody: ({ instance, context }) => ({ - class: [ - { - 'sticky z-20': instance.frozenRow && context.scrollable - }, - 'bg-surface-50 dark:bg-surface-800' - ] - }), - tfoot: ({ context }) => ({ - class: [ - { - 'bg-surface-50 bottom-0 z-0': context.scrollable - } - ] - }), - footer: { - class: [ - 'font-bold', - - // Shape - 'border-t-0 border-b border-x-0', - - // Spacing - 'p-4', - - // Color - 'bg-surface-50 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80' - ] - }, - column: { - headercell: ({ context, props }) => ({ - class: [ - 'font-bold', - - // Position - { 'sticky z-20 border-b': props.frozen || props.frozen === '' }, - - { relative: context.resizable }, - - // Alignment - 'text-left', - - // Shape - { 'first:border-l border-y border-r': context?.showGridlines }, - 'border-0 border-b border-solid', - - // Spacing - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', - - // Color - (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-50 text-primary-700' : 'bg-surface-50 text-surface-700', - (props.sortable === '' || props.sortable) && context.sorted ? 'dark:text-white dark:bg-primary-400/30' : 'dark:text-white/80 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700 ', - - // States - { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - { 'transition duration-200': props.sortable === '' || props.sortable }, - - // Misc - { 'cursor-pointer': props.sortable === '' || props.sortable }, - { - 'overflow-hidden space-nowrap border-y bg-clip-padding': context.resizable // Resizable - } - ] - }), - headercontent: { - class: 'flex items-center' - }, - sort: ({ context }) => ({ - class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80'] - }), - bodycell: ({ props, context, state, parent }) => ({ - class: [ - //Position - { 'sticky box-border border-b': parent.instance.frozenRow }, - { 'sticky box-border border-b z-20': props.frozen || props.frozen === '' }, - - // Alignment - 'text-left', - - // Shape - 'border-0 border-b border-solid', - { 'first:border-l border-r border-b': context?.showGridlines }, - { 'bg-surface-0 dark:bg-surface-800': parent.instance.frozenRow || props.frozen || props.frozen === '' }, - - // Spacing - { 'p-2': context?.size === 'small' && !state['d_editing'] }, - { 'p-5': context?.size === 'large' && !state['d_editing'] }, - { 'p-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] }, - { 'py-[0.6rem] px-2': state['d_editing'] }, - - // Color - 'border-surface-200 dark:border-surface-700' - ] - }), - footercell: ({ context }) => ({ - class: [ - // Font - 'font-bold', - - // Alignment - 'text-left', - - // Shape - 'border-0 border-b border-solid', - { 'border-x border-y': context?.showGridlines }, - - // Spacing - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', - - // Color - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80', - 'bg-surface-50 dark:bg-surface-800' - ] - }), - sorticon: ({ context }) => ({ - class: ['ml-2', context.sorted ? 'text-primary-700 dark:text-white/80' : 'text-surface-700 dark:text-white/70'] - }), - sortbadge: { - class: [ - // Flex & Alignment - 'flex items-center justify-center align-middle', - - // Shape - 'rounded-full', - - // Size - 'w-[1.143rem] leading-[1.143rem]', - - // Spacing - 'ml-2', - - // Color - 'text-primary-700 dark:text-white', - 'bg-primary-50 dark:bg-primary-400/30' - ] - }, - columnfilter: { - class: 'inline-flex items-center ml-auto' - }, - filteroverlay: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Size - 'min-w-[12.5rem]', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - filtermatchmodedropdown: { - root: ({ state }) => ({ - class: [ - // Display and Position - 'flex', - 'relative', - - // Spacing - 'my-2', - - // Shape - 'w-full', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-300', - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none' - ] - }) - }, - filterrowitems: { - class: 'm-0 p-0 py-3 list-none' - }, - filterrowitem: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context?.highlighted }, - { 'bg-surface-0 dark:bg-surface-800 text-surface-700 dark:text-white/80': !context?.highlighted }, - { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context?.highlighted }, - { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context?.highlighted }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context?.highlighted }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': !context?.highlighted }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - filteroperator: { - class: [ - // Spacing - 'px-5 py-3', - - // Shape - 'border-b border-solid', - 'rounded-t-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'border-surface-200 dark:border-surface-800', - 'bg-surface-0 dark:bg-surface-700' - ] - }, - filteroperatordropdown: { - root: ({ state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'w-full', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-300', - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none' - ] - }), - input: ({ props }) => ({ - class: [ - //Font - 'font-sans', - 'leading-none', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Sizing and Spacing - 'w-[1%]', - 'p-3', - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }), - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, - { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }) - }, - filterconstraint: { - class: [ - // Spacing - 'py-3 px-5', - - // Shape - 'border-b border-solid', - - // Color - 'border-surface-200 dark:border-surface-700' - ] - }, - filteraddrule: { - class: 'py-3 px-5' - }, - filteraddrulebutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3 w-full', - - // Shape - 'rounded-md', - - 'bg-transparent border-transparent', - 'text-primary-500 dark:text-primary-400', - 'hover:bg-primary-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }, - label: { - class: 'flex-auto grow-0' - }, - icon: { - class: 'mr-2' - } - }, - filterremovebutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3 w-full mt-2', - - // Shape - 'rounded-md', - - 'bg-transparent border-transparent', - 'text-red-500 dark:text-red-400', - 'hover:bg-red-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }, - label: { - class: 'flex-auto grow-0' - }, - icon: { - class: 'mr-2' - } - }, - filterbuttonbar: { - class: [ - // Flex & Alignment - 'flex items-center justify-between', - - // Space - 'py-3 px-5' - ] - }, - filterclearbutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3', - - // Shape - 'rounded-md', - - 'text-primary-500 border border-primary-500', - 'hover:bg-primary-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - } - }, - filterapplybutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3', - - // Shape - 'rounded-md', - - 'text-white dark:text-surface-900', - 'bg-primary-500 dark:bg-primary-400', - 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - } - }, - filtermenubutton: ({ context }) => ({ - class: [ - 'relative', - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - - // Spacing - 'ml-2', - - // Shape - 'rounded-full', - - // Color - { 'bg-primary-50 text-primary-700': context.active }, - 'dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-800', - - // States - 'hover:text-surface-700 hover:bg-surface-300/20', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'cursor-pointer no-underline overflow-hidden' - ] - }), - headerfilterclearbutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Shape - 'border-none', - - // Spacing - 'm-0 p-0 ml-2', - - // Color - 'bg-transparent', - - // Misc - 'cursor-pointer no-underline overflow-hidden select-none', - { - invisible: !context.hidden - } - ] - }), - rowtoggler: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Spacing - 'm-0 p-0', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-500 dark:text-white/70', - 'bg-transparent', - 'focus-visible:outline-none focus-visible:outline-offset-0', - 'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - columnresizer: { - class: [ - 'block', - - // Position - 'absolute top-0 right-0', - - // Sizing - 'w-2 h-full', - - // Spacing - 'm-0 p-0', - - // Color - 'border border-transparent', - - // Misc - 'cursor-col-resize' - ] - }, - rowreordericon: { - class: 'cursor-move' - }, - roweditorinitbutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - roweditorsavebutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - roweditorcancelbutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - rowRadiobutton: { - root: { - class: [ - 'relative', - - // Flexbox & Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-[1.571rem] h-[1.571rem]', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props }) => ({ - class: [ - // Flexbox - 'flex justify-center items-center', - - // Size - 'w-[1.571rem] h-[1.571rem]', - - // Shape - 'border-2', - 'rounded-full', - - // Transition - 'transition duration-200 ease-in-out', - - // Colors - { - 'text-surface-700 dark:text-white/80': !props.modelValue, - 'bg-surface-0 dark:bg-surface-900': !props.modelValue, - 'border-surface-300 dark:border-surface-700': !props.modelValue, - 'border-primary-500 dark:border-primary-400': props.modelValue, - 'bg-primary-500 dark:bg-primary-400': props.modelValue - }, - - // States - { - 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled, - 'peer-hover:border-primary-600 dark:peer-hover:border-primary-300 peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300': !props.disabled && props.modelValue, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'opacity-60 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-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: ({ props }) => ({ - class: [ - 'block', - - // Shape - 'rounded-full', - - // Size - 'w-[0.857rem] h-[0.857rem]', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - - // Conditions - { - 'backface-hidden scale-10 invisible': !props.modelValue, - 'transform visible scale-[1.1]': props.modelValue - }, - - // Transition - 'transition duration-200' - ] - }) - }, - headercheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked - }, - - // States - { - 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, - 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - 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-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - rowCheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked - }, - - // States - { - 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, - 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - 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-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } - }, - bodyrow: ({ context, props }) => ({ - class: [ - // Color - 'dark:text-white/80', - { 'bg-primary-50 text-primary-700 dark:bg-primary-400/30': context.selected }, - { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected }, - { 'font-bold bg-surface-0 dark:bg-surface-800 z-20': props.frozenRow }, - { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-800 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-900/50': context.stripedRows }, - - // State - { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50': context.selectable }, - { 'hover:bg-surface-300/20 hover:text-surface-600': props.selectionMode && !context.selected }, - - // Transition - { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }, - - // Misc - { 'cursor-pointer': props.selectionMode } - ] - }), - rowexpansion: { - class: 'bg-surface-0 dark:bg-surface-800 text-surface-600 dark:text-white/80' - }, - rowgroupheader: { - class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800'] - }, - rowgroupfooter: { - class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800'] - }, - rowgrouptoggler: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Spacing - 'm-0 p-0', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-500 dark:text-white/70', - 'bg-transparent', - 'focus-visible:outline-none focus-visible:outline-offset-0', - 'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - rowgrouptogglericon: { - class: 'inline-block w-4 h-4' - }, - resizehelper: { - class: 'absolute hidden w-[2px] z-20 bg-primary-500 dark:bg-primary-400' - } -}; +export default { + root: ({ props }) => ({ + class: [ + 'relative', + + // Flex & Alignment + { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' }, + + // Size + { 'h-full': props.scrollable && props.scrollHeight === 'flex' } + ] + }), + loadingoverlay: { + class: [ + // Position + 'absolute', + 'top-0 left-0', + 'z-20', + + // Flex & Alignment + 'flex items-center justify-center', + + // Size + 'w-full h-full', + + // Color + 'bg-surface-100/40 dark:bg-surface-800/40', + + // Transition + 'transition duration-200' + ] + }, + loadingicon: { + class: 'w-8 h-8 animate-spin' + }, + wrapper: ({ props }) => ({ + class: [ + { relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' }, + + // Size + { 'h-full': props.scrollable && props.scrollHeight === 'flex' } + ] + }), + header: ({ props }) => ({ + class: [ + 'font-bold', + + // Shape + props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0', + + // Spacing + 'p-4', + + // Color + 'bg-surface-50 dark:bg-surface-800', + 'border-surface-200 dark:border-surface-700', + 'text-surface-700 dark:text-white/80' + ] + }), + table: { + class: 'w-full border-spacing-0 border-separate' + }, + thead: ({ context }) => ({ + class: [ + { + 'bg-surface-50 dark:bg-surface-800 top-0 z-40 sticky': context.scrollable + } + ] + }), + tbody: ({ instance, context }) => ({ + class: [ + { + 'sticky z-20': instance.frozenRow && context.scrollable + }, + 'bg-surface-50 dark:bg-surface-800' + ] + }), + tfoot: ({ context }) => ({ + class: [ + { + 'bg-surface-50 bottom-0 z-0': context.scrollable + } + ] + }), + footer: { + class: [ + 'font-bold', + + // Shape + 'border-t-0 border-b border-x-0', + + // Spacing + 'p-4', + + // Color + 'bg-surface-50 dark:bg-surface-800', + 'border-surface-200 dark:border-surface-700', + 'text-surface-700 dark:text-white/80' + ] + }, + column: { + headercell: ({ context, props }) => ({ + class: [ + 'font-bold', + + // Position + { 'sticky z-20 border-b': props.frozen || props.frozen === '' }, + + { relative: context.resizable }, + + // Alignment + 'text-left', + + // Shape + { 'first:border-l border-y border-r': context?.showGridlines }, + 'border-0 border-b border-solid', + + // Spacing + context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', + + // Color + (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-50 text-primary-700' : 'bg-surface-50 text-surface-700', + (props.sortable === '' || props.sortable) && context.sorted ? 'dark:text-white dark:bg-primary-400/30' : 'dark:text-white/80 dark:bg-surface-800', + 'border-surface-200 dark:border-surface-700 ', + + // States + { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted }, + 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', + + // Transition + { 'transition duration-200': props.sortable === '' || props.sortable }, + + // Misc + { 'cursor-pointer': props.sortable === '' || props.sortable }, + { + 'overflow-hidden space-nowrap border-y bg-clip-padding': context.resizable // Resizable + } + ] + }), + headercontent: { + class: 'flex items-center' + }, + sort: ({ context }) => ({ + class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80'] + }), + bodycell: ({ props, context, state, parent }) => ({ + class: [ + //Position + { 'sticky box-border border-b': parent.instance.frozenRow }, + { 'sticky box-border border-b z-20': props.frozen || props.frozen === '' }, + + // Alignment + 'text-left', + + // Shape + 'border-0 border-b border-solid', + { 'first:border-l border-r border-b': context?.showGridlines }, + { 'bg-surface-0 dark:bg-surface-800': parent.instance.frozenRow || props.frozen || props.frozen === '' }, + + // Spacing + { 'p-2': context?.size === 'small' && !state['d_editing'] }, + { 'p-5': context?.size === 'large' && !state['d_editing'] }, + { 'p-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] }, + { 'py-[0.6rem] px-2': state['d_editing'] }, + + // Color + 'border-surface-200 dark:border-surface-700' + ] + }), + footercell: ({ context }) => ({ + class: [ + // Font + 'font-bold', + + // Alignment + 'text-left', + + // Shape + 'border-0 border-b border-solid', + { 'border-x border-y': context?.showGridlines }, + + // Spacing + context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', + + // Color + 'border-surface-200 dark:border-surface-700', + 'text-surface-700 dark:text-white/80', + 'bg-surface-50 dark:bg-surface-800' + ] + }), + sorticon: ({ context }) => ({ + class: ['ml-2', context.sorted ? 'text-primary-700 dark:text-white/80' : 'text-surface-700 dark:text-white/70'] + }), + sortbadge: { + class: [ + // Flex & Alignment + 'flex items-center justify-center align-middle', + + // Shape + 'rounded-full', + + // Size + 'w-[1.143rem] leading-[1.143rem]', + + // Spacing + 'ml-2', + + // Color + 'text-primary-700 dark:text-white', + 'bg-primary-50 dark:bg-primary-400/30' + ] + }, + columnfilter: { + class: 'inline-flex items-center ml-auto' + }, + filteroverlay: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Size + 'min-w-[12.5rem]', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + filtermatchmodedropdown: { + root: ({ state }) => ({ + class: [ + // Display and Position + 'flex', + 'relative', + + // Spacing + 'my-2', + + // Shape + 'w-full', + 'rounded-md', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-700', + 'text-surface-800 dark:text-white/80', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + + // Transitions + 'transition-all', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-300', + { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + + // Misc + 'cursor-pointer', + 'select-none' + ] + }) + }, + filterrowitems: { + class: 'm-0 p-0 py-3 list-none' + }, + filterrowitem: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Position + 'relative', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + { 'text-surface-700 dark:text-white/80': !context?.highlighted }, + { 'bg-surface-0 dark:bg-surface-800 text-surface-700 dark:text-white/80': !context?.highlighted }, + { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context?.highlighted }, + { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context?.highlighted }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context?.highlighted }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': !context?.highlighted }, + 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + 'cursor-pointer', + 'overflow-hidden', + 'whitespace-nowrap' + ] + }), + filteroperator: { + class: [ + // Spacing + 'px-5 py-3', + + // Shape + 'border-b border-solid', + 'rounded-t-md', + + // Color + 'text-surface-700 dark:text-white/80', + 'border-surface-200 dark:border-surface-800', + 'bg-surface-0 dark:bg-surface-700' + ] + }, + filteroperatordropdown: { + root: ({ state }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + 'w-full', + 'rounded-md', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-700', + + // Transitions + 'transition-all', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-300', + { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + + // Misc + 'cursor-pointer', + 'select-none' + ] + }), + input: ({ props }) => ({ + class: [ + //Font + 'leading-none', + + // Display + 'block', + 'flex-auto', + + // Color and Background + 'bg-transparent', + 'border-0', + { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue }, + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + + // Sizing and Spacing + 'w-[1%]', + 'p-3', + + //Shape + 'rounded-none', + + // Transitions + 'transition', + 'duration-200', + + // States + 'focus:outline-none focus:shadow-none', + + // Misc + 'relative', + 'cursor-pointer', + 'overflow-hidden overflow-ellipsis', + 'whitespace-nowrap', + 'appearance-none' + ] + }), + trigger: { + class: [ + // Flexbox + 'flex items-center justify-center', + 'shrink-0', + + // Color and Background + 'bg-transparent', + 'text-surface-500', + + // Size + 'w-12', + + // Shape + 'rounded-tr-md', + 'rounded-br-md' + ] + }, + panel: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + item: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Position + 'relative', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, + { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, + { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, + { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + 'cursor-pointer', + 'overflow-hidden', + 'whitespace-nowrap' + ] + }) + }, + filterconstraint: { + class: [ + // Spacing + 'py-3 px-5', + + // Shape + 'border-b border-solid', + + // Color + 'border-surface-200 dark:border-surface-700' + ] + }, + filteraddrule: { + class: 'py-3 px-5' + }, + filteraddrulebutton: { + root: { + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'text-sm py-2 px-3 w-full', + + // Shape + 'rounded-md', + + 'bg-transparent border-transparent', + 'text-primary-500 dark:text-primary-400', + 'hover:bg-primary-300/20', + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + }, + label: { + class: 'flex-auto grow-0' + }, + icon: { + class: 'mr-2' + } + }, + filterremovebutton: { + root: { + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'text-sm py-2 px-3 w-full mt-2', + + // Shape + 'rounded-md', + + 'bg-transparent border-transparent', + 'text-red-500 dark:text-red-400', + 'hover:bg-red-300/20', + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + }, + label: { + class: 'flex-auto grow-0' + }, + icon: { + class: 'mr-2' + } + }, + filterbuttonbar: { + class: [ + // Flex & Alignment + 'flex items-center justify-between', + + // Space + 'py-3 px-5' + ] + }, + filterclearbutton: { + root: { + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'text-sm py-2 px-3', + + // Shape + 'rounded-md', + + 'text-primary-500 border border-primary-500', + 'hover:bg-primary-300/20', + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + } + }, + filterapplybutton: { + root: { + class: [ + 'relative', + + // Alignments + 'items-center inline-flex text-center align-bottom justify-center', + + // Sizes & Spacing + 'text-sm py-2 px-3', + + // Shape + 'rounded-md', + + 'text-white dark:text-surface-900', + 'bg-primary-500 dark:bg-primary-400', + 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', + + // Transitions + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer overflow-hidden select-none' + ] + } + }, + filtermenubutton: ({ context }) => ({ + class: [ + 'relative', + // Flex & Alignment + 'inline-flex items-center justify-center', + + // Size + 'w-8 h-8', + + // Spacing + 'ml-2', + + // Shape + 'rounded-full', + + // Color + { 'bg-primary-50 text-primary-700': context.active }, + 'dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-800', + + // States + 'hover:text-surface-700 hover:bg-surface-300/20', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Transition + 'transition duration-200', + + // Misc + 'cursor-pointer no-underline overflow-hidden' + ] + }), + headerfilterclearbutton: ({ context }) => ({ + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + 'text-left', + + // Shape + 'border-none', + + // Spacing + 'm-0 p-0 ml-2', + + // Color + 'bg-transparent', + + // Misc + 'cursor-pointer no-underline overflow-hidden select-none', + { + invisible: !context.hidden + } + ] + }), + rowtoggler: { + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + 'text-left', + + // Spacing + 'm-0 p-0', + + // Size + 'w-8 h-8', + + // Shape + 'border-0 rounded-full', + + // Color + 'text-surface-500 dark:text-white/70', + 'bg-transparent', + 'focus-visible:outline-none focus-visible:outline-offset-0', + 'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', + + // Transition + 'transition duration-200', + + // Misc + 'overflow-hidden', + 'cursor-pointer select-none' + ] + }, + columnresizer: { + class: [ + 'block', + + // Position + 'absolute top-0 right-0', + + // Sizing + 'w-2 h-full', + + // Spacing + 'm-0 p-0', + + // Color + 'border border-transparent', + + // Misc + 'cursor-col-resize' + ] + }, + rowreordericon: { + class: 'cursor-move' + }, + roweditorinitbutton: { + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + 'text-left', + + // Size + 'w-8 h-8', + + // Shape + 'border-0 rounded-full', + + // Color + 'text-surface-700 dark:text-white/70', + 'border-transparent', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + 'hover:text-surface-700 hover:bg-surface-300/20', + + // Transition + 'transition duration-200', + + // Misc + 'overflow-hidden', + 'cursor-pointer select-none' + ] + }, + roweditorsavebutton: { + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + 'text-left', + + // Size + 'w-8 h-8', + + // Shape + 'border-0 rounded-full', + + // Color + 'text-surface-700 dark:text-white/70', + 'border-transparent', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + 'hover:text-surface-700 hover:bg-surface-300/20', + + // Transition + 'transition duration-200', + + // Misc + 'overflow-hidden', + 'cursor-pointer select-none' + ] + }, + roweditorcancelbutton: { + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + 'text-left', + + // Size + 'w-8 h-8', + + // Shape + 'border-0 rounded-full', + + // Color + 'text-surface-700 dark:text-white/70', + 'border-transparent', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + 'hover:text-surface-700 hover:bg-surface-300/20', + + // Transition + 'transition duration-200', + + // Misc + 'overflow-hidden', + 'cursor-pointer select-none' + ] + }, + rowRadiobutton: { + root: { + class: [ + 'relative', + + // Flexbox & Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-[1.571rem] h-[1.571rem]', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: ({ props }) => ({ + class: [ + // Flexbox + 'flex justify-center items-center', + + // Size + 'w-[1.571rem] h-[1.571rem]', + + // Shape + 'border-2', + 'rounded-full', + + // Transition + 'transition duration-200 ease-in-out', + + // Colors + { + 'text-surface-700 dark:text-white/80': !props.modelValue, + 'bg-surface-0 dark:bg-surface-900': !props.modelValue, + 'border-surface-300 dark:border-surface-700': !props.modelValue, + 'border-primary-500 dark:border-primary-400': props.modelValue, + 'bg-primary-500 dark:bg-primary-400': props.modelValue + }, + + // States + { + 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled, + 'peer-hover:border-primary-600 dark:peer-hover:border-primary-300 peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300': !props.disabled && props.modelValue, + 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, + 'opacity-60 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-2 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: ({ props }) => ({ + class: [ + 'block', + + // Shape + 'rounded-full', + + // Size + 'w-[0.857rem] h-[0.857rem]', + + // Colors + 'bg-surface-0 dark:bg-surface-900', + + // Conditions + { + 'backface-hidden scale-10 invisible': !props.modelValue, + 'transform visible scale-[1.1]': props.modelValue + }, + + // Transition + 'transition duration-200' + ] + }) + }, + headercheckbox: { + root: { + class: [ + 'relative', + + // Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-6', + 'h-6', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: ({ props, context }) => ({ + class: [ + // Alignment + 'flex', + 'items-center', + 'justify-center', + + // Size + 'w-6', + 'h-6', + + // Shape + 'rounded-md', + 'border-2', + + // Colors + { + 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, + 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked + }, + + // States + { + 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, + 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, + 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, + 'cursor-default opacity-60': props.disabled + }, + + // Transitions + 'transition-colors', + 'duration-200' + ] + }), + 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-2 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: { + class: [ + // Font + 'text-base leading-none', + + // Size + 'w-4', + 'h-4', + + // Colors + 'text-white dark:text-surface-900', + + // Transitions + 'transition-all', + 'duration-200' + ] + } + }, + rowCheckbox: { + root: { + class: [ + 'relative', + + // Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-6', + 'h-6', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: ({ props, context }) => ({ + class: [ + // Alignment + 'flex', + 'items-center', + 'justify-center', + + // Size + 'w-6', + 'h-6', + + // Shape + 'rounded-md', + 'border-2', + + // Colors + { + 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, + 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked + }, + + // States + { + 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, + 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, + 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, + 'cursor-default opacity-60': props.disabled + }, + + // Transitions + 'transition-colors', + 'duration-200' + ] + }), + 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-2 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: { + class: [ + // Font + 'text-base leading-none', + + // Size + 'w-4', + 'h-4', + + // Colors + 'text-white dark:text-surface-900', + + // Transitions + 'transition-all', + 'duration-200' + ] + } + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } + }, + bodyrow: ({ context, props }) => ({ + class: [ + // Color + 'dark:text-white/80', + { 'bg-primary-50 text-primary-700 dark:bg-primary-400/30': context.selected }, + { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected }, + { 'font-bold bg-surface-0 dark:bg-surface-800 z-20': props.frozenRow }, + { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-800 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-900/50': context.stripedRows }, + + // State + { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50': context.selectable }, + { 'hover:bg-surface-300/20 hover:text-surface-600': props.selectionMode && !context.selected }, + + // Transition + { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }, + + // Misc + { 'cursor-pointer': props.selectionMode } + ] + }), + rowexpansion: { + class: 'bg-surface-0 dark:bg-surface-800 text-surface-600 dark:text-white/80' + }, + rowgroupheader: { + class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800'] + }, + rowgroupfooter: { + class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800'] + }, + rowgrouptoggler: { + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + 'text-left', + + // Spacing + 'm-0 p-0', + + // Size + 'w-8 h-8', + + // Shape + 'border-0 rounded-full', + + // Color + 'text-surface-500 dark:text-white/70', + 'bg-transparent', + 'focus-visible:outline-none focus-visible:outline-offset-0', + 'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', + + // Transition + 'transition duration-200', + + // Misc + 'overflow-hidden', + 'cursor-pointer select-none' + ] + }, + rowgrouptogglericon: { + class: 'inline-block w-4 h-4' + }, + resizehelper: { + class: 'absolute hidden w-[2px] z-20 bg-primary-500 dark:bg-primary-400' + } +}; diff --git a/presets/lara/dropdown/index.js b/presets/lara/dropdown/index.js index c1ad29a2..63f7ab4c 100644 --- a/presets/lara/dropdown/index.js +++ b/presets/lara/dropdown/index.js @@ -1,271 +1,269 @@ -export default { - root: ({ props, state, parent }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - { 'rounded-md': parent.instance.$name !== 'InputGroup' }, - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, - { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - - 'border border-surface-300', - { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' }, - { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' }, - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - input: ({ props }) => ({ - class: [ - //Font - 'font-sans', - 'leading-none', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - { 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Sizing and Spacing - 'w-[1%]', - 'p-3', - { 'pr-7': props.showClear }, - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }), - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected && !context.disabled }, - { 'text-surface-600 dark:text-white/70': !context.focused && !context.selected && context.disabled }, - { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, - { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - { 'pointer-events-none cursor-default': context.disabled }, - { 'cursor-pointer': !context.disabled }, - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - itemgroup: { - class: [ - //Font - 'font-bold', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-600/80', - - // Misc - 'cursor-auto' - ] - }, - emptymessage: { - class: [ - // Font - 'leading-none', - - // Spacing - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-transparent' - ] - }, - header: { - class: [ - // Spacing - 'py-3 px-5', - 'm-0', - - //Shape - 'border-b', - 'rounded-tl-md', - 'rounded-tr-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-100 dark:bg-surface-800', - 'border-surface-300 dark:border-surface-700' - ] - }, - filtercontainer: { - class: 'relative' - }, - filterinput: { - class: [ - // Font - 'font-sans', - 'leading-none', - - // Sizing - 'pr-7 py-3 px-3', - '-mr-7', - 'w-full', - - //Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - - // Shape - 'border', - 'rounded-lg', - 'appearance-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-300', - 'focus:ring focus:outline-none focus:outline-offset-0', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'appearance-none' - ] - }, - filtericon: { - class: ['absolute', 'top-1/2 right-3', '-mt-2'] - }, - clearicon: { - class: [ - // Color - 'text-surface-500', - - // Position - 'absolute', - 'top-1/2', - 'right-12', - - // Spacing - '-mt-2' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props, state, parent }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + { 'rounded-md': parent.instance.$name !== 'InputGroup' }, + { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, + { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, + { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons }, + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + + 'border border-surface-300', + { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' }, + { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' }, + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // Transitions + 'transition-all', + 'duration-200', + + // States + { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, + { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + + // Misc + 'cursor-pointer', + 'select-none', + { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } + ] + }), + input: ({ props }) => ({ + class: [ + //Font + 'leading-none', + + // Display + 'block', + 'flex-auto', + + // Color and Background + 'bg-transparent', + 'border-0', + { 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined }, + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + + // Sizing and Spacing + 'w-[1%]', + 'p-3', + { 'pr-7': props.showClear }, + + //Shape + 'rounded-none', + + // Transitions + 'transition', + 'duration-200', + + // States + 'focus:outline-none focus:shadow-none', + + // Misc + 'relative', + 'cursor-pointer', + 'overflow-hidden overflow-ellipsis', + 'whitespace-nowrap', + 'appearance-none' + ] + }), + trigger: { + class: [ + // Flexbox + 'flex items-center justify-center', + 'shrink-0', + + // Color and Background + 'bg-transparent', + 'text-surface-500', + + // Size + 'w-12', + + // Shape + 'rounded-tr-md', + 'rounded-br-md' + ] + }, + panel: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + wrapper: { + class: [ + // Sizing + 'max-h-[200px]', + + // Misc + 'overflow-auto' + ] + }, + list: { + class: 'py-3 list-none m-0' + }, + item: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Position + 'relative', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected && !context.disabled }, + { 'text-surface-600 dark:text-white/70': !context.focused && !context.selected && context.disabled }, + { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, + { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, + { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, + 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + { 'pointer-events-none cursor-default': context.disabled }, + { 'cursor-pointer': !context.disabled }, + 'overflow-hidden', + 'whitespace-nowrap' + ] + }), + itemgroup: { + class: [ + //Font + 'font-bold', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + 'text-surface-800 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-600/80', + + // Misc + 'cursor-auto' + ] + }, + emptymessage: { + class: [ + // Font + 'leading-none', + + // Spacing + 'py-3 px-5', + + // Color + 'text-surface-800 dark:text-white/80', + 'bg-transparent' + ] + }, + header: { + class: [ + // Spacing + 'py-3 px-5', + 'm-0', + + //Shape + 'border-b', + 'rounded-tl-md', + 'rounded-tr-md', + + // Color + 'text-surface-700 dark:text-white/80', + 'bg-surface-100 dark:bg-surface-800', + 'border-surface-300 dark:border-surface-700' + ] + }, + filtercontainer: { + class: 'relative' + }, + filterinput: { + class: [ + // Font + 'leading-none', + + // Sizing + 'pr-7 py-3 px-3', + '-mr-7', + 'w-full', + + //Color + 'text-surface-700 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-900', + 'border-surface-200 dark:border-surface-700', + + // Shape + 'border', + 'rounded-lg', + 'appearance-none', + + // Transitions + 'transition', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-300', + 'focus:ring focus:outline-none focus:outline-offset-0', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Misc + 'appearance-none' + ] + }, + filtericon: { + class: ['absolute', 'top-1/2 right-3', '-mt-2'] + }, + clearicon: { + class: [ + // Color + 'text-surface-500', + + // Position + 'absolute', + 'top-1/2', + 'right-12', + + // Spacing + '-mt-2' + ] + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/lara/inputmask/index.js b/presets/lara/inputmask/index.js index 57764a07..1ea0f326 100644 --- a/presets/lara/inputmask/index.js +++ b/presets/lara/inputmask/index.js @@ -1,36 +1,36 @@ -export default { - root: ({ context, props }) => ({ - class: [ - // Font - 'font-sans leading-none', - - // Spacing - 'm-0 p-3', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Misc - 'rounded-md', - 'appearance-none', - 'transition-colors duration-200' - ] - }) -}; +export default { + root: ({ context, props }) => ({ + class: [ + // Font + 'leading-none', + + // Spacing + 'm-0 p-3', + + // Colors + 'text-surface-600 dark:text-surface-200', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + 'invalid:focus:ring-red-200', + 'invalid:hover:border-red-500', + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { + 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled + }, + + // Misc + 'rounded-md', + 'appearance-none', + 'transition-colors duration-200' + ] + }) +}; diff --git a/presets/lara/inputnumber/index.js b/presets/lara/inputnumber/index.js index 395b4fe6..1b62df2f 100644 --- a/presets/lara/inputnumber/index.js +++ b/presets/lara/inputnumber/index.js @@ -1,166 +1,166 @@ -export default { - root: ({ props, parent }) => ({ - class: [ - // Flex - 'inline-flex', - { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' }, - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - - // Shape - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons }, - { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' && !props.showButtons }, - { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - //Sizing - { '!w-16': props.showButtons && props.buttonLayout == 'vertical' } - ] - }), - input: { - root: ({ parent, context }) => ({ - class: [ - // Display - 'flex flex-auto', - - // Font - 'font-sans leading-none', - - //Text - { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - // Spacing - 'p-3', - 'm-0', - - // Shape - 'rounded-lg', - { 'rounded-tr-none rounded-br-none': parent.props.showButtons }, - { 'rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - { '!rounded-none': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons }, - { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons }, - - // Colors - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !parent.props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': parent.props.invalid }, - - // States - { 'hover:border-primary-500 dark:hover:border-primary-400': !parent.props.invalid }, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10', - { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.state.d_modelValue !== null }, - - //Position - { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' } - ] - }) - }, - buttongroup: ({ props }) => ({ - class: [ - // Flex - 'flex', - 'flex-col' - ] - }), - - incrementbutton: { - root: ({ parent }) => ({ - class: [ - // Display - 'flex flex-auto', - - // Alignment - 'items-center', - 'justify-center', - 'text-center align-bottom', - - //Position - 'relative', - { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - //Color - 'text-white dark:text-surface-900', - 'bg-primary-500 dark:bg-primary-400', - 'border border-primary-500 dark:border-primary-400', - - // Sizing - 'w-[3rem]', - { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' }, - { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - // Shape - 'rounded-md', - { 'rounded-tl-none rounded-br-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - //States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', - - //Misc - 'cursor-pointer overflow-hidden select-none' - ] - }), - label: { - class: 'h-0 w-0' - } - }, - decrementbutton: { - root: ({ parent }) => ({ - class: [ - // Display - 'flex flex-auto', - - // Alignment - 'items-center', - 'justify-center', - 'text-center align-bottom', - - //Position - 'relative', - { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - //Color - 'text-white dark:text-surface-900', - 'bg-primary-500 dark:bg-primary-400', - 'border border-primary-500 dark:border-primary-400', - - // Sizing - 'w-[3rem]', - { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' }, - { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - // Shape - 'rounded-md', - { 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - //States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', - - //Misc - 'cursor-pointer overflow-hidden select-none' - ] - }), - label: { - class: 'h-0 w-0' - } - } -}; +export default { + root: ({ props, parent }) => ({ + class: [ + // Flex + 'inline-flex', + { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' }, + { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, + + // Shape + { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons }, + { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' && !props.showButtons }, + { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, + + //Sizing + { '!w-16': props.showButtons && props.buttonLayout == 'vertical' } + ] + }), + input: { + root: ({ parent, context }) => ({ + class: [ + // Display + 'flex flex-auto', + + // Font + 'leading-none', + + //Text + { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + // Spacing + 'p-3', + 'm-0', + + // Shape + 'rounded-lg', + { 'rounded-tr-none rounded-br-none': parent.props.showButtons }, + { 'rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, + { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + { '!rounded-none': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons }, + { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons }, + + // Colors + 'text-surface-800 dark:text-white/80', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !parent.props.invalid }, + + // Invalid State + 'invalid:focus:ring-red-200', + 'invalid:hover:border-red-500', + { 'border-red-500 dark:border-red-400': parent.props.invalid }, + + // States + { 'hover:border-primary-500 dark:hover:border-primary-400': !parent.props.invalid }, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10', + { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }, + + // Filled State *for FloatLabel + { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.state.d_modelValue !== null }, + + //Position + { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' } + ] + }) + }, + buttongroup: ({ props }) => ({ + class: [ + // Flex + 'flex', + 'flex-col' + ] + }), + + incrementbutton: { + root: ({ parent }) => ({ + class: [ + // Display + 'flex flex-auto', + + // Alignment + 'items-center', + 'justify-center', + 'text-center align-bottom', + + //Position + 'relative', + { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, + { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + //Color + 'text-white dark:text-surface-900', + 'bg-primary-500 dark:bg-primary-400', + 'border border-primary-500 dark:border-primary-400', + + // Sizing + 'w-[3rem]', + { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' }, + { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, + { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + // Shape + 'rounded-md', + { 'rounded-tl-none rounded-br-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, + { 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, + { 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + //States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', + + //Misc + 'cursor-pointer overflow-hidden select-none' + ] + }), + label: { + class: 'h-0 w-0' + } + }, + decrementbutton: { + root: ({ parent }) => ({ + class: [ + // Display + 'flex flex-auto', + + // Alignment + 'items-center', + 'justify-center', + 'text-center align-bottom', + + //Position + 'relative', + { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, + { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + //Color + 'text-white dark:text-surface-900', + 'bg-primary-500 dark:bg-primary-400', + 'border border-primary-500 dark:border-primary-400', + + // Sizing + 'w-[3rem]', + { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' }, + { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, + { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + // Shape + 'rounded-md', + { 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, + { 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, + { 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, + + //States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300', + + //Misc + 'cursor-pointer overflow-hidden select-none' + ] + }), + label: { + class: 'h-0 w-0' + } + } +}; diff --git a/presets/lara/inputotp/index.js b/presets/lara/inputotp/index.js index d44262f3..52220944 100644 --- a/presets/lara/inputotp/index.js +++ b/presets/lara/inputotp/index.js @@ -1,62 +1,62 @@ -export default { - root: { - class: [ - // Alignment - 'flex items-center', - 'gap-2' - ] - }, - input: { - root: ({ props, context, parent }) => ({ - class: [ - // Font - 'font-sans leading-none', - - // Flex & Alignment - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - 'text-center', - - // Spacing - 'm-0', - { - 'p-3': props.size == null - }, - - // Size - 'w-10', - - // Shape - { 'rounded-md': parent.instance.$name !== 'InputGroup' }, - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, - { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - // Colors - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$name == 'FloatLabel' && context.filled }, - - // Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }) - } -}; +export default { + root: { + class: [ + // Alignment + 'flex items-center', + 'gap-2' + ] + }, + input: { + root: ({ props, context, parent }) => ({ + class: [ + // Font + 'leading-none', + + // Flex & Alignment + { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, + 'text-center', + + // Spacing + 'm-0', + { + 'p-3': props.size == null + }, + + // Size + 'w-10', + + // Shape + { 'rounded-md': parent.instance.$name !== 'InputGroup' }, + { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, + { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, + { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons }, + + // Colors + 'text-surface-800 dark:text-white/80', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + 'invalid:focus:ring-red-200', + 'invalid:hover:border-red-500', + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { + 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled + }, + + // Filled State *for FloatLabel + { filled: parent.instance?.$name == 'FloatLabel' && context.filled }, + + // Misc + 'appearance-none', + 'transition-colors duration-200' + ] + }) + } +}; diff --git a/presets/lara/inputtext/index.js b/presets/lara/inputtext/index.js index a4c60271..054a030b 100644 --- a/presets/lara/inputtext/index.js +++ b/presets/lara/inputtext/index.js @@ -1,51 +1,51 @@ -export default { - root: ({ props, context, parent }) => ({ - class: [ - // Font - 'font-sans leading-none', - - // Flex - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - - // Spacing - 'm-0', - { - 'px-4 py-4': props.size == 'large', - 'px-2 py-2': props.size == 'small', - 'p-3': props.size == null - }, - - // Shape - { 'rounded-md': parent.instance.$name !== 'InputGroup' }, - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, - { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - // Colors - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$name == 'FloatLabel' && context.filled }, - - // Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }) -}; +export default { + root: ({ props, context, parent }) => ({ + class: [ + // Font + 'leading-none', + + // Flex + { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, + + // Spacing + 'm-0', + { + 'px-4 py-4': props.size == 'large', + 'px-2 py-2': props.size == 'small', + 'p-3': props.size == null + }, + + // Shape + { 'rounded-md': parent.instance.$name !== 'InputGroup' }, + { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, + { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, + { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, + + // Colors + 'text-surface-800 dark:text-white/80', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + 'invalid:focus:ring-red-200', + 'invalid:hover:border-red-500', + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { + 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled + }, + + // Filled State *for FloatLabel + { filled: parent.instance?.$name == 'FloatLabel' && context.filled }, + + // Misc + 'appearance-none', + 'transition-colors duration-200' + ] + }) +}; diff --git a/presets/lara/listbox/index.js b/presets/lara/listbox/index.js index 02bf2b8d..fbf55e31 100644 --- a/presets/lara/listbox/index.js +++ b/presets/lara/listbox/index.js @@ -1,152 +1,151 @@ -export default { - root: ({ props }) => ({ - class: [ - // Sizing and Shape - 'min-w-[12rem]', - 'rounded-md', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-white/80', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid } - ] - }), - wrapper: { - class: [ - // Overflow - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, - { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - itemgroup: { - class: [ - //Font - 'font-bold', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-600/80', - - // Misc - 'cursor-auto' - ] - }, - header: { - class: [ - // Spacing - 'py-3 px-5', - 'm-0', - - //Shape - 'border-b', - 'rounded-tl-md', - 'rounded-tr-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-100 dark:bg-surface-800', - 'border-surface-300 dark:border-surface-600' - ] - }, - filtercontainer: { - class: 'relative' - }, - filterinput: { - class: [ - // Font - 'font-sans', - 'leading-none', - - // Sizing - 'pr-7 py-3 px-3', - '-mr-7', - 'w-full', - - //Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - - // Shape - 'border', - 'rounded-lg', - 'appearance-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-300', - 'focus:ring focus:outline-none focus:outline-offset-0', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'appearance-none' - ] - }, - filtericon: { - class: ['absolute', 'top-1/2 right-3', '-mt-2'] - }, - emptymessage: { - class: [ - // Font - 'leading-none', - - // Spacing - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-transparent' - ] - } -}; +export default { + root: ({ props }) => ({ + class: [ + // Sizing and Shape + 'min-w-[12rem]', + 'rounded-md', + + // Colors + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-700 dark:text-white/80', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid } + ] + }), + wrapper: { + class: [ + // Overflow + 'overflow-auto' + ] + }, + list: { + class: 'py-3 list-none m-0' + }, + item: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Position + 'relative', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, + { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, + { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, + { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, + 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + 'cursor-pointer', + 'overflow-hidden', + 'whitespace-nowrap' + ] + }), + itemgroup: { + class: [ + //Font + 'font-bold', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + 'text-surface-800 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-600/80', + + // Misc + 'cursor-auto' + ] + }, + header: { + class: [ + // Spacing + 'py-3 px-5', + 'm-0', + + //Shape + 'border-b', + 'rounded-tl-md', + 'rounded-tr-md', + + // Color + 'text-surface-700 dark:text-white/80', + 'bg-surface-100 dark:bg-surface-800', + 'border-surface-300 dark:border-surface-600' + ] + }, + filtercontainer: { + class: 'relative' + }, + filterinput: { + class: [ + // Font + 'leading-none', + + // Sizing + 'pr-7 py-3 px-3', + '-mr-7', + 'w-full', + + //Color + 'text-surface-700 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-900', + 'border-surface-200 dark:border-surface-700', + + // Shape + 'border', + 'rounded-lg', + 'appearance-none', + + // Transitions + 'transition', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-300', + 'focus:ring focus:outline-none focus:outline-offset-0', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Misc + 'appearance-none' + ] + }, + filtericon: { + class: ['absolute', 'top-1/2 right-3', '-mt-2'] + }, + emptymessage: { + class: [ + // Font + 'leading-none', + + // Spacing + 'py-3 px-5', + + // Color + 'text-surface-800 dark:text-white/80', + 'bg-transparent' + ] + } +}; diff --git a/presets/lara/multiselect/index.js b/presets/lara/multiselect/index.js index b2cc2358..e9cb8b30 100644 --- a/presets/lara/multiselect/index.js +++ b/presets/lara/multiselect/index.js @@ -1,546 +1,545 @@ -export default { - root: ({ props, state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - labelContainer: { - class: 'overflow-hidden flex flex-auto cursor-pointer ' - }, - label: ({ props }) => ({ - class: [ - 'leading-none', - 'block ', - - // Spacing - { - 'p-3': props.display !== 'chip', - 'py-3 px-3': props.display === 'chip' && !props?.modelValue?.length, - 'py-1.5 px-3': props.display === 'chip' && props?.modelValue?.length > 0 - }, - - // Color - { 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Transitions - 'transition duration-200', - - // Misc - 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis' - ] - }), - token: { - class: [ - // Flex - 'inline-flex items-center', - - // Spacings - 'py-1.5 px-3 mr-2', - - // Shape - 'rounded-[1.14rem]', - - // Colors - 'bg-surface-200 dark:bg-surface-700', - 'text-surface-700 dark:text-white/70', - - // Misc - 'cursor-default' - ] - }, - removeTokenIcon: { - class: [ - // Shape - 'rounded-md leading-6', - - // Spacing - 'ml-2', - - // Size - 'w-4 h-4', - - // Transition - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - header: { - class: [ - 'flex items-center justify-between', - // Spacing - 'py-3 px-5', - 'm-0', - - //Shape - 'border-b', - 'rounded-tl-md', - 'rounded-tr-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-100 dark:bg-surface-800', - 'border-surface-300 dark:border-surface-700' - ] - }, - headerCheckboxContainer: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - headerCheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked - }, - - // States - { - 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, - 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - 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-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - itemCheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked - }, - - // States - { - 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, - 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - 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-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - closeButton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'flex items-center justify-center', - - // Size and Spacing - 'mr-2', - 'last:mr-0', - 'w-8 h-8', - - // Shape - 'border-0', - 'rounded-full', - - // Colors - 'text-surface-500', - 'bg-transparent', - - // Transitions - 'transition duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'overflow-hidden' - ] - }, - closeButtonIcon: { - class: 'w-4 h-4 inline-block' - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Flexbox - 'flex items-center', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, - { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - itemgroup: { - class: [ - //Font - 'font-bold', - - // Spacing - 'm-0', - 'p-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-600/80', - - // Misc - 'cursor-auto' - ] - }, - filtercontainer: { - class: 'relative w-full mx-2' - }, - filterinput: { - class: [ - // Font - 'font-sans', - 'leading-none', - - // Sizing - 'pr-7 py-3 px-3', - '-mr-7', - 'w-full', - - //Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Shape - 'border', - 'rounded-lg', - 'appearance-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-300', - 'focus:ring focus:outline-none focus:outline-offset-0', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'appearance-none' - ] - }, - filtericon: { - class: ['absolute', 'top-1/2 right-3', '-mt-2'] - }, - clearicon: { - class: [ - // Color - 'text-surface-500', - - // Position - 'absolute', - 'top-1/2', - 'right-12', - - // Spacing - '-mt-2' - ] - }, - emptymessage: { - class: [ - // Font - 'leading-none', - - // Spacing - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-transparent' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props, state }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + 'rounded-md', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // Transitions + 'transition-all', + 'duration-200', + + // States + { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, + { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + + // Misc + 'cursor-pointer', + 'select-none', + { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } + ] + }), + labelContainer: { + class: 'overflow-hidden flex flex-auto cursor-pointer ' + }, + label: ({ props }) => ({ + class: [ + 'leading-none', + 'block ', + + // Spacing + { + 'p-3': props.display !== 'chip', + 'py-3 px-3': props.display === 'chip' && !props?.modelValue?.length, + 'py-1.5 px-3': props.display === 'chip' && props?.modelValue?.length > 0 + }, + + // Color + { 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length }, + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + + // Transitions + 'transition duration-200', + + // Misc + 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis' + ] + }), + token: { + class: [ + // Flex + 'inline-flex items-center', + + // Spacings + 'py-1.5 px-3 mr-2', + + // Shape + 'rounded-[1.14rem]', + + // Colors + 'bg-surface-200 dark:bg-surface-700', + 'text-surface-700 dark:text-white/70', + + // Misc + 'cursor-default' + ] + }, + removeTokenIcon: { + class: [ + // Shape + 'rounded-md leading-6', + + // Spacing + 'ml-2', + + // Size + 'w-4 h-4', + + // Transition + 'transition duration-200 ease-in-out', + + // Misc + 'cursor-pointer' + ] + }, + trigger: { + class: [ + // Flexbox + 'flex items-center justify-center', + 'shrink-0', + + // Color and Background + 'bg-transparent', + 'text-surface-500', + + // Size + 'w-12', + + // Shape + 'rounded-tr-md', + 'rounded-br-md' + ] + }, + panel: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + header: { + class: [ + 'flex items-center justify-between', + // Spacing + 'py-3 px-5', + 'm-0', + + //Shape + 'border-b', + 'rounded-tl-md', + 'rounded-tr-md', + + // Color + 'text-surface-700 dark:text-white/80', + 'bg-surface-100 dark:bg-surface-800', + 'border-surface-300 dark:border-surface-700' + ] + }, + headerCheckboxContainer: { + class: [ + 'relative', + + // Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-6', + 'h-6', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + headerCheckbox: { + root: { + class: [ + 'relative', + + // Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-6', + 'h-6', + + // Spacing + 'mr-2', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: ({ props, context }) => ({ + class: [ + // Alignment + 'flex', + 'items-center', + 'justify-center', + + // Size + 'w-6', + 'h-6', + + // Shape + 'rounded-md', + 'border-2', + + // Colors + { + 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, + 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked + }, + + // States + { + 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, + 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, + 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, + 'cursor-default opacity-60': props.disabled + }, + + // Transitions + 'transition-colors', + 'duration-200' + ] + }), + 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-2 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: { + class: [ + // Font + 'text-base leading-none', + + // Size + 'w-4', + 'h-4', + + // Colors + 'text-white dark:text-surface-900', + + // Transitions + 'transition-all', + 'duration-200' + ] + } + }, + itemCheckbox: { + root: { + class: [ + 'relative', + + // Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-6', + 'h-6', + + // Spacing + 'mr-2', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: ({ props, context }) => ({ + class: [ + // Alignment + 'flex', + 'items-center', + 'justify-center', + + // Size + 'w-6', + 'h-6', + + // Shape + 'rounded-md', + 'border-2', + + // Colors + { + 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, + 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked + }, + + // States + { + 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, + 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, + 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, + 'cursor-default opacity-60': props.disabled + }, + + // Transitions + 'transition-colors', + 'duration-200' + ] + }), + 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-2 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: { + class: [ + // Font + 'text-base leading-none', + + // Size + 'w-4', + 'h-4', + + // Colors + 'text-white dark:text-surface-900', + + // Transitions + 'transition-all', + 'duration-200' + ] + } + }, + closeButton: { + class: [ + 'relative', + + // Flexbox and Alignment + 'flex items-center justify-center', + + // Size and Spacing + 'mr-2', + 'last:mr-0', + 'w-8 h-8', + + // Shape + 'border-0', + 'rounded-full', + + // Colors + 'text-surface-500', + 'bg-transparent', + + // Transitions + 'transition duration-200 ease-in-out', + + // States + 'hover:text-surface-700 dark:hover:text-white/80', + 'hover:bg-surface-100 dark:hover:bg-surface-800/80', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Misc + 'overflow-hidden' + ] + }, + closeButtonIcon: { + class: 'w-4 h-4 inline-block' + }, + wrapper: { + class: [ + // Sizing + 'max-h-[200px]', + + // Misc + 'overflow-auto' + ] + }, + list: { + class: 'py-3 list-none m-0' + }, + item: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Flexbox + 'flex items-center', + + // Position + 'relative', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, + { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, + { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, + { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + 'cursor-pointer', + 'overflow-hidden', + 'whitespace-nowrap' + ] + }), + itemgroup: { + class: [ + //Font + 'font-bold', + + // Spacing + 'm-0', + 'p-3 px-5', + + // Color + 'text-surface-800 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-600/80', + + // Misc + 'cursor-auto' + ] + }, + filtercontainer: { + class: 'relative w-full mx-2' + }, + filterinput: { + class: [ + // Font + 'leading-none', + + // Sizing + 'pr-7 py-3 px-3', + '-mr-7', + 'w-full', + + //Color + 'text-surface-700 dark:text-white/80', + 'bg-surface-0 dark:bg-surface-900', + 'border-surface-200 dark:border-surface-700', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + + // Shape + 'border', + 'rounded-lg', + 'appearance-none', + + // Transitions + 'transition', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-300', + 'focus:ring focus:outline-none focus:outline-offset-0', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Misc + 'appearance-none' + ] + }, + filtericon: { + class: ['absolute', 'top-1/2 right-3', '-mt-2'] + }, + clearicon: { + class: [ + // Color + 'text-surface-500', + + // Position + 'absolute', + 'top-1/2', + 'right-12', + + // Spacing + '-mt-2' + ] + }, + emptymessage: { + class: [ + // Font + 'leading-none', + + // Spacing + 'py-3 px-5', + + // Color + 'text-surface-800 dark:text-white/80', + 'bg-transparent' + ] + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/lara/paginator/index.js b/presets/lara/paginator/index.js index 035907bf..fdbf32be 100644 --- a/presets/lara/paginator/index.js +++ b/presets/lara/paginator/index.js @@ -1,533 +1,530 @@ -export default { - root: { - class: [ - // Flex & Alignment - 'flex items-center justify-center flex-wrap', - - // Spacing - 'px-4 py-2', - - // Shape - 'border-0', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-500 dark:text-white/60' - ] - }, - firstpagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - previouspagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - nextpagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - lastpagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - pagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/80', - { - 'bg-primary-50 border-primary-50 dark:border-transparent text-primary-700 dark:text-surface-0 dark:bg-primary-400/30': context.active - }, - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled && !context.active, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - rowperpagedropdown: { - root: ({ props, state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'h-12', - 'rounded-md', - - // Spacing - 'mx-2', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-300', - { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - input: { - class: [ - //Font - 'font-sans', - 'leading-5', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - 'text-surface-800 dark:text-white/80', - - // Sizing and Spacing - 'w-[1%]', - 'p-3 pr-0', - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, - { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }) - }, - jumptopageinput: { - root: { - class: 'inline-flex mx-2' - }, - input: { - root: { - class: [ - 'relative', - - //Font - 'font-sans', - 'leading-none', - - // Display - 'block', - 'flex-auto', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-600', - - // Sizing and Spacing - 'w-[1%] max-w-[3rem]', - 'p-3 m-0', - - //Shape - 'rounded-md', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-400', - 'focus:outline-none focus:shadow-none', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', - - // Misc - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - } - } - }, - jumptopagedropdown: { - root: ({ props, state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'h-12', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary-500 dark:hover:border-primary-300', - { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - input: { - class: [ - //Font - 'font-sans', - 'leading-none', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - 'text-surface-800 dark:text-white/80', - - // Sizing and Spacing - 'w-[1%]', - 'p-3', - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, - { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }) - }, - start: { - class: 'mr-auto' - }, - end: { - class: 'ml-auto' - } -}; +export default { + root: { + class: [ + // Flex & Alignment + 'flex items-center justify-center flex-wrap', + + // Spacing + 'px-4 py-2', + + // Shape + 'border-0', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-500 dark:text-white/60' + ] + }, + firstpagebutton: ({ context }) => ({ + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + + // Shape + 'border-0 rounded-full dark:rounded-md', + + // Size + 'min-w-[3rem] h-12 m-[0.143rem]', + 'leading-none', + + // Color + 'text-surface-500 dark:text-white/60', + + // State + { + 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled + }, + + // Transition + 'transition duration-200', + + // Misc + 'user-none overflow-hidden', + { 'cursor-default pointer-events-none opacity-60': context.disabled } + ] + }), + previouspagebutton: ({ context }) => ({ + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + + // Shape + 'border-0 rounded-full dark:rounded-md', + + // Size + 'min-w-[3rem] h-12 m-[0.143rem]', + 'leading-none', + + // Color + 'text-surface-500 dark:text-white/60', + + // State + { + 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled + }, + + // Transition + 'transition duration-200', + + // Misc + 'user-none overflow-hidden', + { 'cursor-default pointer-events-none opacity-60': context.disabled } + ] + }), + nextpagebutton: ({ context }) => ({ + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + + // Shape + 'border-0 rounded-full dark:rounded-md', + + // Size + 'min-w-[3rem] h-12 m-[0.143rem]', + 'leading-none', + + // Color + 'text-surface-500 dark:text-white/60', + + // State + { + 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled + }, + + // Transition + 'transition duration-200', + + // Misc + 'user-none overflow-hidden', + { 'cursor-default pointer-events-none opacity-60': context.disabled } + ] + }), + lastpagebutton: ({ context }) => ({ + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + + // Shape + 'border-0 rounded-full dark:rounded-md', + + // Size + 'min-w-[3rem] h-12 m-[0.143rem]', + 'leading-none', + + // Color + 'text-surface-500 dark:text-white/60', + + // State + { + 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled + }, + + // Transition + 'transition duration-200', + + // Misc + 'user-none overflow-hidden', + { 'cursor-default pointer-events-none opacity-60': context.disabled } + ] + }), + pagebutton: ({ context }) => ({ + class: [ + 'relative', + + // Flex & Alignment + 'inline-flex items-center justify-center', + + // Shape + 'border-0 rounded-full dark:rounded-md', + + // Size + 'min-w-[3rem] h-12 m-[0.143rem]', + 'leading-none', + + // Color + 'text-surface-500 dark:text-white/80', + { + 'bg-primary-50 border-primary-50 dark:border-transparent text-primary-700 dark:text-surface-0 dark:bg-primary-400/30': context.active + }, + + // State + { + 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled && !context.active, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled + }, + + // Transition + 'transition duration-200', + + // Misc + 'user-none overflow-hidden', + { 'cursor-default pointer-events-none opacity-60': context.disabled } + ] + }), + rowperpagedropdown: { + root: ({ props, state }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + 'h-12', + 'rounded-md', + + // Spacing + 'mx-2', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-700', + + // Transitions + 'transition-all', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-300', + { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused }, + + // Misc + 'cursor-pointer', + 'select-none', + { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } + ] + }), + input: { + class: [ + //Font + 'leading-[normal]', + + // Display + 'block', + 'flex-auto', + + // Color and Background + 'bg-transparent', + 'border-0', + 'text-surface-800 dark:text-white/80', + + // Sizing and Spacing + 'w-[1%]', + 'p-3 pr-0', + + //Shape + 'rounded-none', + + // Transitions + 'transition', + 'duration-200', + + // States + 'focus:outline-none focus:shadow-none', + + // Misc + 'relative', + 'cursor-pointer', + 'overflow-hidden overflow-ellipsis', + 'whitespace-nowrap', + 'appearance-none' + ] + }, + trigger: { + class: [ + // Flexbox + 'flex items-center justify-center', + 'shrink-0', + + // Color and Background + 'bg-transparent', + 'text-surface-500', + + // Size + 'w-12', + + // Shape + 'rounded-tr-md', + 'rounded-br-md' + ] + }, + panel: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + wrapper: { + class: [ + // Sizing + 'max-h-[200px]', + + // Misc + 'overflow-auto' + ] + }, + list: { + class: 'py-3 list-none m-0' + }, + item: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Position + 'relative', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, + { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, + { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, + { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + 'cursor-pointer', + 'overflow-hidden', + 'whitespace-nowrap' + ] + }) + }, + jumptopageinput: { + root: { + class: 'inline-flex mx-2' + }, + input: { + root: { + class: [ + 'relative', + + //Font + 'leading-none', + + // Display + 'block', + 'flex-auto', + + // Colors + 'text-surface-600 dark:text-surface-200', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-600', + + // Sizing and Spacing + 'w-[1%] max-w-[3rem]', + 'p-3 m-0', + + //Shape + 'rounded-md', + + // Transitions + 'transition', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-400', + 'focus:outline-none focus:shadow-none', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', + + // Misc + 'cursor-pointer', + 'overflow-hidden overflow-ellipsis', + 'whitespace-nowrap', + 'appearance-none' + ] + } + } + }, + jumptopagedropdown: { + root: ({ props, state }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + 'h-12', + 'rounded-md', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-700', + + // Transitions + 'transition-all', + 'duration-200', + + // States + 'hover:border-primary-500 dark:hover:border-primary-300', + { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused }, + + // Misc + 'cursor-pointer', + 'select-none', + { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } + ] + }), + input: { + class: [ + //Font + 'leading-none', + + // Display + 'block', + 'flex-auto', + + // Color and Background + 'bg-transparent', + 'border-0', + 'text-surface-800 dark:text-white/80', + + // Sizing and Spacing + 'w-[1%]', + 'p-3', + + //Shape + 'rounded-none', + + // Transitions + 'transition', + 'duration-200', + + // States + 'focus:outline-none focus:shadow-none', + + // Misc + 'relative', + 'cursor-pointer', + 'overflow-hidden overflow-ellipsis', + 'whitespace-nowrap', + 'appearance-none' + ] + }, + trigger: { + class: [ + // Flexbox + 'flex items-center justify-center', + 'shrink-0', + + // Color and Background + 'bg-transparent', + 'text-surface-500', + + // Size + 'w-12', + + // Shape + 'rounded-tr-md', + 'rounded-br-md' + ] + }, + panel: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + wrapper: { + class: [ + // Sizing + 'max-h-[200px]', + + // Misc + 'overflow-auto' + ] + }, + list: { + class: 'py-3 list-none m-0' + }, + item: ({ context }) => ({ + class: [ + // Font + 'font-normal', + 'leading-none', + + // Position + 'relative', + + // Shape + 'border-0', + 'rounded-none', + + // Spacing + 'm-0', + 'py-3 px-5', + + // Color + { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, + { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, + { 'bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': context.focused && context.selected }, + { 'bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80': !context.focused && context.selected }, + + //States + { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, + { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, + + // Transitions + 'transition-shadow', + 'duration-200', + + // Misc + 'cursor-pointer', + 'overflow-hidden', + 'whitespace-nowrap' + ] + }) + }, + start: { + class: 'mr-auto' + }, + end: { + class: 'ml-auto' + } +}; diff --git a/presets/lara/password/index.js b/presets/lara/password/index.js index 9d4606b8..839e7623 100644 --- a/presets/lara/password/index.js +++ b/presets/lara/password/index.js @@ -1,118 +1,118 @@ -export default { - root: ({ props }) => ({ - class: [ - 'inline-flex relative', - { - 'opacity-60 select-none pointer-events-none cursor-default': props.disabled - }, - { '[&>input]:pr-10': props.toggleMask } - ] - }), - panel: { - class: [ - // Spacing - 'p-5', - - // Shape - 'border-0 dark:border', - 'shadow-md rounded-md', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - 'text-surface-700 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - meter: { - class: [ - // Position and Overflow - 'overflow-hidden', - 'relative', - - // Shape and Size - 'border-0', - 'h-3', - - // Spacing - 'mb-2', - - // Colors - 'bg-surface-100 dark:bg-surface-700' - ] - }, - meterlabel: ({ instance }) => ({ - class: [ - // Size - 'h-full', - - // Colors - { - 'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak', - 'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium', - 'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong' - }, - - // Transitions - 'transition-all duration-1000 ease-in-out' - ] - }), - showicon: { - class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70'] - }, - hideicon: { - class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70'] - }, - input: { - root: ({ props, context, parent }) => ({ - class: [ - // Font - 'font-sans leading-none', - - // Flex - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - - // Spacing - 'm-0', - { - 'px-4 py-4': props.size == 'large', - 'px-2 py-2': props.size == 'small', - 'p-3': props.size == null - }, - 'w-full', - - // Shape - { 'rounded-md': parent.instance.$name !== 'InputGroup' }, - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, - { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !parent.props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': parent.props.invalid }, - - // States - { - 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !parent.props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }) - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props }) => ({ + class: [ + 'inline-flex relative', + { + 'opacity-60 select-none pointer-events-none cursor-default': props.disabled + }, + { '[&>input]:pr-10': props.toggleMask } + ] + }), + panel: { + class: [ + // Spacing + 'p-5', + + // Shape + 'border-0 dark:border', + 'shadow-md rounded-md', + + // Colors + 'bg-surface-0 dark:bg-surface-900', + 'text-surface-700 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + meter: { + class: [ + // Position and Overflow + 'overflow-hidden', + 'relative', + + // Shape and Size + 'border-0', + 'h-3', + + // Spacing + 'mb-2', + + // Colors + 'bg-surface-100 dark:bg-surface-700' + ] + }, + meterlabel: ({ instance }) => ({ + class: [ + // Size + 'h-full', + + // Colors + { + 'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak', + 'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium', + 'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong' + }, + + // Transitions + 'transition-all duration-1000 ease-in-out' + ] + }), + showicon: { + class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70'] + }, + hideicon: { + class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70'] + }, + input: { + root: ({ props, context, parent }) => ({ + class: [ + // Font + 'leading-none', + + // Flex + { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, + + // Spacing + 'm-0', + { + 'px-4 py-4': props.size == 'large', + 'px-2 py-2': props.size == 'small', + 'p-3': props.size == null + }, + 'w-full', + + // Shape + { 'rounded-md': parent.instance.$name !== 'InputGroup' }, + { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, + { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, + { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, + + // Colors + 'text-surface-600 dark:text-surface-200', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !parent.props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': parent.props.invalid }, + + // States + { + 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !parent.props.invalid, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled + }, + + // Misc + 'appearance-none', + 'transition-colors duration-200' + ] + }) + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +}; diff --git a/presets/lara/steps/index.js b/presets/lara/steps/index.js index b9272691..48a6ee2c 100644 --- a/presets/lara/steps/index.js +++ b/presets/lara/steps/index.js @@ -1,111 +1,111 @@ -export default { - root: { - class: 'relative' - }, - menu: { - class: 'p-0 m-0 list-none flex' - }, - menuitem: { - class: [ - // Flexbox and Position - 'relative', - 'flex', - 'justify-center', - 'flex-1', - 'overflow-hidden', - - // Before - 'before:border-t', - 'before:border-surface-200', - 'before:dark:border-surface-700', - 'before:w-full', - 'before:absolute', - 'before:top-1/2', - 'before:left-0', - 'before:transform', - 'before:-mt-4' - ] - }, - action: ({ props }) => ({ - class: [ - // Flexbox - 'inline-flex items-center', - 'flex-col', - - // Transitions and Shape - 'transition-shadow', - 'rounded-md', - - // Colors - 'bg-surface-0', - 'dark:bg-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'overflow-hidden', - { 'cursor-pointer': !props.readonly } - ] - }), - step: ({ context, props }) => ({ - class: [ - // Flexbox - 'flex items-center justify-center', - - // Position - 'z-20', - - // Shape - 'rounded-full', - 'border', - - // Size - 'w-[2rem]', - 'h-[2rem]', - 'text-sm', - 'leading-[2rem]', - - // Colors - { - 'text-surface-400 dark:text-white/60': !context.active, - 'border-surface-100 dark:border-surface-700': !context.active, - 'bg-surface-0 dark:bg-surface-800': !context.active, - 'bg-primary-500 dark:bg-primary-400': context.active, - 'border-primary-500 dark:border-primary-400': context.active, - 'text-surface-0 dark:text-surface-900': context.active - }, - - // States - { - 'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly - }, - - // Transition - 'transition-colors duration-200 ease-in-out' - ] - }), - label: ({ context }) => ({ - class: [ - // Font - 'leading-5', - { 'font-bold': context.active }, - - // Display - 'block', - - // Spacing - 'mt-2', - - // Colors - { 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active }, - - // Text and Overflow - 'whitespace-nowrap', - 'overflow-hidden', - 'overflow-ellipsis', - 'max-w-full' - ] - }) -}; +export default { + root: { + class: 'relative' + }, + menu: { + class: 'p-0 m-0 list-none flex' + }, + menuitem: { + class: [ + // Flexbox and Position + 'relative', + 'flex', + 'justify-center', + 'flex-1', + 'overflow-hidden', + + // Before + 'before:border-t', + 'before:border-surface-200', + 'before:dark:border-surface-700', + 'before:w-full', + 'before:absolute', + 'before:top-1/2', + 'before:left-0', + 'before:transform', + 'before:-mt-4' + ] + }, + action: ({ props }) => ({ + class: [ + // Flexbox + 'inline-flex items-center', + 'flex-col', + + // Transitions and Shape + 'transition-shadow', + 'rounded-md', + + // Colors + 'bg-surface-0', + 'dark:bg-transparent', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Misc + 'overflow-hidden', + { 'cursor-pointer': !props.readonly } + ] + }), + step: ({ context, props }) => ({ + class: [ + // Flexbox + 'flex items-center justify-center', + + // Position + 'z-20', + + // Shape + 'rounded-full', + 'border', + + // Size + 'w-[2rem]', + 'h-[2rem]', + 'text-sm', + 'leading-[2rem]', + + // Colors + { + 'text-surface-400 dark:text-white/60': !context.active, + 'border-surface-100 dark:border-surface-700': !context.active, + 'bg-surface-0 dark:bg-surface-800': !context.active, + 'bg-primary-500 dark:bg-primary-400': context.active, + 'border-primary-500 dark:border-primary-400': context.active, + 'text-surface-0 dark:text-surface-900': context.active + }, + + // States + { + 'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly + }, + + // Transition + 'transition-colors duration-200 ease-in-out' + ] + }), + label: ({ context }) => ({ + class: [ + // Font + 'leading-[normal]', + { 'font-bold': context.active }, + + // Display + 'block', + + // Spacing + 'mt-2', + + // Colors + { 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active }, + + // Text and Overflow + 'whitespace-nowrap', + 'overflow-hidden', + 'overflow-ellipsis', + 'max-w-full' + ] + }) +}; diff --git a/presets/lara/textarea/index.js b/presets/lara/textarea/index.js index 9b08011c..08389cbb 100644 --- a/presets/lara/textarea/index.js +++ b/presets/lara/textarea/index.js @@ -1,36 +1,36 @@ -export default { - root: ({ context, props }) => ({ - class: [ - // Font - 'font-sans leading-none', - - // Spacing - 'm-0', - 'p-3', - - // Shape - 'rounded-md', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }) -}; +export default { + root: ({ context, props }) => ({ + class: [ + // Font + 'leading-none', + + // Spacing + 'm-0', + 'p-3', + + // Shape + 'rounded-md', + + // Colors + 'text-surface-600 dark:text-surface-200', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { + 'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid, + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled + }, + + // Misc + 'appearance-none', + 'transition-colors duration-200' + ] + }) +}; diff --git a/presets/lara/tree/index.js b/presets/lara/tree/index.js index 28eb56b8..07d862a3 100644 --- a/presets/lara/tree/index.js +++ b/presets/lara/tree/index.js @@ -1,258 +1,258 @@ -export default { - root: { - class: [ - // Space - 'p-5', - - // Shape - 'rounded-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-white/80', - 'border border-solid border-surface-200 dark:border-surface-700' - ] - }, - wrapper: { - class: ['overflow-auto'] - }, - container: { - class: [ - // Spacing - 'm-0 p-0', - - // Misc - 'list-none overflow-auto' - ] - }, - node: { - class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50'] - }, - content: ({ context, props }) => ({ - class: [ - // Flex and Alignment - 'flex items-center', - - // Shape - 'rounded-md', - - // Spacing - 'p-2', - - // Colors - 'text-surface-600 dark:text-white/70', - { 'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0': context.selected }, - - // States - { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected }, - - // Transition - 'transition-shadow duration-200', - - { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' } - ] - }), - toggler: ({ context }) => ({ - class: [ - // Flex and Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full', - - // Size - 'w-8 h-8', - - // Spacing - 'mr-2', - - // Colors - 'bg-transparent', - { - 'text-surface-500 dark:text-white': !context.selected, - 'text-primary-600 dark:text-white': context.selected, - invisible: context.leaf - }, - - // States - 'hover:bg-surface-200/20 dark:hover:bg-surface-500/20', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'cursor-pointer select-none' - ] - }), - nodeCheckbox: ({ props, context, instance }) => ({ - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: { - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked - }, - - // States - { - 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, - 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }, - 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-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - { - 'text-white dark:text-surface-900': !instance.partialChecked, - 'text-gray dark:text-white': instance.partialChecked - }, - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }), - nodeicon: { - class: [ - // Space - 'mr-2', - - // Color - 'text-surface-600 dark:text-white/70' - ] - }, - subgroup: { - class: ['m-0 list-none p-0 pl-2 mt-1'] - }, - filtercontainer: { - class: [ - 'relative block', - - // Space - 'mb-2', - - // Size - 'w-full' - ] - }, - input: { - class: [ - 'relative', - // Font - 'font-sans leading-none', - - // Spacing - 'm-0', - 'p-3 pr-10', - - // Size - 'w-full', - - // Shape - 'rounded-md', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-600', - - // States - 'hover:border-primary-500 dark:hover:border-primary-400', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', - - // Transition & Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }, - loadingicon: { - class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'] - }, - searchicon: { - class: [ - // Position - 'absolute top-1/2 -mt-2 right-3', - - // Color - 'text-surface-600 dark:hover:text-white/70' - ] - } -}; +export default { + root: { + class: [ + // Space + 'p-5', + + // Shape + 'rounded-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-700 dark:text-white/80', + 'border border-solid border-surface-200 dark:border-surface-700' + ] + }, + wrapper: { + class: ['overflow-auto'] + }, + container: { + class: [ + // Spacing + 'm-0 p-0', + + // Misc + 'list-none overflow-auto' + ] + }, + node: { + class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50'] + }, + content: ({ context, props }) => ({ + class: [ + // Flex and Alignment + 'flex items-center', + + // Shape + 'rounded-md', + + // Spacing + 'p-2', + + // Colors + 'text-surface-600 dark:text-white/70', + { 'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0': context.selected }, + + // States + { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected }, + + // Transition + 'transition-shadow duration-200', + + { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' } + ] + }), + toggler: ({ context }) => ({ + class: [ + // Flex and Alignment + 'inline-flex items-center justify-center', + + // Shape + 'border-0 rounded-full', + + // Size + 'w-8 h-8', + + // Spacing + 'mr-2', + + // Colors + 'bg-transparent', + { + 'text-surface-500 dark:text-white': !context.selected, + 'text-primary-600 dark:text-white': context.selected, + invisible: context.leaf + }, + + // States + 'hover:bg-surface-200/20 dark:hover:bg-surface-500/20', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Transition + 'transition duration-200', + + // Misc + 'cursor-pointer select-none' + ] + }), + nodeCheckbox: ({ props, context, instance }) => ({ + root: { + class: [ + 'relative', + + // Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-6', + 'h-6', + + // Spacing + 'mr-2', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: { + class: [ + // Alignment + 'flex', + 'items-center', + 'justify-center', + + // Size + 'w-6', + 'h-6', + + // Shape + 'rounded-md', + 'border-2', + + // Colors + { + 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, + 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked + }, + + // States + { + 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, + 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, + 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, + 'cursor-default opacity-60': props.disabled + }, + + // Transitions + 'transition-colors', + 'duration-200' + ] + }, + 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-2 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: { + class: [ + // Font + 'text-base leading-none', + + // Size + 'w-4', + 'h-4', + + // Colors + { + 'text-white dark:text-surface-900': !instance.partialChecked, + 'text-gray dark:text-white': instance.partialChecked + }, + + // Transitions + 'transition-all', + 'duration-200' + ] + } + }), + nodeicon: { + class: [ + // Space + 'mr-2', + + // Color + 'text-surface-600 dark:text-white/70' + ] + }, + subgroup: { + class: ['m-0 list-none p-0 pl-2 mt-1'] + }, + filtercontainer: { + class: [ + 'relative block', + + // Space + 'mb-2', + + // Size + 'w-full' + ] + }, + input: { + class: [ + 'relative', + // Font + 'leading-none', + + // Spacing + 'm-0', + 'p-3 pr-10', + + // Size + 'w-full', + + // Shape + 'rounded-md', + + // Colors + 'text-surface-600 dark:text-surface-200', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-600', + + // States + 'hover:border-primary-500 dark:hover:border-primary-400', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', + + // Transition & Misc + 'appearance-none', + 'transition-colors duration-200' + ] + }, + loadingicon: { + class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'] + }, + searchicon: { + class: [ + // Position + 'absolute top-1/2 -mt-2 right-3', + + // Color + 'text-surface-600 dark:hover:text-white/70' + ] + } +}; diff --git a/presets/lara/treeselect/index.js b/presets/lara/treeselect/index.js index d1e9628c..4ac625a3 100644 --- a/presets/lara/treeselect/index.js +++ b/presets/lara/treeselect/index.js @@ -1,352 +1,352 @@ -export default { - root: ({ props, state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - labelContainer: { - class: ['overflow-hidden flex flex-auto cursor-pointer'] - }, - label: { - class: [ - 'block leading-5', - - // Space - 'p-3', - - // Color - 'text-surface-800 dark:text-white/80', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - tree: { - root: { - class: [ - // Space - 'p-5' - ] - }, - wrapper: { - class: ['overflow-auto'] - }, - container: { - class: [ - // Spacing - 'm-0 p-0', - - // Misc - 'list-none overflow-auto' - ] - }, - node: { - class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50'] - }, - content: ({ context, props }) => ({ - class: [ - // Flex and Alignment - 'flex items-center', - - // Shape - 'rounded-md', - - // Spacing - 'p-2', - - // Colors - 'text-surface-600 dark:text-white/70', - { 'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0': context.selected }, - - // States - { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected }, - - // Transition - 'transition-shadow duration-200', - - { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' } - ] - }), - toggler: ({ context }) => ({ - class: [ - // Flex and Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full', - - // Size - 'w-8 h-8', - - // Spacing - 'mr-2', - - // Colors - 'bg-transparent', - { - 'text-surface-500 dark:text-white': !context.selected, - 'text-primary-600 dark:text-white': context.selected, - invisible: context.leaf - }, - - // States - 'hover:bg-surface-200/20 dark:hover:bg-surface-500/20', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'cursor-pointer select-none' - ] - }), - nodeCheckbox: ({ props, context, instance }) => ({ - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: { - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked - }, - - // States - { - 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, - 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }, - 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-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - { - 'text-white dark:text-surface-900': !instance.partialChecked, - 'text-gray dark:text-white': instance.partialChecked - }, - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }), - nodeicon: { - class: [ - // Space - 'mr-2', - - // Color - 'text-surface-600 dark:text-white/70' - ] - }, - subgroup: { - class: ['m-0 list-none p-0 pl-2 mt-1'] - }, - filtercontainer: { - class: [ - 'relative block', - - // Space - 'mb-2', - - // Size - 'w-full' - ] - }, - input: { - class: [ - 'relative', - // Font - 'font-sans leading-none', - - // Spacing - 'm-0', - 'p-3 pr-10', - - // Size - 'w-full', - - // Shape - 'rounded-md', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-600', - - // States - 'hover:border-primary-500 dark:hover:border-primary-400', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', - - // Transition & Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }, - loadingicon: { - class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'] - }, - searchicon: { - class: [ - // Position - 'absolute top-1/2 -mt-2 right-3', - - // Color - 'text-surface-600 dark:hover:text-white/70' - ] - } - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; +export default { + root: ({ props, state }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + 'rounded-md', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // Transitions + 'transition-all', + 'duration-200', + + // States + { 'hover:border-primary-500 dark:hover:border-primary-300': !props.invalid }, + { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, + + // Misc + 'cursor-pointer', + 'select-none', + { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } + ] + }), + labelContainer: { + class: ['overflow-hidden flex flex-auto cursor-pointer'] + }, + label: { + class: [ + 'block leading-[normal]', + + // Space + 'p-3', + + // Color + 'text-surface-800 dark:text-white/80', + + // Transition + 'transition duration-200', + + // Misc + 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis' + ] + }, + trigger: { + class: [ + // Flexbox + 'flex items-center justify-center', + 'shrink-0', + + // Color and Background + 'bg-transparent', + 'text-surface-500', + + // Size + 'w-12', + + // Shape + 'rounded-tr-md', + 'rounded-br-md' + ] + }, + panel: { + class: [ + // Position + 'absolute top-0 left-0', + + // Shape + 'border-0 dark:border', + 'rounded-md', + 'shadow-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-800 dark:text-white/80', + 'dark:border-surface-700' + ] + }, + wrapper: { + class: [ + // Sizing + 'max-h-[200px]', + + // Misc + 'overflow-auto' + ] + }, + tree: { + root: { + class: [ + // Space + 'p-5' + ] + }, + wrapper: { + class: ['overflow-auto'] + }, + container: { + class: [ + // Spacing + 'm-0 p-0', + + // Misc + 'list-none overflow-auto' + ] + }, + node: { + class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50'] + }, + content: ({ context, props }) => ({ + class: [ + // Flex and Alignment + 'flex items-center', + + // Shape + 'rounded-md', + + // Spacing + 'p-2', + + // Colors + 'text-surface-600 dark:text-white/70', + { 'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0': context.selected }, + + // States + { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected }, + + // Transition + 'transition-shadow duration-200', + + { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' } + ] + }), + toggler: ({ context }) => ({ + class: [ + // Flex and Alignment + 'inline-flex items-center justify-center', + + // Shape + 'border-0 rounded-full', + + // Size + 'w-8 h-8', + + // Spacing + 'mr-2', + + // Colors + 'bg-transparent', + { + 'text-surface-500 dark:text-white': !context.selected, + 'text-primary-600 dark:text-white': context.selected, + invisible: context.leaf + }, + + // States + 'hover:bg-surface-200/20 dark:hover:bg-surface-500/20', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Transition + 'transition duration-200', + + // Misc + 'cursor-pointer select-none' + ] + }), + nodeCheckbox: ({ props, context, instance }) => ({ + root: { + class: [ + 'relative', + + // Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-6', + 'h-6', + + // Spacing + 'mr-2', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: { + class: [ + // Alignment + 'flex', + 'items-center', + 'justify-center', + + // Size + 'w-6', + 'h-6', + + // Shape + 'rounded-md', + 'border-2', + + // Colors + { + 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, + 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked + }, + + // States + { + 'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked, + 'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked, + 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, + 'cursor-default opacity-60': props.disabled + }, + + // Transitions + 'transition-colors', + 'duration-200' + ] + }, + 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-2 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: { + class: [ + // Font + 'text-base leading-none', + + // Size + 'w-4', + 'h-4', + + // Colors + { + 'text-white dark:text-surface-900': !instance.partialChecked, + 'text-gray dark:text-white': instance.partialChecked + }, + + // Transitions + 'transition-all', + 'duration-200' + ] + } + }), + nodeicon: { + class: [ + // Space + 'mr-2', + + // Color + 'text-surface-600 dark:text-white/70' + ] + }, + subgroup: { + class: ['m-0 list-none p-0 pl-2 mt-1'] + }, + filtercontainer: { + class: [ + 'relative block', + + // Space + 'mb-2', + + // Size + 'w-full' + ] + }, + input: { + class: [ + 'relative', + // Font + 'leading-none', + + // Spacing + 'm-0', + 'p-3 pr-10', + + // Size + 'w-full', + + // Shape + 'rounded-md', + + // Colors + 'text-surface-600 dark:text-surface-200', + 'placeholder:text-surface-400 dark:placeholder:text-surface-500', + 'bg-surface-0 dark:bg-surface-900', + 'border border-surface-300 dark:border-surface-600', + + // States + 'hover:border-primary-500 dark:hover:border-primary-400', + 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', + + // Transition & Misc + 'appearance-none', + 'transition-colors duration-200' + ] + }, + loadingicon: { + class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'] + }, + searchicon: { + class: [ + // Position + 'absolute top-1/2 -mt-2 right-3', + + // Color + 'text-surface-600 dark:hover:text-white/70' + ] + } + }, + transition: { + enterFromClass: 'opacity-0 scale-y-[0.8]', + enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', + leaveActiveClass: 'transition-opacity duration-100 ease-linear', + leaveToClass: 'opacity-0' + } +};