kigumi 0.2.0

package/templates/react/Checkbox/Checkbox.css.hbs

@@ -0,0 +1,24 @@
+/**
+ * Checkbox Component Styles
+ * Documentation: https://webawesome.com/docs/components/checkbox
+ *
+ * CSS Custom Properties:
+ * - --checked-icon-color: The color of the checked and indeterminate icons
+ * - --checked-icon-scale: The size of the checked and indeterminate icons relative to the checkbox
+ *
+ * CSS Parts:
+ * - base: The component's label
+ * - control: The square container that wraps the checkbox's checked state
+ * - checked-icon: The checked icon, a <wa-icon> element
+ * - indeterminate-icon: The indeterminate icon, a <wa-icon> element
+ * - label: The container that wraps the checkbox's label
+ * - hint: The hint's wrapper
+ *
+ * @example
+ * .Checkbox::part(control) {
+ *   // Custom styles
+ * }
+ */
+.Checkbox {
+  /* Add your custom styles here */
+}

package/templates/react/Checkbox/Checkbox.jsx.hbs

@@ -0,0 +1,80 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Checkbox.css';
+
+/**
+ * Checkboxes allow the user to toggle an option on or off
+ *
+ * @example
+ * ```jsx
+ * <Checkbox checked>Remember me</Checkbox>
+ * <Checkbox indeterminate>Select all</Checkbox>
+ * ```
+ *
+ * @typedef {Object} CheckboxProps
+ * @property {boolean} [checked] - Checked state
+ * @property {boolean} [disabled] - Disabled state
+ * @property {string} [hint] - Helper text
+ * @property {boolean} [indeterminate] - Mixed state
+ * @property {string} [name] - Form field name
+ * @property {boolean} [required] - Required field
+ * @property {'small'|'medium'|'large'} [size] - Checkbox size
+ * @property {string} [value] - Form value
+ * @property {(event: CustomEvent) => void} [onInvalid] - Invalid handler
+ */
+
+export const Checkbox = React.forwardRef(
+  ({ children, className, onInvalid, ...props }, ref) => {
+    const checkboxRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => {
+          checkboxRef.current?.focus?.(options);
+        },
+        blur: () => {
+          checkboxRef.current?.blur?.();
+        },
+        click: () => {
+          checkboxRef.current?.click?.();
+        },
+        setCustomValidity: (message) => {
+          checkboxRef.current?.setCustomValidity?.(message);
+        },
+        get element() {
+          return checkboxRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = checkboxRef.current;
+      if (!el) return;
+
+      const handleInvalid = (e) => {
+        if (onInvalid) onInvalid(e);
+      };
+
+      el.addEventListener('wa-invalid', handleInvalid);
+
+      return () => {
+        el.removeEventListener('wa-invalid', handleInvalid);
+      };
+    }, [onInvalid]);
+
+    return (
+      <wa-checkbox
+        ref={checkboxRef}
+        class={clsx('Checkbox', className)}
+        {...props}
+      >
+        {children}
+      </wa-checkbox>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Checkbox />);
+    expect(container.querySelector('wa-checkbox')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<Checkbox ref={ref} />);
+    expect(ref.current).toHaveProperty('focus');
+    expect(ref.current).toHaveProperty('blur');
+    expect(ref.current).toHaveProperty('click');
+    expect(ref.current).toHaveProperty('setCustomValidity');
+  });
+
+  it('renders children as label', () => {
+    const { getByText } = render(<Checkbox>Accept terms</Checkbox>);
+    expect(getByText('Accept terms')).toBeInTheDocument();
+  });
+});

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

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

package/templates/react/Checkbox/Checkbox.tsx.hbs

@@ -0,0 +1,113 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Checkbox.css';
+
+/**
+ * Checkboxes allow the user to toggle an option on or off
+ *
+ * @example
+ * ```tsx
+ * <Checkbox checked>Remember me</Checkbox>
+ * <Checkbox indeterminate>Select all</Checkbox>
+ * <Checkbox hint="Optional setting">Enable feature</Checkbox>
+ * ```
+ */
+export interface CheckboxProps extends Omit<HTMLAttributes<HTMLElement>, 'onInvalid' | 'dir'> {
+  /** Draws checkbox in checked state */
+  checked?: boolean;
+  /** Default value for form resets */
+  defaultChecked?: boolean;
+  /** Disables the checkbox */
+  disabled?: boolean;
+  /** Descriptive helper text */
+  hint?: string;
+  /** Mixed/parent selection state */
+  indeterminate?: boolean;
+  /** Form submission identifier */
+  name?: string;
+  /** Makes field mandatory */
+  required?: boolean;
+  /** Adjusts checkbox dimensions */
+  size?: 'small' | 'medium' | 'large';
+  /** Form submission value */
+  value?: string;
+  /** Event fired when validation fails */
+  onInvalid?: (event: CustomEvent) => void;
+}
+
+export interface CheckboxRef {
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  click: () => void;
+  setCustomValidity: (message: string) => void;
+  element: HTMLElement | null;
+}
+
+export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
+  ({ children, className, onInvalid, ...props }, ref) => {
+    const checkboxRef = useRef<HTMLElement & {
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+      click?: () => void;
+      setCustomValidity?: (message: string) => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options?: FocusOptions) => {
+          if (checkboxRef.current && typeof checkboxRef.current.focus === 'function') {
+            checkboxRef.current.focus(options);
+          }
+        },
+        blur: () => {
+          if (checkboxRef.current && typeof checkboxRef.current.blur === 'function') {
+            checkboxRef.current.blur();
+          }
+        },
+        click: () => {
+          if (checkboxRef.current && typeof checkboxRef.current.click === 'function') {
+            checkboxRef.current.click();
+          }
+        },
+        setCustomValidity: (message: string) => {
+          if (checkboxRef.current && typeof checkboxRef.current.setCustomValidity === 'function') {
+            checkboxRef.current.setCustomValidity(message);
+          }
+        },
+        get element() {
+          return checkboxRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = checkboxRef.current;
+      if (!el) return;
+
+      const handleInvalid = (e: Event) => {
+        if (onInvalid) onInvalid(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-invalid', handleInvalid);
+
+      return () => {
+        el.removeEventListener('wa-invalid', handleInvalid);
+      };
+    }, [onInvalid]);
+
+    return (
+      <wa-checkbox
+        ref={checkboxRef}
+        class={clsx('Checkbox', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-checkbox>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/templates/react/ColorPicker/ColorPicker.css.hbs

@@ -0,0 +1,37 @@
+/**
+ * ColorPicker Component Styles
+ * Documentation: https://webawesome.com/docs/components/color-picker
+ *
+ * CSS Custom Properties:
+ * - --grid-width: The width of the color grid
+ * - --grid-height: The height of the color grid
+ * - --grid-handle-size: The size of the color grid's handle
+ * - --slider-height: The height of the hue and alpha sliders
+ * - --slider-handle-size: The diameter of the slider's handle
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - trigger: The color picker's dropdown trigger
+ * - swatches: The container that holds the swatches
+ * - swatch: Each individual swatch
+ * - grid: The color grid
+ * - grid-handle: The color grid's handle
+ * - slider: Hue and opacity sliders
+ * - slider-handle: Hue and opacity slider handles
+ * - hue-slider: The hue slider
+ * - hue-slider-handle: The hue slider's handle
+ * - opacity-slider: The opacity slider
+ * - opacity-slider-handle: The opacity slider's handle
+ * - preview: The preview color
+ * - input: The text input
+ * - eyedropper-button: The eye dropper button
+ * - format-button: The format button
+ *
+ * @example
+ * .ColorPicker::part(base) {
+ *   // Custom styles
+ * }
+ */
+.ColorPicker {
+  /* Add your custom styles here */
+}

package/templates/react/ColorPicker/ColorPicker.jsx.hbs

@@ -0,0 +1,72 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ColorPicker.css';
+
+/**
+ * Color pickers allow the user to select a color
+ *
+ * @example
+ * ```jsx
+ * <ColorPicker value="#ff0000" />
+ * <ColorPicker format="rgb" opacity />
+ * ```
+ */
+export const ColorPicker = React.forwardRef(
+  ({ children, className, onShow, onAfterShow, onHide, onAfterHide, onInvalid, ...props }, ref) => {
+    const pickerRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => pickerRef.current?.show?.(),
+        hide: () => pickerRef.current?.hide?.(),
+        focus: (options) => pickerRef.current?.focus?.(options),
+        blur: () => pickerRef.current?.blur?.(),
+        getFormattedValue: (format) => pickerRef.current?.getFormattedValue?.(format) || '',
+        reportValidity: () => pickerRef.current?.reportValidity?.() ?? true,
+        get element() {
+          return pickerRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = pickerRef.current;
+      if (!el) return;
+
+      const handleShow = (e) => onShow?.(e);
+      const handleAfterShow = (e) => onAfterShow?.(e);
+      const handleHide = (e) => onHide?.(e);
+      const handleAfterHide = (e) => onAfterHide?.(e);
+      const handleInvalid = (e) => onInvalid?.(e);
+
+      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-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-invalid', handleInvalid);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide, onInvalid]);
+
+    return (
+      <wa-color-picker
+        ref={pickerRef}
+        class={clsx('ColorPicker', className)}
+        {...props}
+      >
+        {children}
+      </wa-color-picker>
+    );
+  }
+);
+
+ColorPicker.displayName = 'ColorPicker';

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ColorPicker } from './ColorPicker';
+
+describe('ColorPicker', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<ColorPicker />);
+    expect(container.querySelector('wa-color-picker')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<ColorPicker ref={ref} />);
+    expect(ref.current).toHaveProperty('show');
+    expect(ref.current).toHaveProperty('hide');
+    expect(ref.current).toHaveProperty('getFormattedValue');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<ColorPicker className="custom-class" />);
+    const element = container.querySelector('wa-color-picker');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+});

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

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

package/templates/react/ColorPicker/ColorPicker.tsx.hbs

@@ -0,0 +1,157 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ColorPicker.css';
+
+/**
+ * Color pickers allow the user to select a color
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker value="#ff0000" />
+ * <ColorPicker format="rgb" opacity />
+ * <ColorPicker swatches="#ff0000;#00ff00;#0000ff" />
+ * ```
+ */
+export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLElement>, 'onInvalid' | 'dir'> {
+  /** The current color value */
+  value?: string;
+  /** Default value for form resets */
+  defaultValue?: string;
+  /** Color format */
+  format?: 'hex' | 'rgb' | 'hsl' | 'hsv';
+  /** Enables opacity slider */
+  opacity?: boolean;
+  /** Disables the color picker */
+  disabled?: boolean;
+  /** Makes field mandatory */
+  required?: boolean;
+  /** Color picker size */
+  size?: 'small' | 'medium' | 'large';
+  /** Label text */
+  label?: string;
+  /** Hint text */
+  hint?: string;
+  /** Form field name */
+  name?: string;
+  /** Whether the panel is open */
+  open?: boolean;
+  /** Predefined color swatches (semicolon-separated or array) */
+  swatches?: string | string[];
+  /** Displays hex values in uppercase */
+  uppercase?: boolean;
+  /** Hides the format toggle button */
+  'without-format-toggle'?: boolean;
+  /** Event fired when panel opens */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after panel opens */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when panel closes */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after panel closes */
+  onAfterHide?: (event: CustomEvent) => void;
+  /** Event fired when validation fails */
+  onInvalid?: (event: CustomEvent) => void;
+}
+
+export interface ColorPickerRef {
+  show: () => void;
+  hide: () => void;
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  getFormattedValue: (format: string) => string;
+  reportValidity: () => boolean;
+  element: HTMLElement | null;
+}
+
+export const ColorPicker = forwardRef<ColorPickerRef, ColorPickerProps>(
+  ({ children, className, onShow, onAfterShow, onHide, onAfterHide, onInvalid, ...props }, ref) => {
+    const pickerRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+      getFormattedValue?: (format: string) => string;
+      reportValidity?: () => boolean;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          if (pickerRef.current && typeof pickerRef.current.show === 'function') {
+            pickerRef.current.show();
+          }
+        },
+        hide: () => {
+          if (pickerRef.current && typeof pickerRef.current.hide === 'function') {
+            pickerRef.current.hide();
+          }
+        },
+        focus: (options?: FocusOptions) => {
+          if (pickerRef.current && typeof pickerRef.current.focus === 'function') {
+            pickerRef.current.focus(options);
+          }
+        },
+        blur: () => {
+          if (pickerRef.current && typeof pickerRef.current.blur === 'function') {
+            pickerRef.current.blur();
+          }
+        },
+        getFormattedValue: (format: string) => {
+          if (pickerRef.current && typeof pickerRef.current.getFormattedValue === 'function') {
+            return pickerRef.current.getFormattedValue(format);
+          }
+          return '';
+        },
+        reportValidity: () => {
+          if (pickerRef.current && typeof pickerRef.current.reportValidity === 'function') {
+            return pickerRef.current.reportValidity();
+          }
+          return true;
+        },
+        get element() {
+          return pickerRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = pickerRef.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 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-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-invalid', handleInvalid);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide, onInvalid]);
+
+    return (
+      <wa-color-picker
+        ref={pickerRef}
+        class={clsx('ColorPicker', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-color-picker>
+    );
+  }
+);
+
+ColorPicker.displayName = 'ColorPicker';

package/templates/react/Combobox/Combobox.css.hbs

@@ -0,0 +1,32 @@
+/**
+ * Combobox Component Styles
+ * Documentation: https://webawesome.com/docs/components/combobox
+ *
+ * CSS Custom Properties:
+ * - --show-duration: The duration of the show animation (Default: 100ms)
+ * - --hide-duration: The duration of the hide animation (Default: 100ms)
+ * - --tag-max-size: When using multiple, the max size of tags before their content is truncated (Default: 10ch)
+ *
+ * CSS Parts:
+ * - form-control: The form control that wraps the label, input, and hint
+ * - form-control-label: The label's wrapper
+ * - form-control-input: The combobox's wrapper
+ * - hint: The hint's wrapper
+ * - combobox: The container the wraps the start, end, value, clear icon, and expand button
+ * - start: The container that wraps the start slot
+ * - end: The container that wraps the end slot
+ * - combobox-input: The text input element
+ * - listbox: The listbox container where options are slotted
+ * - tags: The container that houses option tags when multiselect is used
+ * - tag: The individual tags that represent each multiselect option
+ * - clear-button: The clear button
+ * - expand-icon: The container that wraps the expand icon
+ *
+ * @example
+ * .Combobox::part(combobox) {
+ *   // Custom styles
+ * }
+ */
+.Combobox {
+  /* Add your custom styles here */
+}

package/templates/react/Combobox/Combobox.jsx.hbs

@@ -0,0 +1,67 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Combobox.css';
+
+/**
+ * Combines a text input with a listbox for filtering and selecting options
+ */
+export const Combobox = React.forwardRef(
+  ({ children, className, onShow, onAfterShow, onHide, onAfterHide, onClear, onInvalid, ...props }, ref) => {
+    const comboboxRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => comboboxRef.current?.show?.(),
+        hide: () => comboboxRef.current?.hide?.(),
+        focus: (options) => comboboxRef.current?.focus?.(options),
+        blur: () => comboboxRef.current?.blur?.(),
+        get element() {
+          return comboboxRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = comboboxRef.current;
+      if (!el) return;
+
+      const handleShow = (e) => onShow?.(e);
+      const handleAfterShow = (e) => onAfterShow?.(e);
+      const handleHide = (e) => onHide?.(e);
+      const handleAfterHide = (e) => onAfterHide?.(e);
+      const handleClear = (e) => onClear?.(e);
+      const handleInvalid = (e) => onInvalid?.(e);
+
+      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}
+      >
+        {children}
+      </wa-combobox>
+    );
+  }
+);
+
+Combobox.displayName = 'Combobox';

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

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Combobox } from './Combobox';
+
+describe('Combobox', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Combobox />);
+    expect(container.querySelector('wa-combobox')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<Combobox ref={ref} />);
+    expect(ref.current).toHaveProperty('show');
+    expect(ref.current).toHaveProperty('hide');
+    expect(ref.current).toHaveProperty('focus');
+  });
+});