Migrated confirm popup

components/lib/theme/aura/confirmpopup/index.js

@@ -0,0 +1,129 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                }
+            }
+        }
+    },
+    css: `
+.p-confirm-popup {
+    position: absolute;
+    margin-top: 10px;
+    top: 0;
+    left: 0;
+    background: var(--p-confirmpopup-background);
+    color: var(--p-confirmpopup-text-color);
+    border: 1px solid var(--p-confirmpopup-border-color);
+    border-radius: var(--p-rounded-base);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-confirm-popup-content {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+}
+
+.p-confirm-popup-icon {
+    font-size: 1.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.p-confirm-popup-message {
+    margin-left: 1rem;
+}
+
+.p-confirm-popup-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0 1rem 1rem 1rem;
+}
+
+.p-confirm-popup-footer button {
+    width: auto;
+}
+
+.p-confirm-popup-footer button:last-child {
+    margin: 0;
+}
+
+.p-confirm-popup-flipped {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+.p-confirm-popup-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-confirm-popup-leave-to {
+    opacity: 0;
+}
+
+.p-confirm-popup-enter-active {
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-confirm-popup-leave-active {
+    transition: opacity 0.1s linear;
+}
+
+.p-confirm-popup:after,
+.p-confirm-popup:before {
+    bottom: 100%;
+    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.p-confirm-popup:after {
+    border-width: 8px;
+    margin-left: -8px;
+    border-style: solid;
+    border-color: transparent;
+    border-bottom-color: var(--p-confirmpopup-background);
+}
+
+.p-confirm-popup:before {
+    border-width: 10px;
+    margin-left: -10px;
+    border-style: solid;
+    border-color: transparent;
+    border-bottom-color: var(--p-confirmpopup-border-color);
+}
+
+.p-confirm-popup-flipped:after,
+.p-confirm-popup-flipped:before {
+    bottom: auto;
+    top: 100%;
+}
+
+.p-confirm-popup-flipped:after {
+    border-bottom-color: transparent;
+    border-top-color: var(--p-confirmpopup-background);
+}
+
+.p-confirm-popup-flipped:before {
+    border-bottom-color: transparent;
+    border-top-color: var(--p-confirmpopup-border-color);
+}    
+`
+};

components/lib/theme/aura/confirmpopup/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/index.js

@@ -5,6 +5,7 @@ import blockui from 'primevue/theme/aura/blockui';
 import card from 'primevue/theme/aura/card';
 import chip from 'primevue/theme/aura/chip';
 import confirmdialog from 'primevue/theme/aura/confirmdialog';
+import confirmpopup from 'primevue/theme/aura/confirmpopup';
 import dialog from 'primevue/theme/aura/dialog';
 import divider from 'primevue/theme/aura/divider';
 import fieldset from 'primevue/theme/aura/fieldset';
@@ -140,6 +141,7 @@ export default {
         card,
         chip,
         confirmdialog,
+        confirmpopup,
         dialog,
         divider,
         fieldset,