vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor on tailwindcss-presets package

tailwindcss-presets
Mert Sincan 2024-06-28 11:00:54 +01:00
parent f3f8acac51
commit 7db48b6a5c
189 changed files with 21 additions and 26573 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/showcase/nuxt.config.js
View File

@ -9,7 +9,8 @@ const alias = {
'@primevue/themes/lara': path.resolve(__dirname, '../../packages/themes/src/presets/lara'),
'@primevue/themes/nora': path.resolve(__dirname, '../../packages/themes/src/presets/nora'),
'@primevue/themes': path.resolve(__dirname, '../../packages/themes/src'),
'@primevue/icons': path.resolve(__dirname, '../../packages/icons/src')
'@primevue/icons': path.resolve(__dirname, '../../packages/icons/src'),
'@primevue/tailwindcss-presets': path.resolve(__dirname, '../../packages/tailwindcss-presets/src')
};
// https://nuxt.com/docs/api/configuration/nuxt-config

2
apps/showcase/tailwind.config.js
View File

@ -14,7 +14,7 @@ module.exports = {
'./components/template/**/*.{js,vue,ts}',
'./doc/**/*.{js,vue,ts}',
'./error.vue',
'../../packages/tailwindcss-presets/src/**/*.js'
'../../packages/tailwindcss-presets/src/**/*.{js,ts}'
],
plugins: [primeui],
theme: {

1
packages/tailwindcss-presets/README.md Normal file
View File

@ -0,0 +1 @@
# PrimeVue TailwindCSS Presets

9
packages/tailwindcss-presets/package.json
View File

@ -8,7 +8,7 @@
"repository": {
"type": "git",
"url": "https://github.com/primefaces/primevue.git",
"directory": "packages/themes"
"directory": "packages/tailwindcss-presets"
},
"bugs": {
"url": "https://github.com/primefaces/primevue/issues"
@ -34,10 +34,6 @@
"types": "./types/*/index.d.ts",
"import": "./lara/*/index.mjs"
},
"./nora/*": {
"types": "./types/*/index.d.ts",
"import": "./nora/*/index.mjs"
},
"./*": {
"types": "./*/index.d.ts",
"import": "./*/index.mjs"
@ -55,6 +51,9 @@
"build:postbuild": "node ./scripts/postbuild.mjs",
"dev:link": "pnpm link --global && npm link"
},
"peerDependencies": {
"primevue": "workspace:*"
},
"engines": {
"node": ">=12.11.0"
}

73
packages/tailwindcss-presets/src/aura/accordion/index.js
View File

@ -1,73 +0,0 @@
export default {
accordiontab: {
root: {
class: ['mb-0', 'border-b border-surface-200 dark:border-surface-700']
},
header: ({ props }) => ({
class: [
// State
{ 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
]
}),
headerAction: {
class: [
//Font
'font-semibold',
'leading-none',
// Alignments
'flex justify-between items-center',
'flex-row-reverse',
'relative',
// Sizing
'p-[1.125rem]',
// Shape
'rounded-md',
'border-0',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-600 dark:text-surface-0/80',
// Transition
'transition duration-200 ease-in-out',
'transition-shadow duration-200',
// States
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300', // Focus
// Misc
'cursor-pointer no-underline select-none'
]
},
headerIcon: ({ context }) => ({
class: ['inline-block ml-2', { 'text-surface-900 dark:text-surface-0': context.active }]
}),
headerTitle: {
class: 'leading-none'
},
content: {
class: [
// Spacing
'p-[1.125rem] pt-0',
//Shape
'border-0 rounded-none',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-600 dark:text-surface-0/70'
]
},
transition: {
enterFromClass: 'max-h-0',
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
enterToClass: 'max-h-[1000px]',
leaveFromClass: 'max-h-[1000px]',
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
leaveToClass: 'max-h-0'
}
}
};

253
packages/tailwindcss-presets/src/aura/autocomplete/index.js
View File

@ -1,253 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'relative',
// Flex
'inline-flex',
// Size
{ 'w-full': props.multiple },
// Color
'text-surface-900 dark:text-surface-0',
//States
{
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
container: ({ props, state }) => ({
class: [
// Font
'leading-none',
// Flex
'flex items-center flex-wrap',
'gap-2',
// Spacing
'm-0 list-none',
'p-1',
// Size
'w-full',
// 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-950': !props.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-700': !props.invalid },
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
// Transition
'transition duration-200 ease-in-out',
// Misc
'cursor-text overflow-hidden'
]
}),
inputtoken: {
class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
},
input: ({ props, parent }) => ({
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',
{ 'py-2 px-3': !props.multiple, 'p-0': props.multiple },
// Colors
'text-surface-700 dark:text-white/80',
'border',
{
'bg-surface-0 dark:bg-surface-950': !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-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.multiple },
// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== '' },
// Transition
'transition-colors duration-200'
]
}),
token: {
class: [
// Flex
'inline-flex items-center',
// Spacings
'py-1 px-3 m-0',
// Shape
'rounded',
// Colors
'bg-surface-100 dark:bg-surface-700',
'text-surface-700 dark:text-white',
// Misc
'cursor-default'
]
},
removeTokenIcon: {
class: [
// Spacing
'ml-[0.375rem]',
// Size
'w-4 h-4',
// Misc
'cursor-pointer'
]
},
dropdownbutton: {
root: {
class: [
'relative',
// Alignments
'items-center inline-flex justify-center text-center align-bottom',
// Shape
'rounded-r-md',
// Size
'py-2 leading-none',
'w-10',
// Colors
'text-primary-inverse',
'bg-primary',
'border border-primary',
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 ',
'hover:bg-primary-hover hover:border-primary-hover',
'focus:ring-primary-500 dark:focus:ring-primary-400'
]
}
},
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-900',
'text-surface-700 dark:text-white/80',
// Shape
'border border-surface-300 dark:border-surface-700',
'rounded-md',
'shadow-md',
// Size
'overflow-auto'
]
},
list: {
class: 'p-1 list-none m-0'
},
item: ({ context }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0 px-3 py-2',
'first:mt-0 mt-[2px]',
// Shape
'border-0 rounded',
// 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-highlight-inverse': context.selected,
'bg-primary-highlight': context.selected
},
//States
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
{ 'hover:bg-primary-highlight-hover': context.selected },
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
// Transition
'transition-shadow duration-200',
// Misc
'cursor-pointer overflow-hidden whitespace-nowrap'
]
}),
itemgroup: {
class: [
'font-semibold',
// Spacing
'm-0 py-2 px-3',
// Colors
'text-surface-400 dark:text-surface-500',
// Misc
'cursor-auto'
]
},
emptymessage: {
class: [
// Font
'leading-none',
// Spacing
'py-2 px-3',
// 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'
}
};

43
packages/tailwindcss-presets/src/aura/avatar/index.js
View File

@ -1,43 +0,0 @@
export default {
root: ({ props, parent }) => ({
class: [
// Font
{
'text-xl': props.size == 'large',
'text-2xl': props.size == 'xlarge'
},
// Alignments
'inline-flex items-center justify-center',
'relative',
// Sizes
{
'h-8 w-8': props.size == null || props.size == 'normal',
'w-12 h-12': props.size == 'large',
'w-16 h-16': props.size == 'xlarge'
},
{ '-ml-4': parent.instance.$style?.name == 'avatargroup' },
// Shapes
{
'rounded-lg': props.shape == 'square',
'rounded-full': props.shape == 'circle'
},
{ 'border-2': parent.instance.$style?.name == 'avatargroup' },
// Colors
'bg-surface-300 dark:bg-surface-700',
{ 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
]
}),
image: ({ props }) => ({
class: [
'h-full w-full',
{
'rounded-lg': props.shape == 'square',
'rounded-full': props.shape == 'circle'
}
]
})
};

5
packages/tailwindcss-presets/src/aura/avatargroup/index.js
View File

@ -1,5 +0,0 @@
export default {
root: {
class: 'flex items-center'
}
};

43
packages/tailwindcss-presets/src/aura/badge/index.js
View File

@ -1,43 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Font
'font-bold',
{
'text-xs leading-[1.5rem]': props.size == null,
'text-lg leading-[2.25rem]': props.size == 'large',
'text-2xl leading-[3rem]': props.size == 'xlarge'
},
// Alignment
'text-center inline-block',
// Size
'p-0 px-1',
{
'min-w-[1.5rem] h-[1.5rem]': props.size == null,
'min-w-[2.25rem] h-[2.25rem]': props.size == 'large',
'min-w-[3rem] h-[3rem]': props.size == 'xlarge'
},
// Shape
{
'rounded-full': props.value.length == 1,
'rounded-[0.71rem]': props.value.length !== 1
},
// Color
'text-primary-inverse',
{
'bg-primary': props.severity == null || props.severity == 'primary',
'bg-surface-500 dark:bg-surface-400': props.severity == 'secondary',
'bg-green-500 dark:bg-green-400': props.severity == 'success',
'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
'bg-purple-500 dark:bg-purple-400': props.severity == 'help',
'bg-red-500 dark:bg-red-400': props.severity == 'danger'
}
]
})
};

43
packages/tailwindcss-presets/src/aura/badgedirective/index.js
View File

@ -1,43 +0,0 @@
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-primary-inverse',
{
'bg-primary': !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
}
]
})
};

8
packages/tailwindcss-presets/src/aura/blockui/index.js
View File

@ -1,8 +0,0 @@
export default {
root: {
class: 'relative'
},
mask: {
class: 'bg-black/40'
}
};

63
packages/tailwindcss-presets/src/aura/breadcrumb/index.js
View File

@ -1,63 +0,0 @@
export default {
root: {
class: [
// Shape
'rounded-md',
// Spacing
'p-4',
// Color
'bg-surface-0 dark:bg-surface-900',
// Misc
'overflow-x-auto'
]
},
menu: {
class: [
// Flex & Alignment
'flex items-center flex-nowrap',
// Spacing
'm-0 p-0 list-none leading-none'
]
},
action: {
class: [
// Flex & Alignment
'flex items-center',
// Shape
'rounded-md',
// Color
'text-surface-600 dark:text-white/70',
// States
'focus-visible:outline-none focus-visible:outline-offset-0',
'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
// Transitions
'transition-shadow duration-200',
// Misc
'text-decoration-none'
]
},
icon: {
class: 'text-surface-600 dark:text-white/70'
},
separator: {
class: [
// Flex & Alignment
'flex items-center',
// Spacing
'mx-2',
// Color
'text-surface-600 dark:text-white/70'
]
}
};

237
packages/tailwindcss-presets/src/aura/button/index.js
View File

@ -1,237 +0,0 @@
export default {
root: ({ props, context, parent }) => ({
class: [
'relative',
// Alignments
'items-center inline-flex text-center align-bottom justify-center',
// Sizes & Spacing
'leading-[normal]',
{
'px-4 py-2': props.size === null,
'text-sm py-1.5 px-3': props.size === 'small',
'text-xl py-3 px-4': props.size === 'large'
},
{
'w-10 px-0 py-2': props.label == null && props.icon !== null
},
// Shapes
{ 'shadow-lg': props.raised },
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
{ 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' },
// Link Button
{ 'text-primary-600 bg-transparent border-transparent': props.link },
// Plain Button
{ 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
// Plain Text Button
{ 'text-surface-500': props.plain && props.text },
// Plain Outlined Button
{ 'text-surface-500 border border-gray-500': props.plain && props.outlined },
// Text Button
{ 'bg-transparent border-transparent': props.text && !props.plain },
// Outlined Button
{ 'bg-transparent border': props.outlined && !props.plain },
// --- Severity Buttons ---
// Primary Button
{
'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
},
// Primary Text Button
{ 'text-primary': props.text && props.severity === null && !props.plain },
// Primary Outlined Button
{ 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
// Secondary Button
{
'text-surface-900 dark:text-white': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'bg-surface-100 dark:bg-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'border border-surface-100 dark:border-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
},
// Secondary Text Button
{ 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
// Secondary Outlined Button
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': props.outlined && props.severity === 'secondary' && !props.plain },
// Success Button
{
'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
},
// Success Text Button
{ 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
// Success Outlined Button
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': props.outlined && props.severity === 'success' && !props.plain },
// Info Button
{
'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
},
// Info Text Button
{ 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
// Info Outlined Button
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': props.outlined && props.severity === 'info' && !props.plain },
// Warning Button
{
'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
},
// Warning Text Button
{ 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
// Warning Outlined Button
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': props.outlined && props.severity === 'warning' && !props.plain },
// Help Button
{
'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
},
// Help Text Button
{ 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
// Help Outlined Button
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': props.outlined && props.severity === 'help' && !props.plain },
// Danger Button
{
'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
},
// Danger Text Button
{ 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
// Danger Outlined Button
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': props.outlined && props.severity === 'danger' && !props.plain },
// Contrast Button
{
'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
},
// Contrast Text Button
{ 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
// Contrast Outlined Button
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
// --- Severity Button States ---
'focus:outline-none focus:outline-offset-0 focus:ring-1',
// Link
{ 'focus:ring-primary': props.link },
// Plain
{ 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': props.plain && (props.text || props.outlined) },
// Primary
{ 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-primary': props.severity === null },
// Text & Outlined Button
{ 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain },
// Secondary
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
// Success
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
// Text & Outlined Button
{ 'hover:bg-green-300/10': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
// Info
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
// Text & Outlined Button
{ 'hover:bg-blue-300/10': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
// Warning
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
// Text & Outlined Button
{ 'hover:bg-orange-300/10': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
// Help
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
// Text & Outlined Button
{ 'hover:bg-purple-300/10': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
// Danger
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
// Text & Outlined Button
{ 'hover:bg-red-300/10': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
// Contrast
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
// Text & Outlined Button
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
// Disabled
{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
// Transitions
'transition duration-200 ease-in-out',
// Misc
'cursor-pointer overflow-hidden select-none'
]
}),
label: ({ props }) => ({
class: [
'duration-200',
'font-medium',
{
'hover:underline': props.link
},
{ 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
]
}),
icon: ({ props }) => ({
class: [
'mx-0',
{
'mr-2': props.iconPos == 'left' && props.label != null,
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
'mb-2': props.iconPos == 'top' && props.label != null,
'mt-2': props.iconPos == 'bottom' && props.label != null
}
]
}),
loadingicon: ({ props }) => ({
class: [
'h-4 w-4',
'mx-0',
{
'mr-2': props.iconPos == 'left' && props.label != null,
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
'mb-2': props.iconPos == 'top' && props.label != null,
'mt-2': props.iconPos == 'bottom' && props.label != null
},
'animate-spin'
]
}),
badge: ({ props }) => ({
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
})
};

663
packages/tailwindcss-presets/src/aura/calendar/index.js
View File

@ -1,663 +0,0 @@
export default {
root: {
class: [
// Display and Position
'inline-flex',
'max-w-full',
'relative'
]
},
input: ({ props, parent, context }) => ({
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-950': !props.disabled },
'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 },
// Spacing
'm-0 py-2 px-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-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
},
// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null }
]
}),
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 justify-center',
// Shape
'rounded-r-md',
// Size
'py-2 px-0',
'w-10',
'leading-[normal]',
// Colors
'text-primary-inverse',
'bg-primary',
'border border-primary',
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'hover:bg-primary-hover hover:border-primary-hover',
'focus:ring-primary-500 dark:focus:ring-primary-400'
]
}
},
panel: ({ props }) => ({
class: [
// Display & Position
{
absolute: !props.inline,
'inline-block': props.inline
},
// Size
{ 'w-auto p-3 ': !props.inline },
{ 'min-w-[80vw] w-auto p-3 ': props.touchUI },
{ 'p-3 min-w-full': props.inline },
// Shape
'border rounded-lg',
{
'shadow-md': !props.inline
},
// Colors
'bg-surface-0 dark:bg-surface-900',
'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-medium',
// Flexbox and Alignment
'flex items-center justify-between',
// Spacing
'p-0 pb-2',
'm-0',
// Shape
'border-b',
'rounded-t-md',
// Colors
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900',
'border-surface-200 dark:border-surface-700'
]
},
previousbutton: {
class: [
'relative',
// Flexbox and Alignment
'inline-flex items-center justify-center',
// Size
'w-7 h-7',
'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-500/10 ',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
// Misc
'cursor-pointer overflow-hidden'
]
},
title: {
class: [
// Text
'leading-7',
'mx-auto my-0'
]
},
monthTitle: {
class: [
// Font
'text-base leading-[normal]',
'font-medium',
//shape
'rounded-md',
// Colors
'text-surface-700 dark:text-white/80',
// Transitions
'transition duration-200',
// Spacing
'p-1',
'm-0 mr-2',
// States
'hover:text-primary-500 dark:hover:text-primary-400',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
// Misc
'cursor-pointer'
]
},
yearTitle: {
class: [
// Font
'text-base leading-[normal]',
'font-medium',
//shape
'rounded-md',
// Colors
'text-surface-700 dark:text-white/80',
// Transitions
'transition duration-200',
// Spacing
'p-1',
'm-0 mr-2',
// States
'hover:text-primary-500 dark:hover:text-primary-400',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
// Misc
'cursor-pointer'
]
},
nextbutton: {
class: [
'relative',
// Flexbox and Alignment
'inline-flex items-center justify-center',
// Size
'w-7 h-7',
'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-500/10 ',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
// Misc
'cursor-pointer overflow-hidden'
]
},
table: {
class: [
// Font
'text-base leading-[normal]',
// Size & Shape
'border-collapse',
'w-full',
// Spacing
'm-0 mt-2'
]
},
tableheadercell: {
class: [
// Spacing
'p-1',
'font-medium'
]
},
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',
'p-1'
]
},
day: {
class: [
// Spacing
'p-1'
]
},
weeklabelcontainer: ({ context }) => ({
class: [
// Flexbox and Alignment
'flex items-center justify-center',
'mx-auto',
// Shape & Size
'w-8 h-8',
'rounded-full',
'border-transparent border',
'leading-[normal]',
// Colors
{
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
},
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
{
'hover:bg-surface-50 dark:hover:bg-surface-500/10': !context.selected && !context.disabled,
'hover:bg-primary-highlight-hover': 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-8 h-8',
'rounded-full',
'border-transparent border',
'leading-[normal]',
// Colors
{
'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-white/70': context.date.today && !context.selected && !context.disabled,
'bg-transparent text-surface-600 dark:text-white/70': !context.selected && !context.disabled && !context.date.today,
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
},
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
{
'hover:bg-surface-50 dark:hover:bg-surface-500/10': !context.selected && !context.disabled
},
{
'opacity-60 cursor-default': context.disabled,
'cursor-pointer': !context.disabled
}
]
}),
monthpicker: {
class: [
// Spacing
'mt-2'
]
},
month: ({ context }) => ({
class: [
// Flexbox and Alignment
'inline-flex items-center justify-center',
// Size
'w-1/3',
'p-1',
// Shape
'rounded-md',
// Colors
{
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
},
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.selected && !context.disabled
},
// Misc
'cursor-pointer'
]
}),
yearpicker: {
class: [
// Spacing
'mt-2'
]
},
year: ({ context }) => ({
class: [
// Flexbox and Alignment
'inline-flex items-center justify-center',
// Size
'w-1/2',
'p-1',
// Shape
'rounded-md',
// Colors
{
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
},
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !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
'pt-2 mt-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-7 h-7',
'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-500/10 ',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
// Misc
'cursor-pointer overflow-hidden'
]
},
decrementbutton: {
class: [
'relative',
// Flexbox and Alignment
'inline-flex items-center justify-center',
// Size
'w-7 h-7',
'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-500/10 ',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
// 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
'pt-2',
// Shape
'border-t border-surface-200 dark:border-surface-700'
]
},
todaybutton: {
root: {
class: [
// Flexbox and Alignment
'inline-flex items-center justify-center',
// Spacing
'px-3 py-1 text-sm leading-[normal]',
// Shape
'rounded-md',
// Colors
'bg-transparent border-transparent',
'text-primary',
// Transitions
'transition-colors duration-200 ease-in-out',
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
'hover:bg-primary-300/20',
// Misc
'cursor-pointer'
]
}
},
clearbutton: {
root: {
class: [
// Flexbox and Alignment
'inline-flex items-center justify-center',
// Spacing
'px-3 py-1 text-sm leading-[normal]',
// Shape
'rounded-md',
// Colors
'bg-transparent border-transparent',
'text-primary',
// Transitions
'transition-colors duration-200 ease-in-out',
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
'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'
}
};

53
packages/tailwindcss-presets/src/aura/card/index.js
View File

@ -1,53 +0,0 @@
export default {
root: {
class: [
//Flex
'flex flex-col',
//Shape
'rounded-[12px]',
'shadow-md',
//Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0'
]
},
body: {
class: [
//Flex
'flex flex-col',
'gap-4',
'p-6'
]
},
caption: {
class: [
//Flex
'flex flex-col',
'gap-2'
]
},
title: {
class: 'text-xl font-semibold mb-0'
},
subtitle: {
class: [
//Font
'font-normal',
//Spacing
'mb-0',
//Color
'text-surface-600 dark:text-surface-0/60'
]
},
content: {
class: 'p-0'
},
footer: {
class: 'p-0'
}
};

157
packages/tailwindcss-presets/src/aura/carousel/index.js
View File

@ -1,157 +0,0 @@
export default {
root: {
class: [
// Flexbox
'flex flex-col'
]
},
content: {
class: [
// Flexbox & Overflow
'flex flex-col overflow-auto'
]
},
container: ({ props }) => ({
class: [
// Flexbox
'flex',
// Orientation
{
'flex-row': props.orientation !== 'vertical',
'flex-col': props.orientation == 'vertical'
}
]
}),
previousbutton: {
class: [
// Flexbox & Alignment
'flex justify-center items-center self-center',
// Sizing & Overflow
'overflow-hidden w-8 h-8',
// Spacing
'mx-2',
// Shape
'rounded-full',
// Border & Background
'border-0 bg-transparent',
// Color
'text-surface-600',
// States
'hover:bg-surface-50 dark:hover:bg-surface-800',
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
// Transitions
'transition duration-200 ease-in-out'
]
},
nextbutton: {
class: [
// Flexbox & Alignment
'flex justify-center items-center self-center',
// Sizing & Overflow
'overflow-hidden w-8 h-8',
// Spacing
'mx-2',
// Shape
'rounded-full',
// Border & Background
'border-0 bg-transparent',
// Color
'text-surface-600',
// States
'hover:bg-surface-50 dark:hover:bg-surface-800',
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
// Transitions
'transition duration-200 ease-in-out'
]
},
itemscontent: {
class: [
// Overflow & Width
'overflow-hidden w-full'
]
},
itemscontainer: ({ props }) => ({
class: [
// Flexbox
'flex',
// Orientation & Sizing
{
'flex-row': props.orientation !== 'vertical',
'flex-col h-full': props.orientation == 'vertical'
}
]
}),
item: ({ props }) => ({
class: [
// Flexbox
'flex shrink-0 grow ',
// Size
{
'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
'w-full h-full': props.orientation == 'vertical'
}
]
}),
itemcloned: ({ props }) => ({
class: [
// Flexbox
'flex shrink-0 grow',
'unvisible',
// Size
{
'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
'w-full h-full': props.orientation == 'vertical'
}
]
}),
indicators: {
class: [
// Flexbox & Alignment
'flex flex-row justify-center flex-wrap'
]
},
indicator: {
class: [
// Spacing
'mr-2 mb-2'
]
},
indicatorbutton: ({ context }) => ({
class: [
// Sizing & Shape
'w-8 h-2 rounded-md',
// Transitions
'transition duration-200',
// Focus Styles
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Color & Background
{
'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted,
'bg-primary hover:bg-primary-hover': context.highlighted
}
]
})
};

200
packages/tailwindcss-presets/src/aura/cascadeselect/index.js
View File

@ -1,200 +0,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-950': !props.disabled },
'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 },
// Transitions
'transition-all',
'duration-200',
// States
{ 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
// Misc
'cursor-pointer',
'select-none',
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
]
}),
label: ({ props }) => ({
class: [
// Font
'leading-none',
// Flex & Alignment
'flex flex-auto',
// Sizing and Spacing
'w-[1%]',
'py-2 px-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-r-md'
]
},
panel: {
class: [
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
// Shape
'border border-surface-300 dark:border-surface-700',
'rounded-md',
'shadow-md'
]
},
wrapper: {
class: [
// Sizing
'max-h-[200px]',
// Misc
'overflow-auto'
]
},
list: {
class: 'p-1 list-none m-0'
},
item: ({ context }) => ({
class: [
//Shape
'rounded-[4px]',
// Spacing
'first:mt-0 mt-[2px]',
// Colors
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
},
// Transitions
'transition-shadow',
'duration-200',
// States
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
},
// Disabled
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
]
}),
content: {
class: [
'relative',
'leading-[normal]',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Color
'text-surface-700 dark:text-white/80',
// Misc
'no-underline',
'overflow-hidden',
'cursor-pointer',
'select-none'
]
},
groupicon: {
class: [
// Alignment
'ml-auto'
]
},
sublist: {
class: [
// Spacing
'p-1',
'm-0',
'list-none',
'min-w-[12.5rem]',
// Shape
'shadow-none sm:shadow-md',
'rounded-md',
'border border-surface-200 dark:border-surface-700',
// Position
'static sm:absolute',
'z-10',
// Color
'bg-surface-0 dark:bg-surface-900'
]
},
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'
}
};

101
packages/tailwindcss-presets/src/aura/checkbox/index.js
View File

@ -1,101 +0,0 @@
export default {
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Size
'w-5',
'h-5',
// Misc
'cursor-pointer',
'select-none'
]
},
box: ({ props, context }) => ({
class: [
// Alignment
'flex',
'items-center',
'justify-center',
// Size
'w-5',
'h-5',
// Shape
'rounded',
'border',
// Colors
{
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
'border-primary bg-primary': context.checked
},
// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': 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',
'outline-none',
'border border-surface-300 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: {
class: [
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
'text-white dark:text-surface-950',
// Transitions
'transition-all',
'duration-200'
]
}
};

45
packages/tailwindcss-presets/src/aura/chip/index.js
View File

@ -1,45 +0,0 @@
export default {
root: {
class: [
// Flexbox
'inline-flex items-center',
// Spacing
'px-3 py-1',
// Shape
'rounded-[1.14rem]',
// Colors
'text-surface-700 dark:text-white',
'bg-surface-100 dark:bg-surface-700'
]
},
label: {
class: 'leading-6 m-0'
},
icon: {
class: 'leading-6 mr-2'
},
image: {
class: ['w-8 h-8 -ml-2 mr-2', 'rounded-full']
},
removeIcon: {
class: [
// Shape
'rounded-md leading-6',
// Spacing
'ml-[0.375rem]',
// Size
'w-4 h-4',
// Transition
'transition duration-200 ease-in-out',
// Misc
'cursor-pointer'
]
}
};

111
packages/tailwindcss-presets/src/aura/chips/index.js
View File

@ -1,111 +0,0 @@
export default {
root: ({ props, parent }) => ({
class: [
'flex',
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
{
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
container: ({ state, props, parent }) => ({
class: [
// Font
'leading-none',
// Flex
'flex items-center flex-wrap',
'gap-2',
// Spacing
'm-0 list-none',
'p-1',
// Size
'w-full',
// 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-950': !props.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-700': !props.invalid },
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
// Transition
'transition duration-200 ease-in-out',
// Misc
'cursor-text overflow-hidden'
]
}),
inputtoken: {
class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
},
input: {
class: [
// Font
'text-base leading-[normal]',
// 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: [
// Flex
'inline-flex items-center',
// Spacings
'py-1 px-3 m-0',
// Shape
'rounded',
// Colors
'bg-surface-100 dark:bg-surface-700',
'text-surface-700 dark:text-white',
// Misc
'cursor-default'
]
},
removeTokenIcon: {
class: [
// Spacing
'ml-[0.375rem]',
// Size
'w-4 h-4',
// Misc
'cursor-pointer'
]
}
};

126
packages/tailwindcss-presets/src/aura/colorpicker/index.js
View File

@ -1,126 +0,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'
}
};

106
packages/tailwindcss-presets/src/aura/confirmpopup/index.js
View File

@ -1,106 +0,0 @@
export default {
root: {
class: [
// Shape
'rounded-lg',
'shadow-lg',
'border-0',
// Positioning
'z-40 transform origin-center',
'mt-3 absolute left-0 top-0',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0/80',
// Before: Arrow
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
]
},
content: {
class: ['p-4 items-center flex', 'rounded-t-lg', 'border-x border-t last:border-b border-surface-200 dark:border-surface-700']
},
icon: {
class: 'text-2xl mr-4'
},
footer: {
class: [
// Flexbox and Alignment
'flex items-center justify-end',
'shrink-0',
'text-right',
'gap-2',
// Spacing
'px-4',
'pb-4',
// Shape
'border-t-0',
'rounded-b-lg',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0/80',
'border-x border-b border-surface-200 dark:border-surface-700'
]
},
rejectbutton: {
root: {
class: [
'relative',
// Alignments
'items-center inline-flex text-center align-bottom justify-center',
// Sizes & Spacing
'px-4 py-2 leading-none',
// Shape
'rounded-md',
// Color
'text-primary',
// States
'hover:bg-primary-300/20',
'focus:outline-none focus:outline-offset-0 focus:ring',
'focus:ring-primary-500 dark:focus:ring-primary-400'
]
}
},
acceptbutton: {
root: {
class: [
'relative',
// Alignments
'items-center inline-flex text-center align-bottom justify-center',
// Sizes & Spacing
'px-4 py-2 leading-none',
// Shape
'rounded-md',
// Color
'text-primary-inverse',
'bg-primary',
'border border-primary',
// States
'hover:bg-primary-hover hover:border-primary-hover',
'focus:outline-none focus:outline-offset-0 focus:ring',
'focus:ring-primary-500 dark:focus:ring-primary-400'
]
}
},
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'
}
};

125
packages/tailwindcss-presets/src/aura/contextmenu/index.js
View File

@ -1,125 +0,0 @@
export default {
root: {
class: [
// Sizing and Shape
'min-w-[12.5rem]',
'rounded-md',
'shadow-md',
// Spacing
'p-1',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
'border border-surface-200 dark:border-surface-700'
]
},
menu: {
class: [
// Spacings and Shape
'list-none',
'm-0',
'p-0',
'outline-none'
]
},
menuitem: {
class: 'relative my-[2px] [&:first-child]:mt-0'
},
content: ({ context }) => ({
class: [
//Shape
'rounded-[4px]',
// Colors
'text-surface-700 dark:text-white/80',
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
},
// Transitions
'transition-shadow',
'duration-200',
// States
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-bg-primary-highlight-hover text-primary-highlight-inverse': context.active
},
// Disabled
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
]
}),
action: {
class: [
'relative',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Color
'text-surface-700 dark:text-white/80',
// Misc
'no-underline',
'overflow-hidden',
'cursor-pointer',
'select-none'
]
},
icon: {
class: [
// Spacing
'mr-2',
// Color
'text-surface-600 dark:text-white/70'
]
},
label: {
class: ['leading-none']
},
submenu: ({ props }) => ({
class: [
// Size
'w-full sm:w-48',
// Spacing
'p-1',
'm-0',
'list-none',
// Shape
'shadow-md',
'rounded-md',
'dark:border dark:border-surface-700',
// Position
'static sm:absolute',
'z-10',
{ 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
// Color
'bg-surface-0 dark:bg-surface-900'
]
}),
submenuicon: {
class: ['ml-auto']
},
separator: {
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
},
transition: {
enterFromClass: 'opacity-0',
enterActiveClass: 'transition-opacity duration-250'
}
};

1155
packages/tailwindcss-presets/src/aura/datatable/index.js
View File

File diff suppressed because it is too large Load Diff

40
packages/tailwindcss-presets/src/aura/dataview/index.js
View File

@ -1,40 +0,0 @@
export default {
content: {
class: [
// Spacing
'p-0',
// Shape
'border-0',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900'
]
},
grid: {
class: [
// flex
'flex flex-wrap',
// Spacing
'ml-0 mr-0 mt-0',
// Color
'bg-surface-0 dark:bg-surface-900'
]
},
header: {
class: [
'font-semibold',
// Spacing
'py-3 px-4',
// Color
'text-surface-800 dark:text-white/80',
'bg-surface-00 dark:bg-surface-900',
'border-b border-surface-200 dark:border-surface-700'
]
}
};

58
packages/tailwindcss-presets/src/aura/dataviewlayoutoptions/index.js
View File

@ -1,58 +0,0 @@
export default {
listbutton: ({ props }) => ({
class: [
// Font
'leading-none',
// Flex Alignment
'inline-flex items-center align-bottom text-center',
// Shape
'border rounded-md rounded-r-none',
// Spacing
'px-4 py-3',
// Color
props.modelValue === 'list' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
props.modelValue === 'list' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
// Transition
'transition duration-200',
// Misc
'cursor-pointer select-none overflow-hidden'
]
}),
gridbutton: ({ props }) => ({
class: [
// Font
'leading-none',
// Flex Alignment
'inline-flex items-center align-bottom text-center',
// Shape
'border rounded-md rounded-l-none',
// Spacing
'px-4 py-3',
// Color
props.modelValue === 'grid' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
// States
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
props.modelValue === 'grid' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
// Transition
'transition duration-200',
// Misc
'cursor-pointer select-none overflow-hidden'
]
})
};

3
packages/tailwindcss-presets/src/aura/deferred/index.js
View File

@ -1,3 +0,0 @@
export default {
root: {}
};

239
packages/tailwindcss-presets/src/aura/dialog/index.js
View File

@ -1,239 +0,0 @@
export default {
root: ({ state }) => ({
class: [
// Shape
'rounded-lg',
'shadow-lg',
'border-0',
// Size
'max-h-[90vh]',
'w-[50vw]',
'm-0',
// Color
'bg-surface-0 dark:bg-surface-900',
'[&:last-child]:border-b',
'border-surface-200 dark:border-surface-700',
// Transitions
'transform',
'scale-100',
// Maximized State
{
'transition-none': state.maximized,
'transform-none': state.maximized,
'!w-screen': state.maximized,
'!h-screen': state.maximized,
'!max-h-full': state.maximized,
'!top-0': state.maximized,
'!left-0': state.maximized
}
]
}),
header: {
class: [
// Flexbox and Alignment
'flex items-center justify-between',
'shrink-0',
// Spacing
'p-6',
// Shape
'rounded-tl-lg',
'rounded-tr-lg',
// Colors
'text-surface-700 dark:text-surface-0/80',
'border border-b-0',
'border-surface-200 dark:border-surface-700'
]
},
title: {
class: ['font-semibold text-xl leading-[normal]']
},
icons: {
class: ['flex items-center']
},
closeButton: {
class: [
'relative',
// Flexbox and Alignment
'flex items-center justify-center',
// Size and Spacing
'mr-2',
'last:mr-0',
'w-7 h-7',
// 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-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
// Misc
'overflow-hidden'
]
},
maximizablebutton: {
class: [
'relative',
// Flexbox and Alignment
'flex items-center justify-center',
// Size and Spacing
'mr-2',
'last:mr-0',
'w-7 h-7',
// 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-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
// Misc
'overflow-hidden'
]
},
closeButtonIcon: {
class: [
// Display
'inline-block',
// Size
'w-4',
'h-4'
]
},
maximizableicon: {
class: [
// Display
'inline-block',
// Size
'w-4',
'h-4'
]
},
content: ({ state, instance }) => ({
class: [
// Spacing
'px-6',
'pb-6',
'pt-0',
// Shape
{
grow: state.maximized,
'rounded-bl-lg': !instance.$slots.footer,
'rounded-br-lg': !instance.$slots.footer
},
// Colors
'text-surface-700 dark:text-surface-0/80',
'border border-t-0 border-b-0',
'border-surface-200 dark:border-surface-700',
// Misc
'overflow-y-auto'
]
}),
footer: {
class: [
// Flexbox and Alignment
'flex items-center justify-end',
'shrink-0',
'text-right',
'gap-2',
// Spacing
'px-6',
'pb-6',
// Shape
'border-t-0',
'rounded-b-lg',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0/80',
'border border-t-0 border-b-0',
'border-surface-200 dark:border-surface-700'
]
},
mask: ({ props }) => ({
class: [
// Transitions
'transition-all',
'duration-300',
{ 'p-5': !props.position == 'full' },
// Background and Effects
{ 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
]
}),
transition: ({ props }) => {
return props.position === 'top'
? {
enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
enterActiveClass: 'transition-all duration-200 ease-out',
leaveActiveClass: 'transition-all duration-200 ease-out',
leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active'
}
: props.position === 'bottom'
? {
enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
enterActiveClass: 'transition-all duration-200 ease-out',
leaveActiveClass: 'transition-all duration-200 ease-out',
leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active'
}
: props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
? {
enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
enterActiveClass: 'transition-all duration-200 ease-out',
leaveActiveClass: 'transition-all duration-200 ease-out',
leaveToClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active'
}
: props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
? {
enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
enterActiveClass: 'transition-all duration-200 ease-out',
leaveActiveClass: 'transition-all duration-200 ease-out',
leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active'
}
: {
enterFromClass: 'opacity-0 scale-75 mask-active',
enterActiveClass: 'transition-all duration-200 ease-out',
leaveActiveClass: 'transition-all duration-200 ease-out',
leaveToClass: 'opacity-0 scale-75 mask-active'
};
}
};

67
packages/tailwindcss-presets/src/aura/divider/index.js
View File

@ -1,67 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Flex and Position
'flex relative',
{ 'justify-center': props.layout == 'vertical' },
{ 'items-center': props.layout == 'vertical' },
{
'justify-start': props?.align == 'left' && props.layout == 'horizontal',
'justify-center': props?.align == 'center' && props.layout == 'horizontal',
'justify-end': props?.align == 'right' && props.layout == 'horizontal',
'items-center': props?.align == 'top' && props.layout == 'vertical',
'items-start': props?.align == 'center' && props.layout == 'vertical',
'items-end': props?.align == 'bottom' && props.layout == 'vertical'
},
// Spacing
{
'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
'mx-4 md:mx-5 py-5': props.layout == 'vertical'
},
// Size
{
'w-full': props.layout == 'horizontal',
'min-h-full': props.layout == 'vertical'
},
// Before: Line
'before:block',
// Position
{
'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical'
},
// Size
{
'before:w-full': props.layout == 'horizontal',
'before:min-h-full': props.layout == 'vertical'
},
// Shape
{
'before:border-solid': props.type == 'solid',
'before:border-dotted': props.type == 'dotted',
'before:border-dashed': props.type == 'dashed'
},
// Color
{
'before:border-t before:border-surface-200 before:dark:border-surface-600': props.layout == 'horizontal',
'before:border-l before:border-surface-200 before:dark:border-surface-600': props.layout == 'vertical'
}
]
}),
content: {
class: [
// Space and Position
'px-1 z-10',
// Color
'bg-surface-0 dark:bg-surface-800'
]
}
};

93
packages/tailwindcss-presets/src/aura/dock/index.js
View File

@ -1,93 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Positioning
'absolute z-1',
{
'left-0 bottom-0 w-full': props.position == 'bottom',
'left-0 top-0 w-full': props.position == 'top',
'left-0 top-0 h-full': props.position == 'left',
'right-0 top-0 h-full': props.position == 'right'
},
// Flexbox & Alignment
'flex justify-center items-center',
// Interactivity
'pointer-events-none'
]
}),
container: {
class: [
// Flexbox
'flex',
// Shape & Border
'rounded-md',
// Color
'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
'backdrop-blur-sm',
// Spacing
'p-2',
// Misc
'pointer-events-auto'
]
},
menu: ({ props }) => ({
class: [
// Flexbox & Alignment
'flex items-center justify-center',
{
'flex-col': props.position == 'left' || props.position == 'right'
},
// List Style
'm-0 p-0 list-none',
// Shape
'outline-none'
]
}),
menuitem: ({ props, context, instance }) => ({
class: [
// Spacing & Shape
'p-2 rounded-md',
// Conditional Scaling
{
'hover:scale-150': instance.currentIndex === context.index,
'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
},
// Positioning & Hover States
{
'origin-bottom hover:mx-6': props.position == 'bottom',
'origin-top hover:mx-6': props.position == 'top',
'origin-left hover:my-6': props.position == 'left',
'origin-right hover:my-6': props.position == 'right'
},
// Transitions & Transform
'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
]
}),
action: {
class: [
// Flexbox & Alignment
'flex flex-col items-center justify-center',
// Position
'relative',
// Size
'w-16 h-16',
// Misc
'cursor-default overflow-hidden'
]
}
};

263
packages/tailwindcss-presets/src/aura/dropdown/index.js
View File

@ -1,263 +0,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-950': !props.disabled },
'border',
{ '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
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// Transitions
'transition-all',
'duration-200',
// States
{ 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
// Misc
'cursor-pointer',
'select-none',
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
]
}),
input: ({ props, parent }) => ({
class: [
//Font
'leading-[normal]',
// 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%]',
'py-2 px-3',
{ 'pr-7': props.showClear },
//Shape
'rounded-none',
// Transitions
'transition',
'duration-200',
// States
'focus:outline-none focus:shadow-none',
// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },
// 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-r-md'
]
},
panel: {
class: [
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
// Shape
'border border-surface-300 dark:border-surface-700',
'rounded-md',
'shadow-md'
]
},
wrapper: {
class: [
// Sizing
'max-h-[200px]',
// Misc
'overflow-auto'
]
},
list: {
class: 'p-1 list-none m-0'
},
item: ({ context }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0 px-3 py-2',
'first:mt-0 mt-[2px]',
// Shape
'border-0 rounded',
// 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-highlight-inverse': context.selected,
'bg-primary-highlight': context.selected
},
//States
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
{ 'hover:bg-primary-highlight-hover': context.selected },
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
// Transition
'transition-shadow duration-200',
// Misc
'cursor-pointer overflow-hidden whitespace-nowrap'
]
}),
itemgroup: {
class: [
'font-semibold',
// Spacing
'm-0 py-2 px-3',
// Colors
'text-surface-400 dark:text-surface-500',
// Misc
'cursor-auto'
]
},
emptymessage: {
class: [
// Font
'leading-none',
// Spacing
'py-2 px-3',
// Color
'text-surface-800 dark:text-white/80',
'bg-transparent'
]
},
header: {
class: [
// Spacing
'pt-2 px-2 pb-0',
'm-0',
//Shape
'border-b-0',
'rounded-tl-md',
'rounded-tr-md',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900',
'border-surface-300 dark:border-surface-700'
]
},
filtercontainer: {
class: 'relative'
},
filterinput: {
class: [
// Font
'leading-[normal]',
// Sizing
'py-2 pl-3 pr-7',
'-mr-7',
'w-full',
//Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-950',
'border-surface-200 dark:border-surface-700',
// Shape
'border',
'rounded-lg',
'appearance-none',
// Transitions
'transition',
'duration-200',
// 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',
// Misc
'appearance-none'
]
},
filtericon: {
class: ['absolute', 'top-1/2 right-3', '-mt-2']
},
clearicon: {
class: [
// Color
'text-surface-400 dark:text-surface-500',
// Position
'absolute',
'top-1/2',
'right-12',
// Spacing
'-mt-2'
]
},
loadingicon: {
class: 'text-surface-400 dark:text-surface-500 animate-spin'
},
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'
}
};

81
packages/tailwindcss-presets/src/aura/fieldset/index.js
View File

@ -1,81 +0,0 @@
export default {
root: {
class: [
// Spacing
'p-[1.125rem] pt-0',
// Shape
'rounded-md',
// Color
'border border-surface-200 dark:border-surface-700',
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0/80'
]
},
legend: ({ props }) => ({
class: [
// Font
'font-semibold',
'leading-none',
//Spacing
'p-0 mb-[0.375rem]',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0/80',
'bg-surface-0 dark:bg-surface-900',
// Transition
'transition-none',
// States
{ 'hover:bg-surface-100 dark:hover:bg-surface-800': props.toggleable }
]
}),
toggler: ({ props }) => ({
class: [
// Alignments
'flex items-center justify-center',
'relative',
//Spacing
{ 'py-2 px-3': props.toggleable },
// Shape
{ 'rounded-md': props.toggleable },
// Color
{ 'text-surface-700 dark:text-surface-200 hover:text-surface-900': props.toggleable },
// States
{ 'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable },
{ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300': props.toggleable },
// Misc
{
'transition-none cursor-pointer overflow-hidden select-none': props.toggleable
}
]
}),
togglerIcon: {
class: 'mr-2 inline-block'
},
legendTitle: ({ props }) => ({
class: ['flex items-center justify-center leading-none', { 'py-2 px-3': !props.toggleable }]
}),
content: {
class: 'p-0'
},
transition: {
enterFromClass: 'max-h-0',
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
enterToClass: 'max-h-[1000px]',
leaveFromClass: 'max-h-[1000px]',
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
leaveToClass: 'max-h-0'
}
};

175
packages/tailwindcss-presets/src/aura/fileupload/index.js
View File

@ -1,175 +0,0 @@
export default {
input: {
class: 'hidden'
},
buttonbar: {
class: [
// Flexbox
'flex',
'flex-wrap',
// Colors
'bg-surface-0',
'dark:bg-surface-900',
'text-surface-700',
'dark:text-white/80',
// Spacing
'p-[1.125rem]',
'gap-2',
// Borders
'border',
'border-solid',
'border-surface-200',
'dark:border-surface-700',
'border-b-0',
// Shape
'rounded-tr-lg',
'rounded-tl-lg'
]
},
chooseButton: {
class: [
'relative',
// Alignments
'items-center inline-flex text-center align-bottom justify-center',
// Spacing
'px-4 py-2',
// Shape
'rounded-md',
// Font
'leading-[normal]',
'font-medium',
// Colors
'text-primary-inverse',
'bg-primary',
'border-primary',
// States
'hover:bg-primary-hover',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary',
// Misc
'overflow-hidden',
'cursor-pointer'
]
},
chooseIcon: {
class: ['mr-2', 'inline-block']
},
chooseButtonLabel: {
class: ['flex-1', 'font-bold']
},
uploadbutton: {
icon: {
class: 'mr-2'
}
},
cancelbutton: {
icon: {
class: 'mr-2'
}
},
content: {
class: [
// Position
'relative',
// Colors
'bg-surface-0',
'dark:bg-surface-900',
'text-surface-700',
'dark:text-white/80',
// Spacing
'p-[1.125rem]',
// Borders
'border border-t-0',
'border-surface-200',
'dark:border-surface-700',
// Shape
'rounded-b-lg'
]
},
file: {
class: [
// Flexbox
'flex',
'items-center',
'flex-wrap',
// Spacing
'p-4',
'mb-2',
'last:mb-0',
// Borders
'border',
'border-surface-200',
'dark:border-surface-700',
'gap-2',
// Shape
'rounded'
]
},
thumbnail: {
class: 'shrink-0'
},
fileName: {
class: 'mb-2 break-all'
},
fileSize: {
class: 'mr-2'
},
uploadicon: {
class: 'mr-2'
},
progressbar: {
root: {
class: [
// Position and Overflow
'overflow-hidden',
'absolute top-0 left-0',
// Shape and Size
'border-0',
'h-2',
'rounded-md',
'w-full',
// Colors
'bg-surface-100 dark:bg-surface-700'
]
},
value: {
class: [
// Flexbox & Overflow & Position
'absolute flex items-center justify-center overflow-hidden',
// Colors
'bg-primary',
// Spacing & Sizing
'm-0',
'h-full w-0',
// Shape
'border-0',
// Transitions
'transition-width duration-1000 ease-in-out'
]
}
}
};

26
packages/tailwindcss-presets/src/aura/floatlabel/index.js
View File

@ -1,26 +0,0 @@
export default {
root: {
class: [
'block relative',
// Base Label Appearance
'[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
'[&>*:last-child]:absolute',
'[&>*:last-child]:top-1/2',
'[&>*:last-child]:-translate-y-1/2',
'[&>*:last-child]:left-3',
'[&>*:last-child]:pointer-events-none',
'[&>*:last-child]:transition-all',
'[&>*:last-child]:duration-200',
'[&>*:last-child]:ease',
// Focus Label Appearance
'[&>*:last-child]:has-[:focus]:-top-3',
'[&>*:last-child]:has-[:focus]:text-sm',
// Filled Input Label Appearance
'[&>*:last-child]:has-[.filled]:-top-3',
'[&>*:last-child]:has-[.filled]:text-sm'
]
}
};

308
packages/tailwindcss-presets/src/aura/galleria/index.js
View File

@ -1,308 +0,0 @@
export default {
content: ({ parent, props }) => ({
class: [
'flex',
{
'flex-col': props.fullScreen
},
{
'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
}
]
}),
itemwrapper: ({ parent, props }) => ({
class: [
'group',
'flex relative',
{
'grow shrink w-0 justify-center': props.fullScreen
},
{
'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
},
{
'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
'flex-row': parent.props.thumbnailsPosition === 'right'
}
]
}),
itemcontainer: ({ parent }) => ({
class: [
'flex h-full relative',
{
'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
}
]
}),
item: {
class: [
// Flex
'flex justify-center items-center h-full w-full',
// Sizing
'h-full w-full'
]
},
thumbnailwrapper: ({ parent }) => ({
class: [
// Flex
'flex flex-col shrink-0',
{
'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
},
// Misc
'overflow-auto'
]
}),
thumbnailcontainer: ({ parent }) => ({
class: [
// Flex
'flex',
// Spacing
'p-4',
// Colors
'bg-black/90',
{
'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
}
]
}),
previousthumbnailbutton: {
class: [
// Positioning
'self-center relative',
// Display & Flexbox
'flex shrink-0 justify-center items-center overflow-hidden',
// Spacing
'm-2',
// Appearance
'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
// Hover Effects
'hover:bg-surface-0/10 hover:text-white',
// Focus Effects
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
]
},
thumbnailitemscontainer: {
class: 'overflow-hidden w-full'
},
thumbnailitems: ({ parent }) => ({
class: [
'flex',
{
'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
}
]
}),
thumbnailitem: ({ parent }) => ({
class: [
// Flexbox
'flex items-center justify-center',
'grow shrink-0',
// Sizing
{
'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
},
// Misc
'overflow-auto',
'cursor-pointer',
'opacity-50',
// States
'[&[data-p-active="true"]]:opacity-100',
'hover:opacity-100',
// Transitions
'transition-opacity duration-300'
]
}),
nextthumbnailbutton: {
class: [
// Positioning
'self-center relative',
// Display & Flexbox
'flex shrink-0 justify-center items-center overflow-hidden',
// Spacing
'm-2',
// Appearance
'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
// Hover Effects
'hover:bg-surface-0/10 hover:text-white',
// Focus Effects
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
]
},
indicators: ({ parent }) => ({
class: [
// flex
'flex items-center justify-center',
// Spacing
'p-4',
// Indicators Position
{
'order-2': parent.props.indicatorsPosition == 'bottom',
'order-1': parent.props.indicatorsPosition == 'top',
'order-1 flex-col': parent.props.indicatorsPosition == 'left',
'flex-col order-2': parent.props.indicatorsPosition == 'right'
},
{
'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
},
{
'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
}
]
}),
indicator: ({ parent }) => ({
class: [
{
'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
}
]
}),
indicatorbutton: ({ context }) => ({
class: [
// Size
'w-4 h-4',
// Appearance
'rounded-full transition duration-200',
// Focus Effects
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Conditional Appearance: Not Highlighted
{ 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
// Conditional Appearance: Highlighted
{ 'bg-primary hover:bg-primary-hover': context.highlighted }
]
}),
mask: {
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
},
closebutton: {
class: [
// Positioning
'!absolute top-0 right-0',
// Display & Flexbox
'flex justify-center items-center overflow-hidden',
// Spacing
'm-2',
// Appearance
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
// Hover Effect
'hover:text-white hover:bg-surface-0/10',
// Focus Effects
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
]
},
closeicon: {
class: 'w-6 h-6'
},
previousitembutton: ({ parent }) => ({
class: [
// Display & Flexbox
'inline-flex justify-center items-center overflow-hidden',
// Appearance
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
{
'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
},
// Spacing
'mx-2',
// Positioning
'top-1/2 mt-[-0.5rem] left-0',
{
'!absolute': parent.props.showItemNavigators,
'!fixed': !parent.props.showItemNavigators
},
// Hover Effect
'hover:bg-surface-0/10 hover:text-white',
// Focus Effects
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
]
}),
nextitembutton: ({ parent }) => ({
class: [
// Display & Flexbox
'inline-flex justify-center items-center overflow-hidden',
// Appearance
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
{
'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
},
// Spacing
'mx-2',
// Positioning
'top-1/2 mt-[-0.5rem] right-0',
{
'!absolute': parent.props.showItemNavigators,
'!fixed': !parent.props.showItemNavigators
},
// Hover Effect
'hover:bg-surface-0/10 hover:text-white',
// Focus Effects
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
]
}),
caption: {
class: [
// Positioning
'absolute bottom-0 left-0 w-full',
// Appearance
'bg-black/50 text-white p-4'
]
},
transition: {
enterFromClass: 'opacity-0 scale-75',
enterActiveClass: 'transition-all duration-150 ease-in-out',
leaveActiveClass: 'transition-all duration-150 ease-in',
leaveToClass: 'opacity-0 scale-75'
}
};

0
packages/tailwindcss-presets/src/aura/global.js → packages/tailwindcss-presets/src/aura/global.ts
View File

22
packages/tailwindcss-presets/src/aura/iconfield/index.js
View File

@ -1,22 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'relative',
'[&>input]:w-full',
'[&>*:first-child]:absolute',
'[&>*:first-child]:top-1/2',
'[&>*:first-child]:-mt-2',
'[&>*:first-child]:leading-none',
'[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
{
'[&>*:first-child]:right-3': props.iconPosition === 'right',
'[&>*:first-child]:left-3': props.iconPosition === 'left'
},
{
'[&>*:last-child]:pr-10': props.iconPosition === 'right',
'[&>*:last-child]:pl-10': props.iconPosition === 'left'
}
]
})
};

206
packages/tailwindcss-presets/src/aura/image/index.js
View File

@ -1,206 +0,0 @@
export default {
root: {
class: 'relative inline-block'
},
button: {
class: [
// Flexbox & Alignment
'flex items-center justify-center',
// Positioning
'absolute',
// Shape
'inset-0 opacity-0 transition-opacity duration-300',
// Color
'bg-transparent text-surface-100',
// States
'hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50'
]
},
mask: {
class: [
// Flexbox & Alignment
'flex items-center justify-center',
// Positioning
'fixed top-0 left-0',
// Sizing
'w-full h-full',
// Color
'bg-black/90'
]
},
toolbar: {
class: [
// Flexbox
'flex',
// Positioning
'absolute top-0 right-0',
// Spacing
'p-4'
]
},
rotaterightbutton: {
class: [
'z-20',
// Flexbox & Alignment
'flex justify-center items-center',
// Size
'w-12 h-12',
// Spacing
'mr-2',
// Shape
'rounded-full',
// Color
'text-white bg-transparent',
// States
'hover:text-white hover:bg-surface-0/10',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transition
'transition duration-200 ease-in-out'
]
},
rotaterighticon: {
class: 'w-6 h-6'
},
rotateleftbutton: {
class: [
'z-20',
// Flexbox & Alignment
'flex justify-center items-center',
// Size
'w-12 h-12',
// Spacing
'mr-2',
// Shape
'rounded-full',
// Color
'text-white bg-transparent',
// States
'hover:text-white hover:bg-surface-0/10',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transition
'transition duration-200 ease-in-out'
]
},
rotatelefticon: {
class: 'w-6 h-6'
},
zoomoutbutton: {
class: [
'z-20',
// Flexbox & Alignment
'flex justify-center items-center',
// Size
'w-12 h-12',
// Spacing
'mr-2',
// Shape
'rounded-full',
// Color
'text-white bg-transparent',
// States
'hover:text-white hover:bg-surface-0/10',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transition
'transition duration-200 ease-in-out'
]
},
zoomouticon: {
class: 'w-6 h-6'
},
zoominbutton: {
class: [
'z-20',
// Flexbox & Alignment
'flex justify-center items-center',
// Size
'w-12 h-12',
// Spacing
'mr-2',
// Shape
'rounded-full',
// Color
'text-white bg-transparent',
// States
'hover:text-white hover:bg-surface-0/10',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transition
'transition duration-200 ease-in-out'
]
},
zoominicon: {
class: 'w-6 h-6'
},
closebutton: {
class: [
'z-20',
// Flexbox & Alignment
'flex justify-center items-center',
// Size
'w-12 h-12',
// Spacing
'mr-2',
// Shape
'rounded-full',
// Color
'text-white bg-transparent',
// States
'hover:text-white hover:bg-surface-0/10',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transition
'transition duration-200 ease-in-out'
]
},
closeicon: {
class: 'w-6 h-6'
},
transition: {
enterFromClass: 'opacity-0 scale-75',
enterActiveClass: 'transition-all duration-150 ease-in-out',
leaveActiveClass: 'transition-all duration-150 ease-in',
leaveToClass: 'opacity-0 scale-75'
}
};

207
packages/tailwindcss-presets/src/aura/index.js
View File

@ -1,207 +0,0 @@
import accordion from './accordion';
import autocomplete from './autocomplete';
import avatar from './avatar';
import avatargroup from './avatargroup';
import badge from './badge';
import badgedirective from './badgedirective';
import blockui from './blockui';
import breadcrumb from './breadcrumb';
import button from './button';
import calendar from './calendar';
import card from './card';
import carousel from './carousel';
import cascadeselect from './cascadeselect';
import checkbox from './checkbox';
import chip from './chip';
import chips from './chips';
import colorpicker from './colorpicker';
import confirmpopup from './confirmpopup';
import contextmenu from './contextmenu';
import datatable from './datatable';
import dataview from './dataview';
import dataviewlayoutoptions from './dataviewlayoutoptions';
import deferred from './deferred';
import dialog from './dialog';
import divider from './divider';
import dock from './dock';
import dropdown from './dropdown';
import fieldset from './fieldset';
import fileupload from './fileupload';
import floatlabel from './floatlabel';
import galleria from './galleria';
import global from './global';
import iconfield from './iconfield';
import image from './image';
import inlinemessage from './inlinemessage';
import inplace from './inplace';
import inputgroup from './inputgroup';
import inputgroupaddon from './inputgroupaddon';
import inputmask from './inputmask';
import inputnumber from './inputnumber';
import inputotp from './inputotp';
import inputswitch from './inputswitch';
import inputtext from './inputtext';
import knob from './knob';
import listbox from './listbox';
import megamenu from './megamenu';
import menu from './menu';
import menubar from './menubar';
import message from './message';
import metergroup from './metergroup';
import multiselect from './multiselect';
import orderlist from './orderlist';
import organizationchart from './organizationchart';
import overlaypanel from './overlaypanel';
import paginator from './paginator';
import panel from './panel';
import panelmenu from './panelmenu';
import password from './password';
import picklist from './picklist';
import progressbar from './progressbar';
import progressspinner from './progressspinner';
import radiobutton from './radiobutton';
import rating from './rating';
import ripple from './ripple';
import scrollpanel from './scrollpanel';
import scrolltop from './scrolltop';
import selectbutton from './selectbutton';
import sidebar from './sidebar';
import skeleton from './skeleton';
import slider from './slider';
import speeddial from './speeddial';
import splitbutton from './splitbutton';
import splitter from './splitter';
import splitterpanel from './splitterpanel';
import stepper from './stepper';
import steps from './steps';
import tabmenu from './tabmenu';
import tabview from './tabview';
import tag from './tag';
import terminal from './terminal';
import textarea from './textarea';
import tieredmenu from './tieredmenu';
import timeline from './timeline';
import toast from './toast';
import togglebutton from './togglebutton';
import toolbar from './toolbar';
import tooltip from './tooltip';
import tree from './tree';
import treeselect from './treeselect';
import treetable from './treetable';
import tristatecheckbox from './tristatecheckbox';
export default {
global,
directives: {
badge: badgedirective,
ripple,
tooltip
},
//forms
autocomplete,
dropdown,
inputnumber,
inputtext,
calendar,
checkbox,
radiobutton,
inputswitch,
selectbutton,
slider,
chips,
rating,
multiselect,
togglebutton,
cascadeselect,
listbox,
colorpicker,
inputgroup,
inputgroupaddon,
inputmask,
knob,
treeselect,
tristatecheckbox,
textarea,
password,
iconfield,
floatlabel,
inputotp,
//buttons
button,
splitbutton,
speeddial,
//data
paginator,
datatable,
tree,
dataview,
dataviewlayoutoptions,
organizationchart,
orderlist,
picklist,
treetable,
timeline,
//panels
accordion,
panel,
fieldset,
card,
tabview,
divider,
toolbar,
scrollpanel,
splitter,
splitterpanel,
stepper,
deferred,
//file
fileupload,
//menu
contextmenu,
menu,
menubar,
steps,
tieredmenu,
breadcrumb,
panelmenu,
megamenu,
dock,
tabmenu,
//overlays
dialog,
overlaypanel,
sidebar,
confirmpopup,
//messages
message,
inlinemessage,
toast,
//media
carousel,
galleria,
image,
//misc
badge,
avatar,
avatargroup,
tag,
chip,
progressbar,
skeleton,
scrolltop,
terminal,
blockui,
metergroup,
inplace,
progressspinner
};

9
packages/tailwindcss-presets/src/aura/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { PrimeVuePTOptions } from 'primevue/config';
import global from './global';
import inputtext from './inputtext';
export default {
global,
directives: {},
inputtext
} as PrimeVuePTOptions;

42
packages/tailwindcss-presets/src/aura/inlinemessage/index.js
View File

@ -1,42 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'inline-flex items-center justify-center align-top gap-2',
'p-3 m-0 rounded-md border',
{
'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
},
{
'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
'border-green-200 dark:border-green-500/20': props.severity == 'success',
'border-surface-200 dark:border-surface-500/20': props.severity == 'secondary',
'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
'border-red-200 dark:border-red-500/20': props.severity == 'error',
'border-surface-950 dark:border-surface-0': props.severity == 'contrast'
},
{
'text-blue-700 dark:text-blue-300': props.severity == 'info',
'text-green-700 dark:text-green-300': props.severity == 'success',
'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
'text-orange-700 dark:text-orange-300': props.severity == 'warn',
'text-red-700 dark:text-red-300': props.severity == 'error',
'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
}
]
}),
icon: {
class: 'text-base'
},
text: {
class: [
// Font and Text
'text-base leading-none',
'font-medium'
]
}
};

27
packages/tailwindcss-presets/src/aura/inplace/index.js
View File

@ -1,27 +0,0 @@
export default {
display: {
class: [
// Display
'inline',
// Spacing
'px-3 py-2',
// Shape
'rounded-md',
// Colors
'text-surface-700 dark:text-white/80',
// States
'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-800 dark:hover:text-white/80',
// Transitions
'transition',
'duration-200',
// Misc
'cursor-pointer'
]
}
};

5
packages/tailwindcss-presets/src/aura/inputgroup/index.js
View File

@ -1,5 +0,0 @@
export default {
root: {
class: ['flex items-stretch', 'w-full']
}
};

28
packages/tailwindcss-presets/src/aura/inputgroupaddon/index.js
View File

@ -1,28 +0,0 @@
export default {
root: {
class: [
// Flex
'flex items-center justify-center',
// Shape
'first:rounded-l-md',
'last:rounded-r-md',
'border-y',
'last:border-r',
'border-l',
'border-r-0',
// Space
'p-2',
// Size
'min-w-[2.5rem]',
// Color
'bg-transparent dark:bg-surface-900',
'text-surface-800 dark:text-white/80',
'border-surface-300 dark:border-surface-700'
]
}
};

39
packages/tailwindcss-presets/src/aura/inputmask/index.js
View File

@ -1,39 +0,0 @@
export default {
root: ({ context, props, parent }) => ({
class: [
// Font
'leading-none',
// Spacing
'm-0 py-2 px-3',
// Colors
'text-surface-800 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
},
// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
// Misc
'rounded-md',
'appearance-none',
'transition-colors duration-200'
]
})
};

172
packages/tailwindcss-presets/src/aura/inputnumber/index.js
View File

@ -1,172 +0,0 @@
export default {
root: ({ props, parent }) => ({
class: [
// Flex
'inline-flex',
'relative',
{ '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-700': 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: [
// Font
'leading-none',
// Display
'flex flex-auto',
//Text
{ 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
// Spacing
'py-2 px-3',
'm-0',
// Shape
'rounded-md',
{ 'rounded-l-none rounded-r-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
{ 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
{ '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-950': !context.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !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': !parent.props.invalid },
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
{ 'bg-surface-200 dark:bg-surface-700 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',
{ 'absolute top-px right-px h-[calc(100%-2px)] z-20': props.showButtons && props.buttonLayout == 'stacked' }
]
}),
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-surface-800 dark:text-surface-0',
'bg-transparent',
{ 'dark:bg-surface-900': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
'border border-surface-300 dark:border-surface-700',
{ 'border-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
{ 'border-l-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'horizontal' },
{ 'border-b-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'vertical' },
// 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-md': 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
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
//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-surface-800 dark:text-surface-0',
'bg-transparent',
{ 'dark:bg-surface-900': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
'border border-surface-300 dark:border-surface-700',
{ 'border-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
{ 'border-r-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'horizontal' },
{ 'border-t-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'vertical' },
// 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
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
//Misc
'cursor-pointer overflow-hidden select-none'
]
}),
label: {
class: 'h-0 w-0'
}
}
};

57
packages/tailwindcss-presets/src/aura/inputotp/index.js
View File

@ -1,57 +0,0 @@
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',
'py-2 px-3',
// 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-950': !context.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
},
// Misc
'appearance-none',
'transition-colors duration-200'
]
})
}
};

79
packages/tailwindcss-presets/src/aura/inputswitch/index.js
View File

@ -1,79 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'inline-block relative',
'w-10 h-6',
'rounded-2xl',
{
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
slider: ({ props }) => ({
class: [
// Position
'absolute top-0 left-0 right-0 bottom-0',
{ 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
// Shape
'rounded-2xl',
// Before:
'before:absolute before:top-1/2 before:left-1',
'before:-mt-2',
'before:h-4 before:w-4',
'before:rounded-full',
'before:duration-200',
'before:bg-surface-0 before:dark:bg-surface-500',
// Colors
{
'bg-surface-300 dark:bg-surface-800': !(props.modelValue == props.trueValue) && !props.invalid,
'bg-primary': props.modelValue == props.trueValue && !props.invalid,
'before:dark:bg-surface-950': props.modelValue == props.trueValue
},
// Invalid State
{ 'bg-red-400 dark:bg-red-300': props.invalid },
{ 'peer-hover:bg-red-500 dark:peer-hover:bg-red-200': props.invalid },
// States
{ 'peer-hover:bg-surface-400 dark:peer-hover:bg-surface-700': !(props.modelValue == props.trueValue) && !props.disabled && !props.invalid },
{ 'peer-hover:bg-primary-hover': props.modelValue == props.trueValue && !props.disabled && !props.invalid },
'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
// Transition
'transition-colors duration-200',
// Misc
'cursor-pointer'
]
}),
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-2xl',
'outline-none',
// Misc
'appearance-none',
'cursor-pointer'
]
}
};

6
packages/tailwindcss-presets/src/aura/inputtext/index.js → packages/tailwindcss-presets/src/aura/inputtext/index.ts
View File

@ -1,5 +1,7 @@
import type { InputTextPassThroughAttributes, InputTextPassThroughMethodOptions, InputTextPassThroughOptions } from 'primevue/inputtext';
export default {
root: ({ props, context, parent }) => ({
root: ({ props, context, parent }: InputTextPassThroughMethodOptions): InputTextPassThroughAttributes => ({
class: [
// Font
'leading-none',
@ -48,4 +50,4 @@ export default {
'transition-colors duration-200'
]
})
};
} as InputTextPassThroughOptions;

44
packages/tailwindcss-presets/src/aura/knob/index.js
View File

@ -1,44 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Misc
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
]
}),
range: {
class: [
// Stroke
'stroke-current',
// Color
'stroke-surface-200 dark:stroke-surface-700',
// Fill
'fill-none',
// Transition
'transition duration-100 ease-in'
]
},
value: {
class: [
// Animation
'animate-dash-frame',
// Color
'stroke-primary',
// Fill
'fill-none'
]
},
label: {
class: [
// Text Style
'text-center text-xl',
// Color
'fill-surface-600 dark:fill-surface-200'
]
}
};

146
packages/tailwindcss-presets/src/aura/listbox/index.js
View File

@ -1,146 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'rounded-md',
// Colors
{ 'bg-surface-0 dark:bg-surface-900': !props.disabled },
'text-surface-700 dark:text-white/80',
'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
// Disabled State
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled },
// Invalid State
{ 'border-red-500 dark:border-red-400': props.invalid }
]
}),
wrapper: {
class: [
// Overflow
'overflow-auto'
]
},
list: {
class: 'p-1 list-none m-0 outline-none'
},
item: ({ context }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0 px-3 py-2',
'first:mt-0 mt-[2px]',
// Shape
'border-0 rounded',
// 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-highlight-inverse': context.selected,
'bg-primary-highlight': context.selected
},
//States
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
{ 'hover:bg-primary-highlight-hover': context.selected },
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
// Transition
'transition-shadow duration-200',
// Misc
'cursor-pointer overflow-hidden whitespace-nowrap'
]
}),
itemgroup: {
class: [
'font-semibold',
// Spacing
'm-0 py-2 px-3',
// Colors
'text-surface-400 dark:text-surface-500',
// Misc
'cursor-auto'
]
},
emptymessage: {
class: [
// Font
'leading-none',
// Spacing
'py-2 px-3',
// Color
'text-surface-800 dark:text-white/80',
'bg-transparent'
]
},
header: {
class: [
// Spacing
'pt-2 px-2 pb-0',
'm-0',
//Shape
'border-b-0',
'rounded-tl-md',
'rounded-tr-md',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900',
'border-surface-300 dark:border-surface-700'
]
},
filtercontainer: {
class: 'relative'
},
filterinput: {
class: [
// Font
'leading-[normal]',
// Sizing
'py-2 pl-3 pr-7',
'-mr-7',
'w-full',
//Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-950',
'border-surface-200 dark:border-surface-700',
// Shape
'border',
'rounded-lg',
'appearance-none',
// Transitions
'transition',
'duration-200',
// 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',
// Misc
'appearance-none'
]
},
filtericon: {
class: ['absolute', 'top-1/2 right-3', '-mt-2']
}
};

196
packages/tailwindcss-presets/src/aura/megamenu/index.js
View File

@ -1,196 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'relative',
// Flexbox
'flex',
// Shape & Size
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
'border border-surface-200 dark:border-surface-700',
{ 'p-2 items-center': props.orientation == 'horizontal', 'flex-col sm:w-48 p-1': props.orientation !== 'horizontal' }
]
}),
menu: ({ props }) => ({
class: [
// Flexbox
'sm:flex',
'items-center',
'flex-wrap',
'flex-col sm:flex-row',
{ hidden: !props?.mobileActive, flex: props?.mobileActive },
// Position
'absolute sm:relative',
'top-full left-0',
'sm:top-auto sm:left-auto',
// Size
'w-full sm:w-auto',
// Spacing
'm-0',
'p-1 sm:py-0 sm:p-0',
'list-none',
// Shape
'shadow-md sm:shadow-none',
'border-0',
// Color
'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
// Misc
'outline-none'
]
}),
menuitem: ({ props }) => ({
class: [
'sm:relative static my-[2px] [&:first-child]:mt-0',
{
'sm:w-auto w-full': props.horizontal,
'w-full': !props.horizontal
}
]
}),
content: ({ context }) => ({
class: [
'rounded-[4px]',
// Colors
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
},
// Hover States
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
},
// Transitions
'transition-all',
'duration-200'
]
}),
action: {
class: [
'relative',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Size
'leading-none',
// Misc
'select-none',
'cursor-pointer',
'no-underline ',
'overflow-hidden'
]
},
icon: {
class: 'mr-2'
},
submenuicon: ({ props }) => ({
class: [
{
'ml-auto sm:ml-2': props.horizontal,
'ml-auto': !props.horizontal
}
]
}),
panel: ({ props }) => ({
class: [
// Size
'w-auto',
// Spacing
'm-0',
// Shape
'shadow-none sm:shadow-md',
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
// Position
'static sm:absolute',
'z-10',
{
'sm:left-full top-0': !props.horizontal
}
]
}),
grid: {
class: 'flex flex-wrap sm:flex-nowrap'
},
column: {
class: 'w-full sm:w-1/2'
},
submenu: {
class: ['m-0 list-none', 'p-1 px-2 w-full sm:min-w-[14rem]']
},
submenuheader: {
class: [
'font-semibold',
// Spacing
'py-2 px-3',
'm-0',
// Color
'text-surface-400 dark:text-surface-500',
'bg-surface-0 dark:bg-surface-900'
]
},
separator: {
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
},
menubutton: {
class: [
// Flexbox
'flex sm:hidden',
'items-center justify-center',
// Size
'w-7',
'h-7',
// Shape
'rounded-full',
// Color
'text-surface-500 dark:text-white/80',
// States
'hover:text-surface-600 dark:hover:text-white/60',
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0',
'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transitions
'transition duration-200 ease-in-out',
// Misc
'cursor-pointer',
'no-underline'
]
},
end: {
class: 'ml-auto self-center'
}
};

114
packages/tailwindcss-presets/src/aura/menu/index.js
View File

@ -1,114 +0,0 @@
export default {
root: {
class: [
// Sizing and Shape
'min-w-[12.5rem]',
'rounded-md',
// Spacing
'p-1',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
'border border-surface-200 dark:border-surface-700'
]
},
menu: {
class: [
// Spacings and Shape
'list-none',
'm-0',
'p-0',
'outline-none'
]
},
menuitem: {
class: 'relative my-[2px] [&:first-child]:mt-0'
},
content: ({ context }) => ({
class: [
//Shape
'rounded-[4px]',
// Colors
'text-surface-700 dark:text-white/80',
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
},
// Transitions
'transition-shadow',
'duration-200',
// States
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
},
// Disabled
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
]
}),
action: {
class: [
'relative',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Color
'text-surface-700 dark:text-white/80',
// Misc
'no-underline',
'overflow-hidden',
'cursor-pointer',
'select-none'
]
},
icon: {
class: [
// Spacing
'mr-2',
// Color
'text-surface-600 dark:text-white/70'
]
},
label: {
class: ['leading-[normal]']
},
submenuheader: {
class: [
// Font
'font-bold',
// Spacing
'm-0',
'py-2 px-3',
// Shape
'rounded-tl-none',
'rounded-tr-none',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-400 dark:text-surface-600'
]
},
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'
}
};

177
packages/tailwindcss-presets/src/aura/menubar/index.js
View File

@ -1,177 +0,0 @@
export default {
root: {
class: [
'relative',
// Flexbox
'flex',
'items-center',
// Spacing
'p-2',
// Shape
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
'border border-surface-200 dark:border-surface-700'
]
},
menu: ({ props }) => ({
class: [
// Flexbox
'sm:flex',
'items-center',
'flex-wrap',
'flex-col sm:flex-row',
{ hidden: !props?.mobileActive, flex: props?.mobileActive },
// Position
'absolute sm:relative',
'top-full left-0',
'sm:top-auto sm:left-auto',
// Size
'w-full sm:w-auto',
// Spacing
'm-0',
'p-1 sm:py-0 sm:p-0',
'list-none',
// Shape
'shadow-md sm:shadow-none',
'border-0',
// Color
'bg-surface-0 dark:bg-surface-900 sm:bg-transparent',
// Misc
'outline-none'
]
}),
menuitem: {
class: 'sm:relative sm:w-auto w-full static my-[2px] [&:first-child]:mt-0'
},
content: ({ props, context }) => ({
class: [
// Shape
'rounded-[4px]',
// Colors
'text-surface-700 dark:text-white/80',
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
},
// States
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
},
// Transitions
'transition-all',
'duration-200'
]
}),
action: ({ context }) => ({
class: [
'relative',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Size
{
'pl-9 sm:pl-5': context.level === 1,
'pl-14 sm:pl-5': context.level === 2
},
'leading-none',
// Misc
'select-none',
'cursor-pointer',
'no-underline ',
'overflow-hidden'
]
}),
icon: {
class: 'mr-2'
},
submenuicon: ({ props }) => ({
class: [
{
'ml-auto sm:ml-2': props.root,
'ml-auto': !props.root
}
]
}),
submenu: ({ props }) => ({
class: [
// Size
'rounded-md',
'min-w-[12.5rem]',
// Spacing
'p-1',
'm-0',
'list-none',
// Shape
'shadow-none sm:shadow-md',
'border border-surface-200 dark:border-surface-700',
// Position
'static sm:absolute',
'z-10',
{ 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
// Color
'bg-surface-0 dark:bg-surface-900'
]
}),
separator: {
class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
},
button: {
class: [
// Flexbox
'flex sm:hidden',
'items-center justify-center',
// Size
'w-7',
'h-7',
// Shape
'rounded-full',
// Color
'text-surface-500 dark:text-white/80',
// States
'hover:text-surface-600 dark:hover:text-white/60',
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0',
'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transitions
'transition duration-200 ease-in-out',
// Misc
'cursor-pointer',
'no-underline'
]
},
end: {
class: 'ml-auto self-center'
}
};

102
packages/tailwindcss-presets/src/aura/message/index.js
View File

@ -1,102 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Spacing and Shape
'my-4 mx-0',
'rounded-md',
'border',
// Colors
{
'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
},
{
'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
'border-green-200 dark:border-green-500/20': props.severity == 'success',
'border-surface-200 dark:border-surface-500/20': props.severity == 'secondary',
'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
'border-red-200 dark:border-red-500/20': props.severity == 'error',
'border-surface-950 dark:border-surface-0': props.severity == 'contrast'
},
{
'text-blue-700 dark:text-blue-300': props.severity == 'info',
'text-green-700 dark:text-green-300': props.severity == 'success',
'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
'text-orange-700 dark:text-orange-300': props.severity == 'warn',
'text-red-700 dark:text-red-300': props.severity == 'error',
'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
}
]
}),
wrapper: {
class: [
// Flexbox
'flex items-center',
// Spacing
'py-2 px-3'
]
},
icon: {
class: [
// Sizing and Spacing
'w-4 h-4',
'leading-[normal] mr-2 shrink-0'
]
},
text: {
class: [
// Font and Text
'text-base leading-[normal]',
'font-medium'
]
},
button: ({ props }) => ({
class: [
// Flexbox
'flex items-center justify-center',
// Size
'w-7 h-7',
// Spacing and Misc
'ml-auto relative',
// Shape
'rounded-full',
// Colors
'bg-transparent',
// Transitions
'transition duration-200 ease-in-out',
// States
'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
{
'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
},
// Misc
'overflow-hidden'
]
}),
transition: {
enterFromClass: 'opacity-0',
enterActiveClass: 'transition-opacity duration-300',
leaveFromClass: 'max-h-40',
leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
leaveToClass: 'max-h-0 opacity-0 !m-0'
}
};

97
packages/tailwindcss-presets/src/aura/metergroup/index.js
View File

@ -1,97 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Flexbox
'flex gap-4',
{ 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
]
}),
metercontainer: ({ props }) => ({
class: [
// Flexbox
'flex',
{ 'flex-col': props.orientation === 'vertical' },
// Sizing
{ 'w-2 h-full': props.orientation === 'vertical' },
{ 'h-2': props.orientation === 'horizontal' },
// Colors
'bg-gray-200 dark:bg-gray-700',
// Border Radius
'rounded-lg'
]
}),
meter: ({ props }) => ({
class: [
// Shape
'border-0',
// Rounded Corners - Horizontal
{
'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
},
// Rounded Corners - Vertical
{
'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
},
// Colors
'bg-primary'
]
}),
labellist: ({ props }) => ({
class: [
// Display & Flexbox
'flex flex-wrap',
{ 'gap-4': props.labelOrientation === 'horizontal' },
{ 'gap-2': props.labelOrientation === 'vertical' },
{ 'flex-col': props.labelOrientation === 'vertical' },
// Conditional Alignment - Horizontal
{
'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
},
// Conditional Alignment - Vertical
{
'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
},
// List Styling
'm-0 p-0 list-none'
]
}),
labellistitem: {
class: [
// Flexbox
'inline-flex',
'items-center',
'gap-2'
]
},
labellisttype: {
class: [
// Display
'inline-flex',
// Background Color
'bg-primary',
// Size
'w-2 h-2',
// Rounded Shape
'rounded-full'
]
}
};

543
packages/tailwindcss-presets/src/aura/multiselect/index.js
View File

@ -1,543 +0,0 @@
export default {
root: ({ props, state, parent }) => ({
class: [
// Font
'leading-none',
// Display and Position
'inline-flex',
'relative',
// Shape
'rounded-md',
// Color and Background
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
'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 },
// Transitions
'transition-all',
'duration-200',
// States
{ 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
// Misc
'cursor-pointer',
'select-none',
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
]
}),
labelContainer: {
class: 'overflow-hidden flex flex-auto cursor-pointer '
},
label: ({ props }) => ({
class: [
'leading-none',
'block',
// Spacing
{
'py-2 px-3': props.display === 'comma' || (props.display === 'chip' && !props?.modelValue?.length),
'py-1 px-1': 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 px-3 m-0 mr-1',
// Shape
'rounded',
// Colors
'bg-surface-100 dark:bg-surface-700',
'text-surface-700 dark:text-white',
// Misc
'cursor-default'
]
},
removeTokenIcon: {
class: [
// Spacing
'ml-[0.375rem]',
// Size
'w-4 h-4',
// 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-r-md'
]
},
panel: {
class: [
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
// Shape
'border border-surface-300 dark:border-surface-700',
'rounded-md',
'shadow-md'
]
},
header: {
class: [
//Flex
'flex items-center justify-between',
// Spacing
'pt-2 px-4 pb-0',
'm-0',
//Shape
'border-b-0',
'rounded-tl-md',
'rounded-tr-md',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900',
'border-surface-300 dark:border-surface-700'
]
},
headerCheckboxContainer: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Size
'w-5',
'h-5',
// Spacing
'mr-2',
// Misc
'cursor-pointer',
'select-none'
]
},
headerCheckbox: {
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Size
'w-5',
'h-5',
// Spacing
'mr-2',
// Misc
'cursor-pointer',
'select-none'
]
},
box: ({ props, context }) => ({
class: [
// Alignment
'flex',
'items-center',
'justify-center',
// Size
'w-5',
'h-5',
// Shape
'rounded',
'border',
// Colors
{
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
'border-primary bg-primary': context.checked
},
// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': 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',
'outline-none',
'border border-surface-300 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: {
class: [
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
'text-white dark:text-surface-950',
// Transitions
'transition-all',
'duration-200'
]
}
},
itemCheckbox: {
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Size
'w-5',
'h-5',
// Spacing
'mr-2',
// Misc
'cursor-pointer',
'select-none'
]
},
box: ({ props, context }) => ({
class: [
// Alignment
'flex',
'items-center',
'justify-center',
// Size
'w-5',
'h-5',
// Shape
'rounded',
'border',
// Colors
{
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
'border-primary bg-primary': context.checked
},
// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': 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',
'outline-none',
'border border-surface-300 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: {
class: [
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
'text-white dark:text-surface-950',
// Transitions
'transition-all',
'duration-200'
]
}
},
closeButton: {
class: [
'relative',
// Flexbox and Alignment
'flex items-center justify-center',
// Size and Spacing
'ml-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-1 focus:ring-inset',
'focus:ring-primary-500 dark:focus:ring-primary-400',
// Misc
'overflow-hidden'
]
},
closeButtonIcon: {
class: 'w-4 h-4 inline-block'
},
wrapper: {
class: [
// Sizing
'max-h-[200px]',
// Misc
'overflow-auto'
]
},
list: {
class: 'p-1 list-none m-0'
},
item: ({ context }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0 px-3 py-2',
'first:mt-0 mt-[2px]',
// Shape
'border-0 rounded',
// 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-highlight-inverse': context.selected,
'bg-primary-highlight': context.selected
},
//States
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
{ 'hover:bg-primary-highlight-hover': context.selected },
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
// Transition
'transition-shadow duration-200',
// Misc
'cursor-pointer overflow-hidden whitespace-nowrap'
]
}),
itemgroup: {
class: [
'font-semibold',
// Spacing
'm-0 py-2 px-3',
// Colors
'text-surface-400 dark:text-surface-500',
// Misc
'cursor-auto'
]
},
filtercontainer: {
class: 'relative'
},
filterinput: {
class: [
// Font
'leading-[normal]',
// Sizing
'py-2 pl-3 pr-7',
'-mr-7',
'w-full',
//Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-950',
'border-surface-200 dark:border-surface-700',
// Shape
'border',
'rounded-lg',
'appearance-none',
// Transitions
'transition',
'duration-200',
// 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',
// Misc
'appearance-none'
]
},
filtericon: {
class: ['absolute', 'top-1/2 right-3', '-mt-2']
},
clearicon: {
class: [
// Color
'text-surface-400 dark:text-surface-500',
// Position
'absolute',
'top-1/2',
'right-12',
// Spacing
'-mt-2'
]
},
emptymessage: {
class: [
// Font
'leading-none',
// Spacing
'py-2 px-3',
// Color
'text-surface-800 dark:text-white/80',
'bg-transparent'
]
},
loadingicon: {
class: 'text-surface-400 dark:text-surface-500 animate-spin'
},
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'
}
};

277
packages/tailwindcss-presets/src/aura/orderlist/index.js
View File

@ -1,277 +0,0 @@
export default {
root: {
class: [
// Flexbox
'flex xl:flex-row flex-col'
]
},
controls: {
class: [
// Flexbox & Alignment
'flex xl:flex-col justify-center gap-2',
// Spacing
'p-[1.125rem]'
]
},
moveupbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
movedownbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
movetopbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
movebottombutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
container: {
class: [
'flex-auto',
// Shape
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
'border border-surface-200 dark:border-surface-700',
'outline-none'
]
},
header: {
class: [
'font-semibold',
// Shape
'border-0 rounded-t-md',
// Spacing
'pt-3 px-4 pb-2',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900'
]
},
list: {
class: [
// Spacing
'list-none m-0',
'p-1',
// Size
'min-h-[12rem] max-h-[24rem]',
// Shape
'rounded-b-md',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900',
// Focus & Outline
'outline-none',
// Misc
'overflow-auto'
]
},
item: ({ context }) => ({
class: [
// Position
'relative',
// Spacing
'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
// Shape
'border-none',
'rounded-md',
// Transition
'transition duration-200',
// Color
{ 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
{ 'text-primary-highlight-inverse bg-primary-highlight': context.active },
// State
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover': context.active
},
// Misc
'cursor-pointer overflow-hidden'
]
})
};

138
packages/tailwindcss-presets/src/aura/organizationchart/index.js
View File

@ -1,138 +0,0 @@
export default {
table: {
class: [
// Spacing & Position
'mx-auto my-0',
// Table Style
'border-spacing-0 border-separate'
]
},
cell: {
class: [
// Alignment
'text-center align-top',
// Spacing
'py-0 px-3'
]
},
node: ({ context }) => ({
class: [
'relative inline-block',
// Spacing
'py-3 px-4',
// Shape
'border',
'rounded-md',
'border-surface-200 dark:border-surface-700',
// Color
{
'text-surface-600 dark:text-white/80': !context?.selected,
'bg-surface-0 dark:bg-surface-900': !context?.selected,
'text-primary-highlight-inverse': context?.selected,
'bg-primary-highlight': context?.selected
},
// States
{
'hover:bg-surface-100 dark:hover:bg-surface-800': context?.selectable && !context?.selected,
'hover:bg-primary-highlight-hover': context?.selectable && context?.selected
},
{ 'cursor-pointer': context?.selectable }
]
}),
linecell: {
class: [
// Alignment
'text-center align-top',
// Spacing
'py-0 px-3'
]
},
linedown: {
class: [
// Spacing
'mx-auto my-0',
// Size
'w-px h-[20px]',
// Color
'bg-surface-200 dark:bg-surface-700'
]
},
lineleft: ({ context }) => ({
class: [
// Alignment
'text-center align-top',
// Spacing
'py-0 px-3',
// Shape
'rounded-none border-r',
{ 'border-t': context.lineTop },
// Color
'border-surface-200 dark:border-surface-700'
]
}),
lineright: ({ context }) => ({
class: [
// Alignment
'text-center align-top',
// Spacing
'py-0 px-3',
// Shape
'rounded-none',
// Color
{ 'border-t border-surface-200 dark:border-surface-700': context.lineTop }
]
}),
nodecell: {
class: 'text-center align-top py-0 px-3'
},
nodetoggler: {
class: [
// Position
'absolute bottom-[-0.75rem] left-2/4 -ml-3',
'z-20',
// Flexbox
'flex items-center justify-center',
// Size
'w-6 h-6',
// Shape
'rounded-full',
'border border-surface-200 dark:border-surface-700',
// Color
'bg-inherit text-inherit',
// Focus
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Misc
'cursor-pointer no-underline select-none'
]
},
nodetogglericon: {
class: [
// Position
'static inline-block',
// Size
'w-4 h-4'
]
}
};

29
packages/tailwindcss-presets/src/aura/overlaypanel/index.js
View File

@ -1,29 +0,0 @@
export default {
root: {
class: [
// Shape
'rounded-md shadow-lg',
// Position
'absolute left-0 top-0 mt-2',
'z-40 transform origin-center',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0/80',
// Before: Arrow
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
]
},
content: {
class: ['p-5 items-center flex', 'rounded-lg', 'border border-surface-200 dark:border-surface-700']
},
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'
}
};

526
packages/tailwindcss-presets/src/aura/paginator/index.js
View File

@ -1,526 +0,0 @@
export default {
root: {
class: [
// Flex & Alignment
'flex items-center justify-center flex-wrap',
// Spacing
'px-4 py-2',
// Shape
'border-0 rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-500 dark:text-white/60'
]
},
firstpagebutton: ({ context }) => ({
class: [
'relative',
// Flex & Alignment
'inline-flex items-center justify-center',
// Shape
'border-0 rounded-full',
// Size
'min-w-[2.5rem] h-10 m-[0.143rem]',
'leading-none',
// Color
'text-surface-500 dark:text-white/60',
// State
{
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !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',
// Size
'min-w-[2.5rem] h-10 m-[0.143rem]',
'leading-none',
// Color
'text-surface-500 dark:text-white/60',
// State
{
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !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',
// Size
'min-w-[2.5rem] h-10 m-[0.143rem]',
'leading-none',
// Color
'text-surface-500 dark:text-white/60',
// State
{
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !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',
// Size
'min-w-[2.5rem] h-10 m-[0.143rem]',
'leading-none',
// Color
'text-surface-500 dark:text-white/60',
// State
{
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !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',
// Size
'min-w-[2.5rem] h-10 m-[0.143rem]',
'leading-none',
// Color
'text-surface-500 dark:text-white/60',
// State
{
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !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-10',
'rounded-md',
// Spacing
'mx-2',
// Color and Background
'bg-surface-0 dark:bg-surface-950',
'border border-surface-300 dark:border-surface-700',
// Transitions
'transition-all',
'duration-200',
// 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': !state.focused },
// Misc
'cursor-pointer',
'select-none',
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none 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%]',
'py-2 pl-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-10',
// Shape
'rounded-tr-md',
'rounded-br-md'
]
},
panel: {
class: [
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
// Shape
'border border-surface-300 dark:border-surface-700',
'rounded-md',
'shadow-md'
]
},
wrapper: {
class: [
// Sizing
'max-h-[200px]',
// Misc
'overflow-auto'
]
},
list: {
class: 'p-1 list-none m-0'
},
item: ({ context }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0 px-3 py-2',
'first:mt-0 mt-[2px]',
// Shape
'border-0 rounded',
// 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-highlight-inverse': context.selected,
'bg-primary-highlight': context.selected
},
//States
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
{ 'hover:bg-primary-highlight-hover': context.selected },
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': 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-950',
'border border-surface-300 dark:border-surface-700',
// Sizing and Spacing
'w-[1%] max-w-[3rem]',
'py-2 px-3 m-0',
//Shape
'rounded-md',
// Transitions
'transition',
'duration-200',
// States
'hover:border-surface-400 dark:hover:border-surface-600',
'focus:outline-none focus:shadow-none',
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Misc
'cursor-pointer',
'overflow-hidden overflow-ellipsis',
'whitespace-nowrap',
'appearance-none'
]
}
}
},
jumptopagedropdown: {
root: ({ props, state }) => ({
class: [
// Display and Position
'inline-flex',
'relative',
// Shape
'h-10',
'rounded-md',
// Spacing
'mx-2',
// Color and Background
'bg-surface-0 dark:bg-surface-950',
'border border-surface-300 dark:border-surface-700',
// Transitions
'transition-all',
'duration-200',
// 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': !state.focused },
// Misc
'cursor-pointer',
'select-none',
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none 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%]',
'py-2 pl-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-10',
// Shape
'rounded-tr-md',
'rounded-br-md'
]
},
panel: {
class: [
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
// Shape
'border border-surface-300 dark:border-surface-700',
'rounded-md',
'shadow-md'
]
},
wrapper: {
class: [
// Sizing
'max-h-[200px]',
// Misc
'overflow-auto'
]
},
list: {
class: 'p-1 list-none m-0'
},
item: ({ context }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0 px-3 py-2',
'first:mt-0 mt-[2px]',
// Shape
'border-0 rounded',
// 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-highlight-inverse': context.selected,
'bg-primary-highlight': context.selected
},
//States
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
{ 'hover:bg-primary-highlight-hover': context.selected },
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
// Transitions
'transition-shadow',
'duration-200',
// Misc
'cursor-pointer',
'overflow-hidden',
'whitespace-nowrap'
]
})
},
start: {
class: 'mr-auto'
},
end: {
class: 'ml-auto'
}
};

97
packages/tailwindcss-presets/src/aura/panel/index.js
View File

@ -1,97 +0,0 @@
export default {
root: {
class: [
//Shape
'rounded-md',
//Colors
'border border-surface-200 dark:border-surface-700',
'bg-surface-0 dark:bg-surface-900'
]
},
header: ({ props }) => ({
class: [
// Flex
'flex items-center justify-between',
// Colors
'text-surface-700 dark:text-surface-0/80',
'bg-transparent',
//Shape
'rounded-tl-md rounded-tr-md',
'border-0',
// Conditional Spacing
{ 'p-[1.125rem]': !props.toggleable, 'py-3 px-[1.125rem]': props.toggleable }
]
}),
title: {
class: 'leading-none font-semibold'
},
toggler: {
class: [
// Alignments
'inline-flex items-center justify-center',
'relative',
// Sized
'w-7 h-7',
'm-0 p-0',
//Shape
'border-0 rounded-full',
//Color
'bg-transparent',
'text-surface-600 dark:text-surface-0/80',
// States
'hover:text-surface-800 dark:hover:text-surface-0',
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
// Transitions
'transition-all duration-200 ease-in-out',
// Misc
'overflow-hidden no-underline',
'cursor-pointer'
]
},
togglerIcon: {
class: 'inline-block w-4 h-4'
},
content: {
class: [
// Spacing
'p-[1.125rem] pt-0',
// Shape
'border-0 border-t-0 last:rounded-br-md last:rounded-bl-md',
//Color
'text-surface-700 dark:text-surface-0/80'
]
},
footer: {
class: [
// Spacing
'p-[1.125rem] pt-0',
// Shape
'border-0 border-t-0 rounded-br-lg rounded-bl-lg',
//Color
'text-surface-700 dark:text-surface-0/80'
]
},
transition: {
enterFromClass: 'max-h-0',
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
enterToClass: 'max-h-[1000px]',
leaveFromClass: 'max-h-[1000px]',
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
leaveToClass: 'max-h-0'
}
};

126
packages/tailwindcss-presets/src/aura/panelmenu/index.js
View File

@ -1,126 +0,0 @@
export default {
panel: {
class: 'p-1 overflow-hidden mb-3 border border-surface-200 dark:border-surface-700 rounded-md'
},
header: {
class: ['rounded-[4px]', 'outline-none']
},
headercontent: ({ context, instance }) => ({
class: [
// Shape
'rounded-[4px]',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-600 dark:text-surface-0/80',
{ 'text-surface-900': context.active },
// States
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
'hover:text-surface-900',
// Transition
'transition duration-200 ease-in-out',
'transition-shadow duration-200'
]
}),
headeraction: {
class: [
'relative',
// Font
'font-semibold',
'leading-none',
// Flex & Alignments
'flex items-center',
// Spacing
'py-2 px-3',
// Misc
'select-none cursor-pointer no-underline'
]
},
headerlabel: {
class: 'leading-none'
},
headerIcon: {
class: 'mr-2'
},
submenuicon: {
class: 'mr-2'
},
menucontent: {
class: [
// Spacing
'pl-4',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900'
]
},
menu: {
class: ['outline-none', 'm-0 p-0 list-none']
},
menuitem: {
class: 'relative my-[2px]'
},
content: {
class: [
// Shape
'border-none rounded-[4px]',
// Color
'text-surface-700 dark:text-white/80',
// Transition
'transition-shadow duration-200'
]
},
action: ({ context }) => ({
class: [
'relative',
// Font
'leading-none',
// Flex & Alignments
'flex items-center',
// Spacing
'py-2 px-3',
// Shape
'rounded-[4px]',
// Color
'text-surface-700 dark:text-white/80',
// States
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)] hover:text-surface-700 dark:hover:text-white/80',
{
'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-0/10': context.focused
},
// Misc
'cursor-pointer no-underline',
'select-none overflow-hidden'
]
}),
icon: {
class: 'mr-2'
},
submenu: {
class: 'p-0 pl-4 m-0 list-none'
},
transition: {
enterFromClass: 'max-h-0',
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
enterToClass: 'max-h-[1000px]',
leaveFromClass: 'max-h-[1000px]',
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
leaveToClass: 'max-h-0'
}
};

117
packages/tailwindcss-presets/src/aura/password/index.js
View File

@ -1,117 +0,0 @@
export default {
root: ({ props }) => ({
class: ['inline-flex relative', { '[&>input]:pr-10': props.toggleMask }]
}),
panel: {
class: [
// Spacing
'p-3',
// Shape
'border',
'shadow-md rounded-md',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
'border-surface-200 dark:border-surface-700'
]
},
meter: {
class: [
// Position and Overflow
'overflow-hidden',
'relative',
// Shape and Size
'border-0',
'h-[10px]',
'rounded-md',
// Spacing
'mb-3',
// 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',
{
'py-3 px-3.5': props.size == 'large',
'py-1.5 px-2': props.size == 'small',
'py-2 px-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-950': !context.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
},
// Filled State *for FloatLabel
{ filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.props.modelValue !== null && parent.props.modelValue?.length !== 0 },
// 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'
}
};

714
packages/tailwindcss-presets/src/aura/picklist/index.js
View File

@ -1,714 +0,0 @@
export default {
root: {
class: [
// Flexbox
'flex xl:flex-row flex-col'
]
},
sourcecontrols: {
class: [
// Flexbox & Alignment
'flex xl:flex-col justify-center gap-2',
// Spacing
'p-[1.125rem]'
]
},
sourcemoveupbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
sourcemovetopbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
sourcemovedownbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
sourcemovebottombutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
sourcewrapper: {
class: [
// Flexbox
'grow shrink basis-2/4',
// Shape
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
'border border-surface-200 dark:border-surface-700',
'outline-none'
]
},
sourceheader: {
class: [
'font-semibold',
// Shape
'border-0 rounded-t-md',
// Spacing
'pt-3 px-4 pb-2',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900'
]
},
sourcelist: {
class: [
// Spacing
'list-none m-0',
'p-1',
// Size
'min-h-[12rem] max-h-[24rem]',
// Shape
'rounded-b-md',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900',
// Focus & Outline
'outline-none',
// Misc
'overflow-auto'
]
},
item: ({ context }) => ({
class: [
// Position
'relative',
// Spacing
'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
// Shape
'border-none',
'rounded-md',
// Transition
'transition duration-200',
// Color
{ 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
{ 'text-primary-highlight-inverse bg-primary-highlight': context.active },
// State
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover': context.active
},
// Misc
'cursor-pointer overflow-hidden'
]
}),
buttons: {
class: [
// Flexbox & Alignment
'flex xl:flex-col justify-center gap-2',
// Spacing
'p-[1.125rem]'
]
},
movetotargetbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
movealltotargetbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
movetosourcebutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
movealltosourcebutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
targetcontrols: {
class: [
// Flexbox & Alignment
'flex xl:flex-col justify-center gap-2',
// Spacing
'p-[1.125rem]'
]
},
targetmoveupbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
targetmovetopbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
targetmovedownbutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
targetmovebottombutton: {
root: ({ context }) => ({
class: [
// Flexbox & Alignment
'relative inline-flex items-center justify-center',
// Shape
'rounded-md',
// Color
'text-surface-700 dark:text-surface-0',
'bg-surface-100 dark:bg-surface-800',
'border border-surface-100 dark:border-surface-800',
// Spacing & Size
'w-10',
'm-0',
'px-0 py-2',
// Transitions
'transition duration-200 ease-in-out',
// State
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
// Interactivity
'cursor-pointer user-select-none'
]
}),
label: {
class: [
//Font
'leading-[normal]',
// Flexbox
'flex-initial',
// Size
'w-0'
]
}
},
targetwrapper: {
class: [
// Flexbox
'grow shrink basis-2/4',
// Shape
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
'border border-surface-200 dark:border-surface-700',
'outline-none'
]
},
targetheader: {
class: [
'font-semibold',
// Shape
'border-0 rounded-t-md',
// Spacing
'pt-3 px-4 pb-2',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900'
]
},
targetlist: {
class: [
// Spacing
'list-none m-0',
'p-1',
// Size
'min-h-[12rem] max-h-[24rem]',
// Shape
'rounded-b-md',
// Color
'text-surface-700 dark:text-white/80',
'bg-surface-0 dark:bg-surface-900',
// Focus & Outline
'outline-none',
// Misc
'overflow-auto'
]
},
transition: {
enterFromClass: '!transition-none',
enterActiveClass: '!transition-none',
leaveActiveClass: '!transition-none',
leaveToClass: '!transition-none'
}
};

58
packages/tailwindcss-presets/src/aura/progressbar/index.js
View File

@ -1,58 +0,0 @@
export default {
root: {
class: [
// Position and Overflow
'overflow-hidden',
'relative',
// Shape and Size
'border-0',
'h-5',
'rounded-md',
// Colors
'bg-surface-100 dark:bg-surface-800'
]
},
value: ({ props }) => ({
class: [
// Flexbox & Overflow & Position
{ 'absolute flex items-center justify-center overflow-hidden': props.mode !== 'indeterminate' },
// Colors
'bg-primary',
// Spacing & Sizing
'm-0',
{ 'h-full w-0': props.mode !== 'indeterminate' },
// Shape
'border-0',
// Transitions
{
'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
'progressbar-value-animate': props.mode == 'indeterminate'
},
// Before & After (indeterminate)
{
'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode == 'indeterminate',
'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
}
]
}),
label: {
class: [
//Font
'text-xs font-semibold',
// Flexbox
'inline-flex',
// Font and Text
'text-white dark:text-surface-900',
'leading-5'
]
}
};

51
packages/tailwindcss-presets/src/aura/progressspinner/index.js
View File

@ -1,51 +0,0 @@
export default {
root: {
class: [
// Position
'relative',
'mx-auto',
// Sizing
'w-28',
'h-28',
// Flexbox
'inline-block',
// Pseudo-Elements
'before:block',
'before:pt-full'
]
},
spinner: {
class: [
// Position
'absolute',
'top-0',
'bottom-0',
'left-0',
'right-0',
'm-auto',
// Sizing
'w-full',
'h-full',
// Transformations
'transform',
'origin-center',
// Animations
'animate-spin'
]
},
circle: {
class: [
// Colors
'text-red-500',
// Misc
'progress-spinner-circle'
]
}
};

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

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

92
packages/tailwindcss-presets/src/aura/rating/index.js
View File

@ -1,92 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'relative',
// Flex & Alignment
'flex items-center',
'gap-1',
// Misc
{
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
cancelitem: ({ context }) => ({
class: [
// Flex & Alignment
'inline-flex items-center',
//State
{
'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500': context.focused
},
// Misc
'cursor-pointer'
]
}),
cancelicon: {
class: [
// Size
'w-4 h-4',
// Color
'text-red-500 dark:text-red-400',
// State
'hover:text-red-600 dark:hover:text-red-300',
// Transition
'transition duration-200 ease-in'
]
},
item: ({ props, context }) => ({
class: [
// Flex & Alignment
'inline-flex items-center',
// State
{
'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500': context.focused
},
// Misc
{
'cursor-pointer': !props.readonly,
'cursor-default': props.readonly
}
]
}),
officon: ({ props }) => ({
class: [
// Size
'w-4 h-4',
// Color
'text-surface-700 dark:text-surface-0/80',
// State
{ 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
// Transition
'transition duration-200 ease-in'
]
}),
onicon: ({ props }) => ({
class: [
// Size
'w-4 h-4',
// Color
'text-primary',
// State
{ 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly },
// Transition
'transition duration-200 ease-in'
]
})
};

6
packages/tailwindcss-presets/src/aura/ripple/index.js
View File

@ -1,6 +0,0 @@
export default {
root: {
class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
style: 'transform: scale(0)'
}
};

77
packages/tailwindcss-presets/src/aura/scrollpanel/index.js
View File

@ -1,77 +0,0 @@
export default {
wrapper: {
class: [
// Size & Position
'h-full w-full',
// Layering
'z-[1]',
// Spacing
'overflow-hidden',
// Misc
'relative float-left'
]
},
content: {
class: [
// Size & Spacing
'h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0',
// Overflow & Scrollbar
'overflow-scroll scrollbar-none',
// Box Model
'box-border',
// Position
'relative',
// Webkit Specific
'[&::-webkit-scrollbar]:hidden'
]
},
barX: {
class: [
// Size & Position
'h-[9px] bottom-0',
// Appearance
'bg-surface-50 dark:bg-surface-700 rounded',
// Interactivity
'cursor-pointer',
// Visibility & Layering
'invisible z-20',
// Transition
'transition duration-[250ms] ease-linear',
// Misc
'relative'
]
},
barY: {
class: [
// Size & Position
'w-[9px] top-0',
// Appearance
'bg-surface-50 dark:bg-surface-700 rounded',
// Interactivity
'cursor-pointer',
// Visibility & Layering
'z-20',
// Transition
'transition duration-[250ms] ease-linear',
// Misc
'relative'
]
}
};

43
packages/tailwindcss-presets/src/aura/scrolltop/index.js
View File

@ -1,43 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Flex & Alignment
'flex items-center justify-center',
// Positioning
{
sticky: props.target === 'parent',
fixed: props.target === 'window'
},
'bottom-[20px] right-[20px]',
'ml-auto',
// Shape & Size
{
'rounded-md h-8 w-8': props.target === 'parent',
'h-12 w-12 rounded-full shadow-md': props.target === 'window'
},
// Color
{
'text-white dark:text-surface-900': props.target === 'parent',
'text-surface-0': props.target === 'window',
'bg-primary': props.target === 'parent',
'bg-surface-600 dark:bg-surface-700 hover:bg-surface-700 dark:hover:bg-surface-600': props.target === 'window'
},
// States
{
'hover:bg-primary-hover': props.target === 'parent',
'hover:bg-surface-600 dark:hover:bg-surface-300': props.target === 'window'
}
]
}),
transition: {
enterFromClass: 'opacity-0',
enterActiveClass: 'transition-opacity duration-150',
leaveActiveClass: 'transition-opacity duration-150',
leaveToClass: 'opacity-0'
}
};

52
packages/tailwindcss-presets/src/aura/selectbutton/index.js
View File

@ -1,52 +0,0 @@
export default {
root: ({ props }) => ({
class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
}),
button: ({ context, props }) => ({
class: [
'relative',
// Font
'leading-none',
// Flex Alignment
'inline-flex items-center align-bottom text-center',
// Spacing
'px-4 py-2',
// Shape
'first:rounded-l-md first:rounded-tr-none first:rounded-br-none',
'last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
// Before
'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
'[&>*]:z-10',
// Color
'bg-surface-100 dark:bg-surface-950',
{
'text-surface-600 dark:text-white/60 before:bg-transparent': !context.active,
'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800': context.active
},
// Invalid State
{ 'border first:border-r-0 last:border-l-0 border-red-500 dark:border-red-400': props.invalid },
// States
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:z-10',
{
'hover:text-surface-800 dark:hover:text-white/80': !context.active && !props.invalid
},
{ 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
// Transition
'transition duration-200',
// Misc
'cursor-pointer select-none overflow-hidden'
]
}),
label: {
class: 'font-medium leading-[normal] text-center w-full z-10 relative'
}
};

149
packages/tailwindcss-presets/src/aura/sidebar/index.js
View File

@ -1,149 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Flexbox
'flex flex-col',
// Position
'relative',
{ '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
// Size
{
'h-full w-80': props.position == 'left' || props.position == 'right',
'h-auto w-full': props.position == 'top' || props.position == 'bottom'
},
// Shape
'border-0 dark:border',
'shadow-lg',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
'dark:border-surface-700',
// Transitions
'transition-transform',
'duration-300',
// Misc
'pointer-events-auto'
]
}),
header: {
class: [
// Flexbox and Alignment
'flex items-center justify-between',
'shrink-0',
// Spacing
'p-[1.125rem]',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0/80'
]
},
title: {
class: ['font-semibold text-xl']
},
icons: {
class: ['flex items-center']
},
closeButton: {
class: [
'relative',
// Flexbox and Alignment
'flex items-center justify-center',
// Size and Spacing
'mr-2',
'last:mr-0',
'w-7 h-7',
// 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-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
'focus:ring-primary-500 dark:focus:ring-primary-400',
// Misc
'overflow-hidden'
]
},
closeButtonIcon: {
class: [
// Display
'inline-block',
// Size
'w-4',
'h-4'
]
},
content: {
class: [
// Spacing and Size
'p-[1.125rem]',
'pt-0',
'h-full',
'w-full',
// Growth and Overflow
'grow',
'overflow-y-auto'
]
},
mask: ({ props }) => ({
class: [
// Transitions
'transition-all',
'duration-300',
{ 'p-5': !props.position == 'full' },
// Background and Effects
{ 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
]
}),
transition: ({ props }) => {
return props.position === 'top'
? {
enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
}
: props.position === 'bottom'
? {
enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
}
: props.position === 'left'
? {
enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
}
: props.position === 'right'
? {
enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
}
: {
enterFromClass: 'opacity-0 mask-active',
enterActiveClass: 'transition-opacity duration-400 ease-in',
leaveActiveClass: 'transition-opacity duration-400 ease-in',
leaveToClass: 'opacity-0 mask-active'
};
}
};

16
packages/tailwindcss-presets/src/aura/skeleton/index.js
View File

@ -1,16 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'overflow-hidden',
{
'animate-pulse': props.animation !== 'none'
},
// Round
{ 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
// Colors
'bg-surface-200 dark:bg-surface-700'
]
})
};

138
packages/tailwindcss-presets/src/aura/slider/index.js
View File

@ -1,138 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'relative',
// Size
{ 'h-[3px]': props.orientation == 'horizontal', 'w-[3px]': props.orientation == 'vertical' },
// Shape
'border-0',
'rounded-md',
// Colors
'bg-surface-200 dark:bg-surface-800',
// States
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
]
}),
range: ({ props }) => ({
class: [
// Position
'block absolute',
{
'top-0 left-0': props.orientation == 'horizontal',
'bottom-0 left-0': props.orientation == 'vertical'
},
//Size
{
'h-full': props.orientation == 'horizontal',
'w-full': props.orientation == 'vertical'
},
// Shape
'rounded-md',
// Colors
'bg-primary'
]
}),
handle: ({ props }) => ({
class: [
'flex items-center justify-center',
// Size
'h-[20px]',
'w-[20px]',
{
'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
},
// Shape
'rounded-full',
'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
// Colors
'bg-surface-200 dark:bg-surface-800',
// States
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
'ring-primary-500 dark:ring-primary-400',
// Transitions
'transition duration-200',
// Misc
'cursor-grab',
'touch-action-none'
]
}),
starthandler: ({ props }) => ({
class: [
'flex items-center justify-center',
// Size
'h-[20px]',
'w-[20px]',
{
'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
},
// Shape
'rounded-full',
'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
// Colors
'bg-surface-200 dark:bg-surface-800',
// States
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
'ring-primary-500 dark:ring-primary-400',
// Transitions
'transition duration-200',
// Misc
'cursor-grab',
'touch-action-none'
]
}),
endhandler: ({ props }) => ({
class: [
'flex items-center justify-center',
// Size
'h-[20px]',
'w-[20px]',
{
'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
},
// Shape
'rounded-full',
'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
// Colors
'bg-surface-200 dark:bg-surface-800',
// States
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
'ring-primary-500 dark:ring-primary-400',
// Transitions
'transition duration-200',
// Misc
'cursor-grab',
'touch-action-none'
]
})
};

302
packages/tailwindcss-presets/src/aura/speeddial/index.js
View File

@ -1,302 +0,0 @@
export default {
root: {
class: 'absolute flex'
},
button: {
root: ({ props, context, parent }) => ({
class: [
'relative',
'z-20',
// Alignments
'items-center inline-flex text-center align-bottom justify-center',
// Sizes & Spacing
'leading-[normal]',
'w-10 h-10 p-0 py-2',
// Shapes
'rounded-full',
'shadow-md',
// Link Button
{ 'text-primary-600 bg-transparent border-transparent': props.link },
// Plain Button
{ 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
// Plain Text Button
{ 'text-surface-500': props.plain && props.text },
// Plain Outlined Button
{ 'text-surface-500 border border-gray-500': props.plain && props.outlined },
// Text Button
{ 'bg-transparent border-transparent': props.text && !props.plain },
// Outlined Button
{ 'bg-transparent border': props.outlined && !props.plain },
// --- Severity Buttons ---
// Primary Button
{
'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
},
// Primary Text Button
{ 'text-primary': props.text && props.severity === null && !props.plain },
// Primary Outlined Button
{ 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
// Secondary Button
{
'text-surface-900 dark:text-white': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'bg-surface-100 dark:bg-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'border border-surface-100 dark:border-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
},
// Secondary Text Button
{ 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
// Secondary Outlined Button
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': props.outlined && props.severity === 'secondary' && !props.plain },
// Success Button
{
'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
},
// Success Text Button
{ 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
// Success Outlined Button
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': props.outlined && props.severity === 'success' && !props.plain },
// Info Button
{
'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
},
// Info Text Button
{ 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
// Info Outlined Button
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': props.outlined && props.severity === 'info' && !props.plain },
// Warning Button
{
'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
},
// Warning Text Button
{ 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
// Warning Outlined Button
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': props.outlined && props.severity === 'warning' && !props.plain },
// Help Button
{
'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
},
// Help Text Button
{ 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
// Help Outlined Button
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': props.outlined && props.severity === 'help' && !props.plain },
// Danger Button
{
'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
},
// Danger Text Button
{ 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
// Danger Outlined Button
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': props.outlined && props.severity === 'danger' && !props.plain },
// Contrast Button
{
'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
},
// Contrast Text Button
{ 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
// Contrast Outlined Button
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
// --- Severity Button States ---
'focus:outline-none focus:outline-offset-0 focus:ring-1',
// Link
{ 'focus:ring-primary': props.link },
// Plain
{ 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': props.plain && (props.text || props.outlined) },
// Primary
{ 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-primary': props.severity === null },
// Text & Outlined Button
{ 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain },
// Secondary
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
// Success
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
// Text & Outlined Button
{ 'hover:bg-green-300/10': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
// Info
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
// Text & Outlined Button
{ 'hover:bg-blue-300/10': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
// Warning
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
// Text & Outlined Button
{ 'hover:bg-orange-300/10': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
// Help
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
// Text & Outlined Button
{ 'hover:bg-purple-300/10': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
// Danger
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
// Text & Outlined Button
{ 'hover:bg-red-300/10': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
// Contrast
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
// Text & Outlined Button
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
// Disabled
{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
// Transitions
'transition duration-200 ease-in-out',
parent.state.d_visible ? 'rotate-45' : 'rotate-0',
// Misc
'cursor-pointer overflow-hidden select-none'
]
}),
label: ({ props }) => ({
class: [
'duration-200',
'font-medium',
{
'hover:underline': props.link
},
{ 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
]
}),
icon: ({ props }) => ({
class: [
'mx-0',
{
'mr-2': props.iconPos == 'left' && props.label != null,
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
'mb-2': props.iconPos == 'top' && props.label != null,
'mt-2': props.iconPos == 'bottom' && props.label != null
}
]
}),
loadingicon: ({ props }) => ({
class: [
'h-4 w-4',
'mx-0',
{
'mr-2': props.iconPos == 'left' && props.label != null,
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
'mb-2': props.iconPos == 'top' && props.label != null,
'mt-2': props.iconPos == 'bottom' && props.label != null
},
'animate-spin'
]
}),
badge: ({ props }) => ({
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
})
},
menu: {
class: [
// Spacing
'm-0 p-0',
// Layout & Flexbox
'list-none flex items-center justify-center',
// Transitions
'transition delay-200',
// Z-Index (Positioning)
'z-20'
]
},
menuitem: ({ props, context }) => ({
class: [
'transform transition-transform duration-200 ease-out transition-opacity duration-800',
// Conditional Appearance
context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100',
// Conditional Spacing
{
'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
},
// Conditional Positioning
{ absolute: props.type !== 'linear' }
]
}),
action: {
class: [
// Flexbox & Alignment
'flex items-center justify-center',
// Size
'w-10 h-10',
// Shape
'rounded-full relative overflow-hidden',
// Appearance
'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0/80',
// Hover Effects
'hover:bg-surface-200 dark:hover:bg-surface-800 dark:hover:text-surface-0',
// Transitions
'transition duration-200'
]
},
mask: ({ state }) => ({
class: [
// Base Styles
'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
// Conditional Appearance
{
'opacity-0 pointer-events-none': !state.d_visible,
'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
}
]
})
};

553
packages/tailwindcss-presets/src/aura/splitbutton/index.js
View File

@ -1,553 +0,0 @@
export default {
root: ({ props }) => ({
class: [
// Flexbox and Position
'inline-flex',
'relative',
// Shape
'rounded-md',
{ 'shadow-lg': props.raised }
]
}),
button: {
root: ({ parent }) => ({
class: [
'relative',
// Alignments
'items-center inline-flex text-center align-bottom justify-center',
// Sizes & Spacing
'leading-[normal]',
{
'px-4 py-2': parent.props.size === null,
'text-sm py-1.5 px-3': parent.props.size === 'small',
'text-xl py-3 px-4': parent.props.size === 'large'
},
{
'px-0 py-2': parent.props.label == null && parent.props.icon !== null
},
// Shape
'rounded-r-none',
'border-r-0',
{ 'rounded-l-full': parent.props.rounded },
{ 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
// Link Button
{ 'text-primary-600 bg-transparent border-transparent': parent.props.link },
// Plain Button
{ 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
// Plain Text Button
{ 'text-surface-500': parent.props.plain && parent.props.text },
// Plain Outlined Button
{ 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
// Text Button
{ 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
// Outlined Button
{ 'bg-transparent border': parent.props.outlined && !parent.props.plain },
// --- Severity Buttons ---
// Primary Button
{
'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Primary Text Button
{ 'text-primary': parent.props.text && parent.props.severity === null && !parent.props.plain },
// Primary Outlined Button
{ 'text-primary border border-primary': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
// Secondary Button
{
'text-surface-900 dark:text-white': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-surface-100 dark:bg-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-surface-100 dark:border-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Secondary Text Button
{ 'text-surface-500 dark:text-surface-300': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
// Secondary Outlined Button
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
// Success Button
{
'text-white dark:text-green-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Success Text Button
{ 'text-green-500 dark:text-green-400': parent.props.text && parent.props.severity === 'success' && !parent.props.plain },
// Success Outlined Button
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
// Info Button
{
'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Info Text Button
{ 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
// Info Outlined Button
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
// Warning Button
{
'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Warning Text Button
{ 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
// Warning Outlined Button
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
// Help Button
{
'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Help Text Button
{ 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
// Help Outlined Button
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
// Danger Button
{
'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Danger Text Button
{ 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
// Danger Outlined Button
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
// Contrast Button
{
'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Contrast Text Button
{ 'text-surface-900 dark:text-surface-0': parent.props.text && parent.props.severity === 'contrast' && !parent.props.plain },
// Contrast Outlined Button
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': parent.props.outlined && parent.props.severity === 'contrast' && !parent.props.plain },
// --- Severity Button States ---
'focus:outline-none focus:outline-offset-0 focus:ring-1',
// Link
{ 'focus:ring-primary': parent.props.link },
// Plain
{ 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': parent.props.plain && (parent.props.text || parent.props.outlined) },
// Primary
{ 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-primary': parent.props.severity === null },
// Text & Outlined Button
{ 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
// Secondary
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
// Success
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
// Text & Outlined Button
{ 'hover:bg-green-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
// Info
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
// Text & Outlined Button
{ 'hover:bg-blue-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
// Warning
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
// Text & Outlined Button
{ 'hover:bg-orange-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
// Help
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
// Text & Outlined Button
{ 'hover:bg-purple-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
// Danger
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
// Text & Outlined Button
{ 'hover:bg-red-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
// Contrast
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
// Text & Outlined Button
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
// Transitions
'transition duration-200 ease-in-out',
// Misc
'cursor-pointer overflow-hidden select-none'
]
}),
icon: {
class: [
// Margins
'mr-2'
]
}
},
menubutton: {
root: ({ parent }) => ({
class: [
'relative',
// Alignments
'items-center inline-flex text-center align-bottom justify-center',
// Sizes & Spacing
'leading-[normal]',
{
'px-4 py-2': parent.props.size === null,
'text-sm py-1.5 px-3': parent.props.size === 'small',
'text-xl py-3 px-4': parent.props.size === 'large'
},
{
'min-w-10 px-0 py-2': parent.props.label == null && parent.props.icon !== null
},
// Shape
'rounded-l-none',
{ 'rounded-l-full': parent.props.rounded },
{ 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
// Link Button
{ 'text-primary-600 bg-transparent border-transparent': parent.props.link },
// Plain Button
{ 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
// Plain Text Button
{ 'text-surface-500': parent.props.plain && parent.props.text },
// Plain Outlined Button
{ 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
// Text Button
{ 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
// Outlined Button
{ 'bg-transparent border': parent.props.outlined && !parent.props.plain },
// --- Severity Buttons ---
// Primary Button
{
'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Primary Text Button
{ 'text-primary': parent.props.text && parent.props.severity === null && !parent.props.plain },
// Primary Outlined Button
{ 'text-primary border border-primary': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
// Secondary Button
{
'text-surface-900 dark:text-white': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-surface-100 dark:bg-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-surface-100 dark:border-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Secondary Text Button
{ 'text-surface-500 dark:text-surface-300': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
// Secondary Outlined Button
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
// Success Button
{
'text-white dark:text-green-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Success Text Button
{ 'text-green-500 dark:text-green-400': parent.props.text && parent.props.severity === 'success' && !parent.props.plain },
// Success Outlined Button
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
// Info Button
{
'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Info Text Button
{ 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
// Info Outlined Button
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
// Warning Button
{
'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Warning Text Button
{ 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
// Warning Outlined Button
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
// Help Button
{
'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Help Text Button
{ 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
// Help Outlined Button
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
// Danger Button
{
'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Danger Text Button
{ 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
// Danger Outlined Button
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
// Contrast Button
{
'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
},
// Contrast Text Button
{ 'text-surface-900 dark:text-surface-0': parent.props.text && parent.props.severity === 'contrast' && !parent.props.plain },
// Contrast Outlined Button
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': parent.props.outlined && parent.props.severity === 'contrast' && !parent.props.plain },
// --- Severity Button States ---
'focus:outline-none focus:outline-offset-0 focus:ring-1',
// Link
{ 'focus:ring-primary': parent.props.link },
// Plain
{ 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': parent.props.plain && (parent.props.text || parent.props.outlined) },
// Primary
{ 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-primary': parent.props.severity === null },
// Text & Outlined Button
{ 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
// Secondary
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
// Text & Outlined Button
{ 'hover:bg-surface-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
// Success
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
// Text & Outlined Button
{ 'hover:bg-green-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
// Info
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
// Text & Outlined Button
{ 'hover:bg-blue-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
// Warning
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
// Text & Outlined Button
{ 'hover:bg-orange-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
// Help
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
// Text & Outlined Button
{ 'hover:bg-purple-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
// Danger
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
// Text & Outlined Button
{ 'hover:bg-red-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
// Contrast
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
// Text & Outlined Button
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
// Transitions
'transition duration-200 ease-in-out',
// Misc
'cursor-pointer overflow-hidden select-none'
]
}),
label: {
class: ['hidden']
}
},
menu: {
root: {
class: [
// Sizing and Shape
'min-w-[12.5rem]',
'rounded-md',
// Spacing
'p-1',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
'border border-surface-200 dark:border-surface-700'
]
},
menu: {
class: [
// Spacings and Shape
'list-none',
'm-0',
'p-0',
'outline-none'
]
},
menuitem: {
class: 'relative my-[2px] [&:first-child]:mt-0'
},
content: ({ context }) => ({
class: [
//Shape
'rounded-[4px]',
// Colors
'text-surface-700 dark:text-white/80',
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
},
// Transitions
'transition-shadow',
'duration-200',
// States
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
},
// Disabled
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
]
}),
action: {
class: [
'relative',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Color
'text-surface-700 dark:text-white/80',
// Misc
'no-underline',
'overflow-hidden',
'cursor-pointer',
'select-none'
]
},
icon: {
class: [
// Spacing
'mr-2',
// Color
'text-surface-600 dark:text-white/70'
]
},
label: {
class: ['leading-[normal]']
},
submenuheader: {
class: [
// Font
'font-bold',
// Spacing
'm-0',
'py-2 px-3',
// Shape
'rounded-tl-none',
'rounded-tr-none',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-400 dark:text-surface-600'
]
},
submenuicon: {
class: [
// Position
'ml-auto'
]
},
submenu: {
class: [
// Sizing and Shape
'min-w-[12.5rem]',
'rounded-md',
// Spacing
'p-1',
// Position
'static sm:absolute',
'z-10',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
'border border-surface-200 dark:border-surface-700'
],
separator: {
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
}
}
}
};

68
packages/tailwindcss-presets/src/aura/splitter/index.js
View File

@ -1,68 +0,0 @@
export default {
root: ({ context }) => ({
class: [
// Colors
'bg-surface-0',
'dark:bg-surface-900',
'text-surface-700',
'dark:text-surface-0/80',
// Shape
'rounded-md',
// Borders (Conditional)
{ 'border border-solid border-surface-200 dark:border-surface-700': !context.nested },
// Nested
{ 'flex grow border-0': context.nested }
]
}),
gutter: ({ props }) => ({
class: [
// Flexbox
'flex',
'items-center',
'justify-center',
'shrink-0',
// Colors
'bg-surface-100',
'dark:bg-surface-700',
// Transitions
'transition-all',
'duration-200',
// Misc
{
'cursor-col-resize': props.layout == 'horizontal',
'cursor-row-resize': props.layout !== 'horizontal'
}
]
}),
gutterhandler: ({ props }) => ({
class: [
'z-20',
// Colors
'bg-surface-100',
'dark:bg-surface-700',
// Shape
'rounded-md',
//States
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
// Transitions
'transition-all',
'duration-200',
// Sizing (Conditional)
{
'h-[1.70rem]': props.layout == 'horizontal',
'w-[1.70rem] h-2': props.layout !== 'horizontal'
}
]
})
};

5
packages/tailwindcss-presets/src/aura/splitterpanel/index.js
View File

@ -1,5 +0,0 @@
export default {
root: ({ context }) => ({
class: ['grow', { flex: context.nested }]
})
};

161
packages/tailwindcss-presets/src/aura/stepper/index.js
View File

@ -1,161 +0,0 @@
export default {
root: ({ props }) => ({
class: ['flex-1', props.orientation === 'vertical' ? 'flex-col' : 'flex-row']
}),
nav: {
class: [
// Flexbox
'flex',
'justify-between',
'items-center',
// Spacing
'm-0',
'p-0',
// Positioning
'relative',
// Lists
'list-none',
// Overflow
'overflow-x-auto'
]
},
stepperpanel: {
panel: ({ context, parent }) => ({
class: [context.active ? 'flex-1' : '', parent.props.orientation === 'vertical' ? 'flex flex-col flex-initial' : '']
}),
header: ({ parent, context }) => ({
class: [
// Position
'relative',
// Flexbox
'flex',
'items-center',
context.last ? 'flex-initial' : 'flex-1',
parent.props.orientation === 'vertical' ? 'flex-initial' : '',
// Spacing
'p-2'
]
}),
action: {
class: [
// Borders
'border-0',
'border-none',
// Flexbox
'inline-flex',
'items-center',
// Text
'text-decoration-none',
// Transitions
'transition',
'transition-shadow',
'duration-200',
// Shape
'rounded-md',
// Backgrounds
'bg-transparent',
// Focus
'outline-none'
]
},
number: ({ context }) => ({
class: [
// Flexbox
'flex',
'items-center',
'justify-center',
//Colors
'border-solid border-2 border-surface-200 dark:border-surface-700',
// Colors (Conditional)
context.active ? 'text-primary' : 'text-surface-900 dark:text-surface-0', // Adjust colors as needed
// Size and Shape
'min-w-[2rem]',
'h-[2rem]',
'line-height-[2rem]',
'rounded-full',
// Text
'text-lg',
// Transitions
'transition',
'transition-colors',
'transition-shadow',
'duration-200'
]
}),
title: ({ context }) => ({
class: [
// Layout
'block',
'whitespace-nowrap',
'overflow-hidden',
'text-ellipsis',
'max-w-full',
// Spacing
'ml-2',
// Text
context.active ? 'text-primary' : 'text-surface-700 dark:text-surface-0/80',
'font-medium',
// Transitions
'transition',
'transition-colors',
'transition-shadow',
'duration-200'
]
}),
separator: ({ context, state, parent }) => ({
class: [
// Colors (Conditional for active step)
state.d_activeStep <= context.index ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary',
// Conditional for Vertical Orientation
parent.props.orientation === 'vertical' ? ['flex-none', 'w-[2px]', 'h-auto', 'ml-[calc(1.29rem+2px)]'] : ['flex-1', 'w-full', 'h-[2px]', 'ml-4'],
// Transitions
'transition-shadow',
'duration-200'
]
}),
transition: {
class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-900', 'text-surface-900 dark:text-surface-0'],
enterFromClass: 'max-h-0',
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
enterToClass: 'max-h-[1000px]',
leaveFromClass: 'max-h-[1000px]',
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
leaveToClass: 'max-h-0'
},
content: ({ parent }) => ({
class: [parent.props.orientation === 'vertical' ? 'w-full pl-4' : '']
})
},
panelcontainer: {
class: [
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-900 dark:text-surface-0',
// Spacing
'p-4'
]
}
};

113
packages/tailwindcss-presets/src/aura/steps/index.js
View File

@ -1,113 +0,0 @@
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-2',
'before:border-surface-200',
'before:dark:border-surface-700',
'before:w-full',
'[&:first-child]:before:w-[calc(50%+1rem)]',
'[&:last-child]:before:w-1/2',
'before:absolute',
'before:top-1/2',
'before:left-0',
'before:transform',
'before:mt-[calc(-1rem+1px)]',
'[&:first-child]:before:translate-x-[100%]'
]
},
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-500 dark:focus:ring-primary-400',
// Misc
'overflow-hidden',
{ 'cursor-pointer': !props.readonly }
]
}),
step: ({ context, props }) => ({
class: [
// Flexbox
'flex items-center justify-center',
// Position
'z-20',
// Shape
'rounded-full',
'border-2',
// Size
'w-8',
'h-8',
'text-sm',
'leading-[2rem]',
'font-medium',
// Colors
'bg-surface-0 dark:bg-surface-800',
'border-surface-100 dark:border-surface-700',
{
'text-surface-400 dark:text-white/60': !context.active,
'text-primary': 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-medium',
// Display
'block',
// Spacing
'mt-2',
// Colors
{ 'text-surface-700 dark:text-white/70': !context.active, 'text-primary': context.active },
// Text and Overflow
'whitespace-nowrap',
'overflow-hidden',
'overflow-ellipsis',
'max-w-full'
]
})
};

70
packages/tailwindcss-presets/src/aura/tabmenu/index.js
View File

@ -1,70 +0,0 @@
export default {
root: {
class: 'overflow-x-auto'
},
menu: {
class: [
// Flexbox
'flex flex-1',
// Spacing
'list-none',
'p-0 m-0',
// Colors
'bg-surface-0 dark:bg-surface-900',
'border-b-2 border-surface-200 dark:border-surface-700',
'text-surface-900 dark:text-surface-0/80'
]
},
menuitem: {
class: 'mr-0'
},
action: ({ context, state }) => ({
class: [
'relative',
// Font
'font-semibold leading-none',
// Flexbox and Alignment
'flex items-center',
// Spacing
'py-4 px-[1.125rem]',
'-mb-px',
// Shape
'border-b',
'rounded-t-md',
// Colors and Conditions
{
'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
'bg-surface-0 dark:bg-surface-900': state.d_activeIndex !== context.index,
'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
'bg-surface-0 dark:bg-surface-900': state.d_activeIndex === context.index,
'border-primary': state.d_activeIndex === context.index,
'text-primary': state.d_activeIndex === context.index
},
// States
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
{
'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
},
// Transitions
'transition-all duration-200',
// Misc
'cursor-pointer select-none text-decoration-none',
'overflow-hidden',
'user-select-none'
]
}),
icon: {
class: 'mr-2'
}
};

155
packages/tailwindcss-presets/src/aura/tabview/index.js
View File

@ -1,155 +0,0 @@
export default {
navContainer: ({ props }) => ({
class: [
// Position
'relative',
// Misc
{ 'overflow-hidden': props.scrollable }
]
}),
navContent: ({ instance }) => ({
class: [
// Overflow and Scrolling
'overflow-y-hidden overscroll-contain',
'overscroll-auto',
'scroll-smooth',
'[&::-webkit-scrollbar]:hidden'
]
}),
previousButton: {
class: [
// Flexbox and Alignment
'flex items-center justify-center',
// Position
'!absolute',
'top-0 left-0',
'z-20',
// Size and Shape
'h-full w-10',
'rounded-none',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-surface-0/80',
'shadow-sm'
]
},
nextButton: {
class: [
// Flexbox and Alignment
'flex items-center justify-center',
// Position
'!absolute',
'top-0 right-0',
'z-20',
// Size and Shape
'h-full w-10',
'rounded-none',
// Colors
'text-surface-700 dark:text-surface-0/80',
'bg-surface-0 dark:bg-surface-900',
'shadow-sm'
]
},
nav: {
class: [
// Flexbox
'flex flex-1',
// Spacing
'list-none',
'p-0 m-0',
// Colors
'bg-surface-0 dark:bg-surface-900',
'border-b border-surface-200 dark:border-surface-700',
'text-surface-900 dark:text-surface-0/80'
]
},
tabpanel: {
header: ({ props }) => ({
class: [
// Spacing
'mr-0',
// Misc
'outline-none',
{
'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
}
]
}),
headerAction: ({ parent, context }) => ({
class: [
'relative',
// Font
'font-semibold',
// Flexbox and Alignment
'flex items-center',
// Spacing
'py-4 px-[1.125rem]',
'-mb-px',
// Shape
'border-b-2',
'rounded-t-md',
// Colors and Conditions
{
'border-surface-200 dark:border-surface-700': parent.state.d_activeIndex !== context.index,
'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex !== context.index,
'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex === context.index,
'border-primary': parent.state.d_activeIndex === context.index,
'text-primary': parent.state.d_activeIndex === context.index
},
// States
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
{
'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index,
'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
},
// Transitions
'transition-all duration-200',
// Misc
'cursor-pointer select-none text-decoration-none',
'overflow-hidden',
'user-select-none'
]
}),
headerTitle: {
class: [
// Text
'leading-none',
'whitespace-nowrap'
]
}
},
panelcontainer: {
class: [
// Spacing
'p-[1.125rem] pt-[0.875rem]',
// Shape
'border-0 rounded-none',
'border-br-md border-bl-md',
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-900 dark:text-surface-0/80'
]
}
};

37
packages/tailwindcss-presets/src/aura/tag/index.js
View File

@ -1,37 +0,0 @@
export default {
root: ({ props }) => ({
class: [
//Font
'text-xs font-bold',
//Alignments
'inline-flex items-center justify-center',
//Spacing
'px-[0.4rem] py-1',
//Shape
{
'rounded-md': !props.rounded,
'rounded-full': props.rounded
},
//Colors
{
'text-primary-highlight-inverse bg-primary-highlight': props.severity == null || props.severity == 'primary',
'text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-500/20': props.severity == 'success',
'text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-500/20': props.severity == 'secondary',
'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/20': props.severity == 'info',
'text-orange-700 dark:text-orange-300 bg-orange-100 dark:bg-orange-500/20': props.severity == 'warning',
'text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-500/20': props.severity == 'danger',
'text-surface-0 dark:text-surface-900 bg-surface-900 dark:bg-surface-0': props.severity == 'contrast'
}
]
}),
value: {
class: 'leading-normal'
},
icon: {
class: 'mr-1 text-sm'
}
};

60
packages/tailwindcss-presets/src/aura/terminal/index.js
View File

@ -1,60 +0,0 @@
export default {
root: {
class: [
// Spacing
'py-2 px-3',
// Shape
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0',
'border border-surface-200 dark:border-surface-700',
// Sizing & Overflow
'h-72 overflow-auto'
]
},
container: {
class: [
// Flexbox
'flex items-center'
]
},
prompt: {
class: [
// Color
'text-surface-700 dark:text-surface-0'
]
},
response: {
class: [
// Color
'text-surface-700 dark:text-surface-0'
]
},
command: {
class: [
// Color
'text-surface-700 dark:text-surface-0'
]
},
commandtext: {
class: [
// Flexbox
'flex-1 shrink grow-0',
// Shape
'border-0',
// Spacing
'p-0',
// Color
'bg-transparent text-inherit',
// Outline
'outline-none'
]
}
};

41
packages/tailwindcss-presets/src/aura/textarea/index.js
View File

@ -1,41 +0,0 @@
export default {
root: ({ context, props, parent }) => ({
class: [
// Font
'leading-none',
// Spacing
'm-0',
'py-2 px-3',
// Shape
'rounded-md',
// Colors
'text-surface-800 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
'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-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
},
// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
// Misc
'appearance-none',
'transition-colors duration-200'
]
})
};

118
packages/tailwindcss-presets/src/aura/tieredmenu/index.js
View File

@ -1,118 +0,0 @@
export default {
root: {
class: [
// Shape
'rounded-md',
// Size
'min-w-[12rem]',
'p-1',
// Colors
'bg-surface-0 dark:bg-surface-900',
'border border-surface-200 dark:border-surface-700'
]
},
menu: {
class: [
// Spacings and Shape
'list-none',
'm-0',
'p-0',
'outline-none'
]
},
menuitem: {
class: 'relative my-[2px] [&:first-child]:mt-0'
},
content: ({ context }) => ({
class: [
//Shape
'rounded-[4px]',
// Colors
'text-surface-700 dark:text-white/80',
{
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
},
// Transitions
'transition-shadow',
'duration-200',
// States
{
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
},
// Disabled
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
]
}),
action: {
class: [
'relative',
// Flexbox
'flex',
'items-center',
// Spacing
'py-2',
'px-3',
// Color
'text-surface-700 dark:text-white/80',
// Misc
'no-underline',
'overflow-hidden',
'cursor-pointer',
'select-none'
]
},
icon: {
class: [
// Spacing
'mr-2',
// Color
'text-surface-600 dark:text-white/70'
]
},
label: {
class: ['leading-none']
},
submenuicon: {
class: [
// Position
'ml-auto'
]
},
submenu: {
class: [
// Spacing
'p-1',
'm-0',
'list-none',
'min-w-[12.5rem]',
// Shape
'shadow-none sm:shadow-md',
'border border-surface-200 dark:border-surface-700',
// Position
'static sm:absolute',
'z-10',
// Color
'bg-surface-0 dark:bg-surface-900'
]
},
separator: {
class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
}
};

88
packages/tailwindcss-presets/src/aura/timeline/index.js
View File

@ -1,88 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'flex grow',
{
'flex-col': props.layout === 'vertical',
'flex-row flex-1': props.layout === 'horizontal'
}
]
}),
event: ({ props, context }) => ({
class: [
'flex relative min-h-[70px]',
{
'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
'flex-col flex-1': props.layout === 'horizontal',
'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
}
]
}),
opposite: ({ props, context }) => ({
class: [
'flex-1',
{
'px-4': props.layout === 'vertical',
'py-4': props.layout === 'horizontal'
},
{
'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
}
]
}),
separator: ({ props }) => ({
class: [
'flex items-center flex-initial',
{
'flex-col': props.layout === 'vertical',
'flex-row': props.layout === 'horizontal'
}
]
}),
marker: {
class: [
'relative',
// Display & Flexbox
'inline-flex items-center justify-center',
// Size
'w-[1.125rem] h-[1.125rem]',
// Appearance
'rounded-full border-2 border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-950',
// Before
'before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary',
// After
'after:absolute after:rounded-full after:w-full after:h-full after:shadow-sm'
]
},
connector: ({ props }) => ({
class: [
'grow bg-surface-300 dark:bg-surface-700',
{
'w-[2px]': props.layout === 'vertical',
'w-full h-[2px]': props.layout === 'horizontal'
}
]
}),
content: ({ props, context }) => ({
class: [
'flex-1',
{
'px-4': props.layout === 'vertical',
'py-4': props.layout === 'horizontal'
},
{
'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
},
{
'min-h-0': props.layout === 'vertical' && context.index === context.count - 1,
'grow-0': props.layout === 'horizontal' && context.index === context.count - 1
}
]
})
};

117
packages/tailwindcss-presets/src/aura/toast/index.js
View File

@ -1,117 +0,0 @@
export default {
root: ({ props }) => ({
class: [
//Size and Shape
'w-96 rounded-md',
// Positioning
{ '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center' }
]
}),
container: ({ props }) => ({
class: [
'mb-4 rounded-md w-full',
'border border-transparent',
'backdrop-blur-[10px] shadow-md',
// Colors
{
'bg-blue-50/90 dark:bg-blue-500/20': props.message.severity == 'info',
'bg-green-50/90 dark:bg-green-500/20': props.message.severity == 'success',
'bg-surface-50 dark:bg-surface-800': props.message.severity == 'secondary',
'bg-orange-50/90 dark:bg-orange-500/20': props.message.severity == 'warn',
'bg-red-50/90 dark:bg-red-500/20': props.message.severity == 'error',
'bg-surface-950 dark:bg-surface-0': props.message.severity == 'contrast'
},
{
'border-blue-200 dark:border-blue-500/20': props.message.severity == 'info',
'border-green-200 dark:border-green-500/20': props.message.severity == 'success',
'border-surface-300 dark:border-surface-500/20': props.message.severity == 'secondary',
'border-orange-200 dark:border-orange-500/20': props.message.severity == 'warn',
'border-red-200 dark:border-red-500/20': props.message.severity == 'error',
'border-surface-950 dark:border-surface-0': props.message.severity == 'contrast'
},
{
'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
'text-green-700 dark:text-green-300': props.message.severity == 'success',
'text-surface-700 dark:text-surface-300': props.message.severity == 'secondary',
'text-orange-700 dark:text-orange-300': props.message.severity == 'warn',
'text-red-700 dark:text-red-300': props.message.severity == 'error',
'text-surface-0 dark:text-surface-950': props.message.severity == 'contrast'
}
]
}),
content: ({ props }) => ({
class: [
'flex p-3',
{
'items-start': props.message.summary,
'items-center': !props.message.summary
}
]
}),
icon: ({ props }) => ({
class: [
// Sizing and Spacing
props.message.severity === 'contrast' || props.message.severity === 'secondary' ? 'w-0' : 'w-[1.125rem] h-[1.125rem] mr-2',
'text-lg leading-[normal]'
]
}),
text: {
class: [
// Font and Text
'text-base leading-[normal]',
'ml-2',
'flex-1'
]
},
summary: {
class: 'font-medium block'
},
detail: ({ props }) => ({
class: ['block', 'text-sm', props.message.severity === 'contrast' ? 'text-surface-0 dark:text-surface-950' : 'text-surface-700 dark:text-surface-0', { 'mt-2': props.message.summary }]
}),
closebutton: ({ props }) => ({
class: [
// Flexbox
'flex items-center justify-center',
// Size
'w-7 h-7',
// Spacing and Misc
'ml-auto relative',
// Shape
'rounded-full',
// Colors
'bg-transparent',
// Transitions
'transition duration-200 ease-in-out',
// States
'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
'focus:outline-none focus:outline-offset-0 focus:ring-1',
{
'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
},
// Misc
'overflow-hidden'
]
}),
transition: {
enterFromClass: 'opacity-0 translate-y-2/4',
enterActiveClass: 'transition-[transform,opacity] duration-300',
leaveFromClass: 'max-h-[1000px]',
leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
leaveToClass: 'max-h-0 opacity-0 mb-0'
}
};

90
packages/tailwindcss-presets/src/aura/togglebutton/index.js
View File

@ -1,90 +0,0 @@
export default {
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Misc
'cursor-pointer',
'select-none'
]
},
box: ({ props }) => ({
class: [
'relative',
// Alignments
'items-center inline-flex flex-1 text-center align-bottom justify-center',
// Sizes & Spacing
'px-4 py-2 leading-none',
// Shapes
'rounded-md',
'border',
{ 'border-transparent': !props.invalid },
// Colors
'bg-surface-100 dark:bg-surface-950',
{
'text-surface-600 dark:text-white/60 before:bg-transparent': !props.modelValue,
'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800': props.modelValue
},
// Before
'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
// Invalid State
{ 'border-red-500 dark:border-red-400': props.invalid },
// States
{
'peer-hover:text-surface-800 dark:peer-hover:text-white/80': !props.disabled && !props.modelValue,
'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled
},
// Transitions
'transition-all duration-200',
// Misc
{ 'cursor-pointer': !props.disabled, 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
]
}),
label: {
class: 'font-medium leading-[normal] text-center w-full z-10 relative'
},
input: {
class: [
'peer',
// Size
'w-full ',
'h-full',
// Position
'absolute',
'top-0 left-0',
'z-20',
// Spacing
'p-0',
'm-0',
// Shape
'opacity-0',
'rounded-md',
'outline-none',
'border border-surface-200 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: {
class: ['relative z-10', 'mr-2']
}
};

28
packages/tailwindcss-presets/src/aura/toolbar/index.js
View File

@ -1,28 +0,0 @@
export default {
root: {
class: [
// Flex & Alignment
'flex items-center justify-between flex-wrap',
'gap-2',
// Spacing
'p-3',
// Shape
'rounded-md',
// Color
'bg-surface-0 dark:bg-surface-900',
'border border-surface-200 dark:border-surface-700'
]
},
start: {
class: 'flex items-center'
},
center: {
class: 'flex items-center'
},
end: {
class: 'flex items-center'
}
};

45
packages/tailwindcss-presets/src/aura/tooltip/index.js
View File

@ -1,45 +0,0 @@
export default {
root: ({ context }) => ({
class: [
// Position and Shadows
'absolute',
'shadow-md',
'p-fadein',
// Spacing
{
'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
'py-1 px-0': context?.top || context?.bottom
}
]
}),
arrow: ({ context }) => ({
class: [
// Position
'absolute',
// Size
'w-0',
'h-0',
// Shape
'border-transparent',
'border-solid',
{
'border-y-[10px] border-r-[10px] border-l-0 border-r-surface-700': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
'border-y-[10px] border-l-[10px] border-r-0 border-l-surface-700': context?.left,
'border-x-[10px] border-t-[10px] border-b-0 border-t-surface-700': context?.top,
'border-x-[10px] border-b-[10px] border-t-0 border-b-surface-700': context?.bottom
},
// Spacing
{
'-mt-[10px] top-1/2': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
'-ml-[10px] left-1/2': context?.top || context?.bottom
}
]
}),
text: {
class: ['p-3', 'bg-surface-700', 'text-white', 'leading-none', 'rounded-md', 'whitespace-pre-line', 'break-words']
}
};

268
packages/tailwindcss-presets/src/aura/tree/index.js
View File

@ -1,268 +0,0 @@
export default {
root: {
class: [
// Space
'p-4',
// Shape
'rounded-md',
'border-none',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80'
]
},
wrapper: {
class: ['overflow-auto']
},
container: {
class: [
// Spacing
'm-0 p-0',
// Misc
'list-none overflow-auto'
]
},
node: {
class: ['p-0 my-[2px] mx-0 first:mt-0', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10']
},
content: ({ context, props }) => ({
class: [
// Flex and Alignment
'flex items-center',
// Shape
'rounded-md',
// Spacing
'py-1 px-2',
// Colors
context.selected ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-transparent text-surface-600 dark:text-white/70',
// States
{ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': (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-7 h-7',
// Spacing
'mr-2',
// Colors
'bg-transparent',
{
'text-surface-600 dark:text-white/70': !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-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transition
'transition duration-200',
// Misc
'cursor-pointer select-none'
]
}),
nodeCheckbox: ({ props, context, instance }) => ({
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Size
'w-5',
'h-5',
// Spacing
'mr-2',
// Misc
'cursor-pointer',
'select-none'
]
},
box: {
class: [
// Alignment
'flex',
'items-center',
'justify-center',
// Size
'w-5',
'h-5',
// Shape
'rounded',
'border',
// Colors
{
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
'border-primary bg-primary': context.checked
},
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': 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 border-surface-300 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: {
class: [
// Font
'text-base leading-none',
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
{
'text-white dark:text-surface-950': !instance.partialChecked,
'text-surface-700 dark:text-surface-0/80': 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-4 [&:not(ul)]:pl-0 [&:not(ul)]:my-[2px]']
},
filtercontainer: {
class: [
'relative block',
// Space
'mb-2',
// Size
'w-full'
]
},
input: ({ props }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0',
'py-2 px-3 pr-10',
// Size
'w-full',
// Shape
'rounded-md',
'border',
// Colors
'text-surface-800 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
{ 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
},
// 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 z-20',
// Color
'text-surface-600 dark:hover:text-white/70'
]
}
};

367
packages/tailwindcss-presets/src/aura/treeselect/index.js
View File

@ -1,367 +0,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-950': !props.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// Transitions
'transition-all',
'duration-200',
// States
{ 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
// Misc
'cursor-pointer',
'select-none',
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
]
}),
labelContainer: {
class: ['overflow-hidden flex flex-auto cursor-pointer']
},
label: {
class: [
'block leading-[normal]',
// Space
'py-2 px-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-r-md'
]
},
panel: {
class: [
// Colors
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80',
// Shape
'border border-surface-300 dark:border-surface-700',
'rounded-md',
'shadow-md'
]
},
wrapper: {
class: [
// Sizing
'max-h-[200px]',
// Misc
'overflow-auto'
]
},
tree: {
root: {
class: [
// Space
'p-1',
// Shape
'rounded-md',
'border-none',
// Color
'bg-surface-0 dark:bg-surface-900',
'text-surface-700 dark:text-white/80'
]
},
wrapper: {
class: ['overflow-auto']
},
container: {
class: [
// Spacing
'm-0 p-0',
// Misc
'list-none overflow-auto'
]
},
node: {
class: ['p-0 my-[2px] mx-0 first:mt-0', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10']
},
content: ({ context, props }) => ({
class: [
// Flex and Alignment
'flex items-center',
// Shape
'rounded-md',
// Spacing
'py-1 px-2',
// Colors
context.selected ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-transparent text-surface-600 dark:text-white/70',
// States
{ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': (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-7 h-7',
// Spacing
'mr-2',
// Colors
'bg-transparent',
{
'text-surface-600 dark:text-white/70': !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-1 focus:ring-primary-500 dark:focus:ring-primary-400',
// Transition
'transition duration-200',
// Misc
'cursor-pointer select-none'
]
}),
nodeCheckbox: ({ props, context, instance }) => ({
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Size
'w-5',
'h-5',
// Spacing
'mr-2',
// Misc
'cursor-pointer',
'select-none'
]
},
box: {
class: [
// Alignment
'flex',
'items-center',
'justify-center',
// Size
'w-5',
'h-5',
// Shape
'rounded',
'border',
// Colors
{
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
'border-primary bg-primary': context.checked
},
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': 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 border-surface-300 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: {
class: [
// Font
'text-base leading-none',
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
{
'text-white dark:text-surface-950': !instance.partialChecked,
'text-surface-700 dark:text-surface-0/80': 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-4 [&:not(ul)]:pl-0 [&:not(ul)]:my-[2px]']
},
filtercontainer: {
class: [
'relative block',
// Space
'mb-2',
// Size
'w-full'
]
},
input: ({ props }) => ({
class: [
'relative',
// Font
'leading-none',
// Spacing
'm-0',
'py-2 px-3 pr-10',
// Size
'w-full',
// Shape
'rounded-md',
'border',
// Colors
'text-surface-800 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
{ 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
},
// 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 z-20',
// 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'
}
};

442
packages/tailwindcss-presets/src/aura/treetable/index.js
View File

@ -1,442 +0,0 @@
export default {
root: ({ props }) => ({
class: [
'relative',
{
'flex flex-col h-full': 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: [
// Overflow
{
'relative overflow-auto': props.scrollable,
'overflow-x-auto': props.resizableColumns
}
]
}),
header: ({ props }) => ({
class: [
'font-semibold',
// Shape
props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
// Spacing
'p-4',
// Color
'bg-surface-0 dark:bg-surface-900',
'border-surface-200 dark:border-surface-700',
'text-surface-700 dark:text-white/80'
]
}),
footer: {
class: [
'font-semibold',
// Shape
'border-t-0 border-b border-x-0',
// Spacing
'p-4',
// Color
'bg-surface-0 dark:bg-surface-900',
'border-surface-200 dark:border-surface-700',
'text-surface-700 dark:text-white/80'
]
},
table: {
class: [
// Table & Width
'border-collapse table-fixed w-full '
]
},
thead: ({ props }) => ({
class: [
// Position & Z-index
{
'top-0 z-40 sticky': props.scrollable
}
]
}),
tbody: ({ props }) => ({
class: [
// Block Display
{
block: props.scrollable
}
]
}),
tfoot: ({ props }) => ({
class: [
// Block Display
{
block: props.scrollable
}
]
}),
headerrow: ({ props }) => ({
class: [
// Flexbox & Width
{
'flex flex-nowrap w-full': props.scrollable
}
]
}),
row: ({ context, props }) => ({
class: [
// Flex
{ 'flex flex-nowrap w-full': context.scrollable },
// Color
'text-surface-700 dark:text-white/80',
{ 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
{ 'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected },
// Hover & Flexbox
{
'hover:bg-surface-100 dark:bg-surface-800/50': context.selectable && !context.selected
},
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 ring-inset dark:focus:ring-primary-400',
// Transition
{ 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }
]
}),
headercell: ({ context, props }) => ({
class: [
'font-semibold',
'leading-[normal]',
// Position
{ 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
// Flex & Alignment
{
'flex flex-1 items-center': context.scrollable,
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
},
'text-left',
// Shape
{ 'first:border-l border-y border-r': context?.showGridlines },
'border-0 border-b border-solid',
// Spacing
context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
// Color
(props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
'border-surface-200 dark:border-surface-700',
// States
{ 'hover:bg-surface-100 dark:hover:bg-surface-80/50': (props.sortable === '' || props.sortable) && !context?.sorted },
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
// Transition
{ 'transition duration-200': props.sortable === '' || props.sortable },
// Misc
{
'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
}
]
}),
column: {
headercell: ({ context, props }) => ({
class: [
'font-semibold',
'leading-[normal]',
// Position
{ 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
// Flex & Alignment
{
'flex flex-1 items-center': context.scrollable,
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
},
'text-left',
// Shape
{ 'first:border-l border-y border-r': context?.showGridlines },
'border-0 border-b border-solid',
// Spacing
context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
// Color
(props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
'border-surface-200 dark:border-surface-700',
// States
{ 'hover:bg-surface-100 dark:hover:bg-surface-80/50': (props.sortable === '' || props.sortable) && !context?.sorted },
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
// Transition
{ 'transition duration-200': props.sortable === '' || props.sortable },
// Misc
{
'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
}
]
}),
bodycell: ({ context }) => ({
class: [
// Font
'leading-[normal]',
// Position
{
sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen
},
// Flex & Alignment
{
'flex flex-1 items-center': context.scrollable,
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
},
'text-left',
// Shape
'border-0 border-b border-solid',
'border-surface-200 dark:border-surface-700',
{
'border-x-0 border-l-0': !context.showGridlines
},
{ 'first:border-l border-r border-b': context?.showGridlines },
// Spacing
context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
// Misc
{
'cursor-pointer': context.selectable,
sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
'border-x-0 border-l-0': !context.showGridlines
}
]
}),
rowtoggler: {
class: [
'relative',
// Flex & Alignment
'inline-flex items-center justify-center',
'text-left align-middle',
// Spacing
'm-0 mr-2 p-0',
// Size
'w-7 h-7',
// 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-1 focus:ring-primary-500 dark:focus:ring-primary-400',
'hover:text-surface-700 hover:bg-surface-50 dark:hover:bg-surface-800/50',
// Transition
'transition duration-200',
// Misc
'overflow-hidden',
'cursor-pointer select-none'
]
},
sorticon: ({ context }) => ({
class: ['ml-2 inline-block', context.sorted ? 'fill-primary-highlight-inverse' : 'fill-surface-700 dark:fill-white/70']
}),
sortbadge: {
class: [
// Flex & Alignment
'inline-flex items-center justify-center align-middle',
// Shape
'rounded-full',
// Size
'w-[1.143rem] leading-[1.143rem]',
// Spacing
'ml-2',
// Color
'text-primary-highlight-inverse bg-primary-highlight'
]
},
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'
]
},
rowCheckbox: ({ props, context, instance }) => ({
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-middle',
// Size
'w-5',
'h-5',
// Spacing
'mr-2',
// Misc
'cursor-pointer',
'select-none'
]
},
box: {
class: [
// Alignment
'flex',
'items-center',
'justify-center',
// Size
'w-5',
'h-5',
// Shape
'rounded',
'border',
// Colors
{
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
'border-primary bg-primary': context.checked
},
// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': 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-1 border-surface-200 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
icon: {
class: [
// Font
'text-base leading-none',
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
{
'text-white dark:text-surface-950': !instance.partialChecked,
'text-gray dark:text-white': instance.partialChecked
},
// 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'
}
},
resizehelper: {
class: 'absolute hidden w-[2px] z-20 bg-primary'
}
};

115
packages/tailwindcss-presets/src/aura/tristatecheckbox/index.js
View File

@ -1,115 +0,0 @@
export default {
root: {
class: [
'relative',
// Alignment
'inline-flex',
'align-bottom',
// Size
'w-5',
'h-5',
// Misc
'cursor-pointer',
'select-none'
]
},
box: ({ props, context }) => ({
class: [
// Alignment
'flex',
'items-center',
'justify-center',
// Size
'w-5',
'h-5',
// Shape
'rounded',
'border',
// Colors
{
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
'bg-surface-0 dark:bg-surface-900': !context.active && !props.invalid && !props.disabled,
'border-primary bg-primary': context.active
},
// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// States
{
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': 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',
'outline-none',
'border border-surface-300 dark:border-surface-700',
// Misc
'appearance-none',
'cursor-pointer'
]
},
checkicon: {
class: [
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
'text-white dark:text-surface-950',
// Transitions
'transition-all',
'duration-200'
]
},
uncheckicon: {
class: [
// Size
'w-[0.875rem]',
'h-[0.875rem]',
// Colors
'text-white dark:text-surface-950',
// Transitions
'transition-all',
'duration-200'
]
}
};

78
packages/tailwindcss-presets/src/lara/accordion/index.js
View File

@ -1,78 +0,0 @@
export default {
accordiontab: {
root: {
class: 'mb-1'
},
header: ({ props }) => ({
class: [
// State
{ 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
]
}),
headerAction: ({ context }) => ({
class: [
//Font
'font-bold',
'leading-none',
// Alignments
'flex items-center',
'relative',
// Sizing
'p-5',
// Shape
'rounded-t-md',
{ 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0': context.active },
// Color
'border border-surface-200 dark:border-surface-700',
'bg-surface-50 dark:bg-surface-800',
'text-surface-600 dark:text-surface-0/80',
{ 'text-surface-900': context.active },
// Transition
'transition duration-200 ease-in-out',
'transition-shadow duration-200',
// States
'hover:bg-surface-100 dark:hover:bg-surface-700/40',
'hover:text-surface-900',
'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 ring-inset dark:focus-visible:ring-primary-300/50', // Focus
// Misc
'cursor-pointer no-underline select-none'
]
}),
headerIcon: {
class: 'inline-block mr-2'
},
headerTitle: {
class: 'leading-none'
},
content: {
class: [
// Spacing
'p-5',
//Shape
'rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
'border-t-0',
// Color
'bg-surface-0 dark:bg-surface-800',
'border border-surface-200 dark:border-surface-700',
'text-surface-700 dark:text-surface-0/80'
]
},
transition: {
enterFromClass: 'max-h-0',
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
enterToClass: 'max-h-[1000px]',
leaveFromClass: 'max-h-[1000px]',
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
leaveToClass: 'max-h-0'
}
}
};

261
packages/tailwindcss-presets/src/lara/autocomplete/index.js
View File

@ -1,261 +0,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-[normal]',
// 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': !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, parent }) => ({
class: [
// Font
'text-base leading-[normal]',
// 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 },
// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== '' },
// 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-[normal]',
// Colors
'text-primary-inverse',
'bg-primary',
'border border-primary',
// States
'focus:outline-none focus:outline-offset-0 focus:ring',
'hover:bg-primary-hover hover:border-primary-hover',
'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-[normal]',
// 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-highlight-inverse': context.selected,
'bg-primary-highlight': context.selected
},
//States
{ 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
{ 'hover:bg-primary-highlight-hover': 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',
// 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-[normal]',
// 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'
}
};

43
packages/tailwindcss-presets/src/lara/avatar/index.js
View File

@ -1,43 +0,0 @@
export default {
root: ({ props, parent }) => ({
class: [
// Font
{
'text-xl': props.size == 'large',
'text-2xl': props.size == 'xlarge'
},
// Alignments
'inline-flex items-center justify-center',
'relative',
// Sizes
{
'h-8 w-8': props.size == null || props.size == 'normal',
'w-12 h-12': props.size == 'large',
'w-16 h-16': props.size == 'xlarge'
},
{ '-ml-4': parent.instance.$style?.name == 'avatargroup' },
// Shapes
{
'rounded-lg': props.shape == 'square',
'rounded-full': props.shape == 'circle'
},
{ 'border-2': parent.instance.$style?.name == 'avatargroup' },
// Colors
'bg-surface-300 dark:bg-surface-700',
{ 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
]
}),
image: ({ props }) => ({
class: [
'h-full w-full',
{
'rounded-lg': props.shape == 'square',
'rounded-full': props.shape == 'circle'
}
]
})
};

Some files were not shown because too many files have changed in this diff Show More