nuxt-ui-elements 0.1.10 → 0.1.12

package/README.md

@@ -30,22 +30,32 @@ A collection of beautiful, animated UI components for Nuxt applications. Built w
 
 ## Quick Setup
 
-Install the module to your Nuxt application with one command:
+1. Install the module to your Nuxt application:
 
 ```bash
 pnpm add nuxt-ui-elements
 ```
 
-Add the module to your `nuxt.config.ts`:
+2. Add the module to your `nuxt.config.ts`:
 
 ```ts
 export default defineNuxtConfig({
-  modules: ['nuxt-ui-elements']
+  modules: ["@nuxt/ui", "nuxt-ui-elements"],
 })
 ```
 
+3. Import the module's CSS in your main CSS file (e.g., `assets/css/main.css`):
+
+```css
+@import "tailwindcss";
+@import "@nuxt/ui";
+@import "nuxt-ui-elements";
+```
+
 That's it! You can now use Nuxt UI Elements in your Nuxt app ✨
 
+> **Note:** This module requires `@nuxt/ui` v4.x as a peer dependency. The CSS import is required for Tailwind v4 to properly scan and generate styles from the component themes.
+
 ## Usage
 
 ### FlickeringGrid
@@ -61,8 +71,7 @@ A beautiful animated grid background component perfect for hero sections and lan
       gradient-direction="left-right"
       gradient-end-color="white"
       :flicker-speed="0.2"
-      class="z-0"
-    />
+      class="z-0" />
     <div class="relative z-10">
       <!-- Your content here -->
     </div>
@@ -113,24 +122,23 @@ An animated button component with an elegant shimmer effect, perfect for call-to
     shimmer-color="#60a5fa"
     background="rgba(59, 130, 246, 1)"
     :speed="2.5"
-    @click="handleClick"
-  />
+    @click="handleClick" />
 </template>
 ```
 
 #### Props
 
-| Prop            | Type     | Default              | Description                                      |
-| --------------- | -------- | -------------------- | ------------------------------------------------ |
-| `label`         | `string` | -                    | Button label text                                |
-| `shimmerColor`  | `string` | `'#ffffff'`          | Color of the shimmer effect                      |
-| `shimmerSize`   | `string` | `'0.05em'`           | Size of the shimmer effect                       |
-| `speed`         | `number` | `3`                  | Animation speed in seconds (lower = faster)      |
-| `background`    | `string` | `'rgba(0, 0, 0, 1)'` | Background color of the button                   |
-| `radius`        | `string` | `'100px'`            | Border radius of the button                      |
-| `size`          | `string` | `'md'`               | Button size: `xs`, `sm`, `md`, `lg`, `xl`        |
-| `class`         | `string` | -                    | Additional CSS classes                           |
-| `ui`            | `object` | -                    | UI slot customization for advanced styling       |
+| Prop           | Type     | Default              | Description                                 |
+| -------------- | -------- | -------------------- | ------------------------------------------- |
+| `label`        | `string` | -                    | Button label text                           |
+| `shimmerColor` | `string` | `'#ffffff'`          | Color of the shimmer effect                 |
+| `shimmerSize`  | `string` | `'0.05em'`           | Size of the shimmer effect                  |
+| `speed`        | `number` | `3`                  | Animation speed in seconds (lower = faster) |
+| `background`   | `string` | `'rgba(0, 0, 0, 1)'` | Background color of the button              |
+| `radius`       | `string` | `'100px'`            | Border radius of the button                 |
+| `size`         | `string` | `'md'`               | Button size: `xs`, `sm`, `md`, `lg`, `xl`   |
+| `class`        | `string` | -                    | Additional CSS classes                      |
+| `ui`           | `object` | -                    | UI slot customization for advanced styling  |
 
 #### Slots
 
@@ -145,20 +153,19 @@ An animated button component with an elegant shimmer effect, perfect for call-to
 #### Examples
 
 **Basic Usage:**
+
 ```vue
 <UEButtonShimmer label="Click Me" />
 ```
 
 **With Custom Colors:**
+
 ```vue
-<UEButtonShimmer
-  label="Primary Action"
-  shimmer-color="#a78bfa"
-  background="rgba(139, 92, 246, 1)"
-/>
+<UEButtonShimmer label="Primary Action" shimmer-color="#a78bfa" background="rgba(139, 92, 246, 1)" />
 ```
 
 **Different Sizes:**
+
 ```vue
 <UEButtonShimmer label="Small" size="sm" />
 <UEButtonShimmer label="Medium" size="md" />
@@ -167,6 +174,7 @@ An animated button component with an elegant shimmer effect, perfect for call-to
 ```
 
 **With Slots:**
+
 ```vue
 <UEButtonShimmer>
   <template #leading>
@@ -180,11 +188,9 @@ An animated button component with an elegant shimmer effect, perfect for call-to
 ```
 
 **Fast Animation:**
+
 ```vue
-<UEButtonShimmer
-  label="Fast Shimmer"
-  :speed="1.5"
-/>
+<UEButtonShimmer label="Fast Shimmer" :speed="1.5" />
 ```
 
 ## Configuration
@@ -193,10 +199,10 @@ You can customize the component prefix in your `nuxt.config.ts`:
 
 ```ts
 export default defineNuxtConfig({
-  modules: ['nuxt-ui-elements'],
+  modules: ["nuxt-ui-elements"],
   uiElements: {
-    prefix: 'Custom' // Components will be named CustomFlickeringGrid
-  }
+    prefix: "Custom", // Components will be named CustomFlickeringGrid
+  },
 })
 ```
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,115 @@
-import { defineNuxtModule, createResolver, useLogger, addImportsDir } from '@nuxt/kit';
+import { addTemplate, defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
+import { kebabCase } from 'scule';
+
+const dialogConfirm = (options) => ({
+  slots: {
+    content: "divide-y-0 bg-default ring-0",
+    header: "relative flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
+    icon: "shrink-0 mt-1 size-6",
+    title: "text-lg font-semibold",
+    description: "text-sm opacity-90",
+    body: "p-2 sm:p-5 sm:pt-0",
+    footer: "justify-end gap-3",
+    close: ""
+  },
+  variants: {
+    size: {
+      sm: {
+        content: "sm:max-w-md"
+      },
+      md: {
+        content: "sm:max-w-3xl"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: ""
+    }
+  },
+  compoundVariants: [
+    // Solid variants - dynamically generated for all theme colors
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        content: `bg-${color} text-inverted`,
+        close: "!text-white hover:bg-white/10 active:bg-white/20"
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        content: "text-inverted bg-inverted",
+        close: "!text-white hover:bg-white/10 active:bg-white/20"
+      }
+    },
+    // Outline variants - dynamically generated for all theme colors
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        content: `bg-gradient-to-b from-${color}/5 to-${color}/5 bg-default text-${color} !ring !ring-inset !ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        content: "text-highlighted bg-elevated !ring !ring-inset !ring-accented"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "sm"
+  }
+});
+
+const theme = {
+  __proto__: null,
+  dialogConfirm: dialogConfirm
+};
+
+function addTemplates(options, _nuxt) {
+  const templates = [];
+  function writeThemeTemplate(themeModules) {
+    for (const component in themeModules) {
+      templates.push({
+        filename: `ui-elements/${kebabCase(component)}.ts`,
+        write: true,
+        getContents: () => {
+          const template = themeModules[component];
+          const result = typeof template === "function" ? template(options) : template;
+          const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+            const keys = Object.keys(values);
+            return keys.some((key) => key !== "true" && key !== "false");
+          }).map(([key]) => key);
+          let json = JSON.stringify(result, null, 2);
+          for (const variant of variants) {
+            json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
+            json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+              const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+              return `${before}${replaced}${after}`;
+            });
+          }
+          const variantDeclarations = variants.filter((variant) => json.includes(`as typeof ${variant}`)).map((variant) => {
+            const keys = Object.keys(result.variants[variant]);
+            return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
+          });
+          return [...variantDeclarations, `export default ${json}`].join("\n\n");
+        }
+      });
+    }
+  }
+  writeThemeTemplate(theme);
+  templates.forEach((template) => addTemplate(template));
+}
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -11,9 +122,18 @@ const module$1 = defineNuxtModule({
   moduleDependencies: {
     "@nuxt/ui": {}
   },
-  setup(_options, _nuxt) {
+  setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    useLogger("nuxt-ui-elements");
+    const uiOptions = nuxt.options.ui;
+    const themeColors = uiOptions?.theme?.colors || ["primary", "secondary", "success", "info", "warning", "error"];
+    const optionsWithTheme = {
+      ...options,
+      theme: {
+        colors: themeColors
+      }
+    };
+    addTemplates(optionsWithTheme);
+    nuxt.options.css.push(resolver.resolve("./runtime/index.css"));
     addImportsDir(resolver.resolve("./runtime/composables"));
   }
 });

package/dist/runtime/components/DialogConfirm.d.vue.ts

@@ -1,25 +1,49 @@
-interface Props {
-    open?: boolean;
-    size?: "sm" | "md";
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/dialog-confirm";
+import type { ComponentConfig } from "../types/tv.js";
+type DialogConfirm = ComponentConfig<typeof theme, AppConfig, "dialogConfirm">;
+export interface DialogConfirmEmits {
+    "update:open": [value: boolean];
+    close: [value?: any];
+    "after:leave": [];
+}
+export interface DialogConfirmSlots {
+    title(props?: {}): any;
+    description(props?: {}): any;
+    actions(props?: {}): any;
+}
+export interface DialogConfirmProps {
     title: string;
     description?: string;
+    icon?: boolean;
     confirmLabel?: string;
     dismissLabel?: string;
-    clickToClose?: boolean;
-    async?: boolean;
-    successDelay?: number;
+    close?: boolean;
+    color?: DialogConfirm["variants"]["color"];
+    variant?: DialogConfirm["variants"]["variant"];
     onConfirm?: (() => void) | (() => Promise<void>);
     onDismiss?: () => void;
-    onClose?: () => void;
+    ui?: Partial<DialogConfirm["slots"]>;
 }
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DialogConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (value?: any) => any;
+    "update:open": (value: boolean) => any;
     "after:leave": () => any;
-}, string, import("@vue/runtime-core").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<DialogConfirmProps> & Readonly<{
     onClose?: ((value?: any) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    description?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DialogConfirm.vue

@@ -1,119 +1,170 @@
-<script setup>
+<script>
+import theme from "#build/ui-elements/dialog-confirm";
 import { computed, ref } from "vue";
+import { DialogTitle, DialogDescription } from "reka-ui";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
 const {
-  open = false,
-  size = "sm",
+  title,
+  description = "",
+  icon = true,
   confirmLabel = "Yes",
   dismissLabel = "No",
-  async = false,
-  successDelay = 1200,
-  ...props
+  close = false,
+  color = "neutral",
+  variant = "solid",
+  onConfirm,
+  onDismiss,
+  ui: uiProps
 } = defineProps({
-  open: { type: Boolean, required: false },
-  size: { type: String, required: false },
   title: { type: String, required: true },
   description: { type: String, required: false },
+  icon: { type: Boolean, required: false },
   confirmLabel: { type: String, required: false },
   dismissLabel: { type: String, required: false },
-  clickToClose: { type: Boolean, required: false },
-  async: { type: Boolean, required: false },
-  successDelay: { type: Number, required: false },
+  close: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
   onConfirm: { type: Function, required: false },
   onDismiss: { type: Function, required: false },
-  onClose: { type: Function, required: false }
+  ui: { type: Object, required: false }
 });
-defineEmits(["update:open", "close", "after:leave"]);
-const sizeClass = computed(() => {
-  switch (size) {
-    case "sm":
-      return "sm:max-w-md";
-    case "md":
-      return "sm:max-w-3xl";
-    default:
-      return "max-w-3xl";
-  }
-});
-const isConfirming = ref(false);
+const emits = defineEmits(["update:open", "close", "after:leave"]);
+const isLoading = ref(false);
 const isComplete = ref(false);
-const error = ref(null);
-const confirm = async () => {
-  if (props.onConfirm) {
-    if (async) {
-      isConfirming.value = true;
-      error.value = null;
-      try {
-        await Promise.resolve(props.onConfirm());
-        isConfirming.value = false;
-        isComplete.value = true;
-        await new Promise((resolve) => setTimeout(resolve, successDelay));
-        props.onClose?.();
-      } catch (e) {
-        isConfirming.value = false;
-        error.value = e instanceof Error ? e.message : "An error occurred";
-        return;
-      }
+const isError = ref(false);
+const ui = computed(
+  () => tv({
+    extend: tv(theme)
+  })({
+    size: "sm",
+    color,
+    variant
+  })
+);
+const colorIconMap = {
+  primary: "i-lucide-info",
+  secondary: "i-lucide-info",
+  success: "i-lucide-circle-check",
+  info: "i-lucide-info",
+  warning: "i-lucide-triangle-alert",
+  error: "i-lucide-circle-x",
+  neutral: "i-lucide-info"
+};
+const dialogIcon = computed(() => {
+  if (icon === false) return void 0;
+  return colorIconMap[color];
+});
+const closeButtonProps = computed(() => ({
+  icon: "i-lucide-x",
+  size: "md",
+  color: "neutral",
+  variant: "ghost"
+}));
+const confirmHandler = async () => {
+  if (!onConfirm) {
+    emits("close");
+    return;
+  }
+  try {
+    const result = onConfirm();
+    const isAsync = result instanceof Promise;
+    if (isAsync) {
+      isLoading.value = true;
+      await result;
+      isLoading.value = false;
+      isComplete.value = true;
+      setTimeout(() => {
+        emits("close");
+      }, 800);
     } else {
-      props.onConfirm();
-      props.onClose?.();
+      emits("close");
     }
+  } catch (error) {
+    isLoading.value = false;
+    isError.value = true;
+    console.error("Dialog confirm error:", error);
+    setTimeout(() => {
+      isError.value = false;
+    }, 2e3);
   }
 };
 const dismiss = () => {
-  if (props.onDismiss) {
-    props.onDismiss();
+  if (onDismiss) {
+    onDismiss();
   }
-  props.onClose?.();
+  emits("close");
+};
+const handleClose = () => {
+  dismiss();
 };
 </script>
 
 <template>
   <UModal
-    :open="open"
-    :dismissible="clickToClose"
+    :dismissible="false"
     :close="false"
     :title="title"
+    :description="description"
     :ui="{
-  content: `${sizeClass} divide-y-0`,
-  header: 'px-2 sm:px-5 py-3',
-  body: 'p-2 sm:p-5 sm:pt-0',
-  footer: 'justify-end gap-3'
+  content: ui.content({ class: uiProps?.content }),
+  header: ui.header({ class: uiProps?.header }),
+  body: ui.body({ class: uiProps?.body }),
+  footer: ui.footer({ class: uiProps?.footer })
 }"
-    @update:open="$emit('update:open', $event)"
-    @close="$emit('close', $event)"
-    @after:leave="$emit('after:leave')"
-  >
-    <template #body>
-      <div class="space-y-3">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="text-sm text-gray-500" v-html="description" />
+    @close="emits('close', $event)"
+    @after:leave="emits('after:leave')">
+    <template #header>
+      <div class="relative w-full flex items-start gap-3">
+        <UIcon v-if="dialogIcon" :name="dialogIcon" data-slot="icon" :class="ui.icon({ class: uiProps?.icon })" />
+        <div class="flex-1 min-w-0">
+          <DialogTitle v-if="title" data-slot="title" :class="ui.title({ class: uiProps?.title })">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
 
-        <!-- Error message -->
-        <div
-          v-if="error"
-          class="text-sm text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950 p-3 rounded"
-        >
-          {{ error }}
+          <DialogDescription v-if="description" :class="ui.description({ class: uiProps?.description })">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
         </div>
+
+        <UButton
+          v-if="close"
+          v-bind="closeButtonProps"
+          data-slot="close"
+          :class="ui.close({ class: uiProps?.close })"
+          @click="handleClose" />
       </div>
     </template>
+
     <template #footer>
-      <UButton
-        v-if="dismissLabel"
-        :ui="{ base: 'justify-around' }"
-        color="neutral"
-        variant="outline"
-        :label="dismissLabel"
-        @click="dismiss"
-      />
-      <UButton
-        color="neutral"
-        :loading="isConfirming"
-        :disabled="isComplete"
-        :label="isComplete ? void 0 : confirmLabel"
-        :icon="isComplete ? 'i-heroicons-check' : void 0"
-        :ui="{ base: 'justify-around' }"
-        @click="confirm"
-      />
+      <slot name="actions">
+        <!-- Dismiss button (No) - hidden when loading, complete, or error -->
+        <UButton
+          v-if="dismissLabel && !isLoading && !isComplete && !isError"
+          :label="dismissLabel"
+          size="lg"
+          :color="color"
+          variant="solid"
+          @click="dismiss" />
+
+        <!-- Confirm button (Yes) - shows loading/complete/error states -->
+        <UButton
+          :label="isError ? 'Error' : isComplete ? 'Complete' : confirmLabel"
+          size="lg"
+          color="neutral"
+          variant="outline"
+          :loading="isLoading"
+          :disabled="isComplete"
+          :leading-icon="isError ? 'i-lucide-circle-x' : isComplete ? 'i-lucide-check' : void 0"
+          :class="{ 'animate-shake': isError }"
+          @click="confirmHandler" />
+      </slot>
     </template>
   </UModal>
 </template>

package/dist/runtime/components/DialogConfirm.vue.d.ts

@@ -1,25 +1,49 @@
-interface Props {
-    open?: boolean;
-    size?: "sm" | "md";
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/dialog-confirm";
+import type { ComponentConfig } from "../types/tv.js";
+type DialogConfirm = ComponentConfig<typeof theme, AppConfig, "dialogConfirm">;
+export interface DialogConfirmEmits {
+    "update:open": [value: boolean];
+    close: [value?: any];
+    "after:leave": [];
+}
+export interface DialogConfirmSlots {
+    title(props?: {}): any;
+    description(props?: {}): any;
+    actions(props?: {}): any;
+}
+export interface DialogConfirmProps {
     title: string;
     description?: string;
+    icon?: boolean;
     confirmLabel?: string;
     dismissLabel?: string;
-    clickToClose?: boolean;
-    async?: boolean;
-    successDelay?: number;
+    close?: boolean;
+    color?: DialogConfirm["variants"]["color"];
+    variant?: DialogConfirm["variants"]["variant"];
     onConfirm?: (() => void) | (() => Promise<void>);
     onDismiss?: () => void;
-    onClose?: () => void;
+    ui?: Partial<DialogConfirm["slots"]>;
 }
-declare const __VLS_export: import("@vue/runtime-core").DefineComponent<Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DialogConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (value?: any) => any;
+    "update:open": (value: boolean) => any;
     "after:leave": () => any;
-}, string, import("@vue/runtime-core").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<DialogConfirmProps> & Readonly<{
     onClose?: ((value?: any) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    description?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useDialog.d.ts

@@ -1,12 +1,21 @@
-import DialogConfirm from "../components/DialogConfirm.vue.js";
 type CallbackFn = () => void | Promise<void>;
-interface DialogInstance {
-    onConfirm: (fn: CallbackFn) => DialogInstance;
-    onDismiss: (fn: CallbackFn) => DialogInstance;
-    open: () => DialogInstance;
+type Color = "primary" | "secondary" | "success" | "info" | "warning" | "error" | (string & {});
+type Variant = "solid" | "outline";
+export interface DialogConfirmOptions {
+    title: string;
+    description?: string;
+    icon?: boolean;
+    confirmLabel?: string;
+    dismissLabel?: string;
+    color?: Color;
+    variant?: Variant;
+    close?: boolean;
+    onConfirm?: CallbackFn;
+    onDismiss?: CallbackFn;
+    ui?: any;
 }
 export declare const useDialog: () => {
-    confirm: (options: Omit<InstanceType<typeof DialogConfirm>["$props"], "onDismiss" | "onConfirm" | "class">) => DialogInstance;
-    confirmNavigate: (path: string) => void;
+    confirm: (options: DialogConfirmOptions) => void;
+    confirmNavigate: (path: string, options?: Omit<DialogConfirmOptions, "title" | "description" | "onConfirm">) => void;
 };
 export {};

package/dist/runtime/composables/useDialog.js

@@ -4,48 +4,21 @@ import { navigateTo } from "#app";
 export const useDialog = () => {
   const overlay = useOverlay();
   const confirm = (options) => {
-    let confirmCallback = () => {
-    };
-    let dismissCallback = () => {
-    };
     const modal = overlay.create(DialogConfirm, {
       destroyOnClose: true,
-      props: {
-        ...options,
-        onConfirm: async () => {
-          await confirmCallback();
-        },
-        onDismiss: async () => {
-          await dismissCallback();
-        }
-        // onClose: () => {
-        //   modal.close();
-        // },
-      }
+      props: options
     });
-    const dialogInstance = {
-      onConfirm: (fn) => {
-        confirmCallback = fn;
-        return dialogInstance;
-      },
-      onDismiss: (fn) => {
-        dismissCallback = fn;
-        return dialogInstance;
-      },
-      open: () => {
-        modal.open();
-        return dialogInstance;
-      }
-    };
-    return dialogInstance;
+    modal.open();
   };
-  const confirmNavigate = (path) => {
+  const confirmNavigate = (path, options) => {
     confirm({
       title: "Leave this page?",
-      description: "Are you sure you want to navigate away? Unsaved changes will be lost."
-    }).onConfirm(() => {
-      navigateTo(path);
-    }).open();
+      description: "Are you sure you want to navigate away? Unsaved changes will be lost.",
+      ...options,
+      onConfirm: () => {
+        navigateTo(path);
+      }
+    });
   };
   return { confirm, confirmNavigate };
 };

package/dist/runtime/index.css

@@ -0,0 +1 @@
+@source "../theme";@source "./components";@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}.animate-shake{animation:shake .5s ease-in-out}

package/dist/runtime/types/tv.d.ts

@@ -0,0 +1,64 @@
+import type { ClassValue, TVVariants, TVCompoundVariants, TVDefaultVariants } from "tailwind-variants";
+/**
+ * Defines the AppConfig object based on the tailwind-variants configuration.
+ */
+export type TVConfig<T extends Record<string, any>> = {
+    [P in keyof T]?: {
+        [K in keyof T[P] as K extends "base" | "slots" | "variants" | "defaultVariants" ? K : never]?: K extends "base" ? ClassValue : K extends "slots" ? {
+            [S in keyof T[P]["slots"]]?: ClassValue;
+        } : K extends "variants" ? TVVariants<T[P]["slots"], ClassValue, WidenVariantsValues<T[P]["variants"]>> : K extends "defaultVariants" ? TVDefaultVariants<WidenVariantsValues<T[P]["variants"]>, T[P]["slots"], object, undefined> : never;
+    };
+} & {
+    [P in keyof T]?: {
+        compoundVariants?: TVCompoundVariants<WidenVariantsValues<T[P]["variants"]>, T[P]["slots"], ClassValue, object, undefined>;
+    };
+};
+type WidenVariantsValues<V extends Record<string, any> | undefined> = V extends Record<string, any> ? V & {
+    [K in keyof V]: V[K] extends Record<string, any> ? V[K] & Record<string & {}, any> : V[K];
+} : V;
+/**
+ * Utility type to flatten intersection types for better IDE hover information.
+ * @template T The type to flatten.
+ */
+type Id<T> = {} & {
+    [P in keyof T]: T[P];
+};
+type ComponentVariants<T extends {
+    variants?: Record<string, Record<string, any>>;
+}> = {
+    [K in keyof T["variants"]]: keyof T["variants"][K];
+};
+type ComponentSlots<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof T["slots"]]?: ClassValue;
+}>;
+type ComponentUI<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof Required<T["slots"]>]: (props?: Record<string, any>) => string;
+}>;
+type GetComponentAppConfig<A, U extends string, K extends string> = A extends Record<U, Record<K, any>> ? A[U][K] : {};
+type ComponentAppConfig<T, A extends Record<string, any>, K extends string, U extends string = "ui" | "uiElements"> = A & (U extends "uiElements" ? {
+    uiElements?: {
+        [k in K]?: Partial<T>;
+    };
+} : {
+    [key in Exclude<U, "uiElements">]?: {
+        [k in K]?: Partial<T>;
+    };
+});
+/**
+ * Defines the configuration shape expected for a component.
+ * @template T The component's theme imported from `#build/ui-elements/*`.
+ * @template A The base AppConfig type from `@nuxt/schema`.
+ * @template K The key identifying the component (e.g., 'dialogConfirm').
+ * @template U The top-level key in AppConfig ('ui' or 'uiElements').
+ */
+export type ComponentConfig<T extends Record<string, any>, A extends Record<string, any>, K extends string, U extends "ui" | "uiElements" = "uiElements"> = {
+    AppConfig: ComponentAppConfig<T, A, K, U>;
+    variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>;
+    slots: ComponentSlots<T>;
+    ui: ComponentUI<T>;
+};
+export {};

package/dist/runtime/utils/tv.d.ts

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").TV;

package/dist/runtime/utils/tv.js

@@ -0,0 +1,2 @@
+import { createTV } from "tailwind-variants";
+export const tv = /* @__PURE__ */ createTV({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -9,6 +9,7 @@
   ],
   "type": "module",
   "main": "./dist/module.mjs",
+  "style": "./dist/runtime/index.css",
   "typesVersions": {
     "*": {
       ".": [
@@ -19,27 +20,29 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
+      "style": "./dist/runtime/index.css",
       "import": "./dist/module.mjs"
     }
   },
   "dependencies": {
     "@nuxt/kit": "^4.2.2",
-    "culori": "^4.0.2",
-    "motion-v": "^1.7.4",
+    "scule": "^1.3.0",
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.1.1",
+    "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.2",
-    "@nuxt/test-utils": "^3.21.0",
+    "@nuxt/test-utils": "^3.22.0",
     "@types/culori": "^4.0.1",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-prettier": "5.5.4",
     "nuxt": "^4.2.2",
-    "oxfmt": "^0.20.0",
-    "oxlint": "^1.35.0",
-    "oxlint-tsgolint": "^0.10.0",
+    "prettier": "^3.7.4",
     "typescript": "~5.9.3",
     "vitest": "^4.0.16",
     "vue-tsc": "^3.2.1"
@@ -51,10 +54,10 @@
     "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "lint": "oxlint --type-aware",
-    "lint:fix": "oxlint --fix --type-aware",
-    "format": "oxfmt --write",
-    "format:check": "oxfmt --check",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release && pnpm publish && git push --follow-tags",
     "test": "vitest run",
     "test:watch": "vitest watch",