kigumi 0.2.0

package/templates/react/ResizeObserver/ResizeObserver.css.hbs

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

package/templates/react/ResizeObserver/ResizeObserver.jsx.hbs

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ResizeObserver.css';
+
+export const ResizeObserver = React.forwardRef(
+  ({ children, className, onResize, ...props }, ref) => {
+    const observerRef = React.useRef(null);
+
+    React.useEffect(() => {
+      const el = observerRef.current;
+      if (!el) return;
+
+      const handleResize = (e) => onResize?.(e);
+      el.addEventListener('wa-resize', handleResize);
+
+      return () => {
+        el.removeEventListener('wa-resize', handleResize);
+      };
+    }, [onResize]);
+
+    return (
+      <wa-resize-observer
+        ref={(node) => {
+          observerRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('ResizeObserver', className)}
+        {...props}
+      >
+        {children}
+      </wa-resize-observer>
+    );
+  }
+);
+
+ResizeObserver.displayName = 'ResizeObserver';

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

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ResizeObserver } from './ResizeObserver';
+
+describe('ResizeObserver', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <ResizeObserver>
+        <div>Content</div>
+      </ResizeObserver>
+    );
+    expect(container.querySelector('wa-resize-observer')).toBeInTheDocument();
+  });
+});

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

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

package/templates/react/ResizeObserver/ResizeObserver.tsx.hbs

@@ -0,0 +1,45 @@
+import { forwardRef, useRef, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ResizeObserver.css';
+
+export interface ResizeObserverProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Disables the observer */
+  disabled?: boolean;
+  /** Event fired when the element is resized */
+  onResize?: (event: CustomEvent) => void;
+}
+
+export const ResizeObserver = forwardRef<HTMLElement, ResizeObserverProps>(
+  ({ children, className, onResize, ...props }, ref) => {
+    const observerRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const el = observerRef.current;
+      if (!el) return;
+
+      const handleResize = (e: Event) => onResize?.(e as CustomEvent);
+      el.addEventListener('wa-resize', handleResize);
+
+      return () => {
+        el.removeEventListener('wa-resize', handleResize);
+      };
+    }, [onResize]);
+
+    return (
+      <wa-resize-observer
+        ref={(node: HTMLElement | null) => {
+          (observerRef as React.MutableRefObject<HTMLElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('ResizeObserver', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-resize-observer>
+    );
+  }
+);
+
+ResizeObserver.displayName = 'ResizeObserver';

package/templates/react/Scroller/Scroller.css.hbs

@@ -0,0 +1,19 @@
+/**
+ * Scroller Component Styles
+ * Documentation: https://webawesome.com/docs/components/scroller
+ *
+ * CSS Custom Properties:
+ * - --shadow-color: The color used to derive the shadow
+ * - --shadow-size: The size of the shadow (Default: 2rem)
+ *
+ * CSS Parts:
+ * - content: The container that wraps the slotted content
+ *
+ * @example
+ * .Scroller::part(content) {
+ *   // Custom styles
+ * }
+ */
+.Scroller {
+  /* Add your custom styles here */
+}

package/templates/react/Scroller/Scroller.jsx.hbs

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

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

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

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

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

package/templates/react/Scroller/Scroller.tsx.hbs

@@ -0,0 +1,29 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Scroller.css';
+
+export interface ScrollerProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The scroller's orientation */
+  orientation?: 'horizontal' | 'vertical';
+  /** Removes the visible scrollbar */
+  'without-scrollbar'?: boolean;
+  /** Removes the shadows */
+  'without-shadow'?: boolean;
+}
+
+export const Scroller = forwardRef<HTMLElement, ScrollerProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-scroller
+        ref={ref}
+        class={clsx('Scroller', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-scroller>
+    );
+  }
+);
+
+Scroller.displayName = 'Scroller';

package/templates/react/Select/Select.css.hbs

@@ -0,0 +1,32 @@
+/**
+ * Select Component Styles
+ * Documentation: https://webawesome.com/docs/components/select
+ *
+ * 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 select'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
+ * - display-input: A hidden input that controls the display of selected values
+ * - 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
+ * .Select::part(combobox) {
+ *   // Custom styles
+ * }
+ */
+.Select {
+  /* Add your custom styles here */
+}

package/templates/react/Select/Select.jsx.hbs

@@ -0,0 +1,79 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Select.css';
+
+export const Select = React.forwardRef(
+  ({ children, className, open, onChange, onShow, onAfterShow, onHide, onAfterHide, onClear, onInvalid, ...props }, ref) => {
+    const selectRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => selectRef.current?.show?.(),
+        hide: () => selectRef.current?.hide?.(),
+        focus: (options) => selectRef.current?.focus?.(options),
+        blur: () => selectRef.current?.blur?.(),
+        get element() {
+          return selectRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = selectRef.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 = selectRef.current;
+      if (!el) return;
+
+      const handleChange = (e) => onChange?.(e);
+      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('change', handleChange);
+      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('change', handleChange);
+        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);
+      };
+    }, [onChange, onShow, onAfterShow, onHide, onAfterHide, onClear, onInvalid]);
+
+    return (
+      <wa-select
+        ref={selectRef}
+        class={clsx('Select', className)}
+        {...props}
+      >
+        {children}
+      </wa-select>
+    );
+  }
+);
+
+Select.displayName = 'Select';

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

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

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

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

package/templates/react/Select/Select.tsx.hbs

@@ -0,0 +1,140 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Select.css';
+
+export interface SelectProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'onInvalid' | 'dir'> {
+  /** The select's label */
+  label?: string;
+  /** Name for form submission */
+  name?: string;
+  /** The select's value */
+  value?: string | string[];
+  /** Placeholder text */
+  placeholder?: string;
+  /** The select's visual appearance */
+  appearance?: 'filled' | 'outlined' | 'filled-outlined';
+  /** The select's size */
+  size?: 'small' | 'medium' | 'large';
+  /** Allows multiple selections */
+  multiple?: boolean;
+  /** Whether the select is open */
+  open?: boolean;
+  /** Disables the select */
+  disabled?: boolean;
+  /** Makes the field required */
+  required?: boolean;
+  /** Pill style with rounded edges */
+  pill?: boolean;
+  /** Shows clear button */
+  'with-clear'?: boolean;
+  /** Preferred placement of the menu */
+  placement?: 'top' | 'bottom';
+  /** Max visible options in multi-select */
+  'max-options-visible'?: number;
+  /** Hint text */
+  hint?: string;
+  /** Event fired when value changes */
+  onChange?: (event: Event) => void;
+  /** Event fired when the menu opens */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after the menu opens */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when the menu closes */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after the menu closes */
+  onAfterHide?: (event: CustomEvent) => void;
+  /** Event fired when value is cleared */
+  onClear?: (event: CustomEvent) => void;
+  /** Event fired when validation fails */
+  onInvalid?: (event: CustomEvent) => void;
+}
+
+export interface SelectRef {
+  show: () => void;
+  hide: () => void;
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  element: HTMLElement | null;
+}
+
+export const Select = forwardRef<SelectRef, SelectProps>(
+  ({ children, className, open, onChange, onShow, onAfterShow, onHide, onAfterHide, onClear, onInvalid, ...props }, ref) => {
+    const selectRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+      open?: boolean;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => selectRef.current?.show?.(),
+        hide: () => selectRef.current?.hide?.(),
+        focus: (options) => selectRef.current?.focus?.(options),
+        blur: () => selectRef.current?.blur?.(),
+        get element() {
+          return selectRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = selectRef.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 = selectRef.current;
+      if (!el) return;
+
+      const handleChange = (e: Event) => onChange?.(e);
+      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 handleClear = (e: Event) => onClear?.(e as CustomEvent);
+      const handleInvalid = (e: Event) => onInvalid?.(e as CustomEvent);
+
+      el.addEventListener('change', handleChange);
+      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('change', handleChange);
+        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);
+      };
+    }, [onChange, onShow, onAfterShow, onHide, onAfterHide, onClear, onInvalid]);
+
+    return (
+      <wa-select
+        ref={selectRef}
+        class={clsx('Select', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-select>
+    );
+  }
+);
+
+Select.displayName = 'Select';

package/templates/react/Skeleton/Skeleton.css.hbs

@@ -0,0 +1,19 @@
+/**
+ * Skeleton Component Styles
+ * Documentation: https://webawesome.com/docs/components/skeleton
+ *
+ * CSS Custom Properties:
+ * - --color: The color of the skeleton
+ * - --sheen-color: The sheen color when effect="sheen"
+ *
+ * CSS Parts:
+ * - indicator: The skeleton's indicator which is responsible for its color and sheen
+ *
+ * @example
+ * .Skeleton::part(indicator) {
+ *   // Custom styles
+ * }
+ */
+.Skeleton {
+  /* Add your custom styles here */
+}

package/templates/react/Skeleton/Skeleton.jsx.hbs

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

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

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

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

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

package/templates/react/Skeleton/Skeleton.tsx.hbs

@@ -0,0 +1,23 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Skeleton.css';
+
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Determines which effect the skeleton will use */
+  effect?: 'pulse' | 'sheen' | 'none';
+}
+
+export const Skeleton = forwardRef<HTMLElement, SkeletonProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-skeleton
+        ref={ref}
+        class={clsx('Skeleton', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Skeleton.displayName = 'Skeleton';

package/templates/react/Slider/Slider.css.hbs

@@ -0,0 +1,26 @@
+/**
+ * Slider Component Styles
+ * Documentation: https://webawesome.com/docs/components/slider
+ *
+ * CSS Custom Properties:
+ * - --track-size: The size of the track (Default: 0.75em)
+ * - --thumb-width: The width of the thumb (Default: 1.25em)
+ * - --thumb-height: The height of the thumb (Default: 1.25em)
+ * - --marker-width: The width of markers (Default: 0.1875em)
+ * - --marker-height: The height of markers (Default: 0.1875em)
+ *
+ * CSS Parts:
+ * - slider: The slider track
+ * - indicator: The slider's fill indicator
+ * - thumb: The slider's thumb or thumbs
+ * - tooltip: The tooltip that appears above the thumb
+ * - marker: Markers that appear along the slider when using marks
+ *
+ * @example
+ * .Slider::part(thumb) {
+ *   // Custom styles
+ * }
+ */
+.Slider {
+  /* Add your custom styles here */
+}