@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/module.mjs

@@ -1,114 +1,2602 @@
-import { createRequire } from 'node:module';
-import { addTemplate, useNuxt, installModule, createResolver, defineNuxtModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { join } from 'pathe';
-import { defu } from 'defu';
-import { setGlobalColors } from '../dist/runtime/utils/colors.js';
-
-
-
-// -- Unbuild CommonJS Shims --
-import __cjs_url__ from 'url';
-import __cjs_path__ from 'path';
-import __cjs_mod__ from 'module';
-const __filename = __cjs_url__.fileURLToPath(import.meta.url);
-const __dirname = __cjs_path__.dirname(__filename);
-const require = __cjs_mod__.createRequire(import.meta.url);
-const name = "@nuxt/ui";
-const version = "2.18.3";
-
-function createTemplates(nuxt = useNuxt()) {
-  const template = addTemplate({
-    filename: "ui.colors.mjs",
-    getContents: () => `export default ${JSON.stringify(nuxt.options.appConfig.ui.colors)};`,
-    write: true
-  });
-  const typesTemplate = addTemplate({
-    filename: "ui.colors.d.ts",
-    getContents: () => `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(nuxt.options.appConfig.ui.colors)}; export default defaultExport; }`,
-    write: true
-  });
-  nuxt.options.alias["#ui-colors"] = template.dst;
-  nuxt.hook("prepare:types", (opts) => {
-    opts.references.push({ path: typesTemplate.dst });
-  });
+import { defuFn, defu } from 'defu';
+import { addTemplate, hasNuxtModule, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
+import { kebabCase } from 'scule';
+
+const accordion = {
+  slots: {
+    root: "w-full",
+    item: "border-b border-gray-200 dark:border-gray-800 last:border-b-0",
+    header: "flex",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+    content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
+    body: "text-sm pb-3.5",
+    leadingIcon: "shrink-0 size-5",
+    trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
+    label: "truncate"
+  },
+  variants: {
+    disabled: {
+      true: {
+        trigger: "cursor-not-allowed opacity-75"
+      }
+    }
+  }
+};
+
+const alert = (options) => ({
+  slots: {
+    root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
+    wrapper: "min-w-0 flex-1 flex flex-col gap-1",
+    title: "text-sm font-medium",
+    description: "text-sm opacity-90",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xl",
+    actions: "flex gap-1.5 shrink-0",
+    close: "p-0.5"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      gray: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    multiline: {
+      true: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      },
+      false: {
+        root: "items-center",
+        actions: "items-center"
+      }
+    }
+  },
+  compoundVariants: [...options.colors.map((color) => ({
+    color,
+    variant: "solid",
+    class: {
+      root: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
+    }
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "outline",
+    class: {
+      root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+    }
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "soft",
+    class: {
+      root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
+    }
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "subtle",
+    class: {
+      root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+    }
+  })), {
+    color: "gray",
+    variant: "solid",
+    class: {
+      root: "text-white dark:text-gray-900 bg-gray-900 dark:bg-white"
+    }
+  }, {
+    color: "gray",
+    variant: "outline",
+    class: {
+      root: "text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-200 dark:ring-gray-800"
+    }
+  }, {
+    color: "gray",
+    variant: "soft",
+    class: {
+      root: "text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50"
+    }
+  }, {
+    color: "gray",
+    variant: "subtle",
+    class: {
+      root: "text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50 ring ring-inset ring-gray-300 dark:ring-gray-700"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    variant: "outline"
+  }
+});
+
+const avatar = {
+  slots: {
+    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800",
+    image: "h-full w-full rounded-[inherit] object-cover",
+    fallback: "font-medium leading-none text-gray-500 dark:text-gray-400 truncate",
+    icon: "text-gray-500 dark:text-gray-400 shrink-0"
+  },
+  variants: {
+    size: {
+      "3xs": {
+        root: "size-4 text-[8px]"
+      },
+      "2xs": {
+        root: "size-5 text-[10px]"
+      },
+      "xs": {
+        root: "size-6 text-xs"
+      },
+      "sm": {
+        root: "size-7 text-sm"
+      },
+      "md": {
+        root: "size-8 text-base"
+      },
+      "lg": {
+        root: "size-9 text-lg"
+      },
+      "xl": {
+        root: "size-10 text-xl"
+      },
+      "2xl": {
+        root: "size-11 text-[22px]"
+      },
+      "3xl": {
+        root: "size-12 text-2xl"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+};
+
+const avatarGroup = {
+  slots: {
+    root: "inline-flex flex-row-reverse justify-end",
+    base: "relative rounded-full ring-white dark:ring-gray-900 first:me-0"
+  },
+  variants: {
+    size: {
+      "3xs": {
+        base: "ring-1 -me-0.5"
+      },
+      "2xs": {
+        base: "ring-1 -me-0.5"
+      },
+      "xs": {
+        base: "ring-1 -me-0.5"
+      },
+      "sm": {
+        base: "ring-2 -me-1.5"
+      },
+      "md": {
+        base: "ring-2 -me-1.5"
+      },
+      "lg": {
+        base: "ring-2 -me-1.5"
+      },
+      "xl": {
+        base: "ring-2.5 -me-2"
+      },
+      "2xl": {
+        base: "ring-2.5 -me-2"
+      },
+      "3xl": {
+        base: "ring-2.5 -me-2"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+};
+
+const badge = (options) => ({
+  base: "rounded-md font-medium inline-flex items-center",
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      gray: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    size: {
+      sm: "text-xs px-1.5 py-0.5",
+      md: "text-xs px-2 py-1",
+      lg: "text-sm px-2 py-1"
+    }
+  },
+  compoundVariants: [...options.colors.map((color) => ({
+    color,
+    variant: "solid",
+    class: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "outline",
+    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "soft",
+    class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "subtle",
+    class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+  })), {
+    color: "gray",
+    variant: "solid",
+    class: "text-white dark:text-gray-900 bg-gray-900 dark:bg-white"
+  }, {
+    color: "gray",
+    variant: "outline",
+    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900"
+  }, {
+    color: "gray",
+    variant: "soft",
+    class: "text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800"
+  }, {
+    color: "gray",
+    variant: "subtle",
+    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800"
+  }],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "md"
+  }
+});
+
+const breadcrumb = (options) => ({
+  slots: {
+    root: "relative min-w-0",
+    list: "flex items-center gap-1.5",
+    item: "flex min-w-0",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+    linkLeadingIcon: "shrink-0 size-5",
+    linkLeadingAvatar: "shrink-0",
+    linkLeadingAvatarSize: "2xs",
+    linkLabel: "truncate",
+    separator: "flex",
+    separatorIcon: "shrink-0 size-5 text-gray-500 dark:text-gray-400"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-primary-500 dark:text-primary-400 font-semibold"
+      },
+      false: {
+        link: "text-gray-500 dark:text-gray-400 font-medium"
+      }
+    },
+    disabled: {
+      true: {
+        link: "cursor-not-allowed opacity-75"
+      }
+    },
+    to: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    disabled: false,
+    active: false,
+    to: true,
+    class: {
+      link: ["hover:text-gray-700 dark:hover:text-gray-200", options.transitions && "transition-colors"]
+    }
+  }]
+});
+
+const buttonGroupVariant = {
+  buttonGroup: {
+    horizontal: "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
+    vertical: "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
+  }
+};
+const buttonGroupVariantWithRoot = {
+  buttonGroup: {
+    horizontal: {
+      root: "group",
+      base: "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
+    },
+    vertical: {
+      root: "group",
+      base: "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
+    }
+  }
+};
+const buttonGroup = {
+  base: "relative",
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    },
+    orientation: {
+      horizontal: "inline-flex -space-x-px",
+      vertical: "flex flex-col -space-y-px"
+    }
+  }
+};
+
+const button = (options) => ({
+  slots: {
+    base: ["rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.transitions && "transition-colors"],
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    trailingIcon: "shrink-0"
+  },
+  variants: {
+    ...buttonGroupVariant,
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      gray: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: "",
+      ghost: "",
+      link: ""
+    },
+    size: {
+      xs: {
+        base: "px-2 py-1 text-xs gap-1",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4"
+      },
+      sm: {
+        base: "px-2.5 py-1.5 text-xs gap-1.5",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4"
+      },
+      md: {
+        base: "px-2.5 py-1.5 text-sm gap-1.5",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5"
+      },
+      lg: {
+        base: "px-3 py-2 text-sm gap-2",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5"
+      },
+      xl: {
+        base: "px-3 py-2 text-base gap-2",
+        leadingIcon: "size-6",
+        trailingIcon: "size-6"
+      }
+    },
+    block: {
+      true: {
+        base: "w-full",
+        trailingIcon: "ms-auto"
+      }
+    },
+    square: {
+      true: ""
+    },
+    leading: {
+      true: ""
+    },
+    trailing: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    }
+  },
+  compoundVariants: [...options.colors.map((color) => ({
+    color,
+    variant: "solid",
+    class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "outline",
+    class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "soft",
+    class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "subtle",
+    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "ghost",
+    class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent`
+  })), ...options.colors.map((color) => ({
+    color,
+    variant: "link",
+    class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), {
+    color: "gray",
+    variant: "solid",
+    class: "text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+  }, {
+    color: "gray",
+    variant: "outline",
+    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+  }, {
+    color: "gray",
+    variant: "soft",
+    class: "text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800"
+  }, {
+    color: "gray",
+    variant: "subtle",
+    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+  }, {
+    color: "gray",
+    variant: "ghost",
+    class: "text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent"
+  }, {
+    color: "gray",
+    variant: "link",
+    class: "text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+  }, {
+    size: "xs",
+    square: true,
+    class: "p-1"
+  }, {
+    size: "sm",
+    square: true,
+    class: "p-1.5"
+  }, {
+    size: "md",
+    square: true,
+    class: "p-1.5"
+  }, {
+    size: "lg",
+    square: true,
+    class: "p-2"
+  }, {
+    size: "xl",
+    square: true,
+    class: "p-2"
+  }, {
+    loading: true,
+    leading: true,
+    class: {
+      leadingIcon: "animate-spin"
+    }
+  }, {
+    loading: true,
+    leading: false,
+    trailing: true,
+    class: {
+      trailingIcon: "animate-spin"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "md"
+  }
+});
+
+const card = {
+  slots: {
+    root: "bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow",
+    header: "p-4 sm:px-6",
+    body: "p-4 sm:p-6",
+    footer: "p-4 sm:px-6"
+  }
+};
+
+const checkbox = (options) => ({
+  slots: {
+    root: "relative flex items-start",
+    base: "shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
+    container: "flex items-center",
+    wrapper: "ms-2",
+    icon: "shrink-0 size-full",
+    label: "block font-medium text-gray-700 dark:text-gray-200",
+    description: "text-gray-500 dark:text-gray-400"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
+      gray: "focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+    },
+    size: {
+      xs: {
+        base: "size-3",
+        container: "h-4",
+        wrapper: "text-xs"
+      },
+      sm: {
+        base: "size-3.5",
+        container: "h-4",
+        wrapper: "text-xs"
+      },
+      md: {
+        base: "size-4",
+        container: "h-5",
+        wrapper: "text-sm"
+      },
+      lg: {
+        base: "size-4.5",
+        container: "h-5",
+        wrapper: "text-sm"
+      },
+      xl: {
+        base: "size-5",
+        container: "h-6",
+        wrapper: "text-base"
+      }
+    },
+    required: {
+      true: {
+        label: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75",
+        description: "cursor-not-allowed opacity-75"
+      }
+    },
+    checked: {
+      true: ""
+    }
+  },
+  compoundVariants: [...options.colors.map((color) => ({
+    color,
+    checked: true,
+    class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
+  })), {
+    color: "gray",
+    checked: true,
+    class: "ring-2 ring-gray-900 dark:ring-white bg-gray-900 dark:bg-white"
+  }],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
+const chip = (options) => ({
+  slots: {
+    root: "relative inline-flex items-center justify-center shrink-0",
+    base: "rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
+      gray: "bg-gray-500 dark:bg-gray-400"
+    },
+    size: {
+      "3xs": "h-[4px] min-w-[4px] text-[4px]",
+      "2xs": "h-[5px] min-w-[5px] text-[5px]",
+      "xs": "h-[6px] min-w-[6px] text-[6px]",
+      "sm": "h-[7px] min-w-[7px] text-[7px]",
+      "md": "h-[8px] min-w-[8px] text-[8px]",
+      "lg": "h-[9px] min-w-[9px] text-[9px]",
+      "xl": "h-[10px] min-w-[10px] text-[10px]",
+      "2xl": "h-[11px] min-w-[11px] text-[11px]",
+      "3xl": "h-[12px] min-w-[12px] text-[12px]"
+    },
+    position: {
+      "top-right": "top-0 right-0",
+      "bottom-right": "bottom-0 right-0",
+      "top-left": "top-0 left-0",
+      "bottom-left": "bottom-0 left-0"
+    },
+    inset: {
+      false: ""
+    },
+    standalone: {
+      false: "absolute"
+    }
+  },
+  compoundVariants: [{
+    position: "top-right",
+    inset: false,
+    class: "-translate-y-1/2 translate-x-1/2 transform"
+  }, {
+    position: "bottom-right",
+    inset: false,
+    class: "translate-y-1/2 translate-x-1/2 transform"
+  }, {
+    position: "top-left",
+    inset: false,
+    class: "-translate-y-1/2 -translate-x-1/2 transform"
+  }, {
+    position: "bottom-left",
+    inset: false,
+    class: "translate-y-1/2 -translate-x-1/2 transform"
+  }],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    position: "top-right"
+  }
+});
+
+const collapsible = {
+  slots: {
+    root: "flex flex-col gap-2",
+    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+  }
+};
+
+const commandPalette = (options) => ({
+  slots: {
+    root: "flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800",
+    input: "[&>input]:h-12",
+    close: "",
+    content: "relative overflow-hidden",
+    viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
+    group: "p-1 isolate",
+    empty: "py-6 text-center text-sm",
+    label: "px-2 py-1.5 text-xs font-semibold text-gray-900 dark:text-white",
+    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
+    itemLeadingIcon: ["shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.transitions && "transition-colors"],
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "2xs",
+    itemLeadingChip: "shrink-0 size-5",
+    itemLeadingChipSize: "md",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    itemTrailingIcon: "shrink-0 size-5",
+    itemTrailingHighlightedIcon: "shrink-0 size-5 text-gray-400 dark:text-gray-500 hidden group-data-highlighted:inline-flex",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5",
+    itemTrailingKbdsSize: "md",
+    itemLabel: "truncate space-x-1",
+    itemLabelBase: "text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900",
+    itemLabelPrefix: "text-gray-700 dark:text-gray-200",
+    itemLabelSuffix: "text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"
+  }
+});
+
+const container = {
+  base: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+};
+
+const contextMenu = (options) => ({
+  slots: {
+    content: "min-w-32 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    group: "p-1 isolate",
+    label: "w-full flex items-center font-semibold text-gray-900 dark:text-white",
+    separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
+    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    itemLeadingIcon: "shrink-0",
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "",
+    itemTrailing: "ms-auto inline-flex",
+    itemTrailingIcon: "shrink-0",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+    itemTrailingKbdsSize: "",
+    itemLabel: "truncate",
+    itemLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500"
+  },
+  variants: {
+    active: {
+      true: {
+        item: "text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800",
+        itemLeadingIcon: "text-gray-700 dark:text-gray-200"
+      },
+      false: {
+        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
+      }
+    },
+    size: {
+      xs: {
+        label: "p-1 text-xs gap-1",
+        item: "p-1 text-xs gap-1",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      sm: {
+        label: "p-1.5 text-xs gap-1.5",
+        item: "p-1.5 text-xs gap-1.5",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      md: {
+        label: "p-1.5 text-sm gap-1.5",
+        item: "p-1.5 text-sm gap-1.5",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "md"
+      },
+      lg: {
+        label: "p-2 text-sm gap-2",
+        item: "p-2 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "md"
+      },
+      xl: {
+        label: "p-2 text-base gap-2",
+        item: "p-2 text-base gap-2",
+        itemLeadingIcon: "size-6",
+        itemLeadingAvatarSize: "xs",
+        itemTrailingIcon: "size-6",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "lg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+const drawer = {
+  slots: {
+    overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
+    content: "fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none",
+    handle: "mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700",
+    container: "mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto",
+    header: "",
+    title: "text-gray-900 dark:text-white font-semibold",
+    description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
+    body: "flex-1",
+    footer: "flex flex-col gap-1.5"
+  }
+};
+
+const dropdownMenu = (options) => ({
+  slots: {
+    content: "min-w-32 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-gray-200 dark:fill-gray-800",
+    group: "p-1 isolate",
+    label: "w-full flex items-center font-semibold text-gray-900 dark:text-white",
+    separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
+    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    itemLeadingIcon: "shrink-0",
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "",
+    itemTrailing: "ms-auto inline-flex",
+    itemTrailingIcon: "shrink-0",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+    itemTrailingKbdsSize: "",
+    itemLabel: "truncate",
+    itemLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500"
+  },
+  variants: {
+    active: {
+      true: {
+        item: "text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800",
+        itemLeadingIcon: "text-gray-700 dark:text-gray-200"
+      },
+      false: {
+        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
+      }
+    },
+    size: {
+      xs: {
+        label: "p-1 text-xs gap-1",
+        item: "p-1 text-xs gap-1",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      sm: {
+        label: "p-1.5 text-xs gap-1.5",
+        item: "p-1.5 text-xs gap-1.5",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      md: {
+        label: "p-1.5 text-sm gap-1.5",
+        item: "p-1.5 text-sm gap-1.5",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "md"
+      },
+      lg: {
+        label: "p-2 text-sm gap-2",
+        item: "p-2 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "md"
+      },
+      xl: {
+        label: "p-2 text-base gap-2",
+        item: "p-2 text-base gap-2",
+        itemLeadingIcon: "size-6",
+        itemLeadingAvatarSize: "xs",
+        itemTrailingIcon: "size-6",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "lg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+const form = {
+  base: ""
+};
+
+const formField = {
+  slots: {
+    root: "",
+    wrapper: "",
+    labelWrapper: "flex content-center items-center justify-between",
+    label: "block font-medium text-gray-700 dark:text-gray-200",
+    container: "mt-1 relative",
+    description: "text-gray-500 dark:text-gray-400",
+    error: "mt-2 text-error-500 dark:text-error-400",
+    hint: "text-gray-500 dark:text-gray-400",
+    help: "mt-2 text-gray-500 dark:text-gray-400"
+  },
+  variants: {
+    size: {
+      xs: { root: "text-xs" },
+      sm: { root: "text-xs" },
+      md: { root: "text-sm" },
+      lg: { root: "text-sm" },
+      xl: { root: "text-base" }
+    },
+    required: {
+      true: {
+        label: `after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400`
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+};
+
+const input = (options) => ({
+  slots: {
+    root: "relative inline-flex items-center",
+    base: ["w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.transitions && "transition-colors"],
+    leading: "absolute inset-y-0 start-0 flex items-center",
+    leadingIcon: "shrink-0 text-gray-400 dark:text-gray-500",
+    leadingAvatar: "shrink-0",
+    trailing: "absolute inset-y-0 end-0 flex items-center",
+    trailingIcon: "shrink-0 text-gray-400 dark:text-gray-500"
+  },
+  variants: {
+    ...buttonGroupVariantWithRoot,
+    size: {
+      xs: {
+        base: "px-2 py-1 text-xs gap-1",
+        leading: "pl-2",
+        trailing: "pr-2",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4"
+      },
+      sm: {
+        base: "px-2.5 py-1.5 text-xs gap-1.5",
+        leading: "pl-2.5",
+        trailing: "pr-2.5",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4"
+      },
+      md: {
+        base: "px-2.5 py-1.5 text-sm gap-1.5",
+        leading: "pl-2.5",
+        trailing: "pr-2.5",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5"
+      },
+      lg: {
+        base: "px-3 py-2 text-sm gap-2",
+        leading: "pl-3",
+        trailing: "pr-3",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5"
+      },
+      xl: {
+        base: "px-3 py-2 text-base gap-2",
+        leading: "pl-3",
+        trailing: "pr-3",
+        leadingIcon: "size-6",
+        trailingIcon: "size-6"
+      }
+    },
+    variant: {
+      outline: "text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700",
+      soft: "text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50",
+      subtle: "text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700",
+      ghost: "text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent",
+      none: "text-gray-900 dark:text-white"
+    },
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      gray: ""
+    },
+    leading: {
+      true: ""
+    },
+    trailing: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    highlight: {
+      true: ""
+    },
+    type: {
+      file: "file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none"
+    }
+  },
+  compoundVariants: [...options.colors.map((color) => ({
+    color,
+    variant: ["outline", "subtle"],
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...options.colors.map((color) => ({
+    color,
+    highlight: true,
+    class: `ring ring-inset ring-${color}-500 dark:ring-${color}-400`
+  })), {
+    color: "gray",
+    variant: ["outline", "subtle"],
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+  }, {
+    color: "gray",
+    highlight: true,
+    class: "ring ring-inset ring-gray-900 dark:ring-white"
+  }, {
+    leading: true,
+    size: "xs",
+    class: "pl-7"
+  }, {
+    leading: true,
+    size: "sm",
+    class: "pl-8"
+  }, {
+    leading: true,
+    size: "md",
+    class: "pl-9"
+  }, {
+    leading: true,
+    size: "lg",
+    class: "pl-10"
+  }, {
+    leading: true,
+    size: "xl",
+    class: "pl-11"
+  }, {
+    trailing: true,
+    size: "xs",
+    class: "pr-7"
+  }, {
+    trailing: true,
+    size: "sm",
+    class: "pr-8"
+  }, {
+    trailing: true,
+    size: "md",
+    class: "pr-9"
+  }, {
+    trailing: true,
+    size: "lg",
+    class: "pr-10"
+  }, {
+    trailing: true,
+    size: "xl",
+    class: "pr-11"
+  }, {
+    loading: true,
+    leading: true,
+    class: {
+      leadingIcon: "animate-spin"
+    }
+  }, {
+    loading: true,
+    leading: false,
+    trailing: true,
+    class: {
+      trailingIcon: "animate-spin"
+    }
+  }],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "outline"
+  }
+});
+
+const inputMenu = (options) => {
+  return defuFn({
+    slots: {
+      arrow: "fill-gray-200 dark:fill-gray-800",
+      content: "max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
+      group: "p-1 isolate",
+      empty: "py-2 text-center text-sm text-gray-500 dark:text-gray-400",
+      label: "font-semibold text-gray-900 dark:text-white",
+      separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
+      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.transitions && "transition-colors"],
+      itemLeadingAvatar: "shrink-0",
+      itemLeadingAvatarSize: "",
+      itemLeadingChip: "shrink-0",
+      itemLeadingChipSize: "",
+      itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+      itemTrailingIcon: "shrink-0",
+      itemLabel: "truncate",
+      tagsItem: "px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75",
+      tagsItemText: "truncate",
+      tagsItemDelete: ["inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none", options.transitions && "transition-colors"],
+      tagsItemDeleteIcon: "",
+      tagsInput: "border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+    }
+  }, {
+    slots: {
+      base: () => ["rounded-md", options.transitions && "transition-colors"],
+      trailing: "absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75"
+    },
+    variants: {
+      multiple: {
+        true: {
+          root: "flex-wrap",
+          base: ""
+        },
+        false: {
+          base: "w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+        }
+      },
+      size: {
+        xs: {
+          label: "p-1 text-[10px]/3 gap-1",
+          item: "p-1 text-xs gap-1",
+          itemLeadingIcon: "size-4",
+          itemLeadingAvatarSize: "3xs",
+          itemLeadingChip: "size-4",
+          itemLeadingChipSize: "sm",
+          itemTrailingIcon: "size-4",
+          tagsItem: "text-[10px]/3",
+          tagsItemDeleteIcon: "size-3"
+        },
+        sm: {
+          label: "p-1.5 text-[10px]/3 gap-1.5",
+          item: "p-1.5 text-xs gap-1.5",
+          itemLeadingIcon: "size-4",
+          itemLeadingAvatarSize: "3xs",
+          itemLeadingChip: "size-4",
+          itemLeadingChipSize: "sm",
+          itemTrailingIcon: "size-4",
+          tagsItem: "text-[10px]/3",
+          tagsItemDeleteIcon: "size-3"
+        },
+        md: {
+          label: "p-1.5 text-xs gap-1.5",
+          item: "p-1.5 text-sm gap-1.5",
+          itemLeadingIcon: "size-5",
+          itemLeadingAvatarSize: "2xs",
+          itemLeadingChip: "size-5",
+          itemLeadingChipSize: "md",
+          itemTrailingIcon: "size-5",
+          tagsItem: "text-xs",
+          tagsItemDeleteIcon: "size-3.5"
+        },
+        lg: {
+          label: "p-2 text-xs gap-2",
+          item: "p-2 text-sm gap-2",
+          itemLeadingIcon: "size-5",
+          itemLeadingAvatarSize: "2xs",
+          itemLeadingChip: "size-5",
+          itemLeadingChipSize: "md",
+          itemTrailingIcon: "size-5",
+          tagsItem: "text-xs",
+          tagsItemDeleteIcon: "size-3.5"
+        },
+        xl: {
+          label: "p-2 text-sm gap-2",
+          item: "p-2 text-base gap-2",
+          itemLeadingIcon: "size-6",
+          itemLeadingAvatarSize: "xs",
+          itemLeadingChip: "size-6",
+          itemLeadingChipSize: "lg",
+          itemTrailingIcon: "size-6",
+          tagsItem: "text-sm",
+          tagsItemDeleteIcon: "size-4"
+        }
+      }
+    },
+    compoundVariants: [...options.colors.map((color) => ({
+      color,
+      multiple: true,
+      variant: ["outline", "subtle"],
+      class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-${color}-500 dark:has-[:focus-visible]:ring-${color}-400`
+    })), {
+      color: "gray",
+      multiple: true,
+      variant: ["outline", "subtle"],
+      class: "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-gray-500 dark:has-[:focus-visible]:ring-white"
+    }]
+  }, input(options));
+};
+
+const kbd = {
+  base: "inline-flex items-center justify-center px-1 rounded font-medium font-sans",
+  variants: {
+    variant: {
+      solid: "bg-gray-900 dark:bg-white text-white dark:text-gray-900",
+      outline: "bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700",
+      subtle: "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700"
+    },
+    size: {
+      sm: "h-4 min-w-[16px] text-[10px]",
+      md: "h-5 min-w-[20px] text-[11px]",
+      lg: "h-6 min-w-[24px] text-[12px]"
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md"
+  }
+};
+
+const link = (options) => ({
+  base: "focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+  variants: {
+    active: {
+      true: "text-primary-500 dark:text-primary-400",
+      false: ["text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200", options.transitions && "transition-colors"]
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-75"
+    }
+  }
+});
+
+const modal = {
+  slots: {
+    overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
+    content: "fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none",
+    header: "px-4 py-5 sm:px-6",
+    body: "flex-1 p-4 sm:p-6",
+    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    title: "text-gray-900 dark:text-white font-semibold",
+    description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
+    close: "absolute top-4 right-4"
+  },
+  variants: {
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+      }
+    },
+    fullscreen: {
+      true: {
+        content: "inset-0"
+      },
+      false: {
+        content: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800"
+      }
+    }
+  }
+};
+
+const navigationMenu = (options) => ({
+  slots: {
+    root: "relative flex gap-1.5",
+    list: "isolate min-w-0",
+    item: "min-w-0",
+    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    linkLeadingIcon: "shrink-0 size-5",
+    linkLeadingAvatar: "shrink-0",
+    linkLeadingAvatarSize: "2xs",
+    linkTrailing: "ms-auto inline-flex",
+    linkTrailingBadge: "shrink-0 rounded",
+    linkTrailingBadgeSize: "sm",
+    linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
+    linkLabel: "truncate",
+    linkLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500",
+    childList: "grid grid-cols-2 gap-2 p-2",
+    childItem: "",
+    childLink: "group size-full px-3 py-2 rounded-md flex items-start gap-2 text-left",
+    childLinkWrapper: "flex flex-col items-start",
+    childLinkIcon: "size-5 shrink-0",
+    childLinkLabel: "font-semibold text-sm relative inline-flex",
+    childLinkLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500",
+    childLinkDescription: "text-sm text-gray-500 dark:text-gray-400",
+    separator: "px-2 h-px bg-gray-200 dark:bg-gray-800",
+    viewportWrapper: "absolute top-full inset-x-0 flex w-full",
+    // FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
+    viewport: "relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    content: "absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
+    indicator: "data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out",
+    arrow: "relative top-[50%] size-2.5 rotate-45 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 z-[1] rounded-sm"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, {
+        link: `focus-visible:before:ring-${color}-500 dark:focus-visible:before:ring-${color}-400`,
+        childLink: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+      }])),
+      gray: {
+        link: "focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white",
+        childLink: "focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+      }
+    },
+    highlightColor: {
+      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      gray: ""
+    },
+    variant: {
+      pill: "",
+      link: ""
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full items-center justify-between",
+        list: "flex items-center",
+        item: "py-2",
+        link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0"
+      },
+      vertical: {
+        root: "flex-col",
+        link: "px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
+      }
+    },
+    active: {
+      true: {
+        childLink: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white",
+        childLinkIcon: "text-gray-700 dark:text-gray-200"
+      },
+      false: {
+        link: "text-gray-500 dark:text-gray-400",
+        linkLeadingIcon: "text-gray-400 dark:text-gray-500",
+        childLink: ["hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white", options.transitions && "transition-colors"],
+        childLinkIcon: ["text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200", options.transitions && "transition-colors"]
+      }
+    },
+    disabled: {
+      true: {
+        link: "cursor-not-allowed opacity-75"
+      }
+    },
+    highlight: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    highlight: true,
+    orientation: "horizontal",
+    class: {
+      item: "-mb-px",
+      link: "after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full"
+    }
+  }, {
+    highlight: true,
+    orientation: "vertical",
+    class: {
+      item: "px-1.5 -ml-px",
+      link: "after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full"
+    }
+  }, {
+    disabled: false,
+    active: false,
+    variant: "pill",
+    class: {
+      link: ["hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200", options.transitions && "transition-colors"]
+    }
+  }, ...options.colors.map((color) => ({
+    color,
+    variant: "pill",
+    active: true,
+    class: {
+      link: `text-${color}-500 dark:text-${color}-400`,
+      linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
+    }
+  })), {
+    color: "gray",
+    variant: "pill",
+    active: true,
+    class: {
+      link: "text-gray-900 dark:text-white",
+      linkLeadingIcon: "text-gray-900 dark:text-white"
+    }
+  }, {
+    variant: "pill",
+    active: true,
+    highlight: false,
+    class: {
+      link: "before:bg-gray-100 dark:before:bg-gray-800"
+    }
+  }, {
+    variant: "pill",
+    active: true,
+    highlight: true,
+    class: {
+      link: ["hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50", options.transitions && "before:transition-colors"]
+    }
+  }, {
+    disabled: false,
+    active: false,
+    variant: "link",
+    class: {
+      link: ["hover:text-gray-900 dark:hover:text-white", options.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200", options.transitions && "transition-colors"]
+    }
+  }, ...options.colors.map((color) => ({
+    color,
+    variant: "link",
+    active: true,
+    class: {
+      link: `text-${color}-500 dark:text-${color}-400`,
+      linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
+    }
+  })), {
+    color: "gray",
+    variant: "link",
+    active: true,
+    class: {
+      link: "text-gray-900 dark:text-white",
+      linkLeadingIcon: "text-gray-900 dark:text-white"
+    }
+  }, ...options.colors.map((highlightColor) => ({
+    highlightColor,
+    highlight: true,
+    active: true,
+    class: {
+      link: `after:bg-${highlightColor}-500 dark:after:bg-${highlightColor}-400`
+    }
+  })), {
+    highlightColor: "gray",
+    highlight: true,
+    active: true,
+    class: {
+      link: "after:bg-gray-900 dark:after:bg-white"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    highlightColor: "primary",
+    variant: "pill"
+  }
+});
+
+const pagination = {
+  slots: {
+    root: "",
+    list: "flex items-center gap-1",
+    ellipsis: "pointer-events-none",
+    label: "min-w-5 text-center"
+  }
+};
+
+const popover = {
+  slots: {
+    content: "bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-gray-200 dark:fill-gray-800"
+  }
+};
+
+const progress = (options) => ({
+  slots: {
+    root: "gap-2",
+    base: "relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700",
+    indicator: "rounded-full size-full transition-transform duration-200 ease-out",
+    status: "flex justify-end text-gray-400 dark:text-gray-500 transition-[width] duration-200",
+    steps: "grid items-end",
+    step: "truncate text-end row-start-1 col-start-1 transition-opacity"
+  },
+  variants: {
+    animation: {
+      "carousel": "",
+      "carousel-inverse": "",
+      "swing": "",
+      "elastic": ""
+    },
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, {
+        indicator: `bg-${color}-500 dark:bg-${color}-400`,
+        steps: `text-${color}-500 dark:text-${color}-400`
+      }])),
+      gray: {
+        indicator: "bg-gray-900 dark:bg-white",
+        steps: "text-white dark:text-gray-900"
+      }
+    },
+    size: {
+      "2xs": {
+        status: "text-xs",
+        steps: "text-xs"
+      },
+      "xs": {
+        status: "text-xs",
+        steps: "text-xs"
+      },
+      "sm": {
+        status: "text-sm",
+        steps: "text-sm"
+      },
+      "md": {
+        status: "text-sm",
+        steps: "text-sm"
+      },
+      "lg": {
+        status: "text-sm",
+        steps: "text-sm"
+      },
+      "xl": {
+        status: "text-base",
+        steps: "text-base"
+      },
+      "2xl": {
+        status: "text-base",
+        steps: "text-base"
+      }
+    },
+    step: {
+      active: {
+        step: "opacity-100"
+      },
+      first: {
+        step: "opacity-100 text-gray-500 dark:text-gray-400"
+      },
+      other: {
+        step: "opacity-0"
+      },
+      last: {
+        step: ""
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full flex flex-col",
+        base: "w-full",
+        status: "flex-row"
+      },
+      vertical: {
+        root: "h-full flex flex-row-reverse",
+        base: "h-full",
+        status: "flex-col"
+      }
+    },
+    inverted: {
+      true: {
+        status: "self-end"
+      }
+    }
+  },
+  compoundVariants: [{
+    inverted: true,
+    orientation: "horizontal",
+    class: {
+      step: "text-start",
+      status: "flex-row-reverse"
+    }
+  }, {
+    inverted: true,
+    orientation: "vertical",
+    class: {
+      steps: "items-start",
+      status: "flex-col-reverse"
+    }
+  }, {
+    orientation: "horizontal",
+    size: "2xs",
+    class: "h-px"
+  }, {
+    orientation: "horizontal",
+    size: "xs",
+    class: "h-0.5"
+  }, {
+    orientation: "horizontal",
+    size: "sm",
+    class: "h-1"
+  }, {
+    orientation: "horizontal",
+    size: "md",
+    class: "h-2"
+  }, {
+    orientation: "horizontal",
+    size: "lg",
+    class: "h-3"
+  }, {
+    orientation: "horizontal",
+    size: "xl",
+    class: "h-4"
+  }, {
+    orientation: "horizontal",
+    size: "2xl",
+    class: "h-5"
+  }, {
+    orientation: "vertical",
+    size: "2xs",
+    class: "w-px"
+  }, {
+    orientation: "vertical",
+    size: "xs",
+    class: "w-0.5"
+  }, {
+    orientation: "vertical",
+    size: "sm",
+    class: "w-1"
+  }, {
+    orientation: "vertical",
+    size: "md",
+    class: "w-2"
+  }, {
+    orientation: "vertical",
+    size: "lg",
+    class: "w-3"
+  }, {
+    orientation: "vertical",
+    size: "xl",
+    class: "w-4"
+  }, {
+    orientation: "vertical",
+    size: "2xl",
+    class: "w-5"
+  }, {
+    orientation: "horizontal",
+    animation: "carousel",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"
+    }
+  }, {
+    orientation: "vertical",
+    animation: "carousel",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
+    }
+  }, {
+    orientation: "horizontal",
+    animation: "carousel-inverse",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]"
+    }
+  }, {
+    orientation: "vertical",
+    animation: "carousel-inverse",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
+    }
+  }, {
+    orientation: "horizontal",
+    animation: "swing",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
+    }
+  }, {
+    orientation: "vertical",
+    animation: "swing",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
+    }
+  }, {
+    orientation: "horizontal",
+    animation: "elastic",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
+    }
+  }, {
+    orientation: "vertical",
+    animation: "elastic",
+    class: {
+      indicator: "data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
+    }
+  }],
+  defaultVariants: {
+    animation: "carousel",
+    color: "primary",
+    size: "md"
+  }
+});
+
+const radioGroup = (options) => ({
+  slots: {
+    root: "relative",
+    fieldset: "flex",
+    legend: "mb-1 block font-medium text-gray-700 dark:text-gray-200",
+    item: "flex items-start",
+    base: "rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-white dark:focus-visible:outline-offset-gray-900",
+    indicator: "flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full",
+    container: "flex items-center",
+    wrapper: "ms-2",
+    label: "block font-medium text-gray-700 dark:text-gray-200",
+    description: "text-gray-500 dark:text-gray-400"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, {
+        base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
+        indicator: `bg-${color}-500 dark:bg-${color}-400`
+      }])),
+      gray: {
+        base: "focus-visible:outline-gray-900 dark:focus-visible:outline-white",
+        indicator: "bg-gray-900 dark:bg-white"
+      }
+    },
+    orientation: {
+      horizontal: {
+        fieldset: "flex-row",
+        wrapper: "me-2"
+      },
+      vertical: {
+        fieldset: "flex-col"
+      }
+    },
+    size: {
+      xs: {
+        fieldset: "gap-0.5",
+        legend: "text-xs",
+        base: "size-3",
+        item: "text-xs",
+        container: "h-4",
+        indicator: "after:size-1"
+      },
+      sm: {
+        fieldset: "gap-0.5",
+        legend: "text-xs",
+        base: "size-3.5",
+        item: "text-xs",
+        container: "h-4",
+        indicator: "after:size-1"
+      },
+      md: {
+        fieldset: "gap-1",
+        legend: "text-sm",
+        base: "size-4",
+        item: "text-sm",
+        container: "h-5",
+        indicator: "after:size-1.5"
+      },
+      lg: {
+        fieldset: "gap-1",
+        legend: "text-sm",
+        base: "size-4.5",
+        item: "text-sm",
+        container: "h-5",
+        indicator: "after:size-1.5"
+      },
+      xl: {
+        fieldset: "gap-1.5",
+        legend: "text-base",
+        base: "size-5",
+        item: "text-base",
+        container: "h-6",
+        indicator: "after:size-2"
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75"
+      }
+    },
+    required: {
+      true: {
+        legend: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
+const select = (options) => {
+  return defuFn({
+    slots: {
+      arrow: "fill-gray-200 dark:fill-gray-800",
+      content: "max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
+      group: "p-1 isolate",
+      empty: "py-2 text-center text-sm text-gray-500 dark:text-gray-400",
+      label: "font-semibold text-gray-900 dark:text-white",
+      separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
+      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.transitions && "transition-colors"],
+      itemLeadingAvatar: "shrink-0",
+      itemLeadingAvatarSize: "",
+      itemLeadingChip: "shrink-0",
+      itemLeadingChipSize: "",
+      itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+      itemTrailingIcon: "shrink-0",
+      itemLabel: "truncate"
+    },
+    variants: {
+      size: {
+        xs: {
+          label: "p-1 text-[10px]/3 gap-1",
+          item: "p-1 text-xs gap-1",
+          itemLeadingIcon: "size-4",
+          itemLeadingAvatarSize: "3xs",
+          itemLeadingChip: "size-4",
+          itemLeadingChipSize: "sm",
+          itemTrailingIcon: "size-4"
+        },
+        sm: {
+          label: "p-1.5 text-[10px]/3 gap-1.5",
+          item: "p-1.5 text-xs gap-1.5",
+          itemLeadingIcon: "size-4",
+          itemLeadingAvatarSize: "3xs",
+          itemLeadingChip: "size-4",
+          itemLeadingChipSize: "sm",
+          itemTrailingIcon: "size-4"
+        },
+        md: {
+          label: "p-1.5 text-xs gap-1.5",
+          item: "p-1.5 text-sm gap-1.5",
+          itemLeadingIcon: "size-5",
+          itemLeadingAvatarSize: "2xs",
+          itemLeadingChip: "size-5",
+          itemLeadingChipSize: "md",
+          itemTrailingIcon: "size-5"
+        },
+        lg: {
+          label: "p-2 text-xs gap-2",
+          item: "p-2 text-sm gap-2",
+          itemLeadingIcon: "size-5",
+          itemLeadingAvatarSize: "2xs",
+          itemLeadingChip: "size-5",
+          itemLeadingChipSize: "md",
+          itemTrailingIcon: "size-5"
+        },
+        xl: {
+          label: "p-2 text-sm gap-2",
+          item: "p-2 text-base gap-2",
+          itemLeadingIcon: "size-6",
+          itemLeadingAvatarSize: "xs",
+          itemLeadingChip: "size-6",
+          itemLeadingChipSize: "lg",
+          itemTrailingIcon: "size-6"
+        }
+      }
+    }
+  }, {
+    slots: {
+      base: () => ["relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.transitions && "transition-colors"],
+      value: "truncate group-data-placeholder:text-current/50"
+    },
+    variants: {
+      ...buttonGroupVariant
+    }
+  }, input(options));
+};
+
+const selectMenu = (options) => {
+  return defu({
+    slots: {
+      value: "truncate",
+      placeholder: "truncate text-current/50",
+      input: "placeholder-gray-400 dark:placeholder-gray-500 border-0 border-b border-gray-200 dark:border-gray-800 focus:outline-none"
+    },
+    variants: {
+      size: {
+        xs: {
+          input: "text-xs px-2 py-1"
+        },
+        sm: {
+          input: "text-xs px-2.5 py-1.5"
+        },
+        md: {
+          input: "text-sm px-2.5 py-1.5"
+        },
+        lg: {
+          input: "text-sm px-3 py-2"
+        },
+        xl: {
+          input: "text-base px-3 py-2"
+        }
+      }
+    }
+  }, select(options));
+};
+
+const separator = (options) => ({
+  slots: {
+    root: "flex items-center align-center text-center",
+    border: "",
+    container: "font-medium text-gray-700 dark:text-gray-200 flex",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xs",
+    label: "text-sm"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
+      gray: { border: "border-gray-200 dark:border-gray-800" }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full flex-row",
+        border: "w-full",
+        container: "mx-3 whitespace-nowrap"
+      },
+      vertical: {
+        root: "h-full flex-col",
+        border: "h-full",
+        container: "my-2"
+      }
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    },
+    type: {
+      solid: {
+        border: "border-solid"
+      },
+      dashed: {
+        border: "border-dashed"
+      },
+      dotted: {
+        border: "border-dotted"
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    size: "xs",
+    class: { border: "border-t" }
+  }, {
+    orientation: "horizontal",
+    size: "sm",
+    class: { border: "border-t-[2px]" }
+  }, {
+    orientation: "horizontal",
+    size: "md",
+    class: { border: "border-t-[3px]" }
+  }, {
+    orientation: "horizontal",
+    size: "lg",
+    class: { border: "border-t-[4px]" }
+  }, {
+    orientation: "horizontal",
+    size: "xl",
+    class: { border: "border-t-[5px]" }
+  }, {
+    orientation: "vertical",
+    size: "xs",
+    class: { border: "border-s" }
+  }, {
+    orientation: "vertical",
+    size: "sm",
+    class: { border: "border-s-[2px]" }
+  }, {
+    orientation: "vertical",
+    size: "md",
+    class: { border: "border-s-[3px]" }
+  }, {
+    orientation: "vertical",
+    size: "lg",
+    class: { border: "border-s-[4px]" }
+  }, {
+    orientation: "vertical",
+    size: "xl",
+    class: { border: "border-s-[5px]" }
+  }],
+  defaultVariants: {
+    color: "gray",
+    size: "xs",
+    type: "solid"
+  }
+});
+
+const skeleton = {
+  base: "animate-pulse rounded-md bg-gray-100 dark:bg-gray-800"
+};
+
+const slideover = {
+  slots: {
+    overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
+    content: "fixed z-50 bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 sm:shadow-lg flex flex-col focus:outline-none",
+    header: "px-4 py-5 sm:px-6",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6",
+    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    title: "text-gray-900 dark:text-white font-semibold",
+    description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
+    close: "absolute top-4 right-4"
+  },
+  variants: {
+    side: {
+      top: {
+        content: "inset-x-0 top-0"
+      },
+      right: {
+        content: "right-0 inset-y-0 w-full max-w-md"
+      },
+      bottom: {
+        content: "inset-x-0 bottom-0"
+      },
+      left: {
+        content: "left-0 inset-y-0 w-full max-w-md"
+      }
+    },
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
+      }
+    }
+  },
+  compoundVariants: [{
+    transition: true,
+    side: "top",
+    class: {
+      content: "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
+    }
+  }, {
+    transition: true,
+    side: "right",
+    class: {
+      content: "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
+    }
+  }, {
+    transition: true,
+    side: "bottom",
+    class: {
+      content: "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
+    }
+  }, {
+    transition: true,
+    side: "left",
+    class: {
+      content: "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
+    }
+  }]
+};
+
+const slider = (options) => ({
+  slots: {
+    root: "relative flex items-center select-none touch-none",
+    track: "relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow",
+    range: "absolute rounded-full",
+    thumb: "rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, {
+        range: `bg-${color}-500 dark:bg-${color}-400`,
+        thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
+      }])),
+      gray: {
+        range: "bg-gray-900 dark:bg-white",
+        thumb: "ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50"
+      }
+    },
+    size: {
+      xs: {
+        thumb: "size-3"
+      },
+      sm: {
+        thumb: "size-3.5"
+      },
+      md: {
+        thumb: "size-4"
+      },
+      lg: {
+        thumb: "size-4.5"
+      },
+      xl: {
+        thumb: "size-5"
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full",
+        range: "h-full"
+      },
+      vertical: {
+        root: "flex-col h-full",
+        range: "w-full"
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-75 cursor-not-allowed"
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    size: "xs",
+    class: {
+      track: "h-[6px]"
+    }
+  }, {
+    orientation: "horizontal",
+    size: "sm",
+    class: {
+      track: "h-[7px]"
+    }
+  }, {
+    orientation: "horizontal",
+    size: "md",
+    class: {
+      track: "h-[8px]"
+    }
+  }, {
+    orientation: "horizontal",
+    size: "lg",
+    class: {
+      track: "h-[9px]"
+    }
+  }, {
+    orientation: "horizontal",
+    size: "xl",
+    class: {
+      track: "h-[10px]"
+    }
+  }, {
+    orientation: "vertical",
+    size: "xs",
+    class: {
+      track: "w-[6px]"
+    }
+  }, {
+    orientation: "vertical",
+    size: "sm",
+    class: {
+      track: "w-[7px]"
+    }
+  }, {
+    orientation: "vertical",
+    size: "md",
+    class: {
+      track: "w-[8px]"
+    }
+  }, {
+    orientation: "vertical",
+    size: "lg",
+    class: {
+      track: "w-[9px]"
+    }
+  }, {
+    orientation: "vertical",
+    size: "xl",
+    class: {
+      track: "w-[10px]"
+    }
+  }],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
+const _switch = (options) => ({
+  slots: {
+    root: "relative flex items-start",
+    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700", options.transitions && "transition-colors duration-200"],
+    container: "flex items-center",
+    thumb: "group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center",
+    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12", options.transitions && "transition-[color,opacity] duration-200"],
+    wrapper: "ms-2",
+    label: "block font-medium text-gray-700 dark:text-gray-200",
+    description: "text-gray-500 dark:text-gray-400"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, {
+        base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
+        icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
+      }])),
+      gray: {
+        base: "data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white",
+        icon: "group-data-[state=checked]:text-gray-900 dark:group-data-[state=checked]:text-white"
+      }
+    },
+    size: {
+      xs: {
+        base: "w-7",
+        container: "h-4",
+        thumb: "size-3 data-[state=checked]:translate-x-3",
+        wrapper: "text-xs"
+      },
+      sm: {
+        base: "w-8",
+        container: "h-4",
+        thumb: "size-3.5 data-[state=checked]:translate-x-3.5",
+        wrapper: "text-xs"
+      },
+      md: {
+        base: "w-9",
+        container: "h-5",
+        thumb: "size-4 data-[state=checked]:translate-x-4",
+        wrapper: "text-sm"
+      },
+      lg: {
+        base: "w-10",
+        container: "h-5",
+        thumb: "size-4.5 data-[state=checked]:translate-x-4.5",
+        wrapper: "text-sm"
+      },
+      xl: {
+        base: "w-11",
+        container: "h-6",
+        thumb: "size-5 data-[state=checked]:translate-x-5",
+        wrapper: "text-base"
+      }
+    },
+    checked: {
+      true: {
+        icon: "group-data-[state=checked]:opacity-100"
+      }
+    },
+    unchecked: {
+      true: {
+        icon: "group-data-[state=unchecked]:opacity-100"
+      }
+    },
+    loading: {
+      true: {
+        icon: "animate-spin"
+      }
+    },
+    required: {
+      true: {
+        label: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75",
+        description: "cursor-not-allowed opacity-75"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});
+
+const tabs = (options) => ({
+  slots: {
+    root: "flex items-center gap-2",
+    list: "relative flex p-1 group",
+    indicator: "absolute transition-[translate,width] duration-200",
+    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.transitions && "transition-colors"],
+    content: "focus:outline-none w-full",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    label: "truncate"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      gray: ""
+    },
+    variant: {
+      pill: {
+        list: "bg-gray-100 dark:bg-gray-800 rounded-lg",
+        trigger: "flex-1",
+        indicator: "rounded-md shadow-sm"
+      },
+      link: {
+        list: "border-gray-200 dark:border-gray-800",
+        indicator: "rounded-full"
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        list: "w-full",
+        indicator: "left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]",
+        trigger: "justify-center"
+      },
+      vertical: {
+        list: "flex-col",
+        indicator: "top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "px-2 py-1 text-xs gap-1",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs"
+      },
+      sm: {
+        trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs"
+      },
+      md: {
+        trigger: "px-3 py-1.5 text-sm gap-1.5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs"
+      },
+      lg: {
+        trigger: "px-3 py-2 text-sm gap-2",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs"
+      },
+      xl: {
+        trigger: "px-3 py-2 text-base gap-2",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "xs"
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    variant: "pill",
+    class: {
+      indicator: "inset-y-1"
+    }
+  }, {
+    orientation: "horizontal",
+    variant: "link",
+    class: {
+      list: "border-b",
+      indicator: "-bottom-px h-px"
+    }
+  }, {
+    orientation: "vertical",
+    variant: "pill",
+    class: {
+      indicator: "inset-x-1",
+      list: "items-center"
+    }
+  }, {
+    orientation: "vertical",
+    variant: "link",
+    class: {
+      list: "border-l",
+      indicator: "-left-px w-px"
+    }
+  }, ...options.colors.map((color) => ({
+    color,
+    variant: "pill",
+    class: {
+      indicator: `bg-${color}-500 dark:bg-${color}-400`,
+      trigger: `data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+    }
+  })), {
+    color: "gray",
+    variant: "pill",
+    class: {
+      indicator: "bg-gray-900 dark:bg-white",
+      trigger: "data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+    }
+  }, ...options.colors.map((color) => ({
+    color,
+    variant: "link",
+    class: {
+      indicator: `bg-${color}-500 dark:bg-${color}-400`,
+      trigger: `data-[state=active]:text-${color}-500 dark:data-[state=active]:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    }
+  })), {
+    color: "gray",
+    variant: "link",
+    class: {
+      indicator: "bg-gray-900 dark:bg-white",
+      trigger: "data-[state=active]:text-gray-900 dark:data-[state=active]:text-white focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    variant: "pill",
+    size: "md"
+  }
+});
+
+const textarea = (options) => {
+  return input(options);
+};
+
+const toast = (options) => ({
+  slots: {
+    root: "relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5",
+    wrapper: "w-0 flex-1 flex flex-col gap-1",
+    title: "text-sm font-medium text-gray-900 dark:text-white",
+    description: "text-sm text-gray-500 dark:text-gray-400",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xl",
+    actions: "flex gap-1.5 shrink-0",
+    progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
+    close: "p-0.5"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(options.colors.map((color) => [color, {
+        icon: `text-${color}-500 dark:text-${color}-400`,
+        progress: `bg-${color}-500 dark:bg-${color}-400`
+      }])),
+      gray: {
+        icon: "text-gray-900 dark:text-white",
+        progress: "bg-gray-900 dark:bg-white"
+      }
+    },
+    multiline: {
+      true: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      },
+      false: {
+        root: "items-center",
+        actions: "items-center"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+
+const toaster = {
+  slots: {
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height]",
+    base: "absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+  },
+  variants: {
+    position: {
+      "top-left": {
+        viewport: "left-4"
+      },
+      "top-center": {
+        viewport: "left-1/2 transform -translate-x-1/2"
+      },
+      "top-right": {
+        viewport: "right-4"
+      },
+      "bottom-left": {
+        viewport: "left-4"
+      },
+      "bottom-center": {
+        viewport: "left-1/2 transform -translate-x-1/2"
+      },
+      "bottom-right": {
+        viewport: "right-4"
+      }
+    },
+    swipeDirection: {
+      up: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]",
+      right: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]",
+      down: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]",
+      left: "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
+    }
+  },
+  compoundVariants: [{
+    position: ["top-left", "top-center", "top-right"],
+    class: {
+      viewport: "top-4",
+      base: "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
+    }
+  }, {
+    position: ["bottom-left", "bottom-center", "bottom-right"],
+    class: {
+      viewport: "bottom-4",
+      base: "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
+    }
+  }, {
+    swipeDirection: ["left", "right"],
+    class: "data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=cancel]:translate-x-0"
+  }, {
+    swipeDirection: ["up", "down"],
+    class: "data-[swipe=move]:translate-y-[--radix-toast-swipe-move-y] data-[swipe=end]:translate-y-[--radix-toast-swipe-end-y] data-[swipe=cancel]:translate-y-0"
+  }],
+  defaultVariants: {
+    position: "bottom-right"
+  }
+};
+
+const tooltip = {
+  slots: {
+    content: "flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-gray-200 dark:fill-gray-800",
+    text: "truncate",
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:mr-0.5`,
+    kbdsSize: "sm"
+  }
+};
+
+const theme = {
+  __proto__: null,
+  accordion: accordion,
+  alert: alert,
+  avatar: avatar,
+  avatarGroup: avatarGroup,
+  badge: badge,
+  breadcrumb: breadcrumb,
+  button: button,
+  buttonGroup: buttonGroup,
+  card: card,
+  checkbox: checkbox,
+  chip: chip,
+  collapsible: collapsible,
+  commandPalette: commandPalette,
+  container: container,
+  contextMenu: contextMenu,
+  drawer: drawer,
+  dropdownMenu: dropdownMenu,
+  form: form,
+  formField: formField,
+  input: input,
+  inputMenu: inputMenu,
+  kbd: kbd,
+  link: link,
+  modal: modal,
+  navigationMenu: navigationMenu,
+  pagination: pagination,
+  popover: popover,
+  progress: progress,
+  radioGroup: radioGroup,
+  select: select,
+  selectMenu: selectMenu,
+  separator: separator,
+  skeleton: skeleton,
+  slideover: slideover,
+  slider: slider,
+  switch: _switch,
+  tabs: tabs,
+  textarea: textarea,
+  toast: toast,
+  toaster: toaster,
+  tooltip: tooltip
+};
+
+function addTemplates(options, nuxt) {
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  if (!nuxt.options.css.find((path) => path.endsWith("tailwind.css"))) {
+    const template = addTemplate({
+      filename: "tailwind.css",
+      write: true,
+      getContents: () => `@import "tailwindcss";
+@import "./ui.css";
+${hasNuxtModule("@nuxt/content") ? '@source "../content/**/*.md";' : ""}
+`
+    });
+    nuxt.options.css.unshift(template.dst);
+  }
+  addTemplate({
+    filename: "ui.css",
+    write: true,
+    getContents: () => `@layer base {
+  :root {
+    color-scheme: light dark;
+  }
 }
 
-async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
-  const runtimeDir = resolve("./runtime");
-  nuxt.hook("tailwindcss:config", function(tailwindConfig) {
-    tailwindConfig.theme = tailwindConfig.theme || {};
-    tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
-    tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
-    const colors = setGlobalColors(tailwindConfig.theme);
-    nuxt.options.appConfig.ui = {
-      primary: "green",
-      gray: "cool",
-      colors,
-      strategy: "merge"
-    };
+@theme {
+  --color-gray-*: initial;
+  --color-cool-50: #f9fafb;
+  --color-cool-100: #f3f4f6;
+  --color-cool-200: #e5e7eb;
+  --color-cool-300: #d1d5db;
+  --color-cool-400: #9ca3af;
+  --color-cool-500: #6b7280;
+  --color-cool-600: #4b5563;
+  --color-cool-700: #374151;
+  --color-cool-800: #1f2937;
+  --color-cool-900: #111827;
+  --color-cool-950: #030712;
+
+  --spacing-4_5: 1.125rem;
+
+  ${shades.map((shade) => `--color-primary-${shade}: var(--color-primary-${shade});`).join("\n	")}
+  ${shades.map((shade) => `--color-error-${shade}: var(--color-error-${shade});`).join("\n	")}
+  ${shades.map((shade) => `--color-gray-${shade}: var(--color-gray-${shade});`).join("\n	")}
+}
+`
   });
-  const configTemplate = addTemplate({
-    filename: "nuxtui-tailwind.config.cjs",
-    write: true,
-    getContents: ({ nuxt: nuxt2 }) => `
-      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
-      const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, "utils", "colors"))})
-
-      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
-
-      module.exports = {
-        plugins: [
-          require('@tailwindcss/forms')({ strategy: 'class' }),
-          require('@tailwindcss/aspect-ratio'),
-          require('@tailwindcss/typography'),
-          require('@tailwindcss/container-queries'),
-          require('@headlessui/tailwindcss')
-        ],
-        content: {
-          files: [
-            ${JSON.stringify(resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"))},
-            ${JSON.stringify(resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}"))}
-          ],
-          transform: {
-            vue: (content) => {
-              return content.replaceAll(/(?:\\r\\n|\\r|\\n)/g, ' ')
-            }
-          },
-          extract: {
-            vue: (content) => {
-              return [
-                ...defaultExtractor(content),
-                ...customSafelistExtractor(${JSON.stringify(moduleOptions.prefix)}, content, ${JSON.stringify(nuxt2.options.appConfig.ui.colors)}, ${JSON.stringify(moduleOptions.safelistColors)})
-              ]
-            }
-          }
-        },
-        safelist: generateSafelist(${JSON.stringify(moduleOptions.safelistColors || [])}, ${JSON.stringify(nuxt2.options.appConfig.ui.colors)}),
+  for (const component in theme) {
+    addTemplate({
+      filename: `ui/${kebabCase(component)}.ts`,
+      write: true,
+      getContents: async () => {
+        const template = theme[component];
+        const result = typeof template === "function" ? template(options) : template;
+        const variants = Object.keys(result.variants || {});
+        let json = JSON.stringify(result, null, 2);
+        for (const variant of variants) {
+          json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), "$1 as const");
+          json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+            const replaced = match.replace(/("[^"]+")/g, "$1 as const");
+            return `${before}${replaced}${after}`;
+          });
+        }
+        if (process.env.DEV) {
+          return [
+            `import template from ${JSON.stringify(fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url)))}`,
+            `const result = typeof template === 'function' ? template(${JSON.stringify(options)}) : template`,
+            `const json = ${json}`,
+            `export default result as typeof json`
+          ].join("\n");
+        }
+        return `export default ${json}`;
       }
-    `
+    });
+  }
+  addTemplate({
+    filename: "ui/index.ts",
+    write: true,
+    getContents: () => Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+  });
+  addTypeTemplate({
+    filename: "types/ui.d.ts",
+    getContents: () => `import * as ui from '#build/ui'
+import type { DeepPartial } from '#ui/types/utils'
+
+const colors = ${JSON.stringify(options.colors)} as const;
+const icons = ${JSON.stringify(nuxt.options.appConfig.ui.icons)};
+
+type AppConfigUI = {
+  colors?: {
+    primary?: Exclude<typeof colors[number], 'error'>
+    error?: Exclude<typeof colors[number], 'primary'>
+    gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
+  }
+  icons?: Partial<typeof icons>
+} & DeepPartial<typeof ui, string>
+
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    ui?: AppConfigUI
+  }
+}
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    ui?: AppConfigUI
+  }
+}
+export {}
+`
   });
-  await installModule("@nuxtjs/tailwindcss", defu({
-    exposeConfig: true,
-    config: { darkMode: "class" },
-    configPath: [
-      configTemplate.dst,
-      join(nuxt.options.rootDir, "tailwind.config")
-    ]
-    // @ts-expect-error - `@nuxtjs/tailwindcss` not installed yet
-  }, nuxt.options.tailwindcss));
 }
 
-const _require = createRequire(import.meta.url);
-const defaultColors = _require("tailwindcss/colors.js");
-delete defaultColors.lightBlue;
-delete defaultColors.warmGray;
-delete defaultColors.trueGray;
-delete defaultColors.coolGray;
-delete defaultColors.blueGray;
+const icons = {
+  chevronDoubleLeft: "i-heroicons-chevron-double-left-20-solid",
+  chevronDoubleRight: "i-heroicons-chevron-double-right-20-solid",
+  chevronDown: "i-heroicons-chevron-down-20-solid",
+  chevronLeft: "i-heroicons-chevron-left-20-solid",
+  chevronRight: "i-heroicons-chevron-right-20-solid",
+  check: "i-heroicons-check-20-solid",
+  close: "i-heroicons-x-mark-20-solid",
+  ellipsis: "i-heroicons-ellipsis-horizontal-20-solid",
+  external: "i-heroicons-arrow-up-right-20-solid",
+  loading: "i-heroicons-arrow-path-20-solid",
+  minus: "i-heroicons-minus-20-solid",
+  search: "i-heroicons-magnifying-glass-20-solid"
+};
+
 const module = defineNuxtModule({
   meta: {
-    name,
-    version,
+    name: "ui",
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.10.0"
@@ -116,68 +2604,48 @@ const module = defineNuxtModule({
   },
   defaults: {
     prefix: "U",
-    safelistColors: ["primary"],
-    disableGlobalStyles: false
+    colors: void 0,
+    transitions: true
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    const runtimeDir = resolve("./runtime");
-    nuxt.options.build.transpile.push(runtimeDir);
-    nuxt.options.build.transpile.push("@popperjs/core", "@headlessui/vue");
-    nuxt.options.alias["#ui"] = runtimeDir;
-    if (!options.disableGlobalStyles) {
-      nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
-    }
-    createTemplates(nuxt);
-    await installModule("@nuxt/icon");
-    await installModule("@nuxtjs/color-mode", { classSuffix: "" });
-    await installTailwind(options, nuxt, resolve);
-    addPlugin({
-      src: resolve(runtimeDir, "plugins", "colors")
+    options.colors = options.colors?.length ? [.../* @__PURE__ */ new Set(["primary", "error", ...options.colors])] : ["primary", "error", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+    nuxt.options.ui = options;
+    nuxt.options.alias["#ui"] = resolve("./runtime");
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
+      colors: {
+        primary: "green",
+        error: "red",
+        gray: "cool"
+      },
+      icons
     });
+    nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
+    nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
+    nuxt.options.css.push(resolve("./runtime/assets/css/animations.css"));
+    if (nuxt.options.builder === "@nuxt/vite-builder") {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      addVitePlugin(plugin());
+    } else {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+    await installModule("@nuxt/icon", { cssLayer: "components" });
     addPlugin({
-      src: resolve(runtimeDir, "plugins", "modals")
+      src: resolve("./runtime/plugins/colors")
     });
     addPlugin({
-      src: resolve(runtimeDir, "plugins", "slideovers")
+      src: resolve("./runtime/plugins/modal")
     });
-    addComponentsDir({
-      path: resolve(runtimeDir, "components", "elements"),
-      prefix: options.prefix,
-      global: options.global,
-      watch: false
-    });
-    addComponentsDir({
-      path: resolve(runtimeDir, "components", "forms"),
-      prefix: options.prefix,
-      global: options.global,
-      watch: false
-    });
-    addComponentsDir({
-      path: resolve(runtimeDir, "components", "data"),
-      prefix: options.prefix,
-      global: options.global,
-      watch: false
-    });
-    addComponentsDir({
-      path: resolve(runtimeDir, "components", "layout"),
-      prefix: options.prefix,
-      global: options.global,
-      watch: false
-    });
-    addComponentsDir({
-      path: resolve(runtimeDir, "components", "navigation"),
-      prefix: options.prefix,
-      global: options.global,
-      watch: false
+    addPlugin({
+      src: resolve("./runtime/plugins/slideover")
     });
     addComponentsDir({
-      path: resolve(runtimeDir, "components", "overlays"),
+      path: resolve("./runtime/components"),
       prefix: options.prefix,
-      global: options.global,
-      watch: false
+      pathPrefix: false
     });
-    addImportsDir(resolve(runtimeDir, "composables"));
+    addImportsDir(resolve("./runtime/composables"));
+    addTemplates(options, nuxt);
   }
 });