kigumi 0.2.0

package/templates/react/Input/Input.jsx.hbs

@@ -0,0 +1,126 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Input.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * // Basic usage
+ * <Input label="Email" type="email" placeholder="Enter email" />
+ * <Input type="password" password-toggle />
+ * <Input with-clear hint="Help text" />
+ *
+ * // With event handlers
+ * <Input 
+ *   label="Name"
+ *   onInput={(e) => console.log(e.detail.value)}
+ *   onChange={(e) => console.log('Changed:', e.detail.value)}
+ * />
+ *
+ * // With ref methods
+ * const inputRef = React.useRef(null);
+ * <button onClick={() => inputRef.current?.focus()}>Focus Input</button>
+ * <Input ref={inputRef} label="Focusable" />
+ * ```
+ *
+ * @typedef {Object} InputProps
+ * @property {string} [type] - Input type
+ * @property {string} [label] - Accessible label
+ * @property {string} [hint] - Descriptive hint text
+ * @property {string} [placeholder] - Placeholder text
+ * @property {string} [value] - Input value
+ * @property {string} [appearance] - Visual appearance style
+ * @property {string} [size] - Input size
+ * @property {boolean} [pill] - Rounded edges
+ * @property {boolean} [disabled] - Disables the input
+ * @property {boolean} [with-clear] - Adds clear button
+ * @property {boolean} [password-toggle] - Adds password toggle
+ * @property {function} [onBlur] - Event fired when input loses focus
+ * @property {function} [onFocus] - Event fired when input gains focus
+ * @property {function} [onInput] - Event fired when value changes
+ * @property {function} [onChange] - Event fired when value changes and loses focus
+ */
+
+export const Input = React.forwardRef(
+  ({ children, className, onBlur, onFocus, onInput, onChange, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          if (inputRef.current && typeof inputRef.current.focus === 'function') {
+            inputRef.current.focus();
+          }
+        },
+        blur: () => {
+          if (inputRef.current && typeof inputRef.current.blur === 'function') {
+            inputRef.current.blur();
+          }
+        },
+        select: () => {
+          if (inputRef.current && typeof inputRef.current.select === 'function') {
+            inputRef.current.select();
+          }
+        },
+        setSelectionRange: (start, end) => {
+          if (inputRef.current && typeof inputRef.current.setSelectionRange === 'function') {
+            inputRef.current.setSelectionRange(start, end);
+          }
+        },
+        get element() {
+          return inputRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = inputRef.current;
+      if (!el) return;
+
+      const handleBlur = (e) => {
+        if (onBlur) onBlur(e);
+      };
+
+      const handleFocus = (e) => {
+        if (onFocus) onFocus(e);
+      };
+
+      const handleInput = (e) => {
+        if (onInput) onInput(e);
+      };
+
+      const handleChange = (e) => {
+        if (onChange) onChange(e);
+      };
+
+      el.addEventListener('wa-blur', handleBlur);
+      el.addEventListener('wa-focus', handleFocus);
+      el.addEventListener('wa-input', handleInput);
+      el.addEventListener('wa-change', handleChange);
+
+      return () => {
+        el.removeEventListener('wa-blur', handleBlur);
+        el.removeEventListener('wa-focus', handleFocus);
+        el.removeEventListener('wa-input', handleInput);
+        el.removeEventListener('wa-change', handleChange);
+      };
+    }, [onBlur, onFocus, onInput, onChange]);
+
+    return (
+      <wa-input
+        ref={inputRef}
+        class={clsx('Input', className)}
+        {...props}
+      >
+        {children}
+      </wa-input>
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/templates/react/Input/Input.test.jsx.hbs

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Input } from './Input';
+
+describe('Input', () => {
+  it('renders without crashing', () => {
+    render(<Input label="Test Input" />);
+    const input = screen.getByLabelText('Test Input');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Input className="custom-class" />);
+    const input = container.querySelector('wa-input');
+    expect(input?.className).toContain('custom-class');
+  });
+
+  it('forwards ref correctly', () => {
+    const ref = React.createRef();
+    render(<Input ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+  });
+});

package/templates/react/Input/Input.test.tsx.hbs

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

package/templates/react/Input/Input.tsx.hbs

@@ -0,0 +1,154 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Input.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input label="Email" type="email" placeholder="Enter email" />
+ * <Input type="password" password-toggle />
+ * <Input with-clear hint="Help text" />
+ *
+ * // With event handlers
+ * <Input 
+ *   label="Name"
+ *   onInput={(e) => console.log(e.detail.value)}
+ *   onChange={(e) => console.log('Changed:', e.detail.value)}
+ * />
+ *
+ * // With ref methods
+ * const inputRef = useRef<InputRef>(null);
+ * <button onClick={() => inputRef.current?.focus()}>Focus Input</button>
+ * <Input ref={inputRef} label="Focusable" />
+ * ```
+ */
+export interface InputProps extends Omit<HTMLAttributes<HTMLElement>, 'onInput' | 'onChange' | 'onBlur' | 'onFocus' | 'dir'> {
+  /** Input type */
+  type?: 'text' | 'email' | 'password' | 'number' | 'date' | 'tel' | 'url' | 'search';
+  /** Accessible label for the input */
+  label?: string;
+  /** Descriptive hint text */
+  hint?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Input value */
+  value?: string;
+  /** Visual appearance style */
+  appearance?: 'filled' | 'filled-outlined' | 'outlined';
+  /** Input size */
+  size?: 'small' | 'medium' | 'large';
+  /** Gives the input rounded edges */
+  pill?: boolean;
+  /** Disables the input */
+  disabled?: boolean;
+  /** Adds a clear button when input has content */
+  'with-clear'?: boolean;
+  /** Adds a toggle button for password visibility */
+  'password-toggle'?: boolean;
+  /** Event fired when the input loses focus */
+  onBlur?: (event: FocusEvent) => void;
+  /** Event fired when the input gains focus */
+  onFocus?: (event: FocusEvent) => void;
+  /** Event fired when the input value changes */
+  onInput?: (event: CustomEvent) => void;
+  /** Event fired when the input value changes and loses focus */
+  onChange?: (event: CustomEvent) => void;
+}
+
+export interface InputRef {
+  focus: () => void;
+  blur: () => void;
+  select: () => void;
+  setSelectionRange: (start: number, end: number) => void;
+  element: HTMLElement | null;
+}
+
+export const Input = forwardRef<InputRef, InputProps>(
+  ({ children, className, onBlur, onFocus, onInput, onChange, ...props }, ref) => {
+    const inputRef = useRef<HTMLElement & {
+      focus?: () => void;
+      blur?: () => void;
+      select?: () => void;
+      setSelectionRange?: (start: number, end: number) => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          if (inputRef.current && typeof inputRef.current.focus === 'function') {
+            inputRef.current.focus();
+          }
+        },
+        blur: () => {
+          if (inputRef.current && typeof inputRef.current.blur === 'function') {
+            inputRef.current.blur();
+          }
+        },
+        select: () => {
+          if (inputRef.current && typeof inputRef.current.select === 'function') {
+            inputRef.current.select();
+          }
+        },
+        setSelectionRange: (start: number, end: number) => {
+          if (inputRef.current && typeof inputRef.current.setSelectionRange === 'function') {
+            inputRef.current.setSelectionRange(start, end);
+          }
+        },
+        get element() {
+          return inputRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = inputRef.current;
+      if (!el) return;
+
+      const handleBlur = (e: Event) => {
+        if (onBlur) onBlur(e as FocusEvent);
+      };
+
+      const handleFocus = (e: Event) => {
+        if (onFocus) onFocus(e as FocusEvent);
+      };
+
+      const handleInput = (e: Event) => {
+        if (onInput) onInput(e as CustomEvent);
+      };
+
+      const handleChange = (e: Event) => {
+        if (onChange) onChange(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-blur', handleBlur);
+      el.addEventListener('wa-focus', handleFocus);
+      el.addEventListener('wa-input', handleInput);
+      el.addEventListener('wa-change', handleChange);
+
+      return () => {
+        el.removeEventListener('wa-blur', handleBlur);
+        el.removeEventListener('wa-focus', handleFocus);
+        el.removeEventListener('wa-input', handleInput);
+        el.removeEventListener('wa-change', handleChange);
+      };
+    }, [onBlur, onFocus, onInput, onChange]);
+
+    return (
+      <wa-input
+        ref={inputRef}
+        class={clsx('Input', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-input>
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/templates/react/IntersectionObserver/IntersectionObserver.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * IntersectionObserver Component Styles
+ * Documentation: https://webawesome.com/docs/components/intersection-observer
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * (No CSS parts defined for this component)
+ *
+ * @example
+ * .IntersectionObserver {
+ *   // Custom styles
+ * }
+ */
+.IntersectionObserver {
+  /* Add your custom styles here */
+}

package/templates/react/IntersectionObserver/IntersectionObserver.jsx.hbs

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './IntersectionObserver.css';
+
+export const IntersectionObserver = React.forwardRef(
+  ({ children, className, onIntersect, ...props }, ref) => {
+    const observerRef = React.useRef(null);
+
+    React.useEffect(() => {
+      const el = observerRef.current;
+      if (!el) return;
+
+      const handleIntersect = (e) => onIntersect?.(e);
+      el.addEventListener('wa-intersect', handleIntersect);
+
+      return () => {
+        el.removeEventListener('wa-intersect', handleIntersect);
+      };
+    }, [onIntersect]);
+
+    return (
+      <wa-intersection-observer
+        ref={(node) => {
+          observerRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('IntersectionObserver', className)}
+        {...props}
+      >
+        {children}
+      </wa-intersection-observer>
+    );
+  }
+);
+
+IntersectionObserver.displayName = 'IntersectionObserver';

package/templates/react/IntersectionObserver/IntersectionObserver.test.jsx.hbs

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { IntersectionObserver } from './IntersectionObserver';
+
+describe('IntersectionObserver', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <IntersectionObserver>
+        <div>Content</div>
+      </IntersectionObserver>
+    );
+    expect(container.querySelector('wa-intersection-observer')).toBeInTheDocument();
+  });
+});

package/templates/react/IntersectionObserver/IntersectionObserver.test.tsx.hbs

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

package/templates/react/IntersectionObserver/IntersectionObserver.tsx.hbs

@@ -0,0 +1,55 @@
+import { forwardRef, useRef, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './IntersectionObserver.css';
+
+export interface IntersectionObserverProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Deactivates the intersection observer functionality */
+  disabled?: boolean;
+  /** CSS class applied to elements during intersection */
+  'intersect-class'?: string;
+  /** If enabled, observation ceases after initial intersection */
+  once?: boolean;
+  /** Element ID to define the viewport boundaries */
+  root?: string | null;
+  /** Offset space around the root boundary */
+  'root-margin'?: string;
+  /** Space-separated visibility percentages triggering the observer */
+  threshold?: string;
+  /** Event fired when a tracked element begins or ceases intersecting */
+  onIntersect?: (event: CustomEvent) => void;
+}
+
+export const IntersectionObserver = forwardRef<HTMLElement, IntersectionObserverProps>(
+  ({ children, className, onIntersect, ...props }, ref) => {
+    const observerRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const el = observerRef.current;
+      if (!el) return;
+
+      const handleIntersect = (e: Event) => onIntersect?.(e as CustomEvent);
+      el.addEventListener('wa-intersect', handleIntersect);
+
+      return () => {
+        el.removeEventListener('wa-intersect', handleIntersect);
+      };
+    }, [onIntersect]);
+
+    return (
+      <wa-intersection-observer
+        ref={(node: HTMLElement | null) => {
+          (observerRef as React.MutableRefObject<HTMLElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('IntersectionObserver', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-intersection-observer>
+    );
+  }
+);
+
+IntersectionObserver.displayName = 'IntersectionObserver';

package/templates/react/MutationObserver/MutationObserver.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * MutationObserver Component Styles
+ * Documentation: https://webawesome.com/docs/components/mutation-observer
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * (No CSS parts defined for this component)
+ *
+ * @example
+ * .MutationObserver {
+ *   // Custom styles
+ * }
+ */
+.MutationObserver {
+  /* Add your custom styles here */
+}

package/templates/react/MutationObserver/MutationObserver.jsx.hbs

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './MutationObserver.css';
+
+export const MutationObserver = React.forwardRef(
+  ({ children, className, onMutation, ...props }, ref) => {
+    const observerRef = React.useRef(null);
+
+    React.useEffect(() => {
+      const el = observerRef.current;
+      if (!el) return;
+
+      const handleMutation = (e) => onMutation?.(e);
+      el.addEventListener('wa-mutation', handleMutation);
+
+      return () => {
+        el.removeEventListener('wa-mutation', handleMutation);
+      };
+    }, [onMutation]);
+
+    return (
+      <wa-mutation-observer
+        ref={(node) => {
+          observerRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('MutationObserver', className)}
+        {...props}
+      >
+        {children}
+      </wa-mutation-observer>
+    );
+  }
+);
+
+MutationObserver.displayName = 'MutationObserver';

package/templates/react/MutationObserver/MutationObserver.test.jsx.hbs

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MutationObserver } from './MutationObserver';
+
+describe('MutationObserver', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <MutationObserver child-list>
+        <div>Content</div>
+      </MutationObserver>
+    );
+    expect(container.querySelector('wa-mutation-observer')).toBeInTheDocument();
+  });
+});

package/templates/react/MutationObserver/MutationObserver.test.tsx.hbs

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

package/templates/react/MutationObserver/MutationObserver.tsx.hbs

@@ -0,0 +1,55 @@
+import { forwardRef, useRef, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './MutationObserver.css';
+
+export interface MutationObserverProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Watches for changes to attributes. Use '*' to watch all */
+  attr?: string;
+  /** Records attribute's previous value */
+  'attr-old-value'?: boolean;
+  /** Watches for changes to character data */
+  'char-data'?: boolean;
+  /** Records previous text value */
+  'char-data-old-value'?: boolean;
+  /** Watches for addition or removal of child nodes */
+  'child-list'?: boolean;
+  /** Disables the observer */
+  disabled?: boolean;
+  /** Event fired when a mutation occurs */
+  onMutation?: (event: CustomEvent) => void;
+}
+
+export const MutationObserver = forwardRef<HTMLElement, MutationObserverProps>(
+  ({ children, className, onMutation, ...props }, ref) => {
+    const observerRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const el = observerRef.current;
+      if (!el) return;
+
+      const handleMutation = (e: Event) => onMutation?.(e as CustomEvent);
+      el.addEventListener('wa-mutation', handleMutation);
+
+      return () => {
+        el.removeEventListener('wa-mutation', handleMutation);
+      };
+    }, [onMutation]);
+
+    return (
+      <wa-mutation-observer
+        ref={(node: HTMLElement | null) => {
+          (observerRef as React.MutableRefObject<HTMLElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('MutationObserver', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-mutation-observer>
+    );
+  }
+);
+
+MutationObserver.displayName = 'MutationObserver';

package/templates/react/Option/Option.css.hbs

@@ -0,0 +1,21 @@
+/**
+ * Option Component Styles
+ * Documentation: https://webawesome.com/docs/components/option
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - checked-icon: The checked icon, a <wa-icon> element
+ * - label: The option's label
+ * - start: The container that wraps the start slot
+ * - end: The container that wraps the end slot
+ *
+ * @example
+ * .Option::part(label) {
+ *   // Custom styles
+ * }
+ */
+.Option {
+  /* Add your custom styles here */
+}

package/templates/react/Option/Option.jsx.hbs

@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Option.css';
+
+export const Option = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-option
+        ref={ref}
+        class={clsx('Option', className)}
+        {...props}
+      >
+        {children}
+      </wa-option>
+    );
+  }
+);
+
+Option.displayName = 'Option';

package/templates/react/Option/Option.test.jsx.hbs

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Option } from './Option';
+
+describe('Option', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Option value="1">Option 1</Option>);
+    expect(container.querySelector('wa-option')).toBeInTheDocument();
+  });
+});

package/templates/react/Option/Option.test.tsx.hbs

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