kigumi 0.2.0

package/dist/templates/react/FormatDate/FormatDate.jsx.hbs

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

package/dist/templates/react/FormatDate/FormatDate.test.jsx.hbs

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

package/dist/templates/react/FormatDate/FormatDate.test.tsx.hbs

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

package/dist/templates/react/FormatDate/FormatDate.tsx.hbs

@@ -0,0 +1,45 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './FormatDate.css';
+
+export interface FormatDateProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The date/time to format */
+  date?: Date | string;
+  /** Format for displaying the weekday */
+  weekday?: 'narrow' | 'short' | 'long';
+  /** Format for displaying the era */
+  era?: 'narrow' | 'short' | 'long';
+  /** Format for displaying the year */
+  year?: 'numeric' | '2-digit';
+  /** Format for displaying the month */
+  month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+  /** Format for displaying the day */
+  day?: 'numeric' | '2-digit';
+  /** Format for displaying the hour */
+  hour?: 'numeric' | '2-digit';
+  /** Format for displaying the minute */
+  minute?: 'numeric' | '2-digit';
+  /** Format for displaying the second */
+  second?: 'numeric' | '2-digit';
+  /** Format for 12 or 24-hour time */
+  'hour-format'?: 'auto' | '12' | '24';
+  /** Time zone to express the time in */
+  'time-zone'?: string;
+  /** Format for displaying the time zone */
+  'time-zone-name'?: 'short' | 'long';
+}
+
+export const FormatDate = forwardRef<HTMLElement, FormatDateProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-format-date
+        ref={ref}
+        class={clsx('FormatDate', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+FormatDate.displayName = 'FormatDate';

package/dist/templates/react/FormatNumber/FormatNumber.css.hbs

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

package/dist/templates/react/FormatNumber/FormatNumber.jsx.hbs

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

package/dist/templates/react/FormatNumber/FormatNumber.test.jsx.hbs

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { FormatNumber } from './FormatNumber';
+
+describe('FormatNumber', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<FormatNumber value={1000} />);
+    expect(container.querySelector('wa-format-number')).toBeInTheDocument();
+  });
+
+  it('applies value prop', () => {
+    const { container } = render(<FormatNumber value={2500} />);
+    expect(container.querySelector('wa-format-number')).toHaveAttribute('value', '2500');
+  });
+});

package/dist/templates/react/FormatNumber/FormatNumber.test.tsx.hbs

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

package/dist/templates/react/FormatNumber/FormatNumber.tsx.hbs

@@ -0,0 +1,41 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './FormatNumber.css';
+
+export interface FormatNumberProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The number to format */
+  value: number;
+  /** The formatting style to use */
+  type?: 'currency' | 'decimal' | 'percent';
+  /** ISO 4217 currency code for formatting */
+  currency?: string;
+  /** How to display the currency */
+  'currency-display'?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+  /** Minimum fraction digits */
+  'minimum-fraction-digits'?: number;
+  /** Maximum fraction digits */
+  'maximum-fraction-digits'?: number;
+  /** Minimum integer digits */
+  'minimum-integer-digits'?: number;
+  /** Minimum significant digits */
+  'minimum-significant-digits'?: number;
+  /** Maximum significant digits */
+  'maximum-significant-digits'?: number;
+  /** Disables grouping separators */
+  'without-grouping'?: boolean;
+}
+
+export const FormatNumber = forwardRef<HTMLElement, FormatNumberProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-format-number
+        ref={ref}
+        class={clsx('FormatNumber', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+FormatNumber.displayName = 'FormatNumber';

package/dist/templates/react/Icon/Icon.css.hbs

@@ -0,0 +1,22 @@
+/**
+ * Icon Component Styles
+ * Documentation: https://webawesome.com/docs/components/icon
+ *
+ * CSS Custom Properties:
+ * - --primary-color: Sets a duotone icon's primary color (Default: currentColor)
+ * - --primary-opacity: Sets a duotone icon's primary opacity (Default: 1)
+ * - --secondary-color: Sets a duotone icon's secondary color (Default: currentColor)
+ * - --secondary-opacity: Sets a duotone icon's secondary opacity (Default: 0.4)
+ *
+ * CSS Parts:
+ * - svg: The internal SVG element
+ * - use: The <use> element generated when using spriteSheet: true
+ *
+ * @example
+ * .Icon::part(svg) {
+ *   // Custom styles
+ * }
+ */
+.Icon {
+  /* Add your custom styles here */
+}

package/dist/templates/react/Icon/Icon.jsx.hbs

@@ -0,0 +1,83 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Icon.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * // Basic usage
+ * <Icon name="star" />
+ * <Icon name="heart" variant="solid" />
+ * <Icon name="github" family="brands" />
+ *
+ * // With label for accessibility
+ * <Icon name="star" label="Favorite" />
+ *
+ * // Sizing (use CSS or className for sizing)
+ * <Icon name="bell" className="icon-large" />
+ *
+ * // Custom icon
+ * <Icon src="/path/to/icon.svg" label="Custom icon" />
+ *
+ * // With event handlers
+ * <Icon 
+ *   name="image"
+ *   onLoad={() => console.log('Icon loaded')}
+ *   onError={() => console.log('Icon failed to load')}
+ * />
+ * ```
+ *
+ * @typedef {Object} IconProps
+ * @property {string} [name] - The name of the icon to draw
+ * @property {string} [library] - The name of a registered custom icon library
+ * @property {string} [src] - An external URL of an SVG file
+ * @property {string} [label] - An alternate description for assistive devices
+ * @property {string} [family] - The family of icons
+ * @property {string} [variant] - The icon's variant
+ * @property {boolean} [auto-width] - Sets width to match SVG viewBox
+ * @property {boolean} [swap-opacity] - Swaps opacity of duotone icons
+ * @property {function} [onLoad] - Event fired when icon loads
+ * @property {function} [onError] - Event fired when icon fails to load
+ */
+
+export const Icon = React.forwardRef(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const elementRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => elementRef.current, []);
+
+    React.useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+
+      const handleLoad = (e) => {
+        if (onLoad) onLoad(e);
+      };
+
+      const handleError = (e) => {
+        if (onError) onError(e);
+      };
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-icon
+        ref={elementRef}
+        class={clsx('Icon', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

package/dist/templates/react/Icon/Icon.test.jsx.hbs

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Icon } from './Icon';
+
+describe('Icon', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Icon name="star" />);
+    expect(container.querySelector('wa-icon')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Icon name="star" className="custom-class" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes name prop', () => {
+    const { container } = render(<Icon name="heart" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('name')).toBe('heart');
+  });
+
+  it('passes variant and family props', () => {
+    const { container } = render(<Icon name="star" variant="solid" family="classic" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('variant')).toBe('solid');
+    expect(element?.getAttribute('family')).toBe('classic');
+  });
+
+  it('passes label prop for accessibility', () => {
+    const { container} = render(<Icon name="star" label="Favorite" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('label')).toBe('Favorite');
+  });
+});

package/dist/templates/react/Icon/Icon.test.tsx.hbs

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

package/dist/templates/react/Icon/Icon.tsx.hbs

@@ -0,0 +1,93 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Icon.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Icon name="star" />
+ * <Icon name="heart" variant="solid" />
+ * <Icon name="github" family="brands" />
+ *
+ * // With label for accessibility
+ * <Icon name="star" label="Favorite" />
+ *
+ * // Sizing (use CSS or className for sizing)
+ * <Icon name="bell" className="icon-large" />
+ *
+ * // Custom icon
+ * <Icon src="/path/to/icon.svg" label="Custom icon" />
+ *
+ * // With event handlers
+ * <Icon 
+ *   name="image"
+ *   onLoad={() => console.log('Icon loaded')}
+ *   onError={() => console.log('Icon failed to load')}
+ * />
+ * ```
+ */
+export interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'onError' | 'dir'> {
+  /** The name of the icon to draw */
+  name?: string;
+  /** The name of a registered custom icon library */
+  library?: string;
+  /** An external URL of an SVG file */
+  src?: string;
+  /** An alternate description for assistive devices */
+  label?: string;
+  /** The family of icons (classic, brands, sharp, duotone, sharp-duotone) */
+  family?: string;
+  /** The icon's variant (thin, light, regular, solid) */
+  variant?: string;
+  /** Sets the width to match the cropped SVG viewBox */
+  'auto-width'?: boolean;
+  /** Swaps the opacity of duotone icons */
+  'swap-opacity'?: boolean;
+  /** Event fired when the icon has loaded */
+  onLoad?: (event: CustomEvent) => void;
+  /** Event fired when the icon fails to load */
+  onError?: (event: CustomEvent) => void;
+}
+
+export const Icon = forwardRef<HTMLElement, IconProps>(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);
+
+    useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+
+      const handleLoad = (e: Event) => {
+        if (onLoad) onLoad(e as CustomEvent);
+      };
+
+      const handleError = (e: Event) => {
+        if (onError) onError(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-icon
+        ref={elementRef}
+        class={clsx('Icon', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

package/dist/templates/react/Include/Include.css.hbs

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

package/dist/templates/react/Include/Include.jsx.hbs

@@ -0,0 +1,40 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Include.css';
+
+export const Include = React.forwardRef(
+  ({ className, onLoad, onIncludeError, ...props }, ref) => {
+    const includeRef = React.useRef(null);
+
+    React.useEffect(() => {
+      const el = includeRef.current;
+      if (!el) return;
+
+      const handleLoad = (e) => onLoad?.(e);
+      const handleError = (e) => onIncludeError?.(e);
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-include-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-include-error', handleError);
+      };
+    }, [onLoad, onIncludeError]);
+
+    return (
+      <wa-include
+        ref={(node) => {
+          includeRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('Include', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Include.displayName = 'Include';

package/dist/templates/react/Include/Include.test.jsx.hbs

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Include } from './Include';
+
+describe('Include', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Include />);
+    expect(container.querySelector('wa-include')).toBeInTheDocument();
+  });
+
+  it('applies src prop', () => {
+    const { container } = render(<Include src="/content.html" />);
+    expect(container.querySelector('wa-include')).toHaveAttribute('src', '/content.html');
+  });
+});

package/dist/templates/react/Include/Include.test.tsx.hbs

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

package/dist/templates/react/Include/Include.tsx.hbs

@@ -0,0 +1,53 @@
+import { forwardRef, useRef, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Include.css';
+
+export interface IncludeProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'dir'> {
+  /** The location of the HTML file to include */
+  src?: string;
+  /** Allows included scripts to be executed */
+  'allow-scripts'?: boolean;
+  /** The fetch mode to use */
+  mode?: 'cors' | 'no-cors' | 'same-origin';
+  /** Event fired when the included file is loaded */
+  onLoad?: (event: CustomEvent) => void;
+  /** Event fired when the included file fails to load */
+  onIncludeError?: (event: CustomEvent) => void;
+}
+
+export const Include = forwardRef<HTMLElement, IncludeProps>(
+  ({ className, onLoad, onIncludeError, ...props }, ref) => {
+    const includeRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const el = includeRef.current;
+      if (!el) return;
+
+      const handleLoad = (e: Event) => onLoad?.(e as CustomEvent);
+      const handleError = (e: Event) => onIncludeError?.(e as CustomEvent);
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-include-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-include-error', handleError);
+      };
+    }, [onLoad, onIncludeError]);
+
+    return (
+      <wa-include
+        ref={(node: HTMLElement | null) => {
+          (includeRef as React.MutableRefObject<HTMLElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('Include', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Include.displayName = 'Include';

package/dist/templates/react/Input/Input.css.hbs

@@ -0,0 +1,25 @@
+/**
+ * Input Component Styles
+ * Documentation: https://webawesome.com/docs/components/input
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - label: The label
+ * - hint: The hint's wrapper
+ * - base: The wrapper being rendered as an input
+ * - input: The internal <input> control
+ * - start: The container that wraps the start slot
+ * - clear-button: The clear button
+ * - password-toggle-button: The password toggle button
+ * - end: The container that wraps the end slot
+ *
+ * @example
+ * .Input::part(input) {
+ *   // Custom styles
+ * }
+ */
+.Input {
+  /* Add your custom styles here */
+}