kigumi 0.19.2 → 0.21.0

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

@@ -1,244 +0,0 @@
-import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import type WaElement from '{{{importPath}}}';
-import './Select.css';
-
-/**
- * Selects allow you to choose items from a menu of predefined options
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Select />
- *
- * // With event handlers
- * <Select
- *   onInput={(e) => console.log(e)} />
- *
- * // With ref methods
- * const ref = useRef<SelectRef>(null);
- * <button onClick={() => ref.current?.show()}>Call Method</button>
- * <Select ref={ref} />
- * ```
- */
-export interface SelectProps extends Omit<HTMLAttributes<HTMLElement>, 'onInput' | 'onChange' | 'onFocus' | 'onBlur' | 'onClear' | 'onShow' | 'onAfterShow' | 'onHide' | 'onAfterHide' | 'onInvalid' | 'dir'> {
-
-  /** Form field name */
-  name?: string;
-
-  /** Selected value(s) */
-  value?: string;
-
-  /** Visual appearance */
-  appearance?: 'filled' | 'outlined' | 'filled-outlined';
-
-  /** Select size */
-  size?: 'small' | 'medium' | 'large';
-
-  /** Placeholder text */
-  placeholder?: string;
-
-  /** Allows multiple selections */
-  multiple?: boolean;
-
-  /** Max visible tags (multiple) */
-  'max-options-visible'?: number;
-
-  /** Disables the select */
-  disabled?: boolean;
-
-  /** Shows clear button */
-  'with-clear'?: boolean;
-
-  /** Whether listbox is open */
-  open?: boolean;
-
-  /** Hoists to body */
-  hoist?: boolean;
-
-  /** Listbox placement */
-  placement?: 'top' | 'bottom';
-
-  /** Rounded edges */
-  pill?: boolean;
-
-  /** Label text */
-  label?: string;
-
-  /** Hint text */
-  hint?: string;
-
-  /** Makes selection required */
-  required?: boolean;
-
-  /** Shows invalid/error state */
-  invalid?: boolean;
-
-  /** Help text below the control */
-  'help-text'?: string;
-
-  /** Emitted when the control receives input. */
-  onInput?: (event: CustomEvent) => void;
-
-  /** Emitted when the control's value changes. */
-  onChange?: (event: CustomEvent) => void;
-
-  /** Emitted when the control gains focus. */
-  onFocus?: (event: FocusEvent) => void;
-
-  /** Emitted when the control loses focus. */
-  onBlur?: (event: FocusEvent) => void;
-
-  /** Emitted when the control's value is cleared. */
-  onClear?: (event: CustomEvent) => void;
-
-  /** Emitted when the select's menu opens. */
-  onShow?: (event: CustomEvent) => void;
-
-  /** Emitted after the select's menu opens and all animations are complete. */
-  onAfterShow?: (event: CustomEvent) => void;
-
-  /** Emitted when the select's menu closes. */
-  onHide?: (event: CustomEvent) => void;
-
-  /** Emitted after the select's menu closes and all animations are complete. */
-  onAfterHide?: (event: CustomEvent) => void;
-
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  onInvalid?: (event: CustomEvent) => void;
-}
-
-export interface SelectRef {
-
-  /** Shows the listbox. */
-  show: () => void;
-
-  /** Hides the listbox. */
-  hide: () => void;
-
-  /** Sets focus on the control. */
-  focus: (options: FocusOptions) => void;
-
-  /** Removes focus from the control. */
-  blur: () => void;
-  /** Reference to the underlying element */
-  element: WaElement | null;
-}
-
-export const Select = forwardRef<SelectRef, SelectProps>(
-  ({ children, className, onInput, onChange, onFocus, onBlur, onClear, onShow, onAfterShow, onHide, onAfterHide, onInvalid, ...props }, ref) => {
-    const selectRef = useRef<WaElement | null>(null);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        show: () => {
-          if (selectRef.current && typeof selectRef.current.show === 'function') {
-            selectRef.current.show();
-          }
-        },
-        hide: () => {
-          if (selectRef.current && typeof selectRef.current.hide === 'function') {
-            selectRef.current.hide();
-          }
-        },
-        focus: (options: FocusOptions) => {
-          if (selectRef.current && typeof selectRef.current.focus === 'function') {
-            selectRef.current.focus(options);
-          }
-        },
-        blur: () => {
-          if (selectRef.current && typeof selectRef.current.blur === 'function') {
-            selectRef.current.blur();
-          }
-        },
-        get element() {
-          return selectRef.current;
-        },
-      }),
-      []
-    );
-
-    useEffect(() => {
-      const el = selectRef.current;
-      if (!el) return;
-
-      const handleInput = (e: Event) => {
-        if (onInput) onInput(e as CustomEvent);
-      };
-
-      const handleChange = (e: Event) => {
-        if (onChange) onChange(e as CustomEvent);
-      };
-
-      const handleFocus = (e: Event) => {
-        if (onFocus) onFocus(e as FocusEvent);
-      };
-
-      const handleBlur = (e: Event) => {
-        if (onBlur) onBlur(e as FocusEvent);
-      };
-
-      const handleClear = (e: Event) => {
-        if (onClear) onClear(e as CustomEvent);
-      };
-
-      const handleShow = (e: Event) => {
-        if (onShow) onShow(e as CustomEvent);
-      };
-
-      const handleAfterShow = (e: Event) => {
-        if (onAfterShow) onAfterShow(e as CustomEvent);
-      };
-
-      const handleHide = (e: Event) => {
-        if (onHide) onHide(e as CustomEvent);
-      };
-
-      const handleAfterHide = (e: Event) => {
-        if (onAfterHide) onAfterHide(e as CustomEvent);
-      };
-
-      const handleInvalid = (e: Event) => {
-        if (onInvalid) onInvalid(e as CustomEvent);
-      };
-
-      el.addEventListener('input', handleInput);
-      el.addEventListener('change', handleChange);
-      el.addEventListener('focus', handleFocus);
-      el.addEventListener('blur', handleBlur);
-      el.addEventListener('wa-clear', handleClear);
-      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-invalid', handleInvalid);
-
-      return () => {
-        el.removeEventListener('input', handleInput);
-        el.removeEventListener('change', handleChange);
-        el.removeEventListener('focus', handleFocus);
-        el.removeEventListener('blur', handleBlur);
-        el.removeEventListener('wa-clear', handleClear);
-        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-invalid', handleInvalid);
-      };
-    }, [onInput, onChange, onFocus, onBlur, onClear, onShow, onAfterShow, onHide, onAfterHide, onInvalid]);
-
-    return (
-      <wa-select
-        ref={(el: WaElement | null) => { selectRef.current = el; }}
-        class={clsx('Select', className)}
-        {...(props as Record<string, unknown>)}
-      >
-        {children}
-      </wa-select>
-    );
-  }
-);
-
-Select.displayName = 'Select';

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

@@ -1,14 +0,0 @@
-/**
- * Skeleton Component Styles
- * Documentation: https://webawesome.com/docs/components/skeleton
- *
- * CSS Custom Properties:
- * --color: Base fill color of the skeleton
- * --sheen-color: Color of the animated sheen effect
- *
- * CSS Parts:
- * indicator — Animated skeleton element
- */
-.Skeleton {
-  /* Add your custom styles here */
-}

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

@@ -1,18 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,10 +0,0 @@
-import { describe, it, expect } from 'vitest';
-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')).toBeTruthy();
-  });
-});

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

@@ -1,57 +0,0 @@
-import { forwardRef, useRef, useImperativeHandle, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import type WaElement from '{{{importPath}}}';
-import './Skeleton.css';
-
-/**
- * Skeletons are used to provide a visual representation of where content will eventually load
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Skeleton />
- *
- * // With event handlers
- * <Skeleton />
- *
- * ```
- */
-export interface SkeletonProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
-
-  /** Animation effect */
-  effect?: 'pulse' | 'sheen' | 'none';
-}
-
-export interface SkeletonRef {
-  /** Reference to the underlying element */
-  element: WaElement | null;
-}
-
-export const Skeleton = forwardRef<SkeletonRef, SkeletonProps>(
-  ({ children, className, ...props }, ref) => {
-    const skeletonRef = useRef<WaElement | null>(null);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        get element() {
-          return skeletonRef.current;
-        },
-      }),
-      []
-    );
-
-    return (
-      <wa-skeleton
-        ref={(el: WaElement | null) => { skeletonRef.current = el; }}
-        class={clsx('Skeleton', className)}
-        {...(props as Record<string, unknown>)}
-      >
-        {children}
-      </wa-skeleton>
-    );
-  }
-);
-
-Skeleton.displayName = 'Skeleton';

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

@@ -1,31 +0,0 @@
-/**
- * Slider Component Styles
- * Documentation: https://webawesome.com/docs/components/slider
- *
- * CSS Custom Properties:
- * --track-size: Height or width of the slider track
- * --marker-width: Width of each step marker
- * --marker-height: Height of each step marker
- * --thumb-width: Width of the slider thumb
- * --thumb-height: Height of the slider thumb
- *
- * CSS Parts:
- * label — Label text above the slider
- * hint — Hint text below the slider
- * slider — Focusable slider element with role="slider"
- * track — Slider track bar
- * indicator — Colored fill from start to current value
- * markers — Container for step marker elements
- * marker — Individual step marker
- * reference — Reference slot area on the track
- * thumb — Slider's draggable thumb
- * thumb-min — Min-value thumb in range mode
- * thumb-max — Max-value thumb in range mode
- * tooltip — Thumb tooltip, a wa-tooltip element
- * tooltip__tooltip — Tooltip's inner tooltip part
- * tooltip__content — Tooltip's content area
- * tooltip__arrow — Tooltip's arrow element
- */
-.Slider {
-  /* Add your custom styles here */
-}

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

@@ -1,50 +0,0 @@
-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/templates/react/Slider/Slider.test.jsx.hbs

@@ -1,19 +0,0 @@
-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/templates/react/Slider/Slider.test.tsx.hbs

@@ -1,10 +0,0 @@
-import { describe, it, expect } from 'vitest';
-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')).toBeTruthy();
-  });
-});

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

@@ -1,189 +0,0 @@
-import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import type WaElement from '{{{importPath}}}';
-import './Slider.css';
-
-/**
- * Sliders allow the user to select a value within a range
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Slider />
- *
- * // With event handlers
- * <Slider
- *   onChange={(e) => console.log(e)} />
- *
- * // With ref methods
- * const ref = useRef<SliderRef>(null);
- * <button onClick={() => ref.current?.focus()}>Call Method</button>
- * <Slider ref={ref} />
- * ```
- */
-export interface SliderProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'onBlur' | 'onFocus' | 'onInput' | 'onInvalid' | 'dir'> {
-
-  /** Form field name */
-  name?: string;
-
-  /** Current value */
-  value?: number;
-
-  /** Accessible label */
-  label?: string;
-
-  /** Hint text */
-  hint?: string;
-
-  /** Slider size */
-  size?: 'small' | 'medium' | 'large';
-
-  /** Minimum value */
-  min?: number;
-
-  /** Maximum value */
-  max?: number;
-
-  /** Step increment */
-  step?: number;
-
-  /** The orientation of the slider */
-  orientation?: 'horizontal' | 'vertical';
-
-  /** Disables the slider */
-  disabled?: boolean;
-
-  /** Makes the slider readonly */
-  readonly?: boolean;
-
-  /** Converts to a range slider with two thumbs */
-  range?: boolean;
-
-  /** Draws markers at each step */
-  'with-markers'?: boolean;
-
-  /** Draws a tooltip above the thumb */
-  'with-tooltip'?: boolean;
-
-  /** Emitted when an alteration to the control's value is committed by the user. */
-  onChange?: (event: CustomEvent) => void;
-
-  /** Emitted when the control loses focus. */
-  onBlur?: (event: FocusEvent) => void;
-
-  /** Emitted when the control gains focus. */
-  onFocus?: (event: FocusEvent) => void;
-
-  /** Emitted when the control receives input. */
-  onInput?: (event: CustomEvent) => void;
-
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  onInvalid?: (event: CustomEvent) => void;
-}
-
-export interface SliderRef {
-
-  /** Sets focus to the slider. */
-  focus: () => void;
-
-  /** Removes focus from the slider. */
-  blur: () => void;
-
-  /** Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
-emitted when this is called. */
-  stepDown: () => void;
-
-  /** Increases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
-emitted when this is called. */
-  stepUp: () => void;
-  /** Reference to the underlying element */
-  element: WaElement | null;
-}
-
-export const Slider = forwardRef<SliderRef, SliderProps>(
-  ({ children, className, onChange, onBlur, onFocus, onInput, onInvalid, ...props }, ref) => {
-    const sliderRef = useRef<WaElement | null>(null);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        focus: () => {
-          if (sliderRef.current && typeof sliderRef.current.focus === 'function') {
-            sliderRef.current.focus();
-          }
-        },
-        blur: () => {
-          if (sliderRef.current && typeof sliderRef.current.blur === 'function') {
-            sliderRef.current.blur();
-          }
-        },
-        stepDown: () => {
-          if (sliderRef.current && typeof sliderRef.current.stepDown === 'function') {
-            sliderRef.current.stepDown();
-          }
-        },
-        stepUp: () => {
-          if (sliderRef.current && typeof sliderRef.current.stepUp === 'function') {
-            sliderRef.current.stepUp();
-          }
-        },
-        get element() {
-          return sliderRef.current;
-        },
-      }),
-      []
-    );
-
-    useEffect(() => {
-      const el = sliderRef.current;
-      if (!el) return;
-
-      const handleChange = (e: Event) => {
-        if (onChange) onChange(e as CustomEvent);
-      };
-
-      const handleBlur = (e: Event) => {
-        if (onBlur) onBlur(e as FocusEvent);
-      };
-
-      const handleFocus = (e: Event) => {
-        if (onFocus) onFocus(e as FocusEvent);
-      };
-
-      const handleInput = (e: Event) => {
-        if (onInput) onInput(e as CustomEvent);
-      };
-
-      const handleInvalid = (e: Event) => {
-        if (onInvalid) onInvalid(e as CustomEvent);
-      };
-
-      el.addEventListener('change', handleChange);
-      el.addEventListener('blur', handleBlur);
-      el.addEventListener('focus', handleFocus);
-      el.addEventListener('input', handleInput);
-      el.addEventListener('wa-invalid', handleInvalid);
-
-      return () => {
-        el.removeEventListener('change', handleChange);
-        el.removeEventListener('blur', handleBlur);
-        el.removeEventListener('focus', handleFocus);
-        el.removeEventListener('input', handleInput);
-        el.removeEventListener('wa-invalid', handleInvalid);
-      };
-    }, [onChange, onBlur, onFocus, onInput, onInvalid]);
-
-    return (
-      <wa-slider
-        ref={(el: WaElement | null) => { sliderRef.current = el; }}
-        class={clsx('Slider', className)}
-        {...(props as Record<string, unknown>)}
-      >
-        {children}
-      </wa-slider>
-    );
-  }
-);
-
-Slider.displayName = 'Slider';

package/templates/react/Sparkline/Sparkline.css.hbs

@@ -1,17 +0,0 @@
-/**
- * Sparkline Component Styles
- * Documentation: https://webawesome.com/docs/components/sparkline
- *
- * CSS Custom Properties:
- * --fill-color: Fill color below the sparkline
- * --line-color: Stroke color of the sparkline
- * --line-width: Stroke width of the sparkline
- *
- * CSS Parts:
- * base — Root SVG wrapper element
- * line — Sparkline path element
- * fill — Fill area below the line
- */
-.Sparkline {
-  /* Add your custom styles here */
-}