@create-ui/cli 0.5.3 → 0.5.5

package/dist/skills/createui/rules/icons.md

@@ -2,7 +2,7 @@
 
 ## Contents
 
-- [Import from the configured icon library](#import-from-the-configured-icon-library)
+- [Icons and assets come from @create-ui/assets](#icons-and-assets-come-from-create-uiassets)
 - [Icons in Button use the leadingIcon / trailingIcon props](#icons-in-button-use-the-leadingicon--trailingicon-props)
 - [Icon-only buttons](#icon-only-buttons)
 - [No sizing classes on icons inside components](#no-sizing-classes-on-icons-inside-components)
@@ -10,11 +10,28 @@
 
 ---
 
-## Import from the configured icon library
+## Icons and assets come from @create-ui/assets
 
-**Always import icons from the project's configured `iconLibrary`.** Read the `iconLibrary` field from `createui info` (or `components.json`): `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. The resolved default is `lucide`. Never hardcode an icon package.
+**All icons and marks come from `@create-ui/assets`** — Create UI's own asset library. Registry components already import from it, and the CLI ships those imports as-is. Never reach for `lucide-react`, `@tabler/icons-react`, or any other icon package.
 
-Inside this monorepo, components import their icons from `@create-ui/assets/icons` (RemixIcon `Ri*`, e.g. `RiSearchLine`, `RiArrowRightLine`, `RiCheckLine`). In an end-user project, use whatever `iconLibrary` resolves to.
+**General-purpose UI icons** → `@create-ui/assets/icons` (Remix Icon, `Ri*` names). This subpath re-exports [`@remixicon/react`](https://remixicon.com), so the full Remix set is available:
+
+```tsx
+import { RiArrowDownSLine, RiSearchLine, RiCheckLine } from "@create-ui/assets/icons"
+```
+
+**Brand, flag, payment, social, and badge marks** → category subpaths (PascalCase, 900+ typed SVG components):
+
+```tsx
+import { Github } from "@create-ui/assets/social"
+import { Turkey } from "@create-ui/assets/flags"
+import { VisaColor } from "@create-ui/assets/payments"
+import { Docker } from "@create-ui/assets/brands"
+```
+
+Subpaths: `icons` (Remix UI icons), `social`, `flags`, `payments`, `brands`, `banks`, `badges`, `crypto` (Web3 Icons). Marks that ship multiple treatments carry a suffix — pick the variant: `VisaColor` / `VisaBlack` / `VisaWhite`.
+
+**Sizing & color differ from UI icons.** Standalone marks have their source dimensions stripped, so set a size explicitly (`className="size-6"` or `width`/`height`), and their brand colors are baked in — don't recolor; use the `Black` / `White` variant for contrast. This is the opposite of `Ri*` icons rendered *inside* Create UI components (`Button`, `DropdownMenuItem`, …), which are auto-sized via CVA — see [No sizing classes on icons inside components](#no-sizing-classes-on-icons-inside-components).
 
 ---
 
@@ -26,22 +43,22 @@ Inside this monorepo, components import their icons from `@create-ui/assets/icon
 
 ```tsx
 <Button>
-  <SearchIcon className="mr-2 size-4" />
+  <RiSearchLine className="mr-2 size-4" />
   Search
 </Button>
 
 <Button>
   Next
-  <ArrowRightIcon className="ml-2 size-4" />
+  <RiArrowRightLine className="ml-2 size-4" />
 </Button>
 ```
 
 **Correct:**
 
 ```tsx
-<Button leadingIcon={<SearchIcon />}>Search</Button>
+<Button leadingIcon={<RiSearchLine />}>Search</Button>
 
-<Button trailingIcon={<ArrowRightIcon />}>Next</Button>
+<Button trailingIcon={<RiArrowRightLine />}>Next</Button>
 ```
 
 ---
@@ -54,31 +71,31 @@ For a button that shows only an icon, set `iconOnly`, pass the icon via `leading
 
 ```tsx
 <Button>
-  <SearchIcon className="size-4" />
+  <RiSearchLine className="size-4" />
 </Button>
 ```
 
 **Correct:**
 
 ```tsx
-<Button iconOnly aria-label="Search" leadingIcon={<SearchIcon />} />
+<Button iconOnly aria-label="Search" leadingIcon={<RiSearchLine />} />
 
-<Button iconOnly aria-label="More options" appearance="ghost" leadingIcon={<MoreIcon />} />
+<Button iconOnly aria-label="More options" appearance="ghost" leadingIcon={<RiMore2Line />} />
 ```
 
 ---
 
 ## No sizing classes on icons inside components
 
-Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons rendered inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other Create UI components — unless the user explicitly asks for a custom icon size.
+Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons rendered inside `Button`, `DropdownMenuItem`, `InlineAlert`, `Toast`, or other Create UI components — unless the user explicitly asks for a custom icon size.
 
 **Incorrect:**
 
 ```tsx
-<Button leadingIcon={<SearchIcon className="size-4" />}>Search</Button>
+<Button leadingIcon={<RiSearchLine className="size-4" />}>Search</Button>
 
 <DropdownMenuItem>
-  <SettingsIcon className="mr-2 size-4" />
+  <RiSettings3Line className="mr-2 size-4" />
   Settings
 </DropdownMenuItem>
 ```
@@ -86,10 +103,10 @@ Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other s
 **Correct:**
 
 ```tsx
-<Button leadingIcon={<SearchIcon />}>Search</Button>
+<Button leadingIcon={<RiSearchLine />}>Search</Button>
 
 <DropdownMenuItem>
-  <SettingsIcon />
+  <RiSettings3Line />
   Settings
 </DropdownMenuItem>
 ```
@@ -98,33 +115,32 @@ Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other s
 
 ## Pass icons as component values, not string keys
 
-Use `icon={CheckIcon}`, not a string key into a lookup map.
+Use `icon={RiCheckLine}`, not a string key into a lookup map.
 
 **Incorrect:**
 
 ```tsx
 const iconMap = {
-  check: CheckIcon,
-  alert: AlertIcon,
+  check: RiCheckLine,
+  alert: RiAlertLine,
 }
 
-function StatusBadge({ icon }: { icon: string }) {
+function StatusIcon({ icon }: { icon: string }) {
   const Icon = iconMap[icon]
   return <Icon />
 }
 
-<StatusBadge icon="check" />
+<StatusIcon icon="check" />
 ```
 
 **Correct:**
 
 ```tsx
-// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
-import { CheckIcon } from "lucide-react"
+import { RiCheckLine } from "@create-ui/assets/icons"
 
-function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
+function StatusIcon({ icon: Icon }: { icon: React.ComponentType }) {
   return <Icon />
 }
 
-<StatusBadge icon={CheckIcon} />
+<StatusIcon icon={RiCheckLine} />
 ```

package/dist/skills/createui/rules/styling.md

@@ -87,7 +87,7 @@ Create UI's own `Button` implements its `danger` / `success` variants with the r
 
 Every primitive exposes its full visual range through typed props. Drive appearance through those props, not through manual `border` / `bg` / `hover:` class overrides.
 
-`Button` has four styling axes (verify any other component by reading its source in `apps/v4/registry/ui/<name>.tsx`):
+`Button` has four styling axes (verify any other component's props from its installed source under the project's `ui` alias — e.g. `components/ui/<name>.tsx` — or with `npx @create-ui/cli view <name>`):
 
 - `variant`: `primary` (default), `neutral-solid`, `neutral-light`, `danger`, `success`, `inverse-solid`, `inverse-light`
 - `appearance`: `solid` (default), `outline`, `ghost`, `soft`
@@ -139,17 +139,13 @@ Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for ove
 **Incorrect:**
 
 ```tsx
-<Card className="bg-sky-100 text-sky-900 font-bold">
-  <CardContent>Dashboard</CardContent>
-</Card>
+<Input className="bg-sky-100 text-sky-900 font-bold" placeholder="Search…" />
 ```
 
 **Correct:**
 
 ```tsx
-<Card className="mx-auto max-w-md">
-  <CardContent>Dashboard</CardContent>
-</Card>
+<Input className="mx-auto max-w-md" placeholder="Search…" />
 ```
 
 ---
@@ -210,7 +206,7 @@ Semantic tokens already swap with the `.dark` class — don't write parallel `da
 
 ## Use cn() for conditional classes
 
-Use `cn()` for conditional or merged class names instead of template-string ternaries. Import it from `@/lib/utils` in a user project (in this monorepo, components import from `@/registry/lib/utils`).
+Use `cn()` for conditional or merged class names instead of template-string ternaries. Import it from `@/lib/utils` (the project's `utils` alias).
 
 **Incorrect:**
 
@@ -250,4 +246,4 @@ Use `outline-primary-700` (or `outline-primary-500`) for primary controls and `o
 
 ## No manual z-index on overlay components
 
-`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, and `HoverCard` manage their own stacking. Never add `z-50` or `z-[999]`.
+`DropdownMenu`, `Tooltip`, `InfoTooltip`, and `CommandDialog` manage their own stacking. Never add `z-50` or `z-[999]`.

package/dist/utils/index.js

@@ -1,2 +1,2 @@
-import {a}from'../chunk-VQCXAURP.js';import {W as W$1}from'../chunk-EWAP55CF.js';export{B as transformMenu}from'../chunk-EWAP55CF.js';import'../chunk-Y7WZRQWW.js';import J from'postcss';import M from'postcss-selector-parser';import {z as z$1}from'zod';import {Project,ScriptKind,SyntaxKind,Node}from'ts-morph';var A="cn-",V=z$1.record(z$1.string().startsWith(A),z$1.string());function v(t){let e=J.parse(t),r={};return e.walkRules(n=>{let s=n.selectors??[];if(s.length===0)return;let i=F(n);if(i)for(let g of s){let l=R(g);M(o=>{o.each(a=>{let f=$(a);if(!f)return;let u=f.value;u.startsWith(A)&&(r[u]=r[u]?`${i} ${r[u]}`:i);});}).processSync(l);}}),V.parse(r)}function R(t){return t.replace(/\s*&\s*/g,"").trim()}function F(t){let e=[];for(let r of t.nodes||[])if(r.type==="atrule"&&r.name==="apply"){let n=r.params.trim();n&&e.push(n);}return e.length===0?null:e.join(" ")}function $(t){let e=[];return t.walkClasses(r=>{r.value.startsWith(A)&&e.push(r);}),e.length===0?null:e[e.length-1]}var z=new Set(["cn-menu-target"]);function p(t){return Node.isStringLiteral(t)||Node.isNoSubstitutionTemplateLiteral(t)}var O=async({sourceFile:t,styleMap:e})=>{let r=new Set;return W(t,e,r),w(t,e,r),_(t,e,r),t};function E(t,e,r){let n=t.getLiteralText(),s=y(n);if(s.length===0)return;let i=s.filter(l=>!r.has(l));if(i.length===0){let l=m(n);t.setLiteralValue(l);return}let g=i.map(l=>e[l]).filter(l=>!!l);if(g.length>0){let l=g.join(" "),o=m(d(l,n));t.setLiteralValue(o),i.forEach(a=>r.add(a));}else {let l=m(n);t.setLiteralValue(l);}}function W(t,e,r){t.forEachDescendant(n=>{if(!Node.isCallExpression(n))return;let s=n.getExpression();if(!Node.isIdentifier(s)||s.getText()!=="cva")return;let i=n.getArguments()[0];Node.isStringLiteral(i)&&E(i,e,r);let g=n.getArguments()[1];if(!g||!Node.isObjectLiteralExpression(g))return;let l=g.getProperties().find(a=>Node.isPropertyAssignment(a)&&Node.isIdentifier(a.getNameNode())&&a.getNameNode().getText()==="variants");if(!l||!Node.isPropertyAssignment(l))return;let o=l.getInitializer();!o||!Node.isObjectLiteralExpression(o)||o.getProperties().forEach(a=>{if(!Node.isPropertyAssignment(a))return;let f=a.getInitializer();!f||!Node.isObjectLiteralExpression(f)||f.getProperties().forEach(u=>{if(!Node.isPropertyAssignment(u))return;let x=u.getInitializer();x&&Node.isStringLiteral(x)&&E(x,e,r);});});});}function w(t,e,r){t.forEachDescendant(n=>{if(!Node.isJsxAttribute(n)||n.getNameNode().getText()!=="className")return;let s=n.getInitializer();if(!s)return;let i=D(s);if(i.length===0)return;let g=n.getParent()?.getParent();if(!g||!Node.isJsxOpeningElement(g)&&!Node.isJsxSelfClosingElement(g))return;let l=i.filter(a=>!r.has(a));if(l.length===0){I(s);return}let o=l.map(a=>e[a]).filter(a=>!!a);if(o.length>0){let a=o.join(" ");B(g,a);}else I(s);});}function D(t){let e=[];if(p(t))return y(t.getLiteralText());if(!Node.isJsxExpression(t))return e;let r=t.getExpression();if(!r)return e;if(p(r))return y(r.getLiteralText());if(Node.isCallExpression(r)&&T(r))for(let n of r.getArguments())p(n)&&e.push(...y(n.getLiteralText()));return e}function I(t){if(p(t)){let r=m(t.getLiteralText());t.setLiteralValue(r);return}if(!Node.isJsxExpression(t))return;let e=t.getExpression();if(e){if(p(e)){let r=m(e.getLiteralText());e.setLiteralValue(r);return}if(Node.isCallExpression(e)&&T(e)){for(let r of e.getArguments())if(p(r)){let n=m(r.getLiteralText());r.setLiteralValue(n);}C(e);}}}function y(t){let e=t.matchAll(/\bcn-[\w-]+\b/g);return Array.from(e,r=>r[0])}function m(t){return t.replace(/\bcn-[\w-]+\b/g,e=>z.has(e)?e:"").replace(/\s+/g," ").trim()}function C(t){if(!T(t))return;let e=t.getArguments(),r=e.filter(n=>p(n)?n.getLiteralText().trim()!=="":true);if(r.length!==e.length){let n=r.map(i=>i.getText()),s=t.getParent();s&&Node.isJsxExpression(s)?s.replaceWithText(`{cn(${n.join(", ")})}`):t.replaceWithText(`cn(${n.join(", ")})`);}}function B(t,e){if(!Node.isJsxOpeningElement(t)&&!Node.isJsxSelfClosingElement(t))return;let r=t.getAttributes().find(i=>Node.isJsxAttribute(i)&&i.getNameNode().getText()==="className");if(!r||!Node.isJsxAttribute(r)){t.addAttribute({name:"className",initializer:`{cn(${JSON.stringify(e)})}`});return}let n=r.getInitializer();if(!n){r.setInitializer(`{cn(${JSON.stringify(e)})}`);return}if(p(n)){let i=n.getLiteralText(),g=m(d(e,i));n.setLiteralValue(g);return}if(!Node.isJsxExpression(n))return;let s=n.getExpression();if(!s){r.setInitializer(`{cn(${JSON.stringify(e)})}`);return}if(p(s)){let i=s.getLiteralText(),g=m(d(e,i));s.setLiteralValue(g);return}if(Node.isCallExpression(s)&&T(s)){let i=s.getArguments()[0];if(p(i)){let o=i.getLiteralText(),a=m(d(e,o));i.setLiteralValue(a);for(let f=1;f<s.getArguments().length;f++){let u=s.getArguments()[f];if(p(u)){let x=u.getLiteralText(),S=m(x);S!==x&&u.setLiteralValue(S);}}C(s);return}let g=s.getArguments().map(o=>{if(p(o)){let a=m(o.getLiteralText());return a?JSON.stringify(a):null}return o.getText()}).filter(o=>o!==null),l=[JSON.stringify(e),...g];r.setInitializer(`{cn(${l.join(", ")})}`);return}r.setInitializer(`{cn(${JSON.stringify(e)}, ${s.getText()})}`);}function d(t,e){let r=e.split(/\s+/).filter(Boolean);return [...t.split(/\s+/).filter(Boolean),...r].join(" ").trim()}function T(t){let e=t.getExpression();return Node.isIdentifier(e)&&e.getText()==="cn"}function _(t,e,r){t.forEachDescendant(n=>{if(!Node.isCallExpression(n))return;let s=n.getExpression();if(!(!Node.isIdentifier(s)||s.getText()!=="mergeProps"))for(let i of n.getArguments()){if(!Node.isObjectLiteralExpression(i))continue;let g=i.getProperties().find(o=>Node.isPropertyAssignment(o)&&Node.isIdentifier(o.getNameNode())&&o.getNameNode().getText()==="className");if(!g||!Node.isPropertyAssignment(g))continue;let l=g.getInitializer();if(l&&Node.isCallExpression(l)&&T(l)){let o=k(l);if(o.length===0)continue;let a=o.filter(u=>!r.has(u));if(a.length===0){b(l);continue}let f=a.map(u=>e[u]).filter(u=>!!u);if(f.length>0){let u=f.join(" ");K(l,u,r,a);}else b(l);}}});}function k(t){let e=[];for(let r of t.getArguments())p(r)&&e.push(...y(r.getLiteralText()));return e}function b(t){for(let e of t.getArguments())if(p(e)){let r=m(e.getLiteralText());e.setLiteralValue(r);}C(t);}function K(t,e,r,n){let s=t.getArguments()[0];if(p(s)){let o=s.getLiteralText(),a=m(d(e,o));s.setLiteralValue(a),n.forEach(f=>r.add(f));for(let f=1;f<t.getArguments().length;f++){let u=t.getArguments()[f];if(p(u)){let x=u.getLiteralText(),S=m(x);S!==x&&u.setLiteralValue(S);}}C(t);return}let i=t.getArguments().map(o=>{if(p(o)){let a=m(o.getLiteralText());return a?JSON.stringify(a):null}return o.getText()}).filter(o=>o!==null),g=[JSON.stringify(e),...i];n.forEach(o=>r.add(o)),t.getParent()&&t.replaceWithText(`cn(${g.join(", ")})`);}async function X(t,{styleMap:e,transformers:r=[O]}){let s=new Project({useInMemoryFileSystem:true}).createSourceFile("component.tsx",t,{scriptKind:ScriptKind.TSX,overwrite:true});for(let i of r)await i({sourceFile:s,styleMap:e});return s.getText()}var P="lucide",q=async({sourceFile:t,config:e})=>{if(!e.iconLibrary||!(e.iconLibrary in a))return t;let r=P,n=e.iconLibrary;if(r===n)return t;let s=await W$1(),i=[];for(let g of t.getImportDeclarations()??[])if(g.getModuleSpecifier()?.getText()===`"${a[P].import}"`){for(let l of g.getNamedImports()??[]){let o=l.getName(),a=s[o]?.[n];!a||i.includes(a)||(i.push(a),l.remove(),t.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement).filter(f=>f.getTagNameNode()?.getText()===o).forEach(f=>f.getTagNameNode()?.replaceWithText(a)));}g.getNamedImports()?.length===0&&g.remove();}if(i.length>0){let g=t.addImportDeclaration({moduleSpecifier:a[n]?.import,namedImports:i.map(l=>({name:l}))});H(t)||g.replaceWithText(g.getText().replace(";",""));}return t};function H(t){return t.getImportDeclarations()?.[0]?.getText().endsWith(";")??false}export{v as createStyleMap,q as transformIcons,X as transformStyle};//# sourceMappingURL=index.js.map
+import {a}from'../chunk-VQCXAURP.js';import {W as W$1}from'../chunk-5YX4Z2U3.js';export{B as transformMenu}from'../chunk-5YX4Z2U3.js';import'../chunk-Y7WZRQWW.js';import J from'postcss';import M from'postcss-selector-parser';import {z as z$1}from'zod';import {Project,ScriptKind,SyntaxKind,Node}from'ts-morph';var A="cn-",V=z$1.record(z$1.string().startsWith(A),z$1.string());function v(t){let e=J.parse(t),r={};return e.walkRules(n=>{let s=n.selectors??[];if(s.length===0)return;let i=F(n);if(i)for(let g of s){let l=R(g);M(o=>{o.each(a=>{let f=$(a);if(!f)return;let u=f.value;u.startsWith(A)&&(r[u]=r[u]?`${i} ${r[u]}`:i);});}).processSync(l);}}),V.parse(r)}function R(t){return t.replace(/\s*&\s*/g,"").trim()}function F(t){let e=[];for(let r of t.nodes||[])if(r.type==="atrule"&&r.name==="apply"){let n=r.params.trim();n&&e.push(n);}return e.length===0?null:e.join(" ")}function $(t){let e=[];return t.walkClasses(r=>{r.value.startsWith(A)&&e.push(r);}),e.length===0?null:e[e.length-1]}var z=new Set(["cn-menu-target"]);function p(t){return Node.isStringLiteral(t)||Node.isNoSubstitutionTemplateLiteral(t)}var O=async({sourceFile:t,styleMap:e})=>{let r=new Set;return W(t,e,r),w(t,e,r),_(t,e,r),t};function E(t,e,r){let n=t.getLiteralText(),s=y(n);if(s.length===0)return;let i=s.filter(l=>!r.has(l));if(i.length===0){let l=m(n);t.setLiteralValue(l);return}let g=i.map(l=>e[l]).filter(l=>!!l);if(g.length>0){let l=g.join(" "),o=m(d(l,n));t.setLiteralValue(o),i.forEach(a=>r.add(a));}else {let l=m(n);t.setLiteralValue(l);}}function W(t,e,r){t.forEachDescendant(n=>{if(!Node.isCallExpression(n))return;let s=n.getExpression();if(!Node.isIdentifier(s)||s.getText()!=="cva")return;let i=n.getArguments()[0];Node.isStringLiteral(i)&&E(i,e,r);let g=n.getArguments()[1];if(!g||!Node.isObjectLiteralExpression(g))return;let l=g.getProperties().find(a=>Node.isPropertyAssignment(a)&&Node.isIdentifier(a.getNameNode())&&a.getNameNode().getText()==="variants");if(!l||!Node.isPropertyAssignment(l))return;let o=l.getInitializer();!o||!Node.isObjectLiteralExpression(o)||o.getProperties().forEach(a=>{if(!Node.isPropertyAssignment(a))return;let f=a.getInitializer();!f||!Node.isObjectLiteralExpression(f)||f.getProperties().forEach(u=>{if(!Node.isPropertyAssignment(u))return;let x=u.getInitializer();x&&Node.isStringLiteral(x)&&E(x,e,r);});});});}function w(t,e,r){t.forEachDescendant(n=>{if(!Node.isJsxAttribute(n)||n.getNameNode().getText()!=="className")return;let s=n.getInitializer();if(!s)return;let i=D(s);if(i.length===0)return;let g=n.getParent()?.getParent();if(!g||!Node.isJsxOpeningElement(g)&&!Node.isJsxSelfClosingElement(g))return;let l=i.filter(a=>!r.has(a));if(l.length===0){I(s);return}let o=l.map(a=>e[a]).filter(a=>!!a);if(o.length>0){let a=o.join(" ");B(g,a);}else I(s);});}function D(t){let e=[];if(p(t))return y(t.getLiteralText());if(!Node.isJsxExpression(t))return e;let r=t.getExpression();if(!r)return e;if(p(r))return y(r.getLiteralText());if(Node.isCallExpression(r)&&T(r))for(let n of r.getArguments())p(n)&&e.push(...y(n.getLiteralText()));return e}function I(t){if(p(t)){let r=m(t.getLiteralText());t.setLiteralValue(r);return}if(!Node.isJsxExpression(t))return;let e=t.getExpression();if(e){if(p(e)){let r=m(e.getLiteralText());e.setLiteralValue(r);return}if(Node.isCallExpression(e)&&T(e)){for(let r of e.getArguments())if(p(r)){let n=m(r.getLiteralText());r.setLiteralValue(n);}C(e);}}}function y(t){let e=t.matchAll(/\bcn-[\w-]+\b/g);return Array.from(e,r=>r[0])}function m(t){return t.replace(/\bcn-[\w-]+\b/g,e=>z.has(e)?e:"").replace(/\s+/g," ").trim()}function C(t){if(!T(t))return;let e=t.getArguments(),r=e.filter(n=>p(n)?n.getLiteralText().trim()!=="":true);if(r.length!==e.length){let n=r.map(i=>i.getText()),s=t.getParent();s&&Node.isJsxExpression(s)?s.replaceWithText(`{cn(${n.join(", ")})}`):t.replaceWithText(`cn(${n.join(", ")})`);}}function B(t,e){if(!Node.isJsxOpeningElement(t)&&!Node.isJsxSelfClosingElement(t))return;let r=t.getAttributes().find(i=>Node.isJsxAttribute(i)&&i.getNameNode().getText()==="className");if(!r||!Node.isJsxAttribute(r)){t.addAttribute({name:"className",initializer:`{cn(${JSON.stringify(e)})}`});return}let n=r.getInitializer();if(!n){r.setInitializer(`{cn(${JSON.stringify(e)})}`);return}if(p(n)){let i=n.getLiteralText(),g=m(d(e,i));n.setLiteralValue(g);return}if(!Node.isJsxExpression(n))return;let s=n.getExpression();if(!s){r.setInitializer(`{cn(${JSON.stringify(e)})}`);return}if(p(s)){let i=s.getLiteralText(),g=m(d(e,i));s.setLiteralValue(g);return}if(Node.isCallExpression(s)&&T(s)){let i=s.getArguments()[0];if(p(i)){let o=i.getLiteralText(),a=m(d(e,o));i.setLiteralValue(a);for(let f=1;f<s.getArguments().length;f++){let u=s.getArguments()[f];if(p(u)){let x=u.getLiteralText(),S=m(x);S!==x&&u.setLiteralValue(S);}}C(s);return}let g=s.getArguments().map(o=>{if(p(o)){let a=m(o.getLiteralText());return a?JSON.stringify(a):null}return o.getText()}).filter(o=>o!==null),l=[JSON.stringify(e),...g];r.setInitializer(`{cn(${l.join(", ")})}`);return}r.setInitializer(`{cn(${JSON.stringify(e)}, ${s.getText()})}`);}function d(t,e){let r=e.split(/\s+/).filter(Boolean);return [...t.split(/\s+/).filter(Boolean),...r].join(" ").trim()}function T(t){let e=t.getExpression();return Node.isIdentifier(e)&&e.getText()==="cn"}function _(t,e,r){t.forEachDescendant(n=>{if(!Node.isCallExpression(n))return;let s=n.getExpression();if(!(!Node.isIdentifier(s)||s.getText()!=="mergeProps"))for(let i of n.getArguments()){if(!Node.isObjectLiteralExpression(i))continue;let g=i.getProperties().find(o=>Node.isPropertyAssignment(o)&&Node.isIdentifier(o.getNameNode())&&o.getNameNode().getText()==="className");if(!g||!Node.isPropertyAssignment(g))continue;let l=g.getInitializer();if(l&&Node.isCallExpression(l)&&T(l)){let o=k(l);if(o.length===0)continue;let a=o.filter(u=>!r.has(u));if(a.length===0){b(l);continue}let f=a.map(u=>e[u]).filter(u=>!!u);if(f.length>0){let u=f.join(" ");K(l,u,r,a);}else b(l);}}});}function k(t){let e=[];for(let r of t.getArguments())p(r)&&e.push(...y(r.getLiteralText()));return e}function b(t){for(let e of t.getArguments())if(p(e)){let r=m(e.getLiteralText());e.setLiteralValue(r);}C(t);}function K(t,e,r,n){let s=t.getArguments()[0];if(p(s)){let o=s.getLiteralText(),a=m(d(e,o));s.setLiteralValue(a),n.forEach(f=>r.add(f));for(let f=1;f<t.getArguments().length;f++){let u=t.getArguments()[f];if(p(u)){let x=u.getLiteralText(),S=m(x);S!==x&&u.setLiteralValue(S);}}C(t);return}let i=t.getArguments().map(o=>{if(p(o)){let a=m(o.getLiteralText());return a?JSON.stringify(a):null}return o.getText()}).filter(o=>o!==null),g=[JSON.stringify(e),...i];n.forEach(o=>r.add(o)),t.getParent()&&t.replaceWithText(`cn(${g.join(", ")})`);}async function X(t,{styleMap:e,transformers:r=[O]}){let s=new Project({useInMemoryFileSystem:true}).createSourceFile("component.tsx",t,{scriptKind:ScriptKind.TSX,overwrite:true});for(let i of r)await i({sourceFile:s,styleMap:e});return s.getText()}var P="lucide",q=async({sourceFile:t,config:e})=>{if(!e.iconLibrary||!(e.iconLibrary in a))return t;let r=P,n=e.iconLibrary;if(r===n)return t;let s=await W$1(),i=[];for(let g of t.getImportDeclarations()??[])if(g.getModuleSpecifier()?.getText()===`"${a[P].import}"`){for(let l of g.getNamedImports()??[]){let o=l.getName(),a=s[o]?.[n];!a||i.includes(a)||(i.push(a),l.remove(),t.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement).filter(f=>f.getTagNameNode()?.getText()===o).forEach(f=>f.getTagNameNode()?.replaceWithText(a)));}g.getNamedImports()?.length===0&&g.remove();}if(i.length>0){let g=t.addImportDeclaration({moduleSpecifier:a[n]?.import,namedImports:i.map(l=>({name:l}))});H(t)||g.replaceWithText(g.getText().replace(";",""));}return t};function H(t){return t.getImportDeclarations()?.[0]?.getText().endsWith(";")??false}export{v as createStyleMap,q as transformIcons,X as transformStyle};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@create-ui/cli",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"

package/dist/skills/createui/contributing.md

@@ -1,213 +0,0 @@
-# Contributing to the Create UI Monorepo
-
-This guide is for contributors working **inside** the Create UI monorepo — adding or editing
-registry components, the CLI, or the documentation site. If you only want to consume Create UI in
-your own app, see [`cli.md`](./cli.md) instead.
-
-## Contents
-
-- [Monorepo layout](#monorepo-layout)
-- [Dev, build & quality commands](#dev-build--quality-commands)
-- [Tests](#tests)
-- [The registry](#the-registry)
-- [Authoring a component](#authoring-a-component)
-- [Scaffolding & validation](#scaffolding--validation)
-- [Testing the CLI locally](#testing-the-cli-locally)
-- [Website: three-layer architecture](#website-three-layer-architecture)
-- [Component rules recap](#component-rules-recap)
-- [Commit convention](#commit-convention)
-
-## Monorepo layout
-
-Create UI is a **pnpm 9.0.6 + Turbo** monorepo with two workspaces:
-
-| Workspace | What it is | Stack |
-|---|---|---|
-| `apps/v4` | Documentation site & component showcase | Next.js 16 (App Router), React 19, Tailwind CSS v4 |
-| `packages/createui` | The `createui` CLI published to npm | Commander.js, tsup (ESM-only) |
-
-The site is also where the **registry** lives (`apps/v4/registry/`). The CLI reads that registry —
-in the monorepo it points at the local dev server (`http://localhost:4000/r`).
-
-## Dev, build & quality commands
-
-Run all commands from the repo root. Package manager is **pnpm** — do not use npm or yarn.
-
-```bash
-# Develop
-pnpm dev            # everything, in parallel via Turbo
-pnpm v4:dev         # docs/showcase site only (port 4000)
-pnpm createui:dev   # CLI only, in watch mode
-
-# Build
-pnpm build          # all workspaces
-pnpm v4:build       # site only
-pnpm createui:build # CLI only
-
-# Quality
-pnpm check          # lint + typecheck + format:check (run this before opening a PR)
-pnpm lint           # ESLint
-pnpm lint:fix       # ESLint with --fix
-pnpm typecheck      # TypeScript
-pnpm format:write   # Prettier write
-pnpm format:check   # Prettier check
-```
-
-## Tests
-
-The test suite needs the v4 dev server running; `pnpm test` handles that for you.
-
-```bash
-pnpm test       # starts the v4 dev server, then runs Vitest
-pnpm test:dev   # runs Vitest against an already-running server (no startup)
-```
-
-## The registry
-
-Every UI component is defined under `apps/v4/registry/` and served to users through the CLI.
-
-```
-apps/v4/registry/
-  ui/         core UI components (button, select, dialog, …)
-  examples/   demos shown in the docs
-  blocks/     larger composed blocks
-  hooks/      custom React hooks
-  lib/        utilities (e.g. cn())
-  internal/   internal-only components (not exposed to users)
-  components/  shared registry components
-```
-
-Each subdirectory has a `_registry.ts` that exports a metadata array, and every array is aggregated
-in `apps/v4/registry/registry.ts`.
-
-In-repo registry entries **omit `content`** — `pnpm registry:build` injects each file's source when
-it generates `apps/v4/public/r/<name>.json`. Real entry shapes:
-
-```ts
-// apps/v4/registry/ui/_registry.ts
-{
-  name: "button",
-  type: "registry:ui",
-  dependencies: ["class-variance-authority", "radix-ui"],
-  files: [{ path: "ui/button.tsx", type: "registry:ui" }],
-}
-
-{
-  name: "select",
-  type: "registry:ui",
-  registryDependencies: ["field", "dropdown-menu"],
-  files: [{ path: "ui/select.tsx", type: "registry:ui" }],
-}
-```
-
-The `type` values, file objects (`{ path, type, content?, target? }`), and item fields are defined by
-the registry-item schema (`$schema: https://createui.co/schema/registry-item.json`). Use
-`dependencies` for npm packages and `registryDependencies` for other registry items the component
-needs.
-
-## Authoring a component
-
-1. Create `apps/v4/registry/ui/<name>.tsx`:
-   - use **`cva`** for variants and **`cn()`** (from `@/registry/lib/utils`) to merge classes
-   - put `data-slot="<name>"` on the root element
-   - support polymorphism with **`asChild`** via the Radix `Slot`
-   - type props as `React.ComponentProps<"el"> & VariantProps<typeof variants> & { … }`
-   - use a **named export** (`export { Name }`)
-2. Add an entry to `apps/v4/registry/ui/_registry.ts` (shape above).
-3. Add a demo under `apps/v4/registry/examples/<name>-demo.tsx` and register it in
-   `apps/v4/registry/examples/_registry.ts`.
-4. Run **`pnpm registry:build`** to rebuild the registry (it also runs `lint:fix` + format and
-   regenerates the `public/r/*.json` files).
-
-> Filenames are **kebab-case**; exports are PascalCase named exports. There is **no** `pnpm tokens:build` —
-> tokens live in `apps/v4/styles/globals.css` and are edited directly.
-
-## Scaffolding & validation
-
-```bash
-pnpm scaffold <name>              # create a component + example + registry entry
-pnpm scaffold <name> --existing   # generate an example from an existing component (parses CVA)
-pnpm scaffold <name> --dry-run    # preview output without writing files
-pnpm scaffold <name> --force      # overwrite existing files
-
-pnpm validate:registries          # validate every _registry.ts against the schema
-```
-
-## Testing the CLI locally
-
-The root `pnpm createui` script runs the **local CLI build** against `http://localhost:4000/r`, so
-start the site first:
-
-```bash
-pnpm v4:dev                          # serves the local registry at http://localhost:4000/r
-pnpm createui add -c ~/path/to/app   # run the local CLI against a target app
-```
-
-`-c` (`--cwd`) points at the project you want to add components to.
-
-## Website: three-layer architecture
-
-Site work follows a strict three-layer model:
-
-```
-registry/ui/            primitives — SACROSANCT, never edited by site work
-  ↓ composed by
-components/site/         shared composites (reused across ≥2 route groups)
-  ↓ composed by
-app/(group)/_components/ route-local composites (used by one route group)
-```
-
-A new composite belongs in `components/site/` only if it is reused across **two or more** route
-groups; otherwise it lives in the route group's `_components/`. If a primitive is missing, **ask
-first** — never edit `registry/ui/` to make a page work.
-
-The authoritative website guides live in **`mds/website/`** — start at
-[`mds/website/BRIEF.md`](../../mds/website/BRIEF.md) (it is written in Turkish). Consult those guides
-for any website task; do not duplicate them here.
-
-## Component rules recap
-
-These conventions keep every component consistent (see [`rules/styling.md`](./rules/styling.md),
-[`rules/composition.md`](./rules/composition.md), and [`rules/icons.md`](./rules/icons.md) for the
-full rules):
-
-- **`data-slot`** on the root element (and on meaningful sub-parts) for semantic styling hooks.
-- **`cn()`** for all class merging — never string-concatenate classes.
-- **`cva`** for variant-based styling; hoist the variants object out of the component.
-- **Semantic tokens** for color: `bg-primary-base`, `text-error-base`, `bg-weak`, `text-body` —
-  never `bg-background` / `text-foreground`-style names.
-- **Radix UI** primitives for accessibility; polymorphism via **`asChild`** + Radix `Slot` only.
-- **Focus is `outline-*`**, never `ring-*` (e.g. `focus-visible:outline-primary-700`).
-- Intersection prop types: `React.ComponentProps<"button"> & VariantProps<…> & { … }`.
-- **kebab-case** filenames, **named** exports.
-
-A correct root element looks like:
-
-```tsx
-// Incorrect — ring focus, non-semantic token, anonymous default export
-<button className={`${base} focus-visible:ring-2 bg-primary`}>{children}</button>
-
-// Correct — data-slot, cn(), outline focus, semantic token
-<Comp
-  data-slot="button"
-  className={cn(buttonVariants({ variant, appearance, size, className }))}
-  {...props}
-/>
-```
-
-When you reference a component in an example, **read its source** at
-`apps/v4/registry/ui/<name>.tsx` first — never guess props. For instance, `Button` takes
-`variant` (`primary` | `neutral-solid` | `neutral-light` | `danger` | `success` | `inverse-solid` |
-`inverse-light`), `appearance` (`solid` | `outline` | `ghost` | `soft`), `size`, `shape`, `loading`,
-`iconOnly`, `leadingIcon`, `trailingIcon`, and `asChild` — there is no `variant="outline"` or
-`variant="destructive"`.
-
-## Commit convention
-
-Conventional commits: `category(scope): message`.
-
-Categories: `feat`, `fix`, `refactor`, `docs`, `build`, `test`, `ci`, `chore`.
-
-```
-feat(components): add loading prop to the button component
-```