pejay-ui 1.4.2 → 1.5.0

package/README.md

@@ -129,15 +129,41 @@ npx pejay-ui add toast
 ```bash
 npx pejay-ui add overlays/portal
 ```
+```bash
+npx pejay-ui add overlays/tooltip
+```
 *(Supports category-wide commands: `npx pejay-ui add overlays --all` or `npx pejay-ui add overlays --select`)*
 
+### Spinners
+```bash
+npx pejay-ui add spinner
+```
+*(Includes a localized `README.md` showing all 9 spinner styles).*
+
+### Skeletons
+```bash
+npx pejay-ui add skeleton
+```
+*(Includes a localized `README.md` showing all skeleton presets).*
+
 ### Scaffolds & Templates
 ```bash
 npx pejay-ui add tanstack-query-client
+```
+```bash
 npx pejay-ui add react-router-client
+```
+```bash
 npx pejay-ui add tanstack-router-client
+```
+```bash
 npx pejay-ui add axios-client
+```
+```bash
 npx pejay-ui add redux-store-client
+```
+```bash
 npx pejay-ui add rtk-query-client
 ```
 *(Supports category-wide commands: `npx pejay-ui add scaffold --all` or `npx pejay-ui add scaffold --select`)*
+

package/bin/cli.js

@@ -38,6 +38,24 @@ const getFilesRecursively = async (dir) => {
   return results;
 };
 
+/*
+ * resolveTargetDir – single source of truth for where a component's files land.
+ *
+ * Priority:
+ *   1. category === "scaffold"  →  src/<targetDirName|key>/
+ *   2. outputDirectory present  →  <baseDir>/<outputDirectory>/
+ *   3. default                  →  <baseDir>/components/<category>/
+ */
+const resolveTargetDir = (cwd, baseDir, compKey, compData) => {
+  if (compData.category === "scaffold") {
+    return path.join(cwd, "src", compData.targetDirName || compKey);
+  }
+  if (compData.outputDirectory) {
+    return path.join(cwd, baseDir, compData.outputDirectory);
+  }
+  return path.join(cwd, baseDir, "components", compData.category);
+};
+
 const loadRegistry = async () => {
   const registryDir = path.join(packageRoot, "registry");
   if (!await fs.pathExists(registryDir)) {
@@ -224,12 +242,7 @@ program
         let isAlreadyPresent = !!config.installed?.[compToInstall];
 
         if (!isAlreadyPresent) {
-          let targetDir;
-          if (componentData.category === "scaffold") {
-            targetDir = path.join(cwd, "src", componentData.targetDirName || compToInstall);
-          } else {
-            targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
-          }
+          let targetDir = resolveTargetDir(cwd, config.baseDir, compToInstall, componentData);
 
           const sourceFiles = componentData.files || (componentData.path ? [componentData.path] : []);
           for (const srcFilePath of sourceFiles) {
@@ -355,12 +368,7 @@ program
         }
 
         // 3. Process & Copy Component Files
-        let targetDir;
-        if (componentData.category === "scaffold") {
-          targetDir = path.join(cwd, "src", componentData.targetDirName || compToInstall);
-        } else {
-          targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
-        }
+        let targetDir = resolveTargetDir(cwd, config.baseDir, compToInstall, componentData);
 
         // Determine list of files to copy
         const sourceFiles = componentData.files || (componentData.path ? [componentData.path] : []);
@@ -391,6 +399,17 @@ program
                 ? `${relativeToUtils}/cn` 
                 : `${relativeToUtils}/cn.js`;
               componentCode = componentCode.replace(/@\/utils\/cn/g, cnImportPath);
+              componentCode = componentCode.replace(/@\/utils/g, cnImportPath);
+
+              const relativeToBaseDir = path.relative(fileDir, path.join(cwd, config.baseDir)).replace(/\\/g, "/");
+              let pejayUiImportPath = relativeToBaseDir;
+              if (!pejayUiImportPath.startsWith(".")) {
+                pejayUiImportPath = `./${pejayUiImportPath}`;
+              }
+              if (pejayUiImportPath.endsWith("/")) {
+                pejayUiImportPath = pejayUiImportPath.slice(0, -1);
+              }
+              componentCode = componentCode.replace(/@\/pejay-ui/g, pejayUiImportPath);
 
               if (!isTsProject) {
                 const transformed = babel.transformSync(componentCode, {
@@ -421,6 +440,17 @@ program
               ? `${relativeToUtils}/cn` 
               : `${relativeToUtils}/cn.js`;
             componentCode = componentCode.replace(/@\/utils\/cn/g, cnImportPath);
+            componentCode = componentCode.replace(/@\/utils/g, cnImportPath);
+
+            const relativeToBaseDir = path.relative(fileDir, path.join(cwd, config.baseDir)).replace(/\\/g, "/");
+            let pejayUiImportPath = relativeToBaseDir;
+            if (!pejayUiImportPath.startsWith(".")) {
+              pejayUiImportPath = `./${pejayUiImportPath}`;
+            }
+            if (pejayUiImportPath.endsWith("/")) {
+              pejayUiImportPath = pejayUiImportPath.slice(0, -1);
+            }
+            componentCode = componentCode.replace(/@\/pejay-ui/g, pejayUiImportPath);
 
             if (!isTsProject) {
               const transformed = babel.transformSync(componentCode, {
@@ -440,7 +470,7 @@ program
         }
 
         // 3.5 Automatically generate/update category-level and global index.ts/index.js files
-        if (componentData.category && !["scaffold", "scaffolds", "script", "scripts"].includes(componentData.category.toLowerCase())) {
+        if (componentData.category && !componentData.skipIndex && !["scaffold", "scaffolds", "script", "scripts"].includes(componentData.category.toLowerCase())) {
           const indexExt = isTsProject ? "ts" : "js";
           const filesInDir = await fs.readdir(targetDir);
           const exportableFiles = [];
@@ -548,9 +578,9 @@ program
       }
 
       // 1.5 Update index files
-      if (componentData.category && !["scaffold", "scaffolds", "script", "scripts"].includes(componentData.category.toLowerCase())) {
+      if (componentData.category && !componentData.skipIndex && !["scaffold", "scaffolds", "script", "scripts"].includes(componentData.category.toLowerCase())) {
         const isTsProject = await fs.pathExists(path.join(cwd, "tsconfig.json"));
-        const targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
+        const targetDir = resolveTargetDir(cwd, config.baseDir, component, componentData);
         const indexExt = isTsProject ? "ts" : "js";
         
         if (await fs.pathExists(targetDir)) {

package/package.json

@@ -1,54 +1,77 @@
-{
-  "name": "pejay-ui",
-  "version": "1.4.2",
-  "type": "module",
-  "description": "react ui components",
-  "bin": {
-    "pejay-ui": "bin/cli.js"
-  },
-  "files": [
-    "bin/",
-    "templates/",
-    "utils/",
-    "registry/"
-  ],
-  "keywords": [
-    "react",
-    "components",
-    "ui",
-    "cli"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/preset-typescript": "^7.24.0",
-    "commander": "^12.0.0",
-    "fs-extra": "^11.0.0",
-    "inquirer": "^9.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pejaybro/pejay-ui.git"
-  },
-  "author": "Prayas Jadli",
-  "email": "[EMAIL_ADDRESS]",
-  "bugs": {
-    "url": "https://github.com/pejaybro/pejay-ui/issues"
-  },
-  "homepage": "https://github.com/pejaybro/pejay-ui#readme",
-  "devDependencies": {
-    "@floating-ui/react": "^0.27.19",
-    "@tanstack/react-query": "^5.101.0",
-    "@types/react": "^19.2.15",
-    "@types/react-dom": "^19.2.3",
-    "clsx": "^2.1.1",
-    "dayjs": "^1.11.21",
-    "lucide-react": "^1.17.0",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "react-router-dom": "^7.16.0",
-    "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.3.0",
-    "typescript": "^6.0.3"
-  }
-}
+{
+  "name": "pejay-ui",
+  "version": "1.5.0",
+  "type": "module",
+  "description": "A powerful React UI component CLI tool to initialize, add, and scaffold premium Tailwind CSS components, layouts, overlays, and client templates.",
+  "bin": {
+    "pejay-ui": "bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "templates/",
+    "utils/",
+    "registry/"
+  ],
+  "keywords": [
+    "pejay-ui",
+    "pejay",
+    "react",
+    "react-components",
+    "ui-library",
+    "ui-components",
+    "cli",
+    "component-cli",
+    "tailwind",
+    "tailwindcss",
+    "shadcn",
+    "toast",
+    "react-toast",
+    "portal",
+    "overlays",
+    "dropdown",
+    "date-picker",
+    "time-picker",
+    "layouts",
+    "scaffold",
+    "boilerplate",
+    "tanstack-query",
+    "react-router",
+    "redux-toolkit",
+    "rtk-query",
+    "axios"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
+    "commander": "^12.0.0",
+    "fs-extra": "^11.0.0",
+    "inquirer": "^9.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pejaybro/pejay-ui.git"
+  },
+  "author": "Prayas Jadli",
+  "email": "[EMAIL_ADDRESS]",
+  "bugs": {
+    "url": "https://github.com/pejaybro/pejay-ui/issues"
+  },
+  "homepage": "https://github.com/pejaybro/pejay-ui#readme",
+  "devDependencies": {
+    "@floating-ui/react": "^0.27.19",
+    "@tanstack/react-query": "^5.101.0",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.21",
+    "lucide-react": "^1.17.0",
+    "motion": "^12.42.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.16.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3"
+  }
+}

package/registry/buttons.json

@@ -2,8 +2,9 @@
   "button": {
     "name": "Button",
     "category": "button",
-    "files": ["templates/button/Button.tsx", "templates/button/tooltip.tsx"],
+    "files": ["templates/button/Button.tsx", "templates/button/README.md"],
     "utils": ["cn.ts"],
-    "peerDependencies": ["clsx", "tailwind-merge"]
+    "peerDependencies": ["clsx", "tailwind-merge"],
+    "dependencies": ["overlays/tooltip", "spinner"]
   }
 }

package/registry/dropdowns.json

@@ -2,7 +2,7 @@
   "dropdown/select-input": {
     "name": "SelectInput",
     "category": "select-dropdown",
-    "files": ["templates/select-dropdown/select-input.tsx"],
+    "files": ["templates/select-dropdown/select-input.tsx", "templates/select-dropdown/README.md"],
     "utils": ["cn.ts"],
     "peerDependencies": [
       "clsx",
@@ -10,6 +10,7 @@
       "lucide-react",
       "@floating-ui/react"
     ],
+    "dependencies": ["overlays/tooltip"],
     "supportsCategory": true
   },
   "dropdown/multiselect-input": {
@@ -23,6 +24,7 @@
       "lucide-react",
       "@floating-ui/react"
     ],
+    "dependencies": ["overlays/tooltip"],
     "supportsCategory": true
   }
 }

package/registry/forms.json

@@ -3,7 +3,8 @@
     "name": "Input",
     "category": "form",
     "files": [
-      "templates/form/input.tsx"
+      "templates/form/text-inputs/input.tsx",
+      "templates/form/text-inputs/readme.input.md"
     ],
     "utils": [
       "cn.ts"
@@ -19,7 +20,8 @@
     "name": "AmountInput",
     "category": "form",
     "files": [
-      "templates/form/amount-input.tsx"
+      "templates/form/numeric/amount-input.tsx",
+      "templates/form/numeric/readme.amount-input.md"
     ],
     "utils": [
       "cn.ts"
@@ -29,13 +31,17 @@
       "tailwind-merge",
       "lucide-react"
     ],
-    "supportsCategory": true
+    "supportsCategory": true,
+    "dependencies": [
+      "form/input"
+    ]
   },
   "form/checkbox": {
     "name": "Checkbox",
     "category": "form",
     "files": [
-      "templates/form/checkbox.tsx"
+      "templates/form/choices/checkbox.tsx",
+      "templates/form/choices/readme.checkbox.md"
     ],
     "utils": [
       "cn.ts"
@@ -51,7 +57,8 @@
     "name": "CheckboxGroup",
     "category": "form",
     "files": [
-      "templates/form/checkbox-group.tsx"
+      "templates/form/choices/checkbox-group.tsx",
+      "templates/form/choices/readme.checkbox-group.md"
     ],
     "utils": [
       "cn.ts"
@@ -69,7 +76,8 @@
     "name": "DatePicker",
     "category": "form",
     "files": [
-      "templates/form/date-picker.tsx"
+      "templates/form/pickers/date-picker.tsx",
+      "templates/form/pickers/readme.date-picker.md"
     ],
     "utils": [
       "cn.ts"
@@ -89,7 +97,8 @@
     "name": "DateRangePicker",
     "category": "form",
     "files": [
-      "templates/form/date-range-picker.tsx"
+      "templates/form/pickers/date-range-picker.tsx",
+      "templates/form/pickers/readme.date-range-picker.md"
     ],
     "utils": [
       "cn.ts"
@@ -109,7 +118,8 @@
     "name": "EmailInput",
     "category": "form",
     "files": [
-      "templates/form/email-input.tsx"
+      "templates/form/text-inputs/email-input.tsx",
+      "templates/form/text-inputs/readme.email-input.md"
     ],
     "utils": [
       "cn.ts"
@@ -125,7 +135,8 @@
     "name": "FileInput",
     "category": "form",
     "files": [
-      "templates/form/file-input.tsx"
+      "templates/form/file/file-input.tsx",
+      "templates/form/file/readme.file-input.md"
     ],
     "utils": [
       "cn.ts"
@@ -135,13 +146,17 @@
       "tailwind-merge",
       "lucide-react"
     ],
-    "supportsCategory": true
+    "supportsCategory": true,
+    "dependencies": [
+      "form/input"
+    ]
   },
   "form/number-input": {
     "name": "NumberInput",
     "category": "form",
     "files": [
-      "templates/form/number-input.tsx"
+      "templates/form/numeric/number-input.tsx",
+      "templates/form/numeric/readme.number-input.md"
     ],
     "utils": [
       "cn.ts"
@@ -151,13 +166,17 @@
       "tailwind-merge",
       "lucide-react"
     ],
-    "supportsCategory": true
+    "supportsCategory": true,
+    "dependencies": [
+      "form/input"
+    ]
   },
   "form/password-input": {
     "name": "PasswordInput",
     "category": "form",
     "files": [
-      "templates/form/password-input.tsx"
+      "templates/form/text-inputs/password-input.tsx",
+      "templates/form/text-inputs/readme.password-input.md"
     ],
     "utils": [
       "cn.ts"
@@ -173,7 +192,8 @@
     "name": "PhoneInput",
     "category": "form",
     "files": [
-      "templates/form/phone-input.tsx"
+      "templates/form/text-inputs/phone-input.tsx",
+      "templates/form/text-inputs/readme.phone-input.md"
     ],
     "utils": [
       "cn.ts"
@@ -189,7 +209,8 @@
     "name": "Radio",
     "category": "form",
     "files": [
-      "templates/form/radio.tsx"
+      "templates/form/choices/radio.tsx",
+      "templates/form/choices/readme.radio.md"
     ],
     "utils": [
       "cn.ts"
@@ -204,7 +225,8 @@
     "name": "RadioGroup",
     "category": "form",
     "files": [
-      "templates/form/radio-group.tsx"
+      "templates/form/choices/radio-group.tsx",
+      "templates/form/choices/readme.radio-group.md"
     ],
     "utils": [
       "cn.ts"
@@ -222,7 +244,8 @@
     "name": "RangeSlider",
     "category": "form",
     "files": [
-      "templates/form/range-slider.tsx"
+      "templates/form/numeric/range-slider.tsx",
+      "templates/form/numeric/readme.range-slider.md"
     ],
     "utils": [
       "cn.ts"
@@ -237,7 +260,8 @@
     "name": "Switch",
     "category": "form",
     "files": [
-      "templates/form/switch.tsx"
+      "templates/form/choices/switch.tsx",
+      "templates/form/choices/readme.switch.md"
     ],
     "utils": [
       "cn.ts"
@@ -252,7 +276,8 @@
     "name": "Textarea",
     "category": "form",
     "files": [
-      "templates/form/textarea.tsx"
+      "templates/form/text-inputs/textarea.tsx",
+      "templates/form/text-inputs/readme.textarea.md"
     ],
     "utils": [
       "cn.ts"
@@ -267,7 +292,8 @@
     "name": "TimePicker",
     "category": "form",
     "files": [
-      "templates/form/time-picker.tsx"
+      "templates/form/pickers/time-picker.tsx",
+      "templates/form/pickers/readme.time-picker.md"
     ],
     "utils": [
       "cn.ts"
@@ -287,7 +313,8 @@
     "name": "TimeRangePicker",
     "category": "form",
     "files": [
-      "templates/form/time-range-picker.tsx"
+      "templates/form/pickers/time-range-picker.tsx",
+      "templates/form/pickers/readme.time-range-picker.md"
     ],
     "utils": [
       "cn.ts"
@@ -307,7 +334,8 @@
     "name": "UrlInput",
     "category": "form",
     "files": [
-      "templates/form/url-input.tsx"
+      "templates/form/text-inputs/url-input.tsx",
+      "templates/form/text-inputs/readme.url-input.md"
     ],
     "utils": [
       "cn.ts"
@@ -319,4 +347,4 @@
     ],
     "supportsCategory": true
   }
-}
+}

package/registry/hotkeys.json

@@ -0,0 +1,12 @@
+{
+  "hotkeys": {
+    "name": "Hotkeys",
+    "category": "hotkeys",
+    "outputDirectory": "hotkeys",
+    "skipIndex": true,
+    "files": ["templates/hotkeys"],
+    "peerDependencies": [
+      "lucide-react"
+    ]
+  }
+}

package/registry/overlays.json

@@ -2,7 +2,23 @@
   "overlays/portal": {
     "name": "Portal",
     "category": "overlays",
-    "files": ["templates/overlays/portal.tsx"],
+    "files": [
+      "templates/overlays/portal/portal.tsx"
+    ],
     "supportsCategory": true
+  },
+  "overlays/tooltip": {
+    "name": "Tooltip",
+    "category": "overlays",
+    "files": [
+      "templates/overlays/tooltip/tooltip.tsx",
+      "templates/overlays/tooltip/readme.tooltip.md"
+    ],
+    "supportsCategory": true,
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "@floating-ui/react"
+    ]
   }
-}
+}

package/registry/panels.json

@@ -0,0 +1,21 @@
+{
+  "panels": {
+    "name": "Panels",
+    "category": "panels",
+    "outputDirectory": "panels",
+    "skipIndex": true,
+    "files": ["templates/panels"],
+    "utils": ["cn.ts"],
+    "dependencies": [
+      "overlays/portal",
+      "toast",
+      "hotkeys"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "motion"
+    ]
+  }
+}

package/registry/skeleton.json

@@ -0,0 +1,20 @@
+{
+  "skeleton": {
+    "name": "Skeleton",
+    "category": "skeleton",
+    "files": [
+      "templates/skeleton/skeleton.tsx",
+      "templates/skeleton/types.ts",
+      "templates/skeleton/skeleton.css",
+      "templates/skeleton/README.md"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "supportsCategory": true
+  }
+}

package/registry/spinner.json

@@ -0,0 +1,13 @@
+{
+  "spinner": {
+    "name": "Spinner",
+    "category": "spinner",
+    "outputDirectory": "spinner",
+    "skipIndex": true,
+    "files": [
+      "templates/spinner/spinner.tsx",
+      "templates/spinner/spinner.css",
+      "templates/spinner/README.md"
+    ]
+  }
+}