@launchui/launch-ui 1.0.0

package/dist/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+import{Command as N}from"commander";import{Command as j}from"commander";import D from"prompts";import i from"picocolors";import T from"ora";import{execa as k}from"execa";import g from"fs-extra";import f from"path";async function x(r=process.cwd()){let e=process.env.npm_config_user_agent||"";if(e.startsWith("yarn"))return"yarn";if(e.startsWith("pnpm"))return"pnpm";if(e.startsWith("bun"))return"bun";try{if(await g.pathExists(f.resolve(r,"pnpm-lock.yaml")))return"pnpm";if(await g.pathExists(f.resolve(r,"yarn.lock")))return"yarn";if(await g.pathExists(f.resolve(r,"bun.lockb")))return"bun"}catch{}return"npm"}var P=new j().name("init").description("initialize your project and install dependencies").action(async()=>{try{let r=await D([{type:"select",name:"framework",message:"Which framework are you using?",choices:[{title:"Next.js",value:"nextjs"},{title:"Vite",value:"vite"},{title:"Astro",value:"astro"},{title:"React Router",value:"react-router"}],initial:0},{type:"confirm",name:"tailwind",message:"Are you using Tailwind CSS?",initial:!0}]);if(!r.framework){console.log(i.yellow("Operation cancelled"));return}let e=T("Detecting package manager...").start(),o=await x();e.text=`Installing dependencies using ${o}...`;try{let a=["motion"],n=o==="yarn"?"add":"install";await k(o,[n,...a]),r.tailwind&&(e.text="Installing Tailwind CSS...",await k(o,[n,o==="yarn"?"-D":"--save-dev",...["tailwindcss","@tailwindcss/postcss","@tailwindcss/cli"]])),e.succeed(i.green("Dependencies installed successfully!"))}catch(a){e.fail(i.red("Failed to install dependencies.")),console.error(a);return}console.log(""),console.log("Run "+i.cyan("npx @launchui/launch-ui add [component]")+" to install new UI.")}catch{console.error(i.red(`
+An unexpected error occurred. Try again.`))}});import{Command as E}from"commander";import s from"picocolors";import R from"ora";import l from"fs-extra";import t from"path";import{fileURLToPath as _}from"url";var S=new E().name("add").description("add a component to your project").argument("[components...]","the components to add").action(async r=>{try{if(!r||r.length===0){console.log(s.red("Error: Please specify at least one component to add.")),console.log(`Run ${s.cyan("npx @launchui/launch-ui add --help")} for usage.`);return}let e=r,o=t.dirname(_(import.meta.url)),a=t.resolve(o,"../registry/components"),n=process.cwd(),m=await l.pathExists(t.resolve(n,"src"))?t.resolve(n,"src","components","ui"):t.resolve(n,"components","ui"),d=R("Preparing components...").start();for(let u of e){let h=u.toLowerCase(),w=t.resolve(a,h);if(d.text=`Adding ${u}...`,!await l.pathExists(w)){d.warn(s.yellow(`Component "${u}" could not be found in the registry.`));continue}let v=t.resolve(m,h);await l.ensureDir(v),await l.copy(w,v)}d.succeed(s.green("Success! Selected component(s) have been added to your project."));let I=t.relative(n,m);console.log(""),console.log(`Files were installed to: ${s.cyan(I)}`)}catch{console.error(s.red(`
+An unexpected error occurred.`))}});import b from"fs-extra";import y from"path";import{fileURLToPath as M}from"url";async function A(){let r=y.dirname(M(import.meta.url)),e=y.resolve(r,"../package.json");try{return await b.readJSON(e)}catch{try{return await b.readJSON(y.resolve(r,"../../package.json"))}catch{return{version:"1.0.0"}}}}process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));async function $(){let r=await A(),e=new N().name("@launchui/launch-ui").description("Add components and dependencies to your project").version(r.version||"1.0.0","-v, --version","display the version number");e.addCommand(P),e.addCommand(S),e.parse()}$();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/commands/init.ts","../src/utils/get-package-manager.ts","../src/commands/add.ts","../src/utils/get-package-info.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { Command } from \"commander\"\nimport { init } from \"./commands/init.js\"\nimport { add } from \"./commands/add.js\"\nimport { getPackageInfo } from \"./utils/get-package-info.js\"\n\nprocess.on(\"SIGINT\", () => process.exit(0))\nprocess.on(\"SIGTERM\", () => process.exit(0))\n\nasync function main() {\n  const packageInfo = await getPackageInfo()\n\n  const program = new Command()\n    .name(\"@launchui/launch-ui\")\n    .description(\"Add components and dependencies to your project\")\n    .version(\n      packageInfo.version || \"1.0.0\",\n      \"-v, --version\",\n      \"display the version number\"\n    )\n\n  program.addCommand(init)\n  program.addCommand(add)\n\n  program.parse()\n}\n\nmain()\n","import { Command } from \"commander\"\nimport prompts from \"prompts\"\nimport picocolors from \"picocolors\"\nimport ora from \"ora\"\nimport { execa } from \"execa\"\nimport { getPackageManager } from \"../utils/get-package-manager.js\"\n\nexport const init = new Command()\n  .name(\"init\")\n  .description(\"initialize your project and install dependencies\")\n  .action(async () => {\n    try {\n      const options = await prompts([\n        {\n          type: \"select\",\n          name: \"framework\",\n          message: \"Which framework are you using?\",\n          choices: [\n            { title: \"Next.js\", value: \"nextjs\" },\n            { title: \"Vite\", value: \"vite\" },\n            { title: \"Astro\", value: \"astro\" },\n            { title: \"React Router\", value: \"react-router\" },\n          ],\n          initial: 0,\n        },\n        {\n          type: \"confirm\",\n          name: \"tailwind\",\n          message: \"Are you using Tailwind CSS?\",\n          initial: true,\n        },\n      ])\n\n      if (!options.framework) {\n         console.log(picocolors.yellow(\"Operation cancelled\"))\n         return\n      }\n\n      const spinner = ora(`Detecting package manager...`).start()\n      const packageManager = await getPackageManager()\n      spinner.text = `Installing dependencies using ${packageManager}...`\n\n      try {\n        // 1. Core Dependencies (motion)\n        const dependencies = [\"motion\"]\n        const installArg = packageManager === \"yarn\" ? \"add\" : \"install\"\n        \n        await execa(packageManager, [installArg, ...dependencies])\n        \n        // 2. Tailwind Dependencies (if user needs them)\n        if (options.tailwind) {\n          spinner.text = `Installing Tailwind CSS...`\n          const devDependencies = [\"tailwindcss\", \"@tailwindcss/postcss\", \"@tailwindcss/cli\"]\n          const devArg = packageManager === \"yarn\" ? \"-D\" : \"--save-dev\"\n          \n          await execa(packageManager, [installArg, devArg, ...devDependencies])\n        }\n\n        spinner.succeed(\n          picocolors.green(`Dependencies installed successfully!`)\n        )\n      } catch (error) {\n        spinner.fail(picocolors.red(`Failed to install dependencies.`))\n        console.error(error)\n        return\n      }\n      \n      console.log(\"\")\n      console.log(\"Run \" + picocolors.cyan(\"npx @launchui/launch-ui add [component]\") + \" to install new UI.\")\n    } catch (error) {\n      console.error(picocolors.red(\"\\nAn unexpected error occurred. Try again.\"))\n    }\n  })\n","import fs from \"fs-extra\"\nimport path from \"path\"\n\nexport type PackageManager = \"npm\" | \"yarn\" | \"pnpm\" | \"bun\"\n\nexport async function getPackageManager(cwd: string = process.cwd()): Promise<PackageManager> {\n  const userAgent = process.env.npm_config_user_agent || \"\"\n\n  if (userAgent.startsWith(\"yarn\")) {\n    return \"yarn\"\n  }\n\n  if (userAgent.startsWith(\"pnpm\")) {\n    return \"pnpm\"\n  }\n\n  if (userAgent.startsWith(\"bun\")) {\n    return \"bun\"\n  }\n\n  try {\n    if (await fs.pathExists(path.resolve(cwd, \"pnpm-lock.yaml\"))) {\n      return \"pnpm\"\n    }\n\n    if (await fs.pathExists(path.resolve(cwd, \"yarn.lock\"))) {\n      return \"yarn\"\n    }\n\n    if (await fs.pathExists(path.resolve(cwd, \"bun.lockb\"))) {\n      return \"bun\"\n    }\n  } catch (error) {\n    // Fallback\n  }\n\n  return \"npm\"\n}\n","import { Command } from \"commander\"\nimport picocolors from \"picocolors\"\nimport ora from \"ora\"\nimport fs from \"fs-extra\"\nimport path from \"path\"\nimport { fileURLToPath } from \"url\"\n\nexport const add = new Command()\n  .name(\"add\")\n  .description(\"add a component to your project\")\n  .argument(\"[components...]\", \"the components to add\")\n  .action(async (components) => {\n    try {\n      if (!components || components.length === 0) {\n        console.log(picocolors.red(\"Error: Please specify at least one component to add.\"))\n        console.log(`Run ${picocolors.cyan(\"npx @launchui/launch-ui add --help\")} for usage.`)\n        return\n      }\n      let selectedComponents = components\n\n      const __dirname = path.dirname(fileURLToPath(import.meta.url))\n      // Registry is located at dist/../registry relative to the compiled file\n      const registryPath = path.resolve(__dirname, \"../registry/components\")\n      \n      // Detect base path for user's components (support for standard src/ directory)\n      const cwd = process.cwd()\n      const hasSrc = await fs.pathExists(path.resolve(cwd, \"src\"))\n      const targetBaseDir = hasSrc \n        ? path.resolve(cwd, \"src\", \"components\", \"ui\") \n        : path.resolve(cwd, \"components\", \"ui\")\n\n      const spinner = ora(`Preparing components...`).start()\n\n      for (const componentName of selectedComponents) {\n        // Handle lowercasing or specific mapping if required\n        const compDirName = componentName.toLowerCase()\n        const sourcePath = path.resolve(registryPath, compDirName)\n        \n        spinner.text = `Adding ${componentName}...`\n\n        // Check if registry directory for component exists\n        if (!(await fs.pathExists(sourcePath))) {\n          spinner.warn(picocolors.yellow(`Component \"${componentName}\" could not be found in the registry.`))\n          continue\n        }\n\n        // Target directory: current_cwd/components/ui/3d-card\n        const targetPath = path.resolve(targetBaseDir, compDirName)\n        \n        // Deep copy full directory contents (index.tsx, styles, etc)\n        await fs.ensureDir(targetPath)\n        await fs.copy(sourcePath, targetPath)\n      }\n\n      spinner.succeed(\n        picocolors.green(`Success! Selected component(s) have been added to your project.`)\n      )\n      \n      const relativeTarget = path.relative(cwd, targetBaseDir)\n      console.log(\"\")\n      console.log(`Files were installed to: ${picocolors.cyan(relativeTarget)}`)\n    } catch (error) {\n       console.error(picocolors.red(\"\\nAn unexpected error occurred.\"))\n    }\n  })\n","import fs from \"fs-extra\"\nimport path from \"path\"\nimport { fileURLToPath } from \"url\"\n\nexport async function getPackageInfo() {\n  const __dirname = path.dirname(fileURLToPath(import.meta.url))\n  // When built, package.json might be up a level\n  const packageJsonPath = path.resolve(__dirname, \"../package.json\")\n  \n  try {\n    return await fs.readJSON(packageJsonPath)\n  } catch (error) {\n    // Fallback during dev if execution occurs in src directory directly\n    try {\n      return await fs.readJSON(path.resolve(__dirname, \"../../package.json\"))\n    } catch (e) {\n      return { version: \"1.0.0\" }\n    }\n  }\n}\n"],"mappings":"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","names":["Command","Command","prompts","picocolors","ora","execa","fs","path","getPackageManager","cwd","userAgent","init","Command","options","prompts","picocolors","spinner","ora","packageManager","getPackageManager","dependencies","installArg","execa","error","Command","picocolors","ora","fs","path","fileURLToPath","add","components","selectedComponents","__dirname","registryPath","cwd","targetBaseDir","spinner","componentName","compDirName","sourcePath","targetPath","relativeTarget","fs","path","fileURLToPath","getPackageInfo","__dirname","packageJsonPath","main","packageInfo","getPackageInfo","program","Command","init","add"]}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@launchui/launch-ui",
+  "version": "1.0.0",
+  "description": "A shadcn/ui inspired CLI component installer for Next, Vite, React, Astro.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "launch-ui": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "registry",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "start": "node dist/index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "commander": "^14.0.3",
+    "execa": "^9.6.1",
+    "fs-extra": "^11.3.5",
+    "ora": "^9.4.0",
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/chalk": "^0.4.31",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.7.0",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "motion": "^12.38.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  }
+}

package/registry/README.md

@@ -0,0 +1,9 @@
+# UI Registry Folder
+
+Place all your component source files here. 
+
+## Example Structure:
+`registry/components/button.tsx`
+`registry/components/card.tsx`
+
+When building the final deployment of your CLI, the `add` command will read files from this folder and dynamically copy them directly into your user's project directories!

package/registry/components/3d-card/index.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import React, { createContext, useState, useContext, useRef, useEffect } from "react";
+import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
+
+const MouseEnterContext = createContext<[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined>(undefined);
+
+/**
+ * The main provider managing the perspective grid and mouse rotation values.
+ */
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+  // Standard motion values tracking exact cursor coordinate state relative to container bounds
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  // Smooth spring dampening prevents jarring rotations, producing the premium heavy-glass feeling.
+  const springX = useSpring(x, { stiffness: 150, damping: 15 });
+  const springY = useSpring(y, { stiffness: 150, damping: 15 });
+
+  // Map raw normalized values from center to extreme degree rotation mappings
+  const rotateX = useTransform(springY, [-0.5, 0.5], [15, -15]);
+  const rotateY = useTransform(springX, [-0.5, 0.5], [-15, 15]);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+    
+    // Calculate normalized position (-0.5 to 0.5) relative to the element center
+    const currentX = (e.clientX - left) / width - 0.5;
+    const currentY = (e.clientY - top) / height - 0.5;
+    
+    x.set(currentX);
+    y.set(currentY);
+  };
+
+  const handleMouseEnter = () => {
+    setIsMouseEntered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsMouseEntered(false);
+    // Reset positions gently back to center
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={`flex items-center justify-center ${containerClassName}`}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <motion.div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          style={{
+            transformStyle: "preserve-3d",
+            rotateX,
+            rotateY,
+          }}
+          className={`flex items-center justify-center relative transition-all duration-200 ease-linear ${className}`}
+        >
+          {children}
+        </motion.div>
+      </div>
+    </MouseEnterContext.Provider>
+  );
+};
+
+/**
+ * The inner canvas preserving standard layout properties while inheriting perspective physics.
+ */
+export const CardBody = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      style={{
+        transformStyle: "preserve-3d",
+      }}
+      className={`h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d] ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * High level utility granting elements elevation along the Z axis dynamically triggered on hover.
+ */
+export const CardItem = ({
+  as: Tag = "div",
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}: {
+  as?: any;
+  children: React.ReactNode;
+  className?: string;
+  translateX?: number | string;
+  translateY?: number | string;
+  translateZ?: number | string;
+  rotateX?: number | string;
+  rotateY?: number | string;
+  rotateZ?: number | string;
+  [key: string]: any;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const context = useContext(MouseEnterContext);
+  const isMouseEntered = context ? context[0] : false;
+
+  useEffect(() => {
+    handleAnimations();
+  }, [isMouseEntered]);
+
+  const handleAnimations = () => {
+    if (!ref.current) return;
+    if (isMouseEntered) {
+      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+    } else {
+      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
+    }
+  };
+
+  return (
+    <Tag
+      ref={ref}
+      className={`transition duration-200 ease-out ${className}`}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+/**
+ * FULL COMPONENT WRAPPER matching user reference design exactly.
+ * Fully customizable through simple props API.
+ */
+interface ThreeDCardProps {
+  title?: string;
+  description?: string;
+  imageUrl?: string;
+  ctaText?: string;
+  actionText?: string;
+}
+
+export function ThreeDCard({
+  title = "Make things float in air",
+  description = "Hover over this card to unleash the power of CSS perspective",
+  imageUrl = "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop",
+  ctaText = "Try now \u2192",
+  actionText = "Sign up"
+}: ThreeDCardProps) {
+  return (
+    <CardContainer className="inter-var">
+      <CardBody className="bg-white relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-[#0a0a0a] dark:border-white/[0.2] border-neutral-200 border-opacity-50 w-auto sm:w-[30rem] h-auto rounded-2xl p-8 border shadow-sm">
+        
+        {/* Title Elevated */}
+        <CardItem
+          translateZ="50"
+          className="text-2xl font-bold text-neutral-800 dark:text-white"
+        >
+          {title}
+        </CardItem>
+
+        {/* Description Elevated slightly less */}
+        <CardItem
+          as="p"
+          translateZ="60"
+          className="text-neutral-500 text-base max-w-sm mt-2 dark:text-neutral-300 leading-relaxed"
+        >
+          {description}
+        </CardItem>
+
+        {/* Imagery container with maximum depth and radius */}
+        <CardItem translateZ="100" className="w-full mt-8">
+          <img
+            src={imageUrl}
+            height="1000"
+            width="1000"
+            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl transition-shadow"
+            alt="thumbnail"
+          />
+        </CardItem>
+
+        {/* Footer actions stack */}
+        <div className="flex justify-between items-center mt-20">
+          {/* Lower left navigation prompt */}
+          <CardItem
+            translateZ={20}
+            as="button"
+            className="px-2 py-2 text-sm font-medium text-neutral-800 dark:text-white hover:underline underline-offset-4"
+          >
+            {ctaText}
+          </CardItem>
+
+          {/* Right primary action capsule */}
+          <CardItem
+            translateZ={20}
+            as="button"
+            className="px-5 py-2.5 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold shadow-md transition-all active:scale-95"
+          >
+            {actionText}
+          </CardItem>
+        </div>
+      </CardBody>
+    </CardContainer>
+  );
+}