@matta-trade/ui 0.0.0-stage → 0.2.2

package/dist/tags-input/index.js

@@ -0,0 +1,130 @@
+import { t as e } from "../chunks/utils-CX-Pz5p6.js";
+import { createBlock as t, createVNode as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
+import { TagsInputInput as l, TagsInputItem as u, TagsInputItemDelete as d, TagsInputItemText as f, TagsInputRoot as p, useForwardProps as m, useForwardPropsEmits as h } from "reka-ui";
+import { reactiveOmit as g } from "@vueuse/core";
+import { X as _ } from "lucide-vue-next";
+//#endregion
+//#region src/tags-input/TagsInput.vue
+var v = /* @__PURE__ */ r({
+	__name: "TagsInput",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		addOnPaste: { type: Boolean },
+		addOnTab: { type: Boolean },
+		addOnBlur: { type: Boolean },
+		duplicate: { type: Boolean },
+		disabled: { type: Boolean },
+		delimiter: {},
+		dir: {},
+		max: {},
+		id: {},
+		convertValue: { type: Function },
+		displayValue: { type: Function },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: [
+		"update:modelValue",
+		"invalid",
+		"addTag",
+		"removeTag"
+	],
+	setup(n, { emit: r }) {
+		let l = n, u = r, d = g(l, "class"), f = h(d, u);
+		return (n, r) => (a(), t(s(p), i(s(f), { class: s(e)("gap-2 border-input bg-background px-3 py-2 flex flex-wrap items-center rounded-md border text-sm", l.class) }), {
+			default: c(() => [o(n.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), y = /* @__PURE__ */ r({
+	__name: "TagsInputInput",
+	props: {
+		placeholder: {},
+		autoFocus: { type: Boolean },
+		maxLength: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let r = n, o = g(r, "class"), c = m(o);
+		return (n, o) => (a(), t(s(l), i(s(c), { class: s(e)("min-h-6 px-1 flex-1 bg-transparent text-sm focus:outline-none", r.class) }), null, 16, ["class"]));
+	}
+}), b = /* @__PURE__ */ r({
+	__name: "TagsInputItem",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let r = n, l = g(r, "class"), d = m(l);
+		return (n, l) => (a(), t(s(u), i(s(d), { class: s(e)("h-6 rounded data-[state=active]:ring-ring ring-offset-background flex items-center bg-secondary data-[state=active]:ring-2 data-[state=active]:ring-offset-2", r.class) }), {
+			default: c(() => [o(n.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), x = /* @__PURE__ */ r({
+	__name: "TagsInputItemDelete",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(r) {
+		let l = r, u = g(l, "class"), f = m(u);
+		return (r, u) => (a(), t(s(d), i(s(f), { class: s(e)("rounded mr-1 flex bg-transparent", l.class) }), {
+			default: c(() => [o(r.$slots, "default", {}, () => [n(s(_), { class: "w-4 h-4" })])]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), S = /* @__PURE__ */ r({
+	__name: "TagsInputItemText",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let r = n, o = g(r, "class"), c = m(o);
+		return (n, o) => (a(), t(s(f), i(s(c), { class: s(e)("py-1 px-2 rounded bg-transparent text-sm", r.class) }), null, 16, ["class"]));
+	}
+});
+//#endregion
+export { v as TagsInput, y as TagsInputInput, b as TagsInputItem, x as TagsInputItemDelete, S as TagsInputItemText };

package/dist/textarea/Textarea.vue.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'vue';
+interface Props {
+    modelValue?: string;
+    class?: HTMLAttributes["class"];
+    placeholder?: string;
+    rows?: number;
+    maxlength?: number;
+    disabled?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (payload: string) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    rows: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/textarea/index.d.ts

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

package/dist/textarea/index.js

@@ -0,0 +1,43 @@
+import { t as e } from "../chunks/utils-CX-Pz5p6.js";
+import { createElementBlock as t, defineComponent as n, isRef as r, normalizeClass as i, openBlock as a, unref as o, vModelText as s, withDirectives as c } from "vue";
+import { useVModel as l } from "@vueuse/core";
+//#region src/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
+var u = [
+	"rows",
+	"placeholder",
+	"maxlength",
+	"disabled"
+], d = /* @__PURE__ */ n({
+	__name: "Textarea",
+	props: {
+		modelValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		placeholder: {},
+		rows: { default: 4 },
+		maxlength: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(n, { emit: d }) {
+		let f = n, p = l(f, "modelValue", d, { passive: !0 });
+		return (n, l) => c((a(), t("textarea", {
+			"onUpdate:modelValue": l[0] ||= (e) => r(p) ? p.value = e : null,
+			rows: f.rows,
+			placeholder: f.placeholder,
+			maxlength: f.maxlength,
+			disabled: f.disabled,
+			class: i(o(e)("px-3 py-2 ring-offset-primary flex w-full resize-none rounded-lg border border-border-primary bg-primary text-sm text-primary shadow-xs transition-colors placeholder:text-placeholder focus-visible:border-border-brand focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", f.class))
+		}, null, 10, u)), [[s, o(p)]]);
+	}
+});
+//#endregion
+export { d as Textarea };

package/dist/tooltip/Tooltip.vue.d.ts

@@ -0,0 +1,18 @@
+import { TooltipRootProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<TooltipRootProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<TooltipRootProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tooltip/TooltipContent.vue.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'vue';
+import { TooltipContentProps } from 'reka-ui';
+type __VLS_Props = TooltipContentProps & {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: Event) => any) | undefined;
+}>, {
+    sideOffset: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tooltip/TooltipProvider.vue.d.ts

@@ -0,0 +1,14 @@
+import { TooltipProviderProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<TooltipProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tooltip/TooltipRoot.vue.d.ts

@@ -0,0 +1,18 @@
+import { TooltipRootProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<TooltipRootProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<TooltipRootProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tooltip/TooltipTrigger.vue.d.ts

@@ -0,0 +1,14 @@
+import { TooltipTriggerProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<TooltipTriggerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';

package/dist/tooltip/index.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "../chunks/tooltip-C80qPEs9.js";
+export { e as Tooltip, n as TooltipContent, t as TooltipProvider, r as TooltipTrigger };

package/package.json

@@ -1,6 +1,90 @@
 {
-  "name": "@matta-trade/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@matta-trade/ui",
+    "version": "0.2.2",
+    "description": "Matta design system - Vue 3 + shadcn-vue primitives, design tokens and house style. Consumed by the Matta admin apps.",
+    "type": "module",
+    "license": "UNLICENSED",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src",
+        "styles",
+        "DESIGN.md",
+        "README.md"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Matta-Trade/Matta.Trade.UI.git"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./styles/kit.css": "./styles/kit.css",
+        "./styles/theme.css": "./styles/theme.css",
+        "./styles/typography.css": "./styles/typography.css",
+        "./*": {
+            "types": "./dist/*/index.d.ts",
+            "import": "./dist/*/index.js"
+        }
+    },
+    "peerDependencies": {
+        "reka-ui": "^2.10.5",
+        "tailwindcss": "^4.2.2",
+        "vue": "^3.5.43",
+        "vue-sonner": "^2.0.9"
+    },
+    "dependencies": {
+        "@tailwindcss/typography": "^0.5.20",
+        "@unovis/ts": "^1.7.0",
+        "@unovis/vue": "^1.7.0",
+        "@vueuse/core": "^15.0.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-vue-next": "^1.0.0",
+        "tailwind-merge": "^3.7.0",
+        "tailwindcss-animate": "^1.0.7",
+        "vaul-vue": "^0.4.1"
+    },
+    "devDependencies": {
+        "@tailwindcss/vite": "^4.2.2",
+        "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+        "@vitejs/plugin-vue": "^6.0.9",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        "typescript": "^5.9.3",
+        "vite": "^8.0.2",
+        "vite-plugin-dts": "^5.1.2",
+        "vue-tsc": "^3.1.1"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build --config vite.config.lib.ts",
+        "prepublishOnly": "npm run check && npm run build",
+        "check": "vue-tsc --noEmit -p tsconfig.json",
+        "format": "prettier --write \"src/**/*.{ts,vue}\" \"styles/*.css\" \"preview/**/*.{ts,vue}\" \"*.md\"",
+        "release:patch": "npm version patch && git push origin main --follow-tags",
+        "release:minor": "npm version minor && git push origin main --follow-tags",
+        "release:major": "npm version major && git push origin main --follow-tags"
+    },
+    "peerDependenciesMeta": {
+        "tailwindcss": {
+            "optional": false
+        },
+        "vue": {
+            "optional": false
+        },
+        "reka-ui": {
+            "optional": false
+        },
+        "vue-sonner": {
+            "optional": false
+        }
+    }
+}

package/src/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { AlertVariants } from ".";
+import { alertVariants } from ".";
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+    variant?: AlertVariants["variant"];
+}>();
+</script>
+
+<template>
+    <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+        <slot />
+    </div>
+</template>

package/src/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('[&_p]:leading-relaxed text-sm', props.class)">
+        <slot />
+    </div>
+</template>

package/src/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <h5 :class="cn('mb-1 font-medium tracking-tight leading-none', props.class)">
+        <slot />
+    </h5>
+</template>

package/src/alert/index.ts

@@ -0,0 +1,29 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Alert } from "./Alert.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+
+export const alertVariants = cva(
+    "p-4 [&>svg~*]:pl-7 [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 relative w-full rounded-xl border text-sm [&>svg]:absolute [&>svg+div]:translate-y-[-2px]",
+    {
+        variants: {
+            variant: {
+                default: "border-border-secondary bg-primary text-primary [&>svg]:text-primary",
+                destructive:
+                    "dark:bg-utility-red-950 dark:border-utility-red-800 border-utility-red-200 bg-utility-red-50 text-utility-red-700 dark:text-utility-red-300 [&>svg]:text-utility-red-600 dark:[&>svg]:text-utility-red-400",
+                success:
+                    "border-utility-success-200 bg-utility-success-50 text-utility-success-700 dark:border-utility-success-800 dark:bg-utility-success-950 dark:text-utility-success-300 [&>svg]:text-utility-success-600 dark:[&>svg]:text-utility-success-400",
+                warning:
+                    "border-utility-warning-200 bg-utility-warning-50 text-utility-warning-700 dark:border-utility-warning-800 dark:bg-utility-warning-950 dark:text-utility-warning-300 [&>svg]:text-utility-warning-600 dark:[&>svg]:text-utility-warning-400",
+                info: "dark:bg-utility-brand-950 border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 dark:border-utility-brand-800 dark:text-utility-brand-300 [&>svg]:text-utility-brand-600 dark:[&>svg]:text-utility-brand-400",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/src/alert-dialog/AlertDialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui";
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<AlertDialogProps>();
+const emits = defineEmits<AlertDialogEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <AlertDialogRoot v-bind="forwarded">
+        <slot />
+    </AlertDialogRoot>
+</template>

package/src/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { AlertDialogActionProps } from "reka-ui";
+import { AlertDialogAction } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+        <slot />
+    </AlertDialogAction>
+</template>

package/src/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { AlertDialogCancelProps } from "reka-ui";
+import { AlertDialogCancel } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+        <slot />
+    </AlertDialogCancel>
+</template>

package/src/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui";
+import { AlertDialogContent, AlertDialogOverlay, AlertDialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<AlertDialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <AlertDialogPortal>
+        <AlertDialogOverlay
+            class="inset-0 backdrop-blur-xs fixed z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        />
+        <AlertDialogContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'max-w-lg gap-4 p-6 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border-secondary bg-primary shadow-2xl duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:zoom-in-95',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+        </AlertDialogContent>
+    </AlertDialogPortal>
+</template>

package/src/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { AlertDialogDescriptionProps } from "reka-ui";
+import { AlertDialogDescription } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <AlertDialogDescription v-bind="delegatedProps" :class="cn('text-sm text-tertiary', props.class)">
+        <slot />
+    </AlertDialogDescription>
+</template>

package/src/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('sm:flex-row sm:justify-end sm:gap-x-2 flex flex-col-reverse', props.class)">
+        <slot />
+    </div>
+</template>

package/src/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('gap-y-2 sm:text-left flex flex-col text-center', props.class)">
+        <slot />
+    </div>
+</template>

package/src/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { AlertDialogTitleProps } from "reka-ui";
+import { AlertDialogTitle } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <AlertDialogTitle v-bind="delegatedProps" :class="cn('font-semibold text-lg', props.class)">
+        <slot />
+    </AlertDialogTitle>
+</template>

package/src/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui";
+import { AlertDialogTrigger } from "reka-ui";
+
+const props = defineProps<AlertDialogTriggerProps>();
+</script>
+
+<template>
+    <AlertDialogTrigger v-bind="props">
+        <slot />
+    </AlertDialogTrigger>
+</template>

package/src/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue";
+export { default as AlertDialogAction } from "./AlertDialogAction.vue";
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";
+export { default as AlertDialogContent } from "./AlertDialogContent.vue";
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";