untitledui 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+import{Command as $0}from"commander";import R3 from"async-retry";import v from"chalk";import{Command as s3}from"commander";import{execa as i}from"execa";import*as _ from"fs";import h from"ora";import a3 from"os";import*as A from"path";import d from"prompts";import{Project as p3}from"ts-morph";import{posix as x3,sep as T3}from"path";import{Readable as y3,pipeline as S3}from"stream";import{promisify as C3}from"util";import{x as k3}from"tar";import b3 from"node-fetch";var F3=C3(S3);async function V3(z,W){try{let Q=await O3(W);await F3(Q,k3({cwd:z,strip:2,filter:(Y)=>{return Y.split(T3).join(x3.sep).includes(W.template||"basic-form")}}))}catch(Q){throw new Error(`Failed to download or extract repository from API: ${Q instanceof Error?Q.message:Q}`)}}async function O3(z){try{let Q=await b3("https://untitledui-docs.vercel.app/api/download-repo",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/octet-stream"},body:JSON.stringify(z)});if(Q.status===403||Q.status===404)throw new Error(z.key?"License key is invalid or expired":"Repository not found");if(!Q.ok)throw new Error(`Failed to download from API. Status: ${Q.status} ${Q.statusText}`);if(!Q.body)throw new Error("Response body is empty");return y3.from(Q.body)}catch(Q){throw new Error(`Error downloading tarball: ${Q instanceof Error?Q.message:Q}`)}}async function m(z){let W=`https://untitledui-docs.vercel.app/api/validate-key?key=${z}`;try{return(await b3(W)).status===200}catch{return!1}}import P3 from"node-fetch";async function Q3(z,W,Q){try{return await(await P3("https://untitledui-docs.vercel.app/api/components",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({type:z,components:W,key:Q})})).json()}catch(X){return console.error(X),null}}import L3 from"node-fetch";async function M3(z,W=""){let Q=`https://untitledui-docs.vercel.app/api/components/list?key=${W}&type=${z}`;try{let X=await(await L3(Q)).json();if(!X?.components?.length)return null;return X}catch(Y){return console.error(Y),null}}async function J3(z=""){let W=`https://untitledui-docs.vercel.app/api/components/list?key=${z}`;try{let Y=await(await L3(W)).json();if(!Y?.types?.length)return null;return Y}catch(Q){return console.error(Q),null}}import l3 from"fast-glob";import*as H3 from"fs";import*as X3 from"path";import{Project as c3}from"ts-morph";import{loadConfig as I3}from"tsconfig-paths";import g3 from"prettier";async function G3(z,W="typescript"){try{return await g3.format(z,{parser:W})}catch(Q){return console.error("Error formatting with Prettier:",Q),z}}import n from"fast-glob";import*as c from"fs";import*as r from"path";import{loadConfig as m3}from"tsconfig-paths";var w=["**/node_modules/**",".next","public","dist","build"];async function s(z){let W=c.existsSync(r.resolve(z,"src")),Q=c.existsSync(r.resolve(z,`${W?"src/":""}app`)),[Y,X,V,B]=await Promise.all([n.glob("**/{next,vite,astro}.config.*|gatsby-config.*",{cwd:z,deep:2,ignore:w}),h3(z),d3(z),f3(z)]),b={framework:"other",isTsx:X,tailwindFile:V||null,aliasPrefix:B,isSrcDir:W,isUsingAppDir:Q};if(Y.find((j)=>j.startsWith("next.config."))?.length)return b.framework=Q?"next-app":"next-pages",b;else if(Y?.length||c.existsSync(r.resolve(z,"package.json")))return b.framework="other",b;return null}async function h3(z){return(await n.glob("tsconfig.*",{cwd:z,deep:2,ignore:w})).length>0}async function d3(z){let W=await n.glob("tailwind.config.*",{cwd:z,deep:2,ignore:w});if(!W.length)return null;return W[0]}async function f3(z){let W=await m3(z);if(W?.resultType==="failed"||!Object.keys(W.paths).length)return null;let Q={};for(let[Y,X]of Object.entries(W.paths)){let V=Y.replace(/\/\*$/,"/");if(X.some((B)=>B.includes("/app/*")))Q.appPrefix=V;else if(X.some((B)=>B.includes("/components/*")))Q.componentsPrefix=V;else if(X.some((B)=>B.includes("/utils/*")))Q.utilsPrefix=V;else if(X.some((B)=>B.includes("/styles/*")))Q.stylesPrefix=V;else if(X.some((B)=>B.includes("./*")||B.includes("/src/*")))Q.srcPrefix=V}return Q||null}function a(z){let W=I3(z),Q=l3.sync(["tailwind.config.*","**/globals.css","**/{layout,_app}.tsx","package.json"],{cwd:z,deep:4,absolute:!0,onlyFiles:!0,ignore:w}),Y={tailwindFile:Q.find((X)=>X.includes("tailwind.config.")),cssFile:Q.find((X)=>X.includes("globals.css")),layoutFile:Q.find((X)=>X.includes("layout")),appFile:Q.find((X)=>X.includes("_app")),packageJson:Q.find((X)=>X.includes("package.json")),tsConfig:W?.resultType==="success"?W?.configFileAbsolutePath:void 0};if(W.resultType==="failed")throw new Error(`Failed to load tsconfig.json. ${W.message??""}`.trim());return Y}function Y3(z,W,Q){if(z.includes("components")){if(W?.componentsPrefix)return z.replace(/@\/components\//,X3.join(W?.componentsPrefix,Q?Q.replace(/components\//,""):"","/"));if(Q)return z.replace(/@\/components\//,X3.join(W?.srcPrefix||"@/",Q,"/"))}if(z.includes("app")&&W?.appPrefix)return z.replace(/^@\/app\//,W?.appPrefix);if(z.includes("utils")&&W?.utilsPrefix)return z.replace(/^@\/utils\//,W?.utilsPrefix);if(z.includes("styles")&&W?.stylesPrefix)return z.replace(/^@\/styles\//,W?.stylesPrefix);if(W?.srcPrefix)return z.replace(/^@\//,W?.srcPrefix);return z}async function j3(z,W,Q="@/*"){let Y=await I3(z);if(Y?.resultType==="failed")return null;let X={};if(!Object.keys(Y.paths).length){Y.paths={[Q]:[`./${W?"src/":""}*`]},X.srcPrefix=Q.replace(/\/\*$/,"");let V=await H3.promises.readFile(Y.configFileAbsolutePath,"utf-8"),B;if(!V.includes('"paths":'))B=V.replace(/"compilerOptions":\s*{/,`"compilerOptions": { 
+                "paths": ${JSON.stringify(Y.paths)},`);else B=V.replace(/"paths":\s*{[^}]*}/,`"paths": ${JSON.stringify(Y.paths)}`);let b=new c3,j=await G3(B,"json");return b.createSourceFile(Y.configFileAbsolutePath,j,{overwrite:!0}),await b.save(),X}return X||null}import r3 from"node-fetch";async function n3(){try{return await(await r3("https://untitledui-docs.vercel.app/api/get-pkg")).json()}catch(W){return console.error(W),null}}async function p({dependencies:z,devDependencies:W,shouldThrow:Q=!0}){let Y=await n3();if(!Y)if(Q)throw new Error("package.json not found");else return null;let X=[],V=[];if(z)z.forEach((B)=>{if(Y.dependencies?.[B])X.push(`${B}@${Y.dependencies[B]}`)});if(W)W.forEach((B)=>{if(Y.devDependencies?.[B])V.push(`${B}@${Y.devDependencies[B]}`)});return{dependencies:X,devDependencies:V}}function u(){if("bun/1.2.4 npm/? node/v22.6.0 darwin arm64".startsWith("yarn"))return"yarn";if("bun/1.2.4 npm/? node/v22.6.0 darwin arm64".startsWith("pnpm"))return"pnpm";if("bun/1.2.4 npm/? node/v22.6.0 darwin arm64".startsWith("bun"))return"bun";return"npm"}var i3=A.join(a3.homedir(),".untitledui"),k=A.join(i3,"config.json"),$={components:[],path:"",type:void 0,license:""};if(_.existsSync(k)){let z=JSON.parse(_.readFileSync(k,"utf-8"));$.license=z.license}var o=(z)=>{if(z.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
+`),process.exit(1)},_3=new s3().name("add").description("add a component to your project").argument("[components...]","the components to add").option("-o, --overwrite","overwrite existing files.",!1).option("-a, --all","add all available components",!1).option("-p, --path <path>","the path to add the component to.").option("-t, --type <shared|marketing|shared-assets|application|foundations>","the type of the component to add.").option("-l, --license <license-key>","Add a license key for adding components.").action(async(z,W)=>{if(z)$.components=z;if(W)$.overwrite=W.overwrite,$.all=W.all,$.path=W.path,$.license=W.license||$.license;try{await o3($)}catch(Q){console.error(v.red(Q))}});async function o3(z){let W=h().start(),Q=process.cwd();if(!_.existsSync(A.resolve(Q,"package.json")))W.warn("This command should be run in a project directory."),process.exit(0);let X=await s(Q);if($.license){let Z=await m($.license);if(console.log(Z,$),!Z)W.fail("Invalid license key"),process.exit(0);if(!_.existsSync(k)){let R=A.dirname(k);_.mkdirSync(R,{recursive:!0}),_.writeFileSync(k,JSON.stringify({license:$.license},null,2))}if(JSON.parse(_.readFileSync(k,"utf-8")).license!==$.license)_.writeFileSync(k,JSON.stringify({license:$.license},null,2))}W.stop();let V=[];if($.components.length){let Z=await Q3($.type,$.components,$.license);if(Z?.pro?.length)Z?.pro?.forEach((M)=>console.log(`The ${v.yellowBright(M.split("/")[1])} component is only available for PRO users. Get access to the PRO at ${v.cyan("https://www.untitledui.com/buy/untitled-ui")}`)),process.exit(0);if(!Z?.components.length)console.log("No components found"),process.exit(0);V.push(...Z.components)}if(!$?.type&&!$?.components.length){let Z=await J3($.license);if(!Z)console.log("No component types found"),process.exit(0);let M=await d({type:"select",name:"type",onState:o,message:`What type of ${v.cyan("component")} are you adding?`,choices:Z?.types.map((R)=>({title:R,value:R}))});$.type=M.type}if(!$?.path){let Z=await d({type:"text",name:"path",onState:o,message:`Where would you like to add the ${v.cyan("components")}?`,initial:"components"});$.path=Z.path}if(X&&!X?.aliasPrefix){let Z=/^[^*"]+\/\*\s*$/,M=await d({type:"text",name:"aliasPrefix",onState:o,initial:"@/*",message:`What is the ${v.cyan("import alias")} for your project?`,validate:(R)=>Z.test(R)?!0:"Import alias must follow the pattern <prefix>/*"});X.aliasPrefix=await j3(Q,X?.isSrcDir,M?.aliasPrefix)}if(!$?.components.length){let Z=await M3($?.type,$.license);if(!Z)console.log("No components found"),process.exit(0);let M=await d({type:"multiselect",name:"components",onState:o,message:`Which ${v.cyan("components")} would you like to add?`,choices:Z?.components?.map((R)=>({title:R||"example",value:R||"example",selected:$.components.includes(R)})),instructions:!1,hint:"- Space to select. Return to submit"});if($.components=M.components,!M.components||M.components.length===0)console.log("No option selected. Exiting..."),process.exit(0)}if(!$.components?.length)W.warn("No components selected. Exiting."),process.exit(0);let B=a(Q),b=new Set,j=new Set,q=new Set,J=new p3({tsConfigFilePath:B?.tsConfig});if($.type&&$.components.length){let Z=await Q3($.type,$.components,$.license);if(!Z?.components.length)console.log("No components found"),process.exit(0);V.push(...Z.components)}V.forEach((Z)=>{let M=h(`Adding ${Z.name}`).start(),R=Z.files;Z.dependencies.forEach((E)=>j.add(E)),Z.devDependencies.forEach((E)=>q.add(E));try{R?.forEach(async({path:E,code:T})=>{let D=A.join(process.cwd(),`${X?.isSrcDir&&"src"}`,E.replace(/components\//,$.path+"/")),g=A.dirname(D);if(_.existsSync(D)&&!$.overwrite){if(_.readFileSync(D,"utf-8")!==T)b.add({code:T,path:D})}else{_.mkdirSync(g,{recursive:!0}),_.writeFileSync(D,T);let O=J.addSourceFileAtPath(A.resolve(D));O.getImportDeclarations().forEach((G)=>{let S=G.getModuleSpecifierValue();G.setModuleSpecifier(Y3(S,X?.aliasPrefix,$.path))}),await O.save()}}),M.succeed(`${v.green(Z.name)} is added`)}catch(E){M.fail(`
+Failed to add component`),console.error(v.red(E)),process.exit(0)}});let L=await p({dependencies:Array.from(j),devDependencies:Array.from(q),shouldThrow:!0}),N=u();if(L?.dependencies?.length){let Z=h("Installing dependencies").start();await R3(()=>i(N,[N==="npm"?"install":"add",...Array.from(L.dependencies)]).catch(async(M)=>{if(M.message.includes("peer"))Z.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),Z.start("Installing dependencies with --legacy-peer-deps flag"),await i(N,[N==="npm"?"install":"add",...Array.from(L.dependencies),"--legacy-peer-deps"])}),{retries:1}),Z.succeed("Dependencies are installed")}if(L?.devDependencies?.length){let Z=h("Installing devDependencies").start();await R3(()=>i(N,[N==="npm"?"install":"add",...Array.from(L.devDependencies)]).catch(async(M)=>{if(M.message.includes("peer"))Z.warn("DevDependency conflict detected. Retrying with --legacy-peer-deps..."),Z.start("Installing devDependencies with --legacy-peer-deps flag"),await i(N,[N==="npm"?"install":"add",...Array.from(L.devDependencies),"--legacy-peer-deps"])}),{retries:1}),Z.succeed("DevDependencies are installed")}if(b.size&&!$?.overwrite)if(console.log(`
+Following files already exist in the directory.`),b.forEach((M)=>{console.log(v.green(`- ${A.relative(process.cwd(),M.path)}`))}),(await d({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let M=h("Overwriting files").start();b.forEach(async(R)=>{_.writeFileSync(R.path,R.code);let E=J.addSourceFileAtPath(A.resolve(R.path));E.getImportDeclarations().forEach((T)=>{let D=T.getModuleSpecifierValue();T.setModuleSpecifier(Y3(D,X?.aliasPrefix,$.path))}),await E.save()}),M.succeed("Files are overwritten"),process.exit(1)}else console.log(`Use ${v.cyan("--overwrite")} or ${v.cyan("-o")} to overwrite existing files, or refer to the documentation ${v.cyan("https://untitled.xyz/docs")} for manual installation. The rest of the files are added.`),process.exit(0)}import v3 from"async-retry";import I from"chalk";import{Command as e3}from"commander";import{execa as W3}from"execa";import U3 from"fast-glob";import H from"fs";import f from"ora";import W0 from"os";import*as K from"path";import l from"prompts";import{Project as z0}from"ts-morph";import t3 from"fast-glob";function N3(z){let W=t3.sync("**/**/theme.css",{onlyFiles:!0,absolute:!0,cwd:z,ignore:w});return W.length?W[0]:null}import t from"fs";import E3 from"path";function Z3(z,W){if(!t.existsSync(W))t.mkdirSync(W,{recursive:!0});let Q=t.readdirSync(z,{withFileTypes:!0});for(let Y of Q){let X=E3.join(z,Y.name),V=E3.join(W,Y.name);if(Y.isDirectory())Z3(X,V);else t.copyFileSync(X,V)}}import $3 from"chalk";import*as y from"fs";import*as e from"path";function q3(z){if(!y.existsSync(e.resolve(z)))console.log($3.red(`Error: CSS file not found at ${z}`)),process.exit(1);let W=y.readFileSync(e.resolve(z),"utf-8"),Q=/(--color-[a-zA-Z-]+-\d{1,3}):\s*(rgb\([^)]+\))/g,Y={},X;while((X=Q.exec(W))!==null)if(X[1]&&X[2])Y[X[1]]=X[2];return Y}function B3(z,W,Q){let Y=e.resolve(Q);if(!y.existsSync(Y)){console.log($3.red(`Error: CSS file not found at ${Y}`));return}let X=y.readFileSync(Y,"utf-8"),V=q3(Q),B={},b={};for(let[q,J]of Object.entries(V))if(q.startsWith(`--color-${z}-`)){let L=q.replace(`--color-${z}-`,"");B[L]=q}else if(q.startsWith(`--color-${W}-`)){let L=q.replace(`--color-${W}-`,"");b[L]=J}let j=!1;for(let[q,J]of Object.entries(B))if(b[q]){let L=b[q],N=new RegExp(`(${J}):\\s*rgb\\([^)]*\\);?`,"g");if(N.test(X))X=X.replace(N,`$1: ${L};`),j=!0;else console.log($3.yellow(`No match found for ${J}`))}if(j)y.writeFileSync(Y,X,"utf-8")}var __dirname="/Users/deebov/Developer/untitledui/react/packages/cli/commands",Q0=K.join(W0.homedir(),".untitledui"),F=K.join(Q0,"config.json"),A3="default",X0=["with-stripe","otp","magic-link"],x="",U={template:"",color:""};if(H.existsSync(F)){let z=JSON.parse(H.readFileSync(F,"utf-8"));U.license=z.license}var z3=(z)=>{if(z.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
+`),process.exit(1)},u3=new e3().name("init").description("initialize a new project").argument("[directory]").usage("[directory] [options]").helpOption("-h, --help","Display this help message.").option("-t, --template <starter-kit>","Specify a template for the project.").option("-c, --color <color-name>","Specify a color for the project.").option("-o, --overwrite","Overwrite existing files.",!1).option("-l, --license <license-key>","Add a license key to download the repository.").action(async(z,W)=>{if(z)x=z;if(W)U.color=W.color,U.template=W.template,U.overwrite=W.overwrite,U.license=W.license||U.license;try{await Y0(W)}catch(Q){console.error(I.red(Q))}});async function Y0(z){let W=process.cwd(),Q=H.existsSync(K.resolve(W,"package.json")),Y=K.resolve(K.join(__dirname,"../templates/default")),X=N3(Y),V=q3(X??""),B=Array.from(new Set(Object.keys(V).map((q)=>q?.split("--color-")?.[1]?.replace(/-\d{1,3}/,"")))),b=f().start(),j=await s(W);if(U.license){if(!await m(U.license))b.fail("Invalid license key"),process.exit(0);if(!H.existsSync(F)){let L=K.dirname(F);H.mkdirSync(L,{recursive:!0}),H.writeFileSync(F,JSON.stringify({license:U.license},null,2))}if(JSON.parse(H.readFileSync(F,"utf-8")).license!==U.license)H.writeFileSync(F,JSON.stringify({license:U.license},null,2))}if(!Q){if(b.stop(),!x){let q=await l({onState:z3,type:"text",name:"path",message:"What is your project named?",initial:"untitled-ui"});if(typeof q.path==="string")x=q.path.trim()}if(H.existsSync(K.resolve(x)))b.fail(I.red("Directory already exists!")),process.exit(1);if(!U.template){let q=await l({type:"select",name:"template",onState:z3,message:`Which ${I.cyan("starter kit")} would you like to use?`,choices:[{title:"default-template",value:A3},{title:"basic-form",value:"basic-form"},{title:"magic-link",value:"magic-link"},{title:"next-intl",value:"next-intl"},{title:"otp",value:"otp"},{title:"react-hook-form",value:"react-hook-form"},{title:"with-stripe",value:"with-stripe"}]});if(U.template=q.template,X0.includes(U.template)&&!U.license){let J=await l({type:"text",name:"license",onState:z3,message:`Enter the license key to download the ${I.cyan(U.template)} template:`});if(U.license=J.license,!await m(J.license))b.fail("Invalid license key"),process.exit(0)}}b.succeed("Template is selected: "+I.green(U.template))}else if(j?.framework==="other")b.fail("Unsupported project framework"),console.log(`Please refer to the documentation ${I.cyan("https://untitled.xyz/docs")} for supported frameworks or proceed with manual installation.`),process.exit(1);else b.succeed(I.yellow("Detected Next.js project, proceeding with the setup..."));if(!U.color){let q=await l({type:"select",name:"color",onState:z3,initial:z.color??"",message:`Which ${I.cyan("color")} would you like to use as the ${I.cyanBright("brand")} color?`,choices:B.map((J)=>({title:J,value:J}))});U.color=q.color}if(x&&!Q){let q=K.resolve(x);console.log(`
+Creating a new project in ${I.blue(x)}`);let J=f("Downloading and extracting the repository...").start();try{if(H.mkdirSync(q,{recursive:!0}),U.template===A3){let Z=K.resolve(K.join(__dirname,"../templates/",U.template));Z3(Z,q)}else await v3(()=>V3(q,{username:"a-peak-works",repo:"starter-kits",branch:"master",template:U.template,key:U.license}),{retries:2});J.succeed("Files are downloaded and extracted successfully!");let L=f({text:"Installing dependencies..."}).start(),N=U3.sync(["**/styles/theme.css"],{cwd:q,absolute:!0,onlyFiles:!0})[0];B3("brand",U.color,N??""),await v3(()=>W3("sh",["-c",`cd ${x} && ${u()} install && git init`]).catch(async(Z)=>{if(Z.message.includes("peer"))L.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),L.start("Installing dependencies with --legacy-peer-deps flag"),await W3("sh",["-c",`cd ${x} && ${u()==="npm"?"npm --legacy-peer-deps":u()} install && git init`])}),{retries:1}),L.succeed("Dependencies installed"),console.log(`
+Your project is ready, to get staretd run the following commands:
+
+ cd ${I.cyan(x)}
+ ${I.cyan(u())} run dev`),process.exit(1)}catch(L){if(J.fail(I.red(`
+Failed to download and extract the repository`)),L instanceof Error)console.error(L.message);else console.error(`
+`);H.rmdirSync(q,{recursive:!0}),process.exit(0)}}else{let q=new Set,J=a(W),L=K.resolve(K.join(__dirname,"../templates/default")),N=U3.sync(["**/{styles,plugins}/**","postcss.config.*"],{cwd:K.join(L,"src"),onlyFiles:!0,ignore:w.filter((G)=>!G.includes("public"))}),Z=await p({dependencies:["tailwindcss","tailwindcss-animate","@tailwindcss/typography","tailwindcss-react-aria-components","@designbycode/tailwindcss-mask-image"],devDependencies:["@tailwindcss/postcss","postcss"]});if(N.forEach((G)=>{let S=G.includes("postcss.config"),P=K.resolve(K.join(L,"src"),G),C=K.resolve(process.cwd(),S?G:`${j?.isSrcDir?"src":""}/${G}`);if(H.existsSync(C)){if(U?.overwrite)H.copyFileSync(P,C);else{let D3=H.readFileSync(C,"utf-8"),w3=H.readFileSync(P,"utf-8");if(D3!==w3)q.add({targetFile:C,sourceFile:P})}return}H.mkdirSync(K.dirname(C),{recursive:!0}),H.writeFileSync(C,""),H.copyFileSync(K.resolve(K.join(L,"src"),G),C)}),q.size&&!U?.overwrite)if(console.log(`
+`),b.fail("Following files already exist in the directory."),q.forEach((S)=>{console.log(`- ${I.green(S.targetFile)}`)}),(await l({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let S=f("Overwriting files").start();q.forEach((P)=>{H.copyFileSync(P.sourceFile,P.targetFile)}),S.succeed("Files are overwritten"),process.exit(1)}else console.log(`Use ${I.cyan("--overwrite")} or ${I.cyan("-o")} to overwrite existing files, or refer to the documentation ${I.cyan("https://untitled.xyz/docs")} for manual installation. The rest of the files are added.`),process.exit(0);if(J?.tailwindFile)console.log(`
+Tailwind config file exists in the project directory. You can add it to your globals.css as follows:`),console.log(`
+${I.cyan(`@config "../${j?.isSrcDir&&"../"}${K.relative(process.cwd(),J.tailwindFile)}";`)}
+`);let M=J?.layoutFile||J?.appFile||"",E=new z0({tsConfigFilePath:K.resolve(J?.tsConfig||"")}).addSourceFileAtPath(K.resolve(M)),T=["colors.css","globals.css","inter.css","text-styles.css","theme.css","typography.css"];E.getImportDeclarations().filter((G)=>T.includes(G.getModuleSpecifierValue())).forEach((G)=>G.remove());let D=K.relative(K.resolve(process.cwd(),`${j?.isSrcDir&&"src"}`),M).split("/").length;E.addImportDeclarations(N.filter((G)=>G.includes("styles")).map((G)=>({moduleSpecifier:`${j?.aliasPrefix?.stylesPrefix||j?.aliasPrefix?.srcPrefix||"../".repeat(D-1)}${j?.aliasPrefix?.stylesPrefix?G?.split("styles/")[1]:G}`}))),E.saveSync();let g=f(),O=U3.sync(["**/styles/theme.css"],{cwd:W,absolute:!0,onlyFiles:!0,ignore:w});if(!O?.length)return b.fail("Failed to copy theme.css file");if(B3("brand",U.color,O[0]??""),!Z)g.fail("Failed to get dependencies from package.json"),process.exit(1);g.start("Installing dependencies"),await W3(u(),[u()==="npm"?"install":"add",...Z.dependencies],{}),await W3(u(),[u()==="npm"?"install":"add","-D",...Z.devDependencies],{}),g.succeed("Dependencies installed"),b.succeed(I.green("Files are extracted successfully!")),console.log(`
+Your project is ready, you can now start adding components.`),process.exit(1)}}var K3={name:"untitledui",version:"0.1.3",main:"dist/index.mjs",description:"Untitled UI CLI",type:"module",publishConfig:{access:"public"},scripts:{test:'echo "Error: no test specified" && exit 1',dev:"bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=http://localhost:3000/api --watch",build:"bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=https://untitledui-docs.vercel.app/api","publish:npm":"bun run build && npm publish --access public",start:"node dist/index.js"},repository:{type:"git",url:"https://github.com/a-peak-works/untitledui-tailwind.git"},bugs:{url:"https://github.com/a-peak-works/untitledui-tailwind/issues"},homepage:"https://github.com/a-peak-works/untitledui-tailwind#readme",keywords:["untitled-ui","cli","tailwindcss","nextjs"],files:["dist","templates"],author:"",license:"MIT",bin:{untitledui:"dist/index.mjs"},exports:"./dist/index.mjs",dependencies:{"async-retry":"^1.3.3",chalk:"^5.4.1",commander:"^13.1.0",execa:"^7.0.0","fast-glob":"^3.3.3","node-fetch":"^3.3.2",ora:"^8.2.0",prettier:"^3.5.3",prompts:"^2.4.2",tar:"^7.4.3","ts-morph":"^25.0.1","tsconfig-paths":"^4.2.0","update-check":"^1.5.4"},devDependencies:{"@types/async-retry":"^1.4.9","@types/prompts":"^2.4.9","@types/tar":"^6.1.13","type-fest":"^4.37.0",typescript:"^5.8.2"}};process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));async function q0(){let z=new $0().name(K3.name).version(K3.version);z.addCommand(u3).addCommand(_3),z.parse()}q0();

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "untitledui",
-  "version": "0.1.2",
-  "main": "dist/index.js",
+  "version": "0.1.3",
+  "main": "dist/index.mjs",
   "description": "Untitled UI CLI",
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "bun build --entrypoints ./index.ts --outdir=dist --target=node --minify --packages=external --watch",
-    "build": "bun build --entrypoints ./index.ts --outdir=dist --target=node --minify --packages=external",
+    "dev": "bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=http://localhost:3000/api --watch",
+    "build": "bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=https://untitledui-docs.vercel.app/api",
     "publish:npm": "bun run build && npm publish --access public",
     "start": "node dist/index.js"
   },
@@ -35,15 +35,16 @@
   "author": "",
   "license": "MIT",
   "bin": {
-    "untitledui": "dist/index.js"
+    "untitledui": "dist/index.mjs"
   },
-  "exports": "./dist/index.js",
+  "exports": "./dist/index.mjs",
   "dependencies": {
     "async-retry": "^1.3.3",
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
-    "execa": "^9.5.2",
+    "execa": "^7.0.0",
     "fast-glob": "^3.3.3",
+    "node-fetch": "^3.3.2",
     "ora": "^8.2.0",
     "prettier": "^3.5.3",
     "prompts": "^2.4.2",
@@ -55,6 +56,7 @@
   "devDependencies": {
     "@types/async-retry": "^1.4.9",
     "@types/prompts": "^2.4.9",
+    "@types/tar": "^6.1.13",
     "type-fest": "^4.37.0",
     "typescript": "^5.8.2"
   }

package/templates/default/package.json

@@ -1,7 +1,6 @@
 {
-  "name": "basic-form",
+  "name": "default-template",
   "version": "0.1.0",
-  "repository": "https://github.com/a-peak-works/starter-kits.git",
   "author": "a-peak-works",
   "license": "MIT",
   "scripts": {
@@ -12,46 +11,46 @@
   },
   "dependencies": {
     "@designbycode/tailwindcss-mask-image": "^2.0.3",
-    "@react-aria/utils": "^3.27.0",
+    "@react-aria/utils": "^3.28.1",
     "@react-stately/utils": "^3.10.5",
-    "@tailwindcss/postcss": "^4.0.4",
+    "@tailwindcss/postcss": "^4.0.14",
     "@tailwindcss/typography": "^0.5.16",
     "@untitledui/icons": "^0.0.15",
     "input-otp": "^1.4.2",
     "motion": "^11.18.2",
-    "next": "15.0.3",
-    "next-themes": "^0.4.4",
+    "next": "^15.2.3",
+    "next-themes": "^0.4.6",
     "qr-code-styling": "^1.9.1",
     "react": "19.0.0",
-    "react-aria": "^3.37.0",
-    "react-aria-components": "^1.6.0",
+    "react-aria": "^3.38.1",
+    "react-aria-components": "^1.7.1",
     "react-dom": "19.0.0",
     "react-hotkeys-hook": "^4.6.1",
     "sonner": "^1.7.4",
-    "tailwind-merge": "^3.0.1",
-    "tailwindcss": "^4.0.4",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.14",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^3.0.0-nightly-fee532d6a-241217"
+    "tailwindcss-react-aria-components": "^2.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/node": "^20.17.17",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
-    "eslint": "^9.21.0",
+    "@types/node": "^22.13.10",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.27.0",
+    "@typescript-eslint/parser": "^8.27.0",
+    "eslint": "^9.22.0",
     "eslint-config-next": "15.0.3",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   }
 }

package/templates/default/src/app/home-screen.tsx

@@ -10,8 +10,8 @@ import Link from "next/link";
 import { toast } from "sonner";
 import { BadgeGroup } from "@/components/shared/badges/badge-groups";
 import Button from "@/components/shared/buttons/button";
-import { Form } from "@/components/shared/inputs/form/form";
-import { Input } from "@/components/shared/inputs/input";
+import { Form } from "@/components/shared/form/form";
+import { Input } from "@/components/shared/input";
 import { cx } from "@/components/utils";
 import Spiral from "../../public/marketing/spirals.webp";
 
@@ -19,7 +19,6 @@ const Header = dynamic(() => import("@/components/marketing/header-navigation/co
 
 export const HomeScreen = () => {
     const { systemTheme } = useTheme();
-    console.log(systemTheme);
 
     const onSubmit = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();

package/templates/default/src/app/layout.tsx

@@ -1,22 +1,14 @@
 import type { Metadata, Viewport } from "next";
-import localFont from "next/font/local";
+import { Inter } from "next/font/google";
 import { cx } from "@/components/utils";
 import { Theme } from "@/providers/theme";
 import "@/styles/globals.css";
 
-const geistSans = localFont({
-    src: "../fonts/GeistVF.woff",
-    variable: "--font-geist-sans",
-    weight: "100 900",
+const inter = Inter({
+    subsets: ["latin"],
     display: "swap",
+    variable: "--font-inter",
 });
-const geistMono = localFont({
-    src: "../fonts/GeistMonoVF.woff",
-    variable: "--font-geist-mono",
-    weight: "100 900",
-    display: "swap",
-});
-
 export const metadata: Metadata = {
     title: "Create Next App",
     description: "Generated by create next app",
@@ -34,7 +26,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-            <body className={cx(geistSans.variable, geistMono.variable, "bg-primary antialiased dark:dark-mode")}>
+            <body className={cx(inter.variable, "light-mode bg-primary antialiased dark:dark-mode")}>
                 <Theme>{children}</Theme>
             </body>
         </html>

package/templates/default/src/components/marketing/header-navigation/dropdown-header-navigation.tsx

@@ -42,7 +42,7 @@ export const DropdownMenuSimple = () => {
             <nav className="overflow-hidden rounded-2xl bg-primary py-2 shadow-xs ring-1 ring-border-secondary md:p-2 md:shadow-lg">
                 <ul className="flex flex-col gap-0.5">
                     {items.map(({ title, subtitle, href, Icon }) => (
-                        <li>
+                        <li key={href}>
                             <NavMenuItemLink icon={Icon} title={title} subtitle={subtitle} href={href} />
                         </li>
                     ))}

package/templates/default/src/components/shared/buttons/button.tsx

@@ -11,7 +11,7 @@ import { isReactComponent } from "@/components/utils/isReactComponent";
 export const styles = sortCx({
     common: {
         root: [
-            "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus:outline-2 focus:outline-offset-2",
+            "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2",
             // Disabled styles
             "disabled:cursor-not-allowed disabled:text-fg-disabled",
             // Icon styles
@@ -209,6 +209,7 @@ const Button = ({
     } else {
         props = {
             type: rest.type || "button",
+            isPending: loading,
             isDisabled: disabled,
             onPress: (event: PressEvent) => {
                 // @ts-expect-error FIX ME

package/templates/default/src/components/shared/dropdown/dropdown.tsx

@@ -13,10 +13,13 @@ import { Button as AriaButton, Header, Menu, MenuItem, MenuSection, MenuTrigger,
 import { cx } from "@/components/utils";
 
 interface DropdownItemProps extends MenuItemProps {
+    /** The label of the item to be displayed. */
     label?: string;
-    children?: ReactNode;
+    /** An addon to be displayed on the right side of the item. */
     addon?: string;
+    /** If true, the item will not have any styles. */
     unstyled?: boolean;
+    /** An icon to be displayed on the left side of the item. */
     icon?: FC<{ className?: string }>;
 }
 
@@ -28,36 +31,40 @@ const DropdownItem = ({ label, children, addon, icon: Icon, unstyled, ...props }
     return (
         <MenuItem
             {...props}
-            id={label}
-            textValue={label}
-            className={(values) =>
+            className={(state) =>
                 cx(
                     "group block cursor-pointer px-1.5 py-px outline-hidden",
-                    values.isDisabled && "cursor-not-allowed",
-                    typeof props.className === "function" ? props.className(values) : props.className,
+                    state.isDisabled && "cursor-not-allowed",
+                    typeof props.className === "function" ? props.className(state) : props.className,
                 )
             }
         >
-            {({ isDisabled, isFocused, isFocusVisible }) => (
+            {(state) => (
                 <div
                     className={cx(
                         "relative flex items-center rounded-md px-2.5 py-2 outline-focus-ring transition duration-100 ease-linear",
-                        !isDisabled && "group-hover:bg-primary_hover",
-                        isFocused && "bg-primary_hover",
-                        isFocusVisible && "outline-2 -outline-offset-2",
+                        !state.isDisabled && "group-hover:bg-primary_hover",
+                        state.isFocused && "bg-primary_hover",
+                        state.isFocusVisible && "outline-2 -outline-offset-2",
                     )}
                 >
-                    {Icon && <Icon className={cx("mr-2 size-4 shrink-0", isDisabled ? "text-fg-disabled" : "text-fg-quaternary")} aria-hidden="true" />}
+                    {Icon && <Icon className={cx("mr-2 size-4 shrink-0", state.isDisabled ? "text-fg-disabled" : "text-fg-quaternary")} aria-hidden="true" />}
 
-                    <span className={cx("grow truncate tt-sm-semi", isDisabled ? "text-disabled" : "text-secondary", isFocused && "text-secondary_hover")}>
-                        {label || children}
+                    <span
+                        className={cx(
+                            "grow truncate tt-sm-semi",
+                            state.isDisabled ? "text-disabled" : "text-secondary",
+                            state.isFocused && "text-secondary_hover",
+                        )}
+                    >
+                        {label || (typeof children === "function" ? children(state) : children)}
                     </span>
 
                     {addon && (
                         <span
                             className={cx(
                                 "ml-3 shrink-0 rounded px-1 py-px tt-xs-md ring-1 ring-border-secondary ring-inset",
-                                isDisabled ? "text-disabled" : "text-quaternary",
+                                state.isDisabled ? "text-disabled" : "text-quaternary",
                             )}
                         >
                             {addon}
@@ -74,10 +81,12 @@ interface DropdownMenuProps<T extends object> extends AriaMenuProps<T> {}
 const DropdownMenu = <T extends object>(props: DropdownMenuProps<T>) => {
     return (
         <Menu
-            selectionMode="single"
             disallowEmptySelection
+            selectionMode="single"
             {...props}
-            className={cx("h-min overflow-y-auto py-1 outline-hidden select-none", props.className)}
+            className={(state) =>
+                cx("h-min overflow-y-auto py-1 outline-hidden select-none", typeof props.className === "function" ? props.className(state) : props.className)
+            }
         />
     );
 };
@@ -93,9 +102,9 @@ const DropdownPopover = (props: DropdownPopoverProps) => {
                 cx(
                     "w-[248px] rounded-lg bg-primary shadow-lg ring-1 ring-border-secondary_alt will-change-transform",
                     state.isEntering &&
-                        "ease-out animate-in animation-duration-150 fade-in zoom-in-95 placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5",
+                        "duration-150 ease-out animate-in fade-in zoom-in-95 placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5",
                     state.isExiting &&
-                        "animation-duration-100 ease-in animate-out fade-out zoom-out-95 placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5",
+                        "duration-100 ease-in animate-out fade-out zoom-out-95 placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5",
                     typeof props.className === "function" ? props.className(state) : props.className,
                 )
             }

package/templates/default/src/components/shared/form/hook-form.tsx

@@ -0,0 +1,75 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { createContext, useContext, useId } from "react";
+import { Form as AriaForm } from "react-aria-components";
+import type { Control, FieldPath, FieldValues, UseControllerReturn, UseFormReturn } from "react-hook-form";
+import { FormProvider, useController, useFormContext } from "react-hook-form";
+
+interface FormProps<TFieldValues extends FieldValues = FieldValues> extends ComponentPropsWithoutRef<typeof AriaForm> {
+    form: UseFormReturn<TFieldValues>;
+    children: ReactNode;
+}
+
+interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    name: TName;
+    control: Control<TFieldValues>;
+    children: ReactNode | ((control: UseControllerReturn<TFieldValues, TName>) => ReactNode);
+}
+
+interface FormFieldContextValues<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    id: string;
+    name: TName;
+    control?: UseControllerReturn<TFieldValues, TName>;
+}
+
+const FormFieldContext = createContext<FormFieldContextValues>({} as FormFieldContextValues);
+
+export const useFormFieldContext = () => {
+    const context = useContext(FormFieldContext);
+    const { getFieldState, formState } = useFormContext();
+    const fieldState = getFieldState(context.name, formState);
+
+    if (!context) {
+        throw new Error("The 'useFormContext' hook must be used within a '<FormField />'");
+    }
+
+    return { ...context, ...fieldState };
+};
+
+export const HookForm = <TFieldValues extends FieldValues = FieldValues>({ form, ...props }: FormProps<TFieldValues>) => {
+    return (
+        <FormProvider {...form}>
+            <AriaForm {...props} />
+        </FormProvider>
+    );
+};
+
+HookForm.displayName = "HookForm";
+
+export const FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+    children,
+    ...props
+}: FormFieldProps<TFieldValues, TName>) => {
+    const id = "form-item-" + useId();
+    const control = useController(props);
+    const withValidationBehavior = {
+        ...control,
+        field: {
+            ...control.field,
+            validationBehavior: "aria",
+        },
+    };
+
+    return (
+        <FormFieldContext.Provider
+            value={{
+                id,
+                name: props.name,
+                control: control as UseControllerReturn<FieldValues, TName>,
+            }}
+        >
+            {children && (typeof children === "function" ? children(withValidationBehavior) : children)}
+        </FormFieldContext.Provider>
+    );
+};
+
+FormField.displayName = "FormField";

package/templates/default/src/components/shared/{inputs/input → input}/index.tsx

@@ -4,8 +4,8 @@ import type { ComponentType, HTMLAttributes, ReactNode, Ref } from "react";
 import { HelpCircle, InfoCircle } from "@untitledui/icons";
 import type { TextFieldProps as AriaTextFieldProps } from "react-aria-components";
 import { Input as AriaInput, TextField as AriaTextField, Group } from "react-aria-components";
-import HintText from "@/components/shared/inputs/hint-text";
-import Label from "@/components/shared/inputs/label";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
 import { Tooltip, TooltipTrigger } from "@/components/shared/tooltips/tooltips";
 import { cx, sortCx } from "@/components/utils";
 
@@ -130,7 +130,7 @@ export const InputBase = ({ size = "sm", placeholder, icon: Icon, isDisabled, is
                         )}
                         aria-hidden="true"
                     >
-                        {shortcut || "⌘K"}
+                        {typeof shortcut === "string" ? shortcut : "⌘K"}
                     </span>
                 </div>
             )}

package/templates/default/src/components/shared/{inputs/input → input}/input-payment.tsx

@@ -3,10 +3,10 @@
 import React, { useState } from "react";
 import { TextField } from "react-aria-components";
 import { AmexIcon, DiscoverIcon, MastercardIcon, UnionPayIcon, VisaIcon } from "@/components/foundations/payment-icons";
-import HintText from "@/components/shared/inputs/hint-text";
-import type { InputBaseProps } from "@/components/shared/inputs/input";
-import { InputBase } from "@/components/shared/inputs/input";
-import Label from "@/components/shared/inputs/label";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
 import { cx } from "@/components/utils";
 
 const cardTypes = [

package/templates/default/src/components/shared/{inputs/input → input}/input-with-button.tsx

@@ -6,10 +6,10 @@ import { Copy01 } from "@untitledui/icons";
 import { TextField } from "react-aria-components";
 import type { CommonProps } from "@/components/shared/buttons/button";
 import Button from "@/components/shared/buttons/button";
-import HintText from "@/components/shared/inputs/hint-text";
-import type { InputBaseProps } from "@/components/shared/inputs/input";
-import { InputBase } from "@/components/shared/inputs/input";
-import Label from "@/components/shared/inputs/label";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
 import { cx } from "@/components/utils";
 
 interface InputWithButtonProps extends Omit<InputBaseProps, "icon"> {

package/templates/default/src/components/shared/{inputs/input → input}/input-with-dropdown.tsx

@@ -4,10 +4,10 @@ import React from "react";
 import { ChevronDown } from "@untitledui/icons";
 import type { Key } from "react-aria-components";
 import { TextField } from "react-aria-components";
-import HintText from "@/components/shared/inputs/hint-text";
-import type { InputBaseProps } from "@/components/shared/inputs/input";
-import { InputBase } from "@/components/shared/inputs/input";
-import Label from "@/components/shared/inputs/label";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
 import { cx, sortCx } from "@/components/utils";
 
 interface SelectorComponentProps {

package/templates/default/src/components/shared/{inputs/input → input}/input-with-prefix.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import type { HTMLAttributes } from "react";
-import HintText from "@/components/shared/inputs/hint-text";
-import type { InputBaseProps } from "@/components/shared/inputs/input";
-import { InputBase, TextField } from "@/components/shared/inputs/input";
-import Label from "@/components/shared/inputs/label";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase, TextField } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
 import { cx } from "@/components/utils";
 
 interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {

package/templates/default/src/components/shared/progress-indicators/progress-indicators.tsx

@@ -61,7 +61,7 @@ export const ProgressBarTextTopFloating = ({ value, min = 0, max = 100, valueFor
             <ProgressBar min={min} max={max} value={value} />
             <div
                 style={{ left: `${percentage}%` }}
-                className="absolute -top-2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-border-secondary_alt"
+                className="absolute -top-2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary_alt px-3 py-2 ring-1 shadow-lg ring-border-secondary_alt"
             >
                 <div className="tt-xs-semi text-secondary tabular-nums">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
             </div>
@@ -77,7 +77,7 @@ export const ProgressBarTextBottomFloating = ({ value, min = 0, max = 100, value
             <ProgressBar min={min} max={max} value={value} />
             <div
                 style={{ left: `${percentage}%` }}
-                className="absolute -bottom-2 -translate-x-1/2 translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-border-secondary_alt"
+                className="absolute -bottom-2 -translate-x-1/2 translate-y-full rounded-lg bg-primary_alt px-3 py-2 ring-1 shadow-lg ring-border-secondary_alt"
             >
                 <div className="tt-xs-semi text-secondary">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
             </div>

package/templates/default/src/components/shared/{input-dropdown → select}/combobox.tsx

@@ -15,21 +15,21 @@ import {
 import { useHotkeys } from "react-hotkeys-hook";
 import { cx } from "@/components/utils";
 import { useResizeObserver } from "@/hooks/use-resize-observer";
-import HintText from "../inputs/hint-text";
-import Label from "../inputs/label";
-import { type CommonProps, SelectContext, type SelectValueType, sizes } from "./input-dropdown";
+import HintText from "../input/hint-text";
+import Label from "../input/label";
 import { ComboBoxTagsValue } from "./multi-select";
 import { Popover } from "./popover";
+import { type CommonProps, SelectContext, type SelectItemType, sizes } from "./select";
 
 type ComboBoxTypes = "search" | "tags";
 
-interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectValueType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
     shortcut?: boolean;
     type?: ComboBoxTypes;
-    items?: SelectValueType[];
+    items?: SelectItemType[];
     popoverClassName?: string;
     shortcutClassName?: string;
-    children: AriaListBoxProps<SelectValueType>["children"];
+    children: AriaListBoxProps<SelectItemType>["children"];
 }
 
 interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
@@ -109,8 +109,6 @@ export const ComboBox = ({ type = "search", placeholder = "Select", shortcut = t
     const placeholderRef = useRef<HTMLDivElement>(null);
     const [popoverWidth, setPopoverWidth] = useState("");
 
-    const itemsWithId = items?.map((item) => ({ ...item, id: item.value }));
-
     // Resize observer for popover width
     const onResize = useCallback(() => {
         if (!placeholderRef.current) return;
@@ -149,7 +147,9 @@ export const ComboBox = ({ type = "search", placeholder = "Select", shortcut = t
                         />
 
                         <Popover size={size} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={rest.popoverClassName}>
-                            <AriaListBox {...{ items: itemsWithId, children }} className="size-full outline-hidden" />
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
                         </Popover>
 
                         {rest.hint && <HintText isInvalid={state.isInvalid}>{rest.hint}</HintText>}