kigumi 0.2.0

package/templates/react/Option/Option.tsx.hbs

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Option.css';
+
+export interface OptionProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The option's value */
+  value?: string;
+  /** Draws the option in a disabled state */
+  disabled?: boolean;
+}
+
+export const Option = forwardRef<HTMLElement, OptionProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-option
+        ref={ref}
+        class={clsx('Option', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-option>
+    );
+  }
+);
+
+Option.displayName = 'Option';

package/templates/react/Popover/Popover.css.hbs

@@ -0,0 +1,25 @@
+/**
+ * Popover Component Styles
+ * Documentation: https://webawesome.com/docs/components/popover
+ *
+ * CSS Custom Properties:
+ * - --arrow-size: The size of the tiny arrow that points to the popover (Default: 0.375rem)
+ * - --max-width: The maximum width of the popover's body content (Default: 25rem)
+ * - --show-duration: The speed of the show animation (Default: 100ms)
+ * - --hide-duration: The speed of the hide animation (Default: 100ms)
+ *
+ * CSS Parts:
+ * - dialog: The native dialog element that contains the popover content
+ * - body: The popover's body where its content is rendered
+ * - popup: The internal <wa-popup> element that positions the popover
+ * - popup__popup: The popup's exported popup part
+ * - popup__arrow: The popup's exported arrow part
+ *
+ * @example
+ * .Popover::part(body) {
+ *   // Custom styles
+ * }
+ */
+.Popover {
+  /* Add your custom styles here */
+}

package/templates/react/Popover/Popover.jsx.hbs

@@ -0,0 +1,68 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Popover.css';
+
+export const Popover = React.forwardRef(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const popoverRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => popoverRef.current?.show?.(),
+        hide: () => popoverRef.current?.hide?.(),
+        get element() {
+          return popoverRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = popoverRef.current;
+      if (!el || open === undefined) return;
+
+      const isOpen = el.open ?? false;
+      if (open && !isOpen) {
+        el.show?.();
+      } else if (!open && isOpen) {
+        el.hide?.();
+      }
+    }, [open]);
+
+    React.useEffect(() => {
+      const el = popoverRef.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-popover
+        ref={popoverRef}
+        class={clsx('Popover', className)}
+        {...props}
+      >
+        {children}
+      </wa-popover>
+    );
+  }
+);
+
+Popover.displayName = 'Popover';

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

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

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

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

package/templates/react/Popover/Popover.tsx.hbs

@@ -0,0 +1,101 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Popover.css';
+
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Shows or hides the popover */
+  open?: boolean;
+  /** The ID of the popover's anchor element */
+  for?: string | null;
+  /** The preferred placement of the popover */
+  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+  /** The distance in pixels from the target element */
+  distance?: number;
+  /** The offset distance in pixels along the target edge */
+  skidding?: number;
+  /** Removes the arrow from the popover */
+  'without-arrow'?: boolean;
+  /** Event fired when the popover is shown */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after the popover is shown */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when the popover is about to hide */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after the popover is hidden */
+  onAfterHide?: (event: CustomEvent) => void;
+}
+
+export interface PopoverRef {
+  show: () => void;
+  hide: () => void;
+  element: HTMLElement | null;
+}
+
+export const Popover = forwardRef<PopoverRef, PopoverProps>(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const popoverRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+      open?: boolean;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => popoverRef.current?.show?.(),
+        hide: () => popoverRef.current?.hide?.(),
+        get element() {
+          return popoverRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = popoverRef.current;
+      if (!el || open === undefined) return;
+
+      const isOpen = el.open ?? false;
+      if (open && !isOpen) {
+        el.show?.();
+      } else if (!open && isOpen) {
+        el.hide?.();
+      }
+    }, [open]);
+
+    useEffect(() => {
+      const el = popoverRef.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);
+
+      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-popover
+        ref={popoverRef}
+        class={clsx('Popover', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-popover>
+    );
+  }
+);
+
+Popover.displayName = 'Popover';

package/templates/react/Popup/Popup.css.hbs

@@ -0,0 +1,25 @@
+/**
+ * Popup Component Styles
+ * Documentation: https://webawesome.com/docs/components/popup
+ *
+ * CSS Custom Properties:
+ * - --arrow-size: The size of the arrow (Default: 6px)
+ * - --arrow-color: The color of the arrow (Default: black)
+ * - --auto-size-available-width: A read-only custom property for available width when using auto-size
+ * - --auto-size-available-height: A read-only custom property for available height when using auto-size
+ * - --show-duration: The show duration to use when applying built-in animation classes (Default: 100ms)
+ * - --hide-duration: The hide duration to use when applying built-in animation classes (Default: 100ms)
+ *
+ * CSS Parts:
+ * - arrow: The arrow's container
+ * - popup: The popup's container
+ * - hover-bridge: The hover bridge element
+ *
+ * @example
+ * .Popup::part(popup) {
+ *   // Custom styles
+ * }
+ */
+.Popup {
+  /* Add your custom styles here */
+}

package/templates/react/Popup/Popup.jsx.hbs

@@ -0,0 +1,45 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Popup.css';
+
+export const Popup = React.forwardRef(
+  ({ children, className, onReposition, ...props }, ref) => {
+    const popupRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        reposition: () => popupRef.current?.reposition?.(),
+        get element() {
+          return popupRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = popupRef.current;
+      if (!el) return;
+
+      const handleReposition = (e) => onReposition?.(e);
+      el.addEventListener('wa-reposition', handleReposition);
+
+      return () => {
+        el.removeEventListener('wa-reposition', handleReposition);
+      };
+    }, [onReposition]);
+
+    return (
+      <wa-popup
+        ref={popupRef}
+        class={clsx('Popup', className)}
+        {...props}
+      >
+        {children}
+      </wa-popup>
+    );
+  }
+);
+
+Popup.displayName = 'Popup';

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

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

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

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

package/templates/react/Popup/Popup.tsx.hbs

@@ -0,0 +1,83 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Popup.css';
+
+export interface PopupProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Activates positioning logic and displays the popup */
+  active?: boolean;
+  /** Element to anchor to (id, reference, or VirtualElement) */
+  anchor?: string;
+  /** The preferred placement of the popup */
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+  /** Offset distance from anchor in pixels */
+  distance?: number;
+  /** Offset along anchor's axis in pixels */
+  skidding?: number;
+  /** Attaches an arrow to the popup */
+  arrow?: boolean;
+  /** Padding between arrow and popup edges */
+  'arrow-padding'?: number;
+  /** Arrow alignment behavior */
+  'arrow-placement'?: 'start' | 'end' | 'center' | 'anchor';
+  /** Flip placement when insufficient space */
+  flip?: boolean;
+  /** Move along axis to keep in view */
+  shift?: boolean;
+  /** Auto-resize to prevent overflow */
+  'auto-size'?: 'horizontal' | 'vertical' | 'both';
+  /** Sync dimension(s) with anchor */
+  sync?: 'width' | 'height' | 'both';
+  /** Invisible bridge for hover continuity */
+  'hover-bridge'?: boolean;
+  /** Event fired when popup recalculates position */
+  onReposition?: (event: CustomEvent) => void;
+}
+
+export interface PopupRef {
+  reposition: () => void;
+  element: HTMLElement | null;
+}
+
+export const Popup = forwardRef<PopupRef, PopupProps>(
+  ({ children, className, onReposition, ...props }, ref) => {
+    const popupRef = useRef<HTMLElement & {
+      reposition?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        reposition: () => popupRef.current?.reposition?.(),
+        get element() {
+          return popupRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = popupRef.current;
+      if (!el) return;
+
+      const handleReposition = (e: Event) => onReposition?.(e as CustomEvent);
+      el.addEventListener('wa-reposition', handleReposition);
+
+      return () => {
+        el.removeEventListener('wa-reposition', handleReposition);
+      };
+    }, [onReposition]);
+
+    return (
+      <wa-popup
+        ref={popupRef}
+        class={clsx('Popup', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-popup>
+    );
+  }
+);
+
+Popup.displayName = 'Popup';

package/templates/react/ProgressBar/ProgressBar.css.hbs

@@ -0,0 +1,22 @@
+/**
+ * ProgressBar Component Styles
+ * Documentation: https://webawesome.com/docs/components/progress-bar
+ *
+ * CSS Custom Properties:
+ * - --indicator-color: The indicator's color
+ * - --track-color: The track's color
+ * - --track-height: The height of the progress bar's track (Default: 1rem)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - indicator: The progress bar's indicator
+ * - label: The progress bar's label
+ *
+ * @example
+ * .ProgressBar::part(indicator) {
+ *   // Custom styles
+ * }
+ */
+.ProgressBar {
+  /* Add your custom styles here */
+}

package/templates/react/ProgressBar/ProgressBar.jsx.hbs

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

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

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

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

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

package/templates/react/ProgressBar/ProgressBar.tsx.hbs

@@ -0,0 +1,29 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ProgressBar.css';
+
+export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The current progress as a percentage, 0 to 100 */
+  value?: number;
+  /** When true, shows an indeterminate state */
+  indeterminate?: boolean;
+  /** A custom label for assistive devices */
+  label?: string;
+}
+
+export const ProgressBar = forwardRef<HTMLElement, ProgressBarProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-progress-bar
+        ref={ref}
+        class={clsx('ProgressBar', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-progress-bar>
+    );
+  }
+);
+
+ProgressBar.displayName = 'ProgressBar';

package/templates/react/ProgressRing/ProgressRing.css.hbs

@@ -0,0 +1,26 @@
+/**
+ * ProgressRing Component Styles
+ * Documentation: https://webawesome.com/docs/components/progress-ring
+ *
+ * CSS Custom Properties:
+ * - --size: The diameter of the progress ring
+ * - --track-width: The width of the track
+ * - --track-color: The color of the track
+ * - --indicator-width: The width of the indicator
+ * - --indicator-color: The color of the indicator
+ * - --indicator-transition-duration: The duration of the indicator's transition when the value changes
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - track: The progress ring's track
+ * - indicator: The progress ring's indicator
+ * - label: The progress ring's label
+ *
+ * @example
+ * .ProgressRing::part(indicator) {
+ *   // Custom styles
+ * }
+ */
+.ProgressRing {
+  /* Add your custom styles here */
+}

package/templates/react/ProgressRing/ProgressRing.jsx.hbs

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

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

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

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

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

package/templates/react/ProgressRing/ProgressRing.tsx.hbs

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ProgressRing.css';
+
+export interface ProgressRingProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The current progress as a percentage, 0 to 100 */
+  value?: number;
+  /** A custom label for assistive devices */
+  label?: string;
+}
+
+export const ProgressRing = forwardRef<HTMLElement, ProgressRingProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-progress-ring
+        ref={ref}
+        class={clsx('ProgressRing', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-progress-ring>
+    );
+  }
+);
+
+ProgressRing.displayName = 'ProgressRing';