ui-thing 0.1.27 → 0.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",
@@ -44,7 +44,7 @@
     "c12": "^2.0.1",
     "commander": "^12.1.0",
     "defu": "^6.1.4",
-    "execa": "^9.4.1",
+    "execa": "^9.5.1",
     "figlet": "^1.8.0",
     "fs-extra": "^11.2.0",
     "kleur": "^4.1.5",
@@ -58,14 +58,14 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.11",
-    "@types/node": "^22.7.6",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.8.6",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^2.1.3",
+    "@vitest/coverage-v8": "^2.1.4",
     "magicast": "^0.3.5",
-    "tsup": "^8.3.0",
+    "tsup": "^8.3.5",
     "typescript": "^5.6.3",
-    "vitest": "^2.1.3"
+    "vitest": "^2.1.4"
   },
   "publishConfig": {
     "access": "public"

package/src/commands/add.ts

@@ -1,8 +1,6 @@
-import { readFileSync } from "fs";
 import path from "node:path";
 import { Command } from "commander";
 import { consola } from "consola";
-import { defu } from "defu";
 import kleur from "kleur";
 import _ from "lodash";
 import prompts from "prompts";
@@ -144,11 +142,8 @@ export const add = new Command()
             (i: any) => i.from === "vue-sonner" && i.name === "toast"
           );
           if (!sonnerExists) {
-            cfg.defaultExport.imports.imports.push({
-              from: "vue-sonner",
-              name: "toast",
-              as: "useSonner",
-            });
+            // prettier-ignore
+            cfg.defaultExport.imports.imports.push({ from: "vue-sonner", name: "toast", as: "useSonner" });
           }
           const transpileExists = cfg.defaultExport.build.transpile.find((i: any) => "vue-sonner");
           if (!transpileExists) {
@@ -162,21 +157,21 @@ export const add = new Command()
           cfg.defaultExport.app.head.script ||= [];
           const scriptOneExists = cfg.defaultExport.app.head.script.find(
             (i: any) =>
-              i.src === "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/pdfmake.min.js"
+              i.src === "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/pdfmake.min.js"
           );
           if (!scriptOneExists) {
             cfg.defaultExport.app.head.script.push({
-              src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/pdfmake.min.js",
+              src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/pdfmake.min.js",
               defer: true,
             });
           }
           const scriptTwoExists = cfg.defaultExport.app.head.script.find(
             (i: any) =>
-              i.src === "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/vfs_fonts.min.js"
+              i.src === "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/vfs_fonts.min.js"
           );
           if (!scriptTwoExists) {
             cfg.defaultExport.app.head.script.push({
-              src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/vfs_fonts.min.js",
+              src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/vfs_fonts.min.js",
               defer: true,
             });
           }

package/src/commands/init.ts

@@ -16,10 +16,11 @@ export const init = new Command()
   .command("init")
   .name("init")
   .description(
-    "Initialize UI Thing in your Nuxt3 project. This will: 1. Create a tailwind.config.js file 2. Update your nuxt.config.ts file 3. Add the necessary dependencies 4. Create a ui-thing.config.ts file with the default configuration"
+    "Initialize UI Thing in your Nuxt project. This will: 1. Create a tailwind.config.js file 2. Update your nuxt.config.ts file 3. Add the necessary dependencies 4. Create a ui-thing.config.ts file with the default configuration"
   )
   .option("-f --force", "Overwrite config file if it exists.", false)
   .option("-y --yes", "Skip prompts and use default values.", false)
+  .option("-n --nuxtVersion <number>", "Specify the Nuxt version you are using.", "3")
   .action(async (options: InitOptions) => {
     // Get nuxt config
     const cfg = await getNuxtConfig();
@@ -37,7 +38,10 @@ export const init = new Command()
     // Add init modules ot nuxt cinfig
     addModuleToConfig(cfg.nuxtConfig, INIT_MODULES);
     // Configure modules in nuxt config
-    cfg.defaultExport.tailwindcss = defu(cfg.defaultExport.tailwindcss, { exposeConfig: true });
+    cfg.defaultExport.tailwindcss = defu(cfg.defaultExport.tailwindcss, {
+      exposeConfig: true,
+      editorSupport: true,
+    });
     cfg.defaultExport.colorMode = defu(cfg.defaultExport.colorMode, { classSuffix: "" });
     cfg.defaultExport.imports ||= {};
     cfg.defaultExport.imports.imports ||= [];

package/src/commands/prettier.ts

@@ -2,6 +2,7 @@ import { Command } from "commander";
 import prompts from "prompts";
 
 import { addPrettierConfig } from "../utils/addPrettierConfig";
+import { PACKAGE_MANAGER_CHOICES } from "../utils/constants";
 import { installPackages } from "../utils/installPackages";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
@@ -24,12 +25,7 @@ export const addPrettier = new Command()
       name: "pkgManager",
       type: "select",
       message: "Which package manager are you using?",
-      choices: [
-        { title: "npm", value: "npm" },
-        { title: "yarn", value: "yarn" },
-        { title: "pnpm", value: "pnpm" },
-        { title: "bun", value: "bun" },
-      ],
+      choices: PACKAGE_MANAGER_CHOICES,
     });
     if (!pkgManager) return process.exit(0);
 

package/src/commands/shortcuts.ts

@@ -3,6 +3,7 @@ import prompts from "prompts";
 
 import { addShortcutFiles } from "../utils/addShortcutFiles";
 import { addModuleToConfig, getNuxtConfig, updateConfig } from "../utils/config";
+import { PACKAGE_MANAGER_CHOICES } from "../utils/constants";
 import { installPackages } from "../utils/installPackages";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
@@ -23,12 +24,7 @@ export const addShortcuts = new Command()
       name: "pkgManager",
       type: "select",
       message: "Which package manager are you using?",
-      choices: [
-        { title: "npm", value: "npm" },
-        { title: "yarn", value: "yarn" },
-        { title: "pnpm", value: "pnpm" },
-        { title: "bun", value: "bun" },
-      ],
+      choices: PACKAGE_MANAGER_CHOICES,
     });
     if (!pkgManager) return process.exit(0);
 

package/src/comps.ts

@@ -76,7 +76,7 @@ export default [
         fileName: "shared.styles.ts",
         dirPath: "utils",
         fileContent:
-          '// Add here because button styles are used in several components\nexport const buttonStyles = tv({\n  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n  variants: {\n    variant: {\n      default: "bg-primary text-primary-foreground hover:bg-primary/90",\n      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",\n      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",\n      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",\n      ghost: "hover:bg-accent hover:text-accent-foreground",\n      link: "text-primary underline-offset-4 hover:underline",\n    },\n    size: {\n      default: "h-10 px-4 py-2",\n      xs: "h-7 rounded px-2",\n      sm: "h-9 rounded-md px-3",\n      lg: "h-11 rounded-md px-8",\n      "icon-sm": "h-9 w-9",\n      icon: "h-10 w-10",\n    },\n    disabled: {\n      true: "pointer-events-none opacity-50",\n    },\n  },\n  defaultVariants: {\n    variant: "default",\n    size: "default",\n  },\n});\n',
+          '// Add here because button styles are used in several components\nexport const buttonStyles = tv({\n  base: "group inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n  variants: {\n    variant: {\n      default: "bg-primary text-primary-foreground hover:bg-primary/90",\n      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",\n      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",\n      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",\n      ghost: "hover:bg-accent hover:text-accent-foreground",\n      link: "text-primary underline-offset-4 hover:underline",\n      expandIcon: "group relative bg-primary text-primary-foreground hover:bg-primary/90",\n      ringHover:\n        "bg-primary text-primary-foreground transition-all duration-300 hover:bg-primary/90 hover:ring-2 hover:ring-primary/90 hover:ring-offset-2",\n      shine:\n        "animate-shine bg-gradient-to-r from-primary via-primary/75 to-primary bg-[length:400%_100%] text-primary-foreground",\n      gooeyRight:\n        "relative z-0 overflow-hidden bg-primary from-primary-foreground/40 text-primary-foreground transition-all duration-500 before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-gradient-to-r before:transition-transform before:duration-1000 hover:before:translate-x-[0%] hover:before:translate-y-[0%]",\n      gooeyLeft:\n        "relative z-0 overflow-hidden bg-primary from-primary-foreground/40 text-primary-foreground transition-all duration-500 after:absolute after:inset-0 after:-z-10 after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5] after:rounded-[100%] after:bg-gradient-to-l after:transition-transform after:duration-1000 hover:after:translate-x-[0%] hover:after:translate-y-[0%]",\n      linkHover1:\n        "relative after:absolute after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-left after:scale-x-100 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-right hover:after:scale-x-0",\n      linkHover2:\n        "relative after:absolute after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-right after:scale-x-0 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100",\n    },\n    size: {\n      xs: "h-8 px-2",\n      sm: "h-9 px-3",\n      default: "h-10 px-4 py-2",\n      lg: "h-11 px-8",\n      "icon-xs": "h-8 w-8",\n      "icon-sm": "h-9 w-9",\n      icon: "h-10 w-10",\n    },\n    disabled: {\n      true: "pointer-events-none opacity-50",\n    },\n    hasIcon: {\n      false: "gap-2",\n    },\n  },\n  defaultVariants: {\n    variant: "default",\n    size: "default",\n  },\n});\n',
       },
     ],
     files: [
@@ -330,7 +330,7 @@ export default [
         fileName: "shared.styles.ts",
         dirPath: "utils",
         fileContent:
-          '// Add here because button styles are used in several components\nexport const buttonStyles = tv({\n  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n  variants: {\n    variant: {\n      default: "bg-primary text-primary-foreground hover:bg-primary/90",\n      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",\n      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",\n      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",\n      ghost: "hover:bg-accent hover:text-accent-foreground",\n      link: "text-primary underline-offset-4 hover:underline",\n    },\n    size: {\n      default: "h-10 px-4 py-2",\n      xs: "h-7 rounded px-2",\n      sm: "h-9 rounded-md px-3",\n      lg: "h-11 rounded-md px-8",\n      "icon-sm": "h-9 w-9",\n      icon: "h-10 w-10",\n    },\n    disabled: {\n      true: "pointer-events-none opacity-50",\n    },\n  },\n  defaultVariants: {\n    variant: "default",\n    size: "default",\n  },\n});\n',
+          '// Add here because button styles are used in several components\nexport const buttonStyles = tv({\n  base: "group inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n  variants: {\n    variant: {\n      default: "bg-primary text-primary-foreground hover:bg-primary/90",\n      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",\n      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",\n      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",\n      ghost: "hover:bg-accent hover:text-accent-foreground",\n      link: "text-primary underline-offset-4 hover:underline",\n      expandIcon: "group relative bg-primary text-primary-foreground hover:bg-primary/90",\n      ringHover:\n        "bg-primary text-primary-foreground transition-all duration-300 hover:bg-primary/90 hover:ring-2 hover:ring-primary/90 hover:ring-offset-2",\n      shine:\n        "animate-shine bg-gradient-to-r from-primary via-primary/75 to-primary bg-[length:400%_100%] text-primary-foreground",\n      gooeyRight:\n        "relative z-0 overflow-hidden bg-primary from-primary-foreground/40 text-primary-foreground transition-all duration-500 before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-gradient-to-r before:transition-transform before:duration-1000 hover:before:translate-x-[0%] hover:before:translate-y-[0%]",\n      gooeyLeft:\n        "relative z-0 overflow-hidden bg-primary from-primary-foreground/40 text-primary-foreground transition-all duration-500 after:absolute after:inset-0 after:-z-10 after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5] after:rounded-[100%] after:bg-gradient-to-l after:transition-transform after:duration-1000 hover:after:translate-x-[0%] hover:after:translate-y-[0%]",\n      linkHover1:\n        "relative after:absolute after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-left after:scale-x-100 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-right hover:after:scale-x-0",\n      linkHover2:\n        "relative after:absolute after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-right after:scale-x-0 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100",\n    },\n    size: {\n      xs: "h-8 px-2",\n      sm: "h-9 px-3",\n      default: "h-10 px-4 py-2",\n      lg: "h-11 px-8",\n      "icon-xs": "h-8 w-8",\n      "icon-sm": "h-9 w-9",\n      icon: "h-10 w-10",\n    },\n    disabled: {\n      true: "pointer-events-none opacity-50",\n    },\n    hasIcon: {\n      false: "gap-2",\n    },\n  },\n  defaultVariants: {\n    variant: "default",\n    size: "default",\n  },\n});\n',
       },
     ],
     files: [
@@ -338,7 +338,7 @@ export default [
         fileName: "Button.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    :to="to"\n    :href="href"\n    :type="type"\n    @click="onClick"\n  >\n    <slot>{{ text }}</slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import type { RouteLocationRaw } from "vue-router";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<{\n      /** The type fro the button */\n      type?: "button" | "submit" | "reset";\n      /** Whether the button is disabled */\n      disabled?: boolean;\n      /** Whether the button is loading */\n      loading?: boolean;\n      /** The action to perform when the button is clicked */\n      onClick?: any;\n      /** The location to navigate to when the button is clicked */\n      to?: string | RouteLocationRaw;\n      /** The location to navigate to when the button is clicked */\n      href?: string;\n      /** The element to render the button as */\n      as?: string;\n      /** Custom class(es) to add to parent element */\n      class?: any;\n      /** The variant of the button */\n      variant?: ButtonProps["variant"];\n      /** The size of the button */\n      size?: ButtonProps["size"];\n      /** The text to display in the button */\n      text?: string;\n    }>(),\n    {\n      type: "button",\n      onClick: undefined,\n      to: undefined,\n      href: undefined,\n      as: undefined,\n      class: undefined,\n      text: undefined,\n      variant: "default",\n      size: "default",\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to) return resolveComponent("NuxtLink");\n    return "button";\n  });\n</script>\n',
+          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        hasIcon: !!icon,\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    v-bind="forwarded"\n  >\n    <slot name="iconLeft">\n      <div\n        v-if="icon && iconPlacement == \'left\'"\n        className="w-0 flex items-center shrink-0 justify-center translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n    <slot>\n      <span v-if="text">{{ text }}</span>\n    </slot>\n    <slot name="iconRight">\n      <div\n        v-if="icon && iconPlacement == \'right\'"\n        className="w-0 flex items-center justify-center shrink-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<\n      NuxtLinkProps & {\n        /** The type fro the button */\n        type?: "button" | "submit" | "reset";\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** Whether the button is loading */\n        loading?: boolean;\n        /** The action to perform when the button is clicked */\n        onClick?: any;\n        /** The element to render the button as */\n        as?: string;\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** The variant of the button */\n        variant?: ButtonProps["variant"];\n        /** The size of the button */\n        size?: ButtonProps["size"];\n        /** The text to display in the button */\n        text?: string;\n        /** Should the icon be displayed on the `left` or the `right`? */\n        iconPlacement?: "left" | "right";\n        /** The icon to display in the button */\n        icon?: string;\n      }\n    >(),\n    {\n      type: "button",\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n    return "button";\n  });\n\n  const forwarded = useForwardProps(\n    reactiveOmit(\n      props,\n      "class",\n      "text",\n      "icon",\n      "iconPlacement",\n      "size",\n      "variant",\n      "as",\n      "loading",\n      "disabled"\n    )\n  );\n</script>\n',
       },
     ],
     composables: [],
@@ -833,7 +833,7 @@ export default [
         fileName: "Dialog/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <UiDialogPortal :to="to">\n    <UiDialogOverlay />\n    <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n      <slot>\n        <slot name="header">\n          <UiDialogHeader>\n            <slot name="title">\n              <UiDialogTitle v-if="title" :title="title" />\n            </slot>\n            <slot name="description">\n              <UiDialogDescription v-if="description" :description="description" />\n            </slot>\n          </UiDialogHeader>\n        </slot>\n        <slot name="content" />\n        <slot name="footer" />\n      </slot>\n      <slot name="close">\n        <UiDialogClose />\n      </slot>\n      <UiDialogClose\n        v-if="!hideClose"\n        class="absolute right-4 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n      >\n        <Icon name="lucide:x" class="h-4 w-4" />\n        <span class="sr-only">Close</span>\n      </UiDialogClose>\n    </DialogContent>\n  </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DialogContent, useForwardPropsEmits } from "radix-vue";\n  import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<\n    DialogContentProps & {\n      /** Icon to display in the close button */\n      icon?: string;\n      /** Title text */\n      title?: string;\n      /** Description text */\n      description?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Whether to hide the close button */\n      hideClose?: boolean;\n      /** Where to render the dialog */\n      to?: string | HTMLElement;\n    }\n  >();\n  const emits = defineEmits<DialogContentEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n    emits\n  );\n\n  const styles = tv({\n    base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n  });\n</script>\n',
+          '<template>\n  <UiDialogPortal :to="to">\n    <UiDialogOverlay />\n    <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n      <slot>\n        <slot name="header">\n          <UiDialogHeader>\n            <slot name="title">\n              <UiDialogTitle v-if="title" :title="title" />\n            </slot>\n            <slot name="description">\n              <UiDialogDescription v-if="description" :description="description" />\n            </slot>\n          </UiDialogHeader>\n        </slot>\n        <slot name="content" />\n        <slot name="footer" />\n      </slot>\n      <slot name="close">\n        <UiDialogClose />\n      </slot>\n      <UiDialogClose\n        v-if="!hideClose"\n        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n      >\n        <Icon name="lucide:x" class="h-4 w-4" mode="svg" />\n        <span class="sr-only">Close</span>\n      </UiDialogClose>\n    </DialogContent>\n  </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DialogContent, useForwardPropsEmits } from "radix-vue";\n  import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<\n    DialogContentProps & {\n      /** Icon to display in the close button */\n      icon?: string;\n      /** Title text */\n      title?: string;\n      /** Description text */\n      description?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Whether to hide the close button */\n      hideClose?: boolean;\n      /** Where to render the dialog */\n      to?: string | HTMLElement;\n    }\n  >();\n  const emits = defineEmits<DialogContentEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n    emits\n  );\n\n  const styles = tv({\n    base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Description.vue",
@@ -1539,7 +1539,7 @@ export default [
         fileName: "Navbar.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** Whether the navbar should be sticky */\n        sticky?: boolean;\n      }\n    >(),\n    {\n      as: "header",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "sticky");\n\n  const styles = tv({\n    base: "z-20 border-b bg-background/90 backdrop-blur",\n    variants: {\n      sticky: {\n        true: "sticky top-0",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** Whether the navbar should be sticky */\n        sticky?: boolean;\n      }\n    >(),\n    {\n      as: "header",\n    }\n  );\n\n  const forwarded = useForwardProps(reactiveOmit(props, "class", "sticky"));\n\n  const styles = tv({\n    base: "z-20 border-b bg-background/90 backdrop-blur",\n    variants: {\n      sticky: {\n        true: "sticky top-0",\n      },\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],

package/src/index.ts

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { Command } from "commander";
 
+import { version } from "../package.json";
 import { add } from "./commands/add";
 import { init } from "./commands/init";
 import { addPrettier } from "./commands/prettier";
@@ -22,7 +23,7 @@ console.log();
 program
   .name("ui-thing")
   .description("CLI for adding ui-thing components to your Nuxt 3 application")
-  .version("0.0.1")
+  .version(version)
   .addCommand(init)
   .addCommand(add)
   .addCommand(theme)

package/src/templates/css.ts

@@ -1,6 +1,4 @@
-export const CSS_START = `@import url("https://rsms.me/inter/inter.css");
-
-@tailwind base;
+export const CSS_START = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 `;
@@ -9,14 +7,14 @@ export const CSS_END = `@layer base {
   * {
     @apply border-border;
   }
+  html {
+    @apply antialiased;
+  }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   }
 }
-
 `;
 
 export const createCSS = (theme: keyof typeof themes) => {

package/src/templates/shortcuts.ts

@@ -1,11 +1,11 @@
-export const DEFINE_SHORTCUT = `import { logicAnd, logicNot } from "@vueuse/math";
-import { computed, ref } from "vue";
+export const DEFINE_SHORTCUT = `/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+import { logicAnd, logicNot } from "@vueuse/math";
 import type { ComputedRef, WatchSource } from "vue";
 
 export interface ShortcutConfig {
   handler: Function;
   usingInput?: string | boolean;
-  whenever?: WatchSource<Boolean>[];
+  whenever?: WatchSource<boolean>[];
 }
 
 export interface ShortcutsConfig {
@@ -18,7 +18,7 @@ export interface ShortcutsOptions {
 
 interface Shortcut {
   handler: Function;
-  condition: ComputedRef<Boolean>;
+  condition: ComputedRef<boolean>;
   chained: boolean;
   // KeyboardEvent attributes
   key: string;
@@ -157,7 +157,7 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
       }
 
       // Create shortcut computed
-      const conditions: ComputedRef<Boolean>[] = [];
+      const conditions: ComputedRef<boolean>[] = [];
       if (!(shortcutConfig as ShortcutConfig).usingInput) {
         conditions.push(logicNot(usingInput));
       } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === "string") {
@@ -176,12 +176,16 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
 
   useEventListener("keydown", onKeyDown);
 };
+
 `;
 
 export const USE_SHORTCUTS = `export const _useShortcuts = () => {
   const macOS = computed(
     () =>
-      process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/)
+      import.meta.client &&
+      navigator &&
+      navigator.userAgent &&
+      navigator.userAgent.match(/Macintosh;/)
   );
 
   const metaSymbol = ref(" ");
@@ -214,4 +218,5 @@ export const USE_SHORTCUTS = `export const _useShortcuts = () => {
 };
 
 export const useShortcuts = createSharedComposable(_useShortcuts);
+
 `;

package/src/templates/tailwind.ts

@@ -17,7 +17,13 @@ module.exports = {
         },
       },
       fontFamily: {
-        sans: ["Inter var", "Inter", ...fontFamily.sans],
+        sans: [
+          \`Inter, \${fontFamily.sans.join(", ")}\`,
+          {
+            fontFeatureSettings: '"cv02","cv03","cv04","cv11"',
+          },
+        ],
+        mono: ["'Fira Code'", ...fontFamily.mono],
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -25,6 +31,27 @@ module.exports = {
         sm: "calc(var(--radius) - 4px)",
       },
       keyframes: {
+        shine: {
+          from: { backgroundPosition: "200% 0" },
+          to: { backgroundPosition: "-200% 0" },
+        },
+        meteor: {
+          "0%": { transform: "rotate(215deg) translateX(0)", opacity: 1 },
+          "70%": { opacity: 1 },
+          "100%": {
+            transform: "rotate(215deg) translateX(-500px)",
+            opacity: 0,
+          },
+        },
+        grid: {
+          "0%": { transform: "translateY(-50%)" },
+          "100%": { transform: "translateY(0)" },
+        },
+        "border-beam": {
+          "100%": {
+            "offset-distance": "100%",
+          },
+        },
         "accordion-down": {
           from: { height: "0px" },
           to: { height: "var(--radix-accordion-content-height)" },
@@ -51,6 +78,9 @@ module.exports = {
         },
       },
       animation: {
+        shine: "shine 8s ease-in-out infinite",
+        meteor: "meteor 5s linear infinite",
+        grid: "grid 15s linear infinite",
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         fadeIn: "fadeIn 0.2s ease-out",

package/src/types.ts

@@ -1,4 +1,5 @@
 export type UIConfig = {
+  nuxtVersion?: number;
   theme: string;
   tailwindCSSLocation: string;
   tailwindConfigLocation: string;
@@ -11,7 +12,7 @@ export type UIConfig = {
   packageManager: string;
 };
 
-export type InitOptions = { force?: boolean; yes?: boolean };
+export type InitOptions = { force?: boolean; yes?: boolean; nuxtVersion?: number };
 
 export type Component = {
   name: string;

package/src/utils/addPrettierConfig.ts

@@ -1,3 +1,4 @@
+import { join } from "node:path";
 import { $ } from "execa";
 import fse from "fs-extra";
 import ora from "ora";
@@ -6,7 +7,8 @@ import prompts from "prompts";
 import { PRETTIER_CONFIG } from "../templates/prettier";
 
 export const addPrettierConfig = async (cwd = process.cwd(), format: boolean = true) => {
-  if (fse.existsSync(`${cwd}/.prettierrc`)) {
+  const prettierLocation = join(cwd, ".prettierrc");
+  if (fse.existsSync(prettierLocation)) {
     const res = await prompts({
       name: "overwrite",
       type: "confirm",
@@ -15,7 +17,7 @@ export const addPrettierConfig = async (cwd = process.cwd(), format: boolean = t
     });
     if (!res.overwrite) return false;
   }
-  await fse.writeFile(`${cwd}/.prettierrc`, PRETTIER_CONFIG, "utf-8");
+  await fse.writeFile(prettierLocation, PRETTIER_CONFIG, "utf-8");
   if (!format) return true;
   const spinner = ora("Formatting files with prettier...").start();
   await $`npx prettier --write .`;

package/src/utils/addShortcutFiles.ts

@@ -1,12 +1,18 @@
+import { join } from "node:path";
 import fse from "fs-extra";
 
 import { DEFINE_SHORTCUT, USE_SHORTCUTS } from "../templates/shortcuts";
+import { UIConfig } from "../types";
+import { getUIConfig } from "./config";
 
 export const addShortcutFiles = async (cwd = process.cwd()) => {
+  // get config
+  let userConfig: UIConfig = await getUIConfig();
+  const composablesLocation = join(cwd, userConfig.composablesLocation);
   // ensure that the composable folder exists
-  await fse.ensureDir(`${cwd}/composables`);
+  await fse.ensureDir(composablesLocation);
   // write the defineShortcuts composable
-  await fse.writeFile(`${cwd}/composables/defineShortcuts.ts`, DEFINE_SHORTCUT, "utf-8");
+  await fse.writeFile(join(composablesLocation, "defineShortcuts.ts"), DEFINE_SHORTCUT, "utf-8");
   // write the useShortcuts composable
-  await fse.writeFile(`${cwd}/composables/useShortcuts.ts`, USE_SHORTCUTS, "utf-8");
+  await fse.writeFile(join(composablesLocation, "useShortcuts.ts"), USE_SHORTCUTS, "utf-8");
 };

package/src/utils/compareUIConfig.ts

@@ -9,6 +9,7 @@ export const compareUIConfig = async () => {
   // Get ui config
   let userConfig: UIConfig = await getUIConfig();
   const tempConfig: UIConfig = {
+    nuxtVersion: 3,
     theme: "string",
     tailwindCSSLocation: "string",
     tailwindConfigLocation: "string",

package/src/utils/config.ts

@@ -8,11 +8,12 @@ import { addNuxtModule, getDefaultExportOptions } from "magicast/helpers";
 import prompts from "prompts";
 
 import { InitOptions, UIConfig } from "../types";
-import { initPrompts } from "./uiConfigPrompt";
+import { initPrompts, promptForNuxtVersion } from "./uiConfigPrompt";
 
 const currentDir = process.cwd();
 const uiConfigFilename = "ui-thing.config.ts";
-const defaultConfig = {
+const defaultConfig: UIConfig = {
+  nuxtVersion: 3,
   theme: "zinc",
   tailwindCSSLocation: "assets/css/tailwind.css",
   tailwindConfigLocation: "tailwind.config.js",
@@ -24,6 +25,19 @@ const defaultConfig = {
   useDefaultFilename: true,
   packageManager: "npm",
 };
+const defaultNuxt4Config: UIConfig = {
+  nuxtVersion: 4,
+  theme: "zinc",
+  tailwindCSSLocation: "app/assets/css/tailwind.css",
+  tailwindConfigLocation: "tailwind.config.js",
+  componentsLocation: "app/components/Ui",
+  composablesLocation: "app/composables",
+  pluginsLocation: "app/plugins",
+  utilsLocation: "app/utils",
+  force: true,
+  useDefaultFilename: true,
+  packageManager: "npm",
+};
 
 export const getNuxtConfig = async () => {
   if (!fse.existsSync("nuxt.config.ts")) {
@@ -38,11 +52,15 @@ export const getNuxtConfig = async () => {
 export const getUIConfig = async (options?: InitOptions) => {
   const configFileExists = fse.existsSync(uiConfigFilename);
   let uiConfig: UIConfig = {} as UIConfig;
+  let nuxtVersion = Number(options?.nuxtVersion);
 
   if (!configFileExists || options?.force) {
+    if (!nuxtVersion) {
+      nuxtVersion = await promptForNuxtVersion();
+    }
     // if option yes is passed, use default values
     if (options?.yes) {
-      uiConfig = defaultConfig;
+      uiConfig = Number(nuxtVersion) === 4 ? defaultNuxt4Config : defaultConfig;
     } else {
       uiConfig = await initPrompts();
     }

package/src/utils/constants.ts

@@ -1,4 +1,4 @@
-export const INIT_DEPS = ["radix-vue", "tailwind-variants"];
+export const INIT_DEPS = ["radix-vue", "tailwind-variants", "@nuxt/fonts"];
 export const INIT_DEV_DEPS = [
   "typescript",
   "tailwindcss-animate",
@@ -17,6 +17,19 @@ export const INIT_MODULES = [
   "@nuxtjs/color-mode",
   "@vueuse/nuxt",
   "@nuxt/icon",
+  "@nuxt/fonts",
+];
+
+export const NUXT_VERSIONS = [
+  { title: "Nuxt 3", value: 3 },
+  { title: "Nuxt 4", value: 4 },
+];
+
+export const PACKAGE_MANAGER_CHOICES = [
+  { title: "NPM", value: "npm" },
+  { title: "YARN", value: "yarn" },
+  { title: "PNPM", value: "pnpm" },
+  { title: "BUN", value: "bun" },
 ];
 
 export const CSS_THEME_OPTIONS = [

package/src/utils/uiConfigPrompt.ts

@@ -1,10 +1,32 @@
 import kleur from "kleur";
 import prompts from "prompts";
 
-import { CSS_THEME_OPTIONS } from "./constants";
+import { CSS_THEME_OPTIONS, NUXT_VERSIONS, PACKAGE_MANAGER_CHOICES } from "./constants";
+
+export const promptForNuxtVersion = async () => {
+  const response = await prompts([
+    {
+      name: "nuxtVersion",
+      type: "select",
+      message: "Which Nuxt version are you using?",
+      choices: NUXT_VERSIONS,
+    },
+  ]);
+  if (!response.nuxtVersion) {
+    console.log(kleur.red("No Nuxt version selected. Exiting..."));
+    return process.exit(0);
+  }
+  return response.nuxtVersion;
+};
 
 export const initPrompts = async () => {
   const response = await prompts([
+    {
+      name: "nuxtVersion",
+      type: "select",
+      message: "Which Nuxt version are you using?",
+      choices: NUXT_VERSIONS,
+    },
     {
       name: "theme",
       type: "autocomplete",
@@ -15,7 +37,8 @@ export const initPrompts = async () => {
       name: "tailwindCSSLocation",
       type: "text",
       message: "Where is your tailwind.css file located?",
-      initial: "assets/css/tailwind.css",
+      initial: (_, v) =>
+        v.nuxtVersion == 3 ? "assets/css/tailwind.css" : "app/assets/css/tailwind.css",
     },
     {
       name: "tailwindConfigLocation",
@@ -27,25 +50,25 @@ export const initPrompts = async () => {
       name: "componentsLocation",
       type: "text",
       message: "Where should your components be stored?",
-      initial: "components/Ui",
+      initial: (_, v) => (v.nuxtVersion == 3 ? "components/Ui" : "app/components/Ui"),
     },
     {
       name: "composablesLocation",
       type: "text",
       message: "Where should your composables be stored?",
-      initial: "composables",
+      initial: (_, v) => (v.nuxtVersion == 3 ? "composables" : "app/composables"),
     },
     {
       name: "pluginsLocation",
       type: "text",
       message: "Where should your plugins be stored?",
-      initial: "plugins",
+      initial: (_, v) => (v.nuxtVersion == 3 ? "plugins" : "app/plugins"),
     },
     {
       name: "utilsLocation",
       type: "text",
       message: "Where should your utils be stored?",
-      initial: "utils",
+      initial: (_, v) => (v.nuxtVersion == 3 ? "utils" : "app/utils"),
     },
     {
       name: "force",
@@ -63,15 +86,11 @@ export const initPrompts = async () => {
       name: "packageManager",
       type: "select",
       message: "Which package manager do you use?",
-      choices: [
-        { title: "NPM", value: "npm" },
-        { title: "Yarn", value: "yarn" },
-        { title: "PNPM", value: "pnpm" },
-        { title: "Bun", value: "bun" },
-      ],
+      choices: PACKAGE_MANAGER_CHOICES,
     },
   ]);
-  if (!response || Object.keys(response).length < 9) {
+
+  if (!response || Object.keys(response).length < 10) {
     console.log(kleur.red("Incomplete configuration submitted. Exiting..."));
     return process.exit(0);
   }