kigumi 0.2.0

package/templates/react/QrCode/QrCode.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * QrCode Component Styles
+ * Documentation: https://webawesome.com/docs/components/qr-code
+ *
+ * CSS Custom Properties:
+ * - --size: The size of the QR code
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .QrCode::part(base) {
+ *   // Custom styles
+ * }
+ */
+.QrCode {
+  /* Add your custom styles here */
+}

package/templates/react/QrCode/QrCode.jsx.hbs

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

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

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

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

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

package/templates/react/QrCode/QrCode.tsx.hbs

@@ -0,0 +1,35 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './QrCode.css';
+
+export interface QrCodeProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The QR code's value */
+  value: string;
+  /** The size of the QR code, in pixels */
+  size?: number;
+  /** The fill color */
+  fill?: string;
+  /** The background color */
+  background?: string;
+  /** The edge radius of each module (0-0.5 range) */
+  radius?: number;
+  /** The level of error correction to use */
+  'error-correction'?: 'L' | 'M' | 'Q' | 'H';
+  /** The label for assistive devices */
+  label?: string;
+}
+
+export const QrCode = forwardRef<HTMLElement, QrCodeProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-qr-code
+        ref={ref}
+        class={clsx('QrCode', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+QrCode.displayName = 'QrCode';

package/templates/react/Radio/Radio.css.hbs

@@ -0,0 +1,21 @@
+/**
+ * Radio Component Styles
+ * Documentation: https://webawesome.com/docs/components/radio
+ *
+ * CSS Custom Properties:
+ * - --checked-icon-color: The color of the checked icon
+ * - --checked-icon-scale: The size of the checked icon relative to the radio button
+ *
+ * CSS Parts:
+ * - control: The circular container that wraps the radio's checked state
+ * - checked-icon: The checked icon, a <wa-icon> element
+ * - label: The container that wraps the radio's label
+ *
+ * @example
+ * .Radio::part(control) {
+ *   // Custom styles
+ * }
+ */
+.Radio {
+  /* Add your custom styles here */
+}

package/templates/react/Radio/Radio.jsx.hbs

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

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

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

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

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

package/templates/react/Radio/Radio.tsx.hbs

@@ -0,0 +1,31 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Radio.css';
+
+export interface RadioProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The radio's value */
+  value?: string;
+  /** The radio's visual presentation style */
+  appearance?: 'default' | 'button';
+  /** Disables the radio */
+  disabled?: boolean;
+  /** Adjustable sizing */
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Radio = forwardRef<HTMLElement, RadioProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-radio
+        ref={ref}
+        class={clsx('Radio', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-radio>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';

package/templates/react/RadioGroup/RadioGroup.css.hbs

@@ -0,0 +1,22 @@
+/**
+ * RadioGroup Component Styles
+ * Documentation: https://webawesome.com/docs/components/radio-group
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * 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 input's wrapper
+ * - radios: The container that wraps the radio buttons
+ * - hint: The hint's wrapper
+ *
+ * @example
+ * .RadioGroup::part(radios) {
+ *   // Custom styles
+ * }
+ */
+.RadioGroup {
+  /* Add your custom styles here */
+}

package/templates/react/RadioGroup/RadioGroup.jsx.hbs

@@ -0,0 +1,49 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './RadioGroup.css';
+
+export const RadioGroup = React.forwardRef(
+  ({ children, className, onChange, onInvalid, ...props }, ref) => {
+    const groupRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => groupRef.current?.focus?.(options),
+        get element() {
+          return groupRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = groupRef.current;
+      if (!el) return;
+
+      const handleChange = (e) => onChange?.(e);
+      const handleInvalid = (e) => onInvalid?.(e);
+
+      el.addEventListener('change', handleChange);
+      el.addEventListener('wa-invalid', handleInvalid);
+
+      return () => {
+        el.removeEventListener('change', handleChange);
+        el.removeEventListener('wa-invalid', handleInvalid);
+      };
+    }, [onChange, onInvalid]);
+
+    return (
+      <wa-radio-group
+        ref={groupRef}
+        class={clsx('RadioGroup', className)}
+        {...props}
+      >
+        {children}
+      </wa-radio-group>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroup';

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

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { RadioGroup } from './RadioGroup';
+
+describe('RadioGroup', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<RadioGroup label="Options" />);
+    expect(container.querySelector('wa-radio-group')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<RadioGroup ref={ref} label="Options" />);
+    expect(ref.current).toHaveProperty('focus');
+  });
+});

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

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

package/templates/react/RadioGroup/RadioGroup.tsx.hbs

@@ -0,0 +1,79 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './RadioGroup.css';
+
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'onInvalid' | 'dir'> {
+  /** Group label; required for accessibility */
+  label?: string;
+  /** Name attribute for form submission */
+  name?: string | null;
+  /** Current selected value */
+  value?: string;
+  /** Disables the radio group */
+  disabled?: boolean;
+  /** Requires selection before form submission */
+  required?: boolean;
+  /** Layout direction for radio items */
+  orientation?: 'horizontal' | 'vertical';
+  /** Size applied to child radios */
+  size?: 'small' | 'medium' | 'large';
+  /** Descriptive hint text */
+  hint?: string;
+  /** Event fired when selected value changes */
+  onChange?: (event: Event) => void;
+  /** Event fired when validation fails */
+  onInvalid?: (event: CustomEvent) => void;
+}
+
+export interface RadioGroupRef {
+  focus: (options?: FocusOptions) => void;
+  element: HTMLElement | null;
+}
+
+export const RadioGroup = forwardRef<RadioGroupRef, RadioGroupProps>(
+  ({ children, className, onChange, onInvalid, ...props }, ref) => {
+    const groupRef = useRef<HTMLElement & {
+      focus?: (options?: FocusOptions) => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => groupRef.current?.focus?.(options),
+        get element() {
+          return groupRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = groupRef.current;
+      if (!el) return;
+
+      const handleChange = (e: Event) => onChange?.(e);
+      const handleInvalid = (e: Event) => onInvalid?.(e as CustomEvent);
+
+      el.addEventListener('change', handleChange);
+      el.addEventListener('wa-invalid', handleInvalid);
+
+      return () => {
+        el.removeEventListener('change', handleChange);
+        el.removeEventListener('wa-invalid', handleInvalid);
+      };
+    }, [onChange, onInvalid]);
+
+    return (
+      <wa-radio-group
+        ref={groupRef}
+        class={clsx('RadioGroup', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-radio-group>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/templates/react/Rating/Rating.css.hbs

@@ -0,0 +1,20 @@
+/**
+ * Rating Component Styles
+ * Documentation: https://webawesome.com/docs/components/rating
+ *
+ * CSS Custom Properties:
+ * - --symbol-color: The inactive color for rating symbols
+ * - --symbol-color-active: The active color for rating symbols
+ * - --symbol-spacing: The spacing to use around symbols
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .Rating::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Rating {
+  /* Add your custom styles here */
+}

package/templates/react/Rating/Rating.jsx.hbs

@@ -0,0 +1,48 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Rating.css';
+
+export const Rating = React.forwardRef(
+  ({ className, onChange, onHover, ...props }, ref) => {
+    const ratingRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => ratingRef.current?.focus?.(options),
+        blur: () => ratingRef.current?.blur?.(),
+        get element() {
+          return ratingRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = ratingRef.current;
+      if (!el) return;
+
+      const handleChange = (e) => onChange?.(e);
+      const handleHover = (e) => onHover?.(e);
+
+      el.addEventListener('change', handleChange);
+      el.addEventListener('wa-hover', handleHover);
+
+      return () => {
+        el.removeEventListener('change', handleChange);
+        el.removeEventListener('wa-hover', handleHover);
+      };
+    }, [onChange, onHover]);
+
+    return (
+      <wa-rating
+        ref={ratingRef}
+        class={clsx('Rating', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Rating.displayName = 'Rating';

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

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

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

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

package/templates/react/Rating/Rating.tsx.hbs

@@ -0,0 +1,78 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Rating.css';
+
+export interface RatingProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'dir'> {
+  /** The current rating */
+  value?: number;
+  /** The highest rating to show */
+  max?: number;
+  /** Allows fractional ratings */
+  precision?: number;
+  /** Makes the rating readonly */
+  readonly?: boolean;
+  /** Disables the rating */
+  disabled?: boolean;
+  /** A label for assistive devices */
+  label?: string;
+  /** The component's size */
+  size?: 'small' | 'medium' | 'large';
+  /** Event fired when the rating's value changes */
+  onChange?: (event: Event) => void;
+  /** Event fired during user interaction */
+  onHover?: (event: CustomEvent) => void;
+}
+
+export interface RatingRef {
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  element: HTMLElement | null;
+}
+
+export const Rating = forwardRef<RatingRef, RatingProps>(
+  ({ className, onChange, onHover, ...props }, ref) => {
+    const ratingRef = useRef<HTMLElement & {
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => ratingRef.current?.focus?.(options),
+        blur: () => ratingRef.current?.blur?.(),
+        get element() {
+          return ratingRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = ratingRef.current;
+      if (!el) return;
+
+      const handleChange = (e: Event) => onChange?.(e);
+      const handleHover = (e: Event) => onHover?.(e as CustomEvent);
+
+      el.addEventListener('change', handleChange);
+      el.addEventListener('wa-hover', handleHover);
+
+      return () => {
+        el.removeEventListener('change', handleChange);
+        el.removeEventListener('wa-hover', handleHover);
+      };
+    }, [onChange, onHover]);
+
+    return (
+      <wa-rating
+        ref={ratingRef}
+        class={clsx('Rating', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Rating.displayName = 'Rating';

package/templates/react/RelativeTime/RelativeTime.css.hbs

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

package/templates/react/RelativeTime/RelativeTime.jsx.hbs

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

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

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

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

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

package/templates/react/RelativeTime/RelativeTime.tsx.hbs

@@ -0,0 +1,29 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './RelativeTime.css';
+
+export interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The date from which to calculate time from */
+  date?: Date | string;
+  /** The formatting style to use */
+  format?: 'long' | 'short' | 'narrow';
+  /** When auto, values like 'yesterday' will be shown when possible */
+  numeric?: 'always' | 'auto';
+  /** Keep the displayed value up to date as time passes */
+  sync?: boolean;
+}
+
+export const RelativeTime = forwardRef<HTMLElement, RelativeTimeProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-relative-time
+        ref={ref}
+        class={clsx('RelativeTime', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+RelativeTime.displayName = 'RelativeTime';