kigumi 0.2.0

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

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

package/templates/react/Combobox/Combobox.tsx.hbs

@@ -0,0 +1,154 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Combobox.css';
+
+/**
+ * Combines a text input with a listbox for filtering and selecting options
+ *
+ * @example
+ * ```tsx
+ * <Combobox label="Select a fruit" placeholder="Search...">
+ *   <wa-option value="apple">Apple</wa-option>
+ *   <wa-option value="banana">Banana</wa-option>
+ *   <wa-option value="cherry">Cherry</wa-option>
+ * </Combobox>
+ * ```
+ */
+export interface ComboboxProps extends Omit<HTMLAttributes<HTMLElement>, 'onInvalid' | 'dir'> {
+  /** Allows entering custom values */
+  'allow-custom-value'?: boolean;
+  /** Visual appearance style */
+  appearance?: 'filled' | 'outlined' | 'filled-outlined';
+  /** Autocomplete behavior */
+  autocomplete?: 'list' | 'none';
+  /** Disables the combobox */
+  disabled?: boolean;
+  /** Hint text */
+  hint?: string;
+  /** Label text */
+  label?: string;
+  /** Maximum visible options */
+  'max-options-visible'?: number;
+  /** Allows multiple selections */
+  multiple?: boolean;
+  /** Form field name */
+  name?: string;
+  /** Whether the listbox is open */
+  open?: boolean;
+  /** Rounded edges style */
+  pill?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Listbox placement */
+  placement?: 'top' | 'bottom';
+  /** Makes field mandatory */
+  required?: boolean;
+  /** Combobox size */
+  size?: 'small' | 'medium' | 'large';
+  /** Current value */
+  value?: string | string[];
+  /** Shows clear button */
+  'with-clear'?: boolean;
+  /** Event fired when listbox opens */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after listbox opens */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when listbox closes */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after listbox closes */
+  onAfterHide?: (event: CustomEvent) => void;
+  /** Event fired when value is cleared */
+  onClear?: (event: CustomEvent) => void;
+  /** Event fired when validation fails */
+  onInvalid?: (event: CustomEvent) => void;
+}
+
+export interface ComboboxRef {
+  show: () => void;
+  hide: () => void;
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  element: HTMLElement | null;
+}
+
+export const Combobox = forwardRef<ComboboxRef, ComboboxProps>(
+  ({ children, className, onShow, onAfterShow, onHide, onAfterHide, onClear, onInvalid, ...props }, ref) => {
+    const comboboxRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          if (comboboxRef.current && typeof comboboxRef.current.show === 'function') {
+            comboboxRef.current.show();
+          }
+        },
+        hide: () => {
+          if (comboboxRef.current && typeof comboboxRef.current.hide === 'function') {
+            comboboxRef.current.hide();
+          }
+        },
+        focus: (options?: FocusOptions) => {
+          if (comboboxRef.current && typeof comboboxRef.current.focus === 'function') {
+            comboboxRef.current.focus(options);
+          }
+        },
+        blur: () => {
+          if (comboboxRef.current && typeof comboboxRef.current.blur === 'function') {
+            comboboxRef.current.blur();
+          }
+        },
+        get element() {
+          return comboboxRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = comboboxRef.current;
+      if (!el) return;
+
+      const handleShow = (e: Event) => onShow?.(e as CustomEvent);
+      const handleAfterShow = (e: Event) => onAfterShow?.(e as CustomEvent);
+      const handleHide = (e: Event) => onHide?.(e as CustomEvent);
+      const handleAfterHide = (e: Event) => onAfterHide?.(e as CustomEvent);
+      const handleClear = (e: Event) => onClear?.(e as CustomEvent);
+      const handleInvalid = (e: Event) => onInvalid?.(e as CustomEvent);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+      el.addEventListener('wa-clear', handleClear);
+      el.addEventListener('wa-invalid', handleInvalid);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+        el.removeEventListener('wa-clear', handleClear);
+        el.removeEventListener('wa-invalid', handleInvalid);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide, onClear, onInvalid]);
+
+    return (
+      <wa-combobox
+        ref={comboboxRef}
+        class={clsx('Combobox', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-combobox>
+    );
+  }
+);
+
+Combobox.displayName = 'Combobox';

package/templates/react/Comparison/Comparison.css.hbs

@@ -0,0 +1,23 @@
+/**
+ * Comparison Component Styles
+ * Documentation: https://webawesome.com/docs/components/comparison
+ *
+ * CSS Custom Properties:
+ * - --divider-width: The width of the dividing line
+ * - --handle-size: The size of the compare handle
+ *
+ * CSS Parts:
+ * - base: The container that wraps the before and after content
+ * - before: The container that wraps the before content
+ * - after: The container that wraps the after content
+ * - divider: The divider that separates the before and after content
+ * - handle: The handle that the user drags to expose the after content
+ *
+ * @example
+ * .Comparison::part(handle) {
+ *   // Custom styles
+ * }
+ */
+.Comparison {
+  /* Add your custom styles here */
+}

package/templates/react/Comparison/Comparison.jsx.hbs

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Comparison.css';
+
+/**
+ * Compare visual differences between similar content with a sliding panel
+ *
+ * @example
+ * ```jsx
+ * <Comparison position={50}>
+ *   <img slot="before" src="before.jpg" alt="Before" />
+ *   <img slot="after" src="after.jpg" alt="After" />
+ * </Comparison>
+ * ```
+ */
+export const Comparison = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-comparison ref={ref} class={clsx('Comparison', className)} {...props}>
+        {children}
+      </wa-comparison>
+    );
+  }
+);
+
+Comparison.displayName = 'Comparison';

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Comparison } from './Comparison';
+
+describe('Comparison', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Comparison />);
+    expect(container.querySelector('wa-comparison')).toBeInTheDocument();
+  });
+
+  it('renders slot content', () => {
+    const { container } = render(
+      <Comparison>
+        <div slot="before">Before</div>
+        <div slot="after">After</div>
+      </Comparison>
+    );
+    expect(container.querySelector('[slot="before"]')).toBeInTheDocument();
+    expect(container.querySelector('[slot="after"]')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Comparison className="custom-class" />);
+    const element = container.querySelector('wa-comparison');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+});

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

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

package/templates/react/Comparison/Comparison.tsx.hbs

@@ -0,0 +1,32 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Comparison.css';
+
+/**
+ * Compare visual differences between similar content with a sliding panel
+ *
+ * @example
+ * ```tsx
+ * <Comparison position={50}>
+ *   <img slot="before" src="before.jpg" alt="Before" />
+ *   <img slot="after" src="after.jpg" alt="After" />
+ * </Comparison>
+ * ```
+ */
+export interface ComparisonProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Divider location as percentage (0-100) */
+  position?: number;
+}
+
+export const Comparison = forwardRef<HTMLElement, ComparisonProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-comparison ref={ref} class={clsx('Comparison', className)} {...(props as Record<string, unknown>)}>
+        {children}
+      </wa-comparison>
+    );
+  }
+);
+
+Comparison.displayName = 'Comparison';

package/templates/react/CopyButton/CopyButton.css.hbs

@@ -0,0 +1,25 @@
+/**
+ * CopyButton Component Styles
+ * Documentation: https://webawesome.com/docs/components/copy-button
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - button: The internal <button> element
+ * - copy-icon: The container that holds the copy icon
+ * - success-icon: The container that holds the success icon
+ * - error-icon: The container that holds the error icon
+ * - tooltip__base: The tooltip's exported base part
+ * - tooltip__base__popup: The tooltip's exported popup part
+ * - tooltip__base__arrow: The tooltip's exported arrow part
+ * - tooltip__body: The tooltip's exported body part
+ *
+ * @example
+ * .CopyButton::part(button) {
+ *   // Custom styles
+ * }
+ */
+.CopyButton {
+  /* Add your custom styles here */
+}

package/templates/react/CopyButton/CopyButton.jsx.hbs

@@ -0,0 +1,49 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './CopyButton.css';
+
+/**
+ * Copies text data to the clipboard when clicked
+ *
+ * @example
+ * ```jsx
+ * <CopyButton value="Text to copy" />
+ * <CopyButton from=".code-block" copy-label="Copy code" />
+ * ```
+ */
+export const CopyButton = React.forwardRef(
+  ({ children, className, onCopy, onError, ...props }, ref) => {
+    const internalRef = React.useRef(null);
+    const elementRef = ref || internalRef;
+
+    React.useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+
+      const handleCopy = (e) => {
+        if (onCopy) onCopy(e);
+      };
+
+      const handleError = (e) => {
+        if (onError) onError(e);
+      };
+
+      el.addEventListener('wa-copy', handleCopy);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-copy', handleCopy);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [elementRef, onCopy, onError]);
+
+    return (
+      <wa-copy-button ref={elementRef} class={clsx('CopyButton', className)} {...props}>
+        {children}
+      </wa-copy-button>
+    );
+  }
+);
+
+CopyButton.displayName = 'CopyButton';

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

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { CopyButton } from './CopyButton';
+
+describe('CopyButton', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<CopyButton value="test" />);
+    expect(container.querySelector('wa-copy-button')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<CopyButton value="test" className="custom-class" />);
+    const element = container.querySelector('wa-copy-button');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+});

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

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

package/templates/react/CopyButton/CopyButton.tsx.hbs

@@ -0,0 +1,71 @@
+import { forwardRef, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './CopyButton.css';
+
+/**
+ * Copies text data to the clipboard when clicked
+ *
+ * @example
+ * ```tsx
+ * <CopyButton value="Text to copy" />
+ * <CopyButton from=".code-block" copy-label="Copy code" success-label="Copied!" />
+ * ```
+ */
+export interface CopyButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'onCopy' | 'onError' | 'dir'> {
+  /** The text to copy */
+  value?: string;
+  /** Element selector to copy text from */
+  from?: string;
+  /** Disables the button */
+  disabled?: boolean;
+  /** Tooltip label for copy state */
+  'copy-label'?: string;
+  /** Tooltip label for success state */
+  'success-label'?: string;
+  /** Tooltip label for error state */
+  'error-label'?: string;
+  /** Duration of feedback state in milliseconds */
+  'feedback-duration'?: number;
+  /** Tooltip position */
+  'tooltip-placement'?: 'top' | 'right' | 'bottom' | 'left';
+  /** Event fired when copy succeeds */
+  onCopy?: (event: CustomEvent) => void;
+  /** Event fired when copy fails */
+  onError?: (event: CustomEvent) => void;
+}
+
+export const CopyButton = forwardRef<HTMLElement, CopyButtonProps>(
+  ({ children, className, onCopy, onError, ...props }, ref) => {
+    const internalRef = ref as React.RefObject<HTMLElement>;
+
+    useEffect(() => {
+      const el = internalRef && 'current' in internalRef ? internalRef.current : null;
+      if (!el) return;
+
+      const handleCopy = (e: Event) => {
+        if (onCopy) onCopy(e as CustomEvent);
+      };
+
+      const handleError = (e: Event) => {
+        if (onError) onError(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-copy', handleCopy);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-copy', handleCopy);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [internalRef, onCopy, onError]);
+
+    return (
+      <wa-copy-button ref={ref} class={clsx('CopyButton', className)} {...(props as Record<string, unknown>)}>
+        {children}
+      </wa-copy-button>
+    );
+  }
+);
+
+CopyButton.displayName = 'CopyButton';

package/templates/react/Details/Details.css.hbs

@@ -0,0 +1,24 @@
+/**
+ * Details Component Styles
+ * Documentation: https://webawesome.com/docs/components/details
+ *
+ * CSS Custom Properties:
+ * - --spacing: The amount of space around and between the details' content
+ * - --show-duration: The show duration to use when applying built-in animation classes (Default: 200ms)
+ * - --hide-duration: The hide duration to use when applying built-in animation classes (Default: 200ms)
+ *
+ * CSS Parts:
+ * - base: The inner <details> element used to render the component
+ * - header: The header that wraps both the summary and the expand/collapse icon
+ * - summary: The container that wraps the summary
+ * - icon: The container that wraps the expand/collapse icons
+ * - content: The details content
+ *
+ * @example
+ * .Details::part(header) {
+ *   // Custom styles
+ * }
+ */
+.Details {
+  /* Add your custom styles here */
+}

package/templates/react/Details/Details.jsx.hbs

@@ -0,0 +1,66 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Details.css';
+
+/**
+ * Shows a brief summary and expands to show additional content
+ *
+ * @example
+ * ```jsx
+ * <Details summary="Click to expand">
+ *   <p>Hidden content that reveals when expanded.</p>
+ * </Details>
+ * ```
+ */
+export const Details = React.forwardRef(
+  ({ children, className, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const detailsRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => detailsRef.current?.show?.(),
+        hide: () => detailsRef.current?.hide?.(),
+        get element() {
+          return detailsRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = detailsRef.current;
+      if (!el) return;
+
+      const handleShow = (e) => onShow?.(e);
+      const handleAfterShow = (e) => onAfterShow?.(e);
+      const handleHide = (e) => onHide?.(e);
+      const handleAfterHide = (e) => onAfterHide?.(e);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide]);
+
+    return (
+      <wa-details
+        ref={detailsRef}
+        class={clsx('Details', className)}
+        {...props}
+      >
+        {children}
+      </wa-details>
+    );
+  }
+);
+
+Details.displayName = 'Details';

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Details } from './Details';
+
+describe('Details', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Details summary="Test" />);
+    expect(container.querySelector('wa-details')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<Details ref={ref} summary="Test" />);
+    expect(ref.current).toHaveProperty('show');
+    expect(ref.current).toHaveProperty('hide');
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(
+      <Details summary="Summary">
+        Content here
+      </Details>
+    );
+    expect(getByText('Content here')).toBeInTheDocument();
+  });
+});

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

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