Add overlays

assets/styles/presets/aura/components.css

@@ -34,6 +34,14 @@
 /* Data */
 @import './tree';
 
+/* Overlay */
+@import './confirmdialog';
+@import './confirmpopup';
+@import './dialog';
+@import './drawer';
+@import './popover';
+@import './tooltip';
+
 /* Panel */
 @import './accordion';
 @import './card';

assets/styles/presets/aura/confirmdialog.css

@@ -0,0 +1,7 @@
+.p-confirmdialog .p-dialog-content {
+    @apply flex items-center gap-4
+}
+
+.p-confirmdialog-icon {
+    @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8
+}

assets/styles/presets/aura/confirmpopup.css

@@ -0,0 +1,64 @@
+.p-confirmpopup {
+    @apply absolute mt-[10px] top-0 left-0 
+        border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
+        before:border-[10px] before:-ml-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
+        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
+        after:border-[8px] after:-ml-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
+}
+
+.p-confirmpopup-content {
+    @apply flex items-center p-3 gap-4
+}
+
+.p-confirmpopup-icon {
+    @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0
+}
+
+.p-confirmpopup-footer {
+    @apply flex justify-end gap-2 pt-0 px-3 pb-3
+}
+
+.p-confirmpopup-footer button {
+    @apply w-auto
+}
+
+.p-confirmpopup-footer button:last-child {
+    @apply m-0
+}
+
+.p-confirmpopup-flipped {
+    @apply -mt-[10px] mb-[10px]
+}
+
+.p-confirmpopup-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-confirmpopup-leave-to {
+    @apply opacity-0
+}
+
+.p-confirmpopup-enter-active {
+    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
+}
+
+.p-confirmpopup-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-confirmpopup-flipped:after,
+.p-confirmpopup-flipped:before {
+    @apply bottom-auto top-full
+}
+
+.p-confirmpopup-flipped:after {
+    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
+}
+
+.p-confirmpopup-flipped:before {
+    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
+}

assets/styles/presets/aura/dialog.css

@@ -0,0 +1,107 @@
+.p-dialog {
+    @apply max-h-[90%] scale-100 rounded-xl 
+        border border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
+}
+
+.p-dialog-content {
+    @apply overflow-y-auto pt-0 px-5 pb-5
+}
+
+.p-dialog-header {
+    @apply flex items-center justify-between shrink-0 p-5
+}
+
+.p-dialog-title {
+    @apply font-semibold text-xl
+}
+
+.p-dialog-footer {
+    @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2
+}
+
+.p-dialog-header-actions {
+    @apply flex items-center gap-2
+}
+
+.p-dialog-enter-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-dialog-leave-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
+}
+
+.p-dialog-enter-from,
+.p-dialog-leave-to {
+    @apply opacity-0 scale-75
+}
+
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    margin: 0.75rem;
+    transform: translate3d(0px, 0px, 0px);
+}
+
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    @apply transition-all duration-300 ease-out
+}
+
+.p-dialog-top .p-dialog-enter-from,
+.p-dialog-top .p-dialog-leave-to {
+    transform: translate3d(0px, -100%, 0px);
+}
+
+.p-dialog-bottom .p-dialog-enter-from,
+.p-dialog-bottom .p-dialog-leave-to {
+    transform: translate3d(0px, 100%, 0px);
+}
+
+.p-dialog-left .p-dialog-enter-from,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter-from,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter-from,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    transform: translate3d(-100%, 0px, 0px);
+}
+
+.p-dialog-right .p-dialog-enter-from,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter-from,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter-from,
+.p-dialog-bottomright .p-dialog-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+}
+
+.p-dialog-maximized {
+    @apply !w-screen !h-screen top-0 left-0 max-h-full rounded-none 
+}
+
+.p-dialog-maximized .p-dialog-content {
+    @apply flex-grow
+}

assets/styles/presets/aura/drawer.css

@@ -0,0 +1,88 @@
+.p-drawer {
+    @apply flex flex-col pointer-events-auto relative transition-transform duration-300
+        border border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
+}
+
+.p-drawer {
+    transform: translate3d(0px, 0px, 0px);
+}
+
+.p-drawer-content {
+    @apply overflow-y-auto flex-grow pt-0 pb-5 px-5
+}
+
+.p-drawer-header {
+    @apply flex items-center justify-between flex-shrink-0 p-5
+}
+
+.p-drawer-footer {
+    @apply px-5
+}
+
+.p-drawer-title {
+    @apply font-semibold text-2xl 
+}
+
+.p-drawer-full .p-drawer {
+    @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0
+}
+
+.p-drawer-left .p-drawer-enter-from,
+.p-drawer-left .p-drawer-leave-to {
+    @apply -translate-x-full
+}
+
+.p-drawer-right .p-drawer-enter-from,
+.p-drawer-right .p-drawer-leave-to {
+    @apply translate-x-full
+}
+
+.p-drawer-top .p-drawer-enter-from,
+.p-drawer-top .p-drawer-leave-to {
+    @apply -translate-y-full
+}
+
+.p-drawer-bottom .p-drawer-enter-from,
+.p-drawer-bottom .p-drawer-leave-to {
+    @apply translate-y-full
+}
+
+.p-drawer-full .p-drawer-enter-from,
+.p-drawer-full .p-drawer-leave-to {
+    @apply opacity-0
+}
+
+.p-drawer-full .p-drawer-enter-active,
+.p-drawer-full .p-drawer-leave-active {
+    @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]
+}
+
+.p-drawer-left .p-drawer {
+    @apply w-80 h-full border-r
+}
+
+.p-drawer-right .p-drawer {
+    @apply w-80 h-full border-l
+}
+
+.p-drawer-top .p-drawer {
+    @apply h-40 w-full border-b
+}
+
+.p-drawer-bottom .p-drawer {
+    @apply h-40 w-full border-t
+}
+
+.p-drawer-left .p-drawer-content,
+.p-drawer-right .p-drawer-content,
+.p-drawer-top .p-drawer-content,
+.p-drawer-bottom .p-drawer-content {
+    @apply w-full h-full
+}
+
+.p-drawer-open {
+    @apply flex
+}

assets/styles/presets/aura/popover.css

@@ -0,0 +1,46 @@
+.p-popover {
+    @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
+        before:border-[10px] before:-ml-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
+        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
+        after:border-[8px] after:-ml-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
+}
+
+.p-popover-content {
+    @apply p-3
+}
+
+.p-popover-flipped {
+    @apply -mt-[10px] mb-[10px]
+}
+
+.p-popover-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-popover-leave-to {
+    @apply opacity-0
+}
+
+.p-popover-enter-active {
+    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
+}
+
+.p-popover-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-popover-flipped:after,
+.p-popover-flipped:before {
+    @apply bottom-auto top-full
+}
+
+.p-popover.p-popover-flipped:after {
+    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
+}
+
+.p-popover.p-popover-flipped:before {
+    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
+}

assets/styles/presets/aura/tooltip.css

@@ -0,0 +1,38 @@
+.p-tooltip {
+    @apply absolute hidden max-w-48
+}
+
+.p-tooltip-right,
+.p-tooltip-left {
+    @apply py-0 px-1
+}
+
+.p-tooltip-top,
+.p-tooltip-bottom {
+    @apply py-1 px-0
+}
+
+.p-tooltip-text {
+    @apply whitespace-pre-line break-words  bg-surface-700 text-surface-0 py-2 px-3
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-tooltip-arrow {
+    @apply absolute w-0 h-0 border-solid border-transparent
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    @apply -mt-1 border-[.25rem] border-l-0 border-r-surface-700
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    @apply -mt-1 border-[.25rem] border-r-0 border-l-surface-700
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    @apply -ml-1 border-[.25rem] border-b-0 border-t-surface-700
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    @apply -ml-1 border-[.25rem] border-t-0 border-b-surface-700
+}