kigumi 0.2.0

package/dist/templates/react/Animation/Animation.jsx.hbs

@@ -0,0 +1,100 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Animation.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * // Using built-in animations
+ * <Animation name="bounce" duration={2000} play>
+ *   <div className="box">Bouncing!</div>
+ * </Animation>
+ *
+ * // Using ref methods
+ * const animRef = React.useRef(null);
+ * <button onClick={() => animRef.current?.cancel()}>Cancel</button>
+ * <Animation ref={animRef} name="pulse" iterations={3}>
+ *   <div>Content</div>
+ * </Animation>
+ * ```
+ *
+ * @typedef {Object} AnimationProps
+ * @property {string} [name] - The name of the built-in animation to use
+ * @property {boolean} [play] - Plays the animation
+ * @property {number} [delay] - Milliseconds to delay the start
+ * @property {string} [direction] - Direction of playback
+ * @property {number} [duration] - Milliseconds each iteration takes
+ * @property {string} [easing] - The easing function to use
+ * @property {number} [iterations] - Number of iterations to run
+ * @property {function} [onCancel] - Event fired when canceled
+ * @property {function} [onFinish] - Event fired when finished
+ * @property {function} [onStart] - Event fired when started
+ */
+
+export const Animation = React.forwardRef(
+  ({ children, className, onCancel, onFinish, onStart, ...props }, ref) => {
+    const animationRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        cancel: () => {
+          if (animationRef.current && typeof animationRef.current.cancel === 'function') {
+            animationRef.current.cancel();
+          }
+        },
+        finish: () => {
+          if (animationRef.current && typeof animationRef.current.finish === 'function') {
+            animationRef.current.finish();
+          }
+        },
+        get element() {
+          return animationRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = animationRef.current;
+      if (!el) return;
+
+      const handleCancel = (e) => {
+        if (onCancel) onCancel(e);
+      };
+
+      const handleFinish = (e) => {
+        if (onFinish) onFinish(e);
+      };
+
+      const handleStart = (e) => {
+        if (onStart) onStart(e);
+      };
+
+      el.addEventListener('wa-cancel', handleCancel);
+      el.addEventListener('wa-finish', handleFinish);
+      el.addEventListener('wa-start', handleStart);
+
+      return () => {
+        el.removeEventListener('wa-cancel', handleCancel);
+        el.removeEventListener('wa-finish', handleFinish);
+        el.removeEventListener('wa-start', handleStart);
+      };
+    }, [onCancel, onFinish, onStart]);
+
+    return (
+      <wa-animation
+        ref={animationRef}
+        class={clsx('Animation', className)}
+        {...props}
+      >
+        {children}
+      </wa-animation>
+    );
+  }
+);
+
+Animation.displayName = 'Animation';

package/dist/templates/react/Animation/Animation.test.jsx.hbs

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Animation } from './Animation';
+import React from 'react';
+
+describe('Animation', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Animation name="bounce">
+        <div>Content</div>
+      </Animation>
+    );
+    expect(container.querySelector('wa-animation')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(
+      <Animation ref={ref} name="pulse">
+        <div>Content</div>
+      </Animation>
+    );
+    expect(ref.current).toHaveProperty('cancel');
+    expect(ref.current).toHaveProperty('finish');
+  });
+
+  it('passes animation props', () => {
+    const { container } = render(
+      <Animation name="bounce" duration={2000} iterations={3}>
+        <div>Content</div>
+      </Animation>
+    );
+    const element = container.querySelector('wa-animation');
+    expect(element?.getAttribute('name')).toBe('bounce');
+    expect(element?.getAttribute('duration')).toBe('2000');
+  });
+});

package/dist/templates/react/Animation/Animation.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { Animation } from './Animation';
+
+describe('Animation', () => {
+  it('renders children', () => {
+    render(<Animation>Test</Animation>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Animation className="custom-class">Test</Animation>);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/dist/templates/react/Animation/Animation.tsx.hbs

@@ -0,0 +1,127 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Animation.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * // Using built-in animations
+ * <Animation name="bounce" duration={2000} play>
+ *   <div className="box">Bouncing!</div>
+ * </Animation>
+ *
+ * // Using ref methods
+ * const animRef = useRef<AnimationRef>(null);
+ * <button onClick={() => animRef.current?.cancel()}>Cancel</button>
+ * <Animation ref={animRef} name="pulse" iterations={3}>
+ *   <div>Content</div>
+ * </Animation>
+ * ```
+ */
+export interface AnimationProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The name of the built-in animation to use */
+  name?: string;
+  /** Plays the animation. When omitted, the animation will be paused */
+  play?: boolean;
+  /** The number of milliseconds to delay the start of the animation */
+  delay?: number;
+  /** Determines the direction of playback */
+  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+  /** The number of milliseconds each iteration takes to complete */
+  duration?: number;
+  /** The easing function to use */
+  easing?: string;
+  /** The number of milliseconds to delay after the active period */
+  'end-delay'?: number;
+  /** Sets how the animation applies styles before and after execution */
+  fill?: 'auto' | 'backwards' | 'both' | 'forwards' | 'none';
+  /** The number of iterations to run before completing */
+  iterations?: number;
+  /** The offset at which to start the animation */
+  'iteration-start'?: number;
+  /** Sets the animation's playback rate */
+  'playback-rate'?: number;
+  /** Event fired when the animation is canceled */
+  onCancel?: (event: CustomEvent) => void;
+  /** Event fired when the animation finishes */
+  onFinish?: (event: CustomEvent) => void;
+  /** Event fired when the animation starts or restarts */
+  onStart?: (event: CustomEvent) => void;
+}
+
+export interface AnimationRef {
+  cancel: () => void;
+  finish: () => void;
+  element: HTMLElement | null;
+}
+
+export const Animation = forwardRef<AnimationRef, AnimationProps>(
+  ({ children, className, onCancel, onFinish, onStart, ...props }, ref) => {
+    const animationRef = useRef<HTMLElement & {
+      cancel?: () => void;
+      finish?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        cancel: () => {
+          if (animationRef.current && typeof animationRef.current.cancel === 'function') {
+            animationRef.current.cancel();
+          }
+        },
+        finish: () => {
+          if (animationRef.current && typeof animationRef.current.finish === 'function') {
+            animationRef.current.finish();
+          }
+        },
+        get element() {
+          return animationRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = animationRef.current;
+      if (!el) return;
+
+      const handleCancel = (e: Event) => {
+        if (onCancel) onCancel(e as CustomEvent);
+      };
+
+      const handleFinish = (e: Event) => {
+        if (onFinish) onFinish(e as CustomEvent);
+      };
+
+      const handleStart = (e: Event) => {
+        if (onStart) onStart(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-cancel', handleCancel);
+      el.addEventListener('wa-finish', handleFinish);
+      el.addEventListener('wa-start', handleStart);
+
+      return () => {
+        el.removeEventListener('wa-cancel', handleCancel);
+        el.removeEventListener('wa-finish', handleFinish);
+        el.removeEventListener('wa-start', handleStart);
+      };
+    }, [onCancel, onFinish, onStart]);
+
+    return (
+      <wa-animation
+        ref={animationRef}
+        class={clsx('Animation', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-animation>
+    );
+  }
+);
+
+Animation.displayName = 'Animation';

package/dist/templates/react/Avatar/Avatar.css.hbs

@@ -0,0 +1,20 @@
+/**
+ * Avatar Component Styles
+ * Documentation: https://webawesome.com/docs/components/avatar
+ *
+ * CSS Custom Properties:
+ * - --size: The size of the avatar
+ *
+ * CSS Parts:
+ * - icon: The container that wraps the avatar's icon
+ * - initials: The container that wraps the avatar's initials
+ * - image: The avatar image. Only shown when the image attribute is set
+ *
+ * @example
+ * .Avatar::part(icon) {
+ *   // Custom styles
+ * }
+ */
+.Avatar {
+  /* Add your custom styles here */
+}

package/dist/templates/react/Avatar/Avatar.jsx.hbs

@@ -0,0 +1,65 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Avatar.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * // With image
+ * <Avatar image="https://example.com/avatar.jpg" label="User avatar" />
+ *
+ * // With initials
+ * <Avatar initials="JD" label="John Doe" />
+ *
+ * // With custom icon
+ * <Avatar label="Settings">
+ *   <wa-icon slot="icon" name="gear" />
+ * </Avatar>
+ * ```
+ *
+ * @typedef {Object} AvatarProps
+ * @property {string} [image] - The image source to use for the avatar
+ * @property {string} label - A label for assistive devices (required)
+ * @property {string} [initials] - Initials to use as fallback
+ * @property {string} [loading] - How the browser should load the image
+ * @property {string} [shape] - The shape of the avatar
+ * @property {function} [onError] - Event fired when image fails to load
+ */
+
+export const Avatar = React.forwardRef(
+  ({ children, className, onError, ...props }, ref) => {
+    const elementRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => elementRef.current, []);
+
+    React.useEffect(() => {
+      const el = elementRef.current;
+      if (!el || !onError) return;
+
+      const handleError = (e) => {
+        onError(e);
+      };
+
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onError]);
+
+    return (
+      <wa-avatar
+        ref={elementRef}
+        class={clsx('Avatar', className)}
+        {...props}
+      >
+        {children}
+      </wa-avatar>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';

package/dist/templates/react/Avatar/Avatar.test.jsx.hbs

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+describe('Avatar', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Avatar label="User avatar" />);
+    expect(container.querySelector('wa-avatar')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Avatar label="User" className="custom-class" />
+    );
+    const element = container.querySelector('wa-avatar');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes image and label props', () => {
+    const { container } = render(
+      <Avatar image="avatar.jpg" label="John Doe" />
+    );
+    const element = container.querySelector('wa-avatar');
+    expect(element?.getAttribute('image')).toBe('avatar.jpg');
+    expect(element?.getAttribute('label')).toBe('John Doe');
+  });
+
+  it('passes initials prop', () => {
+    const { container } = render(<Avatar initials="JD" label="John Doe" />);
+    const element = container.querySelector('wa-avatar');
+    expect(element?.getAttribute('initials')).toBe('JD');
+  });
+});

package/dist/templates/react/Avatar/Avatar.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+describe('Avatar', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Avatar />);
+    expect(container.querySelector('wa-avatar')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Avatar className="custom-class" />);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/dist/templates/react/Avatar/Avatar.tsx.hbs

@@ -0,0 +1,71 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Avatar.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * // With image
+ * <Avatar image="https://example.com/avatar.jpg" label="User avatar" />
+ *
+ * // With initials
+ * <Avatar initials="JD" label="John Doe" />
+ *
+ * // With custom icon
+ * <Avatar label="Settings">
+ *   <wa-icon slot="icon" name="gear" />
+ * </Avatar>
+ * ```
+ */
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLElement>, 'onError' | 'dir'> {
+  /** The image source to use for the avatar */
+  image?: string;
+  /** A label to use to describe the avatar to assistive devices */
+  label: string;
+  /** Initials to use as a fallback when no image is available */
+  initials?: string;
+  /** Indicates how the browser should load the image */
+  loading?: 'eager' | 'lazy';
+  /** The shape of the avatar */
+  shape?: 'circle' | 'square' | 'rounded';
+  /** Event fired when the image could not be loaded */
+  onError?: (event: CustomEvent) => void;
+}
+
+export const Avatar = forwardRef<HTMLElement, AvatarProps>(
+  ({ children, className, onError, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);
+
+    useEffect(() => {
+      const el = elementRef.current;
+      if (!el || !onError) return;
+
+      const handleError = (e: Event) => {
+        onError(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onError]);
+
+    return (
+      <wa-avatar
+        ref={elementRef}
+        class={clsx('Avatar', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-avatar>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';

package/dist/templates/react/Badge/Badge.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * Badge Component Styles
+ * Documentation: https://webawesome.com/docs/components/badge
+ *
+ * CSS Custom Properties:
+ * - --pulse-color: The color of the badge's pulse effect when using attention="pulse"
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .Badge::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Badge {
+  /* Add your custom styles here */
+}

package/dist/templates/react/Badge/Badge.jsx.hbs

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Badge.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * // Basic badge
+ * <Badge>New</Badge>
+ *
+ * // Variants
+ * <Badge variant="success">Success</Badge>
+ * <Badge variant="warning">Warning</Badge>
+ * <Badge variant="danger">Error</Badge>
+ *
+ * // Pill style with attention
+ * <Badge pill attention="pulse">5</Badge>
+ *
+ * // On buttons
+ * <Button>
+ *   Notifications
+ *   <Badge pill>3</Badge>
+ * </Button>
+ * ```
+ *
+ * @typedef {Object} BadgeProps
+ * @property {string} [variant] - The badge's theme variant
+ * @property {string} [appearance] - The badge's visual appearance
+ * @property {boolean} [pill] - Draws a pill-style badge
+ * @property {string} [attention] - Adds an animation to draw attention
+ */
+
+export const Badge = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-badge ref={ref} class={clsx('Badge', className)} {...props}>
+        {children}
+      </wa-badge>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/dist/templates/react/Badge/Badge.test.jsx.hbs

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Badge>Test</Badge>);
+    expect(container.querySelector('wa-badge')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Badge className="custom-class">Test</Badge>);
+    const element = container.querySelector('wa-badge');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes variant prop', () => {
+    const { container } = render(<Badge variant="success">Success</Badge>);
+    const element = container.querySelector('wa-badge');
+    expect(element?.getAttribute('variant')).toBe('success');
+  });
+
+  it('passes pill prop', () => {
+    const { container } = render(<Badge pill>5</Badge>);
+    const element = container.querySelector('wa-badge');
+    expect(element?.hasAttribute('pill')).toBe(true);
+  });
+});

package/dist/templates/react/Badge/Badge.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('renders children', () => {
+    render(<Badge>Test</Badge>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Badge className="custom-class">Test</Badge>);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/dist/templates/react/Badge/Badge.tsx.hbs

@@ -0,0 +1,50 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Badge.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge>New</Badge>
+ *
+ * // Variants
+ * <Badge variant="success">Success</Badge>
+ * <Badge variant="warning">Warning</Badge>
+ * <Badge variant="danger">Error</Badge>
+ *
+ * // Pill style with attention
+ * <Badge pill attention="pulse">5</Badge>
+ *
+ * // On buttons
+ * <Button>
+ *   Notifications
+ *   <Badge pill>3</Badge>
+ * </Button>
+ * ```
+ */
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The badge's theme variant */
+  variant?: 'brand' | 'neutral' | 'success' | 'warning' | 'danger';
+  /** The badge's visual appearance */
+  appearance?: 'accent' | 'filled' | 'outlined' | 'filled-outlined';
+  /** Draws a pill-style badge with rounded edges */
+  pill?: boolean;
+  /** Adds an animation to draw attention to the badge */
+  attention?: 'none' | 'pulse' | 'bounce';
+}
+
+export const Badge = forwardRef<HTMLElement, BadgeProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-badge ref={ref} class={clsx('Badge', className)} {...(props as Record<string, unknown>)}>
+        {children}
+      </wa-badge>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/dist/templates/react/Breadcrumb/Breadcrumb.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * Breadcrumb Component Styles
+ * Documentation: https://webawesome.com/docs/components/breadcrumb
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .Breadcrumb::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Breadcrumb {
+  /* Add your custom styles here */
+}