trix-ui 0.2.13 → 0.3.0

package/dist/styles/transform.d.ts

@@ -1,10 +1,10 @@
-import { type SourceFile } from "ts-morph";
-import { type StyleMap } from "./create-style-map.js";
-export type TransformerStyle<Output = SourceFile> = (opts: {
-    sourceFile: SourceFile;
-    styleMap: StyleMap;
-}) => Promise<Output>;
-export declare function transformStyle(source: string, { styleMap, transformers, }: {
-    styleMap: StyleMap;
-    transformers?: TransformerStyle<SourceFile>[];
-}): Promise<string>;
+import { type SourceFile } from "ts-morph";
+import { type StyleMap } from "./create-style-map.js";
+export type TransformerStyle<Output = SourceFile> = (opts: {
+    sourceFile: SourceFile;
+    styleMap: StyleMap;
+}) => Promise<Output>;
+export declare function transformStyle(source: string, { styleMap, transformers, }: {
+    styleMap: StyleMap;
+    transformers?: TransformerStyle<SourceFile>[];
+}): Promise<string>;

package/dist/styles/transform.js

@@ -1,16 +1,16 @@
-import { Project, ScriptKind } from "ts-morph";
-import { transformStyleMap } from "./transform-style-map.js";
-export async function transformStyle(source, { styleMap, transformers = [transformStyleMap], }) {
-    const project = new Project({
-        useInMemoryFileSystem: true,
-    });
-    const sourceFile = project.createSourceFile("component.tsx", source, {
-        scriptKind: ScriptKind.TSX,
-        overwrite: true,
-    });
-    for (const transformer of transformers) {
-        await transformer({ sourceFile, styleMap });
-    }
-    return sourceFile.getText();
-}
+import { Project, ScriptKind } from "ts-morph";
+import { transformStyleMap } from "./transform-style-map.js";
+export async function transformStyle(source, { styleMap, transformers = [transformStyleMap], }) {
+    const project = new Project({
+        useInMemoryFileSystem: true,
+    });
+    const sourceFile = project.createSourceFile("component.tsx", source, {
+        scriptKind: ScriptKind.TSX,
+        overwrite: true,
+    });
+    for (const transformer of transformers) {
+        await transformer({ sourceFile, styleMap });
+    }
+    return sourceFile.getText();
+}
 //# sourceMappingURL=transform.js.map

package/dist/utils/index.d.ts

@@ -1,6 +1,6 @@
-export { createStyleMap } from "../styles/create-style-map.js";
-export { transformStyle } from "../styles/transform.js";
-export { transformIcons } from "./transformers/transform-icons.js";
-export { transformMenu } from "./transformers/transform-menu.js";
-export { transformRender } from "./transformers/transform-render.js";
-export type { TransformConfig, TransformOpts, Transformer } from "./transformers/types.js";
+export { createStyleMap } from "../styles/create-style-map.js";
+export { transformStyle } from "../styles/transform.js";
+export { transformIcons } from "./transformers/transform-icons.js";
+export { transformMenu } from "./transformers/transform-menu.js";
+export { transformRender } from "./transformers/transform-render.js";
+export type { TransformConfig, TransformOpts, Transformer } from "./transformers/types.js";

package/dist/utils/index.js

@@ -1,6 +1,6 @@
-export { createStyleMap } from "../styles/create-style-map.js";
-export { transformStyle } from "../styles/transform.js";
-export { transformIcons } from "./transformers/transform-icons.js";
-export { transformMenu } from "./transformers/transform-menu.js";
-export { transformRender } from "./transformers/transform-render.js";
+export { createStyleMap } from "../styles/create-style-map.js";
+export { transformStyle } from "../styles/transform.js";
+export { transformIcons } from "./transformers/transform-icons.js";
+export { transformMenu } from "./transformers/transform-menu.js";
+export { transformRender } from "./transformers/transform-render.js";
 //# sourceMappingURL=index.js.map

package/dist/utils/transformers/transform-icons.d.ts

@@ -1,2 +1,2 @@
-import { Transformer } from "./types.js";
-export declare const transformIcons: Transformer;
+import { Transformer } from "./types.js";
+export declare const transformIcons: Transformer;

package/dist/utils/transformers/transform-icons.js

@@ -1,165 +1,165 @@
-import { iconLibraries } from "../../icons/libraries.js";
-import { SyntaxKind } from "ts-morph";
-export const transformIcons = async ({ sourceFile, config }) => {
-    const iconLibrary = config.iconLibrary;
-    // Fail silently if the icon library is not supported.
-    // This is for legacy icon libraries.
-    if (!iconLibrary || !(iconLibrary in iconLibraries)) {
-        return sourceFile;
-    }
-    const targetLibrary = iconLibrary;
-    const libraryConfig = iconLibraries[targetLibrary];
-    let transformedIcons = [];
-    for (const element of sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)) {
-        if (element.getTagNameNode()?.getText() !== "IconPlaceholder") {
-            continue;
-        }
-        // Find the library-specific prop (e.g., "lucide", "tabler", "hugeicons")
-        const libraryPropAttr = element.getAttributes().find((attr) => {
-            if (attr.getKind() !== SyntaxKind.JsxAttribute) {
-                return false;
-            }
-            const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
-            return jsxAttr.getNameNode().getText() === targetLibrary;
-        });
-        if (!libraryPropAttr) {
-            continue; // No icon specified for this library
-        }
-        const jsxIconAttr = libraryPropAttr.asKindOrThrow(SyntaxKind.JsxAttribute);
-        const targetIconName = jsxIconAttr
-            .getInitializer()
-            ?.getText()
-            .replace(/^["']|["']$/g, "");
-        if (!targetIconName) {
-            continue;
-        }
-        if (!transformedIcons.includes(targetIconName)) {
-            transformedIcons.push(targetIconName);
-        }
-        const usage = libraryConfig.usage;
-        const usageMatch = usage.match(/<(\w+)([^>]*)\s*\/>/);
-        // Remove the library-specific prop
-        jsxIconAttr.remove();
-        // Remove all other library-specific props
-        for (const attr of element.getAttributes()) {
-            if (attr.getKind() !== SyntaxKind.JsxAttribute) {
-                continue;
-            }
-            const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
-            const attrName = jsxAttr.getNameNode().getText();
-            // Filter out library-specific props (lucide, tabler, hugeicons, etc.)
-            if (attrName in iconLibraries) {
-                jsxAttr.remove();
-            }
-        }
-        if (!usageMatch) {
-            element.getTagNameNode()?.replaceWithText(targetIconName);
-            continue;
-        }
-        const [, componentName, defaultPropsStr] = usageMatch;
-        if (componentName === "ICON") {
-            // Get remaining user attributes (non-library props)
-            const userAttributes = element
-                .getAttributes()
-                .filter((attr) => {
-                if (attr.getKind() !== SyntaxKind.JsxAttribute) {
-                    return true;
-                }
-                const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
-                const attrName = jsxAttr.getNameNode().getText();
-                // Filter out library-specific props (lucide, tabler, hugeicons, etc.)
-                return !(attrName in iconLibraries);
-            })
-                .map((attr) => attr.getText())
-                .join(" ");
-            if (userAttributes.trim()) {
-                element.replaceWithText(`<${targetIconName} ${userAttributes} />`);
-            }
-            else {
-                element.getTagNameNode()?.replaceWithText(targetIconName);
-            }
-        }
-        else {
-            const existingPropNames = new Set(element
-                .getAttributes()
-                .filter((attr) => attr.getKind() === SyntaxKind.JsxAttribute)
-                .map((attr) => attr.asKindOrThrow(SyntaxKind.JsxAttribute).getNameNode().getText()));
-            // Replace ICON placeholder in defaultPropsStr with actual icon name
-            const defaultPropsWithIcon = defaultPropsStr.replace(/\{ICON\}/g, `{${targetIconName}}`);
-            const defaultPropsToAdd = defaultPropsWithIcon
-                .trim()
-                .split(/\s+(?=\w+=)/)
-                .filter((prop) => prop)
-                .map((prop) => {
-                const propName = prop.split("=")[0];
-                return propName && !existingPropNames.has(propName) ? prop : null;
-            })
-                .filter(Boolean);
-            const userAttributes = element
-                .getAttributes()
-                .filter((attr) => {
-                if (attr.getKind() !== SyntaxKind.JsxAttribute) {
-                    return true;
-                }
-                const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
-                const attrName = jsxAttr.getNameNode().getText();
-                // Filter out library-specific props (lucide, tabler, hugeicons, etc.)
-                return !(attrName in iconLibraries);
-            })
-                .map((attr) => attr.getText())
-                .join(" ");
-            const allProps = [...defaultPropsToAdd, userAttributes]
-                .filter(Boolean)
-                .join(" ");
-            element.replaceWithText(`<${componentName} ${allProps} />`);
-        }
-    }
-    for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
-        const moduleSpecifier = importDeclaration.getModuleSpecifier()?.getText();
-        if (moduleSpecifier?.includes("icon-placeholder")) {
-            const namedImports = importDeclaration.getNamedImports() ?? [];
-            const iconPlaceholderImport = namedImports.find((specifier) => specifier.getName() === "IconPlaceholder");
-            if (iconPlaceholderImport) {
-                iconPlaceholderImport.remove();
-            }
-            if (importDeclaration.getNamedImports()?.length === 0) {
-                importDeclaration.remove();
-            }
-        }
-    }
-    if (transformedIcons.length > 0) {
-        const importStatements = libraryConfig.import.split("\n");
-        const addedImports = [];
-        for (const importStmt of importStatements) {
-            const importMatch = importStmt.match(/import\s+{([^}]+)}\s+from\s+['"]([^'"]+)['"]/);
-            if (!importMatch)
-                continue;
-            const [, importedNames, modulePath] = importMatch;
-            const namedImports = importedNames
-                .split(",")
-                .map((name) => name.trim())
-                .map((name) => {
-                if (name === "ICON") {
-                    return transformedIcons.map((icon) => ({ name: icon }));
-                }
-                return { name };
-            })
-                .flat();
-            const newImport = sourceFile.addImportDeclaration({
-                moduleSpecifier: modulePath,
-                namedImports,
-            });
-            addedImports.push(newImport);
-        }
-        if (!_useSemicolon(sourceFile)) {
-            for (const importDecl of addedImports) {
-                importDecl.replaceWithText(importDecl.getText().replace(";", ""));
-            }
-        }
-    }
-    return sourceFile;
-};
-function _useSemicolon(sourceFile) {
-    return (sourceFile.getImportDeclarations()?.[0]?.getText().endsWith(";") ?? false);
-}
+import { iconLibraries } from "../../icons/libraries.js";
+import { SyntaxKind } from "ts-morph";
+export const transformIcons = async ({ sourceFile, config }) => {
+    const iconLibrary = config.iconLibrary;
+    // Fail silently if the icon library is not supported.
+    // This is for legacy icon libraries.
+    if (!iconLibrary || !(iconLibrary in iconLibraries)) {
+        return sourceFile;
+    }
+    const targetLibrary = iconLibrary;
+    const libraryConfig = iconLibraries[targetLibrary];
+    let transformedIcons = [];
+    for (const element of sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)) {
+        if (element.getTagNameNode()?.getText() !== "IconPlaceholder") {
+            continue;
+        }
+        // Find the library-specific prop (e.g., "lucide", "tabler", "hugeicons")
+        const libraryPropAttr = element.getAttributes().find((attr) => {
+            if (attr.getKind() !== SyntaxKind.JsxAttribute) {
+                return false;
+            }
+            const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
+            return jsxAttr.getNameNode().getText() === targetLibrary;
+        });
+        if (!libraryPropAttr) {
+            continue; // No icon specified for this library
+        }
+        const jsxIconAttr = libraryPropAttr.asKindOrThrow(SyntaxKind.JsxAttribute);
+        const targetIconName = jsxIconAttr
+            .getInitializer()
+            ?.getText()
+            .replace(/^["']|["']$/g, "");
+        if (!targetIconName) {
+            continue;
+        }
+        if (!transformedIcons.includes(targetIconName)) {
+            transformedIcons.push(targetIconName);
+        }
+        const usage = libraryConfig.usage;
+        const usageMatch = usage.match(/<(\w+)([^>]*)\s*\/>/);
+        // Remove the library-specific prop
+        jsxIconAttr.remove();
+        // Remove all other library-specific props
+        for (const attr of element.getAttributes()) {
+            if (attr.getKind() !== SyntaxKind.JsxAttribute) {
+                continue;
+            }
+            const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
+            const attrName = jsxAttr.getNameNode().getText();
+            // Filter out library-specific props (lucide, tabler, hugeicons, etc.)
+            if (attrName in iconLibraries) {
+                jsxAttr.remove();
+            }
+        }
+        if (!usageMatch) {
+            element.getTagNameNode()?.replaceWithText(targetIconName);
+            continue;
+        }
+        const [, componentName, defaultPropsStr] = usageMatch;
+        if (componentName === "ICON") {
+            // Get remaining user attributes (non-library props)
+            const userAttributes = element
+                .getAttributes()
+                .filter((attr) => {
+                if (attr.getKind() !== SyntaxKind.JsxAttribute) {
+                    return true;
+                }
+                const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
+                const attrName = jsxAttr.getNameNode().getText();
+                // Filter out library-specific props (lucide, tabler, hugeicons, etc.)
+                return !(attrName in iconLibraries);
+            })
+                .map((attr) => attr.getText())
+                .join(" ");
+            if (userAttributes.trim()) {
+                element.replaceWithText(`<${targetIconName} ${userAttributes} />`);
+            }
+            else {
+                element.getTagNameNode()?.replaceWithText(targetIconName);
+            }
+        }
+        else {
+            const existingPropNames = new Set(element
+                .getAttributes()
+                .filter((attr) => attr.getKind() === SyntaxKind.JsxAttribute)
+                .map((attr) => attr.asKindOrThrow(SyntaxKind.JsxAttribute).getNameNode().getText()));
+            // Replace ICON placeholder in defaultPropsStr with actual icon name
+            const defaultPropsWithIcon = defaultPropsStr.replace(/\{ICON\}/g, `{${targetIconName}}`);
+            const defaultPropsToAdd = defaultPropsWithIcon
+                .trim()
+                .split(/\s+(?=\w+=)/)
+                .filter((prop) => prop)
+                .map((prop) => {
+                const propName = prop.split("=")[0];
+                return propName && !existingPropNames.has(propName) ? prop : null;
+            })
+                .filter(Boolean);
+            const userAttributes = element
+                .getAttributes()
+                .filter((attr) => {
+                if (attr.getKind() !== SyntaxKind.JsxAttribute) {
+                    return true;
+                }
+                const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
+                const attrName = jsxAttr.getNameNode().getText();
+                // Filter out library-specific props (lucide, tabler, hugeicons, etc.)
+                return !(attrName in iconLibraries);
+            })
+                .map((attr) => attr.getText())
+                .join(" ");
+            const allProps = [...defaultPropsToAdd, userAttributes]
+                .filter(Boolean)
+                .join(" ");
+            element.replaceWithText(`<${componentName} ${allProps} />`);
+        }
+    }
+    for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
+        const moduleSpecifier = importDeclaration.getModuleSpecifier()?.getText();
+        if (moduleSpecifier?.includes("icon-placeholder")) {
+            const namedImports = importDeclaration.getNamedImports() ?? [];
+            const iconPlaceholderImport = namedImports.find((specifier) => specifier.getName() === "IconPlaceholder");
+            if (iconPlaceholderImport) {
+                iconPlaceholderImport.remove();
+            }
+            if (importDeclaration.getNamedImports()?.length === 0) {
+                importDeclaration.remove();
+            }
+        }
+    }
+    if (transformedIcons.length > 0) {
+        const importStatements = libraryConfig.import.split("\n");
+        const addedImports = [];
+        for (const importStmt of importStatements) {
+            const importMatch = importStmt.match(/import\s+{([^}]+)}\s+from\s+['"]([^'"]+)['"]/);
+            if (!importMatch)
+                continue;
+            const [, importedNames, modulePath] = importMatch;
+            const namedImports = importedNames
+                .split(",")
+                .map((name) => name.trim())
+                .map((name) => {
+                if (name === "ICON") {
+                    return transformedIcons.map((icon) => ({ name: icon }));
+                }
+                return { name };
+            })
+                .flat();
+            const newImport = sourceFile.addImportDeclaration({
+                moduleSpecifier: modulePath,
+                namedImports,
+            });
+            addedImports.push(newImport);
+        }
+        if (!_useSemicolon(sourceFile)) {
+            for (const importDecl of addedImports) {
+                importDecl.replaceWithText(importDecl.getText().replace(";", ""));
+            }
+        }
+    }
+    return sourceFile;
+};
+function _useSemicolon(sourceFile) {
+    return (sourceFile.getImportDeclarations()?.[0]?.getText().endsWith(";") ?? false);
+}
 //# sourceMappingURL=transform-icons.js.map

package/dist/utils/transformers/transform-menu.d.ts

@@ -1,2 +1,2 @@
-import { Transformer } from "./types.js";
-export declare const transformMenu: Transformer;
+import { Transformer } from "./types.js";
+export declare const transformMenu: Transformer;

package/dist/utils/transformers/transform-menu.js

@@ -1,40 +1,40 @@
-import { SyntaxKind } from "ts-morph";
-// Transforms cn-menu-target class based on config.menuColor.
-// If menuColor is "inverted", replaces cn-menu-target with "dark".
-// Otherwise, removes cn-menu-target entirely.
-export const transformMenu = async ({ sourceFile, config }) => {
-    const menuColor = config.menuColor;
-    // If menuColor is not set or is "default", we remove the placeholder.
-    const replacement = menuColor === "inverted" ? "dark" : "";
-    for (const attr of sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute)) {
-        const attrName = attr.getNameNode().getText();
-        if (attrName !== "className") {
-            continue;
-        }
-        const initializer = attr.getInitializer();
-        if (!initializer) {
-            continue;
-        }
-        const text = initializer.getText();
-        if (!text.includes("cn-menu-target")) {
-            continue;
-        }
-        // Replace cn-menu-target with the replacement value.
-        let newText = text.replace(/cn-menu-target/g, replacement);
-        // Clean up extra spaces if we removed the class.
-        if (!replacement) {
-            // Remove double spaces.
-            newText = newText.replace(/\s{2,}/g, " ");
-            // Clean up leading/trailing spaces in strings.
-            newText = newText.replace(/"\s+/g, '"');
-            newText = newText.replace(/\s+"/g, '"');
-            // Clean up empty strings in cn() calls.
-            newText = newText.replace(/,\s*""\s*,/g, ",");
-            newText = newText.replace(/\(\s*""\s*,/g, "(");
-            newText = newText.replace(/,\s*""\s*\)/g, ")");
-        }
-        attr.setInitializer(newText);
-    }
-    return sourceFile;
-};
+import { SyntaxKind } from "ts-morph";
+// Transforms cn-menu-target class based on config.menuColor.
+// If menuColor is "inverted", replaces cn-menu-target with "dark".
+// Otherwise, removes cn-menu-target entirely.
+export const transformMenu = async ({ sourceFile, config }) => {
+    const menuColor = config.menuColor;
+    // If menuColor is not set or is "default", we remove the placeholder.
+    const replacement = menuColor === "inverted" ? "dark" : "";
+    for (const attr of sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute)) {
+        const attrName = attr.getNameNode().getText();
+        if (attrName !== "className") {
+            continue;
+        }
+        const initializer = attr.getInitializer();
+        if (!initializer) {
+            continue;
+        }
+        const text = initializer.getText();
+        if (!text.includes("cn-menu-target")) {
+            continue;
+        }
+        // Replace cn-menu-target with the replacement value.
+        let newText = text.replace(/cn-menu-target/g, replacement);
+        // Clean up extra spaces if we removed the class.
+        if (!replacement) {
+            // Remove double spaces.
+            newText = newText.replace(/\s{2,}/g, " ");
+            // Clean up leading/trailing spaces in strings.
+            newText = newText.replace(/"\s+/g, '"');
+            newText = newText.replace(/\s+"/g, '"');
+            // Clean up empty strings in cn() calls.
+            newText = newText.replace(/,\s*""\s*,/g, ",");
+            newText = newText.replace(/\(\s*""\s*,/g, "(");
+            newText = newText.replace(/,\s*""\s*\)/g, ")");
+        }
+        attr.setInitializer(newText);
+    }
+    return sourceFile;
+};
 //# sourceMappingURL=transform-menu.js.map

package/dist/utils/transformers/transform-render.d.ts

@@ -1,2 +1,2 @@
-import { Transformer } from "./types.js";
-export declare const transformRender: Transformer;
+import { Transformer } from "./types.js";
+export declare const transformRender: Transformer;