nuxt-ui-elements 0.1.8 → 0.1.11

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.8",
+  "version": "0.1.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,115 @@
-import { defineNuxtModule, createResolver, useLogger, hasNuxtModule, addComponentsDir } 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: {
@@ -9,20 +120,21 @@ const module$1 = defineNuxtModule({
     prefix: "UE"
   },
   moduleDependencies: {
-    "motion-v/nuxt": {},
-    "@nuxtjs/color-mode": {}
+    "@nuxt/ui": {}
   },
-  setup(options, _nuxt) {
+  setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    const logger = useLogger("nuxt-ui-elements");
-    if (!hasNuxtModule("@nuxt/ui")) {
-      logger.error("[nuxt-ui-elements] @nuxt/ui is required. Please install it");
-    }
-    addComponentsDir({
-      path: resolver.resolve("./runtime/components"),
-      pathPrefix: false,
-      prefix: options.prefix
-    });
+    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

@@ -0,0 +1,49 @@
+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;
+    close?: boolean;
+    color?: DialogConfirm["variants"]["color"];
+    variant?: DialogConfirm["variants"]["variant"];
+    onConfirm?: (() => void) | (() => Promise<void>);
+    onDismiss?: () => void;
+    ui?: Partial<DialogConfirm["slots"]>;
+}
+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").PublicProps, Readonly<DialogConfirmProps> & Readonly<{
+    onClose?: ((value?: any) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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

@@ -0,0 +1,170 @@
+<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 {
+  title,
+  description = "",
+  icon = true,
+  confirmLabel = "Yes",
+  dismissLabel = "No",
+  close = false,
+  color = "neutral",
+  variant = "solid",
+  onConfirm,
+  onDismiss,
+  ui: uiProps
+} = defineProps({
+  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 },
+  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 },
+  ui: { type: Object, required: false }
+});
+const emits = defineEmits(["update:open", "close", "after:leave"]);
+const isLoading = ref(false);
+const isComplete = ref(false);
+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 {
+      emits("close");
+    }
+  } catch (error) {
+    isLoading.value = false;
+    isError.value = true;
+    console.error("Dialog confirm error:", error);
+    setTimeout(() => {
+      isError.value = false;
+    }, 2e3);
+  }
+};
+const dismiss = () => {
+  if (onDismiss) {
+    onDismiss();
+  }
+  emits("close");
+};
+const handleClose = () => {
+  dismiss();
+};
+</script>
+
+<template>
+  <UModal
+    :dismissible="false"
+    :close="false"
+    :title="title"
+    :description="description"
+    :ui="{
+  content: ui.content({ class: uiProps?.content }),
+  header: ui.header({ class: uiProps?.header }),
+  body: ui.body({ class: uiProps?.body }),
+  footer: ui.footer({ class: uiProps?.footer })
+}"
+    @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>
+
+          <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>
+      <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

@@ -0,0 +1,49 @@
+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;
+    close?: boolean;
+    color?: DialogConfirm["variants"]["color"];
+    variant?: DialogConfirm["variants"]["variant"];
+    onConfirm?: (() => void) | (() => Promise<void>);
+    onDismiss?: () => void;
+    ui?: Partial<DialogConfirm["slots"]>;
+}
+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").PublicProps, Readonly<DialogConfirmProps> & Readonly<{
+    onClose?: ((value?: any) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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.js

@@ -0,0 +1,25 @@
+import DialogConfirm from "../components/DialogConfirm.vue";
+import { useOverlay } from "#imports";
+import { navigateTo } from "#app";
+export const useDialog = () => {
+  const overlay = useOverlay();
+  const confirm = (options) => {
+    const modal = overlay.create(DialogConfirm, {
+      destroyOnClose: true,
+      props: options
+    });
+    modal.open();
+    return modal;
+  };
+  const confirmNavigate = (path, options) => {
+    confirm({
+      title: "Leave this page?",
+      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

@@ -1,14 +1,64 @@
-import type { TV } from "tailwind-variants";
-export type ComponentConfig<T extends Record<string, any>> = {
-    variants: T extends {
-        variants: infer V;
-    } ? {
-        [K in keyof V]: V[K] extends Record<string, any> ? keyof V[K] : never;
-    } : never;
-    slots: T extends {
-        slots: infer S;
-    } ? {
-        [K in keyof S]: any;
-    } : never;
-};
-export type { TV };
+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 {};