kigumi 0.2.0

package/dist/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 */
+}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Slider.css';
+
+export const Slider = React.forwardRef(
+  ({ className, onChange, onInvalid, ...props }, ref) => {
+    const sliderRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => sliderRef.current?.focus?.(options),
+        blur: () => sliderRef.current?.blur?.(),
+        stepUp: () => sliderRef.current?.stepUp?.(),
+        stepDown: () => sliderRef.current?.stepDown?.(),
+        get element() {
+          return sliderRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = sliderRef.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-slider
+        ref={sliderRef}
+        class={clsx('Slider', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Slider.displayName = 'Slider';

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

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

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

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

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

@@ -0,0 +1,100 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Slider.css';
+
+export interface SliderProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'onInvalid' | 'dir'> {
+  /** The slider's label */
+  label?: string;
+  /** Name for form submission */
+  name?: string;
+  /** Current value */
+  value?: number;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** The slider's size */
+  size?: 'small' | 'medium' | 'large';
+  /** The orientation of the slider */
+  orientation?: 'horizontal' | 'vertical';
+  /** Disables the slider */
+  disabled?: boolean;
+  /** Makes the slider readonly */
+  readonly?: boolean;
+  /** Makes the slider required */
+  required?: boolean;
+  /** Converts to a range slider */
+  range?: boolean;
+  /** Draws markers at each step */
+  'with-markers'?: boolean;
+  /** Draws a tooltip above the thumb */
+  'with-tooltip'?: boolean;
+  /** Hint text */
+  hint?: string;
+  /** Event fired when value changes */
+  onChange?: (event: Event) => void;
+  /** Event fired when validation fails */
+  onInvalid?: (event: CustomEvent) => void;
+}
+
+export interface SliderRef {
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  stepUp: () => void;
+  stepDown: () => void;
+  element: HTMLElement | null;
+}
+
+export const Slider = forwardRef<SliderRef, SliderProps>(
+  ({ className, onChange, onInvalid, ...props }, ref) => {
+    const sliderRef = useRef<HTMLElement & {
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+      stepUp?: () => void;
+      stepDown?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => sliderRef.current?.focus?.(options),
+        blur: () => sliderRef.current?.blur?.(),
+        stepUp: () => sliderRef.current?.stepUp?.(),
+        stepDown: () => sliderRef.current?.stepDown?.(),
+        get element() {
+          return sliderRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = sliderRef.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-slider
+        ref={sliderRef}
+        class={clsx('Slider', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Slider.displayName = 'Slider';

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

@@ -0,0 +1,21 @@
+/**
+ * Spinner Component Styles
+ * Documentation: https://webawesome.com/docs/components/spinner
+ *
+ * CSS Custom Properties:
+ * - --track-width: The width of the track
+ * - --track-color: The color of the track
+ * - --indicator-color: The color of the spinner's indicator
+ * - --speed: The time it takes for the spinner to complete one animation cycle
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .Spinner::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Spinner {
+  /* Add your custom styles here */
+}

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Spinner.css';
+
+export type SpinnerProps = Omit<HTMLAttributes<HTMLElement>, 'dir'>;
+
+export const Spinner = forwardRef<HTMLElement, SpinnerProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-spinner
+        ref={ref}
+        class={clsx('Spinner', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';

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

@@ -0,0 +1,24 @@
+/**
+ * SplitPanel Component Styles
+ * Documentation: https://webawesome.com/docs/components/split-panel
+ *
+ * CSS Custom Properties:
+ * - --min: The minimum allowed size of the primary panel (Default: 0)
+ * - --max: The maximum allowed size of the primary panel (Default: 100%)
+ * - --divider-width: The width of the visible divider (Default: 4px)
+ * - --divider-hit-area: The invisible region around the divider where dragging can occur (Default: 12px)
+ *
+ * CSS Parts:
+ * - panel: Targets both the start and end panels
+ * - start: The start panel
+ * - end: The end panel
+ * - divider: The divider that separates the start and end panels
+ *
+ * @example
+ * .SplitPanel::part(divider) {
+ *   // Custom styles
+ * }
+ */
+.SplitPanel {
+  /* Add your custom styles here */
+}

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

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

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

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { SplitPanel } from './SplitPanel';
+
+describe('SplitPanel', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <SplitPanel>
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </SplitPanel>
+    );
+    expect(container.querySelector('wa-split-panel')).toBeInTheDocument();
+  });
+});

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

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

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

@@ -0,0 +1,55 @@
+import { forwardRef, useRef, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './SplitPanel.css';
+
+export interface SplitPanelProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Sets the split panel's orientation */
+  orientation?: 'horizontal' | 'vertical';
+  /** The current position of the divider (0-100) */
+  position?: number;
+  /** Disables resizing */
+  disabled?: boolean;
+  /** Designates a panel to maintain its size */
+  primary?: 'start' | 'end';
+  /** Space-separated snap points */
+  snap?: string;
+  /** Distance before snapping occurs */
+  'snap-threshold'?: number;
+  /** Event fired when the divider's position changes */
+  onReposition?: (event: CustomEvent) => void;
+}
+
+export const SplitPanel = forwardRef<HTMLElement, SplitPanelProps>(
+  ({ children, className, onReposition, ...props }, ref) => {
+    const panelRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const el = panelRef.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-split-panel
+        ref={(node: HTMLElement | null) => {
+          (panelRef as React.MutableRefObject<HTMLElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('SplitPanel', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-split-panel>
+    );
+  }
+);
+
+SplitPanel.displayName = 'SplitPanel';

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

@@ -0,0 +1,24 @@
+/**
+ * Switch Component Styles
+ * Documentation: https://webawesome.com/docs/components/switch
+ *
+ * CSS Custom Properties:
+ * - --width: The width of the switch
+ * - --height: The height of the switch
+ * - --thumb-size: The size of the thumb
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - control: The control that houses the switch's thumb
+ * - thumb: The switch's thumb
+ * - label: The switch's label
+ * - hint: The hint's wrapper
+ *
+ * @example
+ * .Switch::part(control) {
+ *   // Custom styles
+ * }
+ */
+.Switch {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Switch.css';
+
+export const Switch = React.forwardRef(
+  ({ children, className, onChange, onInvalid, ...props }, ref) => {
+    const switchRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => switchRef.current?.focus?.(options),
+        blur: () => switchRef.current?.blur?.(),
+        click: () => switchRef.current?.click?.(),
+        get element() {
+          return switchRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = switchRef.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-switch
+        ref={switchRef}
+        class={clsx('Switch', className)}
+        {...props}
+      >
+        {children}
+      </wa-switch>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';

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

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

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

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

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

@@ -0,0 +1,83 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Switch.css';
+
+export interface SwitchProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'onInvalid' | 'dir'> {
+  /** Draws the switch in a checked state */
+  checked?: boolean;
+  /** Disables the switch */
+  disabled?: boolean;
+  /** Makes the switch required */
+  required?: boolean;
+  /** Visual size variant */
+  size?: 'small' | 'medium' | 'large';
+  /** Name for form submission */
+  name?: string | null;
+  /** Form submission value */
+  value?: string | null;
+  /** Descriptive hint text */
+  hint?: string;
+  /** Event fired when checked state changes */
+  onChange?: (event: Event) => void;
+  /** Event fired when validation fails */
+  onInvalid?: (event: CustomEvent) => void;
+}
+
+export interface SwitchRef {
+  focus: (options?: FocusOptions) => void;
+  blur: () => void;
+  click: () => void;
+  element: HTMLElement | null;
+}
+
+export const Switch = forwardRef<SwitchRef, SwitchProps>(
+  ({ children, className, onChange, onInvalid, ...props }, ref) => {
+    const switchRef = useRef<HTMLElement & {
+      focus?: (options?: FocusOptions) => void;
+      blur?: () => void;
+      click?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => switchRef.current?.focus?.(options),
+        blur: () => switchRef.current?.blur?.(),
+        click: () => switchRef.current?.click?.(),
+        get element() {
+          return switchRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = switchRef.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-switch
+        ref={switchRef}
+        class={clsx('Switch', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-switch>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';

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

@@ -0,0 +1,18 @@
+/**
+ * Tab Component Styles
+ * Documentation: https://webawesome.com/docs/components/tab
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .Tab::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Tab {
+  /* Add your custom styles here */
+}