diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js index 0594b7721..b665822f6 100644 --- a/apps/showcase/nuxt.config.js +++ b/apps/showcase/nuxt.config.js @@ -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 diff --git a/apps/showcase/tailwind.config.js b/apps/showcase/tailwind.config.js index b02c306e6..c7b689870 100644 --- a/apps/showcase/tailwind.config.js +++ b/apps/showcase/tailwind.config.js @@ -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: { diff --git a/packages/tailwindcss-presets/README.md b/packages/tailwindcss-presets/README.md new file mode 100644 index 000000000..600f61656 --- /dev/null +++ b/packages/tailwindcss-presets/README.md @@ -0,0 +1 @@ +# PrimeVue TailwindCSS Presets diff --git a/packages/tailwindcss-presets/package.json b/packages/tailwindcss-presets/package.json index 20f7c9537..e39c3293f 100644 --- a/packages/tailwindcss-presets/package.json +++ b/packages/tailwindcss-presets/package.json @@ -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" } diff --git a/packages/tailwindcss-presets/src/aura/accordion/index.js b/packages/tailwindcss-presets/src/aura/accordion/index.js deleted file mode 100644 index 3fe092594..000000000 --- a/packages/tailwindcss-presets/src/aura/accordion/index.js +++ /dev/null @@ -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' - } - } -}; diff --git a/packages/tailwindcss-presets/src/aura/autocomplete/index.js b/packages/tailwindcss-presets/src/aura/autocomplete/index.js deleted file mode 100644 index 91ac380b8..000000000 --- a/packages/tailwindcss-presets/src/aura/autocomplete/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/avatar/index.js b/packages/tailwindcss-presets/src/aura/avatar/index.js deleted file mode 100644 index 9c77beb98..000000000 --- a/packages/tailwindcss-presets/src/aura/avatar/index.js +++ /dev/null @@ -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' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/avatargroup/index.js b/packages/tailwindcss-presets/src/aura/avatargroup/index.js deleted file mode 100644 index d267e0698..000000000 --- a/packages/tailwindcss-presets/src/aura/avatargroup/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - root: { - class: 'flex items-center' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/badge/index.js b/packages/tailwindcss-presets/src/aura/badge/index.js deleted file mode 100644 index c9e35052c..000000000 --- a/packages/tailwindcss-presets/src/aura/badge/index.js +++ /dev/null @@ -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' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/badgedirective/index.js b/packages/tailwindcss-presets/src/aura/badgedirective/index.js deleted file mode 100644 index 6bf293f90..000000000 --- a/packages/tailwindcss-presets/src/aura/badgedirective/index.js +++ /dev/null @@ -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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/blockui/index.js b/packages/tailwindcss-presets/src/aura/blockui/index.js deleted file mode 100644 index 0c81a0c93..000000000 --- a/packages/tailwindcss-presets/src/aura/blockui/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default { - root: { - class: 'relative' - }, - mask: { - class: 'bg-black/40' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/breadcrumb/index.js b/packages/tailwindcss-presets/src/aura/breadcrumb/index.js deleted file mode 100644 index d8553c515..000000000 --- a/packages/tailwindcss-presets/src/aura/breadcrumb/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/button/index.js b/packages/tailwindcss-presets/src/aura/button/index.js deleted file mode 100644 index 84eb0240b..000000000 --- a/packages/tailwindcss-presets/src/aura/button/index.js +++ /dev/null @@ -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 }] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/calendar/index.js b/packages/tailwindcss-presets/src/aura/calendar/index.js deleted file mode 100644 index b8750b3e1..000000000 --- a/packages/tailwindcss-presets/src/aura/calendar/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/card/index.js b/packages/tailwindcss-presets/src/aura/card/index.js deleted file mode 100644 index eef7c5756..000000000 --- a/packages/tailwindcss-presets/src/aura/card/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/carousel/index.js b/packages/tailwindcss-presets/src/aura/carousel/index.js deleted file mode 100644 index 9bd0c16fa..000000000 --- a/packages/tailwindcss-presets/src/aura/carousel/index.js +++ /dev/null @@ -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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/cascadeselect/index.js b/packages/tailwindcss-presets/src/aura/cascadeselect/index.js deleted file mode 100644 index cc1f99e23..000000000 --- a/packages/tailwindcss-presets/src/aura/cascadeselect/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/checkbox/index.js b/packages/tailwindcss-presets/src/aura/checkbox/index.js deleted file mode 100644 index e02d8c0bb..000000000 --- a/packages/tailwindcss-presets/src/aura/checkbox/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/chip/index.js b/packages/tailwindcss-presets/src/aura/chip/index.js deleted file mode 100644 index 09f175b8f..000000000 --- a/packages/tailwindcss-presets/src/aura/chip/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/chips/index.js b/packages/tailwindcss-presets/src/aura/chips/index.js deleted file mode 100644 index 56343073e..000000000 --- a/packages/tailwindcss-presets/src/aura/chips/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/colorpicker/index.js b/packages/tailwindcss-presets/src/aura/colorpicker/index.js deleted file mode 100644 index 1ca55c5dd..000000000 --- a/packages/tailwindcss-presets/src/aura/colorpicker/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/confirmpopup/index.js b/packages/tailwindcss-presets/src/aura/confirmpopup/index.js deleted file mode 100644 index 4b9897ab0..000000000 --- a/packages/tailwindcss-presets/src/aura/confirmpopup/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/contextmenu/index.js b/packages/tailwindcss-presets/src/aura/contextmenu/index.js deleted file mode 100644 index 3dba7aa33..000000000 --- a/packages/tailwindcss-presets/src/aura/contextmenu/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/datatable/index.js b/packages/tailwindcss-presets/src/aura/datatable/index.js deleted file mode 100644 index 3c115af62..000000000 --- a/packages/tailwindcss-presets/src/aura/datatable/index.js +++ /dev/null @@ -1,1155 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'relative', - - // Flex & Alignment - { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' }, - - // Size - { 'h-full': props.scrollable && props.scrollHeight === 'flex' } - ] - }), - loadingoverlay: { - class: [ - // Position - 'absolute', - 'top-0 left-0', - 'z-20', - - // Flex & Alignment - 'flex items-center justify-center', - - // Size - 'w-full h-full', - - // Color - 'bg-surface-100/40 dark:bg-surface-900/40', - - // Transition - 'transition duration-200' - ] - }, - loadingicon: { - class: 'w-8 h-8 animate-spin' - }, - wrapper: ({ props }) => ({ - class: [ - { relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' }, - - // Size - { 'h-full': props.scrollable && props.scrollHeight === 'flex' } - ] - }), - header: ({ props }) => ({ - class: [ - 'font-bold', - - // Shape - props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0', - - // Spacing - 'p-4', - - // Color - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80' - ] - }), - table: { - class: 'w-full border-spacing-0 border-separate' - }, - thead: ({ context }) => ({ - class: [ - { - 'bg-surface-0 dark:bg-surface-900 top-0 z-40 sticky': context.scrollable - } - ] - }), - tbody: ({ instance, context }) => ({ - class: [ - { - 'sticky z-20': instance.frozenRow && context.scrollable - }, - 'bg-surface-0 dark:bg-surface-900' - ] - }), - tfoot: ({ context }) => ({ - class: [ - { - 'bg-surface-0 bottom-0 z-0': context.scrollable - } - ] - }), - footer: { - class: [ - 'font-bold', - - // Shape - 'border-t-0 border-b border-x-0', - - // Spacing - 'p-4', - - // Color - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80' - ] - }, - column: { - headercell: ({ context, props }) => ({ - class: [ - 'font-semibold', - 'leading-[normal]', - - // Position - { 'sticky z-20 border-b': props.frozen || props.frozen === '' }, - - { relative: context.resizable }, - - // Alignment - 'text-left', - - // Shape - { 'first:border-l border-y border-r': context?.showGridlines }, - 'border-0 border-b border-solid', - - // Spacing - context?.size === 'small' ? '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-800/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 - { 'cursor-pointer': props.sortable === '' || props.sortable }, - { - 'overflow-hidden space-nowrap border-y bg-clip-padding': context.resizable // Resizable - } - ] - }), - headercontent: { - class: 'flex items-center' - }, - sort: ({ context }) => ({ - class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80'] - }), - bodycell: ({ props, context, state, parent }) => ({ - class: [ - // Font - 'leading-[normal]', - - //Position - { 'sticky box-border border-b': parent.instance.frozenRow }, - { 'sticky box-border border-b z-20': props.frozen || props.frozen === '' }, - - // Alignment - 'text-left', - - // Shape - 'border-0 border-b border-solid', - { 'first:border-l border-r border-b': context?.showGridlines }, - { 'bg-surface-0 dark:bg-surface-900': parent.instance.frozenRow || props.frozen || props.frozen === '' }, - - // Spacing - { 'py-[0.375rem] px-2': context?.size === 'small' && !state['d_editing'] }, - { 'py-[0.9375rem] px-5': context?.size === 'large' && !state['d_editing'] }, - { 'py-3 px-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] }, - { 'py-[0.6rem] px-2': state['d_editing'] }, - - // Color - 'border-surface-200 dark:border-surface-700' - ] - }), - footercell: ({ context }) => ({ - class: [ - // Font - 'font-bold', - - // Alignment - 'text-left', - - // Shape - 'border-0 border-b border-solid', - { 'border-x border-y': context?.showGridlines }, - - // Spacing - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', - - // Color - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900' - ] - }), - sorticon: ({ context }) => ({ - class: ['ml-2', context.sorted ? 'text-primary-highlight-inverse' : 'text-surface-700 dark:text-white/70'] - }), - sortbadge: { - class: [ - // Flex & Alignment - 'flex items-center justify-center align-middle', - - // Shape - 'rounded-full', - - // Size - 'w-[1.143rem] leading-[1.143rem]', - - // Spacing - 'ml-2', - - // Color - 'text-primary-highlight-inverse bg-primary-highlight' - ] - }, - columnfilter: { - class: 'inline-flex items-center ml-auto font-normal' - }, - filteroverlay: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Size - 'min-w-[12.5rem]', - - // Color - 'bg-surface-0 dark:bg-surface-900', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - filtermatchmodedropdown: { - root: ({ state }) => ({ - class: [ - // Display and Position - 'flex', - 'relative', - - // Spacing - 'mb-2 last:mb-0', - - // Shape - 'w-full', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary', - { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none' - ] - }) - }, - filterrowitems: { - class: 'm-0 p-0 py-3 list-none' - }, - filterrowitem: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context?.highlighted }, - { 'bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-white/80': !context?.highlighted }, - { 'bg-primary-highlight text-primary-highlight-inverse': context?.highlighted }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted }, - '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', - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - filteroperator: { - class: [ - // Shape - 'rounded-t-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-700' - ] - }, - filteroperatordropdown: { - root: ({ state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'w-full', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-950', - 'border border-surface-300 dark:border-surface-700', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-surface-400 dark:hover:border-surface-600', - { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none' - ] - }), - input: ({ props }) => ({ - class: [ - //Font - 'leading-[normal]', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Sizing and Spacing - 'w-[1%]', - 'py-2 px-3', - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }), - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // 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' - ] - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0 px-3 py-2', - 'first:mt-0 mt-[2px]', - - // Color - { - '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' - ] - }) - }, - filteraddrulebutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-[0.4375rem] px-[0.875rem] w-full', - - // Shape - 'rounded-md', - - 'bg-transparent border-transparent', - 'text-primary', - 'hover:bg-primary-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }, - label: { - class: 'flex-auto grow-0' - }, - icon: { - class: 'mr-2' - } - }, - filterremovebutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-[0.4375rem] px-[0.875rem] w-full mt-2', - - // Shape - 'rounded-md', - - 'bg-transparent border-transparent', - 'text-red-500 dark:text-red-400', - 'hover:bg-red-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }, - label: { - class: 'flex-auto grow-0' - }, - icon: { - class: 'mr-2' - } - }, - filterbuttonbar: { - class: [ - // Flex & Alignment - 'flex items-center justify-between', - - // Space - 'p-0' - ] - }, - filterclearbutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-[0.4375rem] px-[0.875rem]', - - // Shape - 'rounded-md', - - 'text-primary-500 border border-primary', - 'hover:bg-primary-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - } - }, - filterapplybutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-[0.4375rem] px-[0.875rem]', - - // Shape - 'rounded-md', - - 'text-primary-inverse', - 'bg-primary', - 'hover:bg-primary-hover hover:border-primary-hover', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - } - }, - filtermenubutton: ({ context }) => ({ - class: [ - 'relative', - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - - // Spacing - 'ml-2', - - // Shape - 'rounded-full', - - // Color - { 'bg-primary-highlight text-primary-highliht-inverse': context.active }, - 'dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-900', - - // States - 'hover:text-surface-700 hover:bg-surface-300/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 no-underline overflow-hidden' - ] - }), - headerfilterclearbutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Shape - 'border-none', - - // Spacing - 'm-0 p-0 ml-2', - - // Color - 'bg-transparent', - - // Misc - 'cursor-pointer no-underline overflow-hidden select-none', - { - invisible: !context.hidden - } - ] - }), - rowtoggler: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Spacing - 'm-0 p-0', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-500 dark:text-white/70', - 'bg-transparent', - 'focus-visible:outline-none focus-visible:outline-offset-0', - 'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - columnresizer: { - class: [ - 'block', - - // Position - 'absolute top-0 right-0', - - // Sizing - 'w-2 h-full', - - // Spacing - 'm-0 p-0', - - // Color - 'border border-transparent', - - // Misc - 'cursor-col-resize' - ] - }, - rowreordericon: { - class: 'cursor-move' - }, - roweditorinitbutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-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' - ] - }, - roweditorsavebutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - roweditorcancelbutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - rowRadiobutton: { - root: { - class: [ - 'relative', - - // Flexbox & Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-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 - }, - { - '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 backface-hidden invisible scale-[0.1]': !props.modelValue, - 'bg-primary transform visible translate-z-0 scale-[1.1]': props.modelValue - }, - - // Transition - 'transition duration-200' - ] - }) - }, - headercheckbox: { - 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' - ] - } - }, - rowCheckbox: { - 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' - ] - } - }, - transition: { - class: 'p-3 flex flex-col gap-2', - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } - }, - bodyrow: ({ context, props }) => ({ - class: [ - // Color - 'dark:text-white/80', - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - { 'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected }, - { 'font-bold bg-surface-0 dark:bg-surface-900 z-20': props.frozenRow }, - { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-900 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-800/50': context.stripedRows }, - - // State - { 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 ring-inset dark:focus:ring-primary-400': context.selectable }, - { 'hover:bg-surface-300/20 dark:hover:bg-surface-800/50 hover:text-surface-600': props.selectionMode && !context.selected }, - - // Transition - { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }, - - // Misc - { 'cursor-pointer': props.selectionMode } - ] - }), - rowexpansion: { - class: 'bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-white/80' - }, - rowgroupheader: { - class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900'] - }, - rowgroupfooter: { - class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900'] - }, - rowgrouptoggler: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Spacing - 'm-0 p-0', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-500 dark:text-white/70', - 'bg-transparent', - 'focus-visible:outline-none focus-visible:outline-offset-0', - 'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - rowgrouptogglericon: { - class: 'inline-block w-4 h-4' - }, - resizehelper: { - class: 'absolute hidden w-[2px] z-20 bg-primary' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/dataview/index.js b/packages/tailwindcss-presets/src/aura/dataview/index.js deleted file mode 100644 index d8b012edd..000000000 --- a/packages/tailwindcss-presets/src/aura/dataview/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/dataviewlayoutoptions/index.js b/packages/tailwindcss-presets/src/aura/dataviewlayoutoptions/index.js deleted file mode 100644 index b8b5be9eb..000000000 --- a/packages/tailwindcss-presets/src/aura/dataviewlayoutoptions/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/deferred/index.js b/packages/tailwindcss-presets/src/aura/deferred/index.js deleted file mode 100644 index 2064371ae..000000000 --- a/packages/tailwindcss-presets/src/aura/deferred/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - root: {} -}; diff --git a/packages/tailwindcss-presets/src/aura/dialog/index.js b/packages/tailwindcss-presets/src/aura/dialog/index.js deleted file mode 100644 index aca50e738..000000000 --- a/packages/tailwindcss-presets/src/aura/dialog/index.js +++ /dev/null @@ -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' - }; - } -}; diff --git a/packages/tailwindcss-presets/src/aura/divider/index.js b/packages/tailwindcss-presets/src/aura/divider/index.js deleted file mode 100644 index b4406974e..000000000 --- a/packages/tailwindcss-presets/src/aura/divider/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/dock/index.js b/packages/tailwindcss-presets/src/aura/dock/index.js deleted file mode 100644 index 5a33adedf..000000000 --- a/packages/tailwindcss-presets/src/aura/dock/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/dropdown/index.js b/packages/tailwindcss-presets/src/aura/dropdown/index.js deleted file mode 100644 index 9a8a9bd8c..000000000 --- a/packages/tailwindcss-presets/src/aura/dropdown/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/fieldset/index.js b/packages/tailwindcss-presets/src/aura/fieldset/index.js deleted file mode 100644 index 88c05033b..000000000 --- a/packages/tailwindcss-presets/src/aura/fieldset/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/fileupload/index.js b/packages/tailwindcss-presets/src/aura/fileupload/index.js deleted file mode 100644 index 310d03b67..000000000 --- a/packages/tailwindcss-presets/src/aura/fileupload/index.js +++ /dev/null @@ -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' - ] - } - } -}; diff --git a/packages/tailwindcss-presets/src/aura/floatlabel/index.js b/packages/tailwindcss-presets/src/aura/floatlabel/index.js deleted file mode 100644 index 557808fee..000000000 --- a/packages/tailwindcss-presets/src/aura/floatlabel/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/galleria/index.js b/packages/tailwindcss-presets/src/aura/galleria/index.js deleted file mode 100644 index 9f4d37e0e..000000000 --- a/packages/tailwindcss-presets/src/aura/galleria/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/global.js b/packages/tailwindcss-presets/src/aura/global.ts similarity index 100% rename from packages/tailwindcss-presets/src/aura/global.js rename to packages/tailwindcss-presets/src/aura/global.ts diff --git a/packages/tailwindcss-presets/src/aura/iconfield/index.js b/packages/tailwindcss-presets/src/aura/iconfield/index.js deleted file mode 100644 index 71216111b..000000000 --- a/packages/tailwindcss-presets/src/aura/iconfield/index.js +++ /dev/null @@ -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' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/image/index.js b/packages/tailwindcss-presets/src/aura/image/index.js deleted file mode 100644 index 8faaaa1ab..000000000 --- a/packages/tailwindcss-presets/src/aura/image/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/index.js b/packages/tailwindcss-presets/src/aura/index.js deleted file mode 100644 index 49eb5e796..000000000 --- a/packages/tailwindcss-presets/src/aura/index.js +++ /dev/null @@ -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 -}; diff --git a/packages/tailwindcss-presets/src/aura/index.ts b/packages/tailwindcss-presets/src/aura/index.ts new file mode 100644 index 000000000..4b62e2417 --- /dev/null +++ b/packages/tailwindcss-presets/src/aura/index.ts @@ -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; diff --git a/packages/tailwindcss-presets/src/aura/inlinemessage/index.js b/packages/tailwindcss-presets/src/aura/inlinemessage/index.js deleted file mode 100644 index 9eb01878d..000000000 --- a/packages/tailwindcss-presets/src/aura/inlinemessage/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/inplace/index.js b/packages/tailwindcss-presets/src/aura/inplace/index.js deleted file mode 100644 index 691230b24..000000000 --- a/packages/tailwindcss-presets/src/aura/inplace/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/inputgroup/index.js b/packages/tailwindcss-presets/src/aura/inputgroup/index.js deleted file mode 100644 index cce711149..000000000 --- a/packages/tailwindcss-presets/src/aura/inputgroup/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - root: { - class: ['flex items-stretch', 'w-full'] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/inputgroupaddon/index.js b/packages/tailwindcss-presets/src/aura/inputgroupaddon/index.js deleted file mode 100644 index 888b31102..000000000 --- a/packages/tailwindcss-presets/src/aura/inputgroupaddon/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/inputmask/index.js b/packages/tailwindcss-presets/src/aura/inputmask/index.js deleted file mode 100644 index 96076802f..000000000 --- a/packages/tailwindcss-presets/src/aura/inputmask/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/inputnumber/index.js b/packages/tailwindcss-presets/src/aura/inputnumber/index.js deleted file mode 100644 index de76e68da..000000000 --- a/packages/tailwindcss-presets/src/aura/inputnumber/index.js +++ /dev/null @@ -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' - } - } -}; diff --git a/packages/tailwindcss-presets/src/aura/inputotp/index.js b/packages/tailwindcss-presets/src/aura/inputotp/index.js deleted file mode 100644 index f3e8640e2..000000000 --- a/packages/tailwindcss-presets/src/aura/inputotp/index.js +++ /dev/null @@ -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' - ] - }) - } -}; diff --git a/packages/tailwindcss-presets/src/aura/inputswitch/index.js b/packages/tailwindcss-presets/src/aura/inputswitch/index.js deleted file mode 100644 index b3cdd9a59..000000000 --- a/packages/tailwindcss-presets/src/aura/inputswitch/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/inputtext/index.js b/packages/tailwindcss-presets/src/aura/inputtext/index.ts similarity index 87% rename from packages/tailwindcss-presets/src/aura/inputtext/index.js rename to packages/tailwindcss-presets/src/aura/inputtext/index.ts index 323f4293a..dad26051a 100644 --- a/packages/tailwindcss-presets/src/aura/inputtext/index.js +++ b/packages/tailwindcss-presets/src/aura/inputtext/index.ts @@ -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; diff --git a/packages/tailwindcss-presets/src/aura/knob/index.js b/packages/tailwindcss-presets/src/aura/knob/index.js deleted file mode 100644 index 21d2c6181..000000000 --- a/packages/tailwindcss-presets/src/aura/knob/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/listbox/index.js b/packages/tailwindcss-presets/src/aura/listbox/index.js deleted file mode 100644 index 40da9be77..000000000 --- a/packages/tailwindcss-presets/src/aura/listbox/index.js +++ /dev/null @@ -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'] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/megamenu/index.js b/packages/tailwindcss-presets/src/aura/megamenu/index.js deleted file mode 100644 index a9fca0910..000000000 --- a/packages/tailwindcss-presets/src/aura/megamenu/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/menu/index.js b/packages/tailwindcss-presets/src/aura/menu/index.js deleted file mode 100644 index 0dabd5ba6..000000000 --- a/packages/tailwindcss-presets/src/aura/menu/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/menubar/index.js b/packages/tailwindcss-presets/src/aura/menubar/index.js deleted file mode 100644 index 0ce24db06..000000000 --- a/packages/tailwindcss-presets/src/aura/menubar/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/message/index.js b/packages/tailwindcss-presets/src/aura/message/index.js deleted file mode 100644 index 3e6b13f8e..000000000 --- a/packages/tailwindcss-presets/src/aura/message/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/metergroup/index.js b/packages/tailwindcss-presets/src/aura/metergroup/index.js deleted file mode 100644 index 2269682d5..000000000 --- a/packages/tailwindcss-presets/src/aura/metergroup/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/multiselect/index.js b/packages/tailwindcss-presets/src/aura/multiselect/index.js deleted file mode 100644 index f4c40bf60..000000000 --- a/packages/tailwindcss-presets/src/aura/multiselect/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/orderlist/index.js b/packages/tailwindcss-presets/src/aura/orderlist/index.js deleted file mode 100644 index 24db2692e..000000000 --- a/packages/tailwindcss-presets/src/aura/orderlist/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/organizationchart/index.js b/packages/tailwindcss-presets/src/aura/organizationchart/index.js deleted file mode 100644 index 47b78c9af..000000000 --- a/packages/tailwindcss-presets/src/aura/organizationchart/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/overlaypanel/index.js b/packages/tailwindcss-presets/src/aura/overlaypanel/index.js deleted file mode 100644 index f4208cf9b..000000000 --- a/packages/tailwindcss-presets/src/aura/overlaypanel/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/paginator/index.js b/packages/tailwindcss-presets/src/aura/paginator/index.js deleted file mode 100644 index 1aa971354..000000000 --- a/packages/tailwindcss-presets/src/aura/paginator/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/panel/index.js b/packages/tailwindcss-presets/src/aura/panel/index.js deleted file mode 100644 index 9bd92d21e..000000000 --- a/packages/tailwindcss-presets/src/aura/panel/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/panelmenu/index.js b/packages/tailwindcss-presets/src/aura/panelmenu/index.js deleted file mode 100644 index ecb412e29..000000000 --- a/packages/tailwindcss-presets/src/aura/panelmenu/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/password/index.js b/packages/tailwindcss-presets/src/aura/password/index.js deleted file mode 100644 index cfc3dda4b..000000000 --- a/packages/tailwindcss-presets/src/aura/password/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/picklist/index.js b/packages/tailwindcss-presets/src/aura/picklist/index.js deleted file mode 100644 index cc9b48e69..000000000 --- a/packages/tailwindcss-presets/src/aura/picklist/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/progressbar/index.js b/packages/tailwindcss-presets/src/aura/progressbar/index.js deleted file mode 100644 index 7cc565a3a..000000000 --- a/packages/tailwindcss-presets/src/aura/progressbar/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/progressspinner/index.js b/packages/tailwindcss-presets/src/aura/progressspinner/index.js deleted file mode 100644 index 4e1faec86..000000000 --- a/packages/tailwindcss-presets/src/aura/progressspinner/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/radiobutton/index.js b/packages/tailwindcss-presets/src/aura/radiobutton/index.js deleted file mode 100644 index 9fa627ca4..000000000 --- a/packages/tailwindcss-presets/src/aura/radiobutton/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/rating/index.js b/packages/tailwindcss-presets/src/aura/rating/index.js deleted file mode 100644 index 348cc3d19..000000000 --- a/packages/tailwindcss-presets/src/aura/rating/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/ripple/index.js b/packages/tailwindcss-presets/src/aura/ripple/index.js deleted file mode 100644 index 429c249e8..000000000 --- a/packages/tailwindcss-presets/src/aura/ripple/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - root: { - class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'], - style: 'transform: scale(0)' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/scrollpanel/index.js b/packages/tailwindcss-presets/src/aura/scrollpanel/index.js deleted file mode 100644 index d41e690c3..000000000 --- a/packages/tailwindcss-presets/src/aura/scrollpanel/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/scrolltop/index.js b/packages/tailwindcss-presets/src/aura/scrolltop/index.js deleted file mode 100644 index 7b29dbdf5..000000000 --- a/packages/tailwindcss-presets/src/aura/scrolltop/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/selectbutton/index.js b/packages/tailwindcss-presets/src/aura/selectbutton/index.js deleted file mode 100644 index 04a522b01..000000000 --- a/packages/tailwindcss-presets/src/aura/selectbutton/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/sidebar/index.js b/packages/tailwindcss-presets/src/aura/sidebar/index.js deleted file mode 100644 index 3e3ee4896..000000000 --- a/packages/tailwindcss-presets/src/aura/sidebar/index.js +++ /dev/null @@ -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' - }; - } -}; diff --git a/packages/tailwindcss-presets/src/aura/skeleton/index.js b/packages/tailwindcss-presets/src/aura/skeleton/index.js deleted file mode 100644 index d459aaac9..000000000 --- a/packages/tailwindcss-presets/src/aura/skeleton/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/slider/index.js b/packages/tailwindcss-presets/src/aura/slider/index.js deleted file mode 100644 index 0bce0ce2a..000000000 --- a/packages/tailwindcss-presets/src/aura/slider/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/speeddial/index.js b/packages/tailwindcss-presets/src/aura/speeddial/index.js deleted file mode 100644 index 84a782edd..000000000 --- a/packages/tailwindcss-presets/src/aura/speeddial/index.js +++ /dev/null @@ -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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/splitbutton/index.js b/packages/tailwindcss-presets/src/aura/splitbutton/index.js deleted file mode 100644 index bef60ae46..000000000 --- a/packages/tailwindcss-presets/src/aura/splitbutton/index.js +++ /dev/null @@ -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' - } - } - } -}; diff --git a/packages/tailwindcss-presets/src/aura/splitter/index.js b/packages/tailwindcss-presets/src/aura/splitter/index.js deleted file mode 100644 index 412d03fd1..000000000 --- a/packages/tailwindcss-presets/src/aura/splitter/index.js +++ /dev/null @@ -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' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/splitterpanel/index.js b/packages/tailwindcss-presets/src/aura/splitterpanel/index.js deleted file mode 100644 index 6a21cd3a0..000000000 --- a/packages/tailwindcss-presets/src/aura/splitterpanel/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - root: ({ context }) => ({ - class: ['grow', { flex: context.nested }] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/stepper/index.js b/packages/tailwindcss-presets/src/aura/stepper/index.js deleted file mode 100644 index 93026b0df..000000000 --- a/packages/tailwindcss-presets/src/aura/stepper/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/steps/index.js b/packages/tailwindcss-presets/src/aura/steps/index.js deleted file mode 100644 index a2791096c..000000000 --- a/packages/tailwindcss-presets/src/aura/steps/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/tabmenu/index.js b/packages/tailwindcss-presets/src/aura/tabmenu/index.js deleted file mode 100644 index 43c15e62a..000000000 --- a/packages/tailwindcss-presets/src/aura/tabmenu/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/tabview/index.js b/packages/tailwindcss-presets/src/aura/tabview/index.js deleted file mode 100644 index d7a0b4c6b..000000000 --- a/packages/tailwindcss-presets/src/aura/tabview/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/tag/index.js b/packages/tailwindcss-presets/src/aura/tag/index.js deleted file mode 100644 index 79f659efc..000000000 --- a/packages/tailwindcss-presets/src/aura/tag/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/terminal/index.js b/packages/tailwindcss-presets/src/aura/terminal/index.js deleted file mode 100644 index d7145669d..000000000 --- a/packages/tailwindcss-presets/src/aura/terminal/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/textarea/index.js b/packages/tailwindcss-presets/src/aura/textarea/index.js deleted file mode 100644 index b12bdbe93..000000000 --- a/packages/tailwindcss-presets/src/aura/textarea/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/tieredmenu/index.js b/packages/tailwindcss-presets/src/aura/tieredmenu/index.js deleted file mode 100644 index 73af80c2f..000000000 --- a/packages/tailwindcss-presets/src/aura/tieredmenu/index.js +++ /dev/null @@ -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]' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/timeline/index.js b/packages/tailwindcss-presets/src/aura/timeline/index.js deleted file mode 100644 index 29db67fb4..000000000 --- a/packages/tailwindcss-presets/src/aura/timeline/index.js +++ /dev/null @@ -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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/aura/toast/index.js b/packages/tailwindcss-presets/src/aura/toast/index.js deleted file mode 100644 index 80edb8ebe..000000000 --- a/packages/tailwindcss-presets/src/aura/toast/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/togglebutton/index.js b/packages/tailwindcss-presets/src/aura/togglebutton/index.js deleted file mode 100644 index 83c72c160..000000000 --- a/packages/tailwindcss-presets/src/aura/togglebutton/index.js +++ /dev/null @@ -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'] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/toolbar/index.js b/packages/tailwindcss-presets/src/aura/toolbar/index.js deleted file mode 100644 index 6a825fe43..000000000 --- a/packages/tailwindcss-presets/src/aura/toolbar/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/tooltip/index.js b/packages/tailwindcss-presets/src/aura/tooltip/index.js deleted file mode 100644 index 212f76752..000000000 --- a/packages/tailwindcss-presets/src/aura/tooltip/index.js +++ /dev/null @@ -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'] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/tree/index.js b/packages/tailwindcss-presets/src/aura/tree/index.js deleted file mode 100644 index 328391655..000000000 --- a/packages/tailwindcss-presets/src/aura/tree/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/aura/treeselect/index.js b/packages/tailwindcss-presets/src/aura/treeselect/index.js deleted file mode 100644 index 35e02bcd9..000000000 --- a/packages/tailwindcss-presets/src/aura/treeselect/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/treetable/index.js b/packages/tailwindcss-presets/src/aura/treetable/index.js deleted file mode 100644 index b96147457..000000000 --- a/packages/tailwindcss-presets/src/aura/treetable/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/aura/tristatecheckbox/index.js b/packages/tailwindcss-presets/src/aura/tristatecheckbox/index.js deleted file mode 100644 index a4a8b945c..000000000 --- a/packages/tailwindcss-presets/src/aura/tristatecheckbox/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/accordion/index.js b/packages/tailwindcss-presets/src/lara/accordion/index.js deleted file mode 100644 index 24fcb5063..000000000 --- a/packages/tailwindcss-presets/src/lara/accordion/index.js +++ /dev/null @@ -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' - } - } -}; diff --git a/packages/tailwindcss-presets/src/lara/autocomplete/index.js b/packages/tailwindcss-presets/src/lara/autocomplete/index.js deleted file mode 100644 index 229ef0908..000000000 --- a/packages/tailwindcss-presets/src/lara/autocomplete/index.js +++ /dev/null @@ -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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/avatar/index.js b/packages/tailwindcss-presets/src/lara/avatar/index.js deleted file mode 100644 index 9c77beb98..000000000 --- a/packages/tailwindcss-presets/src/lara/avatar/index.js +++ /dev/null @@ -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' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/avatargroup/index.js b/packages/tailwindcss-presets/src/lara/avatargroup/index.js deleted file mode 100644 index d267e0698..000000000 --- a/packages/tailwindcss-presets/src/lara/avatargroup/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - root: { - class: 'flex items-center' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/badge/index.js b/packages/tailwindcss-presets/src/lara/badge/index.js deleted file mode 100644 index 3c4a713f6..000000000 --- a/packages/tailwindcss-presets/src/lara/badge/index.js +++ /dev/null @@ -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' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/badgedirective/index.js b/packages/tailwindcss-presets/src/lara/badgedirective/index.js deleted file mode 100644 index 19b6e2e35..000000000 --- a/packages/tailwindcss-presets/src/lara/badgedirective/index.js +++ /dev/null @@ -1,43 +0,0 @@ -export default { - root: ({ context }) => ({ - class: [ - // Font - 'font-bold', - 'text-xs leading-[normal]', - - // Alignment - 'flex items-center justify-center', - 'text-center', - - // Position - 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right', - - // Size - 'm-0', - { - 'p-0': context.nogutter || context.dot, - 'px-2': !context.nogutter && !context.dot, - 'min-w-[0.5rem] w-2 h-2': context.dot, - 'min-w-[1.5rem] h-6': !context.dot - }, - - // Shape - { - 'rounded-full': context.nogutter || context.dot, - 'rounded-[10px]': !context.nogutter && !context.dot - }, - - // Color - 'text-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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/blockui/index.js b/packages/tailwindcss-presets/src/lara/blockui/index.js deleted file mode 100644 index 0c81a0c93..000000000 --- a/packages/tailwindcss-presets/src/lara/blockui/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default { - root: { - class: 'relative' - }, - mask: { - class: 'bg-black/40' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/breadcrumb/index.js b/packages/tailwindcss-presets/src/lara/breadcrumb/index.js deleted file mode 100644 index 81b23fd0d..000000000 --- a/packages/tailwindcss-presets/src/lara/breadcrumb/index.js +++ /dev/null @@ -1,64 +0,0 @@ -export default { - root: { - class: [ - // Shape - 'rounded-md', - - // Spacing - 'p-4', - - // Color - 'bg-surface-0 dark:bg-surface-700', - 'border border-surface-200 dark:border-surface-700', - - // 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 focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // 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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/button/index.js b/packages/tailwindcss-presets/src/lara/button/index.js deleted file mode 100644 index 9fdc03ef3..000000000 --- a/packages/tailwindcss-presets/src/lara/button/index.js +++ /dev/null @@ -1,234 +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-3': props.size === null, - 'text-sm py-2 px-3': props.size === 'small', - 'text-xl py-3 px-4': props.size === 'large' - }, - { - 'w-12 p-0 py-3': 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-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'border border-surface-500 dark:border-surface-400': 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/20': 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/20': 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/20 ': 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/20': 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/20': 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/20': 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', - - // 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/20': 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/20': (props.text || props.outlined) && props.severity === null && !props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (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-400/50 dark:focus:ring-green-300/50': props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (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-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (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-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (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-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (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-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (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-bold', - { - '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 }] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/calendar/index.js b/packages/tailwindcss-presets/src/lara/calendar/index.js deleted file mode 100644 index ad0b15641..000000000 --- a/packages/tailwindcss-presets/src/lara/calendar/index.js +++ /dev/null @@ -1,646 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'max-w-full', - 'relative', - - // Misc - { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } - ] - }), - input: ({ props, parent }) => ({ - class: [ - // Display - 'flex flex-auto', - - // Font - 'leading-none', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Spacing - 'm-0 p-3', - - // Shape - 'appearance-none', - { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' }, - { 'rounded-l-md flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' }, - { 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' }, - - // Transitions - 'transition-colors', - 'duration-200', - - // States - { 'hover:border-primary-hover': !props.invalid }, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', - - // 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', - - // Shape - 'rounded-r-md', - - // Size - 'px-4 py-3 leading-none', - - // 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' - ] - } - }, - panel: ({ props }) => ({ - class: [ - // Display & Position - { - absolute: !props.inline, - 'inline-block': props.inline - }, - - // Size - { 'w-auto p-2 ': !props.inline }, - { 'min-w-[80vw] w-auto p-2 ': props.touchUI }, - { 'p-2 min-w-full': props.inline }, - - // Shape - 'border rounded-lg', - { - 'shadow-md': !props.inline - }, - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - - //misc - { 'overflow-x-auto': props.inline } - ] - }), - datepickerMask: { - class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90'] - }, - header: { - class: [ - //Font - 'font-semibold', - - // Flexbox and Alignment - 'flex items-center justify-between', - - // Spacing - 'p-2', - 'm-0', - - // Shape - 'border-b', - 'rounded-t-md', - - // Colors - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700' - ] - }, - previousbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - title: { - class: [ - // Text - 'leading-8', - 'mx-auto my-0' - ] - }, - monthTitle: { - class: [ - // Font - 'text-base leading-[normal]', - 'font-semibold', - - // Colors - 'text-surface-700 dark:text-white/80', - - // Transitions - 'transition duration-200', - - // Spacing - 'p-2', - 'm-0 mr-2', - - // States - 'hover:text-primary-500 dark:hover:text-primary-400', - - // Misc - 'cursor-pointer' - ] - }, - yearTitle: { - class: [ - // Font - 'text-base leading-[normal]', - 'font-semibold', - - // Colors - 'text-surface-700 dark:text-white/80', - - // Transitions - 'transition duration-200', - - // Spacing - 'p-2', - 'm-0', - - // States - 'hover:text-primary-500 dark:hover:text-primary-400', - - // Misc - 'cursor-pointer' - ] - }, - nextbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - table: { - class: [ - // Font - 'text-base leading-none', - // Size & Shape - 'border-collapse', - 'w-full', - - // Spacing - 'm-0 my-2' - ] - }, - tableheadercell: { - class: [ - // Spacing - 'p-0 md:p-2' - ] - }, - weekheader: { - class: ['leading-[normal]', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default'] - }, - weeknumber: { - class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default'] - }, - weekday: { - class: [ - // Colors - 'text-surface-500 dark:text-white/60' - ] - }, - day: { - class: [ - // Spacing - 'p-0 md:p-2' - ] - }, - weeklabelcontainer: ({ context }) => ({ - class: [ - // Flexbox and Alignment - 'flex items-center justify-center', - 'mx-auto', - - // Shape & Size - 'w-10 h-10', - 'rounded-full', - 'border-transparent border', - - // Colors - { - 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, - 'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled - }, - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-800/80': !context.selected && !context.disabled, - 'hover:bg-primary-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-10 h-10', - 'rounded-full', - 'border-transparent border', - - // Colors - { - 'text-primary': context.date.today, - 'text-surface-600 dark:text-white/70 bg-transparent': !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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, - 'hover:bg-primary-highlight-hover': context.selected && !context.disabled - }, - { - 'opacity-60 cursor-default': context.disabled, - 'cursor-pointer': !context.disabled - } - ] - }), - monthpicker: { - class: [ - // Spacing - 'my-2' - ] - }, - month: ({ context }) => ({ - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-1/3', - 'p-2', - - // Shape - 'rounded-md', - - // Colors - { - 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, - 'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled - }, - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, - 'hover:bg-primary-highlight-hover': context.selected && !context.disabled - }, - - // Misc - 'cursor-pointer' - ] - }), - yearpicker: { - class: [ - // Spacing - 'my-2' - ] - }, - year: ({ context }) => ({ - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-1/3', - 'p-2', - - // Shape - 'rounded-md', - - // Colors - { - 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled, - 'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled - }, - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled, - 'hover:bg-primary-highlight-hover': context.selected && !context.disabled - }, - - // Misc - 'cursor-pointer' - ] - }), - timepicker: { - class: [ - // Flexbox - 'flex', - 'justify-center items-center', - - // Borders - 'border-t-1', - 'border-solid border-surface-200', - - // Spacing - 'p-2' - ] - }, - separatorcontainer: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - separator: { - class: [ - // Text - 'text-xl' - ] - }, - hourpicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - minutepicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - secondPicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - ampmpicker: { - class: [ - // Flexbox and Alignment - 'flex', - 'items-center', - 'flex-col', - - // Spacing - 'px-2' - ] - }, - incrementbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - decrementbutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - 'p-0 m-0', - - // Shape - 'rounded-full', - - // Colors - 'text-surface-600 dark:text-white/70', - 'border-0', - 'bg-transparent', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - - // Misc - 'cursor-pointer overflow-hidden' - ] - }, - groupcontainer: { - class: [ - // Flexbox - 'flex' - ] - }, - group: { - class: [ - // Flexbox and Sizing - 'flex-1', - - // Borders - 'border-l', - 'border-surface-200', - - // Spacing - 'pr-0.5', - 'pl-0.5', - 'pt-0', - 'pb-0', - - // Pseudo-Classes - 'first:pl-0', - 'first:border-l-0' - ] - }, - buttonbar: { - class: [ - // Flexbox - 'flex justify-between items-center', - - // Spacing - 'py-3 px-0', - - // Shape - 'border-t border-surface-200 dark:border-surface-700' - ] - }, - todaybutton: { - root: { - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Spacing - 'px-4 py-3 leading-none', - - // Shape - 'rounded-md', - - // Colors - 'bg-transparent border-transparent', - 'text-primary', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-300/20', - - // Misc - 'cursor-pointer' - ] - } - }, - clearbutton: { - root: { - class: [ - // Flexbox and Alignment - 'inline-flex items-center justify-center', - - // Spacing - 'px-4 py-3 leading-none', - - // Shape - 'rounded-md', - - // Colors - 'bg-transparent border-transparent', - 'text-primary', - - // Transitions - 'transition-colors duration-200 ease-in-out', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-300/20', - - // Misc - 'cursor-pointer' - ] - } - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/card/index.js b/packages/tailwindcss-presets/src/lara/card/index.js deleted file mode 100644 index d4832f650..000000000 --- a/packages/tailwindcss-presets/src/lara/card/index.js +++ /dev/null @@ -1,37 +0,0 @@ -export default { - root: { - class: [ - //Shape - 'rounded-md', - 'shadow-md', - - //Color - 'bg-surface-0 dark:bg-surface-900', - 'text-surface-700 dark:text-surface-0' - ] - }, - body: { - class: 'p-5' - }, - title: { - class: 'text-2xl font-bold mb-2' - }, - subtitle: { - class: [ - //Font - 'font-normal', - - //Spacing - 'mb-2', - - //Color - 'text-surface-600 dark:text-surface-0/60' - ] - }, - content: { - class: 'py-5' // Vertical padding. - }, - footer: { - class: 'pt-5' // Top padding. - } -}; diff --git a/packages/tailwindcss-presets/src/lara/carousel/index.js b/packages/tailwindcss-presets/src/lara/carousel/index.js deleted file mode 100644 index c4ac897b3..000000000 --- a/packages/tailwindcss-presets/src/lara/carousel/index.js +++ /dev/null @@ -1,149 +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', - - // 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', - - // 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-0', - - // Transitions - 'transition duration-200', - - // Focus Styles - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // 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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/cascadeselect/index.js b/packages/tailwindcss-presets/src/lara/cascadeselect/index.js deleted file mode 100644 index c599884fc..000000000 --- a/packages/tailwindcss-presets/src/lara/cascadeselect/index.js +++ /dev/null @@ -1,207 +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-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - label: ({ props }) => ({ - class: [ - //Font - 'leading-[normal]', - - // Flex & Alignment - ' flex flex-auto', - - // Sizing and Spacing - 'w-[1%]', - 'p-3', - - //Shape - 'rounded-none', - - // Color and Background - 'bg-transparent', - 'border-0', - { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }), - dropdownbutton: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-700', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active) - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, - 'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active - }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - content: { - class: [ - 'relative', - - // Flexbox - 'flex', - 'items-center', - - // Spacing - 'py-3', - 'px-5', - - // Misc - 'no-underline', - 'overflow-hidden', - 'cursor-pointer', - 'select-none' - ] - }, - groupicon: { - class: [ - // Alignment - 'ml-auto' - ] - }, - sublist: { - class: [ - // Size - 'w-full', - - // Spacing - 'py-1', - 'm-0', - 'list-none', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Position - 'static sm:absolute', - 'z-10', - - // Color - 'bg-surface-0 dark:bg-surface-700' - ] - }, - separator: { - class: 'border-t border-surface-200 dark:border-surface-600 my-1' - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/checkbox/index.js b/packages/tailwindcss-presets/src/lara/checkbox/index.js deleted file mode 100644 index 7db60b1b7..000000000 --- a/packages/tailwindcss-presets/src/lara/checkbox/index.js +++ /dev/null @@ -1,101 +0,0 @@ -export default { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked && !props.invalid, - 'border-primary bg-primary': context.checked - }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked && !props.invalid, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/chip/index.js b/packages/tailwindcss-presets/src/lara/chip/index.js deleted file mode 100644 index c6ff8795a..000000000 --- a/packages/tailwindcss-presets/src/lara/chip/index.js +++ /dev/null @@ -1,45 +0,0 @@ -export default { - root: { - class: [ - // Flexbox - 'inline-flex items-center', - - // Spacing - 'px-3', - - // Shape - 'rounded-[1.14rem]', - - // Colors - 'text-surface-700 dark:text-white/70', - 'bg-surface-200 dark:bg-surface-700' - ] - }, - label: { - class: 'leading-6 my-1.5 mx-0' - }, - icon: { - class: 'leading-6 mr-2' - }, - image: { - class: ['w-9 h-9 -ml-3 mr-2', 'rounded-full'] - }, - removeIcon: { - class: [ - // Shape - 'rounded-md leading-6', - - // Spacing - 'ml-2', - - // Size - 'w-4 h-4', - - // Transition - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/chips/index.js b/packages/tailwindcss-presets/src/lara/chips/index.js deleted file mode 100644 index b14f4a12e..000000000 --- a/packages/tailwindcss-presets/src/lara/chips/index.js +++ /dev/null @@ -1,117 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'flex', - { - 'opacity-60 select-none pointer-events-none cursor-default': props.disabled - } - ] - }), - container: ({ state, props, parent }) => ({ - class: [ - // Font - 'text-base leading-none', - - // Flex - 'flex items-center flex-wrap gap-2', - - // Spacing - 'm-0 py-[0.375rem] px-3', - - // Size - 'w-full', - 'min-h-[2.877rem]', - - // Shape - 'list-none', - 'rounded-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { 'hover:border-primary': !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 }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 }, - - // Transition - 'transition-colors duration-200', - - // Misc - 'cursor-text overflow-hidden', - 'appearance-none' - ] - }), - - inputtoken: { - class: ['py-1.5 px-0', 'inline-flex flex-auto'] - }, - input: { - class: [ - // Font - 'text-base leading-[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: [ - // Flexbox - 'inline-flex items-center', - - // Spacing - 'py-1.5 px-3', - - // Shape - 'rounded-[1.14rem]', - - // Colors - 'text-surface-700 dark:text-white/70', - 'bg-surface-200 dark:bg-surface-700' - ] - }, - label: { - class: 'leading-[normal]' - }, - removeTokenIcon: { - class: [ - // Shape - 'rounded-md leading-6', - - // Spacing - 'ml-2', - - // Size - 'w-4 h-4', - - // Transition - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/colorpicker/index.js b/packages/tailwindcss-presets/src/lara/colorpicker/index.js deleted file mode 100644 index 1b454681c..000000000 --- a/packages/tailwindcss-presets/src/lara/colorpicker/index.js +++ /dev/null @@ -1,123 +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 ', - - // Spacing - 'm-0', - 'p-3', - - // Size & Shape - 'rounded-lg w-8 h-8', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // States - 'hover:border-primary', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition-colors duration-200', - - // Misc - 'cursor-pointer' - ] - }, - panel: ({ props }) => ({ - class: [ - // Position & Size - { - 'relative h-[166px] w-[193px]': props.inline, - 'absolute h-[166px] w-[193px]': !props.inline - }, - - // Shape - 'shadow-md border', - - // Colors - 'bg-surface-800 border-surface-900 dark:border-surface-600' - ] - }), - selector: { - class: [ - // Position - 'absolute top-[8px] left-[8px]', - - // Size - 'h-[150px] w-[150px]' - ] - }, - color: { - class: [ - // Size - 'h-[150px] w-[150px]' - ], - style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' - }, - colorhandle: { - class: [ - 'absolute', - - // Shape - 'rounded-full border border-solid', - - // Size - 'h-[10px] w-[10px]', - - // Spacing - '-ml-[5px] -mt-[5px]', - - // Colors - 'border-white', - - // Misc - 'cursor-pointer opacity-85' - ] - }, - hue: { - class: [ - // Position - 'absolute top-[8px] left-[167px]', - - // Size - 'h-[150px] w-[17px]', - - // Opacity - 'opacity-85' - ], - style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' - }, - huehandle: { - class: [ - // Position - 'absolute left-0 -ml-[2px] -mt-[5px]', - - // Size - 'h-[10px] w-[21px]', - - // Shape - 'border-solid border-2', - - // Misc - 'cursor-pointer opacity-85' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/confirmpopup/index.js b/packages/tailwindcss-presets/src/lara/confirmpopup/index.js deleted file mode 100644 index b0f21c215..000000000 --- a/packages/tailwindcss-presets/src/lara/confirmpopup/index.js +++ /dev/null @@ -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 - 'dark:border', - 'dark:border-surface-700', - 'bg-surface-0 dark:bg-surface-800', - '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-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-surface-0 dark:before:border-b-surface-800' - ] - }, - content: { - class: 'p-5 items-center flex' - }, - icon: { - class: 'text-2xl mr-4' - }, - 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-800', - 'text-surface-700 dark:text-surface-0/80' - ] - }, - rejectbutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'px-4 py-3 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-400/50 dark:focus:ring-primary-300/50' - ] - } - }, - acceptbutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'px-4 py-3 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-400/50 dark:focus:ring-primary-300/50' - ] - } - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/contextmenu/index.js b/packages/tailwindcss-presets/src/lara/contextmenu/index.js deleted file mode 100644 index ce8adb3ca..000000000 --- a/packages/tailwindcss-presets/src/lara/contextmenu/index.js +++ /dev/null @@ -1,124 +0,0 @@ -export default { - root: { - class: [ - // Sizing and Shape - 'min-w-[12rem]', - 'rounded-md', - 'shadow-md', - - // Spacing - 'py-2', - - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'text-surface-700 dark:text-white/80', - 'dark:border dark:border-surface-700' - ] - }, - menu: { - class: [ - // Spacings and Shape - 'list-none', - 'm-0', - 'p-0', - 'outline-none' - ] - }, - menuitem: { - class: 'relative' - }, - content: ({ context }) => ({ - class: [ - //Shape - 'rounded-none', - // 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 dark:bg-surface-600/90': 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-surface-600/80': !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-3', - 'px-5', - - // 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 - 'py-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-700' - ] - }), - 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/datatable/index.js b/packages/tailwindcss-presets/src/lara/datatable/index.js deleted file mode 100644 index aab59144c..000000000 --- a/packages/tailwindcss-presets/src/lara/datatable/index.js +++ /dev/null @@ -1,1166 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'relative', - - // Flex & Alignment - { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' }, - - // Size - { 'h-full': props.scrollable && props.scrollHeight === 'flex' } - ] - }), - loadingoverlay: { - class: [ - // Position - 'absolute', - 'top-0 left-0', - 'z-20', - - // Flex & Alignment - 'flex items-center justify-center', - - // Size - 'w-full h-full', - - // Color - 'bg-surface-100/40 dark:bg-surface-800/40', - - // Transition - 'transition duration-200' - ] - }, - loadingicon: { - class: 'w-8 h-8 animate-spin' - }, - wrapper: ({ props }) => ({ - class: [ - { relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' }, - - // Size - { 'h-full': props.scrollable && props.scrollHeight === 'flex' } - ] - }), - header: ({ props }) => ({ - class: [ - 'font-bold', - - // Shape - props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0', - - // Spacing - 'p-4', - - // Color - 'bg-surface-50 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80' - ] - }), - table: { - class: 'w-full border-spacing-0 border-separate' - }, - thead: ({ context }) => ({ - class: [ - { - 'bg-surface-50 dark:bg-surface-800 top-0 z-40 sticky': context.scrollable - } - ] - }), - tbody: ({ instance, context }) => ({ - class: [ - { - 'sticky z-20': instance.frozenRow && context.scrollable - }, - 'bg-surface-50 dark:bg-surface-800' - ] - }), - tfoot: ({ context }) => ({ - class: [ - { - 'bg-surface-50 bottom-0 z-0': context.scrollable - } - ] - }), - footer: { - class: [ - 'font-bold', - - // Shape - 'border-t-0 border-b border-x-0', - - // Spacing - 'p-4', - - // Color - 'bg-surface-50 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80' - ] - }, - column: { - headercell: ({ context, props }) => ({ - class: [ - 'font-bold', - - // Position - { 'sticky z-20 border-b': props.frozen || props.frozen === '' }, - - { relative: context.resizable }, - - // Alignment - 'text-left', - - // Shape - { 'first:border-l border-y border-r': context?.showGridlines }, - 'border-0 border-b border-solid', - - // Spacing - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', - - // Color - (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700 ', - - // States - { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - { 'transition duration-200': props.sortable === '' || props.sortable }, - - // Misc - { 'cursor-pointer': props.sortable === '' || props.sortable }, - { - 'overflow-hidden space-nowrap border-y bg-clip-padding': context.resizable // Resizable - } - ] - }), - headercontent: { - class: 'flex items-center' - }, - sort: ({ context }) => ({ - class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80'] - }), - bodycell: ({ props, context, state, parent }) => ({ - class: [ - //Position - { 'sticky box-border border-b': parent.instance.frozenRow }, - { 'sticky box-border border-b z-20': props.frozen || props.frozen === '' }, - - // Alignment - 'text-left', - - // Shape - 'border-0 border-b border-solid', - { 'first:border-l border-r border-b': context?.showGridlines }, - { 'bg-surface-0 dark:bg-surface-800': parent.instance.frozenRow || props.frozen || props.frozen === '' }, - - // Spacing - { 'p-2': context?.size === 'small' && !state['d_editing'] }, - { 'p-5': context?.size === 'large' && !state['d_editing'] }, - { 'p-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] }, - { 'py-[0.6rem] px-2': state['d_editing'] }, - - // Color - 'border-surface-200 dark:border-surface-700' - ] - }), - footercell: ({ context }) => ({ - class: [ - // Font - 'font-bold', - - // Alignment - 'text-left', - - // Shape - 'border-0 border-b border-solid', - { 'border-x border-y': context?.showGridlines }, - - // Spacing - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', - - // Color - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80', - 'bg-surface-50 dark:bg-surface-800' - ] - }), - sorticon: ({ context }) => ({ - class: ['ml-2', context.sorted ? 'text-primary-highlight-inverse' : 'text-surface-700 dark:text-white/70'] - }), - sortbadge: { - class: [ - // Flex & Alignment - 'flex items-center justify-center align-middle', - - // Shape - 'rounded-full', - - // Size - 'w-[1.143rem] leading-[1.143rem]', - - // Spacing - 'ml-2', - - // Color - 'text-primary-highlight-inverse', - 'bg-primary-highlight' - ] - }, - columnfilter: { - class: 'inline-flex items-center ml-auto' - }, - filteroverlay: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Size - 'min-w-[12.5rem]', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - filtermatchmodedropdown: { - root: ({ state }) => ({ - class: [ - // Display and Position - 'flex', - 'relative', - - // Spacing - 'my-2', - - // Shape - 'w-full', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary', - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none' - ] - }) - }, - filterrowitems: { - class: 'm-0 p-0 py-3 list-none' - }, - filterrowitem: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'bg-surface-0 dark:bg-surface-800 text-surface-700 dark:text-white/80': !context?.highlighted }, - { 'bg-primary-highlight text-primary-highlight-inverse': context?.highlighted }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context?.highlighted }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': !context?.highlighted }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - filteroperator: { - class: [ - // Spacing - 'px-5 py-3', - - // Shape - 'border-b border-solid', - 'rounded-t-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'border-surface-200 dark:border-surface-800', - 'bg-surface-0 dark:bg-surface-700' - ] - }, - filteroperatordropdown: { - root: ({ state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'w-full', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary', - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none' - ] - }), - input: ({ props }) => ({ - class: [ - //Font - 'leading-[normal]', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Sizing and Spacing - 'w-[1%]', - 'p-3', - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }), - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-highlight text-primary-highlight-inverse': !context.focused && context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }) - }, - filterconstraint: { - class: [ - // Spacing - 'py-3 px-5', - - // Shape - 'border-b border-solid', - - // Color - 'border-surface-200 dark:border-surface-700' - ] - }, - filteraddrule: { - class: 'py-3 px-5' - }, - filteraddrulebutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3 w-full', - - // Shape - 'rounded-md', - - 'bg-transparent border-transparent', - 'text-primary', - 'hover:bg-primary-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }, - label: { - class: 'flex-auto grow-0' - }, - icon: { - class: 'mr-2' - } - }, - filterremovebutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3 w-full mt-2', - - // Shape - 'rounded-md', - - 'bg-transparent border-transparent', - 'text-red-500 dark:text-red-400', - 'hover:bg-red-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - }, - label: { - class: 'flex-auto grow-0' - }, - icon: { - class: 'mr-2' - } - }, - filterbuttonbar: { - class: [ - // Flex & Alignment - 'flex items-center justify-between', - - // Space - 'py-3 px-5' - ] - }, - filterclearbutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3', - - // Shape - 'rounded-md', - - 'text-primary-500 border border-primary', - 'hover:bg-primary-300/20', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - } - }, - filterapplybutton: { - root: { - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'text-sm py-2 px-3', - - // Shape - 'rounded-md', - - 'text-primary-inverse', - 'bg-primary', - 'hover:bg-primary-hover hover:border-primary-hover', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer overflow-hidden select-none' - ] - } - }, - filtermenubutton: ({ context }) => ({ - class: [ - 'relative', - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Size - 'w-8 h-8', - - // Spacing - 'ml-2', - - // Shape - 'rounded-full', - - // Color - { 'bg-primary-highlight text-highlight-inverse': context.active }, - 'dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-800', - - // States - 'hover:text-surface-700 hover:bg-surface-300/20', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'cursor-pointer no-underline overflow-hidden' - ] - }), - headerfilterclearbutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Shape - 'border-none', - - // Spacing - 'm-0 p-0 ml-2', - - // Color - 'bg-transparent', - - // Misc - 'cursor-pointer no-underline overflow-hidden select-none', - { - invisible: !context.hidden - } - ] - }), - rowtoggler: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Spacing - 'm-0 p-0', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-500 dark:text-white/70', - 'bg-transparent', - 'focus-visible:outline-none focus-visible:outline-offset-0', - 'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - columnresizer: { - class: [ - 'block', - - // Position - 'absolute top-0 right-0', - - // Sizing - 'w-2 h-full', - - // Spacing - 'm-0 p-0', - - // Color - 'border border-transparent', - - // Misc - 'cursor-col-resize' - ] - }, - rowreordericon: { - class: 'cursor-move' - }, - roweditorinitbutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - roweditorsavebutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - roweditorcancelbutton: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-700 dark:text-white/70', - 'border-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 'hover:text-surface-700 hover:bg-surface-300/20', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - rowRadiobutton: { - root: { - class: [ - 'relative', - - // Flexbox & Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-[1.571rem] h-[1.571rem]', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props }) => ({ - class: [ - // Flexbox - 'flex justify-center items-center', - - // Size - 'w-[1.571rem] h-[1.571rem]', - - // Shape - 'border-2', - 'rounded-full', - - // Transition - 'transition duration-200 ease-in-out', - - // Colors - { - 'text-surface-700 dark:text-white/80': !props.modelValue, - 'bg-surface-0 dark:bg-surface-900': !props.modelValue, - 'border-surface-300 dark:border-surface-700': !props.modelValue, - 'border-primary dark:border-primary': props.modelValue, - 'bg-primary dark:bg-primary': props.modelValue - }, - - // States - { - 'peer-hover:border-primary': !props.disabled, - 'peer-hover:border-primary-hover peer-hover:bg-primary-hover': !props.disabled && props.modelValue, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'opacity-60 cursor-default': props.disabled - } - ] - }), - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: ({ props }) => ({ - class: [ - 'block', - - // Shape - 'rounded-full', - - // Size - 'w-[0.857rem] h-[0.857rem]', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - - // Conditions - { - 'backface-hidden scale-10 invisible': !props.modelValue, - 'transform visible scale-[1.1]': props.modelValue - }, - - // Transition - 'transition duration-200' - ] - }) - }, - headercheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - rowCheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } - }, - bodyrow: ({ context, props }) => ({ - class: [ - // Color - 'dark:text-white/80', - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected }, - { 'font-bold bg-surface-0 dark:bg-surface-800 z-20': props.frozenRow }, - { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-800 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-900/50': context.stripedRows }, - - // State - { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50': context.selectable }, - { 'hover:bg-surface-300/20 hover:text-surface-600': props.selectionMode && !context.selected }, - - // Transition - { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }, - - // Misc - { 'cursor-pointer': props.selectionMode } - ] - }), - rowexpansion: { - class: 'bg-surface-0 dark:bg-surface-800 text-surface-600 dark:text-white/80' - }, - rowgroupheader: { - class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800'] - }, - rowgroupfooter: { - class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800'] - }, - rowgrouptoggler: { - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - 'text-left', - - // Spacing - 'm-0 p-0', - - // Size - 'w-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-500 dark:text-white/70', - 'bg-transparent', - 'focus-visible:outline-none focus-visible:outline-offset-0', - 'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - rowgrouptogglericon: { - class: 'inline-block w-4 h-4' - }, - resizehelper: { - class: 'absolute hidden w-[2px] z-20 bg-primary' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/dataview/index.js b/packages/tailwindcss-presets/src/lara/dataview/index.js deleted file mode 100644 index 2eed11b05..000000000 --- a/packages/tailwindcss-presets/src/lara/dataview/index.js +++ /dev/null @@ -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-800' - ] - }, - grid: { - class: [ - // flex - 'flex flex-wrap', - - // Spacing - 'ml-0 mr-0 mt-0', - - // Color - 'bg-surface-0 dark:bg-surface-800' - ] - }, - header: { - class: [ - 'font-bold', - - // Spacing - 'p-4', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-surface-50 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700 border-y' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/dataviewlayoutoptions/index.js b/packages/tailwindcss-presets/src/lara/dataviewlayoutoptions/index.js deleted file mode 100644 index 18584aecd..000000000 --- a/packages/tailwindcss-presets/src/lara/dataviewlayoutoptions/index.js +++ /dev/null @@ -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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - 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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/deferred/index.js b/packages/tailwindcss-presets/src/lara/deferred/index.js deleted file mode 100644 index 2064371ae..000000000 --- a/packages/tailwindcss-presets/src/lara/deferred/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - root: {} -}; diff --git a/packages/tailwindcss-presets/src/lara/dialog/index.js b/packages/tailwindcss-presets/src/lara/dialog/index.js deleted file mode 100644 index adb8f1e6e..000000000 --- a/packages/tailwindcss-presets/src/lara/dialog/index.js +++ /dev/null @@ -1,235 +0,0 @@ -export default { - root: ({ state }) => ({ - class: [ - // Shape - 'rounded-lg', - 'shadow-lg', - 'border-0', - - // Size - 'max-h-[90vh]', - 'w-[50vw]', - 'm-0', - - // Color - 'dark:border', - '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 - 'border-t-0', - 'rounded-tl-lg', - 'rounded-tr-lg', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-surface-0/80' - ] - }, - title: { - class: ['font-bold text-lg'] - }, - 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-8 h-8', - - // Shape - 'border-0', - 'rounded-full', - - // Colors - 'text-surface-500', - 'bg-transparent', - - // Transitions - 'transition duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'overflow-hidden' - ] - }, - maximizablebutton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'flex items-center justify-center', - - // Size and Spacing - 'mr-2', - 'last:mr-0', - 'w-8 h-8', - - // Shape - 'border-0', - 'rounded-full', - - // Colors - 'text-surface-500', - 'bg-transparent', - - // Transitions - 'transition duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'overflow-hidden' - ] - }, - closeButtonIcon: { - class: [ - // 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-8', - 'pt-0', - - // Shape - { - grow: state.maximized, - 'rounded-bl-lg': !instance.$slots.footer, - 'rounded-br-lg': !instance.$slots.footer - }, - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-surface-0/80', - - // 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-800', - 'text-surface-700 dark:text-surface-0/80' - ] - }, - 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, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': 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' - }; - } -}; diff --git a/packages/tailwindcss-presets/src/lara/divider/index.js b/packages/tailwindcss-presets/src/lara/divider/index.js deleted file mode 100644 index b4406974e..000000000 --- a/packages/tailwindcss-presets/src/lara/divider/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/dock/index.js b/packages/tailwindcss-presets/src/lara/dock/index.js deleted file mode 100644 index 5a33adedf..000000000 --- a/packages/tailwindcss-presets/src/lara/dock/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/dropdown/index.js b/packages/tailwindcss-presets/src/lara/dropdown/index.js deleted file mode 100644 index 34551930e..000000000 --- a/packages/tailwindcss-presets/src/lara/dropdown/index.js +++ /dev/null @@ -1,278 +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-900', - - 'border border-surface-300', - { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' }, - { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' }, - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - input: ({ props, 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%]', - 'p-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-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // 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', - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - { 'pointer-events-none cursor-default': context.disabled }, - { 'cursor-pointer': !context.disabled }, - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - itemgroup: { - class: [ - //Font - 'font-bold', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-600/80', - - // Misc - 'cursor-auto' - ] - }, - emptymessage: { - class: [ - // Font - 'leading-none', - - // Spacing - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-transparent' - ] - }, - header: { - class: [ - // Spacing - 'py-3 px-5', - 'm-0', - - //Shape - 'border-b', - 'rounded-tl-md', - 'rounded-tr-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-100 dark:bg-surface-800', - 'border-surface-300 dark:border-surface-700' - ] - }, - filtercontainer: { - class: 'relative' - }, - filterinput: { - class: [ - // Font - 'leading-[normal]', - - // Sizing - 'pr-7 py-3 px-3', - '-mr-7', - 'w-full', - - //Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - - // Shape - 'border', - 'rounded-lg', - 'appearance-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary', - 'focus:ring focus:outline-none focus:outline-offset-0', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'appearance-none' - ] - }, - filtericon: { - class: ['absolute', 'top-1/2 right-3', '-mt-2'] - }, - clearicon: { - class: [ - // Color - 'text-surface-500', - - // Position - 'absolute', - 'top-1/2', - 'right-12', - - // Spacing - '-mt-2' - ] - }, - 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/fieldset/index.js b/packages/tailwindcss-presets/src/lara/fieldset/index.js deleted file mode 100644 index 3b70c8043..000000000 --- a/packages/tailwindcss-presets/src/lara/fieldset/index.js +++ /dev/null @@ -1,84 +0,0 @@ -export default { - root: { - class: [ - 'block', - - // Spacing - 'px-4 pt-2 py-3', - 'inline-size-min', - - // 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-bold', - 'leading-none', - - //Spacing - { 'p-0': props.toggleable, 'p-5': !props.toggleable }, - - // Shape - 'rounded-md', - - // Color - 'text-surface-700 dark:text-surface-0/80', - 'border border-surface-200 dark:border-surface-700', - 'bg-surface-50 dark:bg-surface-900', - - // Transition - 'transition-none', - - // States - { 'hover:bg-surface-100 hover:border-surface-200 hover:text-surface-900 dark:hover:text-surface-0/80 dark:hover:bg-surface-800/80': props.toggleable } - ] - }), - toggler: ({ props }) => ({ - class: [ - // Alignments - 'flex items-center justify-center', - 'relative', - - //Spacing - { 'p-5': 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-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': props.toggleable }, - - // Misc - { - 'transition-none cursor-pointer overflow-hidden select-none': props.toggleable - } - ] - }), - togglerIcon: { - class: 'mr-2 inline-block' - }, - legendTitle: { - class: 'flex items-center justify-center leading-none' - }, - content: { - class: 'p-5' - }, - 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/fileupload/index.js b/packages/tailwindcss-presets/src/lara/fileupload/index.js deleted file mode 100644 index 097ee48cf..000000000 --- a/packages/tailwindcss-presets/src/lara/fileupload/index.js +++ /dev/null @@ -1,173 +0,0 @@ -export default { - input: { - class: 'hidden' - }, - buttonbar: { - class: [ - // Flexbox - 'flex', - 'flex-wrap', - - // Colors - 'bg-surface-50', - 'dark:bg-surface-800', - 'text-surface-700', - 'dark:text-white/80', - - // Spacing - 'p-5', - '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-3', - - // Shape - 'rounded-md', - - // Font - 'leading-[normal]', - 'font-bold', - - // Colors - 'text-primary-inverse', - 'bg-primary', - 'border-primary', - - // States - 'hover:bg-primary-hover', - - // 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-8', - - // Borders - 'border', - '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' - ] - } - } -}; diff --git a/packages/tailwindcss-presets/src/lara/floatlabel/index.js b/packages/tailwindcss-presets/src/lara/floatlabel/index.js deleted file mode 100644 index 557808fee..000000000 --- a/packages/tailwindcss-presets/src/lara/floatlabel/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/galleria/index.js b/packages/tailwindcss-presets/src/lara/galleria/index.js deleted file mode 100644 index fe7f785db..000000000 --- a/packages/tailwindcss-presets/src/lara/galleria/index.js +++ /dev/null @@ -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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50' - ] - }, - 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50' - ] - }, - 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50' - ] - }, - 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50' - ] - }), - 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50' - ] - }), - 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/global.js b/packages/tailwindcss-presets/src/lara/global.js deleted file mode 100644 index 42552db83..000000000 --- a/packages/tailwindcss-presets/src/lara/global.js +++ /dev/null @@ -1,90 +0,0 @@ -export default { - css: ` - *[data-pd-ripple="true"]{ - overflow: hidden; - position: relative; - } - span[data-p-ink-active="true"]{ - animation: ripple 0.4s linear; - } - @keyframes ripple { - 100% { - opacity: 0; - transform: scale(2.5); - } - } - - .progress-spinner-circle { - stroke-dasharray: 89, 200; - stroke-dashoffset: 0; - animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; - stroke-linecap: round; - } - - @keyframes p-progress-spinner-dash{ - 0% { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -35px; - } - 100% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -124px; - } - } - @keyframes p-progress-spinner-color { - 100%, 0% { - stroke: #ff5757; - } - 40% { - stroke: #696cff; - } - 66% { - stroke: #1ea97c; - } - 80%, 90% { - stroke: #cc8925; - } - } - - .progressbar-value-animate::after { - will-change: left, right; - animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - } - .progressbar-value-animate::before { - will-change: left, right; - animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; - } - @keyframes p-progressbar-indeterminate-anim { - 0% { - left: -35%; - right: 100%; - } - 60% { - left: 100%; - right: -90%; - } - 100% { - left: 100%; - right: -90%; - } - } - - .p-fadein { - animation: p-fadein 250ms linear; - } - - @keyframes p-fadein { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } -` -}; diff --git a/packages/tailwindcss-presets/src/lara/iconfield/index.js b/packages/tailwindcss-presets/src/lara/iconfield/index.js deleted file mode 100644 index 554c02edf..000000000 --- a/packages/tailwindcss-presets/src/lara/iconfield/index.js +++ /dev/null @@ -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-[normal]', - '[&>*: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' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/image/index.js b/packages/tailwindcss-presets/src/lara/image/index.js deleted file mode 100644 index e6d6f9fed..000000000 --- a/packages/tailwindcss-presets/src/lara/image/index.js +++ /dev/null @@ -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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // 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 focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/index.js b/packages/tailwindcss-presets/src/lara/index.js deleted file mode 100644 index 49eb5e796..000000000 --- a/packages/tailwindcss-presets/src/lara/index.js +++ /dev/null @@ -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 -}; diff --git a/packages/tailwindcss-presets/src/lara/inlinemessage/index.js b/packages/tailwindcss-presets/src/lara/inlinemessage/index.js deleted file mode 100644 index 5e0faf7d4..000000000 --- a/packages/tailwindcss-presets/src/lara/inlinemessage/index.js +++ /dev/null @@ -1,36 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'inline-flex items-center justify-center align-top gap-2', - 'p-3 m-0 rounded-md dark: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-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn', - 'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error' - }, - { - 'dark:border-blue-400': props.severity == 'info', - 'dark:border-green-400': props.severity == 'success', - 'dark:border-orange-400': props.severity == 'warn', - 'dark:border-red-400': props.severity == 'error' - }, - { - 'text-blue-700 dark:text-blue-300': props.severity == 'info', - 'text-green-700 dark:text-green-300': props.severity == 'success', - 'text-orange-700 dark:text-orange-300': props.severity == 'warn', - 'text-red-700 dark:text-red-300': props.severity == 'error' - } - ] - }), - icon: { - class: 'text-base' - }, - text: { - class: [ - // Font and Text - 'text-base leading-none', - 'font-medium' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/inplace/index.js b/packages/tailwindcss-presets/src/lara/inplace/index.js deleted file mode 100644 index ef7bf3757..000000000 --- a/packages/tailwindcss-presets/src/lara/inplace/index.js +++ /dev/null @@ -1,27 +0,0 @@ -export default { - display: { - class: [ - // Display - 'inline', - - // Spacing - 'p-3', - - // Shape - 'rounded-md', - - // Colors - 'text-surface-700 dark:text-white/80', - - // States - 'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-700/80 dark:hover:text-white/80', - - // Transitions - 'transition', - 'duration-200', - - // Misc - 'cursor-pointer' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/inputgroup/index.js b/packages/tailwindcss-presets/src/lara/inputgroup/index.js deleted file mode 100644 index cce711149..000000000 --- a/packages/tailwindcss-presets/src/lara/inputgroup/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - root: { - class: ['flex items-stretch', 'w-full'] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/inputgroupaddon/index.js b/packages/tailwindcss-presets/src/lara/inputgroupaddon/index.js deleted file mode 100644 index 5ed52fbc8..000000000 --- a/packages/tailwindcss-presets/src/lara/inputgroupaddon/index.js +++ /dev/null @@ -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-3', - - // Size - 'min-w-[3rem]', - - // Color - 'bg-surface-50 dark:bg-surface-800', - 'text-surface-600 dark:text-surface-400', - 'border-surface-300 dark:border-surface-600' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/inputmask/index.js b/packages/tailwindcss-presets/src/lara/inputmask/index.js deleted file mode 100644 index 6885ec5f8..000000000 --- a/packages/tailwindcss-presets/src/lara/inputmask/index.js +++ /dev/null @@ -1,39 +0,0 @@ -export default { - root: ({ context, props, parent }) => ({ - class: [ - // Font - 'leading-[normal]', - - // Spacing - 'm-0 p-3', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // 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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/inputnumber/index.js b/packages/tailwindcss-presets/src/lara/inputnumber/index.js deleted file mode 100644 index 1fd5ecd8e..000000000 --- a/packages/tailwindcss-presets/src/lara/inputnumber/index.js +++ /dev/null @@ -1,165 +0,0 @@ -export default { - root: ({ props, parent }) => ({ - class: [ - // Flex - 'inline-flex', - { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' }, - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - - // Shape - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons }, - { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' && !props.showButtons }, - { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - //Sizing - { '!w-16': props.showButtons && props.buttonLayout == 'vertical' } - ] - }), - input: { - root: ({ parent, context }) => ({ - class: [ - // Display - 'flex flex-auto', - - // Font - 'leading-[normal]', - - //Text - { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - // Spacing - 'p-3', - 'm-0', - - // Shape - 'rounded-lg', - { 'rounded-tr-none rounded-br-none': parent.props.showButtons }, - { 'rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons }, - - // Colors - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !parent.props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': parent.props.invalid }, - - // States - { 'hover:border-primary': !parent.props.invalid }, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10', - { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.state.d_modelValue !== null }, - - //Position - { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' } - ] - }) - }, - buttongroup: ({ props }) => ({ - class: [ - // Flex - 'flex', - 'flex-col' - ] - }), - - incrementbutton: { - root: ({ parent }) => ({ - class: [ - // Display - 'flex flex-auto', - - // Alignment - 'items-center', - 'justify-center', - 'text-center align-bottom', - - //Position - 'relative', - { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - // Colors - 'text-primary-inverse', - 'bg-primary', - 'border-primary', - - // Sizing - 'w-[3rem]', - { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' }, - { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - // Shape - 'rounded-md', - { 'rounded-tl-none rounded-br-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - //States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-hover hover:border-primary-hover', - - //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' }, - - // Colors - 'text-primary-inverse', - 'bg-primary', - 'border-primary', - - // Sizing - 'w-[3rem]', - { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' }, - { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - // Shape - 'rounded-md', - { 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' }, - { 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' }, - { 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' }, - - //States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'hover:bg-primary-hover hover:border-primary-hover', - - //Misc - 'cursor-pointer overflow-hidden select-none' - ] - }), - label: { - class: 'h-0 w-0' - } - } -}; diff --git a/packages/tailwindcss-presets/src/lara/inputotp/index.js b/packages/tailwindcss-presets/src/lara/inputotp/index.js deleted file mode 100644 index 706f57c51..000000000 --- a/packages/tailwindcss-presets/src/lara/inputotp/index.js +++ /dev/null @@ -1,62 +0,0 @@ -export default { - root: { - class: [ - // Alignment - 'flex items-center', - 'gap-2' - ] - }, - input: { - root: ({ props, context, parent }) => ({ - class: [ - // Font - 'leading-[normal]', - - // Flex & Alignment - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - 'text-center', - - // Spacing - 'm-0', - { - 'p-3': props.size == null - }, - - // Size - 'w-10', - - // Shape - { 'rounded-md': parent.instance.$name !== 'InputGroup' }, - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, - { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - // Colors - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$name == 'FloatLabel' && context.filled }, - - // Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }) - } -}; diff --git a/packages/tailwindcss-presets/src/lara/inputswitch/index.js b/packages/tailwindcss-presets/src/lara/inputswitch/index.js deleted file mode 100644 index 14003bfd9..000000000 --- a/packages/tailwindcss-presets/src/lara/inputswitch/index.js +++ /dev/null @@ -1,80 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'inline-block relative', - 'w-12 h-7', - '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-5': props.modelValue == props.trueValue }, - - // Shape - 'rounded-2xl', - - // Before: - 'before:absolute before:top-1/2 before:left-1', - 'before:-mt-2.5', - 'before:h-5 before:w-5', - 'before:rounded-full', - 'before:duration-200', - 'before:bg-surface-0 before:dark:bg-surface-900', - - // Colors - 'border', - { - 'bg-surface-200 dark:bg-surface-700': !(props.modelValue == props.trueValue), - 'bg-primary': props.modelValue == props.trueValue - }, - - { 'border-transparent': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { 'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 ': !(props.modelValue == props.trueValue) && !props.disabled }, - { 'peer-hover:bg-primary-hover ': props.modelValue == props.trueValue && !props.disabled }, - 'peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50', - - // 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-[2.5rem]', - 'outline-none', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/inputtext/index.js b/packages/tailwindcss-presets/src/lara/inputtext/index.js deleted file mode 100644 index 45f594009..000000000 --- a/packages/tailwindcss-presets/src/lara/inputtext/index.js +++ /dev/null @@ -1,51 +0,0 @@ -export default { - root: ({ props, context, parent }) => ({ - class: [ - // Font - 'leading-[normal]', - - // Flex - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - - // Spacing - 'm-0', - { - 'px-4 py-4': props.size == 'large', - 'px-2 py-2': props.size == 'small', - 'p-3': props.size == null - }, - - // Shape - { 'rounded-md': parent.instance.$name !== 'InputGroup' }, - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, - { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - // Colors - 'text-surface-800 dark:text-white/80', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - 'invalid:focus:ring-red-200', - 'invalid:hover:border-red-500', - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$name == 'FloatLabel' && context.filled }, - - // Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/knob/index.js b/packages/tailwindcss-presets/src/lara/knob/index.js deleted file mode 100644 index 1d3200228..000000000 --- a/packages/tailwindcss-presets/src/lara/knob/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/listbox/index.js b/packages/tailwindcss-presets/src/lara/listbox/index.js deleted file mode 100644 index 244a33850..000000000 --- a/packages/tailwindcss-presets/src/lara/listbox/index.js +++ /dev/null @@ -1,155 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - // Sizing and Shape - 'min-w-[12rem]', - 'rounded-md', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-white/80', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid } - ] - }), - wrapper: { - class: [ - // Overflow - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0 outline-none' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // 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', - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - itemgroup: { - class: [ - //Font - 'font-bold', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-600/80', - - // Misc - 'cursor-auto' - ] - }, - header: { - class: [ - // Spacing - 'py-3 px-5', - 'm-0', - - //Shape - 'border-b', - 'rounded-tl-md', - 'rounded-tr-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-100 dark:bg-surface-800', - 'border-surface-300 dark:border-surface-600' - ] - }, - filtercontainer: { - class: 'relative' - }, - filterinput: { - class: [ - // Font - 'leading-none', - - // Sizing - 'pr-7 py-3 px-3', - '-mr-7', - 'w-full', - - //Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - - // Shape - 'border', - 'rounded-lg', - 'appearance-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary', - 'focus:ring focus:outline-none focus:outline-offset-0', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'appearance-none' - ] - }, - filtericon: { - class: ['absolute', 'top-1/2 right-3', '-mt-2'] - }, - emptymessage: { - class: [ - // Font - 'leading-none', - - // Spacing - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-transparent' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/megamenu/index.js b/packages/tailwindcss-presets/src/lara/megamenu/index.js deleted file mode 100644 index 2a0d5d0f5..000000000 --- a/packages/tailwindcss-presets/src/lara/megamenu/index.js +++ /dev/null @@ -1,198 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'relative', - - // Flexbox - 'flex', - - // Shape & Size - 'rounded-md', - - // Color - 'bg-surface-50 dark:bg-surface-700', - 'border border-surface-200 dark:border-surface-700', - { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col sm:w-48 p-0 py-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', - 'py-1 sm:py-0 sm:p-0', - 'list-none', - - // Shape - 'shadow-md sm:shadow-none', - 'border-0', - - // Color - 'bg-surface-0 dark:bg-surface-700 sm:bg-transparent dark:sm:bg-transparent', - - // Misc - 'outline-none' - ] - }), - menuitem: ({ props }) => ({ - class: [ - 'sm:relative static', - { - 'sm:w-auto w-full': props.horizontal, - 'w-full': !props.horizontal - } - ] - }), - content: ({ props, context }) => ({ - class: [ - // Shape - { 'rounded-md': props.level < 1 && props.horizontal }, - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active) - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !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-3', - 'px-5', - - // Size - 'py-3 pr-5 pl-9 sm:pl-5', - '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 - 'py-1', - 'm-0', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Color - 'bg-surface-0 dark:bg-surface-700', - - // 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', 'py-1 px-2 w-full sm:min-w-[14rem]'] - }, - submenuheader: { - class: [ - 'font-semibold', - - // Spacing - 'py-3 px-5', - 'm-0', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-700' - ] - }, - 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-8', - 'h-8', - - // 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-surface-600/80', - 'focus:outline-none focus:outline-offset-0', - 'focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer', - 'no-underline' - ] - }, - end: { - class: 'ml-auto self-center' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/menu/index.js b/packages/tailwindcss-presets/src/lara/menu/index.js deleted file mode 100644 index fc971da9d..000000000 --- a/packages/tailwindcss-presets/src/lara/menu/index.js +++ /dev/null @@ -1,96 +0,0 @@ -export default { - root: { - class: [ - // Sizing and Shape - 'min-w-[12rem]', - 'rounded-md', - // Spacing - 'py-2', - // Colors - 'bg-surface-0 dark:bg-surface-700', - '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' - ] - }, - content: ({ context }) => ({ - class: [ - //Shape - 'rounded-none', - // Colors - 'text-surface-700 dark:text-white/80', - { - 'bg-surface-200 text-surface-700 dark:bg-surface-300/10 dark:text-white': context.focused - }, - // Transitions - 'transition-shadow', - 'duration-200', - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:bg-surface-700 dark:hover:bg-surface-400/10' - ] - }), - action: { - class: [ - 'relative', - // Flexbox - - 'flex', - 'items-center', - - // Spacing - 'py-3', - 'px-5', - - // 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'] - }, - submenuheader: { - class: [ - // Font - 'font-bold', - // Spacing - 'm-0', - 'py-3 px-5', - // Shape - 'rounded-tl-none', - 'rounded-tr-none', - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'text-surface-700 dark:text-white' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/menubar/index.js b/packages/tailwindcss-presets/src/lara/menubar/index.js deleted file mode 100644 index afcffa428..000000000 --- a/packages/tailwindcss-presets/src/lara/menubar/index.js +++ /dev/null @@ -1,175 +0,0 @@ -export default { - root: { - class: [ - 'relative', - - // Flexbox - 'flex', - 'items-center', - - // Spacing - 'p-2', - - // Shape - 'rounded-md', - - // Color - 'bg-surface-50 dark:bg-surface-700', - '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', - 'py-1 sm:py-0 sm:p-0', - 'list-none', - - // Shape - 'shadow-md sm:shadow-none', - 'border-0', - - // Color - 'bg-surface-0 dark:bg-surface-700 sm:bg-transparent', - - // Misc - 'outline-none' - ] - }), - menuitem: { - class: 'sm:relative sm:w-auto w-full static' - }, - content: ({ props, context }) => ({ - class: [ - // Shape - { 'rounded-md': props.root }, - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active) - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !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-3', - 'px-5', - - // 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 - 'w-full sm:w-48', - - // Spacing - 'py-1', - 'm-0', - 'list-none', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Position - 'static sm:absolute', - 'z-10', - { 'sm:absolute sm:left-full sm:top-0': props.level > 1 }, - - // Color - 'bg-surface-0 dark:bg-surface-700' - ] - }), - separator: { - class: 'border-t border-surface-200 dark:border-surface-600 my-1' - }, - button: { - class: [ - // Flexbox - 'flex sm:hidden', - 'items-center justify-center', - - // Size - 'w-8', - 'h-8', - - // 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-surface-600/80', - 'focus:outline-none focus:outline-offset-0', - 'focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer', - 'no-underline' - ] - }, - end: { - class: 'ml-auto self-center' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/message/index.js b/packages/tailwindcss-presets/src/lara/message/index.js deleted file mode 100644 index 18bef54b5..000000000 --- a/packages/tailwindcss-presets/src/lara/message/index.js +++ /dev/null @@ -1,87 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - // Spacing and Shape - 'my-4 mx-0', - 'rounded-md', - 'border-solid border-0 border-l-[6px]', - - // 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-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn', - 'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error' - }, - { - 'border-blue-500 dark:border-blue-400': props.severity == 'info', - 'border-green-500 dark:border-green-400': props.severity == 'success', - 'border-orange-500 dark:border-orange-400': props.severity == 'warn', - 'border-red-500 dark:border-red-400': props.severity == 'error' - }, - { - 'text-blue-700 dark:text-blue-300': props.severity == 'info', - 'text-green-700 dark:text-green-300': props.severity == 'success', - 'text-orange-700 dark:text-orange-300': props.severity == 'warn', - 'text-red-700 dark:text-red-300': props.severity == 'error' - } - ] - }), - wrapper: { - class: [ - // Flexbox - 'flex items-center', - - // Spacing - 'py-5 px-7' - ] - }, - icon: { - class: [ - // Sizing and Spacing - 'w-6 h-6', - 'text-lg leading-none mr-2 shrink-0' - ] - }, - text: { - class: [ - // Font and Text - 'text-base leading-none', - 'font-medium' - ] - }, - button: { - class: [ - // Flexbox - 'flex items-center justify-center', - - // Size - 'w-8 h-8', - - // Spacing and Misc - 'ml-auto relative', - - // Shape - 'rounded-full', - - // Colors - 'bg-transparent', - - // Transitions - 'transition duration-200 ease-in-out', - - // States - 'hover:bg-surface-0/50 dark:hover:bg-surface-0/10', - - // 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/metergroup/index.js b/packages/tailwindcss-presets/src/lara/metergroup/index.js deleted file mode 100644 index 135c10014..000000000 --- a/packages/tailwindcss-presets/src/lara/metergroup/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/multiselect/index.js b/packages/tailwindcss-presets/src/lara/multiselect/index.js deleted file mode 100644 index 284a04347..000000000 --- a/packages/tailwindcss-presets/src/lara/multiselect/index.js +++ /dev/null @@ -1,544 +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-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - labelContainer: { - class: 'overflow-hidden flex flex-auto cursor-pointer ' - }, - label: ({ props }) => ({ - class: [ - 'leading-[normal]', - 'block ', - - // Spacing - { - 'p-3': props.display !== 'chip', - 'py-3 px-3': props.display === 'chip' && !props?.modelValue?.length, - 'py-[0.375rem] px-3': props.display === 'chip' && props?.modelValue?.length > 0 - }, - - // Color - { 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length }, - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Transitions - 'transition duration-200', - - // Misc - 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis' - ] - }), - token: { - class: [ - // Flex - 'inline-flex items-center', - - // Spacings - 'py-1.5 px-3 mr-2', - - // Shape - 'rounded-[1.14rem]', - - // Colors - 'bg-surface-200 dark:bg-surface-700', - 'text-surface-700 dark:text-white/70', - - // Misc - 'cursor-default' - ] - }, - removeTokenIcon: { - class: [ - // Shape - 'rounded-md leading-6', - - // Spacing - 'ml-2', - - // Size - 'w-4 h-4', - - // Transition - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - header: { - class: [ - 'flex items-center justify-between', - // Spacing - 'py-3 px-5', - 'm-0', - - //Shape - 'border-b', - 'rounded-tl-md', - 'rounded-tr-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-100 dark:bg-surface-800', - 'border-surface-300 dark:border-surface-700' - ] - }, - headerCheckboxContainer: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - headerCheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - itemCheckbox: { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }, - closeButton: { - class: [ - 'relative', - - // Flexbox and Alignment - 'flex items-center justify-center', - - // Size and Spacing - 'mr-2', - 'last:mr-0', - 'w-8 h-8', - - // Shape - 'border-0', - 'rounded-full', - - // Colors - 'text-surface-500', - 'bg-transparent', - - // Transitions - 'transition duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'overflow-hidden' - ] - }, - closeButtonIcon: { - class: 'w-4 h-4 inline-block' - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Flexbox - 'flex items-center', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }), - itemgroup: { - class: [ - //Font - 'font-bold', - - // Spacing - 'm-0', - 'p-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-600/80', - - // Misc - 'cursor-auto' - ] - }, - filtercontainer: { - class: 'relative w-full mx-2' - }, - filterinput: { - class: [ - // Font - 'leading-[normal]', - - // Sizing - 'pr-7 py-3 px-3', - '-mr-7', - 'w-full', - - //Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-900', - 'border-surface-200 dark:border-surface-700', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - - // Shape - 'border', - 'rounded-lg', - 'appearance-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary', - 'focus:ring focus:outline-none focus:outline-offset-0', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'appearance-none' - ] - }, - filtericon: { - class: ['absolute', 'top-1/2 right-3', '-mt-2'] - }, - clearicon: { - class: [ - // Color - 'text-surface-500', - - // Position - 'absolute', - 'top-1/2', - 'right-12', - - // Spacing - '-mt-2' - ] - }, - emptymessage: { - class: [ - // Font - 'leading-none', - - // Spacing - 'py-3 px-5', - - // Color - 'text-surface-800 dark:text-white/80', - 'bg-transparent' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/orderlist/index.js b/packages/tailwindcss-presets/src/lara/orderlist/index.js deleted file mode 100644 index 99111d068..000000000 --- a/packages/tailwindcss-presets/src/lara/orderlist/index.js +++ /dev/null @@ -1,258 +0,0 @@ -export default { - root: { - class: [ - // Flexbox - 'flex' - ] - }, - controls: { - class: [ - // Flexbox & Alignment - 'flex flex-col justify-center gap-2', - - // Spacing - 'p-5' - ] - }, - moveupbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - movedownbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - movetopbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - movebottombutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - container: { - class: ['flex-auto'] - }, - header: { - class: [ - 'font-bold', - - // Shape - 'border-b-0 rounded-t-md', - - // Spacing - 'p-5', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-50 dark:bg-surface-800', - 'border border-surface-200 dark:border-surface-700' - ] - }, - list: { - class: [ - // Spacing - 'list-none m-0 p-0', - - // Size - 'min-h-[12rem] max-h-[24rem]', - - // Shape - 'rounded-b-md', - - // Color - 'text-surface-600 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-800', - 'border border-surface-200 dark:border-surface-700', - - // Spacing - 'py-3 px-0', - - // Focus & Outline - 'outline-none', - - // Misc - 'overflow-auto' - ] - }, - item: ({ context }) => ({ - class: [ - // Position - 'relative', - - // Spacing - 'py-3 px-5 m-0', - - // Shape - 'border-none', - - // 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-surface-700': !context.active, - 'hover:bg-primary-highlight-hover': context.active - }, - - // Misc - 'cursor-pointer overflow-hidden' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/organizationchart/index.js b/packages/tailwindcss-presets/src/lara/organizationchart/index.js deleted file mode 100644 index 93368ad99..000000000 --- a/packages/tailwindcss-presets/src/lara/organizationchart/index.js +++ /dev/null @@ -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: ({ props, context }) => ({ - class: [ - 'relative inline-block', - - // Spacing - 'p-5', - - // Shape - 'border', - - // Color - { - 'text-surface-600 dark:text-white/80': !context?.selected, - 'bg-surface-0 dark:bg-surface-800': !context?.selected, - 'border-surface-200 dark:border-surface-700': !context?.selected, - 'text-primary-highlight-inverse': context?.selected, - 'bg-primary-highlight': context?.selected, - 'border-primary-200 dark:border-primary-600': context?.selected - }, - - // States - { - 'hover:bg-surface-100 dark:hover:bg-surface-700': 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', - - // Color - 'bg-inherit text-inherit', - - // Focus - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'cursor-pointer no-underline select-none' - ] - }, - nodetogglericon: { - class: [ - // Position - 'relative inline-block', - - // Size - 'w-4 h-4' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/overlaypanel/index.js b/packages/tailwindcss-presets/src/lara/overlaypanel/index.js deleted file mode 100644 index f67d2ffe3..000000000 --- a/packages/tailwindcss-presets/src/lara/overlaypanel/index.js +++ /dev/null @@ -1,40 +0,0 @@ -export default { - root: { - class: [ - // Shape - 'rounded-md shadow-lg', - 'border-0 dark:border', - - // Position - 'absolute left-0 top-0 mt-2', - 'z-40 transform origin-center', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-surface-0/80', - 'dark:border-surface-700', - - // Before: Triangle - 'before:absolute before:-top-[9px] before:-ml-[9px] before:left-[calc(var(--overlayArrowLeft,0)+1.25rem)] z-0', - 'before:w-0 before:h-0', - 'before:border-transparent before:border-solid', - 'before:border-x-[8px] before:border-[8px]', - 'before:border-t-0 before:border-b-surface-300/10 dark:before:border-b-surface-700', - - 'after:absolute after:-top-2 after:-ml-[8px] after:left-[calc(var(--overlayArrowLeft,0)+1.25rem)]', - 'after:w-0 after:h-0', - 'after:border-transparent after:border-solid', - 'after:border-x-[0.5rem] after:border-[0.5rem]', - 'after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-800' - ] - }, - content: { - class: 'p-5 items-center flex' - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/paginator/index.js b/packages/tailwindcss-presets/src/lara/paginator/index.js deleted file mode 100644 index 5b5b7908d..000000000 --- a/packages/tailwindcss-presets/src/lara/paginator/index.js +++ /dev/null @@ -1,528 +0,0 @@ -export default { - root: { - class: [ - // Flex & Alignment - 'flex items-center justify-center flex-wrap', - - // Spacing - 'px-4 py-2', - - // Shape - 'border-0', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-500 dark:text-white/60' - ] - }, - firstpagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - previouspagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - nextpagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - lastpagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/60', - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - pagebutton: ({ context }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full dark:rounded-md', - - // Size - 'min-w-[3rem] h-12 m-[0.143rem]', - 'leading-none', - - // Color - 'text-surface-500 dark:text-white/80', - { - 'bg-primary-highlight border-primary-highlight text-primary-highlight-inverse': context.active - }, - - // State - { - 'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled && !context.active, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled - }, - - // Transition - 'transition duration-200', - - // Misc - 'user-none overflow-hidden', - { 'cursor-default pointer-events-none opacity-60': context.disabled } - ] - }), - rowperpagedropdown: { - root: ({ props, state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'h-12', - 'rounded-md', - - // Spacing - 'mx-2', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary', - { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - input: { - class: [ - //Font - 'leading-[normal]', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - 'text-surface-800 dark:text-white/80', - - // Sizing and Spacing - 'w-[1%]', - 'p-3 pr-0', - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }) - }, - jumptopageinput: { - root: { - class: 'inline-flex mx-2' - }, - input: { - root: { - class: [ - 'relative', - - //Font - 'leading-none', - - // Display - 'block', - 'flex-auto', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-600', - - // Sizing and Spacing - 'w-[1%] max-w-[3rem]', - 'p-3 m-0', - - //Shape - 'rounded-md', - - // Transitions - 'transition', - 'duration-200', - - // States - 'hover:border-primary', - 'focus:outline-none focus:shadow-none', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', - - // Misc - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - } - } - }, - jumptopagedropdown: { - root: ({ props, state }) => ({ - class: [ - // Display and Position - 'inline-flex', - 'relative', - - // Shape - 'h-12', - 'rounded-md', - - // Color and Background - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-700', - - // Transitions - 'transition-all', - 'duration-200', - - // States - 'hover:border-primary', - { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - input: { - class: [ - //Font - 'leading-none', - - // Display - 'block', - 'flex-auto', - - // Color and Background - 'bg-transparent', - 'border-0', - 'text-surface-800 dark:text-white/80', - - // Sizing and Spacing - 'w-[1%]', - 'p-3', - - //Shape - 'rounded-none', - - // Transitions - 'transition', - 'duration-200', - - // States - 'focus:outline-none focus:shadow-none', - - // Misc - 'relative', - 'cursor-pointer', - 'overflow-hidden overflow-ellipsis', - 'whitespace-nowrap', - 'appearance-none' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - list: { - class: 'py-3 list-none m-0' - }, - item: ({ context }) => ({ - class: [ - // Font - 'font-normal', - 'leading-none', - - // Position - 'relative', - - // Shape - 'border-0', - 'rounded-none', - - // Spacing - 'm-0', - 'py-3 px-5', - - // Color - { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected }, - { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected }, - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - - //States - { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected }, - { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected }, - - // Transitions - 'transition-shadow', - 'duration-200', - - // Misc - 'cursor-pointer', - 'overflow-hidden', - 'whitespace-nowrap' - ] - }) - }, - start: { - class: 'mr-auto' - }, - end: { - class: 'ml-auto' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/panel/index.js b/packages/tailwindcss-presets/src/lara/panel/index.js deleted file mode 100644 index d42820bd9..000000000 --- a/packages/tailwindcss-presets/src/lara/panel/index.js +++ /dev/null @@ -1,91 +0,0 @@ -export default { - header: ({ props }) => ({ - class: [ - // Flex - 'flex items-center justify-between', - - // Colors - 'text-surface-700 dark:text-surface-0/80', - 'bg-surface-50 dark:bg-surface-900', - 'border border-surface-200 dark:border-surface-700', - - //Shape - 'rounded-tl-lg rounded-tr-lg', - - // Conditional Spacing - { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } - ] - }), - title: { - class: 'leading-none font-bold' - }, - toggler: { - class: [ - // Alignments - 'inline-flex items-center justify-center', - 'relative', - - // Sized - 'w-8 h-8', - '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/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - 'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 focus-visible:ring-inset dark:focus-visible:ring-primary-300/50', - - // Transitions - 'transition-all duration-200 ease-in-out', - - // Misc - 'overflow-hidden no-underline', - 'cursor-pointer' - ] - }, - togglerIcon: { - class: 'inline-block' - }, - content: { - class: [ - // Spacing - 'p-5', - - // Shape - 'border border-t-0 last:rounded-br-lg last:rounded-bl-lg', - - //Color - 'border-surface-200 dark:border-surface-700', - 'bg-surface-0 dark:bg-surface-900', - 'text-surface-700 dark:text-surface-0/80' - ] - }, - footer: { - class: [ - // Spacing - 'py-3 p-5', - - // Shape - 'border border-t-0 rounded-br-lg rounded-bl-lg', - - //Color - 'border-surface-200 dark:border-surface-700', - 'bg-surface-0 dark:bg-surface-900', - '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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/panelmenu/index.js b/packages/tailwindcss-presets/src/lara/panelmenu/index.js deleted file mode 100644 index e6072e899..000000000 --- a/packages/tailwindcss-presets/src/lara/panelmenu/index.js +++ /dev/null @@ -1,127 +0,0 @@ -export default { - panel: { - class: 'mb-1' - }, - header: { - class: ['rounded-md', 'outline-none', 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50'] - }, - headercontent: ({ context, instance }) => ({ - class: [ - // Shape - 'rounded-t-md', - { 'rounded-br-md rounded-bl-md': !context.active || instance.activeItem?.items === undefined, 'rounded-br-0 rounded-bl-0': context.active && instance.activeItem?.items !== undefined }, - - // 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 }, - - // States - 'hover:bg-surface-100 dark:hover:bg-surface-700/80', - 'hover:text-surface-900', - - // Transition - 'transition duration-200 ease-in-out', - 'transition-shadow duration-200' - ] - }), - headeraction: { - class: [ - 'relative', - - // Font - 'font-bold', - 'leading-none', - - // Flex & Alignments - 'flex items-center', - - // Spacing - 'p-5', - - // Misc - 'select-none cursor-pointer no-underline' - ] - }, - headerlabel: { - class: 'leading-none' - }, - headerIcon: { - class: 'mr-2' - }, - submenuicon: { - class: 'mr-2' - }, - menucontent: { - class: [ - // Spacing - 'py-2', - - // Shape - 'border border-t-0', - 'rounded-t-none rounded-br-md rounded-bl-md', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700' - ] - }, - menu: { - class: ['outline-none', 'm-0 p-0 list-none'] - }, - content: { - class: [ - // Shape - 'border-none rounded-none', - - // 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-3 px-5', - - // Color - 'text-surface-700 dark:text-white/80', - - // States - 'hover:bg-surface-100 dark:hover:bg-surface-700/80 hover:text-surface-700 dark:hover:text-white/80', - { - 'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-600/90': 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/password/index.js b/packages/tailwindcss-presets/src/lara/password/index.js deleted file mode 100644 index e294b872d..000000000 --- a/packages/tailwindcss-presets/src/lara/password/index.js +++ /dev/null @@ -1,121 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'inline-flex relative', - { - 'opacity-60 select-none pointer-events-none cursor-default': props.disabled - }, - { '[&>input]:pr-10': props.toggleMask } - ] - }), - panel: { - class: [ - // Spacing - 'p-5', - - // Shape - 'border-0 dark:border', - 'shadow-md rounded-md', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - 'text-surface-700 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - meter: { - class: [ - // Position and Overflow - 'overflow-hidden', - 'relative', - - // Shape and Size - 'border-0', - 'h-3', - - // Spacing - 'mb-2', - - // Colors - 'bg-surface-100 dark:bg-surface-700' - ] - }, - meterlabel: ({ instance }) => ({ - class: [ - // Size - 'h-full', - - // Colors - { - 'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak', - 'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium', - 'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong' - }, - - // Transitions - 'transition-all duration-1000 ease-in-out' - ] - }), - showicon: { - class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70'] - }, - hideicon: { - class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70'] - }, - input: { - root: ({ props, context, parent }) => ({ - class: [ - // Font - 'leading-[normal]', - - // Flex - { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' }, - - // Spacing - 'm-0', - { - 'px-4 py-4': props.size == 'large', - 'px-2 py-2': props.size == 'small', - 'p-3': props.size == null - }, - 'w-full', - - // Shape - { 'rounded-md': parent.instance.$name !== 'InputGroup' }, - { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' }, - { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' }, - { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons }, - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !parent.props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': parent.props.invalid }, - - // States - { - 'hover:border-primary': !context.disabled && !parent.props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/picklist/index.js b/packages/tailwindcss-presets/src/lara/picklist/index.js deleted file mode 100644 index c5cd1fe5c..000000000 --- a/packages/tailwindcss-presets/src/lara/picklist/index.js +++ /dev/null @@ -1,651 +0,0 @@ -export default { - root: { - class: [ - // Flexbox - 'flex lg:flex-row flex-col' - ] - }, - sourcecontrols: { - class: [ - // Flexbox & Alignment - 'flex lg:flex-col justify-center gap-2', - - // Spacing - 'p-5' - ] - }, - sourcemoveupbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - sourcemovetopbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - sourcemovedownbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - sourcemovebottombutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - sourcewrapper: { - class: 'grow shrink basis-2/4' - }, - sourceheader: { - class: [ - 'font-bold', - - // Shape - 'border-b-0 rounded-t-md', - - // Spacing - 'p-5', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-50 dark:bg-surface-800', - 'border border-surface-200 dark:border-surface-700' - ] - }, - sourcelist: { - class: [ - // Spacing - 'list-none m-0 p-0', - - // Size - 'min-h-[12rem] max-h-[24rem]', - - // Shape - 'rounded-b-md', - - // Color - 'text-surface-600 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-800', - 'border border-surface-200 dark:border-surface-700', - - // Spacing - 'py-3 px-0', - - // Focus & Outline - 'outline-none', - - // Misc - 'overflow-auto' - ] - }, - item: ({ context }) => ({ - class: [ - // Position - 'relative', - - // Spacing - 'py-3 px-5 m-0', - - // Shape - 'border-none', - - // 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-surface-700': !context.active, - 'hover:bg-primary-highlight-hover': context.active - }, - - // Misc - 'cursor-pointer overflow-hidden' - ] - }), - buttons: { - class: 'flex lg:flex-col justify-center gap-2 p-5' - }, - movetotargetbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - movealltotargetbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - movetosourcebutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - movealltosourcebutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - targetcontrols: { - class: 'flex lg:flex-col justify-center gap-2 p-5' - }, - targetmoveupbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - targetmovetopbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - targetmovedownbutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - targetmovebottombutton: { - root: ({ context }) => ({ - class: [ - // Flexbox & Alignment - 'relative inline-flex items-center justify-center', - - // Shape - 'rounded-md', - - // Color - 'text-primary-inverse', - 'bg-primary', - 'border border-primary', - - // Spacing & Size - 'w-12', - 'm-0', - 'px-0 py-3', - - // Transitions - 'transition duration-200 ease-in-out', - - // State - 'hover:bg-primary-hover hover:border-primary-hover', - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary/50', - { 'cursor-default pointer-events-none opacity-60': context.disabled }, - - // Interactivity - 'cursor-pointer user-select-none' - ] - }), - label: { - class: [ - // Flexbox - 'flex-initial', - - // Size - 'w-0' - ] - } - }, - targetwrapper: { - class: 'grow shrink basis-2/4' - }, - targetheader: { - class: [ - 'font-bold', - - // Shape - 'border-b-0 rounded-t-md', - - // Spacing - 'p-5', - - // Color - 'text-surface-700 dark:text-white/80', - 'bg-surface-50 dark:bg-surface-800', - 'border border-surface-200 dark:border-surface-700' - ] - }, - targetlist: { - class: [ - // Spacing - 'list-none m-0 p-0', - - // Size - 'min-h-[12rem] max-h-[24rem]', - - // Shape - 'rounded-b-md', - - // Color - 'text-surface-600 dark:text-white/80', - 'bg-surface-0 dark:bg-surface-800', - 'border border-surface-200 dark:border-surface-700', - - // Spacing - 'py-3 px-0', - - // Focus & Outline - 'outline-none', - - // Misc - 'overflow-auto' - ] - }, - transition: { - enterFromClass: '!transition-none', - enterActiveClass: '!transition-none', - leaveActiveClass: '!transition-none', - leaveToClass: '!transition-none' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/progressbar/index.js b/packages/tailwindcss-presets/src/lara/progressbar/index.js deleted file mode 100644 index fe251b956..000000000 --- a/packages/tailwindcss-presets/src/lara/progressbar/index.js +++ /dev/null @@ -1,55 +0,0 @@ -export default { - root: { - class: [ - // Position and Overflow - 'overflow-hidden', - 'relative', - - // Shape and Size - 'border-0', - 'h-6', - 'rounded-md', - - // Colors - 'bg-surface-100 dark:bg-surface-700' - ] - }, - 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: [ - // Flexbox - 'inline-flex', - - // Font and Text - 'text-white dark:text-surface-900', - 'leading-6' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/progressspinner/index.js b/packages/tailwindcss-presets/src/lara/progressspinner/index.js deleted file mode 100644 index 4e1faec86..000000000 --- a/packages/tailwindcss-presets/src/lara/progressspinner/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/radiobutton/index.js b/packages/tailwindcss-presets/src/lara/radiobutton/index.js deleted file mode 100644 index 06cbd8f8c..000000000 --- a/packages/tailwindcss-presets/src/lara/radiobutton/index.js +++ /dev/null @@ -1,104 +0,0 @@ -export default { - root: { - class: [ - 'relative', - - // Flexbox & Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-[1.571rem] h-[1.571rem]', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props }) => ({ - class: [ - // Flexbox - 'flex justify-center items-center', - - // Size - 'w-[1.571rem] h-[1.571rem]', - - // Shape - 'border-2', - 'rounded-full', - - // Transition - 'transition duration-200 ease-in-out', - - // Colors - { - 'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined, - 'bg-surface-0 dark:bg-surface-900': 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, - 'bg-primary': props.value == props.modelValue && props.value !== undefined - }, - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'peer-hover:border-primary dark:peer-hover:border-primary': !props.disabled && !props.invalid, - 'peer-hover:border-primary-hover peer-hover:bg-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'opacity-60 cursor-default': props.disabled - } - ] - }), - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: ({ props }) => ({ - class: [ - 'block', - - // Shape - 'rounded-full', - - // Size - 'w-[0.857rem] h-[0.857rem]', - - // Colors - 'bg-surface-0 dark:bg-surface-900', - - // Conditions - { - 'backface-hidden scale-10 invisible': props.value !== props.modelValue, - 'transform visible scale-[1.1]': props.value == props.modelValue - }, - - // Transition - 'transition duration-200' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/rating/index.js b/packages/tailwindcss-presets/src/lara/rating/index.js deleted file mode 100644 index 371f7e295..000000000 --- a/packages/tailwindcss-presets/src/lara/rating/index.js +++ /dev/null @@ -1,92 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'relative', - - // Flex & Alignment - 'flex items-center', - 'gap-2', - - // 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 ring-primary-500/50 dark:ring-primary-400/50': context.focused - }, - - // Misc - 'cursor-pointer' - ] - }), - cancelicon: { - class: [ - // Size - 'w-5 h-5', - - // 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 ring-primary-500/50 dark:ring-primary-400/50': context.focused - }, - - // Misc - { - 'cursor-pointer': !props.readonly, - 'cursor-default': props.readonly - } - ] - }), - officon: ({ props }) => ({ - class: [ - // Size - 'w-5 h-5', - - // 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-5 h-5', - - // Color - 'text-primary', - - // State - { 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly }, - - // Transition - 'transition duration-200 ease-in' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/ripple/index.js b/packages/tailwindcss-presets/src/lara/ripple/index.js deleted file mode 100644 index 429c249e8..000000000 --- a/packages/tailwindcss-presets/src/lara/ripple/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - root: { - class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'], - style: 'transform: scale(0)' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/scrollpanel/index.js b/packages/tailwindcss-presets/src/lara/scrollpanel/index.js deleted file mode 100644 index d41e690c3..000000000 --- a/packages/tailwindcss-presets/src/lara/scrollpanel/index.js +++ /dev/null @@ -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' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/scrolltop/index.js b/packages/tailwindcss-presets/src/lara/scrolltop/index.js deleted file mode 100644 index c091419a7..000000000 --- a/packages/tailwindcss-presets/src/lara/scrolltop/index.js +++ /dev/null @@ -1,40 +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-primary-inverse bg-primary': props.target === 'parent', - 'text-white dark:text-surface-900 bg-surface-500 dark:bg-surface-400': 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/selectbutton/index.js b/packages/tailwindcss-presets/src/lara/selectbutton/index.js deleted file mode 100644 index 2a62c9bac..000000000 --- a/packages/tailwindcss-presets/src/lara/selectbutton/index.js +++ /dev/null @@ -1,49 +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-3', - - // Shape - 'border border-r-0', - 'first:rounded-l-md first:rounded-tr-none first:rounded-br-none', - 'last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md', - - // Color - { - 'bg-surface-0 dark:bg-surface-900': !context.active, - 'text-surface-700 dark:text-white/80': !context.active, - 'border-surface-200 dark:border-surface-700': !context.active && !props.invalid, - 'bg-primary border-primary text-primary-inverse': context.active - }, - // 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 focus:z-10', - { - 'hover:bg-surface-50 dark:hover:bg-surface-800/80': !context.active && !props.invalid, - 'hover:bg-primary-hover': context.active - }, - { '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-bold' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/sidebar/index.js b/packages/tailwindcss-presets/src/lara/sidebar/index.js deleted file mode 100644 index 27b4160d2..000000000 --- a/packages/tailwindcss-presets/src/lara/sidebar/index.js +++ /dev/null @@ -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-800', - '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-5', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-surface-0/80' - ] - }, - title: { - class: ['font-bold text-lg'] - }, - 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-8 h-8', - - // Shape - 'border-0', - 'rounded-full', - - // Colors - 'text-surface-500', - 'bg-transparent', - - // Transitions - 'transition duration-200 ease-in-out', - - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:hover:bg-surface-800/80', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'overflow-hidden' - ] - }, - closeButtonIcon: { - class: [ - // Display - 'inline-block', - - // Size - 'w-4', - 'h-4' - ] - }, - content: { - class: [ - // Spacing and Size - 'p-5', - '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, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': 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' - }; - } -}; diff --git a/packages/tailwindcss-presets/src/lara/skeleton/index.js b/packages/tailwindcss-presets/src/lara/skeleton/index.js deleted file mode 100644 index d459aaac9..000000000 --- a/packages/tailwindcss-presets/src/lara/skeleton/index.js +++ /dev/null @@ -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' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/slider/index.js b/packages/tailwindcss-presets/src/lara/slider/index.js deleted file mode 100644 index 00105c994..000000000 --- a/packages/tailwindcss-presets/src/lara/slider/index.js +++ /dev/null @@ -1,137 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - 'relative', - - // Size - { 'h-1 w-60': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' }, - - // Shape - 'border-0', - - // Colors - 'bg-surface-100 dark:bg-surface-700', - - // 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' - }, - - // Colors - 'bg-primary' - ] - }), - handle: ({ props }) => ({ - class: [ - 'block', - - // Size - 'h-[1.143rem]', - 'w-[1.143rem]', - { - 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', - 'left-[50%] mb-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'vertical' - }, - - // Shape - 'rounded-full', - 'border-2', - - // Colors - 'bg-surface-0 dark:bg-surface-600', - 'border-primary', - - // States - 'hover:bg-primary-hover', - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring', - 'ring-primary-400/50 dark:ring-primary-300/50', - - // Transitions - 'transition duration-200', - - // Misc - 'cursor-grab', - 'touch-action-none' - ] - }), - starthandler: ({ props }) => ({ - class: [ - 'block', - - // Size - 'h-[1.143rem]', - 'w-[1.143rem]', - { - 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', - 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' - }, - - // Shape - 'rounded-full', - 'border-2', - - // Colors - 'bg-surface-0 dark:bg-surface-600', - 'border-primary', - - // States - 'hover:bg-primary-hover', - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring', - 'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transitions - 'transition duration-200', - - // Misc - 'cursor-grab', - 'touch-action-none' - ] - }), - endhandler: ({ props }) => ({ - class: [ - 'block', - - // Size - 'h-[1.143rem]', - 'w-[1.143rem]', - { - 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', - 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' - }, - - // Shape - 'rounded-full', - 'border-2', - - // Colors - 'bg-surface-0 dark:bg-surface-600', - 'border-primary', - - // States - 'hover:bg-primary-hover', - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring', - 'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transitions - 'transition duration-200', - - // Misc - 'cursor-grab', - 'touch-action-none' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/speeddial/index.js b/packages/tailwindcss-presets/src/lara/speeddial/index.js deleted file mode 100644 index 43680e0b8..000000000 --- a/packages/tailwindcss-presets/src/lara/speeddial/index.js +++ /dev/null @@ -1,297 +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-16 h-16 p-0 py-3', - - // 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-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, - 'border border-surface-500 dark:border-surface-400': 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/20': 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/20': 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/20 ': 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/20': 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/20': 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/20': 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', - - // 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/20': 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/20': (props.text || props.outlined) && props.severity === null && !props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (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-400/50 dark:focus:ring-green-300/50': props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (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-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (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-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (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-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (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-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (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-bold', - { - '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-12 h-12', - - // Shape - 'rounded-full relative overflow-hidden', - - // Appearance - 'bg-surface-600 dark:bg-surface-0/80 text-white dark:text-surface-900/80', - - // Hover Effects - 'hover:bg-surface-700 dark:hover:bg-surface-200/80' - ] - }, - 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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/splitbutton/index.js b/packages/tailwindcss-presets/src/lara/splitbutton/index.js deleted file mode 100644 index c8df46280..000000000 --- a/packages/tailwindcss-presets/src/lara/splitbutton/index.js +++ /dev/null @@ -1,530 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - // Flexbox and Position - 'inline-flex', - 'relative', - - // Shape - 'rounded-md', - { 'shadow-lg': props.raised } - ] - }), - button: { - root: ({ parent, props }) => ({ - class: [ - 'relative', - - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'leading-[normal]', - { - 'px-4 py-3': parent.props.size === null, - 'text-sm py-2 px-3': parent.props.size === 'small', - 'text-xl py-3 px-4': parent.props.size === 'large' - }, - { - 'min-w-12 p-0 py-3': 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': 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-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Secondary Text Button - { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Secondary Outlined Button - { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain }, - - // Success Button - { - 'text-white dark:text-surface-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-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Success Outlined Button - { 'text-green-500 border border-green-500 hover:bg-green-300/20': 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/20 ': 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/20': 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/20': 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/20': 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': 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', - - // Link - { 'focus:ring-primary/50': 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/20': 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/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - // Text & Outlined Button - { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (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-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (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-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (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-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (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-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (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-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (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, props }) => ({ - class: [ - 'relative', - // Alignments - 'items-center inline-flex text-center align-bottom justify-center', - - // Sizes & Spacing - 'leading-[normal]', - { - 'px-4 py-3': parent.props.size === null, - 'text-sm py-2 px-3': parent.props.size === 'small', - 'text-xl py-3 px-4': parent.props.size === 'large' - }, - { - 'min-w-12 p-0 py-3': 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': 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-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - // Secondary Text Button - { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Secondary Outlined Button - { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain }, - - // Success Button - { - 'text-white dark:text-surface-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-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain }, - // Success Outlined Button - { 'text-green-500 border border-green-500 hover:bg-green-300/20': 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/20 ': 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/20': 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/20': 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/20': 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': 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', - - // Link - { 'focus:ring-primary/50': 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/20': 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/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - // Text & Outlined Button - { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain }, - - // Secondary - { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' }, - // Text & Outlined Button - { 'hover:bg-surface-300/20': (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-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' }, - // Text & Outlined Button - { 'hover:bg-green-300/20': (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-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' }, - // Text & Outlined Button - { 'hover:bg-blue-300/20': (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-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' }, - // Text & Outlined Button - { 'hover:bg-orange-300/20': (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-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' }, - // Text & Outlined Button - { 'hover:bg-purple-300/20': (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-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' }, - // Text & Outlined Button - { 'hover:bg-red-300/20': (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: [ - // Shape - 'rounded-md', - - // Size - 'min-w-[12rem]', - 'py-1', - - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'border border-surface-200 dark:border-surface-700' - ] - }, - menu: { - class: [ - // Spacings and Shape - 'list-none', - 'm-0', - 'p-0', - 'outline-none' - ] - }, - menuitem: { - class: [ - // Position - 'relative' - ] - }, - content: ({ context }) => ({ - class: [ - //Shape - 'rounded-none', - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active) - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, - 'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active - }, - - // Transitions - 'transition-shadow', - 'duration-200' - ] - }), - action: { - class: [ - 'relative', - // Flexbox - - 'flex', - 'items-center', - - // Spacing - 'py-3', - 'px-5', - - // 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: [ - // Size - 'w-full sm:w-48', - - // Spacing - 'py-1', - 'm-0', - 'list-none', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Position - 'static sm:absolute', - 'z-10', - - // Color - 'bg-surface-0 dark:bg-surface-700' - ] - }, - separator: { - class: 'border-t border-surface-200 dark:border-surface-600 my-1' - } - } -}; diff --git a/packages/tailwindcss-presets/src/lara/splitter/index.js b/packages/tailwindcss-presets/src/lara/splitter/index.js deleted file mode 100644 index 877c80555..000000000 --- a/packages/tailwindcss-presets/src/lara/splitter/index.js +++ /dev/null @@ -1,61 +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-lg', - - // Borders (Conditional) - { 'border border-solid border-surface-50 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-50', - 'dark:bg-surface-800', - - // Transitions - 'transition-all', - 'duration-200', - - // Misc - { - 'cursor-col-resize': props.layout == 'horizontal', - 'cursor-row-resize': props.layout !== 'horizontal' - } - ] - }), - gutterhandler: ({ props }) => ({ - class: [ - // Colors - 'bg-surface-100', - 'dark:bg-surface-600', - - // Transitions - 'transition-all', - 'duration-200', - - // Sizing (Conditional) - { - 'h-7': props.layout == 'horizontal', - 'w-7 h-2': props.layout !== 'horizontal' - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/splitterpanel/index.js b/packages/tailwindcss-presets/src/lara/splitterpanel/index.js deleted file mode 100644 index 6a21cd3a0..000000000 --- a/packages/tailwindcss-presets/src/lara/splitterpanel/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - root: ({ context }) => ({ - class: ['grow', { flex: context.nested }] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/stepper/index.js b/packages/tailwindcss-presets/src/lara/stepper/index.js deleted file mode 100644 index 6bbd54e3e..000000000 --- a/packages/tailwindcss-presets/src/lara/stepper/index.js +++ /dev/null @@ -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 (Conditional) - context.active ? 'bg-primary text-primary-inverse' : 'border border-surface-200 dark:border-surface-700 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', - - // Borders - context.active ? 'border-0 border-none' : 'border-solid border-2', - - // 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-surface-900 dark:text-surface-0' : 'text-surface-700 dark:text-surface-0/80', - 'font-bold', - - // 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-800', '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-800', - 'text-surface-900 dark:text-surface-0', - - // Spacing - 'p-4' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/steps/index.js b/packages/tailwindcss-presets/src/lara/steps/index.js deleted file mode 100644 index 7cf6221af..000000000 --- a/packages/tailwindcss-presets/src/lara/steps/index.js +++ /dev/null @@ -1,111 +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', - 'before:border-surface-200', - 'before:dark:border-surface-700', - 'before:w-full', - 'before:absolute', - 'before:top-1/2', - 'before:left-0', - 'before:transform', - 'before:-mt-4' - ] - }, - action: ({ props }) => ({ - class: [ - // Flexbox - 'inline-flex items-center', - 'flex-col', - - // Transitions and Shape - 'transition-shadow', - 'rounded-md', - - // Colors - 'bg-surface-0', - 'dark:bg-transparent', - - // States - 'focus:outline-none focus:outline-offset-0 focus:ring', - 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Misc - 'overflow-hidden', - { 'cursor-pointer': !props.readonly } - ] - }), - step: ({ context, props }) => ({ - class: [ - // Flexbox - 'flex items-center justify-center', - - // Position - 'z-20', - - // Shape - 'rounded-full', - 'border', - - // Size - 'w-[2rem]', - 'h-[2rem]', - 'text-sm', - 'leading-[2rem]', - - // Colors - { - 'text-surface-400 dark:text-white/60': !context.active, - 'border-surface-100 dark:border-surface-700': !context.active, - 'bg-surface-0 dark:bg-surface-800': !context.active, - 'bg-primary': context.active, - 'border-primary': context.active, - 'text-primary-inverse': context.active - }, - - // States - { - 'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly - }, - - // Transition - 'transition-colors duration-200 ease-in-out' - ] - }), - label: ({ context }) => ({ - class: [ - // Font - 'leading-[normal]', - { 'font-bold': context.active }, - - // Display - 'block', - - // Spacing - 'mt-2', - - // Colors - { 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active }, - - // Text and Overflow - 'whitespace-nowrap', - 'overflow-hidden', - 'overflow-ellipsis', - 'max-w-full' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/tabmenu/index.js b/packages/tailwindcss-presets/src/lara/tabmenu/index.js deleted file mode 100644 index e3b8bb350..000000000 --- a/packages/tailwindcss-presets/src/lara/tabmenu/index.js +++ /dev/null @@ -1,73 +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-800', - '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-bold', - - // Flexbox and Alignment - 'flex items-center', - - // Spacing - 'p-5', - '-mb-[2px]', - - // Shape - 'border-b-2', - 'rounded-t-md', - - // Colors and Conditions - { - 'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index, - 'bg-surface-0 dark:bg-surface-800': state.d_activeIndex !== context.index, - 'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index, - - 'bg-surface-0 dark:bg-surface-800': state.d_activeIndex === context.index, - 'border-primary': state.d_activeIndex === context.index, - 'text-primary': state.d_activeIndex === context.index - }, - - // States - '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', - { - 'hover:bg-surface-0 dark:hover:bg-surface-800/80': state.d_activeIndex !== context.index, - 'hover:border-surface-400 dark:hover:border-primary-400': state.d_activeIndex !== context.index, - '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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/tabview/index.js b/packages/tailwindcss-presets/src/lara/tabview/index.js deleted file mode 100644 index 1f06544f2..000000000 --- a/packages/tailwindcss-presets/src/lara/tabview/index.js +++ /dev/null @@ -1,156 +0,0 @@ -export default { - navContainer: ({ props }) => ({ - class: [ - // Position - 'relative', - - // Misc - { 'overflow-hidden': props.scrollable } - ] - }), - navContent: { - 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-12', - 'rounded-none', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-primary', - 'shadow-md' - ] - }, - nextButton: { - class: [ - // Flexbox and Alignment - 'flex items-center justify-center', - - // Position - '!absolute', - 'top-0 right-0', - 'z-20', - - // Size and Shape - 'h-full w-12', - 'rounded-none', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-primary', - 'shadow-md' - ] - }, - nav: { - class: [ - // Flexbox - 'flex flex-1', - - // Spacing - 'list-none', - 'p-0 m-0', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'border-b-2 border-surface-200 dark:border-surface-700', - 'text-surface-900 dark:text-surface-0/80' - ] - }, - tabpanel: { - header: ({ props }) => ({ - class: [ - // Spacing - 'mr-0', - - // Misc - { - 'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled - } - ] - }), - headerAction: ({ parent, context }) => ({ - class: [ - 'relative', - - // Font - 'font-bold', - - // Flexbox and Alignment - 'flex items-center', - - // Spacing - 'p-5', - '-mb-[2px]', - - // 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-800': 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-800': parent.state.d_activeIndex === context.index, - 'border-primary': parent.state.d_activeIndex === context.index, - 'text-primary': parent.state.d_activeIndex === context.index - }, - - // States - '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', - { - 'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index, - 'hover:border-surface-400 dark:hover:border-primary-400': 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' - ] - }, - content: { - class: [ - // Spacing - 'p-5', - - // Shape - 'rounded-b-md', - - // Colors - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-surface-0/80', - 'border-0' - ] - } - } -}; diff --git a/packages/tailwindcss-presets/src/lara/tag/index.js b/packages/tailwindcss-presets/src/lara/tag/index.js deleted file mode 100644 index cbb5bc702..000000000 --- a/packages/tailwindcss-presets/src/lara/tag/index.js +++ /dev/null @@ -1,36 +0,0 @@ -export default { - root: ({ props }) => ({ - class: [ - //Font - 'text-xs font-bold', - - //Alignments - 'inline-flex items-center justify-center', - - //Spacing - 'px-2 py-1', - - //Shape - { - 'rounded-md': !props.rounded, - 'rounded-full': props.rounded - }, - - //Colors - 'text-primary-inverse', - { - 'bg-primary dark:bg-primary': props.severity == null || props.severity == 'primary', - '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-red-500 dark:bg-red-400': props.severity == 'danger' - } - ] - }), - value: { - class: 'leading-normal' - }, - icon: { - class: 'mr-1 text-sm' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/terminal/index.js b/packages/tailwindcss-presets/src/lara/terminal/index.js deleted file mode 100644 index 3fbd652b5..000000000 --- a/packages/tailwindcss-presets/src/lara/terminal/index.js +++ /dev/null @@ -1,60 +0,0 @@ -export default { - root: { - class: [ - // Spacing - 'p-5', - - // Shape - 'rounded-md', - - // Color - 'bg-surface-900 text-white', - 'border border-surface-700', - - // Sizing & Overflow - 'h-72 overflow-auto' - ] - }, - container: { - class: [ - // Flexbox - 'flex items-center' - ] - }, - prompt: { - class: [ - // Color - 'text-surface-400' - ] - }, - response: { - class: [ - // Color - 'text-primary-400' - ] - }, - command: { - class: [ - // Color - 'text-primary-400' - ] - }, - commandtext: { - class: [ - // Flexbox - 'flex-1 shrink grow-0', - - // Shape - 'border-0', - - // Spacing - 'p-0', - - // Color - 'bg-transparent text-inherit', - - // Outline - 'outline-none' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/textarea/index.js b/packages/tailwindcss-presets/src/lara/textarea/index.js deleted file mode 100644 index c449cc2ae..000000000 --- a/packages/tailwindcss-presets/src/lara/textarea/index.js +++ /dev/null @@ -1,39 +0,0 @@ -export default { - root: ({ context, props, parent }) => ({ - class: [ - // Font - 'leading-[normal]', - - // Spacing - 'm-0', - 'p-3', - - // Shape - 'rounded-md', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'hover:border-primary': !context.disabled && !props.invalid, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled - }, - - // Filled State *for FloatLabel - { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 }, - - // Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/tieredmenu/index.js b/packages/tailwindcss-presets/src/lara/tieredmenu/index.js deleted file mode 100644 index 17fb00b26..000000000 --- a/packages/tailwindcss-presets/src/lara/tieredmenu/index.js +++ /dev/null @@ -1,119 +0,0 @@ -export default { - root: { - class: [ - // Shape - 'rounded-md', - - // Size - 'min-w-[12rem]', - 'py-1', - - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'border border-surface-200 dark:border-surface-700' - ] - }, - menu: { - class: [ - // Spacings and Shape - 'list-none', - 'm-0', - 'p-0', - 'outline-none' - ] - }, - menuitem: { - class: [ - // Position - 'relative' - ] - }, - content: ({ context }) => ({ - class: [ - //Shape - 'rounded-none', - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active) - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, - 'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active - }, - - // Transitions - 'transition-shadow', - 'duration-200' - ] - }), - action: { - class: [ - 'relative', - // Flexbox - - 'flex', - 'items-center', - - // Spacing - 'py-3', - 'px-5', - - // 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: [ - // Size - 'w-full sm:w-48', - - // Spacing - 'py-1', - 'm-0', - 'list-none', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Position - 'static sm:absolute', - 'z-10', - - // Color - 'bg-surface-0 dark:bg-surface-700' - ] - }, - separator: { - class: 'border-t border-surface-200 dark:border-surface-600 my-1' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/timeline/index.js b/packages/tailwindcss-presets/src/lara/timeline/index.js deleted file mode 100644 index 6fde2a59a..000000000 --- a/packages/tailwindcss-presets/src/lara/timeline/index.js +++ /dev/null @@ -1,81 +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: [ - // Display & Flexbox - 'flex self-baseline', - - // Size - 'w-4 h-4', - - // Appearance - 'rounded-full border-2 border-primary bg-surface-0 dark:bg-surface-900/40' - ] - }, - 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 - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/toast/index.js b/packages/tailwindcss-presets/src/lara/toast/index.js deleted file mode 100644 index 01a4e07b4..000000000 --- a/packages/tailwindcss-presets/src/lara/toast/index.js +++ /dev/null @@ -1,102 +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: [ - 'my-4 rounded-md w-full', - 'border-solid border-0 border-l-[6px]', - 'backdrop-blur-[10px] shadow-md', - - // Colors - { - 'bg-blue-100/70 dark:bg-blue-500/20': props.message.severity == 'info', - 'bg-green-100/70 dark:bg-green-500/20': props.message.severity == 'success', - 'bg-orange-100/70 dark:bg-orange-500/20': props.message.severity == 'warn', - 'bg-red-100/70 dark:bg-red-500/20': props.message.severity == 'error' - }, - { - 'border-blue-500 dark:border-blue-400': props.message.severity == 'info', - 'border-green-500 dark:border-green-400': props.message.severity == 'success', - 'border-orange-500 dark:border-orange-400': props.message.severity == 'warn', - 'border-red-500 dark:border-red-400': props.message.severity == 'error' - }, - { - 'text-blue-700 dark:text-blue-300': props.message.severity == 'info', - 'text-green-700 dark:text-green-300': props.message.severity == 'success', - 'text-orange-700 dark:text-orange-300': props.message.severity == 'warn', - 'text-red-700 dark:text-red-300': props.message.severity == 'error' - } - ] - }), - content: ({ props }) => ({ - class: [ - 'flex p-4', - { - 'items-start': props.message.summary, - 'items-center': !props.message.summary, - }, - ], - }), - icon: { - class: [ - // Sizing and Spacing - 'w-6 h-6', - 'text-lg leading-none mr-2 shrink-0' - ] - }, - text: { - class: [ - // Font and Text - 'text-base leading-none', - 'ml-2', - 'flex-1' - ] - }, - summary: { - class: 'font-bold block' - }, - detail: ({ props }) => ({ - class: ['block', { 'mt-2': props.message.summary }], - }), - closebutton: { - class: [ - // Flexbox - 'flex items-center justify-center', - - // Size - 'w-8 h-8', - - // Spacing and Misc - 'ml-auto relative', - - // Shape - 'rounded-full', - - // Colors - 'bg-transparent', - - // Transitions - 'transition duration-200 ease-in-out', - - // States - 'hover:bg-surface-0/50 dark:hover:bg-surface-0/10', - - // 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/togglebutton/index.js b/packages/tailwindcss-presets/src/lara/togglebutton/index.js deleted file mode 100644 index 25277f5e6..000000000 --- a/packages/tailwindcss-presets/src/lara/togglebutton/index.js +++ /dev/null @@ -1,91 +0,0 @@ -export default { - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: ({ props }) => ({ - class: [ - // Alignments - 'items-center inline-flex flex-1 text-center align-bottom justify-center', - - // Sizes & Spacing - 'px-4 py-3 leading-none', - - // Shapes - 'rounded-md border', - - // Colors - { - 'bg-surface-0 dark:bg-surface-900 ': !props.modelValue, - 'border-surface-200 dark:border-surface-700 ': !props.modelValue && !props.invalid, - 'text-surface-700 dark:text-white/80': !props.modelValue, - 'bg-primary border-primary text-primary-inverse': props.modelValue - }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // States - { - 'peer-hover:bg-surface-50 dark:peer-hover:bg-surface-800/80 peer-hover:border-surface-200 dark:peer-hover:bg-surface-700 peer-hover:text-surface-700 dark:peer-hover:text-white/80': !props.modelValue && !props.invalid, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': props.modelValue, - 'peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50': !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-bold text-center w-full' - }, - 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-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: ({ props }) => ({ - class: [ - ' mr-2', - { - 'text-surface-600 dark:text-white/70': !props.modelValue, - 'text-white dark:text-surface-900': props.modelValue - } - ] - }) -}; diff --git a/packages/tailwindcss-presets/src/lara/toolbar/index.js b/packages/tailwindcss-presets/src/lara/toolbar/index.js deleted file mode 100644 index 4232baad4..000000000 --- a/packages/tailwindcss-presets/src/lara/toolbar/index.js +++ /dev/null @@ -1,28 +0,0 @@ -export default { - root: { - class: [ - // Flex & Alignment - 'flex items-center justify-between flex-wrap', - 'gap-2', - - // Spacing - 'p-5', - - // Shape - 'rounded-md', - - // Color - 'bg-surface-50 dark:bg-surface-800', - 'border border-surface-200 dark:border-surface-700' - ] - }, - start: { - class: 'flex items-center' - }, - center: { - class: 'flex items-center' - }, - end: { - class: 'flex items-center' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/tooltip/index.js b/packages/tailwindcss-presets/src/lara/tooltip/index.js deleted file mode 100644 index 2856bf3b6..000000000 --- a/packages/tailwindcss-presets/src/lara/tooltip/index.js +++ /dev/null @@ -1,46 +0,0 @@ -export default { - root: ({ context, props }) => ({ - 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, props }) => ({ - class: [ - // Position - - 'absolute', - - // Size - 'w-0', - 'h-0', - - // Shape - 'border-transparent', - 'border-solid', - { - 'border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-surface-600': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom), - 'border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-surface-600': context?.left, - 'border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-surface-600': context?.top, - 'border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-surface-600': context?.bottom - }, - - // Spacing - { - '-mt-1 ': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom), - '-mt-1': context?.left, - '-ml-1': context?.top || context?.bottom - } - ] - }), - text: { - class: ['p-3', 'bg-surface-600 dark:bg-surface-700', 'text-white', 'leading-none', 'rounded-md', 'whitespace-pre-line', 'break-words'] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/tree/index.js b/packages/tailwindcss-presets/src/lara/tree/index.js deleted file mode 100644 index 75ff42942..000000000 --- a/packages/tailwindcss-presets/src/lara/tree/index.js +++ /dev/null @@ -1,258 +0,0 @@ -export default { - root: { - class: [ - // Space - 'p-5', - - // Shape - 'rounded-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-700 dark:text-white/80', - 'border border-solid border-surface-200 dark:border-surface-700' - ] - }, - wrapper: { - class: ['overflow-auto'] - }, - container: { - class: [ - // Spacing - 'm-0 p-0', - - // Misc - 'list-none overflow-auto' - ] - }, - node: { - class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50'] - }, - content: ({ context, props }) => ({ - class: [ - // Flex and Alignment - 'flex items-center', - - // Shape - 'rounded-md', - - // Spacing - 'p-2', - - // Colors - 'text-surface-600 dark:text-white/70', - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - - // States - { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected }, - - // Transition - 'transition-shadow duration-200', - - { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' } - ] - }), - toggler: ({ context }) => ({ - class: [ - // Flex and Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full', - - // Size - 'w-8 h-8', - - // Spacing - 'mr-2', - - // Colors - 'bg-transparent', - { - 'text-surface-500 dark:text-white': !context.selected, - 'text-primary-600 dark:text-white': context.selected, - invisible: context.leaf - }, - - // States - 'hover:bg-surface-200/20 dark:hover:bg-surface-500/20', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'cursor-pointer select-none' - ] - }), - nodeCheckbox: ({ props, context, instance }) => ({ - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: { - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }, - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - { - 'text-white dark:text-surface-900': !instance.partialChecked, - 'text-gray dark:text-white': instance.partialChecked - }, - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }), - nodeicon: { - class: [ - // Space - 'mr-2', - - // Color - 'text-surface-600 dark:text-white/70' - ] - }, - subgroup: { - class: ['m-0 list-none p-0 pl-2 mt-1'] - }, - filtercontainer: { - class: [ - 'relative block', - - // Space - 'mb-2', - - // Size - 'w-full' - ] - }, - input: { - class: [ - 'relative', - // Font - 'leading-none', - - // Spacing - 'm-0', - 'p-3 pr-10', - - // Size - 'w-full', - - // Shape - 'rounded-md', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-600', - - // States - 'hover:border-primary', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', - - // Transition & Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }, - loadingicon: { - class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'] - }, - searchicon: { - class: [ - // Position - 'absolute top-1/2 -mt-2 right-3', - - // Color - 'text-surface-600 dark:hover:text-white/70' - ] - } -}; diff --git a/packages/tailwindcss-presets/src/lara/treeselect/index.js b/packages/tailwindcss-presets/src/lara/treeselect/index.js deleted file mode 100644 index fb5e9748e..000000000 --- a/packages/tailwindcss-presets/src/lara/treeselect/index.js +++ /dev/null @@ -1,352 +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-900', - 'border', - { 'border-surface-300 dark:border-surface-600': !props.invalid }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-all', - 'duration-200', - - // States - { 'hover:border-primary': !props.invalid }, - { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused }, - - // Misc - 'cursor-pointer', - 'select-none', - { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled } - ] - }), - labelContainer: { - class: ['overflow-hidden flex flex-auto cursor-pointer'] - }, - label: { - class: [ - 'block leading-[normal]', - - // Space - 'p-3', - - // Color - 'text-surface-800 dark:text-white/80', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis' - ] - }, - trigger: { - class: [ - // Flexbox - 'flex items-center justify-center', - 'shrink-0', - - // Color and Background - 'bg-transparent', - 'text-surface-500', - - // Size - 'w-12', - - // Shape - 'rounded-tr-md', - 'rounded-br-md' - ] - }, - panel: { - class: [ - // Position - 'absolute top-0 left-0', - - // Shape - 'border-0 dark:border', - 'rounded-md', - 'shadow-md', - - // Color - 'bg-surface-0 dark:bg-surface-800', - 'text-surface-800 dark:text-white/80', - 'dark:border-surface-700' - ] - }, - wrapper: { - class: [ - // Sizing - 'max-h-[200px]', - - // Misc - 'overflow-auto' - ] - }, - tree: { - root: { - class: [ - // Space - 'p-5' - ] - }, - wrapper: { - class: ['overflow-auto'] - }, - container: { - class: [ - // Spacing - 'm-0 p-0', - - // Misc - 'list-none overflow-auto' - ] - }, - node: { - class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50'] - }, - content: ({ context, props }) => ({ - class: [ - // Flex and Alignment - 'flex items-center', - - // Shape - 'rounded-md', - - // Spacing - 'p-2', - - // Colors - 'text-surface-600 dark:text-white/70', - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - - // States - { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected }, - - // Transition - 'transition-shadow duration-200', - - { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' } - ] - }), - toggler: ({ context }) => ({ - class: [ - // Flex and Alignment - 'inline-flex items-center justify-center', - - // Shape - 'border-0 rounded-full', - - // Size - 'w-8 h-8', - - // Spacing - 'mr-2', - - // Colors - 'bg-transparent', - { - 'text-surface-500 dark:text-white': !context.selected, - 'text-primary-600 dark:text-white': context.selected, - invisible: context.leaf - }, - - // States - 'hover:bg-surface-200/20 dark:hover:bg-surface-500/20', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'cursor-pointer select-none' - ] - }), - nodeCheckbox: ({ props, context, instance }) => ({ - root: { - class: [ - 'relative', - - // Alignment - 'inline-flex', - 'align-bottom', - - // Size - 'w-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: { - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }, - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - { - 'text-white dark:text-surface-900': !instance.partialChecked, - 'text-gray dark:text-white': instance.partialChecked - }, - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }), - nodeicon: { - class: [ - // Space - 'mr-2', - - // Color - 'text-surface-600 dark:text-white/70' - ] - }, - subgroup: { - class: ['m-0 list-none p-0 pl-2 mt-1'] - }, - filtercontainer: { - class: [ - 'relative block', - - // Space - 'mb-2', - - // Size - 'w-full' - ] - }, - input: { - class: [ - 'relative', - // Font - 'leading-none', - - // Spacing - 'm-0', - 'p-3 pr-10', - - // Size - 'w-full', - - // Shape - 'rounded-md', - - // Colors - 'text-surface-600 dark:text-surface-200', - 'placeholder:text-surface-400 dark:placeholder:text-surface-500', - 'bg-surface-0 dark:bg-surface-900', - 'border border-surface-300 dark:border-surface-600', - - // States - 'hover:border-primary', - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50', - - // Transition & Misc - 'appearance-none', - 'transition-colors duration-200' - ] - }, - loadingicon: { - class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'] - }, - searchicon: { - class: [ - // Position - 'absolute top-1/2 -mt-2 right-3', - - // Color - 'text-surface-600 dark:hover:text-white/70' - ] - } - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/treetable/index.js b/packages/tailwindcss-presets/src/lara/treetable/index.js deleted file mode 100644 index 9098dd34c..000000000 --- a/packages/tailwindcss-presets/src/lara/treetable/index.js +++ /dev/null @@ -1,427 +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-bold', - - // Shape - props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0', - - // Spacing - 'p-4', - - // Color - 'bg-surface-50 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - 'text-surface-700 dark:text-white/80' - ] - }), - footer: { - class: [ - // Background, Border & Text - 'bg-slate-50 text-slate-700', - 'border border-x-0 border-t-0 border-surface-50', - // Padding & Font - 'p-4 font-bold', - // Dark Mode - 'dark:bg-surface-900 dark:text-white/70 dark:border-surface-700' - ] - }, - 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 - 'dark:text-white/80', - { 'bg-primary-highlight text-primary-highlight-inverse': context.selected }, - { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected }, - - // Hover & Flexbox - { - 'hover:bg-surface-300/20 hover:text-surface-600': context.selectable && !context.selected - }, - 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50', - - // Transition - { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover } - ] - }), - headercell: ({ context, props }) => ({ - class: [ - 'font-bold', - - // 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' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', - - // Color - (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - - // States - { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - { 'transition duration-200': props.sortable === '' || props.sortable }, - - // Misc - { - 'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen - } - ] - }), - column: { - headercell: ({ context, props }) => ({ - class: [ - 'font-bold', - - // 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' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', - - // Color - (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800', - 'border-surface-200 dark:border-surface-700', - - // States - { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted }, - 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - { 'transition duration-200': props.sortable === '' || props.sortable }, - - // Misc - { - 'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen - } - ] - }), - bodycell: ({ context }) => ({ - class: [ - // 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' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-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-8 h-8', - - // Shape - 'border-0 rounded-full', - - // Color - 'text-surface-500 dark:text-white/70', - 'bg-transparent', - - // States - 'hover:bg-surface-50 dark:hover:bg-surface-700', - 'focus-visible:outline-none focus-visible:outline-offset-0', - 'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50', - - // Transition - 'transition duration-200', - - // Misc - 'overflow-hidden', - 'cursor-pointer select-none' - ] - }, - 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-6', - 'h-6', - - // Spacing - 'mr-2', - - // Misc - 'cursor-pointer', - 'select-none' - ] - }, - box: { - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }, - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - icon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - { - 'text-white dark:text-surface-900': !instance.partialChecked, - 'text-gray dark:text-white': instance.partialChecked - }, - - // Transitions - 'transition-all', - 'duration-200' - ] - } - }), - - 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' - } -}; diff --git a/packages/tailwindcss-presets/src/lara/tristatecheckbox/index.js b/packages/tailwindcss-presets/src/lara/tristatecheckbox/index.js deleted file mode 100644 index cbc3e6837..000000000 --- a/packages/tailwindcss-presets/src/lara/tristatecheckbox/index.js +++ /dev/null @@ -1,104 +0,0 @@ -export default { - root: { - class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6'] - }, - input: { - class: [ - 'peer', - - // Size - 'w-full ', - 'h-full', - - // Position - 'absolute', - 'top-0 left-0', - 'z-10', - - // Spacing - 'p-0', - 'm-0', - - // Shape - 'opacity-0', - 'rounded-md', - 'outline-none', - 'border-2 border-surface-200 dark:border-surface-700', - - // Misc - 'appearance-none', - 'cursor-pointer' - ] - }, - box: ({ props, context }) => ({ - class: [ - // Alignment - 'flex', - 'items-center', - 'justify-center', - - // Size - 'w-6', - 'h-6', - - // Shape - 'rounded-md', - 'border-2', - - // Colors - { - 'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked, - 'border-primary bg-primary': context.checked - }, - - // States - { - 'peer-hover:border-primary': !props.disabled && !context.checked, - 'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked, - 'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled, - 'cursor-default opacity-60': props.disabled - }, - - // Invalid State - { 'border-red-500 dark:border-red-400': props.invalid }, - - // Transitions - 'transition-colors', - 'duration-200' - ] - }), - checkicon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - }, - uncheckicon: { - class: [ - // Font - 'text-base leading-none', - - // Size - 'w-4', - 'h-4', - - // Colors - 'text-white dark:text-surface-900', - - // Transitions - 'transition-all', - 'duration-200' - ] - } -};