@mkbabb/glass-ui 0.2.0

package/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@mkbabb/glass-ui",
+    "version": "0.2.0",
+    "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
+    "license": "MIT",
+    "type": "module",
+    "sideEffects": [
+        "*.css"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./src/index.ts"
+        },
+        "./styles": "./src/styles/index.css",
+        "./styles/*": "./src/styles/*"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "typecheck": "vue-tsc --noEmit"
+    },
+    "engines": {
+        "node": ">=22"
+    },
+    "peerDependencies": {
+        "@vueuse/core": "^14.0",
+        "class-variance-authority": "^0.7",
+        "clsx": "^2.0",
+        "embla-carousel-vue": "^8.0",
+        "reka-ui": "^2.0",
+        "tailwind-merge": "^3.0",
+        "tailwindcss": "^4.0",
+        "vue": "^3.5"
+    },
+    "peerDependenciesMeta": {
+        "embla-carousel-vue": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.11",
+        "@tailwindcss/vite": "^4.2.2",
+        "@vitejs/plugin-vue": "^6.0.0",
+        "@vueuse/core": "^14.2.1",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "embla-carousel-vue": "^8.6.0",
+        "lucide-vue-next": "^0.525.0",
+        "reka-ui": "^2.0.0",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss": "^4.1.11",
+        "tw-animate-css": "^1.2.5",
+        "typescript": "^5.8.3",
+        "vaul-vue": "^0.2.0",
+        "vite": "^7.0.6",
+        "vite-plugin-dts": "^4.5.4",
+        "vue": "^3.5.18",
+        "vue-tsc": "^2.2.0"
+    }
+}

package/src/components/custom/aurora/Aurora.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useAurora, type AuroraConfig } from "./composables/useAurora";
+
+export interface AuroraProps {
+    colors?: string[];
+    blobCount?: number;
+    baseRadius?: number;
+    blur?: number;
+    speed?: number;
+    alphaLight?: number;
+    alphaDark?: number;
+    orbitAmplitude?: number;
+}
+
+const props = defineProps<AuroraProps>();
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const { config } = useAurora(canvasRef, {
+    colors: props.colors,
+    blobCount: props.blobCount,
+    baseRadius: props.baseRadius,
+    blur: props.blur,
+    speed: props.speed,
+    alphaLight: props.alphaLight,
+    alphaDark: props.alphaDark,
+    orbitAmplitude: props.orbitAmplitude,
+});
+
+defineExpose({ config });
+</script>
+
+<template>
+    <canvas ref="canvasRef" aria-hidden="true" />
+</template>

package/src/components/custom/aurora/composables/color.ts

@@ -0,0 +1,122 @@
+/**
+ * OKLCH color math for derived palette generation.
+ *
+ * Pipeline: sRGB [0–255] → linear sRGB → OKLab → OKLCh (polar)
+ * Manipulate L (lightness) and H (hue) in perceptually uniform space,
+ * then convert back: OKLCh → OKLab → linear sRGB → sRGB [0–255].
+ */
+
+export function clamp(v: number, min: number, max: number): number {
+    return v < min ? min : v > max ? max : v;
+}
+
+function linearize(c: number): number {
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function delinearize(c: number): number {
+    return c <= 0.0031308
+        ? 12.92 * c
+        : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+
+export function srgbToOKLab(
+    r: number,
+    g: number,
+    b: number,
+): [number, number, number] {
+    const lr = linearize(r);
+    const lg = linearize(g);
+    const lb = linearize(b);
+
+    const l_ = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+    const m_ = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+    const s_ = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+
+    return [
+        0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    ];
+}
+
+export function oklabToOklch(
+    L: number,
+    a: number,
+    b: number,
+): [number, number, number] {
+    const C = Math.sqrt(a * a + b * b);
+    const H = ((Math.atan2(b, a) * 180) / Math.PI + 360) % 360;
+    return [L, C, H];
+}
+
+export function oklchToOklab(
+    L: number,
+    C: number,
+    H: number,
+): [number, number, number] {
+    const rad = (H * Math.PI) / 180;
+    return [L, C * Math.cos(rad), C * Math.sin(rad)];
+}
+
+export function oklabToRgb255(
+    L: number,
+    a: number,
+    b: number,
+): [number, number, number] {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+
+    const r = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+    const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+    const bv = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+
+    return [
+        clamp(Math.round(delinearize(r) * 255), 0, 255),
+        clamp(Math.round(delinearize(g) * 255), 0, 255),
+        clamp(Math.round(delinearize(bv) * 255), 0, 255),
+    ];
+}
+
+/** sRGB [0–255] → OKLCh [L:0–1, C:0–~0.4, H:0–360°]. */
+export function rgbToOklch(
+    r: number,
+    g: number,
+    b: number,
+): [number, number, number] {
+    const [L, a, b_] = srgbToOKLab(r / 255, g / 255, b / 255);
+    return oklabToOklch(L, a, b_);
+}
+
+/** OKLCh → sRGB [0–255] (clamped & rounded). */
+export function oklchToRgb(
+    L: number,
+    C: number,
+    H: number,
+): [number, number, number] {
+    const [la, a, b] = oklchToOklab(L, C, H);
+    return oklabToRgb255(la, a, b);
+}
+
+/**
+ * Parse a CSS color string to [r, g, b] (0-255) using browser's canvas parser.
+ */
+let _parseCtx: CanvasRenderingContext2D | null = null;
+export function cssToRgb(css: string): [number, number, number] {
+    if (!_parseCtx) {
+        const c = document.createElement("canvas");
+        c.width = c.height = 1;
+        _parseCtx = c.getContext("2d", { willReadFrequently: true })!;
+    }
+    _parseCtx.clearRect(0, 0, 1, 1);
+    _parseCtx.fillStyle = "#808080";
+    _parseCtx.fillStyle = css;
+    _parseCtx.fillRect(0, 0, 1, 1);
+    const d = _parseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0]!, d[1]!, d[2]!];
+}

package/src/components/custom/aurora/composables/useAurora.ts

@@ -0,0 +1,355 @@
+import {
+    onBeforeUnmount,
+    onMounted,
+    reactive,
+    isReactive,
+    watch,
+    toValue,
+    type Ref,
+    type MaybeRef,
+} from "vue";
+import { clamp, cssToRgb, rgbToOklch, oklchToRgb } from "./color";
+
+// ── Config ──────────────────────────────────────────────────────────────────
+
+export interface AuroraConfig {
+    /** "explicit" uses the `colors` array. "derived" generates palette from baseColor via OKLCH. */
+    colorMode: "explicit" | "derived";
+    /** Explicit color array (CSS strings). Used when colorMode === "explicit". */
+    colors: string[];
+
+    /** OKLCH lightness shift for large blobs (first half). Used when colorMode === "derived". */
+    lShiftLarge: number;
+    /** OKLCH lightness shift for small blobs (second half). */
+    lShiftSmall: number;
+    /** OKLCH hue rotation for large blobs (degrees). */
+    hueShiftLarge: number;
+    /** OKLCH hue rotation for small blobs (degrees). */
+    hueShiftSmall: number;
+
+    blobCount: number;
+    baseRadius: number;
+    radiusVariance: number;
+    /** Fraction of blobs anchored to viewport vs page (0 = all page, 1 = all viewport). */
+    viewportAnchorRatio: number;
+
+    blur: number;
+    speed: number;
+    orbitAmplitude: number;
+    blendMode: GlobalCompositeOperation;
+
+    /** Gradient stop positions (fraction of blob radius). */
+    gradStop2: number;
+    gradStop3: number;
+    gradStop4: number;
+
+    alphaLight: number;
+    alphaDark: number;
+
+    /** "none" = transparent clear, "theme" = white/black based on dark mode, "color" = baseColor tint. */
+    surfaceMode: "none" | "theme" | "color";
+    surfaceAlpha: number;
+}
+
+export const DEFAULT_AURORA_CONFIG: AuroraConfig = {
+    colorMode: "explicit",
+    colors: ["#c084fc", "#60a5fa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#a78bfa", "#38bdf8"],
+    lShiftLarge: 0.15,
+    lShiftSmall: 0.10,
+    hueShiftLarge: 25,
+    hueShiftSmall: 55,
+    blobCount: 8,
+    baseRadius: 0.32,
+    radiusVariance: 0.08,
+    viewportAnchorRatio: 0.5,
+    blur: 80,
+    speed: 0.4,
+    orbitAmplitude: 0.12,
+    blendMode: "source-over",
+    gradStop2: 0.35,
+    gradStop3: 0.65,
+    gradStop4: 1.0,
+    alphaLight: 0.35,
+    alphaDark: 0.18,
+    surfaceMode: "none",
+    surfaceAlpha: 0,
+};
+
+/** Preset: atmosphere-style (single base color, OKLCH-derived palette, surface fill). */
+export const ATMOSPHERE_PRESET: Partial<AuroraConfig> = {
+    colorMode: "derived",
+    blobCount: 10,
+    baseRadius: 0.10,
+    radiusVariance: 0.015,
+    viewportAnchorRatio: 1.0,
+    blur: 8,
+    speed: 0.10,
+    orbitAmplitude: 0.45,
+    gradStop2: 0.30,
+    gradStop3: 0.60,
+    gradStop4: 1.00,
+    alphaLight: 0.33,
+    alphaDark: 0.09,
+    surfaceMode: "theme",
+    surfaceAlpha: 0.97,
+    lShiftLarge: 0.15,
+    lShiftSmall: 0.10,
+    hueShiftLarge: 25,
+    hueShiftSmall: 55,
+};
+
+// ── Internals ───────────────────────────────────────────────────────────────
+
+interface Blob {
+    anchorX: number;
+    anchorY: number;
+    mode: "viewport" | "page";
+    radius: number;
+    color: [number, number, number];
+    phaseX: number;
+    phaseY: number;
+    freqX: number;
+    freqY: number;
+}
+
+const PHI = 1.618033988749895;
+const SQRT2 = 1.4142135623730951;
+
+function isDarkMode(): boolean {
+    return (
+        document.documentElement.classList.contains("dark") ||
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+}
+
+function rgba(r: number, g: number, b: number, a: number): string {
+    return `rgba(${clamp(Math.round(r), 0, 255)},${clamp(Math.round(g), 0, 255)},${clamp(Math.round(b), 0, 255)},${a})`;
+}
+
+// ── Composable ──────────────────────────────────────────────────────────────
+
+/**
+ * Unified aurora/atmosphere background composable.
+ *
+ * Two color modes:
+ * - **explicit**: Uses the `colors` array directly (aurora default)
+ * - **derived**: Generates palette from a single `baseColor` via OKLCH shifts (atmosphere style)
+ *
+ * @param canvasRef  — template ref to the `<canvas>` element
+ * @param userConfig — reactive config object (mutations propagate live) or partial overrides
+ * @param baseColor  — reactive CSS color for "derived" mode
+ */
+export function useAurora(
+    canvasRef: Ref<HTMLCanvasElement | null>,
+    userConfig?: Partial<AuroraConfig> | AuroraConfig,
+    baseColor?: MaybeRef<string>,
+) {
+    const cfg: AuroraConfig = isReactive(userConfig)
+        ? (userConfig as AuroraConfig)
+        : reactive<AuroraConfig>({ ...DEFAULT_AURORA_CONFIG, ...userConfig });
+
+    let blobs: Blob[] = [];
+    let animId = 0;
+    let dark = false;
+    let dpr = 1;
+    let observer: MutationObserver | null = null;
+    let mediaQuery: MediaQueryList | null = null;
+
+    /** Derive palette from a single base color via OKLCH lightness/hue shifts. */
+    function deriveColors(count: number): Array<[number, number, number]> {
+        const cssColor = toValue(baseColor) ?? "#c084fc";
+        const [r, g, b] = cssToRgb(cssColor);
+        const [L, C, H] = rgbToOklch(r, g, b);
+
+        const colors: Array<[number, number, number]> = [];
+        for (let i = 0; i < count; i++) {
+            const isSmall = i >= Math.ceil(count / 2);
+            const lShift = isSmall ? cfg.lShiftSmall : cfg.lShiftLarge;
+            const hShift = isSmall ? cfg.hueShiftSmall : cfg.hueShiftLarge;
+            const sign = i % 2 === 0 ? 1 : -1;
+            const lAmount = lShift * (0.5 + (i / count) * 0.5) * sign;
+            const hAmount = hShift * ((i + 1) / count) * (i % 3 === 0 ? -1 : 1);
+            colors.push(oklchToRgb(clamp(L + lAmount, 0, 1), C, (H + hAmount + 360) % 360));
+        }
+        return colors;
+    }
+
+    function getSurface(): { rgb: [number, number, number]; alpha: number } {
+        if (cfg.surfaceMode === "none") return { rgb: [0, 0, 0], alpha: 0 };
+        if (cfg.surfaceMode === "color") {
+            const cssColor = toValue(baseColor) ?? "#c084fc";
+            return { rgb: cssToRgb(cssColor), alpha: cfg.surfaceAlpha };
+        }
+        return { rgb: dark ? [10, 10, 15] : [255, 255, 255], alpha: cfg.surfaceAlpha };
+    }
+
+    function buildBlobs() {
+        const canvas = canvasRef.value;
+        if (!canvas) return;
+
+        const vw = canvas.width / dpr;
+        const vh = canvas.height / dpr;
+        const diagonal = Math.sqrt(vw * vw + vh * vh);
+        const pageHeight = Math.max(document.documentElement.scrollHeight, vh);
+
+        const vpCount = Math.round(cfg.blobCount * cfg.viewportAnchorRatio);
+        const pageCount = cfg.blobCount - vpCount;
+        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+
+        const colorList: Array<[number, number, number]> =
+            cfg.colorMode === "derived"
+                ? deriveColors(cfg.blobCount)
+                : cfg.colors.map(c => cssToRgb(c));
+
+        blobs = [];
+
+        for (let i = 0; i < vpCount; i++) {
+            const ci = i % colorList.length;
+            const radiusFrac = cfg.baseRadius + ((i / Math.max(vpCount, 1)) - 0.5) * cfg.radiusVariance * 2;
+            const angle = i * goldenAngle;
+            blobs.push({
+                anchorX: 0.5 + Math.cos(angle) * 0.3,
+                anchorY: 0.5 + Math.sin(angle) * 0.35,
+                mode: "viewport" as const,
+                radius: diagonal * Math.max(radiusFrac, 0.12),
+                color: colorList[ci],
+                phaseX: (i * PHI * Math.PI * 2) % (Math.PI * 2),
+                phaseY: (i * SQRT2 * Math.PI * 2) % (Math.PI * 2),
+                freqX: 0.0002 + i * 0.00005,
+                freqY: 0.00018 + i * 0.00006,
+            });
+        }
+
+        for (let i = 0; i < pageCount; i++) {
+            const ci = (vpCount + i) % colorList.length;
+            const radiusFrac = cfg.baseRadius + ((i / Math.max(pageCount, 1)) - 0.5) * cfg.radiusVariance * 2;
+            const angle = (vpCount + i) * goldenAngle;
+            const yPage = ((i + 0.5) / pageCount) * pageHeight;
+            blobs.push({
+                anchorX: 0.5 + Math.cos(angle) * 0.35,
+                anchorY: yPage,
+                mode: "page" as const,
+                radius: diagonal * Math.max(radiusFrac, 0.12),
+                color: colorList[ci],
+                phaseX: ((vpCount + i) * PHI * Math.PI * 2) % (Math.PI * 2),
+                phaseY: ((vpCount + i) * SQRT2 * Math.PI * 2) % (Math.PI * 2),
+                freqX: 0.00025 + i * 0.00006,
+                freqY: 0.0002 + i * 0.00007,
+            });
+        }
+    }
+
+    function resize() {
+        const canvas = canvasRef.value;
+        if (!canvas) return;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (vw === 0 || vh === 0) return;
+        dpr = Math.min(window.devicePixelRatio, 1.5);
+        canvas.width = Math.ceil(vw * dpr);
+        canvas.height = Math.ceil(vh * dpr);
+        buildBlobs();
+    }
+
+    function draw(time: number) {
+        const canvas = canvasRef.value;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        const vw = canvas.width / dpr;
+        const vh = canvas.height / dpr;
+        if (vw === 0 || vh === 0) { animId = requestAnimationFrame(draw); return; }
+
+        const scrollY = window.scrollY;
+        ctx.save();
+        ctx.scale(dpr, dpr);
+
+        // Surface fill
+        const surface = getSurface();
+        if (surface.alpha > 0) {
+            ctx.globalAlpha = surface.alpha;
+            ctx.globalCompositeOperation = "source-over";
+            ctx.filter = "none";
+            ctx.fillStyle = rgba(surface.rgb[0], surface.rgb[1], surface.rgb[2], 1);
+            ctx.fillRect(0, 0, vw, vh);
+            ctx.globalAlpha = 1;
+        } else {
+            ctx.clearRect(0, 0, vw, vh);
+        }
+
+        ctx.filter = `blur(${cfg.blur}px) saturate(140%)`;
+        ctx.globalCompositeOperation = cfg.blendMode;
+
+        const alpha = dark ? cfg.alphaDark : cfg.alphaLight;
+        const alphaScale = cfg.surfaceMode === "theme" ? (dark ? 0.6 : 2.2) : 1.0;
+        const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const speedMul = reducedMotion ? 0.05 : cfg.speed;
+
+        for (const blob of blobs) {
+            let cx: number, cy: number;
+            if (blob.mode === "viewport") {
+                cx = blob.anchorX * vw;
+                cy = blob.anchorY * vh;
+            } else {
+                cx = blob.anchorX * vw;
+                cy = blob.anchorY - scrollY;
+            }
+
+            cx += Math.sin(time * blob.freqX * speedMul + blob.phaseX) * vw * cfg.orbitAmplitude;
+            cy += Math.cos(time * blob.freqY * speedMul + blob.phaseY) * vh * cfg.orbitAmplitude;
+
+            if (cy + blob.radius < -blob.radius * 0.5 || cy - blob.radius > vh + blob.radius * 0.5) continue;
+
+            const [r, g, b] = blob.color;
+            const desat = dark ? 0.7 : 1.0;
+            const dr = Math.round(r * desat + 128 * (1 - desat));
+            const dg = Math.round(g * desat + 128 * (1 - desat));
+            const db = Math.round(b * desat + 128 * (1 - desat));
+
+            const peakAlpha = alpha * alphaScale;
+
+            const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, blob.radius);
+            grad.addColorStop(0, rgba(dr, dg, db, peakAlpha));
+            grad.addColorStop(cfg.gradStop2, rgba(dr, dg, db, peakAlpha * 0.6));
+            grad.addColorStop(cfg.gradStop3, rgba(dr, dg, db, peakAlpha * 0.2));
+            grad.addColorStop(cfg.gradStop4, rgba(dr, dg, db, 0));
+
+            ctx.fillStyle = grad;
+            ctx.fillRect(cx - blob.radius, cy - blob.radius, blob.radius * 2, blob.radius * 2);
+        }
+
+        ctx.restore();
+        animId = requestAnimationFrame(draw);
+    }
+
+    function onThemeChange() { dark = isDarkMode(); }
+
+    onMounted(() => {
+        dark = isDarkMode();
+        observer = new MutationObserver(onThemeChange);
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+        mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        mediaQuery.addEventListener("change", onThemeChange);
+        resize();
+        window.addEventListener("resize", resize);
+        animId = requestAnimationFrame(draw);
+    });
+
+    onBeforeUnmount(() => {
+        cancelAnimationFrame(animId);
+        window.removeEventListener("resize", resize);
+        observer?.disconnect();
+        mediaQuery?.removeEventListener("change", onThemeChange);
+    });
+
+    watch(
+        () => [cfg.colors, cfg.blobCount, cfg.baseRadius, cfg.radiusVariance,
+               cfg.viewportAnchorRatio, cfg.colorMode, cfg.lShiftLarge, cfg.lShiftSmall,
+               cfg.hueShiftLarge, cfg.hueShiftSmall, toValue(baseColor)],
+        () => buildBlobs(),
+        { deep: true },
+    );
+
+    return { config: cfg };
+}

package/src/components/custom/aurora/index.ts

@@ -0,0 +1,8 @@
+export { default as Aurora } from "./Aurora.vue";
+export type { AuroraProps } from "./Aurora.vue";
+export {
+    useAurora,
+    type AuroraConfig,
+    DEFAULT_AURORA_CONFIG,
+    ATMOSPHERE_PRESET,
+} from "./composables/useAurora";

package/src/components/custom/confirm-dialog/ConfirmDialog.vue

@@ -0,0 +1,88 @@
+<template>
+    <Transition name="fade">
+        <div
+            v-if="open"
+            class="absolute inset-0 z-popover grid place-items-center bg-black/50 rounded-2xl"
+            @click.self="!loading && (open = false)"
+            @keydown.escape="!loading && (open = false)"
+        >
+            <Transition name="confirm-panel" appear>
+                <div
+                    v-if="open"
+                    class="w-[calc(100%-2rem)] sm:max-w-sm bg-card text-card-foreground border border-border rounded-2xl shadow-lg"
+                >
+                    <div class="p-6 grid gap-4">
+                        <div class="grid gap-2">
+                            <h2 class="font-display text-lg font-semibold leading-none tracking-tight">
+                                {{ title }}
+                            </h2>
+                            <div class="font-mono-code text-sm text-muted-foreground">
+                                <slot>{{ description }}</slot>
+                            </div>
+                        </div>
+                        <div class="flex justify-end gap-2">
+                            <Button
+                                variant="outline"
+                                class="cursor-pointer rounded-full"
+                                :disabled="loading"
+                                @click="open = false"
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                :variant="destructive ? 'destructive' : 'default'"
+                                class="cursor-pointer gap-1.5 rounded-full"
+                                :disabled="loading"
+                                @click="onConfirm"
+                            >
+                                <LoaderCircle
+                                    v-if="loading"
+                                    class="size-4 animate-spin"
+                                />
+                                <slot name="action">{{ confirmLabel }}</slot>
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { LoaderCircle } from "lucide-vue-next";
+import { Button } from "../../ui/button";
+
+const props = defineProps<{
+    title: string;
+    description?: string;
+    confirmLabel: string;
+    destructive?: boolean;
+    loading?: boolean;
+}>();
+
+const open = defineModel<boolean>("open", { default: false });
+const emit = defineEmits<{ confirm: [] }>();
+
+function onConfirm() {
+    if (props.loading) return;
+    emit("confirm");
+    open.value = false;
+}
+</script>
+
+<style scoped>
+.confirm-panel-enter-active {
+    transition: opacity var(--duration-normal) var(--ease-out),
+                transform var(--duration-normal) var(--ease-out);
+}
+.confirm-panel-leave-active {
+    transition: opacity var(--duration-fast) var(--ease-in),
+                transform var(--duration-fast) var(--ease-in);
+}
+.confirm-panel-enter-from,
+.confirm-panel-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+}
+</style>

package/src/components/custom/confirm-dialog/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmDialog } from "./ConfirmDialog.vue";