kigumi 0.2.0

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

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

package/templates/react/Tab/Tab.tsx.hbs

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Tab.css';
+
+export interface TabProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The name of the tab panel this tab is associated with */
+  panel?: string;
+  /** Disables the tab */
+  disabled?: boolean;
+}
+
+export const Tab = forwardRef<HTMLElement, TabProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-tab
+        ref={ref}
+        class={clsx('Tab', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tab>
+    );
+  }
+);
+
+Tab.displayName = 'Tab';

package/templates/react/TabGroup/TabGroup.css.hbs

@@ -0,0 +1,27 @@
+/**
+ * TabGroup Component Styles
+ * Documentation: https://webawesome.com/docs/components/tab-group
+ *
+ * CSS Custom Properties:
+ * - --indicator-color: The color of the active tab indicator
+ * - --track-color: The color of the indicator's track (the line that separates tabs from panels)
+ * - --track-width: The width of the indicator's track (the line that separates tabs from panels)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - nav: The tab group's navigation container where tabs are slotted in
+ * - tabs: The container that wraps the tabs
+ * - body: The tab group's body where tab panels are slotted in
+ * - scroll-button: The previous/next scroll buttons that show when tabs are scrollable, a <wa-button>
+ * - scroll-button-start: The starting scroll button
+ * - scroll-button-end: The ending scroll button
+ * - scroll-button__base: The scroll button's exported base part
+ *
+ * @example
+ * .TabGroup::part(tabs) {
+ *   // Custom styles
+ * }
+ */
+.TabGroup {
+  /* Add your custom styles here */
+}

package/templates/react/TabGroup/TabGroup.jsx.hbs

@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './TabGroup.css';
+
+export const TabGroup = React.forwardRef(
+  ({ children, className, onTabShow, onTabHide, ...props }, ref) => {
+    const groupRef = React.useRef(null);
+
+    React.useEffect(() => {
+      const el = groupRef.current;
+      if (!el) return;
+
+      const handleTabShow = (e) => onTabShow?.(e);
+      const handleTabHide = (e) => onTabHide?.(e);
+
+      el.addEventListener('wa-tab-show', handleTabShow);
+      el.addEventListener('wa-tab-hide', handleTabHide);
+
+      return () => {
+        el.removeEventListener('wa-tab-show', handleTabShow);
+        el.removeEventListener('wa-tab-hide', handleTabHide);
+      };
+    }, [onTabShow, onTabHide]);
+
+    return (
+      <wa-tab-group
+        ref={(node) => {
+          groupRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('TabGroup', className)}
+        {...props}
+      >
+        {children}
+      </wa-tab-group>
+    );
+  }
+);
+
+TabGroup.displayName = 'TabGroup';

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

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

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

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

package/templates/react/TabGroup/TabGroup.tsx.hbs

@@ -0,0 +1,57 @@
+import { forwardRef, useRef, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './TabGroup.css';
+
+export interface TabGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** When auto, navigating tabs will instantly show the panel */
+  activation?: 'auto' | 'manual';
+  /** Sets the currently displayed tab panel */
+  active?: string;
+  /** Determines tab position relative to panels */
+  placement?: 'top' | 'bottom' | 'start' | 'end';
+  /** Disables the scroll arrows */
+  'without-scroll-controls'?: boolean;
+  /** Event fired when a tab becomes visible */
+  onTabShow?: (event: CustomEvent) => void;
+  /** Event fired when a tab becomes hidden */
+  onTabHide?: (event: CustomEvent) => void;
+}
+
+export const TabGroup = forwardRef<HTMLElement, TabGroupProps>(
+  ({ children, className, onTabShow, onTabHide, ...props }, ref) => {
+    const groupRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const el = groupRef.current;
+      if (!el) return;
+
+      const handleTabShow = (e: Event) => onTabShow?.(e as CustomEvent);
+      const handleTabHide = (e: Event) => onTabHide?.(e as CustomEvent);
+
+      el.addEventListener('wa-tab-show', handleTabShow);
+      el.addEventListener('wa-tab-hide', handleTabHide);
+
+      return () => {
+        el.removeEventListener('wa-tab-show', handleTabShow);
+        el.removeEventListener('wa-tab-hide', handleTabHide);
+      };
+    }, [onTabShow, onTabHide]);
+
+    return (
+      <wa-tab-group
+        ref={(node: HTMLElement | null) => {
+          (groupRef as React.MutableRefObject<HTMLElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('TabGroup', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tab-group>
+    );
+  }
+);
+
+TabGroup.displayName = 'TabGroup';

package/templates/react/TabPanel/TabPanel.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * TabPanel Component Styles
+ * Documentation: https://webawesome.com/docs/components/tab-panel
+ *
+ * CSS Custom Properties:
+ * - --padding: The tab panel's padding
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .TabPanel::part(base) {
+ *   // Custom styles
+ * }
+ */
+.TabPanel {
+  /* Add your custom styles here */
+}

package/templates/react/TabPanel/TabPanel.jsx.hbs

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

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

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

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

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

package/templates/react/TabPanel/TabPanel.tsx.hbs

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './TabPanel.css';
+
+export interface TabPanelProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The tab panel's name */
+  name?: string;
+  /** When true, the tab panel will be shown */
+  active?: boolean;
+}
+
+export const TabPanel = forwardRef<HTMLElement, TabPanelProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-tab-panel
+        ref={ref}
+        class={clsx('TabPanel', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tab-panel>
+    );
+  }
+);
+
+TabPanel.displayName = 'TabPanel';

package/templates/react/Tag/Tag.css.hbs

@@ -0,0 +1,21 @@
+/**
+ * Tag Component Styles
+ * Documentation: https://webawesome.com/docs/components/tag
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - content: The tag's content
+ * - remove-button: The tag's remove button, a <wa-button>
+ * - remove-button__base: The remove button's exported base part
+ *
+ * @example
+ * .Tag::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Tag {
+  /* Add your custom styles here */
+}

package/templates/react/Tag/Tag.jsx.hbs

@@ -0,0 +1,41 @@
+import React, { useRef, useImperativeHandle, useEffect } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Tag.css';
+
+export const Tag = React.forwardRef(
+  ({ children, className, onRemove, ...props }, ref) => {
+    const tagRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      get element() {
+        return tagRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = tagRef.current;
+      if (!el) return;
+
+      const handleRemove = (e) => onRemove?.(e);
+
+      el.addEventListener('wa-remove', handleRemove);
+
+      return () => {
+        el.removeEventListener('wa-remove', handleRemove);
+      };
+    }, [onRemove]);
+
+    return (
+      <wa-tag
+        ref={tagRef}
+        class={clsx('Tag', className)}
+        {...props}
+      >
+        {children}
+      </wa-tag>
+    );
+  }
+);
+
+Tag.displayName = 'Tag';

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

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

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

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

package/templates/react/Tag/Tag.tsx.hbs

@@ -0,0 +1,60 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Tag.css';
+
+export interface TagProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The tag's visual appearance */
+  appearance?: 'accent' | 'filled' | 'outlined' | 'filled-outlined';
+  /** Draws a pill-style tag with rounded edges */
+  pill?: boolean;
+  /** The tag's size */
+  size?: 'small' | 'medium' | 'large';
+  /** The tag's theme variant */
+  variant?: 'brand' | 'neutral' | 'success' | 'warning' | 'danger';
+  /** Makes the tag removable and shows a remove button */
+  withRemove?: boolean;
+  /** Emitted when the remove button is activated */
+  onRemove?: (event: CustomEvent) => void;
+}
+
+export interface TagRef {
+  element: HTMLElement | null;
+}
+
+export const Tag = forwardRef<TagRef, TagProps>(
+  ({ children, className, onRemove, ...props }, ref) => {
+    const tagRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      get element() {
+        return tagRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = tagRef.current;
+      if (!el) return;
+
+      const handleRemove = (e: Event) => onRemove?.(e as CustomEvent);
+
+      el.addEventListener('wa-remove', handleRemove);
+
+      return () => {
+        el.removeEventListener('wa-remove', handleRemove);
+      };
+    }, [onRemove]);
+
+    return (
+      <wa-tag
+        ref={tagRef}
+        class={clsx('Tag', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tag>
+    );
+  }
+);
+
+Tag.displayName = 'Tag';

package/templates/react/Textarea/Textarea.css.hbs

@@ -0,0 +1,22 @@
+/**
+ * Textarea Component Styles
+ * Documentation: https://webawesome.com/docs/components/textarea
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - label: The label
+ * - form-control-input: The input's wrapper
+ * - hint: The hint's wrapper
+ * - textarea: The internal <textarea> control
+ * - base: The wrapper around the <textarea> control
+ *
+ * @example
+ * .Textarea::part(textarea) {
+ *   // Custom styles
+ * }
+ */
+.Textarea {
+  /* Add your custom styles here */
+}

package/templates/react/Textarea/Textarea.jsx.hbs

@@ -0,0 +1,58 @@
+import React, { useRef, useImperativeHandle, useEffect } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Textarea.css';
+
+export const Textarea = React.forwardRef(
+  ({ className, onInput, onChange, onInvalid, onFocus, onBlur, ...props }, ref) => {
+    const textareaRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: (options) => textareaRef.current?.focus?.(options),
+      blur: () => textareaRef.current?.blur?.(),
+      select: () => textareaRef.current?.select?.(),
+      setRangeText: (replacement, start, end, selectMode) =>
+        textareaRef.current?.setRangeText?.(replacement, start, end, selectMode),
+      setSelectionRange: (start, end, direction) =>
+        textareaRef.current?.setSelectionRange?.(start, end, direction),
+      get element() {
+        return textareaRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+
+      const handleInput = (e) => onInput?.(e);
+      const handleChange = (e) => onChange?.(e);
+      const handleInvalid = (e) => onInvalid?.(e);
+      const handleFocus = (e) => onFocus?.(e);
+      const handleBlur = (e) => onBlur?.(e);
+
+      el.addEventListener('input', handleInput);
+      el.addEventListener('change', handleChange);
+      el.addEventListener('wa-invalid', handleInvalid);
+      el.addEventListener('focus', handleFocus);
+      el.addEventListener('blur', handleBlur);
+
+      return () => {
+        el.removeEventListener('input', handleInput);
+        el.removeEventListener('change', handleChange);
+        el.removeEventListener('wa-invalid', handleInvalid);
+        el.removeEventListener('focus', handleFocus);
+        el.removeEventListener('blur', handleBlur);
+      };
+    }, [onInput, onChange, onInvalid, onFocus, onBlur]);
+
+    return (
+      <wa-textarea
+        ref={textareaRef}
+        class={clsx('Textarea', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

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

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

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

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

package/templates/react/Textarea/Textarea.tsx.hbs

@@ -0,0 +1,114 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Textarea.css';
+
+export interface TextareaProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onInvalid' | 'dir'> {
+  /** The textarea's visual appearance */
+  appearance?: 'filled' | 'outlined' | 'filled-outlined';
+  /** Disables the textarea */
+  disabled?: boolean;
+  /** The textarea's label */
+  label?: string;
+  /** Hint text displayed below the textarea */
+  hint?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** The textarea's value */
+  value?: string;
+  /** Number of visible rows */
+  rows?: number;
+  /** The textarea's size */
+  size?: 'small' | 'medium' | 'large';
+  /** How the textarea can be resized */
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both' | 'auto';
+  /** Makes the textarea readonly */
+  readonly?: boolean;
+  /** Makes the textarea required */
+  required?: boolean;
+  /** Maximum character length */
+  maxlength?: number;
+  /** Minimum character length */
+  minlength?: number;
+  /** Enable spell checking */
+  spellcheck?: boolean;
+  /** Emitted when the textarea receives input */
+  onInput?: (event: Event) => void;
+  /** Emitted when the value is committed by the user */
+  onChange?: (event: Event) => void;
+  /** Emitted when the form control is checked for validity */
+  onInvalid?: (event: CustomEvent) => void;
+  /** Emitted when the textarea gains focus */
+  onFocus?: (event: FocusEvent) => void;
+  /** Emitted when the textarea loses focus */
+  onBlur?: (event: FocusEvent) => void;
+}
+
+export interface TextareaRef {
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  select: () => void;
+  setRangeText: (replacement: string, start?: number, end?: number, selectMode?: string) => void;
+  setSelectionRange: (start: number | null, end: number | null, direction?: string) => void;
+  element: HTMLElement | null;
+}
+
+export const Textarea = forwardRef<TextareaRef, TextareaProps>(
+  ({ className, onInput, onChange, onInvalid, onFocus, onBlur, ...props }, ref) => {
+    const textareaRef = useRef<HTMLElement & {
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+      select?: () => void;
+      setRangeText?: (replacement: string, start?: number, end?: number, selectMode?: string) => void;
+      setSelectionRange?: (start: number | null, end: number | null, direction?: string) => void;
+    }>(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: (options?: FocusOptions) => textareaRef.current?.focus?.(options),
+      blur: () => textareaRef.current?.blur?.(),
+      select: () => textareaRef.current?.select?.(),
+      setRangeText: (replacement: string, start?: number, end?: number, selectMode?: string) =>
+        textareaRef.current?.setRangeText?.(replacement, start, end, selectMode),
+      setSelectionRange: (start: number | null, end: number | null, direction?: string) =>
+        textareaRef.current?.setSelectionRange?.(start, end, direction),
+      get element() {
+        return textareaRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+
+      const handleInput = (e: Event) => onInput?.(e);
+      const handleChange = (e: Event) => onChange?.(e);
+      const handleInvalid = (e: Event) => onInvalid?.(e as CustomEvent);
+      const handleFocus = (e: Event) => onFocus?.(e as FocusEvent);
+      const handleBlur = (e: Event) => onBlur?.(e as FocusEvent);
+
+      el.addEventListener('input', handleInput);
+      el.addEventListener('change', handleChange);
+      el.addEventListener('wa-invalid', handleInvalid);
+      el.addEventListener('focus', handleFocus);
+      el.addEventListener('blur', handleBlur);
+
+      return () => {
+        el.removeEventListener('input', handleInput);
+        el.removeEventListener('change', handleChange);
+        el.removeEventListener('wa-invalid', handleInvalid);
+        el.removeEventListener('focus', handleFocus);
+        el.removeEventListener('blur', handleBlur);
+      };
+    }, [onInput, onChange, onInvalid, onFocus, onBlur]);
+
+    return (
+      <wa-textarea
+        ref={textareaRef}
+        class={clsx('Textarea', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';