ui-thing 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",
@@ -44,28 +44,28 @@
     "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",
     "lodash": "^4.17.21",
     "nypm": "^0.3.12",
-    "ora": "^8.1.0",
+    "ora": "^8.1.1",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
     "@gmrchk/cli-testing-library": "^0.1.2",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@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.9.0",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^2.1.3",
+    "@vitest/coverage-v8": "^2.1.5",
     "magicast": "^0.3.5",
-    "tsup": "^8.3.0",
+    "tsup": "^8.3.5",
     "typescript": "^5.6.3",
-    "vitest": "^2.1.3"
+    "vitest": "^2.1.5"
   },
   "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: [
@@ -300,7 +300,7 @@ export default [
         fileName: "Badge.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <component\n    :is="elementType"\n    :to="to"\n    :href="href"\n    :disabled="disabled"\n    :class="badgeVariants({ disabled, variant, class: props.class })"\n    @click="onClick"\n  >\n    <slot />\n  </component>\n</template>\n\n<script lang="ts" setup>\n  const badgeVariants = tv({\n    base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",\n    variants: {\n      variant: {\n        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",\n        secondary:\n          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",\n        destructive:\n          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",\n        outline: "text-foreground",\n      },\n      disabled: {\n        true: "cursor-not-allowed opacity-50",\n      },\n    },\n    defaultVariants: {\n      variant: "default",\n    },\n  });\n\n  type BadgeProps = VariantProps<typeof badgeVariants>;\n\n  const props = defineProps<{\n    class?: any;\n    variant?: BadgeProps["variant"];\n    onClick?: () => void;\n    to?: string;\n    href?: string;\n    disabled?: boolean;\n    tag?: string;\n  }>();\n\n  const elementType = computed(() => {\n    if (props.tag) return props.tag;\n    if (props.href || props.to) return resolveComponent("NuxtLink");\n    return props.tag || "div";\n  });\n</script>\n',
+          '<template>\n  <component\n    :is="elementType"\n    :class="badgeVariants({ disabled, size, variant, class: props.class })"\n    v-bind="forwarded"\n    @click="onClick"\n  >\n    <slot />\n  </component>\n</template>\n\n<script lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n</script>\n<script lang="ts" setup>\n  const badgeVariants = tv({\n    base: "inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",\n    variants: {\n      variant: {\n        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",\n        secondary:\n          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",\n        destructive:\n          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",\n        outline: "text-foreground",\n      },\n      disabled: {\n        true: "cursor-not-allowed opacity-50",\n      },\n      size: {\n        sm: "px-2.5 py-0.5 text-xs font-medium",\n        md: "px-2.5 py-1 text-sm font-semibold",\n        lg: "px-3 py-1.5 text-sm font-semibold",\n      },\n    },\n    defaultVariants: {\n      variant: "default",\n      disabled: false,\n      size: "sm",\n    },\n  });\n\n  type BadgeProps = VariantProps<typeof badgeVariants>;\n\n  const props = defineProps<\n    NuxtLinkProps & {\n      /** Any additional class that should be added to the badge */\n      class?: any;\n      /** The variant of the badge */\n      variant?: BadgeProps["variant"];\n      /** The size of the badge */\n      size?: BadgeProps["size"];\n      /** The action to perform when the badge is clicked */\n      onClick?: () => void;\n      /** Should the badge be disabled or not */\n      disabled?: boolean;\n      /** The element to render the badge as */\n      tag?: string;\n    }\n  >();\n\n  const forwarded = useForwardProps(reactiveOmit(props, "class", "variant", "onClick", "disabled"));\n\n  const elementType = computed(() => {\n    if (props.tag) return props.tag;\n    if (props.href || props.to) return resolveComponent("NuxtLink");\n    if (props.onClick) return "button";\n    return props.tag || "div";\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -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: [],
@@ -1295,7 +1295,7 @@ export default [
         fileName: "Label.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Label :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n    <slot name="hint">\n      <span v-if="hint">\n        {{ hint }}\n      </span>\n    </slot>\n  </Label>\n</template>\n\n<script lang="ts" setup>\n  import { Label } from "radix-vue";\n  import type { LabelProps } from "radix-vue";\n\n  const props = defineProps<\n    LabelProps & {\n      /** Custom class(es) to add to the label */\n      class?: any;\n      hint?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "class", "hint");\n\n  const styles = tv({\n    base: "flex items-center justify-between text-[15px] font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <Label :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n    <slot name="hint">\n      <span v-if="hint" class="text-muted-foreground">\n        {{ hint }}\n      </span>\n    </slot>\n  </Label>\n</template>\n\n<script lang="ts" setup>\n  import { Label } from "radix-vue";\n  import type { LabelProps } from "radix-vue";\n\n  const props = defineProps<\n    LabelProps & {\n      /** Custom class(es) to add to the label */\n      class?: any;\n      hint?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "class", "hint");\n\n  const styles = tv({\n    base: "flex items-center justify-between text-[15px] font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -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: [],
@@ -2667,7 +2667,7 @@ export default [
         fileName: "Vee/Input.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :hint="labelHint"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <div class="relative">\n      <slot name="icon">\n        <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n          <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n        </span>\n      </slot>\n      <UiInput\n        :id="inputId"\n        v-model="value"\n        :type="type"\n        :required="required"\n        :name="name"\n        :disabled="disabled"\n        v-bind="$attrs"\n        :class="[hasIcon && \'pl-9\']"\n        :placeholder="placeholder"\n        @blur="handleBlur"\n      />\n    </div>\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  const props = defineProps<{\n    label?: string;\n    labelHint?: string;\n    icon?: string;\n    hint?: string;\n    disabled?: boolean;\n    modelValue?: string;\n    name?: string;\n    id?: string;\n    rules?: any;\n    validateOnMount?: boolean;\n    type?: string;\n    placeholder?: string;\n    required?: boolean;\n  }>();\n\n  const inputId = props.id || useId();\n\n  const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n  const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\n    initialValue: props.modelValue,\n    label: props.label,\n    validateOnMount: props.validateOnMount,\n    syncVModel: true,\n  });\n</script>\n',
+          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :hint="labelHint"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <div class="relative">\n      <slot name="icon">\n        <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n          <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n        </span>\n      </slot>\n      <slot name="trailingIcon">\n        <span\n          v-if="hasTrailingIcon"\n          class="absolute inset-y-0 right-3 flex items-center justify-center"\n        >\n          <Icon v-if="trailingIcon" :name="trailingIcon" class="h-4 w-4 text-muted-foreground/70" />\n        </span>\n      </slot>\n      <UiInput\n        :id="inputId"\n        v-model="value"\n        :type="type"\n        :required="required"\n        :name="name"\n        :disabled="disabled"\n        v-bind="$attrs"\n        :class="[hasIcon && \'pl-9\', hasTrailingIcon && \'pr-9\']"\n        :placeholder="placeholder"\n        @blur="handleBlur"\n      />\n    </div>\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  const props = defineProps<{\n    label?: string;\n    labelHint?: string;\n    icon?: string;\n    trailingIcon?: string;\n    hint?: string;\n    disabled?: boolean;\n    modelValue?: string;\n    name?: string;\n    id?: string;\n    rules?: any;\n    validateOnMount?: boolean;\n    type?: string;\n    placeholder?: string;\n    required?: boolean;\n  }>();\n\n  defineOptions({ inheritAttrs: false });\n\n  const inputId = props.id || useId();\n\n  const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n  const hasTrailingIcon = computed(\n    () => Boolean(props.trailingIcon) || Boolean(useSlots().trailingIcon)\n  );\n\n  const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\n    initialValue: props.modelValue,\n    label: props.label,\n    validateOnMount: props.validateOnMount,\n    syncVModel: true,\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 = [