first commit

resources/css/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'
+        ]
+    }
+};