love-ui 1.2.7 → 1.2.9

package/dist/index.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
-import{spawnSync as I}from"child_process";import{existsSync as P}from"fs";import{mkdir as U,readdir as z,readFile as $,writeFile as S}from"fs/promises";import a from"path";import{pathToFileURL as J,fileURLToPath as B}from"url";var M=a.dirname(B(import.meta.url)),X=a.resolve(M,".."),C=a.join(X,"packages"),H=new Set([".ts",".tsx",".cts",".mts",".js",".jsx",".css",".scss",".sass",".mdx",".md"]),V=new Set(["node_modules","dist",".turbo",".next","build",".cache"]),A=new Set(["accordion","alert","alert-dialog","autocomplete","avatar","badge","breadcrumb","button","card","checkbox","checkbox-group","collapsible","combobox","command","dialog","empty","field","fieldset","form","frame","group","input","label","menu","meter","number-field","pagination","popover","preview-card","progress","radio-group","scroll-area","select","separator","sheet","skeleton","slider","switch","table","tabs","textarea","toast","toggle","toggle-group","toolbar","tooltip"]);function _(e){if(!e)return e;let t=e.split("/");return t[t.length-1]||e}function Y(e){let t=e.trim();return t&&((t.startsWith("@/")||t.startsWith("~/"))&&(t=`src/${t.slice(2)}`),t.startsWith("/")&&(t=t.slice(1)),t=t.replace(/^\.\//,""),t=t.replace(/\/+$/,""),t)}function N(e){let t=_(e);return t==="ui"?"love-ui":t}function q(e){let t=e.loveui??{},n=typeof t.target=="string"?t.target.trim():"",s=t.category;if(n){let i=typeof t.includePackageName=="boolean"?t.includePackageName:!1;return{base:n.replace(/\/+$/,""),includePackageName:i}}return s==="feature"?{base:"components",includePackageName:!0}:s==="block"?{base:"components/blocks",includePackageName:!0}:{base:"components/ui",includePackageName:!0}}function G(e,t,n){let s=e.startsWith("src/")?e.slice(4):e;if(!t.includePackageName){let g=t.base.split("/").filter(Boolean),p=g[g.length-1];p&&s.startsWith(`${p}/`)&&(s=s.slice(p.length+1))}let l=`${(t.includePackageName?`${t.base}/${n}`:t.base).replace(/\/+/g,"/")}/${s}`.replace(/\/+/g,"/");return{cleanedPath:s,target:l}}async function K(e){let t=a.join(e,"components.json");try{let n=await $(t,"utf8"),i=JSON.parse(n).aliases?.components;return i?Y(i):null}catch{return null}}async function Q(e){let t=["tsconfig.json","jsconfig.json"].map(n=>a.join(e,n)).find(n=>P(n));if(t)try{let n=await $(t,"utf8"),i=JSON.parse(n).compilerOptions?.paths;if(i&&typeof i=="object")for(let r of Object.keys(i)){let l=i[r];if(r==="@/*"&&Array.isArray(l)&&l.some(g=>g.startsWith("src/")||g.startsWith("./src/")))return"src/components";if(r==="@/*"&&Array.isArray(l)&&l.some(g=>g.startsWith("app/")||g.startsWith("./app/")))return"app/components"}}catch{}return P(a.join(e,"src"))?"src/components":P(a.join(e,"app"))?"app/components":"components"}function E(e,t,n){let s=r=>{let l=r.startsWith("/"),g=r.endsWith("/"),p=r.split("/").filter(Boolean),u=[];for(let w of p)u[u.length-1]!==w&&u.push(w);let d=u.join("/");return`${l?"/":""}${d}${g?"/":""}`};if(n)return s(e);let i=t.replace(/\/+$/,"");if(e.startsWith("components/")){let r=e.slice(10);return s(`${i}${r}`.replace(/^\//,""))}if(e.startsWith("lib/")){if(i.startsWith("src/"))return s(`src/${e}`);if(i.startsWith("app/"))return s(`app/${e}`)}return e.startsWith("ui/")?s(`${i}/${e}`):s(e)}async function T(e,t){let n=a.dirname(a.join(t,e));await U(n,{recursive:!0})}async function Z(e,t){let n=a.join(e,"package.json"),s={};try{let p=await $(n,"utf8");s=JSON.parse(p)}catch{}let i=q(s),r=_(t),l=[];async function g(p,u){let d=await z(p,{withFileTypes:!0});for(let w of d){if(V.has(w.name))continue;let j=a.join(p,w.name);if(w.isDirectory()){await g(j,u);continue}let F=a.extname(w.name);if(!H.has(F)||w.name==="package.json")continue;let R=a.relative(u,j).split(a.sep).join("/"),{target:x}=G(R,i,r),v=await $(j,"utf8");l.push({path:R,target:x,content:v})}}return await g(e,e),l}async function ee(e){let t=a.join(C,"love-ui"),n=a.join(t,"src","ui",`${e}.tsx`);if(!P(n))return null;try{let s=[],i=await $(n,"utf8");i=i.replace(/from\s+["']@loveui\/ui\/lib\/utils["']/g,'from "@/lib/utils"'),s.push({path:`src/ui/${e}.tsx`,target:`components/ui/${e}.tsx`,content:i});let r=a.join(t,"src","lib","utils.ts");if(P(r)){let l=await $(r,"utf8");s.push({path:"src/lib/utils.ts",target:"lib/utils.ts",content:l})}return s}catch(s){return console.warn(`Warning: unable to read ${e} component`,s),null}}async function te(e){if(A.has(e))return await ee(e);let t=N(e),n=a.join(C,t);if(!P(n))return null;try{return await Z(n,e)}catch(s){return console.warn(`Warning: unable to read bundled sources for ${e}`,s),null}}var ne={"@base-ui-components/react":"1.0.0-beta.4","class-variance-authority":"^0.7.1",clsx:"^2.1.1","tailwind-merge":"^3.3.1"};async function se(e){if(A.has(e))return{...ne};let t=N(e),n=a.join(C,t,"package.json");try{let s=await $(n,"utf8");return JSON.parse(s).dependencies??{}}catch{return{}}}async function ie(e){return P(a.join(e,"bun.lockb"))?"bun":P(a.join(e,"pnpm-lock.yaml"))?"pnpm":P(a.join(e,"yarn.lock"))?"yarn":"npm"}async function oe(e,t,n){let s=Object.entries(e);if(s.length===0)return!0;console.log(`
-Installing dependencies...`);let i=s.map(([g,p])=>`${g}@${p}`),r;switch(t){case"bun":r=`bun add ${i.join(" ")}`;break;case"pnpm":r=`pnpm add ${i.join(" ")}`;break;case"yarn":r=`yarn add ${i.join(" ")}`;break;default:r=`npm install ${i.join(" ")}`}let l=I(r,{stdio:"inherit",shell:!0,cwd:n});return l.error||l.status!==0?(console.warn(`
+import{spawnSync as I}from"child_process";import{existsSync as $}from"fs";import{mkdir as A,readdir as z,readFile as P,writeFile as S}from"fs/promises";import c from"path";import{pathToFileURL as J,fileURLToPath as B}from"url";var M=c.dirname(B(import.meta.url)),X=c.resolve(M,".."),W=c.join(X,"packages"),H=new Set([".ts",".tsx",".cts",".mts",".js",".jsx",".css",".scss",".sass",".mdx",".md"]),V=new Set(["node_modules","dist",".turbo",".next","build",".cache"]),U=new Set(["accordion","alert","alert-dialog","autocomplete","avatar","badge","breadcrumb","button","card","checkbox","checkbox-group","collapsible","combobox","command","dialog","empty","field","fieldset","form","frame","group","input","label","menu","meter","number-field","pagination","popover","preview-card","progress","radio-group","scroll-area","select","separator","sheet","skeleton","slider","switch","table","tabs","textarea","toast","toggle","toggle-group","toolbar","tooltip"]);function N(e){if(!e)return e;let t=e.split("/");return t[t.length-1]||e}function Y(e){let t=e.trim();return t&&((t.startsWith("@/")||t.startsWith("~/"))&&(t=`src/${t.slice(2)}`),t.startsWith("/")&&(t=t.slice(1)),t=t.replace(/^\.\//,""),t=t.replace(/\/+$/,""),t)}function _(e){let t=N(e);return t==="ui"?"love-ui":t}function q(e){let t=e.loveui??{},n=typeof t.target=="string"?t.target.trim():"",s=t.category;if(n){let i=typeof t.includePackageName=="boolean"?t.includePackageName:!1;return{base:n.replace(/\/+$/,""),includePackageName:i}}return s==="feature"?{base:"components",includePackageName:!0}:s==="block"?{base:"components/blocks",includePackageName:!0}:{base:"components/ui",includePackageName:!0}}function G(e,t,n){let s=e.startsWith("src/")?e.slice(4):e;if(!t.includePackageName){let f=t.base.split("/").filter(Boolean),p=f[f.length-1];p&&s.startsWith(`${p}/`)&&(s=s.slice(p.length+1))}let l=`${(t.includePackageName?`${t.base}/${n}`:t.base).replace(/\/+/g,"/")}/${s}`.replace(/\/+/g,"/");return{cleanedPath:s,target:l}}async function K(e){let t=c.join(e,"components.json");try{let n=await P(t,"utf8"),i=JSON.parse(n).aliases?.components;return i?Y(i):null}catch{return null}}async function Q(e){let t=["tsconfig.json","jsconfig.json"].map(n=>c.join(e,n)).find(n=>$(n));if(t)try{let n=await P(t,"utf8"),i=JSON.parse(n).compilerOptions?.paths;if(i&&typeof i=="object")for(let a of Object.keys(i)){let l=i[a];if(a==="@/*"&&Array.isArray(l)&&l.some(f=>f.startsWith("src/")||f.startsWith("./src/")))return"src/components";if(a==="@/*"&&Array.isArray(l)&&l.some(f=>f.startsWith("app/")||f.startsWith("./app/")))return"app/components"}}catch{}return $(c.join(e,"src"))?"src/components":$(c.join(e,"app"))?"app/components":"components"}function T(e,t,n){let s=a=>{let l=a.startsWith("/"),f=a.endsWith("/"),p=a.split("/").filter(Boolean),m=[];for(let k of p)m[m.length-1]!==k&&m.push(k);let u=m.join("/");return`${l?"/":""}${u}${f?"/":""}`};if(n)return s(e);let i=t.replace(/\/+$/,"");if(e.startsWith("components/")){let a=e.slice(10);return s(`${i}${a}`.replace(/^\//,""))}if(e.startsWith("lib/")){if(i.startsWith("src/"))return s(`src/${e}`);if(i.startsWith("app/"))return s(`app/${e}`)}if(e.startsWith("hooks/")){if(i.startsWith("src/"))return s(`src/${e}`);if(i.startsWith("app/"))return s(`app/${e}`)}return e.startsWith("ui/")?s(`${i}/${e}`):s(e)}async function E(e,t){let n=c.dirname(c.join(t,e));await A(n,{recursive:!0})}async function Z(e,t){let n=c.join(e,"package.json"),s={};try{let p=await P(n,"utf8");s=JSON.parse(p)}catch{}let i=q(s),a=N(t),l=[];async function f(p,m){let u=await z(p,{withFileTypes:!0});for(let k of u){if(V.has(k.name))continue;let j=c.join(p,k.name);if(k.isDirectory()){await f(j,m);continue}let x=c.extname(k.name);if(!H.has(x)||k.name==="package.json")continue;let R=c.relative(m,j).split(c.sep).join("/"),{target:v}=G(R,i,a),F=await P(j,"utf8");l.push({path:R,target:v,content:F})}}return await f(e,e),l}async function ee(e){let t=c.join(W,"love-ui"),n=c.join(t,"src","ui",`${e}.tsx`);if(!$(n))return null;try{let s=[],i=await P(n,"utf8");i=i.replace(/from\s+["']@loveui\/ui\/lib\/utils["']/g,'from "@/lib/utils"'),s.push({path:`src/ui/${e}.tsx`,target:`components/ui/${e}.tsx`,content:i});let a=c.join(t,"src","lib","utils.ts");if($(a)){let l=await P(a,"utf8");s.push({path:"src/lib/utils.ts",target:"lib/utils.ts",content:l})}return s}catch(s){return console.warn(`Warning: unable to read ${e} component`,s),null}}async function te(e){if(U.has(e))return await ee(e);let t=_(e),n=c.join(W,t);if(!$(n))return null;try{return await Z(n,e)}catch(s){return console.warn(`Warning: unable to read bundled sources for ${e}`,s),null}}var ne={"@base-ui-components/react":"1.0.0-beta.4","class-variance-authority":"^0.7.1",clsx:"^2.1.1","tailwind-merge":"^3.3.1"};async function se(e){if(U.has(e))return{...ne};let t=_(e),n=c.join(W,t,"package.json");try{let s=await P(n,"utf8");return JSON.parse(s).dependencies??{}}catch{return{}}}async function ie(e){return $(c.join(e,"bun.lockb"))?"bun":$(c.join(e,"pnpm-lock.yaml"))?"pnpm":$(c.join(e,"yarn.lock"))?"yarn":"npm"}async function re(e,t,n){let s=Object.entries(e);if(s.length===0)return!0;console.log(`
+Installing dependencies...`);let i=s.map(([f,p])=>`${f}@${p}`),a;switch(t){case"bun":a=`bun add ${i.join(" ")}`;break;case"pnpm":a=`pnpm add ${i.join(" ")}`;break;case"yarn":a=`yarn add ${i.join(" ")}`;break;default:a=`npm install ${i.join(" ")}`}let l=I(a,{stdio:"inherit",shell:!0,cwd:n});return l.error||l.status!==0?(console.warn(`
 Failed to install dependencies. You may need to install them manually:`),console.warn(`  ${i.join(`
   `)}`),!1):(console.log(`Dependencies installed successfully!
-`),!0)}async function re(e=process.argv.slice(2)){(e.length===0||e.length===1&&(e[0]==="--version"||e[0]==="-v"))&&(console.log("love-ui version 1.1.9"),process.exit(0)),(e.length<2||e[0]!=="add")&&(console.log("Usage: npx love-ui add [...packages]"),console.log("       npx love-ui --version"),process.exit(1));let t=e.slice(1),n=process.cwd(),s=await K(n),i=await Q(n),r=s??i,l=s!==null,g=await ie(n),p={};for(let u of t){if(!u.trim())continue;console.log(`
-Adding ${u}...`);let d=null,w=null;if(u.startsWith("http://")||u.startsWith("https://"))try{let o=await fetch(u);o.ok?d=await o.json():console.warn(`Failed to fetch ${u}: HTTP ${o.status}`)}catch(o){console.warn(`Failed to fetch from ${u}:`,o)}else{let o=new URL(`r/${u}.json`,"https://www.loveui.dev/");try{let c=await fetch(o);c.ok&&(d=await c.json())}catch{}w=await te(u)}let j=w??d?.files??[];j=j.map(o=>{let c=o.target||o.path;return c.startsWith("registry/default/")&&(c=c.replace("registry/default/","")),{...o,target:c}});let F=j.find(o=>o.target.match(/^components\/comp-\d+\.tsx$/));if(F){let o=j.filter(c=>c.target.match(/^components\/[^/]+\//)&&c.target!==F.target);if(o.length>0&&o[0]){let c=o[0].target.match(/^components\/([^/]+)\//);if(c&&c[1]){let h=c[1];F.target=`components/${h}-demo.tsx`}}}if(!j.length){console.warn(`Component "${u}" not found. Available components can be found at https://loveui.dev`);continue}l||await U(a.join(n,r),{recursive:!0});let R=0,x=0;for(let o of j){if(!o.content)continue;let c=E(o.target,r,l),h=a.join(n,c),k=P(h),f=o.content;if(f=f.replace(/@\/registry\/building-blocks\/default\/components\//g,"@/components/"),f=f.replace(/@\/registry\/building-blocks\/default\/ui\//g,"@/components/ui/"),f=f.replace(/@\/registry\/building-blocks\/default\/lib\//g,"@/lib/"),f=f.replace(/@\/registry\/default\/components\//g,"@/components/"),f=f.replace(/@\/registry\/default\/ui\//g,"@/components/ui/"),f=f.replace(/@\/registry\/default\/lib\//g,"@/lib/"),k)try{if(await $(h,"utf8")===f)continue}catch{}await T(c,n),await S(h,f,"utf8"),k?x++:R++}if(R>0&&console.log(`\u2713 Created ${R} file${R>1?"s":""}`),x>0&&console.log(`\u2713 Updated ${x} file${x>1?"s":""}`),d?.registryDependencies&&d.registryDependencies.length>0){console.log(`
-Installing ${d.registryDependencies.length} required component${d.registryDependencies.length>1?"s":""}...`);for(let o of d.registryDependencies){let c=o;o.startsWith("https://loveui.dev/building-blocks/r/")&&(c=`https://ui.loveui.dev/ui/r/${o.split("/").pop()}`);try{let h=await fetch(c);if(h.ok){let k=await h.json(),W=(k?.files??[]).map(m=>{let b=m.target||m.path;return b.startsWith("registry/default/")&&(b=b.replace("registry/default/","")),{...m,target:b}});for(let m of W){if(!m.content)continue;let b=E(m.target,r,l),D=a.join(n,b),L=P(D),y=m.content;if(y=y.replace(/@\/registry\/building-blocks\/default\/components\//g,"@/components/"),y=y.replace(/@\/registry\/building-blocks\/default\/ui\//g,"@/components/ui/"),y=y.replace(/@\/registry\/building-blocks\/default\/lib\//g,"@/lib/"),y=y.replace(/@\/registry\/default\/components\//g,"@/components/"),y=y.replace(/@\/registry\/default\/ui\//g,"@/components/ui/"),y=y.replace(/@\/registry\/default\/lib\//g,"@/lib/"),L)try{if(await $(D,"utf8")===y)continue}catch{}await T(b,n),await S(D,y,"utf8")}let O=["@loveui/shadcn-ui","jotai","lucide-react","react","react-dom"];if(k?.dependencies)if(Array.isArray(k.dependencies))k.dependencies.forEach(m=>{O.includes(m)||(p[m]="latest")});else{let m=k.dependencies;Object.keys(m).forEach(b=>{!O.includes(b)&&m[b]&&(p[b]=m[b])})}}else console.warn(`  \u2717 Failed to fetch ${c}: HTTP ${h.status}`)}catch(h){console.warn(`  \u2717 Failed to install ${c}:`,h.message)}}console.log("\u2713 Installed registry dependencies")}let v={};d?.dependencies?Array.isArray(d.dependencies)?d.dependencies.forEach(o=>{v[o]="latest"}):v=d.dependencies:v=await se(u),Object.assign(p,v)}Object.keys(p).length>0&&await oe(p,g,n),console.log(`
-\u2713 Done! You can now import and use the components in your app.`)}var ae=process.argv[1]&&(import.meta.url===J(process.argv[1]).href||process.argv[1].includes("love-ui")||process.argv[1].includes("loveui"));ae&&re().catch(e=>{console.error(e),process.exit(1)});export{re as run};
+`),!0)}async function oe(e=process.argv.slice(2)){(e.length===0||e.length===1&&(e[0]==="--version"||e[0]==="-v"))&&(console.log("love-ui version 1.1.9"),process.exit(0)),(e.length<2||e[0]!=="add")&&(console.log("Usage: npx love-ui add [...packages]"),console.log("       npx love-ui --version"),process.exit(1));let t=e.slice(1),n=process.cwd(),s=await K(n),i=await Q(n),a=s??i,l=s!==null,f=await ie(n),p={};for(let m of t){if(!m.trim())continue;console.log(`
+Adding ${m}...`);let u=null,k=null;if(m.startsWith("http://")||m.startsWith("https://")){let r=m;r.includes("/building-blocks/r/")&&(r=r.replace("/building-blocks/r/","/building-blocks/"),console.log(`Auto-corrected URL to: ${r}`));try{let o=await fetch(r);o.ok?u=await o.json():console.warn(`Failed to fetch ${r}: HTTP ${o.status}`)}catch(o){console.warn(`Failed to fetch from ${r}:`,o)}}else{let r=new URL(`r/${m}.json`,"https://www.loveui.dev/");try{let o=await fetch(r);o.ok&&(u=await o.json())}catch{}k=await te(m)}let j=k??u?.files??[];j=j.map(r=>{let o=r.target||r.path;return o.startsWith("registry/default/")&&(o=o.replace("registry/default/","")),{...r,target:o}});let x=j.find(r=>r.target.match(/^components\/comp-\d+\.tsx$/));if(x){let r=j.filter(o=>o.target.match(/^components\/[^/]+\//)&&o.target!==x.target);if(r.length>0&&r[0]){let o=r[0].target.match(/^components\/([^/]+)\//);if(o&&o[1]){let h=o[1];x.target=`components/${h}-demo.tsx`}}else if(u?.meta?.tags&&Array.isArray(u.meta.tags)&&u.meta.tags.length>0){let h=u.meta.tags.slice(0,2).filter(b=>b.length>0);if(h.length>0){let b=h.join("-").toLowerCase().replace(/\s+/g,"-");x.target=`components/${b}.tsx`}}}if(!j.length){console.warn(`Component "${m}" not found. Available components can be found at https://loveui.dev`);continue}l||await A(c.join(n,a),{recursive:!0});let R=0,v=0;for(let r of j){if(!r.content)continue;let o=T(r.target,a,l),h=c.join(n,o),b=$(h),g=r.content;if(g=g.replace(/@\/registry\/building-blocks\/default\/components\//g,"@/components/"),g=g.replace(/@\/registry\/building-blocks\/default\/ui\//g,"@/components/ui/"),g=g.replace(/@\/registry\/building-blocks\/default\/lib\//g,"@/lib/"),g=g.replace(/@\/registry\/building-blocks\/default\/hooks\//g,"@/hooks/"),g=g.replace(/@\/registry\/default\/components\//g,"@/components/"),g=g.replace(/@\/registry\/default\/ui\//g,"@/components/ui/"),g=g.replace(/@\/registry\/default\/lib\//g,"@/lib/"),g=g.replace(/@\/registry\/default\/hooks\//g,"@/hooks/"),b)try{if(await P(h,"utf8")===g)continue}catch{}await E(o,n),await S(h,g,"utf8"),b?v++:R++}if(R>0&&console.log(`\u2713 Created ${R} file${R>1?"s":""}`),v>0&&console.log(`\u2713 Updated ${v} file${v>1?"s":""}`),u?.registryDependencies&&u.registryDependencies.length>0){console.log(`
+Installing ${u.registryDependencies.length} required component${u.registryDependencies.length>1?"s":""}...`);for(let r of u.registryDependencies){let o=r;r.startsWith("https://loveui.dev/building-blocks/r/")&&(o=`https://ui.loveui.dev/ui/r/${r.split("/").pop()}`);try{let h=await fetch(o);if(h.ok){let b=await h.json(),C=(b?.files??[]).map(y=>{let w=y.target||y.path;return w.startsWith("registry/default/")&&(w=w.replace("registry/default/","")),{...y,target:w}});for(let y of C){if(!y.content)continue;let w=T(y.target,a,l),D=c.join(n,w),L=$(D),d=y.content;if(d=d.replace(/@\/registry\/building-blocks\/default\/components\//g,"@/components/"),d=d.replace(/@\/registry\/building-blocks\/default\/ui\//g,"@/components/ui/"),d=d.replace(/@\/registry\/building-blocks\/default\/lib\//g,"@/lib/"),d=d.replace(/@\/registry\/building-blocks\/default\/hooks\//g,"@/hooks/"),d=d.replace(/@\/registry\/default\/components\//g,"@/components/"),d=d.replace(/@\/registry\/default\/ui\//g,"@/components/ui/"),d=d.replace(/@\/registry\/default\/lib\//g,"@/lib/"),d=d.replace(/@\/registry\/default\/hooks\//g,"@/hooks/"),L)try{if(await P(D,"utf8")===d)continue}catch{}await E(w,n),await S(D,d,"utf8")}let O=["@loveui/shadcn-ui","jotai","lucide-react","react","react-dom"];if(b?.dependencies)if(Array.isArray(b.dependencies))b.dependencies.forEach(y=>{O.includes(y)||(p[y]="latest")});else{let y=b.dependencies;Object.keys(y).forEach(w=>{!O.includes(w)&&y[w]&&(p[w]=y[w])})}}else console.warn(`  \u2717 Failed to fetch ${o}: HTTP ${h.status}`)}catch(h){console.warn(`  \u2717 Failed to install ${o}:`,h.message)}}console.log("\u2713 Installed registry dependencies")}let F={};u?.dependencies?Array.isArray(u.dependencies)?u.dependencies.forEach(r=>{F[r]="latest"}):F=u.dependencies:F=await se(m),Object.assign(p,F)}Object.keys(p).length>0&&await re(p,f,n),console.log(`
+\u2713 Done! You can now import and use the components in your app.`)}var ae=process.argv[1]&&(import.meta.url===J(process.argv[1]).href||process.argv[1].includes("love-ui")||process.argv[1].includes("loveui"));ae&&oe().catch(e=>{console.error(e),process.exit(1)});export{oe as run};

package/dist/mcp-server.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import{Server as ge}from"@modelcontextprotocol/sdk/server";var L={name:"love-ui",version:"1.2.5",private:!1,license:"AGPL-3.0-or-later",type:"module",bin:{loveui:"dist/index.js","love-ui":"dist/index.js","loveui-mcp":"dist/mcp-server.js"},files:["dist","packages","*.ts","*.tsx","*.css","*.mdx"],main:"packages/love-ui/index.ts",types:"packages/love-ui/index.ts",exports:{".":{import:"./packages/love-ui/index.ts",require:"./packages/love-ui/index.ts"},"./lib/*":"./packages/love-ui/*","./components/*":"./packages/love-ui/components/*","./shadcn-ui/*":"./packages/shadcn-ui/*","./package.json":"./package.json"},dependencies:{"@modelcontextprotocol/sdk":"^1.18.1",postcss:"^8.5.6","postcss-nested":"^7.0.2"},scripts:{build:"tsup",postbuild:"node ./scripts/copy-packages.mjs",clean:"rimraf dist packages"},devDependencies:{"@types/node":"^20.14.10",rimraf:"^6.0.1",tsup:"^8.5.0"}};import{constants as X}from"fs";import{access as H,readFile as N,readdir as C}from"fs/promises";import D,{extname as W,join as P,relative as V}from"path";import{fileURLToPath as Y}from"url";import A from"postcss";import Q from"postcss-nested";var Z=D.dirname(Y(import.meta.url)),ee=D.resolve(Z,".."),U=D.join(ee,"packages"),te=new Set([".turbo",".next",".git","dist","build","storybook-static","node_modules","__tests__","__mocks__","coverage"]),se=new Set([".ts",".tsx",".js",".jsx",".mjs",".cjs",".json",".css",".scss",".sass",".mdx"]),ne=new Set(["package.json","tsconfig.json","tsconfig.build.json","tsconfig.test.json","README.md",".DS_Store"]),ie=new Set(["shadcn-ui","typescript-config","patterns","loveui","love-ui"]),re=e=>e.replace(/\\/g,"/"),J=async(e,s,t)=>{let n=await C(e,{withFileTypes:!0});for(let i of n){let o=P(e,i.name);if(i.isDirectory()){if(te.has(i.name))continue;await J(o,s,t);continue}let d=W(i.name);!se.has(d)||ne.has(i.name)||i.name.endsWith(".d.ts")||i.name.endsWith(".test.ts")||i.name.endsWith(".test.tsx")||i.name.endsWith(".stories.tsx")||t.push({absolute:o,relative:re(V(s,o))})}},oe=(e,s)=>{let t=e.loveui??{},n=typeof t.target=="string"?t.target.trim():"",i=t.category;if(n.length>0){let o=typeof t.includePackageName=="boolean"?t.includePackageName:!1;return{base:n.replace(/\/+$/,""),includePackageName:o}}return i==="feature"?{base:"components",includePackageName:!0}:i==="block"?{base:"components/blocks",includePackageName:!0}:{base:"components/ui",includePackageName:!0}},ae=e=>{let t=(e.loveui??{}).type;return typeof t=="string"&&t.trim().length>0?t:"registry:ui"},ce=async e=>{try{return await H(e,X.F_OK),!0}catch{return!1}},le=e=>e.startsWith("@loveui/")||e.startsWith("@repo/"),pe=e=>e.replace(/^@repo\//,"").replace(/^@loveui\//,""),G=async()=>(await C(U,{withFileTypes:!0})).filter(s=>s.isDirectory()).map(s=>s.name).filter(s=>!ie.has(s)).sort((s,t)=>s.localeCompare(t)),E=async e=>{let s=P(U,e),t=P(s,"package.json");if(!await ce(t))throw new Error(`Missing package.json for ${e}`);let n=JSON.parse(await N(t,"utf8")),i=ae(n),o=Object.keys(n.dependencies??{}),d=Object.keys(n.peerDependencies??{}),O=Object.keys(n.devDependencies??{}),k=new Set([...o,...d,...O].filter(le).filter(r=>r!=="@loveui/shadcn-ui")),T=[...new Set([...o,...d].filter(r=>!k.has(r)))],_=[...new Set(O.filter(r=>!k.has(r)&&!["@loveui/typescript-config","@types/react","@types/react-dom","typescript"].includes(r)))],w=[];for(let r of k){let m=pe(r);w.push(`https://www.loveui.dev/r/${m}.json`)}let I=[];await J(s,s,I);let u=[],c={},p=oe(n,e);for(let r of I){let m=await N(r.absolute,"utf8"),R=W(r.absolute);if(R===".css"||R===".scss"||R===".sass"){let y=await A([Q]).process(m,{from:void 0});A.parse(y.css).walkAtRules("layer",b=>{let j=`@layer ${b.params}`;c[j]??={},b.walkRules(a=>{if(a.parent&&a.parent.type==="atrule"&&a.parent.name==="media")return;let h=a.selector,l={};a.walkDecls(v=>{l[v.prop]=v.value}),Object.keys(l).length>0&&(c[j][h]=l)}),b.walkAtRules("media",a=>{let h=`@media ${a.params}`,l=c[j];l[h]??={};let v=l[h];a.walkRules($=>{let B=$.selector,x={};$.walkDecls(F=>{x[F.prop]=F.value}),Object.keys(x).length>0&&(v[B]=x)})})});continue}let g=r.relative.startsWith("src/")?r.relative.slice(4):r.relative;if(!p.includePackageName){let y=p.base.split("/").filter(Boolean),f=y[y.length-1];f&&g.startsWith(`${f}/`)&&(g=g.slice(f.length+1))}let q=e.includes("/")?e.split("/").pop()??e:e,z=(p.includePackageName?`${p.base}/${q}`:p.base).replace(/\/+$/,"");u.push({type:i,path:g,target:`${z}/${g}`.replace(/\/+/g,"/"),content:m})}let K=!u.length&&Object.keys(c).length>0?"registry:style":i;return{$schema:"https://ui.shadcn.com/schema/registry-item.json",name:e,type:K,title:n.title??e,description:n.description,author:n.author??"Connor Love <hello@loveconnor.com>",dependencies:T.length?T:void 0,devDependencies:_.length?_:void 0,registryDependencies:w.length?Array.from(new Set(w)):void 0,files:u.length?u:void 0,css:Object.keys(c).length?c:void 0}};var S="loveui://registry/",de=e=>`${S}${e}`;async function ue(){let e=new ge({name:"loveui-mcp",version:L.version??"0.0.0"});e.addResourceProvider({name:"loveui-registry",listResources:async()=>(await G()).map(t=>({uri:de(t),name:t,description:`loveui registry definition for ${t}`,mimeType:"application/json"})),readResource:async s=>{if(!s.startsWith(S))throw new Error(`Unsupported resource URI: ${s}`);let t=s.slice(S.length),n=await E(t);return{contents:[{uri:s,mimeType:"application/json",text:JSON.stringify(n,null,2)}]}}}),e.addTool({name:"get-loveui-package",description:"Fetch a loveui registry definition by package name.",inputSchema:{type:"object",additionalProperties:!1,properties:{name:{type:"string",description:"Package name, e.g. badge"}},required:["name"]},handler:async s=>{let t=s?.name;if(typeof t!="string"||t.trim()==="")throw new Error("Package name is required.");let n=await E(t);return{content:[{type:"text",text:JSON.stringify(n,null,2)}]}}}),await e.start()}ue().catch(e=>{console.error(e),process.exit(1)});
+import{Server as ge}from"@modelcontextprotocol/sdk/server";var L={name:"love-ui",version:"1.2.8",private:!1,license:"AGPL-3.0-or-later",type:"module",bin:{loveui:"dist/index.js","love-ui":"dist/index.js","loveui-mcp":"dist/mcp-server.js"},files:["dist","packages","*.ts","*.tsx","*.css","*.mdx"],main:"packages/love-ui/index.ts",types:"packages/love-ui/index.ts",exports:{".":{import:"./packages/love-ui/index.ts",require:"./packages/love-ui/index.ts"},"./lib/*":"./packages/love-ui/*","./components/*":"./packages/love-ui/components/*","./shadcn-ui/*":"./packages/shadcn-ui/*","./package.json":"./package.json"},dependencies:{"@modelcontextprotocol/sdk":"^1.18.1",postcss:"^8.5.6","postcss-nested":"^7.0.2"},scripts:{build:"tsup",postbuild:"node ./scripts/copy-packages.mjs",clean:"rimraf dist packages"},devDependencies:{"@types/node":"^20.14.10",rimraf:"^6.0.1",tsup:"^8.5.0"}};import{constants as X}from"fs";import{access as H,readFile as N,readdir as C}from"fs/promises";import D,{extname as W,join as P,relative as V}from"path";import{fileURLToPath as Y}from"url";import A from"postcss";import Q from"postcss-nested";var Z=D.dirname(Y(import.meta.url)),ee=D.resolve(Z,".."),U=D.join(ee,"packages"),te=new Set([".turbo",".next",".git","dist","build","storybook-static","node_modules","__tests__","__mocks__","coverage"]),se=new Set([".ts",".tsx",".js",".jsx",".mjs",".cjs",".json",".css",".scss",".sass",".mdx"]),ne=new Set(["package.json","tsconfig.json","tsconfig.build.json","tsconfig.test.json","README.md",".DS_Store"]),ie=new Set(["shadcn-ui","typescript-config","patterns","loveui","love-ui"]),re=e=>e.replace(/\\/g,"/"),J=async(e,s,t)=>{let n=await C(e,{withFileTypes:!0});for(let i of n){let o=P(e,i.name);if(i.isDirectory()){if(te.has(i.name))continue;await J(o,s,t);continue}let d=W(i.name);!se.has(d)||ne.has(i.name)||i.name.endsWith(".d.ts")||i.name.endsWith(".test.ts")||i.name.endsWith(".test.tsx")||i.name.endsWith(".stories.tsx")||t.push({absolute:o,relative:re(V(s,o))})}},oe=(e,s)=>{let t=e.loveui??{},n=typeof t.target=="string"?t.target.trim():"",i=t.category;if(n.length>0){let o=typeof t.includePackageName=="boolean"?t.includePackageName:!1;return{base:n.replace(/\/+$/,""),includePackageName:o}}return i==="feature"?{base:"components",includePackageName:!0}:i==="block"?{base:"components/blocks",includePackageName:!0}:{base:"components/ui",includePackageName:!0}},ae=e=>{let t=(e.loveui??{}).type;return typeof t=="string"&&t.trim().length>0?t:"registry:ui"},ce=async e=>{try{return await H(e,X.F_OK),!0}catch{return!1}},le=e=>e.startsWith("@loveui/")||e.startsWith("@repo/"),pe=e=>e.replace(/^@repo\//,"").replace(/^@loveui\//,""),G=async()=>(await C(U,{withFileTypes:!0})).filter(s=>s.isDirectory()).map(s=>s.name).filter(s=>!ie.has(s)).sort((s,t)=>s.localeCompare(t)),E=async e=>{let s=P(U,e),t=P(s,"package.json");if(!await ce(t))throw new Error(`Missing package.json for ${e}`);let n=JSON.parse(await N(t,"utf8")),i=ae(n),o=Object.keys(n.dependencies??{}),d=Object.keys(n.peerDependencies??{}),O=Object.keys(n.devDependencies??{}),k=new Set([...o,...d,...O].filter(le).filter(r=>r!=="@loveui/shadcn-ui")),T=[...new Set([...o,...d].filter(r=>!k.has(r)))],_=[...new Set(O.filter(r=>!k.has(r)&&!["@loveui/typescript-config","@types/react","@types/react-dom","typescript"].includes(r)))],w=[];for(let r of k){let m=pe(r);w.push(`https://www.loveui.dev/r/${m}.json`)}let I=[];await J(s,s,I);let u=[],c={},p=oe(n,e);for(let r of I){let m=await N(r.absolute,"utf8"),R=W(r.absolute);if(R===".css"||R===".scss"||R===".sass"){let y=await A([Q]).process(m,{from:void 0});A.parse(y.css).walkAtRules("layer",b=>{let j=`@layer ${b.params}`;c[j]??={},b.walkRules(a=>{if(a.parent&&a.parent.type==="atrule"&&a.parent.name==="media")return;let h=a.selector,l={};a.walkDecls(v=>{l[v.prop]=v.value}),Object.keys(l).length>0&&(c[j][h]=l)}),b.walkAtRules("media",a=>{let h=`@media ${a.params}`,l=c[j];l[h]??={};let v=l[h];a.walkRules($=>{let B=$.selector,x={};$.walkDecls(F=>{x[F.prop]=F.value}),Object.keys(x).length>0&&(v[B]=x)})})});continue}let g=r.relative.startsWith("src/")?r.relative.slice(4):r.relative;if(!p.includePackageName){let y=p.base.split("/").filter(Boolean),f=y[y.length-1];f&&g.startsWith(`${f}/`)&&(g=g.slice(f.length+1))}let q=e.includes("/")?e.split("/").pop()??e:e,z=(p.includePackageName?`${p.base}/${q}`:p.base).replace(/\/+$/,"");u.push({type:i,path:g,target:`${z}/${g}`.replace(/\/+/g,"/"),content:m})}let K=!u.length&&Object.keys(c).length>0?"registry:style":i;return{$schema:"https://ui.shadcn.com/schema/registry-item.json",name:e,type:K,title:n.title??e,description:n.description,author:n.author??"Connor Love <hello@loveconnor.com>",dependencies:T.length?T:void 0,devDependencies:_.length?_:void 0,registryDependencies:w.length?Array.from(new Set(w)):void 0,files:u.length?u:void 0,css:Object.keys(c).length?c:void 0}};var S="loveui://registry/",de=e=>`${S}${e}`;async function ue(){let e=new ge({name:"loveui-mcp",version:L.version??"0.0.0"});e.addResourceProvider({name:"loveui-registry",listResources:async()=>(await G()).map(t=>({uri:de(t),name:t,description:`loveui registry definition for ${t}`,mimeType:"application/json"})),readResource:async s=>{if(!s.startsWith(S))throw new Error(`Unsupported resource URI: ${s}`);let t=s.slice(S.length),n=await E(t);return{contents:[{uri:s,mimeType:"application/json",text:JSON.stringify(n,null,2)}]}}}),e.addTool({name:"get-loveui-package",description:"Fetch a loveui registry definition by package name.",inputSchema:{type:"object",additionalProperties:!1,properties:{name:{type:"string",description:"Package name, e.g. badge"}},required:["name"]},handler:async s=>{let t=s?.name;if(typeof t!="string"||t.trim()==="")throw new Error("Package name is required.");let n=await E(t);return{content:[{type:"text",text:JSON.stringify(n,null,2)}]}}}),await e.start()}ue().catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "love-ui",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/packages/code-block/README.md

@@ -0,0 +1,62 @@
+# @loveui/code-blocks
+
+React code-block components for LoveUI.
+
+## Install
+
+```bash
+pnpm add @loveui/code-blocks
+```
+
+## Required Styles
+
+Import your project styles and at least one highlighter stylesheet.
+
+```css
+@import "@loveui/code-blocks/styles/globals.css";
+@import "@loveui/code-blocks/styles/shiki.css";
+/* or */
+@import "@loveui/code-blocks/styles/sugar-high.css";
+```
+
+## Usage
+
+```tsx
+import {
+  CodeBlock,
+  CodeBlockHeader,
+  CodeBlockContent,
+  CodeBlockGroup,
+  CodeBlockIcon,
+  CopyButton,
+  CodeblockShiki,
+} from "@loveui/code-blocks";
+
+const code = "console.log('LoveUI');";
+
+export function Example() {
+  return (
+    <CodeBlock>
+      <CodeBlockHeader>
+        <CodeBlockGroup>
+          <CodeBlockIcon language="ts" />
+          <span>example.ts</span>
+        </CodeBlockGroup>
+        <CopyButton content={code} />
+      </CodeBlockHeader>
+      <CodeBlockContent>
+        <CodeblockShiki code={code} language="ts" />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+}
+```
+
+## Exports
+
+- Code block primitives: `CodeBlock`, `CodeBlockHeader`, `CodeBlockContent`, `CodeBlockGroup`, `CodeBlockIcon`
+- Highlighters: `CodeblockShiki`, `CodeBlockSugarHigh`
+- MDX helpers: `PreShikiComponent`, `PreSugarHighComponent`
+- Blocks: `InlineCode`, `MultiTabs`, `CodeBlockSelectPkg`, `CodeBlockTabsPkg`
+- Utilities: `cn`, `copyToClipboard`, `reactToText`, `highlight`, `sugarHighHighlight`
+- Store: `usePackageManager`

package/packages/code-block/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/packages/code-block/package.json

@@ -1,28 +1,52 @@
 {
-  "name": "@loveui/code-block",
-  "description": "Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.",
+  "name": "@loveui/code-blocks",
   "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "files": [
+    "src",
+    "components.json",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*",
+    "./utils/*": "./src/utils/*",
+    "./stores/*": "./src/stores/*",
+    "./styles/globals.css": "./src/styles/globals.css",
+    "./styles/shiki.css": "./src/styles/shiki.css",
+    "./styles/sugar-high.css": "./src/styles/sugar-high.css",
+    "./components.json": "./components.json"
+  },
+  "scripts": {
+    "check-types": "tsc --noEmit"
+  },
   "dependencies": {
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@loveui/shadcn-ui": "^0.1.0",
-    "@shikijs/transformers": "^3.13.0",
-    "lucide-react": "^0.545.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-icons": "^5.5.0",
-    "shiki": "3.13.0"
+    "@base-ui/react": "1.1.0",
+    "@react-symbols/icons": "1.3.0",
+    "@shikijs/langs": "3.22.0",
+    "@shikijs/themes": "3.22.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "0.563.0",
+    "shiki": "3.22.0",
+    "sugar-high": "0.9.5",
+    "tailwind-merge": "3.4.0",
+    "tw-animate-css": "1.4.0",
+    "zustand": "5.0.11"
   },
-  "devDependencies": {
-    "@loveui/typescript-config": "^0.1.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
-    "typescript": "^5.9.3"
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
   },
-  "files": [
-    "dist",
-    "*.ts",
-    "*.tsx",
-    "*.css",
-    "*.mdx"
-  ]
+  "devDependencies": {
+    "@types/mdx": "2.0.13",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
+    "typescript": "5.9.3"
+  }
 }

package/packages/code-block/src/components/code-block/blocks/copy-with-select-package-manager.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useState, type FC, type SVGProps } from "react";
+import {
+  usePackageManager,
+  type PackageManager,
+} from "../../../stores/packageManager";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+  CodeBlockHeader,
+  CodeBlockIcon,
+} from "../code-block";
+import { CopyButton } from "../copy-button";
+import { CodeblockShiki } from "../client/shiki";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
+
+import { cn } from "../../../utils/cn";
+import { Bun, NPM, PNPM, Yarn } from "@react-symbols/icons";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+
+interface CodeBlockSelectPkgProps {
+  command: string;
+  title: string;
+  type: "install" | "dlx";
+}
+
+interface Command {
+  name: PackageManager;
+  install: string;
+  icon: FC<SVGProps<SVGSVGElement>>;
+  dlx: string;
+}
+
+const Commands: Command[] = [
+  {
+    name: "npm",
+    install: "npm i",
+    icon: NPM,
+    dlx: "npx",
+  },
+  {
+    name: "pnpm",
+    install: "pnpm i",
+    icon: PNPM,
+    dlx: "pnpm dlx",
+  },
+  {
+    name: "yarn",
+    install: "yarn add",
+    icon: Yarn,
+    dlx: "yarn dlx",
+  },
+  {
+    name: "bun",
+    install: "bun add",
+    icon: Bun,
+    dlx: "bunx --bun",
+  },
+];
+
+const SelectPackageManager = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { packageManager, setPackageManager } = usePackageManager();
+
+  const selectedPkg =
+    Commands.find((pkg) => pkg.name === packageManager) ?? Commands[0];
+  const Icon = selectedPkg.icon;
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger
+        title="Select Package Manager"
+        className="group flex cursor-pointer items-center space-x-1 px-2"
+      >
+        <Icon className="size-4" />
+        <ChevronDownIcon
+          size={13}
+          className={cn(
+            "transform transition-transform duration-200 ease-in-out",
+            "group-hover:text-black dark:group-hover:text-white",
+            isOpen && "rotate-180 text-black dark:text-white",
+          )}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" alignOffset={2}>
+        {Commands.map((pkg) => {
+          const PkgIcon = pkg.icon;
+          return (
+            <DropdownMenuItem
+              key={pkg.name}
+              title={`Using ${pkg.name}`}
+              onClick={() => setPackageManager(pkg.name)}
+              className="flex w-full items-center justify-between"
+            >
+              <div className="flex items-center space-x-2">
+                <PkgIcon className="size-4" />
+                <span>{pkg.name}</span>
+              </div>
+              {selectedPkg.name === pkg.name && <CheckIcon width={14} />}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const CodeBlockSelectPkg = ({
+  title,
+  type,
+  command,
+}: CodeBlockSelectPkgProps) => {
+  const { packageManager } = usePackageManager();
+
+  const selectedPkg =
+    Commands.find((pkg) => pkg.name === packageManager) ?? Commands[0];
+  const fullCommand = `${selectedPkg[type]} ${command}`;
+
+  return (
+    <CodeBlock>
+      <CodeBlockHeader>
+        <div className="flex items-center space-x-2">
+          <CodeBlockIcon language="bash" />
+          <span className="font-medium">{title}</span>
+        </div>
+        <div className="flex items-center space-x-2 divide-x divide-neutral-300 dark:divide-neutral-700">
+          <SelectPackageManager />
+          <CopyButton className="pl-1" content={fullCommand} />
+        </div>
+      </CodeBlockHeader>
+      <CodeBlockContent>
+        <CodeblockShiki language="bash" code={fullCommand} />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+};
+
+export { CodeBlockSelectPkg, SelectPackageManager };

package/packages/code-block/src/components/code-block/blocks/copy-with-tabs-package-manager.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { FC, SVGProps } from "react";
+import {
+  usePackageManager,
+  type PackageManager,
+} from "../../../stores/packageManager";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+  CodeBlockHeader,
+  CodeBlockIcon,
+} from "../code-block";
+import { CopyButton } from "../copy-button";
+import { CodeblockShiki } from "../client/shiki";
+
+import { Bun, NPM, PNPM, Yarn } from "@react-symbols/icons";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+
+interface Command {
+  name: PackageManager;
+  install: string;
+  icon: FC<SVGProps<SVGSVGElement>>;
+  dlx: string;
+}
+
+interface CodeBlockTabsPkgProps {
+  command: string;
+  type: "install" | "dlx";
+}
+
+const Commands: Command[] = [
+  {
+    name: "npm",
+    install: "npm i",
+    icon: NPM,
+    dlx: "npx",
+  },
+  {
+    name: "pnpm",
+    install: "pnpm i",
+    icon: PNPM,
+    dlx: "pnpm dlx",
+  },
+  {
+    name: "yarn",
+    install: "yarn add",
+    icon: Yarn,
+    dlx: "yarn dlx",
+  },
+  {
+    name: "bun",
+    install: "bun add",
+    icon: Bun,
+    dlx: "bunx --bun",
+  },
+];
+
+const CodeBlockTabsPkg = ({ command, type }: CodeBlockTabsPkgProps) => {
+  const { packageManager, setPackageManager } = usePackageManager();
+
+  const selectedPkg =
+    Commands.find((pkg) => pkg.name === packageManager) ?? Commands[0];
+  const fullCommand = `${selectedPkg[type]} ${command}`;
+
+  return (
+    <Tabs
+      className="w-full gap-1"
+      value={packageManager}
+      onValueChange={(value) => setPackageManager(value as PackageManager)}
+    >
+      <CodeBlock>
+        <CodeBlockHeader>
+          <div className="flex items-center space-x-1">
+            <CodeBlockIcon language="bash" />
+            <TabsList className="gap-1 border-0 bg-transparent dark:bg-transparent">
+              {Commands.map((cmd) => {
+                const Icon = cmd.icon;
+                return (
+                  <TabsTrigger
+                    key={cmd.name}
+                    value={cmd.name}
+                    className="data-[state=active]:shadow-none"
+                  >
+                    <Icon className="size-4" />
+                    <span>{cmd.name}</span>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </div>
+          <CopyButton className="pl-1" content={fullCommand} />
+        </CodeBlockHeader>
+        <CodeBlockContent>
+          {Commands.map((cmd) => (
+            <TabsContent key={cmd.name} value={cmd.name} className="mt-0">
+              <CodeblockShiki
+                language="bash"
+                code={`${cmd[type]} ${command}`}
+              />
+            </TabsContent>
+          ))}
+        </CodeBlockContent>
+      </CodeBlock>
+    </Tabs>
+  );
+};
+
+export { CodeBlockTabsPkg };

package/packages/code-block/src/components/code-block/blocks/inline-code.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { Languages } from "../../../utils/shiki/highlight";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+} from "../code-block";
+import { CopyButton } from "../copy-button";
+import { CodeblockShiki } from "../client/shiki";
+
+interface InlineCodeProps {
+  code: string;
+  language?: Languages;
+}
+
+const InlineCode = ({ code, language = "bash" }: InlineCodeProps) => {
+  return (
+    <CodeBlock>
+      <CodeBlockContent className="flex w-full items-center justify-between">
+        <CodeblockShiki language={language} code={code} />
+        <CopyButton className="px-3" content={code} />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+};
+
+export default InlineCode;