untitledui 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -1,19 +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(`
+import{Command as $0}from"commander";import N3 from"async-retry";import v from"chalk";import{Command as s3}from"commander";import{execa as p}from"execa";import*as E from"fs";import g from"ora";import n3 from"os";import*as u from"path";import h from"prompts";import{Project as a3}from"ts-morph";import V3 from"node-fetch";import{posix as w3,sep as x3}from"path";import{Readable as T3,pipeline as y3}from"stream";import{x as S3}from"tar";import{promisify as C3}from"util";var k3=C3(y3);async function L3(z,W){try{let Q=await F3(W);await k3(Q,S3({cwd:z,strip:2,filter:(Y)=>{return Y.split(x3).join(w3.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 F3(z){try{let Q=await V3("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 T3.from(Q.body)}catch(Q){throw new Error(`Error downloading tarball: ${Q instanceof Error?Q.message:Q}`)}}async function P(z){let W=`https://untitledui-docs.vercel.app/api/validate-key?key=${z}`;try{return(await V3(W)).status===200}catch{return!1}}import O3 from"node-fetch";async function z3(z,W,Q){try{return await(await O3("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 J3 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 J3(Q)).json();if(!X?.components?.length)return null;return X}catch(Y){return console.error(Y),null}}async function G3(z=""){let W=`https://untitledui-docs.vercel.app/api/components/list?key=${z}`;try{let Y=await(await J3(W)).json();if(!Y?.types?.length)return null;return Y}catch(Q){return console.error(Q),null}}import f3 from"fast-glob";import*as I3 from"fs";import*as Q3 from"path";import{Project as l3}from"ts-morph";import{loadConfig as j3}from"tsconfig-paths";import P3 from"prettier";async function H3(z,W="typescript"){try{return await P3.format(z,{parser:W})}catch(Q){return console.error("Error formatting with Prettier:",Q),z}}import r from"fast-glob";import*as l from"fs";import*as c from"path";import{loadConfig as g3}from"tsconfig-paths";var S=["**/node_modules/**",".next","public","dist","build"];async function s(z){let W=l.existsSync(c.resolve(z,"src")),Q=l.existsSync(c.resolve(z,`${W?"src/":""}app`)),[Y,X,V,Z]=await Promise.all([r.glob("**/{next,vite,astro}.config.*|gatsby-config.*",{cwd:z,deep:2,ignore:S}),h3(z),m3(z),d3(z)]),L={framework:"other",isTsx:X,tailwindFile:V||null,aliasPrefix:Z,isSrcDir:W,isUsingAppDir:Q};if(Y.find((B)=>B.startsWith("next.config."))?.length)return L.framework=Q?"next-app":"next-pages",L;else if(Y?.length||l.existsSync(c.resolve(z,"package.json")))return L.framework="other",L;return null}async function h3(z){return(await r.glob("tsconfig.*",{cwd:z,deep:2,ignore:S})).length>0}async function m3(z){let W=await r.glob("tailwind.config.*",{cwd:z,deep:2,ignore:S});if(!W.length)return null;return W[0]}async function d3(z){let W=await g3(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((Z)=>Z.includes("/app/*")))Q.appPrefix=V;else if(X.some((Z)=>Z.includes("/components/*")))Q.componentsPrefix=V;else if(X.some((Z)=>Z.includes("/utils/*")))Q.utilsPrefix=V;else if(X.some((Z)=>Z.includes("/styles/*")))Q.stylesPrefix=V;else if(X.some((Z)=>Z.includes("./*")||Z.includes("/src/*")))Q.srcPrefix=V}return Q||null}function n(z){let W=j3(z),Q=f3.sync(["tailwind.config.*","**/globals.css","**/{layout,_app}.tsx","package.json"],{cwd:z,deep:4,absolute:!0,onlyFiles:!0,ignore:S}),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 X3(z,W,Q){if(z.includes("components")){if(W?.componentsPrefix)return z.replace(/@\/components\//,Q3.join(W?.componentsPrefix,Q?Q.replace(/components\//,""):"","/"));if(Q)return z.replace(/@\/components\//,Q3.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 R3(z,W,Q="@/*"){let Y=await j3(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 I3.promises.readFile(Y.configFileAbsolutePath,"utf-8"),Z;if(!V.includes('"paths":'))Z=V.replace(/"compilerOptions":\s*{/,`"compilerOptions": { 
+                "paths": ${JSON.stringify(Y.paths)},`);else Z=V.replace(/"paths":\s*{[^}]*}/,`"paths": ${JSON.stringify(Y.paths)}`);let L=new l3,B=await H3(Z,"json");return L.createSourceFile(Y.configFileAbsolutePath,B,{overwrite:!0}),await L.save(),X}return X||null}import c3 from"node-fetch";async function r3(){try{return await(await c3("https://untitledui-docs.vercel.app/api/get-pkg")).json()}catch(W){return console.error(W),null}}async function a({dependencies:z,devDependencies:W,shouldThrow:Q=!0}){let Y=await r3();if(!Y)if(Q)throw new Error("package.json not found");else return null;let X=[],V=[];if(z)z.forEach((Z)=>{if(Y.dependencies?.[Z])X.push(`${Z}@${Y.dependencies[Z]}`)});if(W)W.forEach((Z)=>{if(Y.devDependencies?.[Z])V.push(`${Z}@${Y.devDependencies[Z]}`)});return{dependencies:X,devDependencies:V}}function D(){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 p3=u.join(n3.homedir(),".untitledui"),F=u.join(p3,"config.json"),$={components:[],path:"",type:void 0,license:""};if(E.existsSync(F)){let z=JSON.parse(E.readFileSync(F,"utf-8"));$.license=z.license}var i=(z)=>{if(z.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
+`),process.exit(1)},E3=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 i3($)}catch(Q){console.error(v.red(Q))}});async function i3(z){let W=g().start(),Q=process.cwd();if(!E.existsSync(u.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 q=await P($.license);if(console.log(q,$),!q)W.fail("Invalid license key"),process.exit(0);if(!E.existsSync(F)){let H=u.dirname(F);E.mkdirSync(H,{recursive:!0}),E.writeFileSync(F,JSON.stringify({license:$.license},null,2))}if(JSON.parse(E.readFileSync(F,"utf-8")).license!==$.license)E.writeFileSync(F,JSON.stringify({license:$.license},null,2))}W.stop();let V=[];if($.components.length){let q=await z3($.type,$.components,$.license);if(q?.pro?.length)q?.pro?.forEach((J)=>console.log(`The ${v.yellowBright(J.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(!q?.components.length)console.log("No components found"),process.exit(0);V.push(...q.components)}if(!$?.type&&!$?.components.length){let q=await G3($.license);if(!q)console.log("No component types found"),process.exit(0);let J=await h({type:"select",name:"type",onState:i,message:`What type of ${v.cyan("component")} are you adding?`,choices:q?.types.map((H)=>({title:H,value:H}))});$.type=J.type}if(!$?.path){let q=await h({type:"text",name:"path",onState:i,message:`Where would you like to add the ${v.cyan("components")}?`,initial:"components"});$.path=q.path}if(X&&!X?.aliasPrefix){let q=/^[^*"]+\/\*\s*$/,J=await h({type:"text",name:"aliasPrefix",onState:i,initial:"@/*",message:`What is the ${v.cyan("import alias")} for your project?`,validate:(H)=>q.test(H)?!0:"Import alias must follow the pattern <prefix>/*"});X.aliasPrefix=await R3(Q,X?.isSrcDir,J?.aliasPrefix)}if(!$?.components.length){let q=await M3($?.type,$.license);if(!q)console.log("No components found"),process.exit(0);let J=await h({type:"multiselect",name:"components",onState:i,message:`Which ${v.cyan("components")} would you like to add?`,choices:q?.components?.map((H)=>({title:H||"example",value:H||"example",selected:$.components.includes(H)})),instructions:!1,hint:"- Space to select. Return to submit"});if($.components=J.components,!J.components||J.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 Z=n(Q),L=new Set,B=new Set,b=new Set,M=new a3({tsConfigFilePath:Z?.tsConfig});if($.type&&$.components.length){let q=await z3($.type,$.components,$.license);if(!q?.components.length)console.log("No components found"),process.exit(0);V.push(...q.components)}V.forEach((q)=>{let J=g(`Adding ${q.name}`).start(),H=q.files;q.dependencies.forEach((_)=>B.add(_)),q.devDependencies.forEach((_)=>b.add(_));try{H?.forEach(async({path:_,code:x})=>{let A=u.join(process.cwd(),`${X?.isSrcDir&&"src"}`,_.replace(/components\//,$.path+"/")),f=u.dirname(A);if(E.existsSync(A)&&!$.overwrite){if(E.readFileSync(A,"utf-8")!==x)L.add({code:x,path:A})}else{E.mkdirSync(f,{recursive:!0}),E.writeFileSync(A,x);let G=M.addSourceFileAtPath(u.resolve(A));G.getImportDeclarations().forEach((T)=>{let y=T.getModuleSpecifierValue();T.setModuleSpecifier(X3(y,X?.aliasPrefix,$.path))}),await G.save()}}),J.succeed(`${v.green(q.name)} is added`)}catch(_){J.fail(`
+Failed to add component`),console.error(v.red(_)),process.exit(0)}});let N=await a({dependencies:Array.from(B),devDependencies:Array.from(b),shouldThrow:!0}),j=D();if(N?.dependencies?.length){let q=g("Installing dependencies").start();await N3(()=>p(j,[j==="npm"?"install":"add",...Array.from(N.dependencies)]).catch(async(J)=>{if(J.message.includes("peer"))q.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),q.start("Installing dependencies with --legacy-peer-deps flag"),await p(j,[j==="npm"?"install":"add",...Array.from(N.dependencies),"--legacy-peer-deps"])}),{retries:1}),q.succeed("Dependencies are installed")}if(N?.devDependencies?.length){let q=g("Installing devDependencies").start();await N3(()=>p(j,[j==="npm"?"install":"add",...Array.from(N.devDependencies)]).catch(async(J)=>{if(J.message.includes("peer"))q.warn("DevDependency conflict detected. Retrying with --legacy-peer-deps..."),q.start("Installing devDependencies with --legacy-peer-deps flag"),await p(j,[j==="npm"?"install":"add",...Array.from(N.devDependencies),"--legacy-peer-deps"])}),{retries:1}),q.succeed("DevDependencies are installed")}if(L.size&&!$?.overwrite)if(console.log(`
+Following files already exist in the directory.`),L.forEach((J)=>{console.log(v.green(`- ${u.relative(process.cwd(),J.path)}`))}),(await h({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let J=g("Overwriting files").start();L.forEach(async(H)=>{E.writeFileSync(H.path,H.code);let _=M.addSourceFileAtPath(u.resolve(H.path));_.getImportDeclarations().forEach((x)=>{let A=x.getModuleSpecifierValue();x.setModuleSpecifier(X3(A,X?.aliasPrefix,$.path))}),await _.save()}),J.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 u3 from"async-retry";import R from"chalk";import{Command as o3}from"commander";import{execa as e}from"execa";import B3 from"fast-glob";import I from"fs";import m from"ora";import t3 from"os";import*as K from"path";import d from"prompts";import{Project as e3}from"ts-morph";import{fileURLToPath as W0}from"url";import o from"fs";import v3 from"path";function Y3(z,W){if(!o.existsSync(W))o.mkdirSync(W,{recursive:!0});let Q=o.readdirSync(z,{withFileTypes:!0});for(let Y of Q){let X=v3.join(z,Y.name),V=v3.join(W,Y.name);if(Y.isDirectory())Y3(X,V);else o.copyFileSync(X,V)}}import Z3 from"chalk";import*as C from"fs";import*as t from"path";function $3(z){if(!C.existsSync(t.resolve(z)))console.log(Z3.red(`Error: CSS file not found at ${z}`)),process.exit(1);let W=C.readFileSync(t.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 q3(z,W,Q){let Y=t.resolve(Q);if(!C.existsSync(Y)){console.log(Z3.red(`Error: CSS file not found at ${Y}`));return}let X=C.readFileSync(Y,"utf-8"),V=$3(Q),Z={},L={};for(let[b,M]of Object.entries(V))if(b.startsWith(`--color-${z}-`)){let N=b.replace(`--color-${z}-`,"");Z[N]=b}else if(b.startsWith(`--color-${W}-`)){let N=b.replace(`--color-${W}-`,"");L[N]=M}let B=!1;for(let[b,M]of Object.entries(Z))if(L[b]){let N=L[b],j=new RegExp(`(${M}):\\s*rgb\\([^)]*\\);?`,"g");if(j.test(X))X=X.replace(j,`$1: ${N};`),B=!0;else console.log(Z3.yellow(`No match found for ${M}`))}if(B)C.writeFileSync(Y,X,"utf-8")}var z0=W0(import.meta.url),K3=K.dirname(z0),Q0=K.join(t3.homedir(),".untitledui"),O=K.join(Q0,"config.json"),b3="default",X0=["with-stripe","otp","magic-link"],w="",U={template:"",color:""};if(I.existsSync(O)){let z=JSON.parse(I.readFileSync(O,"utf-8"));U.license=z.license}var W3=(z)=>{if(z.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
+`),process.exit(1)},_3=new o3().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)w=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(R.red(Q))}});async function Y0(z){let W=process.cwd(),Q=I.existsSync(K.resolve(W,"package.json")),Y=K.resolve(K.join(K3,"../templates/default","src/styles/theme.css")),X=$3(Y??""),V=Array.from(new Set(Object.keys(X).map((B)=>B?.split("--color-")?.[1]?.replace(/-\d{1,3}/,"")))),Z=m().start(),L=await s(W);if(U.license){if(!await P(U.license))Z.fail("Invalid license key"),process.exit(0);if(!I.existsSync(O)){let M=K.dirname(O);I.mkdirSync(M,{recursive:!0}),I.writeFileSync(O,JSON.stringify({license:U.license},null,2))}if(JSON.parse(I.readFileSync(O,"utf-8")).license!==U.license)I.writeFileSync(O,JSON.stringify({license:U.license},null,2))}if(!Q){if(Z.stop(),!w){let B=await d({onState:W3,type:"text",name:"path",message:"What is your project named?",initial:"untitled-ui"});if(typeof B.path==="string")w=B.path.trim()}if(I.existsSync(K.resolve(K.join(W,w))))Z.fail(R.red("Directory already exists!")),process.exit(1);if(!U.template){let B=await d({type:"select",name:"template",onState:W3,message:`Which ${R.cyan("starter kit")} would you like to use?`,choices:[{title:"default-template",value:b3},{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=B.template,X0.includes(U.template)&&!U.license){let b=await d({type:"text",name:"license",onState:W3,message:`Enter the license key to download the ${R.cyan(U.template)} template:`});if(U.license=b.license,!await P(b.license))Z.fail("Invalid license key"),process.exit(0)}}Z.succeed("Template is selected: "+R.green(U.template))}else if(L?.framework==="other")Z.fail("Unsupported project framework"),console.log(`Please refer to the documentation ${R.cyan("https://untitled.xyz/docs")} for supported frameworks or proceed with manual installation.`),process.exit(1);else Z.succeed(R.yellow("Detected Next.js project, proceeding with the setup..."));if(!U.color){let B=await d({type:"select",name:"color",onState:W3,initial:z.color??"",message:`Which ${R.cyan("color")} would you like to use as the ${R.cyanBright("brand")} color?`,choices:V.map((b)=>({title:b,value:b}))});U.color=B.color}if(w&&!Q){let B=K.resolve(w);console.log(`
+Creating a new project in ${R.blue(w)}`);let b=m("Downloading and extracting the repository...").start();try{if(I.mkdirSync(B,{recursive:!0}),U.template===b3){let j=K.resolve(K.join(K3,"../templates/",b3));Y3(j,B)}else await u3(()=>L3(B,{username:"a-peak-works",repo:"starter-kits",branch:"master",template:U.template,key:U.license}),{retries:2});b.succeed("Files are downloaded and extracted successfully!");let M=m({text:"Installing dependencies..."}).start(),N=B3.sync(["**/styles/theme.css"],{cwd:B,absolute:!0,onlyFiles:!0})[0];q3("brand",U.color,N??""),await u3(()=>e("sh",["-c",`cd ${w} && ${D()} install && git init`]).catch(async(j)=>{if(j.message.includes("peer"))M.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),M.start("Installing dependencies with --legacy-peer-deps flag"),await e("sh",["-c",`cd ${w} && ${D()==="npm"?"npm --legacy-peer-deps":D()} install && git init`])}),{retries:1}),M.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(`
+ cd ${R.cyan(w)}
+ ${R.cyan(D())} run dev`),process.exit(1)}catch(M){if(b.fail(R.red(`
+Failed to download and extract the repository`)),M instanceof Error)console.error(M.message);else console.error(`
+`);I.rmdirSync(B,{recursive:!0}),process.exit(0)}}else{let B=new Set,b=n(W),M=K.resolve(K.join(K3,"../templates/default")),N=B3.sync(["**/{styles,plugins}/**","postcss.config.*"],{cwd:K.join(M,"src"),onlyFiles:!0,ignore:S.filter((G)=>!G.includes("public"))}),j=await a({dependencies:["tailwindcss","tailwindcss-animate","@tailwindcss/typography","tailwindcss-react-aria-components","@designbycode/tailwindcss-mask-image"],devDependencies:["@tailwindcss/postcss","postcss"]});if(N.forEach((G)=>{let T=G.includes("postcss.config"),y=K.resolve(K.join(M,"src"),G),k=K.resolve(process.cwd(),T?G:`${L?.isSrcDir?"src":""}/${G}`);if(I.existsSync(k)){if(U?.overwrite)I.copyFileSync(y,k);else{let A3=I.readFileSync(k,"utf-8"),D3=I.readFileSync(y,"utf-8");if(A3!==D3)B.add({targetFile:k,sourceFile:y})}return}I.mkdirSync(K.dirname(k),{recursive:!0}),I.writeFileSync(k,""),I.copyFileSync(K.resolve(K.join(M,"src"),G),k)}),B.size&&!U?.overwrite)if(console.log(`
+`),Z.fail("Following files already exist in the directory."),B.forEach((T)=>{console.log(`- ${R.green(T.targetFile)}`)}),(await d({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let T=m("Overwriting files").start();B.forEach((y)=>{I.copyFileSync(y.sourceFile,y.targetFile)}),T.succeed("Files are overwritten"),process.exit(1)}else console.log(`Use ${R.cyan("--overwrite")} or ${R.cyan("-o")} to overwrite existing files, or refer to the documentation ${R.cyan("https://untitled.xyz/docs")} for manual installation. The rest of the files are added.`),process.exit(0);if(b?.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();
+${R.cyan(`@config "../${L?.isSrcDir&&"../"}${K.relative(process.cwd(),b.tailwindFile)}";`)}
+`);let q=b?.layoutFile||b?.appFile||"",H=new e3({tsConfigFilePath:K.resolve(b?.tsConfig||"")}).addSourceFileAtPath(K.resolve(q)),_=["colors.css","globals.css","inter.css","text-styles.css","theme.css","typography.css"];H.getImportDeclarations().filter((G)=>_.includes(G.getModuleSpecifierValue())).forEach((G)=>G.remove());let x=K.relative(K.resolve(process.cwd(),`${L?.isSrcDir&&"src"}`),q).split("/").length;H.addImportDeclarations(N.filter((G)=>G.includes("styles")).map((G)=>({moduleSpecifier:`${L?.aliasPrefix?.stylesPrefix||L?.aliasPrefix?.srcPrefix||"../".repeat(x-1)}${L?.aliasPrefix?.stylesPrefix?G?.split("styles/")[1]:G}`}))),H.saveSync();let A=m(),f=B3.sync(["**/styles/theme.css"],{cwd:W,absolute:!0,onlyFiles:!0,ignore:S});if(!f?.length)return Z.fail("Failed to copy theme.css file");if(q3("brand",U.color,f[0]??""),!j)A.fail("Failed to get dependencies from package.json"),process.exit(1);A.start("Installing dependencies"),await e(D(),[D()==="npm"?"install":"add",...j.dependencies],{}),await e(D(),[D()==="npm"?"install":"add","-D",...j.devDependencies],{}),A.succeed("Dependencies installed"),Z.succeed(R.green("Files are extracted successfully!")),console.log(`
+Your project is ready, you can now start adding components.`),process.exit(1)}}var U3={name:"untitledui",version:"0.1.5",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(U3.name).version(U3.version);z.addCommand(_3).addCommand(E3),z.parse()}q0();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitledui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "dist/index.mjs",
   "description": "Untitled UI CLI",
   "type": "module",

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

@@ -12,7 +12,7 @@ import { BadgeGroup } from "@/components/shared/badges/badge-groups";
 import Button from "@/components/shared/buttons/button";
 import { Form } from "@/components/shared/form/form";
 import { Input } from "@/components/shared/input";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import Spiral from "../../public/marketing/spirals.webp";
 
 const Header = dynamic(() => import("@/components/marketing/header-navigation/components/header").then((mod) => mod.Header));

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

@@ -1,6 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { Theme } from "@/providers/theme";
 import "@/styles/globals.css";
 
@@ -26,7 +26,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-            <body className={cx(inter.variable, "light-mode bg-primary antialiased dark:dark-mode")}>
+            <body className={cx(inter.variable, "light-mode dark:dark-mode bg-primary antialiased")}>
                 <Theme>{children}</Theme>
             </body>
         </html>

package/templates/default/src/components/foundations/featured-icon/featured-icons.tsx

@@ -1,6 +1,6 @@
 import type { FC, ReactNode, Ref } from "react";
 import { isValidElement } from "react";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 import { isReactComponent } from "@/components/utils/isReactComponent";
 
 const iconsSizes = {

package/templates/default/src/components/marketing/header-navigation/base-components/nav-menu-item.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { type FC, type ReactNode, isValidElement } from "react";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { isReactComponent } from "@/components/utils/isReactComponent";
 
 interface NavMenuItemLinkProps {

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

@@ -7,7 +7,7 @@ import { Button as AriaButton, Dialog, DialogTrigger, Popover } from "react-aria
 import UntitledLogo from "@/components/foundations/logo/UntitledLogo";
 import UntitledLogoMinimal from "@/components/foundations/logo/UntitledLogoMinimal";
 import Button from "@/components/shared/buttons/button";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { DropdownMenuSimple } from "../dropdown-header-navigation";
 
 type HeaderNavItem = {

package/templates/default/src/components/shared/avatar/avatar-label-group.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { type ReactNode } from "react";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import Avatar, { type AvatarProps } from "./avatar";
 
 const styles = {

package/templates/default/src/components/shared/avatar/avatar-profile-photo.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { User01 } from "@untitledui/icons";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { type AvatarProps } from "./avatar";
 import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
 

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

@@ -2,7 +2,7 @@
 
 import { type FC, type ReactNode, useState } from "react";
 import { User01 } from "@untitledui/icons";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
 
 type AvatarSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

package/templates/default/src/components/shared/avatar/base-components/avatar-add-button.tsx

@@ -2,7 +2,7 @@
 
 import { Plus } from "@untitledui/icons";
 import type { ButtonProps } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { Tooltip, TooltipTrigger } from "../../tooltips/tooltips";
 
 const sizes = {

package/templates/default/src/components/shared/avatar/base-components/avatar-company-icon.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 const sizes = {
     xs: "size-2",

package/templates/default/src/components/shared/avatar/base-components/avatar-online-indicator.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 const sizes = {
     xs: "size-1.5",

package/templates/default/src/components/shared/avatar/base-components/verified-tick.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 const sizes = {
     xs: { root: "size-2.5", tick: "size-[4.38px" },

package/templates/default/src/components/shared/badges/badge-groups.tsx

@@ -3,7 +3,7 @@
 import type { FC, ReactNode } from "react";
 import { isValidElement } from "react";
 import { ArrowRight } from "@untitledui/icons";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 import { isReactComponent } from "@/components/utils/isReactComponent";
 
 type Size = "md" | "lg";

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

@@ -3,7 +3,7 @@
 import type { MouseEventHandler, ReactNode } from "react";
 import { X as CloseX } from "@untitledui/icons";
 import Dot from "@/components/foundations/dot-icon";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import type { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from "./badge-types";
 import { badgeTypes } from "./badge-types";
 

package/templates/default/src/components/shared/button-group/button-group.tsx

@@ -2,7 +2,7 @@
 
 import { type FC, type PropsWithChildren, type ReactNode, type RefAttributes, createContext, isValidElement, useContext } from "react";
 import { ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps } from "react-aria-components";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 import { isReactComponent } from "@/components/utils/isReactComponent";
 
 export const styles = sortCx({

package/templates/default/src/components/shared/buttons/app-store-buttons-outline.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { AnchorHTMLAttributes } from "react";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 export const GooglePlayButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
     return (

package/templates/default/src/components/shared/buttons/app-store-buttons.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { AnchorHTMLAttributes } from "react";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 export const GooglePlayButton = ({ size = "md", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
     return (

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

@@ -4,7 +4,7 @@ import type { DetailedHTMLProps, FC, HTMLAttributes, ReactNode } from "react";
 import React, { isValidElement } from "react";
 import type { ButtonProps as AriaButtonProps } from "react-aria-components";
 import { Button as AriaButton } from "react-aria-components";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 import { isReactComponent } from "@/components/utils/isReactComponent";
 import { Tooltip } from "../tooltips/tooltips";
 

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

@@ -5,7 +5,7 @@ import React, { isValidElement } from "react";
 import Link from "next/link";
 import type { ButtonProps as AriaButtonProps, PressEvent } from "react-aria-components";
 import { Button as AriaButton } from "react-aria-components";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 import { isReactComponent } from "@/components/utils/isReactComponent";
 
 export const styles = sortCx({

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

@@ -2,7 +2,7 @@
 
 import type { HTMLAttributes } from "react";
 import { X as CloseIcon } from "@untitledui/icons";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 const sizes = {
     sm: { root: "size-9", icon: "size-5" },

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

@@ -4,7 +4,7 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps } fr
 import React from "react";
 import type { ButtonProps as AriaButtonProps } from "react-aria-components";
 import { Button as AriaButton } from "react-aria-components";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 import { AppleLogo, DribbleLogo, FacebookLogo, FigmaLogo, FigmaLogoOutlined, GoogleLogo, TwitterLogo } from "./social-logos";
 
 export const styles = sortCx({

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

@@ -2,7 +2,7 @@
 
 import type { ReactNode, Ref } from "react";
 import { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 export interface CheckboxBaseProps {
     size?: "sm" | "md";

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

@@ -10,7 +10,7 @@ import type {
     SeparatorProps,
 } from "react-aria-components";
 import { Button as AriaButton, Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, Separator } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface DropdownItemProps extends MenuItemProps {
     /** The label of the item to be displayed. */

package/templates/default/src/components/shared/input/hint-text.tsx

@@ -3,7 +3,7 @@
 import type { ReactNode, Ref } from "react";
 import type { TextProps as AriaTextProps } from "react-aria-components";
 import { Text as AriaText } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface HintTextProps extends AriaTextProps {
     children: ReactNode;

package/templates/default/src/components/shared/input/index.tsx

@@ -7,7 +7,7 @@ import { Input as AriaInput, TextField as AriaTextField, Group } from "react-ari
 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";
+import { cx, sortCx } from "@/components/utils/cx";
 
 export interface InputBaseProps extends TextFieldProps {
     label?: string;

package/templates/default/src/components/shared/input/input-payment.tsx

@@ -7,7 +7,7 @@ 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";
+import { cx } from "@/components/utils/cx";
 
 const cardTypes = [
     {

package/templates/default/src/components/shared/input/input-with-button.tsx

@@ -10,7 +10,7 @@ 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";
+import { cx } from "@/components/utils/cx";
 
 interface InputWithButtonProps extends Omit<InputBaseProps, "icon"> {
     buttonText: string;

package/templates/default/src/components/shared/input/input-with-dropdown.tsx

@@ -8,7 +8,7 @@ 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";
+import { cx, sortCx } from "@/components/utils/cx";
 
 interface SelectorComponentProps {
     size: "sm" | "md";

package/templates/default/src/components/shared/input/input-with-prefix.tsx

@@ -5,7 +5,7 @@ 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";
+import { cx } from "@/components/utils/cx";
 
 interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
     position?: "leading" | "trailing";

package/templates/default/src/components/shared/input/label.tsx

@@ -5,7 +5,7 @@ import { HelpCircle } from "@untitledui/icons";
 import type { LabelProps as AriaLabelProps } from "react-aria-components";
 import { Label as AriaLabel } from "react-aria-components";
 import { Tooltip, TooltipTrigger } from "@/components/shared/tooltips/tooltips";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface LabelProps extends AriaLabelProps {
     children: ReactNode;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx as clx, sortCx } from "@/components/utils";
+import { cx as clx, sortCx } from "@/components/utils/cx";
 
 interface ProgressBarProps {
     value: number;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 export interface ProgressBarProps {
     value: number;
@@ -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 ring-1 shadow-lg ring-border-secondary_alt"
+                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"
             >
                 <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 ring-1 shadow-lg ring-border-secondary_alt"
+                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"
             >
                 <div className="tt-xs-semi text-secondary">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
             </div>

package/templates/default/src/components/shared/radio-buttons/radio-buttons.tsx

@@ -3,7 +3,7 @@
 import { type ReactNode, type Ref, createContext, useContext } from "react";
 import type { RadioGroupProps as AriaRadioGroupProps } from "react-aria-components";
 import { type RadioProps as AriaRadioProps, Radio, RadioGroup } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 export interface RadioButtonGroupContextType {
     size?: "sm" | "md";

package/templates/default/src/components/shared/radio-groups/radio-group-avatar.tsx

@@ -4,7 +4,7 @@ import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import AvatarComponent from "@/components/shared/avatar/avatar";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface AvatarItemType {
     id: string;

package/templates/default/src/components/shared/radio-groups/radio-group-checkbox.tsx

@@ -4,7 +4,7 @@ import type { FC } from "react";
 import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type RadioGroupItemType = {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-icon-card.tsx

@@ -6,7 +6,7 @@ import { Radio, RadioGroup } from "react-aria-components";
 import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icons";
 import { BadgeWithDot } from "@/components/shared/badges/badges";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type IconCardItemType = {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-icon-simple.tsx

@@ -5,7 +5,7 @@ import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icons";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type RadioGroupItemType = {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-payment-icon.tsx

@@ -5,7 +5,7 @@ import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import Button from "@/components/shared/buttons/button";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface PaymentCardItemType {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-radio-button.tsx

@@ -3,7 +3,7 @@
 import type { FC } from "react";
 import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type RadioGroupItemType = {
     value: string;

package/templates/default/src/components/shared/select/combobox.tsx

@@ -13,7 +13,7 @@ import {
     ComboBoxStateContext,
 } from "react-aria-components";
 import { useHotkeys } from "react-hotkeys-hook";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { useResizeObserver } from "@/hooks/use-resize-observer";
 import HintText from "../input/hint-text";
 import Label from "../input/label";

package/templates/default/src/components/shared/select/multi-select.tsx

@@ -16,7 +16,7 @@ import {
 import { useHotkeys } from "react-hotkeys-hook";
 import type { ListData } from "react-stately";
 import { useListData } from "react-stately";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { useResizeObserver } from "@/hooks/use-resize-observer";
 import Avatar from "../avatar/avatar";
 import type { IconComponentType } from "../badges/badge-types";

package/templates/default/src/components/shared/select/popover.tsx

@@ -3,7 +3,7 @@
 import type { RefAttributes } from "react";
 import type { PopoverProps as AriaPopoverProps } from "react-aria-components";
 import { Popover as AriaPopover } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
     size: "sm" | "md";

package/templates/default/src/components/shared/select/select-item.tsx

@@ -5,7 +5,7 @@ import { Check } from "@untitledui/icons";
 import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
 import { ListBoxItem as AriaListBoxItem, Text } from "react-aria-components";
 import Avatar from "@/components/shared/avatar/avatar";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import type { SelectItemType } from "./select";
 import { SelectContext } from "./select";
 

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

@@ -9,7 +9,7 @@ import Avatar from "@/components/shared/avatar/avatar";
 import type { IconComponentType } from "@/components/shared/badges/badge-types";
 import HintText from "@/components/shared/input/hint-text";
 import Label from "@/components/shared/input/label";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { ComboBox } from "./combobox";
 import { Popover } from "./popover";
 import Item from "./select-item";

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

@@ -2,13 +2,13 @@
 
 import type { SliderProps as AriaSliderProps } from "react-aria-components";
 import { Slider as AriaSlider, Label, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 
 const styles = sortCx({
     default: "hidden",
     bottom: "absolute top-2 left-1/2 -translate-x-1/2 translate-y-full text-md leading-md font-medium text-primary",
     "top-floating":
-        "absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary px-3 py-2 text-xs leading-xs font-semibold text-secondary ring-1 shadow-lg ring-border-secondary_alt",
+        "absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary px-3 py-2 text-xs leading-xs font-semibold text-secondary shadow-lg ring-1 ring-border-secondary_alt",
 });
 
 interface SliderProps extends AriaSliderProps {
@@ -55,7 +55,7 @@ export const Slider = ({
                                         index={index}
                                         className={({ isFocusVisible, isDragging }) =>
                                             cx(
-                                                "absolute top-1/2 z-50 box-border size-6 cursor-grab rounded-full bg-slider-handle-bg ring-2 shadow-md ring-slider-handle-border ring-inset",
+                                                "absolute top-1/2 z-50 box-border size-6 cursor-grab rounded-full bg-slider-handle-bg shadow-md ring-2 ring-slider-handle-border ring-inset",
                                                 isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
                                                 isDragging && "cursor-grabbing",
                                             )

package/templates/default/src/components/shared/tags/base-components/tag-checkbox.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface TagCheckboxProps {
     size?: "sm" | "md" | "lg";

package/templates/default/src/components/shared/tags/base-components/tag-close-x.tsx

@@ -3,7 +3,7 @@
 import type { RefAttributes } from "react";
 import { XClose } from "@untitledui/icons";
 import { Button as AriaButton, type ButtonProps } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface TagCloseXProps extends ButtonProps, RefAttributes<HTMLButtonElement> {
     size?: "sm" | "md" | "lg";

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

@@ -9,7 +9,7 @@ import {
     type TagProps as AriaTagProps,
 } from "react-aria-components";
 import Dot from "@/components/foundations/dot-icon";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import Avatar from "../avatar/avatar";
 import TagCheckbox from "./base-components/tag-checkbox";
 import { TagCloseX } from "./base-components/tag-close-x";

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

@@ -6,7 +6,7 @@ import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFiel
 import { TextArea as AriaTextArea } from "react-aria-components";
 import HintText from "@/components/shared/input/hint-text";
 import Label from "@/components/shared/input/label";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 import { TextField } from "../input";
 
 interface TextAreaBaseProps extends AriaTextAreaProps {

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

@@ -3,7 +3,7 @@
 import type { ReactNode } from "react";
 import type { SwitchProps } from "react-aria-components";
 import { Switch } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface ToggleBaseProps {
     size?: "sm" | "md";

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

@@ -7,7 +7,7 @@ import type { FocusableElement } from "@react-types/shared";
 import { mergeProps, useFocusable } from "react-aria";
 import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger, Button, OverlayArrow } from "react-aria-components";
 import type { TooltipProps as AriaTooltipProps, ButtonProps, TooltipTriggerComponentProps } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 const padding: Partial<Record<Placement, string>> = {
     "top left": "px-2.5",