diff --git a/resources/js/presets/aura/accordion/index.js b/resources/js/presets/aura/accordion/index.js new file mode 100644 index 0000000..3fe0925 --- /dev/null +++ b/resources/js/presets/aura/accordion/index.js @@ -0,0 +1,73 @@ +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/resources/js/presets/aura/autocomplete/index.js b/resources/js/presets/aura/autocomplete/index.js new file mode 100644 index 0000000..9438497 --- /dev/null +++ b/resources/js/presets/aura/autocomplete/index.js @@ -0,0 +1,253 @@ +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/resources/js/presets/aura/avatar/index.js b/resources/js/presets/aura/avatar/index.js new file mode 100644 index 0000000..9c77beb --- /dev/null +++ b/resources/js/presets/aura/avatar/index.js @@ -0,0 +1,43 @@ +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/resources/js/presets/aura/avatargroup/index.js b/resources/js/presets/aura/avatargroup/index.js new file mode 100644 index 0000000..d267e06 --- /dev/null +++ b/resources/js/presets/aura/avatargroup/index.js @@ -0,0 +1,5 @@ +export default { + root: { + class: 'flex items-center' + } +}; diff --git a/resources/js/presets/aura/badge/index.js b/resources/js/presets/aura/badge/index.js new file mode 100644 index 0000000..c9e3505 --- /dev/null +++ b/resources/js/presets/aura/badge/index.js @@ -0,0 +1,43 @@ +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/resources/js/presets/aura/badgedirective/index.js b/resources/js/presets/aura/badgedirective/index.js new file mode 100644 index 0000000..e480839 --- /dev/null +++ b/resources/js/presets/aura/badgedirective/index.js @@ -0,0 +1,43 @@ +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/resources/js/presets/aura/blockui/index.js b/resources/js/presets/aura/blockui/index.js new file mode 100644 index 0000000..0c81a0c --- /dev/null +++ b/resources/js/presets/aura/blockui/index.js @@ -0,0 +1,8 @@ +export default { + root: { + class: 'relative' + }, + mask: { + class: 'bg-black/40' + } +}; diff --git a/resources/js/presets/aura/breadcrumb/index.js b/resources/js/presets/aura/breadcrumb/index.js new file mode 100644 index 0000000..81c49f7 --- /dev/null +++ b/resources/js/presets/aura/breadcrumb/index.js @@ -0,0 +1,63 @@ +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/resources/js/presets/aura/button/index.js b/resources/js/presets/aura/button/index.js new file mode 100644 index 0000000..84eb024 --- /dev/null +++ b/resources/js/presets/aura/button/index.js @@ -0,0 +1,237 @@ +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/resources/js/presets/aura/calendar/index.js b/resources/js/presets/aura/calendar/index.js new file mode 100644 index 0000000..d3d7fb4 --- /dev/null +++ b/resources/js/presets/aura/calendar/index.js @@ -0,0 +1,663 @@ +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/resources/js/presets/aura/card/index.js b/resources/js/presets/aura/card/index.js new file mode 100644 index 0000000..eef7c57 --- /dev/null +++ b/resources/js/presets/aura/card/index.js @@ -0,0 +1,53 @@ +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/resources/js/presets/aura/carousel/index.js b/resources/js/presets/aura/carousel/index.js new file mode 100644 index 0000000..9bd0c16 --- /dev/null +++ b/resources/js/presets/aura/carousel/index.js @@ -0,0 +1,157 @@ +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/resources/js/presets/aura/cascadeselect/index.js b/resources/js/presets/aura/cascadeselect/index.js new file mode 100644 index 0000000..f432145 --- /dev/null +++ b/resources/js/presets/aura/cascadeselect/index.js @@ -0,0 +1,200 @@ +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/resources/js/presets/aura/checkbox/index.js b/resources/js/presets/aura/checkbox/index.js new file mode 100644 index 0000000..e02d8c0 --- /dev/null +++ b/resources/js/presets/aura/checkbox/index.js @@ -0,0 +1,101 @@ +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/resources/js/presets/aura/chip/index.js b/resources/js/presets/aura/chip/index.js new file mode 100644 index 0000000..09f175b --- /dev/null +++ b/resources/js/presets/aura/chip/index.js @@ -0,0 +1,45 @@ +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/resources/js/presets/aura/chips/index.js b/resources/js/presets/aura/chips/index.js new file mode 100644 index 0000000..eae7969 --- /dev/null +++ b/resources/js/presets/aura/chips/index.js @@ -0,0 +1,111 @@ +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/resources/js/presets/aura/colorpicker/index.js b/resources/js/presets/aura/colorpicker/index.js new file mode 100644 index 0000000..ae532de --- /dev/null +++ b/resources/js/presets/aura/colorpicker/index.js @@ -0,0 +1,126 @@ +export default { + root: ({ props }) => ({ + class: [ + // Display + 'inline-block', + + // Misc + { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } + ] + }), + input: { + class: [ + // Font + '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/resources/js/presets/aura/confirmpopup/index.js b/resources/js/presets/aura/confirmpopup/index.js new file mode 100644 index 0000000..0bc7a9a --- /dev/null +++ b/resources/js/presets/aura/confirmpopup/index.js @@ -0,0 +1,106 @@ +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/resources/js/presets/aura/contextmenu/index.js b/resources/js/presets/aura/contextmenu/index.js new file mode 100644 index 0000000..ee5df85 --- /dev/null +++ b/resources/js/presets/aura/contextmenu/index.js @@ -0,0 +1,125 @@ +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/resources/js/presets/aura/datatable/index.js b/resources/js/presets/aura/datatable/index.js new file mode 100644 index 0000000..3c115af --- /dev/null +++ b/resources/js/presets/aura/datatable/index.js @@ -0,0 +1,1155 @@ +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/resources/js/presets/aura/dataview/index.js b/resources/js/presets/aura/dataview/index.js new file mode 100644 index 0000000..d8b012e --- /dev/null +++ b/resources/js/presets/aura/dataview/index.js @@ -0,0 +1,40 @@ +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/resources/js/presets/aura/dataviewlayoutoptions/index.js b/resources/js/presets/aura/dataviewlayoutoptions/index.js new file mode 100644 index 0000000..151c1ad --- /dev/null +++ b/resources/js/presets/aura/dataviewlayoutoptions/index.js @@ -0,0 +1,58 @@ +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/resources/js/presets/aura/deferred/index.js b/resources/js/presets/aura/deferred/index.js new file mode 100644 index 0000000..2064371 --- /dev/null +++ b/resources/js/presets/aura/deferred/index.js @@ -0,0 +1,3 @@ +export default { + root: {} +}; diff --git a/resources/js/presets/aura/dialog/index.js b/resources/js/presets/aura/dialog/index.js new file mode 100644 index 0000000..3db647d --- /dev/null +++ b/resources/js/presets/aura/dialog/index.js @@ -0,0 +1,239 @@ +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/resources/js/presets/aura/divider/index.js b/resources/js/presets/aura/divider/index.js new file mode 100644 index 0000000..b440697 --- /dev/null +++ b/resources/js/presets/aura/divider/index.js @@ -0,0 +1,67 @@ +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/resources/js/presets/aura/dock/index.js b/resources/js/presets/aura/dock/index.js new file mode 100644 index 0000000..5a33ade --- /dev/null +++ b/resources/js/presets/aura/dock/index.js @@ -0,0 +1,93 @@ +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/resources/js/presets/aura/dropdown/index.js b/resources/js/presets/aura/dropdown/index.js new file mode 100644 index 0000000..91f6a7e --- /dev/null +++ b/resources/js/presets/aura/dropdown/index.js @@ -0,0 +1,263 @@ +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/resources/js/presets/aura/fieldset/index.js b/resources/js/presets/aura/fieldset/index.js new file mode 100644 index 0000000..88c0503 --- /dev/null +++ b/resources/js/presets/aura/fieldset/index.js @@ -0,0 +1,81 @@ +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/resources/js/presets/aura/fileupload/index.js b/resources/js/presets/aura/fileupload/index.js new file mode 100644 index 0000000..310d03b --- /dev/null +++ b/resources/js/presets/aura/fileupload/index.js @@ -0,0 +1,175 @@ +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/resources/js/presets/aura/floatlabel/index.js b/resources/js/presets/aura/floatlabel/index.js new file mode 100644 index 0000000..557808f --- /dev/null +++ b/resources/js/presets/aura/floatlabel/index.js @@ -0,0 +1,26 @@ +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/resources/js/presets/aura/galleria/index.js b/resources/js/presets/aura/galleria/index.js new file mode 100644 index 0000000..3a261d3 --- /dev/null +++ b/resources/js/presets/aura/galleria/index.js @@ -0,0 +1,308 @@ +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/resources/js/presets/aura/global.js b/resources/js/presets/aura/global.js new file mode 100644 index 0000000..42552db --- /dev/null +++ b/resources/js/presets/aura/global.js @@ -0,0 +1,90 @@ +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/resources/js/presets/aura/iconfield/index.js b/resources/js/presets/aura/iconfield/index.js new file mode 100644 index 0000000..108735b --- /dev/null +++ b/resources/js/presets/aura/iconfield/index.js @@ -0,0 +1,22 @@ +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/resources/js/presets/aura/image/index.js b/resources/js/presets/aura/image/index.js new file mode 100644 index 0000000..775da8e --- /dev/null +++ b/resources/js/presets/aura/image/index.js @@ -0,0 +1,206 @@ +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/resources/js/presets/aura/index.js b/resources/js/presets/aura/index.js new file mode 100644 index 0000000..49eb5e7 --- /dev/null +++ b/resources/js/presets/aura/index.js @@ -0,0 +1,207 @@ +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/resources/js/presets/aura/inlinemessage/index.js b/resources/js/presets/aura/inlinemessage/index.js new file mode 100644 index 0000000..9eb0187 --- /dev/null +++ b/resources/js/presets/aura/inlinemessage/index.js @@ -0,0 +1,42 @@ +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/resources/js/presets/aura/inplace/index.js b/resources/js/presets/aura/inplace/index.js new file mode 100644 index 0000000..691230b --- /dev/null +++ b/resources/js/presets/aura/inplace/index.js @@ -0,0 +1,27 @@ +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/resources/js/presets/aura/inputgroup/index.js b/resources/js/presets/aura/inputgroup/index.js new file mode 100644 index 0000000..cce7111 --- /dev/null +++ b/resources/js/presets/aura/inputgroup/index.js @@ -0,0 +1,5 @@ +export default { + root: { + class: ['flex items-stretch', 'w-full'] + } +}; diff --git a/resources/js/presets/aura/inputgroupaddon/index.js b/resources/js/presets/aura/inputgroupaddon/index.js new file mode 100644 index 0000000..888b311 --- /dev/null +++ b/resources/js/presets/aura/inputgroupaddon/index.js @@ -0,0 +1,28 @@ +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/resources/js/presets/aura/inputmask/index.js b/resources/js/presets/aura/inputmask/index.js new file mode 100644 index 0000000..2e43d34 --- /dev/null +++ b/resources/js/presets/aura/inputmask/index.js @@ -0,0 +1,39 @@ +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/resources/js/presets/aura/inputnumber/index.js b/resources/js/presets/aura/inputnumber/index.js new file mode 100644 index 0000000..1fa75b8 --- /dev/null +++ b/resources/js/presets/aura/inputnumber/index.js @@ -0,0 +1,172 @@ +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/resources/js/presets/aura/inputotp/index.js b/resources/js/presets/aura/inputotp/index.js new file mode 100644 index 0000000..f3e8640 --- /dev/null +++ b/resources/js/presets/aura/inputotp/index.js @@ -0,0 +1,57 @@ +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/resources/js/presets/aura/inputswitch/index.js b/resources/js/presets/aura/inputswitch/index.js new file mode 100644 index 0000000..b3cdd9a --- /dev/null +++ b/resources/js/presets/aura/inputswitch/index.js @@ -0,0 +1,79 @@ +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/resources/js/presets/aura/inputtext/index.js b/resources/js/presets/aura/inputtext/index.js new file mode 100644 index 0000000..323f429 --- /dev/null +++ b/resources/js/presets/aura/inputtext/index.js @@ -0,0 +1,51 @@ +export default { + 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?.$name == 'FloatLabel' && context.filled }, + + // Misc + 'appearance-none', + 'transition-colors duration-200' + ] + }) +}; diff --git a/resources/js/presets/aura/knob/index.js b/resources/js/presets/aura/knob/index.js new file mode 100644 index 0000000..21d2c61 --- /dev/null +++ b/resources/js/presets/aura/knob/index.js @@ -0,0 +1,44 @@ +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/resources/js/presets/aura/listbox/index.js b/resources/js/presets/aura/listbox/index.js new file mode 100644 index 0000000..f5dc316 --- /dev/null +++ b/resources/js/presets/aura/listbox/index.js @@ -0,0 +1,146 @@ +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/resources/js/presets/aura/megamenu/index.js b/resources/js/presets/aura/megamenu/index.js new file mode 100644 index 0000000..8b6d023 --- /dev/null +++ b/resources/js/presets/aura/megamenu/index.js @@ -0,0 +1,196 @@ +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/resources/js/presets/aura/menu/index.js b/resources/js/presets/aura/menu/index.js new file mode 100644 index 0000000..2590937 --- /dev/null +++ b/resources/js/presets/aura/menu/index.js @@ -0,0 +1,114 @@ +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/resources/js/presets/aura/menubar/index.js b/resources/js/presets/aura/menubar/index.js new file mode 100644 index 0000000..83bc770 --- /dev/null +++ b/resources/js/presets/aura/menubar/index.js @@ -0,0 +1,177 @@ +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/resources/js/presets/aura/message/index.js b/resources/js/presets/aura/message/index.js new file mode 100644 index 0000000..939eecf --- /dev/null +++ b/resources/js/presets/aura/message/index.js @@ -0,0 +1,102 @@ +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/resources/js/presets/aura/metergroup/index.js b/resources/js/presets/aura/metergroup/index.js new file mode 100644 index 0000000..2269682 --- /dev/null +++ b/resources/js/presets/aura/metergroup/index.js @@ -0,0 +1,97 @@ +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/resources/js/presets/aura/multiselect/index.js b/resources/js/presets/aura/multiselect/index.js new file mode 100644 index 0000000..a186d00 --- /dev/null +++ b/resources/js/presets/aura/multiselect/index.js @@ -0,0 +1,543 @@ +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/resources/js/presets/aura/orderlist/index.js b/resources/js/presets/aura/orderlist/index.js new file mode 100644 index 0000000..24db269 --- /dev/null +++ b/resources/js/presets/aura/orderlist/index.js @@ -0,0 +1,277 @@ +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/resources/js/presets/aura/organizationchart/index.js b/resources/js/presets/aura/organizationchart/index.js new file mode 100644 index 0000000..47b78c9 --- /dev/null +++ b/resources/js/presets/aura/organizationchart/index.js @@ -0,0 +1,138 @@ +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/resources/js/presets/aura/overlaypanel/index.js b/resources/js/presets/aura/overlaypanel/index.js new file mode 100644 index 0000000..f4208cf --- /dev/null +++ b/resources/js/presets/aura/overlaypanel/index.js @@ -0,0 +1,29 @@ +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/resources/js/presets/aura/paginator/index.js b/resources/js/presets/aura/paginator/index.js new file mode 100644 index 0000000..1aa9713 --- /dev/null +++ b/resources/js/presets/aura/paginator/index.js @@ -0,0 +1,526 @@ +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/resources/js/presets/aura/panel/index.js b/resources/js/presets/aura/panel/index.js new file mode 100644 index 0000000..9bd92d2 --- /dev/null +++ b/resources/js/presets/aura/panel/index.js @@ -0,0 +1,97 @@ +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/resources/js/presets/aura/panelmenu/index.js b/resources/js/presets/aura/panelmenu/index.js new file mode 100644 index 0000000..0d5af4d --- /dev/null +++ b/resources/js/presets/aura/panelmenu/index.js @@ -0,0 +1,126 @@ +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/resources/js/presets/aura/password/index.js b/resources/js/presets/aura/password/index.js new file mode 100644 index 0000000..8facee2 --- /dev/null +++ b/resources/js/presets/aura/password/index.js @@ -0,0 +1,117 @@ +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/resources/js/presets/aura/picklist/index.js b/resources/js/presets/aura/picklist/index.js new file mode 100644 index 0000000..cc9b48e --- /dev/null +++ b/resources/js/presets/aura/picklist/index.js @@ -0,0 +1,714 @@ +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/resources/js/presets/aura/progressbar/index.js b/resources/js/presets/aura/progressbar/index.js new file mode 100644 index 0000000..7cc565a --- /dev/null +++ b/resources/js/presets/aura/progressbar/index.js @@ -0,0 +1,58 @@ +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/resources/js/presets/aura/progressspinner/index.js b/resources/js/presets/aura/progressspinner/index.js new file mode 100644 index 0000000..4e1faec --- /dev/null +++ b/resources/js/presets/aura/progressspinner/index.js @@ -0,0 +1,51 @@ +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/resources/js/presets/aura/radiobutton/index.js b/resources/js/presets/aura/radiobutton/index.js new file mode 100644 index 0000000..9fa627c --- /dev/null +++ b/resources/js/presets/aura/radiobutton/index.js @@ -0,0 +1,103 @@ +export default { + root: { + class: [ + 'relative', + + // Flexbox & Alignment + 'inline-flex', + 'align-bottom', + + // Size + 'w-5 h-5', + + // Misc + 'cursor-pointer', + 'select-none' + ] + }, + box: ({ props }) => ({ + class: [ + // Flexbox + 'flex justify-center items-center', + + // Size + 'w-5 h-5', + + // Shape + 'border', + 'rounded-full', + + // Transition + 'transition duration-200 ease-in-out', + + // Colors + { 'bg-surface-0 dark:bg-surface-950': !props.disabled }, + { + 'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined, + 'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid, + 'border-primary': props.value == props.modelValue && props.value !== undefined && !props.disabled + }, + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // States + { + 'peer-hover:border-surface-400 dark:peer-hover:border-surface-400': !props.disabled && !props.invalid && props.value !== props.modelValue, + 'peer-hover:border-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined, + 'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300': !props.disabled && props.value == props.modelValue && props.value !== undefined, + 'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled, + 'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default': props.disabled + } + ] + }), + input: { + class: [ + 'peer', + + // Size + 'w-full ', + 'h-full', + + // Position + 'absolute', + 'top-0 left-0', + 'z-10', + + // Spacing + 'p-0', + 'm-0', + + // Shape + 'opacity-0', + 'rounded-md', + 'outline-none', + 'border-1 border-surface-200 dark:border-surface-700', + + // Misc + 'appearance-none', + 'cursor-pointer' + ] + }, + icon: ({ props }) => ({ + class: [ + 'block', + + // Shape + 'rounded-full', + + // Size + 'w-3 h-3', + + // Conditions + { + 'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue, + 'bg-primary': props.value == props.modelValue, + 'backface-hidden invisible scale-[0.1]': props.value !== props.modelValue, + 'transform visible translate-z-0 scale-[1,1]': props.value == props.modelValue + }, + + // Transition + 'transition duration-200' + ] + }) +}; diff --git a/resources/js/presets/aura/rating/index.js b/resources/js/presets/aura/rating/index.js new file mode 100644 index 0000000..4d80a15 --- /dev/null +++ b/resources/js/presets/aura/rating/index.js @@ -0,0 +1,92 @@ +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/resources/js/presets/aura/ripple/index.js b/resources/js/presets/aura/ripple/index.js new file mode 100644 index 0000000..429c249 --- /dev/null +++ b/resources/js/presets/aura/ripple/index.js @@ -0,0 +1,6 @@ +export default { + root: { + class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'], + style: 'transform: scale(0)' + } +}; diff --git a/resources/js/presets/aura/scrollpanel/index.js b/resources/js/presets/aura/scrollpanel/index.js new file mode 100644 index 0000000..d41e690 --- /dev/null +++ b/resources/js/presets/aura/scrollpanel/index.js @@ -0,0 +1,77 @@ +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/resources/js/presets/aura/scrolltop/index.js b/resources/js/presets/aura/scrolltop/index.js new file mode 100644 index 0000000..7b29dbd --- /dev/null +++ b/resources/js/presets/aura/scrolltop/index.js @@ -0,0 +1,43 @@ +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/resources/js/presets/aura/selectbutton/index.js b/resources/js/presets/aura/selectbutton/index.js new file mode 100644 index 0000000..ddf6b61 --- /dev/null +++ b/resources/js/presets/aura/selectbutton/index.js @@ -0,0 +1,52 @@ +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-0 dark:text-white/80 before:bg-primary-500 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/resources/js/presets/aura/sidebar/index.js b/resources/js/presets/aura/sidebar/index.js new file mode 100644 index 0000000..de985f1 --- /dev/null +++ b/resources/js/presets/aura/sidebar/index.js @@ -0,0 +1,149 @@ +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/resources/js/presets/aura/skeleton/index.js b/resources/js/presets/aura/skeleton/index.js new file mode 100644 index 0000000..d459aaa --- /dev/null +++ b/resources/js/presets/aura/skeleton/index.js @@ -0,0 +1,16 @@ +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/resources/js/presets/aura/slider/index.js b/resources/js/presets/aura/slider/index.js new file mode 100644 index 0000000..0bce0ce --- /dev/null +++ b/resources/js/presets/aura/slider/index.js @@ -0,0 +1,138 @@ +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/resources/js/presets/aura/speeddial/index.js b/resources/js/presets/aura/speeddial/index.js new file mode 100644 index 0000000..84a782e --- /dev/null +++ b/resources/js/presets/aura/speeddial/index.js @@ -0,0 +1,302 @@ +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/resources/js/presets/aura/splitbutton/index.js b/resources/js/presets/aura/splitbutton/index.js new file mode 100644 index 0000000..bef60ae --- /dev/null +++ b/resources/js/presets/aura/splitbutton/index.js @@ -0,0 +1,553 @@ +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/resources/js/presets/aura/splitter/index.js b/resources/js/presets/aura/splitter/index.js new file mode 100644 index 0000000..412d03f --- /dev/null +++ b/resources/js/presets/aura/splitter/index.js @@ -0,0 +1,68 @@ +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/resources/js/presets/aura/splitterpanel/index.js b/resources/js/presets/aura/splitterpanel/index.js new file mode 100644 index 0000000..6a21cd3 --- /dev/null +++ b/resources/js/presets/aura/splitterpanel/index.js @@ -0,0 +1,5 @@ +export default { + root: ({ context }) => ({ + class: ['grow', { flex: context.nested }] + }) +}; diff --git a/resources/js/presets/aura/stepper/index.js b/resources/js/presets/aura/stepper/index.js new file mode 100644 index 0000000..93026b0 --- /dev/null +++ b/resources/js/presets/aura/stepper/index.js @@ -0,0 +1,161 @@ +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/resources/js/presets/aura/steps/index.js b/resources/js/presets/aura/steps/index.js new file mode 100644 index 0000000..f4cb711 --- /dev/null +++ b/resources/js/presets/aura/steps/index.js @@ -0,0 +1,113 @@ +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/resources/js/presets/aura/tabmenu/index.js b/resources/js/presets/aura/tabmenu/index.js new file mode 100644 index 0000000..e0cd44e --- /dev/null +++ b/resources/js/presets/aura/tabmenu/index.js @@ -0,0 +1,70 @@ +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/resources/js/presets/aura/tabview/index.js b/resources/js/presets/aura/tabview/index.js new file mode 100644 index 0000000..d7a0b4c --- /dev/null +++ b/resources/js/presets/aura/tabview/index.js @@ -0,0 +1,155 @@ +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/resources/js/presets/aura/tag/index.js b/resources/js/presets/aura/tag/index.js new file mode 100644 index 0000000..79f659e --- /dev/null +++ b/resources/js/presets/aura/tag/index.js @@ -0,0 +1,37 @@ +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/resources/js/presets/aura/terminal/index.js b/resources/js/presets/aura/terminal/index.js new file mode 100644 index 0000000..d714566 --- /dev/null +++ b/resources/js/presets/aura/terminal/index.js @@ -0,0 +1,60 @@ +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/resources/js/presets/aura/textarea/index.js b/resources/js/presets/aura/textarea/index.js new file mode 100644 index 0000000..4f72b9e --- /dev/null +++ b/resources/js/presets/aura/textarea/index.js @@ -0,0 +1,41 @@ +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/resources/js/presets/aura/tieredmenu/index.js b/resources/js/presets/aura/tieredmenu/index.js new file mode 100644 index 0000000..3890761 --- /dev/null +++ b/resources/js/presets/aura/tieredmenu/index.js @@ -0,0 +1,118 @@ +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/resources/js/presets/aura/timeline/index.js b/resources/js/presets/aura/timeline/index.js new file mode 100644 index 0000000..29db67f --- /dev/null +++ b/resources/js/presets/aura/timeline/index.js @@ -0,0 +1,88 @@ +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/resources/js/presets/aura/toast/index.js b/resources/js/presets/aura/toast/index.js new file mode 100644 index 0000000..93a9d06 --- /dev/null +++ b/resources/js/presets/aura/toast/index.js @@ -0,0 +1,117 @@ +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/resources/js/presets/aura/togglebutton/index.js b/resources/js/presets/aura/togglebutton/index.js new file mode 100644 index 0000000..83c72c1 --- /dev/null +++ b/resources/js/presets/aura/togglebutton/index.js @@ -0,0 +1,90 @@ +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/resources/js/presets/aura/toolbar/index.js b/resources/js/presets/aura/toolbar/index.js new file mode 100644 index 0000000..6a825fe --- /dev/null +++ b/resources/js/presets/aura/toolbar/index.js @@ -0,0 +1,28 @@ +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/resources/js/presets/aura/tooltip/index.js b/resources/js/presets/aura/tooltip/index.js new file mode 100644 index 0000000..212f767 --- /dev/null +++ b/resources/js/presets/aura/tooltip/index.js @@ -0,0 +1,45 @@ +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/resources/js/presets/aura/tree/index.js b/resources/js/presets/aura/tree/index.js new file mode 100644 index 0000000..f1f1e54 --- /dev/null +++ b/resources/js/presets/aura/tree/index.js @@ -0,0 +1,268 @@ +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/resources/js/presets/aura/treeselect/index.js b/resources/js/presets/aura/treeselect/index.js new file mode 100644 index 0000000..d156ba3 --- /dev/null +++ b/resources/js/presets/aura/treeselect/index.js @@ -0,0 +1,367 @@ +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/resources/js/presets/aura/treetable/index.js b/resources/js/presets/aura/treetable/index.js new file mode 100644 index 0000000..b961474 --- /dev/null +++ b/resources/js/presets/aura/treetable/index.js @@ -0,0 +1,442 @@ +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/resources/js/presets/aura/tristatecheckbox/index.js b/resources/js/presets/aura/tristatecheckbox/index.js new file mode 100644 index 0000000..a4a8b94 --- /dev/null +++ b/resources/js/presets/aura/tristatecheckbox/index.js @@ -0,0 +1,115 @@ +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/resources/js/presets/lara/accordion/index.js b/resources/js/presets/lara/accordion/index.js new file mode 100644 index 0000000..24fcb50 --- /dev/null +++ b/resources/js/presets/lara/accordion/index.js @@ -0,0 +1,78 @@ +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/resources/js/presets/lara/autocomplete/index.js b/resources/js/presets/lara/autocomplete/index.js new file mode 100644 index 0000000..f2e521c --- /dev/null +++ b/resources/js/presets/lara/autocomplete/index.js @@ -0,0 +1,261 @@ +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/resources/js/presets/lara/avatar/index.js b/resources/js/presets/lara/avatar/index.js new file mode 100644 index 0000000..9c77beb --- /dev/null +++ b/resources/js/presets/lara/avatar/index.js @@ -0,0 +1,43 @@ +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/resources/js/presets/lara/avatargroup/index.js b/resources/js/presets/lara/avatargroup/index.js new file mode 100644 index 0000000..d267e06 --- /dev/null +++ b/resources/js/presets/lara/avatargroup/index.js @@ -0,0 +1,5 @@ +export default { + root: { + class: 'flex items-center' + } +}; diff --git a/resources/js/presets/lara/badge/index.js b/resources/js/presets/lara/badge/index.js new file mode 100644 index 0000000..c9e3505 --- /dev/null +++ b/resources/js/presets/lara/badge/index.js @@ -0,0 +1,43 @@ +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/resources/js/presets/lara/badgedirective/index.js b/resources/js/presets/lara/badgedirective/index.js new file mode 100644 index 0000000..0e5721b --- /dev/null +++ b/resources/js/presets/lara/badgedirective/index.js @@ -0,0 +1,43 @@ +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/resources/js/presets/lara/blockui/index.js b/resources/js/presets/lara/blockui/index.js new file mode 100644 index 0000000..0c81a0c --- /dev/null +++ b/resources/js/presets/lara/blockui/index.js @@ -0,0 +1,8 @@ +export default { + root: { + class: 'relative' + }, + mask: { + class: 'bg-black/40' + } +}; diff --git a/resources/js/presets/lara/breadcrumb/index.js b/resources/js/presets/lara/breadcrumb/index.js new file mode 100644 index 0000000..81b23fd --- /dev/null +++ b/resources/js/presets/lara/breadcrumb/index.js @@ -0,0 +1,64 @@ +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/resources/js/presets/lara/button/index.js b/resources/js/presets/lara/button/index.js new file mode 100644 index 0000000..95e6a56 --- /dev/null +++ b/resources/js/presets/lara/button/index.js @@ -0,0 +1,234 @@ +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/resources/js/presets/lara/calendar/index.js b/resources/js/presets/lara/calendar/index.js new file mode 100644 index 0000000..7af8997 --- /dev/null +++ b/resources/js/presets/lara/calendar/index.js @@ -0,0 +1,646 @@ +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/resources/js/presets/lara/card/index.js b/resources/js/presets/lara/card/index.js new file mode 100644 index 0000000..d4832f6 --- /dev/null +++ b/resources/js/presets/lara/card/index.js @@ -0,0 +1,37 @@ +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/resources/js/presets/lara/carousel/index.js b/resources/js/presets/lara/carousel/index.js new file mode 100644 index 0000000..3ebd9a8 --- /dev/null +++ b/resources/js/presets/lara/carousel/index.js @@ -0,0 +1,149 @@ +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/resources/js/presets/lara/cascadeselect/index.js b/resources/js/presets/lara/cascadeselect/index.js new file mode 100644 index 0000000..1a5b4fc --- /dev/null +++ b/resources/js/presets/lara/cascadeselect/index.js @@ -0,0 +1,207 @@ +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/resources/js/presets/lara/checkbox/index.js b/resources/js/presets/lara/checkbox/index.js new file mode 100644 index 0000000..df3490e --- /dev/null +++ b/resources/js/presets/lara/checkbox/index.js @@ -0,0 +1,101 @@ +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/resources/js/presets/lara/chip/index.js b/resources/js/presets/lara/chip/index.js new file mode 100644 index 0000000..c6ff879 --- /dev/null +++ b/resources/js/presets/lara/chip/index.js @@ -0,0 +1,45 @@ +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/resources/js/presets/lara/chips/index.js b/resources/js/presets/lara/chips/index.js new file mode 100644 index 0000000..c4329f3 --- /dev/null +++ b/resources/js/presets/lara/chips/index.js @@ -0,0 +1,117 @@ +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/resources/js/presets/lara/colorpicker/index.js b/resources/js/presets/lara/colorpicker/index.js new file mode 100644 index 0000000..ef46c15 --- /dev/null +++ b/resources/js/presets/lara/colorpicker/index.js @@ -0,0 +1,123 @@ +export default { + root: ({ props }) => ({ + class: [ + // Display + 'inline-block', + + // Misc + { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } + ] + }), + input: { + class: [ + // Font + '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/resources/js/presets/lara/confirmpopup/index.js b/resources/js/presets/lara/confirmpopup/index.js new file mode 100644 index 0000000..61692de --- /dev/null +++ b/resources/js/presets/lara/confirmpopup/index.js @@ -0,0 +1,106 @@ +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/resources/js/presets/lara/contextmenu/index.js b/resources/js/presets/lara/contextmenu/index.js new file mode 100644 index 0000000..0fd9239 --- /dev/null +++ b/resources/js/presets/lara/contextmenu/index.js @@ -0,0 +1,124 @@ +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/resources/js/presets/lara/datatable/index.js b/resources/js/presets/lara/datatable/index.js new file mode 100644 index 0000000..faf4f22 --- /dev/null +++ b/resources/js/presets/lara/datatable/index.js @@ -0,0 +1,1166 @@ +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/resources/js/presets/lara/dataview/index.js b/resources/js/presets/lara/dataview/index.js new file mode 100644 index 0000000..2eed11b --- /dev/null +++ b/resources/js/presets/lara/dataview/index.js @@ -0,0 +1,40 @@ +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/resources/js/presets/lara/dataviewlayoutoptions/index.js b/resources/js/presets/lara/dataviewlayoutoptions/index.js new file mode 100644 index 0000000..bbfa6d2 --- /dev/null +++ b/resources/js/presets/lara/dataviewlayoutoptions/index.js @@ -0,0 +1,58 @@ +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/resources/js/presets/lara/deferred/index.js b/resources/js/presets/lara/deferred/index.js new file mode 100644 index 0000000..2064371 --- /dev/null +++ b/resources/js/presets/lara/deferred/index.js @@ -0,0 +1,3 @@ +export default { + root: {} +}; diff --git a/resources/js/presets/lara/dialog/index.js b/resources/js/presets/lara/dialog/index.js new file mode 100644 index 0000000..adb8f1e --- /dev/null +++ b/resources/js/presets/lara/dialog/index.js @@ -0,0 +1,235 @@ +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/resources/js/presets/lara/divider/index.js b/resources/js/presets/lara/divider/index.js new file mode 100644 index 0000000..b440697 --- /dev/null +++ b/resources/js/presets/lara/divider/index.js @@ -0,0 +1,67 @@ +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/resources/js/presets/lara/dock/index.js b/resources/js/presets/lara/dock/index.js new file mode 100644 index 0000000..5a33ade --- /dev/null +++ b/resources/js/presets/lara/dock/index.js @@ -0,0 +1,93 @@ +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/resources/js/presets/lara/dropdown/index.js b/resources/js/presets/lara/dropdown/index.js new file mode 100644 index 0000000..4578ccb --- /dev/null +++ b/resources/js/presets/lara/dropdown/index.js @@ -0,0 +1,278 @@ +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/resources/js/presets/lara/fieldset/index.js b/resources/js/presets/lara/fieldset/index.js new file mode 100644 index 0000000..3b70c80 --- /dev/null +++ b/resources/js/presets/lara/fieldset/index.js @@ -0,0 +1,84 @@ +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/resources/js/presets/lara/fileupload/index.js b/resources/js/presets/lara/fileupload/index.js new file mode 100644 index 0000000..4a75972 --- /dev/null +++ b/resources/js/presets/lara/fileupload/index.js @@ -0,0 +1,173 @@ +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/resources/js/presets/lara/floatlabel/index.js b/resources/js/presets/lara/floatlabel/index.js new file mode 100644 index 0000000..557808f --- /dev/null +++ b/resources/js/presets/lara/floatlabel/index.js @@ -0,0 +1,26 @@ +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/resources/js/presets/lara/galleria/index.js b/resources/js/presets/lara/galleria/index.js new file mode 100644 index 0000000..014b1b0 --- /dev/null +++ b/resources/js/presets/lara/galleria/index.js @@ -0,0 +1,308 @@ +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/resources/js/presets/lara/global.js b/resources/js/presets/lara/global.js new file mode 100644 index 0000000..42552db --- /dev/null +++ b/resources/js/presets/lara/global.js @@ -0,0 +1,90 @@ +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/resources/js/presets/lara/iconfield/index.js b/resources/js/presets/lara/iconfield/index.js new file mode 100644 index 0000000..73afd18 --- /dev/null +++ b/resources/js/presets/lara/iconfield/index.js @@ -0,0 +1,22 @@ +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/resources/js/presets/lara/image/index.js b/resources/js/presets/lara/image/index.js new file mode 100644 index 0000000..e6d6f9f --- /dev/null +++ b/resources/js/presets/lara/image/index.js @@ -0,0 +1,206 @@ +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/resources/js/presets/lara/index.js b/resources/js/presets/lara/index.js new file mode 100644 index 0000000..49eb5e7 --- /dev/null +++ b/resources/js/presets/lara/index.js @@ -0,0 +1,207 @@ +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/resources/js/presets/lara/inlinemessage/index.js b/resources/js/presets/lara/inlinemessage/index.js new file mode 100644 index 0000000..5e0faf7 --- /dev/null +++ b/resources/js/presets/lara/inlinemessage/index.js @@ -0,0 +1,36 @@ +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/resources/js/presets/lara/inplace/index.js b/resources/js/presets/lara/inplace/index.js new file mode 100644 index 0000000..ef7bf37 --- /dev/null +++ b/resources/js/presets/lara/inplace/index.js @@ -0,0 +1,27 @@ +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/resources/js/presets/lara/inputgroup/index.js b/resources/js/presets/lara/inputgroup/index.js new file mode 100644 index 0000000..cce7111 --- /dev/null +++ b/resources/js/presets/lara/inputgroup/index.js @@ -0,0 +1,5 @@ +export default { + root: { + class: ['flex items-stretch', 'w-full'] + } +}; diff --git a/resources/js/presets/lara/inputgroupaddon/index.js b/resources/js/presets/lara/inputgroupaddon/index.js new file mode 100644 index 0000000..5ed52fb --- /dev/null +++ b/resources/js/presets/lara/inputgroupaddon/index.js @@ -0,0 +1,28 @@ +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/resources/js/presets/lara/inputmask/index.js b/resources/js/presets/lara/inputmask/index.js new file mode 100644 index 0000000..f94f9ec --- /dev/null +++ b/resources/js/presets/lara/inputmask/index.js @@ -0,0 +1,39 @@ +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/resources/js/presets/lara/inputnumber/index.js b/resources/js/presets/lara/inputnumber/index.js new file mode 100644 index 0000000..28949b3 --- /dev/null +++ b/resources/js/presets/lara/inputnumber/index.js @@ -0,0 +1,165 @@ +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/resources/js/presets/lara/inputotp/index.js b/resources/js/presets/lara/inputotp/index.js new file mode 100644 index 0000000..37c9161 --- /dev/null +++ b/resources/js/presets/lara/inputotp/index.js @@ -0,0 +1,62 @@ +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/resources/js/presets/lara/inputswitch/index.js b/resources/js/presets/lara/inputswitch/index.js new file mode 100644 index 0000000..e602c3f --- /dev/null +++ b/resources/js/presets/lara/inputswitch/index.js @@ -0,0 +1,80 @@ +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/resources/js/presets/lara/inputtext/index.js b/resources/js/presets/lara/inputtext/index.js new file mode 100644 index 0000000..e743636 --- /dev/null +++ b/resources/js/presets/lara/inputtext/index.js @@ -0,0 +1,51 @@ +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/resources/js/presets/lara/knob/index.js b/resources/js/presets/lara/knob/index.js new file mode 100644 index 0000000..21d2c61 --- /dev/null +++ b/resources/js/presets/lara/knob/index.js @@ -0,0 +1,44 @@ +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/resources/js/presets/lara/listbox/index.js b/resources/js/presets/lara/listbox/index.js new file mode 100644 index 0000000..94a18ae --- /dev/null +++ b/resources/js/presets/lara/listbox/index.js @@ -0,0 +1,155 @@ +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/resources/js/presets/lara/megamenu/index.js b/resources/js/presets/lara/megamenu/index.js new file mode 100644 index 0000000..3770b2d --- /dev/null +++ b/resources/js/presets/lara/megamenu/index.js @@ -0,0 +1,198 @@ +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/resources/js/presets/lara/menu/index.js b/resources/js/presets/lara/menu/index.js new file mode 100644 index 0000000..fc971da --- /dev/null +++ b/resources/js/presets/lara/menu/index.js @@ -0,0 +1,96 @@ +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/resources/js/presets/lara/menubar/index.js b/resources/js/presets/lara/menubar/index.js new file mode 100644 index 0000000..f7cb63a --- /dev/null +++ b/resources/js/presets/lara/menubar/index.js @@ -0,0 +1,175 @@ +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/resources/js/presets/lara/message/index.js b/resources/js/presets/lara/message/index.js new file mode 100644 index 0000000..18bef54 --- /dev/null +++ b/resources/js/presets/lara/message/index.js @@ -0,0 +1,87 @@ +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/resources/js/presets/lara/metergroup/index.js b/resources/js/presets/lara/metergroup/index.js new file mode 100644 index 0000000..2269682 --- /dev/null +++ b/resources/js/presets/lara/metergroup/index.js @@ -0,0 +1,97 @@ +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/resources/js/presets/lara/multiselect/index.js b/resources/js/presets/lara/multiselect/index.js new file mode 100644 index 0000000..c7061e8 --- /dev/null +++ b/resources/js/presets/lara/multiselect/index.js @@ -0,0 +1,544 @@ +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/resources/js/presets/lara/orderlist/index.js b/resources/js/presets/lara/orderlist/index.js new file mode 100644 index 0000000..a63d23f --- /dev/null +++ b/resources/js/presets/lara/orderlist/index.js @@ -0,0 +1,258 @@ +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/resources/js/presets/lara/organizationchart/index.js b/resources/js/presets/lara/organizationchart/index.js new file mode 100644 index 0000000..08ce724 --- /dev/null +++ b/resources/js/presets/lara/organizationchart/index.js @@ -0,0 +1,138 @@ +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/resources/js/presets/lara/overlaypanel/index.js b/resources/js/presets/lara/overlaypanel/index.js new file mode 100644 index 0000000..f67d2ff --- /dev/null +++ b/resources/js/presets/lara/overlaypanel/index.js @@ -0,0 +1,40 @@ +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/resources/js/presets/lara/paginator/index.js b/resources/js/presets/lara/paginator/index.js new file mode 100644 index 0000000..46bf702 --- /dev/null +++ b/resources/js/presets/lara/paginator/index.js @@ -0,0 +1,528 @@ +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/resources/js/presets/lara/panel/index.js b/resources/js/presets/lara/panel/index.js new file mode 100644 index 0000000..d42820b --- /dev/null +++ b/resources/js/presets/lara/panel/index.js @@ -0,0 +1,91 @@ +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/resources/js/presets/lara/panelmenu/index.js b/resources/js/presets/lara/panelmenu/index.js new file mode 100644 index 0000000..e6072e8 --- /dev/null +++ b/resources/js/presets/lara/panelmenu/index.js @@ -0,0 +1,127 @@ +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/resources/js/presets/lara/password/index.js b/resources/js/presets/lara/password/index.js new file mode 100644 index 0000000..d3988b2 --- /dev/null +++ b/resources/js/presets/lara/password/index.js @@ -0,0 +1,121 @@ +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/resources/js/presets/lara/picklist/index.js b/resources/js/presets/lara/picklist/index.js new file mode 100644 index 0000000..b04df40 --- /dev/null +++ b/resources/js/presets/lara/picklist/index.js @@ -0,0 +1,651 @@ +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/resources/js/presets/lara/progressbar/index.js b/resources/js/presets/lara/progressbar/index.js new file mode 100644 index 0000000..bd0f701 --- /dev/null +++ b/resources/js/presets/lara/progressbar/index.js @@ -0,0 +1,55 @@ +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/resources/js/presets/lara/progressspinner/index.js b/resources/js/presets/lara/progressspinner/index.js new file mode 100644 index 0000000..4e1faec --- /dev/null +++ b/resources/js/presets/lara/progressspinner/index.js @@ -0,0 +1,51 @@ +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/resources/js/presets/lara/radiobutton/index.js b/resources/js/presets/lara/radiobutton/index.js new file mode 100644 index 0000000..3d5f126 --- /dev/null +++ b/resources/js/presets/lara/radiobutton/index.js @@ -0,0 +1,104 @@ +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/resources/js/presets/lara/rating/index.js b/resources/js/presets/lara/rating/index.js new file mode 100644 index 0000000..7ad0350 --- /dev/null +++ b/resources/js/presets/lara/rating/index.js @@ -0,0 +1,92 @@ +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/resources/js/presets/lara/ripple/index.js b/resources/js/presets/lara/ripple/index.js new file mode 100644 index 0000000..429c249 --- /dev/null +++ b/resources/js/presets/lara/ripple/index.js @@ -0,0 +1,6 @@ +export default { + root: { + class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'], + style: 'transform: scale(0)' + } +}; diff --git a/resources/js/presets/lara/scrollpanel/index.js b/resources/js/presets/lara/scrollpanel/index.js new file mode 100644 index 0000000..d41e690 --- /dev/null +++ b/resources/js/presets/lara/scrollpanel/index.js @@ -0,0 +1,77 @@ +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/resources/js/presets/lara/scrolltop/index.js b/resources/js/presets/lara/scrolltop/index.js new file mode 100644 index 0000000..3273286 --- /dev/null +++ b/resources/js/presets/lara/scrolltop/index.js @@ -0,0 +1,40 @@ +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/resources/js/presets/lara/selectbutton/index.js b/resources/js/presets/lara/selectbutton/index.js new file mode 100644 index 0000000..436628a --- /dev/null +++ b/resources/js/presets/lara/selectbutton/index.js @@ -0,0 +1,49 @@ +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/resources/js/presets/lara/sidebar/index.js b/resources/js/presets/lara/sidebar/index.js new file mode 100644 index 0000000..27b4160 --- /dev/null +++ b/resources/js/presets/lara/sidebar/index.js @@ -0,0 +1,149 @@ +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/resources/js/presets/lara/skeleton/index.js b/resources/js/presets/lara/skeleton/index.js new file mode 100644 index 0000000..d459aaa --- /dev/null +++ b/resources/js/presets/lara/skeleton/index.js @@ -0,0 +1,16 @@ +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/resources/js/presets/lara/slider/index.js b/resources/js/presets/lara/slider/index.js new file mode 100644 index 0000000..684acd8 --- /dev/null +++ b/resources/js/presets/lara/slider/index.js @@ -0,0 +1,137 @@ +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/resources/js/presets/lara/speeddial/index.js b/resources/js/presets/lara/speeddial/index.js new file mode 100644 index 0000000..3d12876 --- /dev/null +++ b/resources/js/presets/lara/speeddial/index.js @@ -0,0 +1,297 @@ +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/resources/js/presets/lara/splitbutton/index.js b/resources/js/presets/lara/splitbutton/index.js new file mode 100644 index 0000000..7a7c3f4 --- /dev/null +++ b/resources/js/presets/lara/splitbutton/index.js @@ -0,0 +1,530 @@ +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/resources/js/presets/lara/splitter/index.js b/resources/js/presets/lara/splitter/index.js new file mode 100644 index 0000000..877c805 --- /dev/null +++ b/resources/js/presets/lara/splitter/index.js @@ -0,0 +1,61 @@ +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/resources/js/presets/lara/splitterpanel/index.js b/resources/js/presets/lara/splitterpanel/index.js new file mode 100644 index 0000000..6a21cd3 --- /dev/null +++ b/resources/js/presets/lara/splitterpanel/index.js @@ -0,0 +1,5 @@ +export default { + root: ({ context }) => ({ + class: ['grow', { flex: context.nested }] + }) +}; diff --git a/resources/js/presets/lara/stepper/index.js b/resources/js/presets/lara/stepper/index.js new file mode 100644 index 0000000..03bf376 --- /dev/null +++ b/resources/js/presets/lara/stepper/index.js @@ -0,0 +1,161 @@ +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/resources/js/presets/lara/steps/index.js b/resources/js/presets/lara/steps/index.js new file mode 100644 index 0000000..997cd00 --- /dev/null +++ b/resources/js/presets/lara/steps/index.js @@ -0,0 +1,111 @@ +export default { + root: { + class: 'relative' + }, + menu: { + class: 'p-0 m-0 list-none flex' + }, + menuitem: { + class: [ + // Flexbox and Position + 'relative', + 'flex', + 'justify-center', + 'flex-1', + 'overflow-hidden', + + // Before + 'before:border-t', + 'before:border-surface-200', + 'before:dark:border-surface-700', + 'before:w-full', + 'before:absolute', + 'before:top-1/2', + 'before:left-0', + 'before:transform', + 'before:-mt-4' + ] + }, + action: ({ props }) => ({ + class: [ + // Flexbox + 'inline-flex items-center', + 'flex-col', + + // Transitions and Shape + 'transition-shadow', + 'rounded-md', + + // Colors + 'bg-surface-0', + 'dark:bg-transparent', + + // States + 'focus:outline-none focus:outline-offset-0 focus:ring', + 'focus:ring-primary-400/50 dark:focus:ring-primary-300/50', + + // Misc + 'overflow-hidden', + { 'cursor-pointer': !props.readonly } + ] + }), + step: ({ context, props }) => ({ + class: [ + // Flexbox + 'flex items-center justify-center', + + // Position + 'z-20', + + // Shape + 'rounded-full', + 'border', + + // Size + 'w-[2rem]', + 'h-[2rem]', + 'text-sm', + 'leading-[2rem]', + + // Colors + { + 'text-surface-400 dark:text-white/60': !context.active, + 'border-surface-100 dark:border-surface-700': !context.active, + 'bg-surface-0 dark:bg-surface-800': !context.active, + 'bg-primary': 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/resources/js/presets/lara/tabmenu/index.js b/resources/js/presets/lara/tabmenu/index.js new file mode 100644 index 0000000..b6a21ec --- /dev/null +++ b/resources/js/presets/lara/tabmenu/index.js @@ -0,0 +1,73 @@ +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/resources/js/presets/lara/tabview/index.js b/resources/js/presets/lara/tabview/index.js new file mode 100644 index 0000000..9c754f2 --- /dev/null +++ b/resources/js/presets/lara/tabview/index.js @@ -0,0 +1,156 @@ +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/resources/js/presets/lara/tag/index.js b/resources/js/presets/lara/tag/index.js new file mode 100644 index 0000000..a774a23 --- /dev/null +++ b/resources/js/presets/lara/tag/index.js @@ -0,0 +1,36 @@ +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/resources/js/presets/lara/terminal/index.js b/resources/js/presets/lara/terminal/index.js new file mode 100644 index 0000000..3fbd652 --- /dev/null +++ b/resources/js/presets/lara/terminal/index.js @@ -0,0 +1,60 @@ +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/resources/js/presets/lara/textarea/index.js b/resources/js/presets/lara/textarea/index.js new file mode 100644 index 0000000..756e988 --- /dev/null +++ b/resources/js/presets/lara/textarea/index.js @@ -0,0 +1,39 @@ +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/resources/js/presets/lara/tieredmenu/index.js b/resources/js/presets/lara/tieredmenu/index.js new file mode 100644 index 0000000..e0344ef --- /dev/null +++ b/resources/js/presets/lara/tieredmenu/index.js @@ -0,0 +1,119 @@ +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/resources/js/presets/lara/timeline/index.js b/resources/js/presets/lara/timeline/index.js new file mode 100644 index 0000000..155ba2e --- /dev/null +++ b/resources/js/presets/lara/timeline/index.js @@ -0,0 +1,81 @@ +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/resources/js/presets/lara/toast/index.js b/resources/js/presets/lara/toast/index.js new file mode 100644 index 0000000..01a4e07 --- /dev/null +++ b/resources/js/presets/lara/toast/index.js @@ -0,0 +1,102 @@ +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/resources/js/presets/lara/togglebutton/index.js b/resources/js/presets/lara/togglebutton/index.js new file mode 100644 index 0000000..14a8d80 --- /dev/null +++ b/resources/js/presets/lara/togglebutton/index.js @@ -0,0 +1,91 @@ +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/resources/js/presets/lara/toolbar/index.js b/resources/js/presets/lara/toolbar/index.js new file mode 100644 index 0000000..4232baa --- /dev/null +++ b/resources/js/presets/lara/toolbar/index.js @@ -0,0 +1,28 @@ +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/resources/js/presets/lara/tooltip/index.js b/resources/js/presets/lara/tooltip/index.js new file mode 100644 index 0000000..2856bf3 --- /dev/null +++ b/resources/js/presets/lara/tooltip/index.js @@ -0,0 +1,46 @@ +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/resources/js/presets/lara/tree/index.js b/resources/js/presets/lara/tree/index.js new file mode 100644 index 0000000..c7347db --- /dev/null +++ b/resources/js/presets/lara/tree/index.js @@ -0,0 +1,258 @@ +export default { + root: { + class: [ + // Space + 'p-5', + + // Shape + 'rounded-md', + + // Color + 'bg-surface-0 dark:bg-surface-800', + 'text-surface-700 dark:text-white/80', + 'border border-solid border-surface-200 dark:border-surface-700' + ] + }, + wrapper: { + class: ['overflow-auto'] + }, + container: { + class: [ + // Spacing + 'm-0 p-0', + + // Misc + 'list-none overflow-auto' + ] + }, + node: { + class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50'] + }, + content: ({ context, props }) => ({ + class: [ + // Flex and Alignment + 'flex items-center', + + // Shape + 'rounded-md', + + // Spacing + 'p-2', + + // Colors + 'text-surface-600 dark:text-white/70', + { 'bg-primary-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/resources/js/presets/lara/treeselect/index.js b/resources/js/presets/lara/treeselect/index.js new file mode 100644 index 0000000..2a36abf --- /dev/null +++ b/resources/js/presets/lara/treeselect/index.js @@ -0,0 +1,352 @@ +export default { + root: ({ props, state }) => ({ + class: [ + // Display and Position + 'inline-flex', + 'relative', + + // Shape + 'rounded-md', + + // Color and Background + 'bg-surface-0 dark:bg-surface-900', + 'border', + { 'border-surface-300 dark:border-surface-600': !props.invalid }, + + // Invalid State + { 'border-red-500 dark:border-red-400': props.invalid }, + + // Transitions + 'transition-all', + 'duration-200', + + // States + { 'hover:border-primary': !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/resources/js/presets/lara/treetable/index.js b/resources/js/presets/lara/treetable/index.js new file mode 100644 index 0000000..9098dd3 --- /dev/null +++ b/resources/js/presets/lara/treetable/index.js @@ -0,0 +1,427 @@ +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/resources/js/presets/lara/tristatecheckbox/index.js b/resources/js/presets/lara/tristatecheckbox/index.js new file mode 100644 index 0000000..99cd349 --- /dev/null +++ b/resources/js/presets/lara/tristatecheckbox/index.js @@ -0,0 +1,104 @@ +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' + ] + } +};