kigumi 0.19.2 → 0.20.0

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

@@ -1,60 +0,0 @@
-import { forwardRef, useRef, useImperativeHandle, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import type WaElement from '{{{importPath}}}';
-import './ProgressRing.css';
-
-/**
- * Progress rings are used to show the completion of a task in a circular format
- *
- * @example
- * ```tsx
- * // Basic usage
- * <ProgressRing />
- *
- * // With event handlers
- * <ProgressRing />
- *
- * ```
- */
-export interface ProgressRingProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
-
-  /** Current progress (0-100) */
-  value?: number;
-
-  /** Accessible label */
-  label?: string;
-}
-
-export interface ProgressRingRef {
-  /** Reference to the underlying element */
-  element: WaElement | null;
-}
-
-export const ProgressRing = forwardRef<ProgressRingRef, ProgressRingProps>(
-  ({ children, className, ...props }, ref) => {
-    const progressringRef = useRef<WaElement | null>(null);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        get element() {
-          return progressringRef.current;
-        },
-      }),
-      []
-    );
-
-    return (
-      <wa-progress-ring
-        ref={(el: WaElement | null) => { progressringRef.current = el; }}
-        class={clsx('ProgressRing', className)}
-        {...(props as Record<string, unknown>)}
-      >
-        {children}
-      </wa-progress-ring>
-    );
-  }
-);
-
-ProgressRing.displayName = 'ProgressRing';

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

@@ -1,10 +0,0 @@
-/**
- * QrCode Component Styles
- * Documentation: https://webawesome.com/docs/components/qr-code
- *
- * CSS Parts:
- * base — Root wrapper element containing the QR code SVG
- */
-.QrCode {
-  /* Add your custom styles here */
-}

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

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

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

@@ -1,10 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { QrCode } from './QrCode';
-
-describe('QrCode', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<QrCode />);
-    expect(container.querySelector('wa-qr-code')).toBeTruthy();
-  });
-});

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

@@ -1,75 +0,0 @@
-import { forwardRef, useRef, useImperativeHandle, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import type WaElement from '{{{importPath}}}';
-import './QrCode.css';
-
-/**
- * Generates QR codes for encoding text, URLs, or data
- *
- * @example
- * ```tsx
- * // Basic usage
- * <QrCode />
- *
- * // With event handlers
- * <QrCode />
- *
- * ```
- */
-export interface QrCodeProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
-
-  /** The data to encode */
-  value?: string;
-
-  /** Accessible label */
-  label?: string;
-
-  /** Size in pixels */
-  size?: number;
-
-  /** Fill color */
-  fill?: string;
-
-  /** Background color */
-  background?: string;
-
-  /** Corner radius */
-  radius?: number;
-
-  /** Error correction level */
-  'error-correction'?: 'L' | 'M' | 'Q' | 'H';
-}
-
-export interface QrCodeRef {
-  /** Reference to the underlying element */
-  element: WaElement | null;
-}
-
-export const QrCode = forwardRef<QrCodeRef, QrCodeProps>(
-  ({ children, className, ...props }, ref) => {
-    const qrcodeRef = useRef<WaElement | null>(null);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        get element() {
-          return qrcodeRef.current;
-        },
-      }),
-      []
-    );
-
-    return (
-      <wa-qr-code
-        ref={(el: WaElement | null) => { qrcodeRef.current = el; }}
-        class={clsx('QrCode', className)}
-        {...(props as Record<string, unknown>)}
-      >
-        {children}
-      </wa-qr-code>
-    );
-  }
-);
-
-QrCode.displayName = 'QrCode';

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

@@ -1,14 +0,0 @@
-/**
- * RadarChart Component Styles
- * Documentation: https://webawesome.com/docs/components/radar-chart
- *
- * CSS Custom Properties:
- * --fill-color-1 through --fill-color-6: Fill colors for datasets
- * --border-color-1 through --border-color-6: Border colors for datasets
- * --grid-color: Color of the radial grid lines and axis borders
- * --line-border-width: Border width for radar lines
- * --point-radius: Radius of data point dots
- */
-.RadarChart {
-  /* Add your custom styles here */
-}

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

@@ -1,63 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import './RadarChart.css';
-
-/**
- * Maps multiple variables onto radial axes to compare profiles at a glance
- *
- * @example
- * ```jsx
- * <RadarChart label="Player comparison">
- *   <script type="application/json">{JSON.stringify({
- *     data: {
- *       labels: ['Pace', 'Shooting', 'Passing', 'Defense', 'Physical'],
- *       datasets: [
- *         { label: 'Player A', data: [85, 70, 80, 60, 75] },
- *         { label: 'Player B', data: [70, 85, 75, 80, 65] }
- *       ]
- *     }
- *   })}</script>
- * </RadarChart>
- * ```
- *
- * @typedef {Object} RadarChartProps
- * @property {string} [label] - Accessible name announced by assistive technology
- * @property {string} [description] - Extended accessible description for the chart
- * @property {string} [legend-position] - Placement of the legend: top | right | bottom | left | start | end
- * @property {boolean} [stacked] - Layers multiple datasets on a single axis
- * @property {string} [grid] - Background grid lines: x | y | both | none
- * @property {number} [min] - Floor value for the value axis scale
- * @property {number} [max] - Ceiling value for the value axis scale
- * @property {boolean} [without-animation] - Disables entrance and update motion effects
- * @property {boolean} [without-legend] - Hides the dataset legend entirely
- * @property {boolean} [without-tooltip] - Prevents hover tooltips from appearing on data points
- */
-
-export const RadarChart = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    const radarChartRef = React.useRef(null);
-
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        get element() {
-          return radarChartRef.current;
-        },
-      }),
-      []
-    );
-
-    return (
-      <wa-radar-chart
-        ref={radarChartRef}
-        class={clsx('RadarChart', className)}
-        {...props}
-      >
-        {children}
-      </wa-radar-chart>
-    );
-  }
-);
-
-RadarChart.displayName = 'RadarChart';

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

@@ -1,10 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { RadarChart } from './RadarChart';
-
-describe('RadarChart', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RadarChart />);
-    expect(container.querySelector('wa-radar-chart')).toBeTruthy();
-  });
-});

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

@@ -1,89 +0,0 @@
-import { forwardRef, useRef, useImperativeHandle, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import type WaElement from '{{{importPath}}}';
-import './RadarChart.css';
-
-/**
- * Maps multiple variables onto radial axes to compare profiles at a glance
- *
- * @example
- * ```tsx
- * <RadarChart label="Player comparison">
- *   <script type="application/json">{JSON.stringify({
- *     data: {
- *       labels: ['Pace', 'Shooting', 'Passing', 'Defense', 'Physical'],
- *       datasets: [
- *         { label: 'Player A', data: [85, 70, 80, 60, 75] },
- *         { label: 'Player B', data: [70, 85, 75, 80, 65] }
- *       ]
- *     }
- *   })}</script>
- * </RadarChart>
- * ```
- */
-export interface RadarChartProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
-
-  /** Accessible name announced by assistive technology */
-  label?: string;
-
-  /** Extended accessible description for the chart */
-  description?: string;
-
-  /** Placement of the dataset legend relative to the chart */
-  'legend-position'?: 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
-
-  /** Layers multiple datasets on a single axis */
-  stacked?: boolean;
-
-  /** Selects which background grid lines are drawn */
-  grid?: 'x' | 'y' | 'both' | 'none';
-
-  /** Floor value for the value axis scale */
-  min?: number;
-
-  /** Ceiling value for the value axis scale */
-  max?: number;
-
-  /** Disables entrance and update motion effects */
-  'without-animation'?: boolean;
-
-  /** Hides the dataset legend entirely */
-  'without-legend'?: boolean;
-
-  /** Prevents hover tooltips from appearing on data points */
-  'without-tooltip'?: boolean;
-}
-
-export interface RadarChartRef {
-  /** Reference to the underlying element */
-  element: WaElement | null;
-}
-
-export const RadarChart = forwardRef<RadarChartRef, RadarChartProps>(
-  ({ children, className, ...props }, ref) => {
-    const radarChartRef = useRef<WaElement | null>(null);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        get element() {
-          return radarChartRef.current;
-        },
-      }),
-      []
-    );
-
-    return (
-      <wa-radar-chart
-        ref={(el: WaElement | null) => { radarChartRef.current = el; }}
-        class={clsx('RadarChart', className)}
-        {...(props as Record<string, unknown>)}
-      >
-        {children}
-      </wa-radar-chart>
-    );
-  }
-);
-
-RadarChart.displayName = 'RadarChart';

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

@@ -1,16 +0,0 @@
-/**
- * Radio Component Styles
- * Documentation: https://webawesome.com/docs/components/radio
- *
- * CSS Custom Properties:
- * --checked-icon-color: Color of the checked state dot
- * --checked-icon-scale: Scale of the checked state dot
- *
- * CSS Parts:
- * control — Radio control element (the visual circle)
- * checked-icon — Dot shown in the checked state
- * label — Radio label text
- */
-.Radio {
-  /* Add your custom styles here */
-}

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

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

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

@@ -1,10 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { Radio } from './Radio';
-
-describe('Radio', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<Radio />);
-    expect(container.querySelector('wa-radio')).toBeTruthy();
-  });
-});

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

@@ -1,94 +0,0 @@
-import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import '{{{importPath}}}';
-import type WaElement from '{{{importPath}}}';
-import './Radio.css';
-
-/**
- * Radios allow the user to select a single option from a group
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Radio />
- *
- * // With event handlers
- * <Radio
- *   onBlur={(e) => console.log(e)} />
- *
- * ```
- */
-export interface RadioProps extends Omit<HTMLAttributes<HTMLElement>, 'onBlur' | 'onFocus' | 'dir'> {
-
-  /** The radio value */
-  value?: string;
-
-  /** Visual appearance */
-  appearance?: string;
-
-  /** Disables the radio */
-  disabled?: boolean;
-
-  /** Radio size */
-  size?: 'small' | 'medium' | 'large';
-
-  /** Emitted when the control loses focus. */
-  onBlur?: (event: FocusEvent) => void;
-
-  /** Emitted when the control gains focus. */
-  onFocus?: (event: FocusEvent) => void;
-}
-
-export interface RadioRef {
-  /** Reference to the underlying element */
-  element: WaElement | null;
-}
-
-export const Radio = forwardRef<RadioRef, RadioProps>(
-  ({ children, className, onBlur, onFocus, ...props }, ref) => {
-    const radioRef = useRef<WaElement | null>(null);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        get element() {
-          return radioRef.current;
-        },
-      }),
-      []
-    );
-
-    useEffect(() => {
-      const el = radioRef.current;
-      if (!el) return;
-
-      const handleBlur = (e: Event) => {
-        if (onBlur) onBlur(e as FocusEvent);
-      };
-
-      const handleFocus = (e: Event) => {
-        if (onFocus) onFocus(e as FocusEvent);
-      };
-
-      el.addEventListener('blur', handleBlur);
-      el.addEventListener('focus', handleFocus);
-
-      return () => {
-        el.removeEventListener('blur', handleBlur);
-        el.removeEventListener('focus', handleFocus);
-      };
-    }, [onBlur, onFocus]);
-
-    return (
-      <wa-radio
-        ref={(el: WaElement | null) => { radioRef.current = el; }}
-        class={clsx('Radio', className)}
-        {...(props as Record<string, unknown>)}
-      >
-        {children}
-      </wa-radio>
-    );
-  }
-);
-
-Radio.displayName = 'Radio';

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

@@ -1,14 +0,0 @@
-/**
- * RadioGroup Component Styles
- * Documentation: https://webawesome.com/docs/components/radio-group
- *
- * CSS Parts:
- * form-control — Outer form control wrapper
- * form-control-label — Label element above the radio group
- * form-control-input — Input area containing the radio buttons
- * radios — Container for all radio options
- * hint — Hint text below the group
- */
-.RadioGroup {
-  /* Add your custom styles here */
-}

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

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

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

@@ -1,10 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { RadioGroup } from './RadioGroup';
-
-describe('RadioGroup', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RadioGroup />);
-    expect(container.querySelector('wa-radio-group')).toBeTruthy();
-  });
-});