svger-cli 2.0.4 → 2.0.6

package/dist/core/template-manager.js

@@ -128,45 +128,45 @@ export class TemplateManager {
      */
     generateReactFunctional(options) {
         const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
-        return `import React from "react";
-import type { SVGProps } from "react";
-
-export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
-  size?: number | string;
-}
-
-/**
- * ${componentName} SVG Component
- * Generated by svger-cli
- */
-const ${componentName} = React.forwardRef<SVGSVGElement, ${componentName}Props>(
-  ({ size, className, style, ...props }, ref) => {
-    const dimensions = size ? { width: size, height: size } : {
-      width: props.width || ${defaultWidth},
-      height: props.height || ${defaultHeight}
-    };
-
-    return (
-      <svg
-        ref={ref}
-        viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-        xmlns="http://www.w3.org/2000/svg"
-        width={dimensions.width}
-        height={dimensions.height}
-        fill={props.fill || "${defaultFill}"}
-        className={className}
-        style={style}
-        {...props}
-      >
-        ${svgContent}
-      </svg>
-    );
-  }
-);
-
-${componentName}.displayName = "${componentName}";
-
-export default ${componentName};
+        return `import React from "react";
+import type { SVGProps } from "react";
+
+export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+/**
+ * ${componentName} SVG Component
+ * Generated by svger-cli
+ */
+const ${componentName} = React.forwardRef<SVGSVGElement, ${componentName}Props>(
+  ({ size, className, style, ...props }, ref) => {
+    const dimensions = size ? { width: size, height: size } : {
+      width: props.width || ${defaultWidth},
+      height: props.height || ${defaultHeight}
+    };
+
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+        xmlns="http://www.w3.org/2000/svg"
+        width={dimensions.width}
+        height={dimensions.height}
+        fill={props.fill || "${defaultFill}"}
+        className={className}
+        style={style}
+        {...props}
+      >
+        ${svgContent}
+      </svg>
+    );
+  }
+);
+
+${componentName}.displayName = "${componentName}";
+
+export default ${componentName};
 `;
     }
     /**
@@ -174,34 +174,34 @@ export default ${componentName};
      */
     generateReactForwardRef(options) {
         const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
-        return `import { forwardRef } from "react";
-import type { SVGProps } from "react";
-
-/**
- * ${componentName} SVG Component with forwardRef
- * Generated by svger-cli
- */
-const ${componentName} = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
-  (props, ref) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-      xmlns="http://www.w3.org/2000/svg"
-      width={props.width || ${defaultWidth}}
-      height={props.height || ${defaultHeight}}
-      fill={props.fill || "${defaultFill}"}
-      className={props.className}
-      style={props.style}
-      {...props}
-    >
-      ${svgContent}
-    </svg>
-  )
-);
-
-${componentName}.displayName = "${componentName}";
-
-export default ${componentName};
+        return `import { forwardRef } from "react";
+import type { SVGProps } from "react";
+
+/**
+ * ${componentName} SVG Component with forwardRef
+ * Generated by svger-cli
+ */
+const ${componentName} = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+  (props, ref) => (
+    <svg
+      ref={ref}
+      viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width || ${defaultWidth}}
+      height={props.height || ${defaultHeight}}
+      fill={props.fill || "${defaultFill}"}
+      className={props.className}
+      style={props.style}
+      {...props}
+    >
+      ${svgContent}
+    </svg>
+  )
+);
+
+${componentName}.displayName = "${componentName}";
+
+export default ${componentName};
 `;
     }
     /**
@@ -209,33 +209,33 @@ export default ${componentName};
      */
     generateReactClass(options) {
         const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
-        return `import { Component } from "react";
-import type { SVGProps } from "react";
-
-/**
- * ${componentName} SVG Component (Class-based)
- * Generated by svger-cli
- */
-class ${componentName} extends Component<SVGProps<SVGSVGElement>> {
-  render() {
-    const { width = ${defaultWidth}, height = ${defaultHeight}, fill = "${defaultFill}", ...props } = this.props;
-    
-    return (
-      <svg
-        viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-        xmlns="http://www.w3.org/2000/svg"
-        width={width}
-        height={height}
-        fill={fill}
-        {...props}
-      >
-        ${svgContent}
-      </svg>
-    );
-  }
-}
-
-export default ${componentName};
+        return `import { Component } from "react";
+import type { SVGProps } from "react";
+
+/**
+ * ${componentName} SVG Component (Class-based)
+ * Generated by svger-cli
+ */
+class ${componentName} extends Component<SVGProps<SVGSVGElement>> {
+  render() {
+    const { width = ${defaultWidth}, height = ${defaultHeight}, fill = "${defaultFill}", ...props } = this.props;
+    
+    return (
+      <svg
+        viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+        xmlns="http://www.w3.org/2000/svg"
+        width={width}
+        height={height}
+        fill={fill}
+        {...props}
+      >
+        ${svgContent}
+      </svg>
+    );
+  }
+}
+
+export default ${componentName};
 `;
     }
     /**
@@ -243,32 +243,32 @@ export default ${componentName};
      */
     generateStyledComponents(options) {
         const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
-        return `import styled from "styled-components";
-import type { SVGProps } from "react";
-
-/**
- * ${componentName} SVG Component with Styled Components
- * Generated by svger-cli
- */
-const StyledSVG = styled.svg<SVGProps<SVGSVGElement>>\`
-  width: \${props => props.width || '${defaultWidth}px'};
-  height: \${props => props.height || '${defaultHeight}px'};
-  fill: \${props => props.fill || '${defaultFill}'};
-\`;
-
-const ${componentName} = (props: SVGProps<SVGSVGElement>) => (
-  <StyledSVG
-    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    ${svgContent}
-  </StyledSVG>
-);
-
-${componentName}.displayName = "${componentName}";
-
-export default ${componentName};
+        return `import styled from "styled-components";
+import type { SVGProps } from "react";
+
+/**
+ * ${componentName} SVG Component with Styled Components
+ * Generated by svger-cli
+ */
+const StyledSVG = styled.svg<SVGProps<SVGSVGElement>>\`
+  width: \${props => props.width || '${defaultWidth}px'};
+  height: \${props => props.height || '${defaultHeight}px'};
+  fill: \${props => props.fill || '${defaultFill}'};
+\`;
+
+const ${componentName} = (props: SVGProps<SVGSVGElement>) => (
+  <StyledSVG
+    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    ${svgContent}
+  </StyledSVG>
+);
+
+${componentName}.displayName = "${componentName}";
+
+export default ${componentName};
 `;
     }
     /**
@@ -276,48 +276,48 @@ export default ${componentName};
      */
     generateTypeScriptNative(options) {
         const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
-        return `/**
- * ${componentName} SVG Icon (Native TypeScript)
- * Generated by svger-cli
- */
-
-export interface ${componentName}Options {
-  width?: number | string;
-  height?: number | string;
-  fill?: string;
-  className?: string;
-  style?: Record<string, any>;
-}
-
-export function ${componentName}(options: ${componentName}Options = {}): string {
-  const {
-    width = ${defaultWidth},
-    height = ${defaultHeight},
-    fill = "${defaultFill}",
-    className = "",
-    style = {}
-  } = options;
-
-  const styleString = Object.entries(style)
-    .map(([key, value]) => \`\${key}: \${value}\`)
-    .join("; ");
-
-  return \`
-    <svg
-      viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-      xmlns="http://www.w3.org/2000/svg"
-      width="\${width}"
-      height="\${height}"
-      fill="\${fill}"
-      class="\${className}"
-      style="\${styleString}"
-    >
-      ${svgContent}
-    </svg>
-  \`.trim();
-}
-
-export default ${componentName};
+        return `/**
+ * ${componentName} SVG Icon (Native TypeScript)
+ * Generated by svger-cli
+ */
+
+export interface ${componentName}Options {
+  width?: number | string;
+  height?: number | string;
+  fill?: string;
+  className?: string;
+  style?: Record<string, any>;
+}
+
+export function ${componentName}(options: ${componentName}Options = {}): string {
+  const {
+    width = ${defaultWidth},
+    height = ${defaultHeight},
+    fill = "${defaultFill}",
+    className = "",
+    style = {}
+  } = options;
+
+  const styleString = Object.entries(style)
+    .map(([key, value]) => \`\${key}: \${value}\`)
+    .join("; ");
+
+  return \`
+    <svg
+      viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+      xmlns="http://www.w3.org/2000/svg"
+      width="\${width}"
+      height="\${height}"
+      fill="\${fill}"
+      class="\${className}"
+      style="\${styleString}"
+    >
+      ${svgContent}
+    </svg>
+  \`.trim();
+}
+
+export default ${componentName};
 `;
     }
     /**
@@ -343,192 +343,192 @@ export default ${componentName};
      */
     generateEnhancedStyled(options) {
         const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
-        return `import React from "react";
-import type { SVGProps } from "react";
-
-/**
- * ${componentName} SVG Component with Enhanced Styling
- * Generated by svger-cli with comprehensive styling support
- */
-
-export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
-  // Size variants
-  size?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  // Color variants
-  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
-  
-  // Animation options
-  animate?: boolean | 'spin' | 'pulse' | 'bounce' | 'fade';
-  
-  // Theme support
-  theme?: 'light' | 'dark' | 'auto';
-  
-  // Responsive behavior
-  responsive?: boolean;
-  
-  // Interaction states
-  loading?: boolean;
-  disabled?: boolean;
-}
-
-const sizeMap = {
-  xs: 12,
-  sm: 16,
-  md: 24,
-  lg: 32,
-  xl: 48,
-} as const;
-
-const colorMap = {
-  primary: '#007bff',
-  secondary: '#6c757d',
-  success: '#28a745',
-  warning: '#ffc107',
-  danger: '#dc3545',
-  info: '#17a2b8',
-} as const;
-
-const ${componentName} = React.forwardRef<SVGSVGElement, ${componentName}Props>(
-  ({ 
-    size = 'md',
-    variant,
-    animate = false,
-    theme = 'auto',
-    responsive = false,
-    loading = false,
-    disabled = false,
-    style,
-    className,
-    ...props 
-  }, ref) => {
-    
-    // Calculate size
-    const dimensions = React.useMemo(() => {
-      if (typeof size === 'number') return { width: size, height: size };
-      if (typeof size === 'string' && !isNaN(Number(size))) return { width: Number(size), height: Number(size) };
-      const mappedSize = sizeMap[size as keyof typeof sizeMap] || sizeMap.md;
-      return { width: mappedSize, height: mappedSize };
-    }, [size]);
-    
-    // Generate styles
-    const computedStyles = React.useMemo(() => {
-      const baseStyles: React.CSSProperties = {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        transition: 'all 0.2s ease-in-out',
-      };
-      
-      // Apply color variant
-      if (variant) {
-        baseStyles.color = colorMap[variant];
-      }
-      
-      // Apply theme
-      if (theme === 'dark') {
-        baseStyles.filter = 'invert(1)';
-      } else if (theme === 'auto') {
-        baseStyles.filter = 'var(--svger-theme-filter, none)';
-      }
-      
-      // Apply animation
-      if (animate) {
-        if (animate === true || animate === 'spin') {
-          baseStyles.animation = 'svger-spin 2s linear infinite';
-        } else if (animate === 'pulse') {
-          baseStyles.animation = 'svger-pulse 2s ease-in-out infinite';
-        } else if (animate === 'bounce') {
-          baseStyles.animation = 'svger-bounce 1s infinite';
-        } else if (animate === 'fade') {
-          baseStyles.animation = 'svger-fade 2s ease-in-out infinite alternate';
-        }
-      }
-      
-      // Apply loading state
-      if (loading) {
-        baseStyles.animation = 'svger-spin 1s linear infinite';
-        baseStyles.opacity = 0.7;
-      }
-      
-      // Apply disabled state
-      if (disabled) {
-        baseStyles.opacity = 0.5;
-        baseStyles.pointerEvents = 'none';
-      }
-      
-      // Apply responsive behavior
-      if (responsive) {
-        baseStyles.width = '100%';
-        baseStyles.height = 'auto';
-        baseStyles.maxWidth = \`\${dimensions.width}px\`;
-      }
-      
-      return { ...baseStyles, ...style };
-    }, [variant, theme, animate, loading, disabled, responsive, dimensions, style]);
-    
-    // Generate class names
-    const classNames = React.useMemo(() => {
-      const classes = ['svger-icon'];
-      
-      if (typeof size === 'string' && sizeMap[size as keyof typeof sizeMap]) {
-        classes.push(\`svger-size-\${size}\`);
-      }
-      
-      if (variant) {
-        classes.push(\`svger-variant-\${variant}\`);
-      }
-      
-      if (theme) {
-        classes.push(\`svger-theme-\${theme}\`);
-      }
-      
-      if (animate) {
-        const animationType = animate === true ? 'spin' : animate;
-        classes.push(\`svger-animate-\${animationType}\`);
-      }
-      
-      if (responsive) {
-        classes.push('svger-responsive');
-      }
-      
-      if (loading) {
-        classes.push('svger-loading');
-      }
-      
-      if (disabled) {
-        classes.push('svger-disabled');
-      }
-      
-      if (className) {
-        classes.push(className);
-      }
-      
-      return classes.join(' ');
-    }, [size, variant, theme, animate, responsive, loading, disabled, className]);
-
-    return (
-      <svg
-        ref={ref}
-        viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-        xmlns="http://www.w3.org/2000/svg"
-        width={responsive ? '100%' : dimensions.width}
-        height={responsive ? 'auto' : dimensions.height}
-        fill={props.fill || "${defaultFill}"}
-        className={classNames}
-        style={computedStyles}
-        aria-hidden={props['aria-hidden'] || (disabled ? 'true' : undefined)}
-        aria-busy={loading ? 'true' : undefined}
-        {...props}
-      >
-        ${svgContent}
-      </svg>
-    );
-  }
-);
-
-${componentName}.displayName = "${componentName}";
-
-export default ${componentName};
+        return `import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * ${componentName} SVG Component with Enhanced Styling
+ * Generated by svger-cli with comprehensive styling support
+ */
+
+export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
+  // Size variants
+  size?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  // Color variants
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+  
+  // Animation options
+  animate?: boolean | 'spin' | 'pulse' | 'bounce' | 'fade';
+  
+  // Theme support
+  theme?: 'light' | 'dark' | 'auto';
+  
+  // Responsive behavior
+  responsive?: boolean;
+  
+  // Interaction states
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+const sizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48,
+} as const;
+
+const colorMap = {
+  primary: '#007bff',
+  secondary: '#6c757d',
+  success: '#28a745',
+  warning: '#ffc107',
+  danger: '#dc3545',
+  info: '#17a2b8',
+} as const;
+
+const ${componentName} = React.forwardRef<SVGSVGElement, ${componentName}Props>(
+  ({ 
+    size = 'md',
+    variant,
+    animate = false,
+    theme = 'auto',
+    responsive = false,
+    loading = false,
+    disabled = false,
+    style,
+    className,
+    ...props 
+  }, ref) => {
+    
+    // Calculate size
+    const dimensions = React.useMemo(() => {
+      if (typeof size === 'number') return { width: size, height: size };
+      if (typeof size === 'string' && !isNaN(Number(size))) return { width: Number(size), height: Number(size) };
+      const mappedSize = sizeMap[size as keyof typeof sizeMap] || sizeMap.md;
+      return { width: mappedSize, height: mappedSize };
+    }, [size]);
+    
+    // Generate styles
+    const computedStyles = React.useMemo(() => {
+      const baseStyles: React.CSSProperties = {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        transition: 'all 0.2s ease-in-out',
+      };
+      
+      // Apply color variant
+      if (variant) {
+        baseStyles.color = colorMap[variant];
+      }
+      
+      // Apply theme
+      if (theme === 'dark') {
+        baseStyles.filter = 'invert(1)';
+      } else if (theme === 'auto') {
+        baseStyles.filter = 'var(--svger-theme-filter, none)';
+      }
+      
+      // Apply animation
+      if (animate) {
+        if (animate === true || animate === 'spin') {
+          baseStyles.animation = 'svger-spin 2s linear infinite';
+        } else if (animate === 'pulse') {
+          baseStyles.animation = 'svger-pulse 2s ease-in-out infinite';
+        } else if (animate === 'bounce') {
+          baseStyles.animation = 'svger-bounce 1s infinite';
+        } else if (animate === 'fade') {
+          baseStyles.animation = 'svger-fade 2s ease-in-out infinite alternate';
+        }
+      }
+      
+      // Apply loading state
+      if (loading) {
+        baseStyles.animation = 'svger-spin 1s linear infinite';
+        baseStyles.opacity = 0.7;
+      }
+      
+      // Apply disabled state
+      if (disabled) {
+        baseStyles.opacity = 0.5;
+        baseStyles.pointerEvents = 'none';
+      }
+      
+      // Apply responsive behavior
+      if (responsive) {
+        baseStyles.width = '100%';
+        baseStyles.height = 'auto';
+        baseStyles.maxWidth = \`\${dimensions.width}px\`;
+      }
+      
+      return { ...baseStyles, ...style };
+    }, [variant, theme, animate, loading, disabled, responsive, dimensions, style]);
+    
+    // Generate class names
+    const classNames = React.useMemo(() => {
+      const classes = ['svger-icon'];
+      
+      if (typeof size === 'string' && sizeMap[size as keyof typeof sizeMap]) {
+        classes.push(\`svger-size-\${size}\`);
+      }
+      
+      if (variant) {
+        classes.push(\`svger-variant-\${variant}\`);
+      }
+      
+      if (theme) {
+        classes.push(\`svger-theme-\${theme}\`);
+      }
+      
+      if (animate) {
+        const animationType = animate === true ? 'spin' : animate;
+        classes.push(\`svger-animate-\${animationType}\`);
+      }
+      
+      if (responsive) {
+        classes.push('svger-responsive');
+      }
+      
+      if (loading) {
+        classes.push('svger-loading');
+      }
+      
+      if (disabled) {
+        classes.push('svger-disabled');
+      }
+      
+      if (className) {
+        classes.push(className);
+      }
+      
+      return classes.join(' ');
+    }, [size, variant, theme, animate, responsive, loading, disabled, className]);
+
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+        xmlns="http://www.w3.org/2000/svg"
+        width={responsive ? '100%' : dimensions.width}
+        height={responsive ? 'auto' : dimensions.height}
+        fill={props.fill || "${defaultFill}"}
+        className={classNames}
+        style={computedStyles}
+        aria-hidden={props['aria-hidden'] || (disabled ? 'true' : undefined)}
+        aria-busy={loading ? 'true' : undefined}
+        {...props}
+      >
+        ${svgContent}
+      </svg>
+    );
+  }
+);
+
+${componentName}.displayName = "${componentName}";
+
+export default ${componentName};
 `;
     }
 }