kigumi 0.2.0

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Card.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * <Card>
+ *   <div slot="header">Card Header</div>
+ *   <p>Card content goes here</p>
+ *   <div slot="footer">Card Footer</div>
+ * </Card>
+ *
+ * @param {Object} props
+ * @param {'outlined' | 'filled-outlined' | 'plain' | 'filled' | 'accent'} [props.appearance] - Visual appearance style
+ * @param {'vertical' | 'horizontal'} [props.orientation] - Card layout orientation
+ * @param {boolean} [props['with-header']] - Adds header section (for SSR)
+ * @param {boolean} [props['with-footer']] - Adds footer section (for SSR)
+ * @param {boolean} [props['with-media']] - Adds media section (for SSR)
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.children] - Card content
+ */
+export const Card = React.forwardRef(({ children, className, ...props }, ref) => {
+  return (
+    <wa-card ref={ref} class={clsx('Card', className)} {...props}>
+      {children}
+    </wa-card>
+  );
+});
+
+Card.displayName = 'Card';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('renders without crashing', () => {
+    render(<Card>Card content</Card>);
+    const card = screen.getByText('Card content');
+    expect(card).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(<Card className="custom-class">Test</Card>);
+    const card = screen.getByText('Test');
+    expect(card.className).toContain('custom-class');
+  });
+
+  it('forwards ref correctly', () => {
+    const ref = React.createRef();
+    render(<Card ref={ref}>Test</Card>);
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+  });
+});

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

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

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

@@ -0,0 +1,41 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Card.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <div slot="header">Card Header</div>
+ *   <p>Card content goes here</p>
+ *   <div slot="footer">Card Footer</div>
+ * </Card>
+ * ```
+ */
+export interface CardProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Visual appearance style */
+  appearance?: 'outlined' | 'filled-outlined' | 'plain' | 'filled' | 'accent';
+  /** Card layout orientation */
+  orientation?: 'vertical' | 'horizontal';
+  /** Adds header section (for SSR) */
+  'with-header'?: boolean;
+  /** Adds footer section (for SSR) */
+  'with-footer'?: boolean;
+  /** Adds media section (for SSR) */
+  'with-media'?: boolean;
+}
+
+export const Card = forwardRef<HTMLElement, CardProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-card ref={ref} class={clsx('Card', className)} {...(props as Record<string, unknown>)}>
+        {children}
+      </wa-card>
+    );
+  }
+);
+
+Card.displayName = 'Card';

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

@@ -0,0 +1,28 @@
+/**
+ * Carousel Component Styles
+ * Documentation: https://webawesome.com/docs/components/carousel
+ *
+ * CSS Custom Properties:
+ * - --aspect-ratio: The aspect ratio of each slide (Default: 16/9)
+ * - --scroll-hint: The amount of padding to apply to the scroll area
+ * - --slide-gap: The space between each slide (Default: var(--wa-space-m))
+ *
+ * CSS Parts:
+ * - base: The carousel's internal wrapper
+ * - scroll-container: The scroll container that wraps the slides
+ * - pagination: The pagination indicators wrapper
+ * - pagination-item: The pagination indicator
+ * - pagination-item-active: Applied when the item is active
+ * - navigation: The navigation wrapper
+ * - navigation-button: The navigation button
+ * - navigation-button-previous: Applied to the previous button
+ * - navigation-button-next: Applied to the next button
+ *
+ * @example
+ * .Carousel::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Carousel {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Carousel.css';
+
+/**
+ * Displays an arbitrary number of content slides along a horizontal or vertical axis
+ *
+ * @example
+ * ```jsx
+ * <Carousel navigation pagination loop>
+ *   <CarouselItem>Slide 1</CarouselItem>
+ *   <CarouselItem>Slide 2</CarouselItem>
+ *   <CarouselItem>Slide 3</CarouselItem>
+ * </Carousel>
+ * ```
+ *
+ * @typedef {Object} CarouselProps
+ * @property {boolean} [autoplay] - Automatically scrolls slides
+ * @property {number} [autoplay-interval] - Milliseconds between scrolls
+ * @property {boolean} [loop] - Allows infinite navigation
+ * @property {boolean} [mouse-dragging] - Enables mouse dragging
+ * @property {boolean} [navigation] - Shows navigation buttons
+ * @property {'horizontal'|'vertical'} [orientation] - Layout direction
+ * @property {boolean} [pagination] - Shows pagination dots
+ * @property {number} [slides-per-move] - Slides to advance per scroll
+ * @property {number} [slides-per-page] - Visible slides count
+ * @property {(event: CustomEvent) => void} [onSlideChange] - Slide change handler
+ */
+
+export const Carousel = React.forwardRef(
+  ({ children, className, onSlideChange, ...props }, ref) => {
+    const carouselRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        goToSlide: (index, behavior) => {
+          carouselRef.current?.goToSlide?.(index, behavior);
+        },
+        next: (behavior) => {
+          carouselRef.current?.next?.(behavior);
+        },
+        previous: (behavior) => {
+          carouselRef.current?.previous?.(behavior);
+        },
+        get element() {
+          return carouselRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = carouselRef.current;
+      if (!el) return;
+
+      const handleSlideChange = (e) => {
+        if (onSlideChange) onSlideChange(e);
+      };
+
+      el.addEventListener('wa-slide-change', handleSlideChange);
+
+      return () => {
+        el.removeEventListener('wa-slide-change', handleSlideChange);
+      };
+    }, [onSlideChange]);
+
+    return (
+      <wa-carousel
+        ref={carouselRef}
+        class={clsx('Carousel', className)}
+        {...props}
+      >
+        {children}
+      </wa-carousel>
+    );
+  }
+);
+
+Carousel.displayName = 'Carousel';

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Carousel } from './Carousel';
+
+describe('Carousel', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Carousel />);
+    expect(container.querySelector('wa-carousel')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<Carousel ref={ref} />);
+    expect(ref.current).toHaveProperty('goToSlide');
+    expect(ref.current).toHaveProperty('next');
+    expect(ref.current).toHaveProperty('previous');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Carousel className="custom-class" />);
+    const element = container.querySelector('wa-carousel');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+});

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

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

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

@@ -0,0 +1,108 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Carousel.css';
+
+/**
+ * Displays an arbitrary number of content slides along a horizontal or vertical axis
+ *
+ * @example
+ * ```tsx
+ * <Carousel navigation pagination loop>
+ *   <CarouselItem>Slide 1</CarouselItem>
+ *   <CarouselItem>Slide 2</CarouselItem>
+ *   <CarouselItem>Slide 3</CarouselItem>
+ * </Carousel>
+ * ```
+ */
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Automatically scrolls slides when user isn't interacting */
+  autoplay?: boolean;
+  /** Milliseconds between automatic scrolls */
+  'autoplay-interval'?: number;
+  /** Allows infinite navigation in same direction */
+  loop?: boolean;
+  /** Enables dragging slides with mouse */
+  'mouse-dragging'?: boolean;
+  /** Shows previous/next buttons */
+  navigation?: boolean;
+  /** Carousel layout direction */
+  orientation?: 'horizontal' | 'vertical';
+  /** Shows slide indicator dots */
+  pagination?: boolean;
+  /** Number of slides to advance per scroll */
+  'slides-per-move'?: number;
+  /** Number of slides visible at once */
+  'slides-per-page'?: number;
+  /** Event fired when the active slide changes */
+  onSlideChange?: (event: CustomEvent) => void;
+}
+
+export interface CarouselRef {
+  goToSlide: (index: number, behavior?: ScrollBehavior) => void;
+  next: (behavior?: ScrollBehavior) => void;
+  previous: (behavior?: ScrollBehavior) => void;
+  element: HTMLElement | null;
+}
+
+export const Carousel = forwardRef<CarouselRef, CarouselProps>(
+  ({ children, className, onSlideChange, ...props }, ref) => {
+    const carouselRef = useRef<HTMLElement & {
+      goToSlide?: (index: number, behavior?: ScrollBehavior) => void;
+      next?: (behavior?: ScrollBehavior) => void;
+      previous?: (behavior?: ScrollBehavior) => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        goToSlide: (index: number, behavior?: ScrollBehavior) => {
+          if (carouselRef.current && typeof carouselRef.current.goToSlide === 'function') {
+            carouselRef.current.goToSlide(index, behavior);
+          }
+        },
+        next: (behavior?: ScrollBehavior) => {
+          if (carouselRef.current && typeof carouselRef.current.next === 'function') {
+            carouselRef.current.next(behavior);
+          }
+        },
+        previous: (behavior?: ScrollBehavior) => {
+          if (carouselRef.current && typeof carouselRef.current.previous === 'function') {
+            carouselRef.current.previous(behavior);
+          }
+        },
+        get element() {
+          return carouselRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = carouselRef.current;
+      if (!el) return;
+
+      const handleSlideChange = (e: Event) => {
+        if (onSlideChange) onSlideChange(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-slide-change', handleSlideChange);
+
+      return () => {
+        el.removeEventListener('wa-slide-change', handleSlideChange);
+      };
+    }, [onSlideChange]);
+
+    return (
+      <wa-carousel
+        ref={carouselRef}
+        class={clsx('Carousel', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-carousel>
+    );
+  }
+);
+
+Carousel.displayName = 'Carousel';

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

@@ -0,0 +1,18 @@
+/**
+ * CarouselItem Component Styles
+ * Documentation: https://webawesome.com/docs/components/carousel-item
+ *
+ * CSS Custom Properties:
+ * - --aspect-ratio: The slide's aspect ratio (inherited from the carousel by default)
+ *
+ * CSS Parts:
+ * (No CSS parts defined for this component)
+ *
+ * @example
+ * .CarouselItem {
+ *   // Custom styles
+ * }
+ */
+.CarouselItem {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './CarouselItem.css';
+
+/**
+ * Represents an individual slide within a carousel component
+ *
+ * @example
+ * ```jsx
+ * <Carousel>
+ *   <CarouselItem>
+ *     <img src="slide1.jpg" alt="Slide 1" />
+ *   </CarouselItem>
+ * </Carousel>
+ * ```
+ */
+export const CarouselItem = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-carousel-item ref={ref} class={clsx('CarouselItem', className)} {...props}>
+        {children}
+      </wa-carousel-item>
+    );
+  }
+);
+
+CarouselItem.displayName = 'CarouselItem';

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

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { CarouselItem } from './CarouselItem';
+
+describe('CarouselItem', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<CarouselItem />);
+    expect(container.querySelector('wa-carousel-item')).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(<CarouselItem>Slide Content</CarouselItem>);
+    expect(getByText('Slide Content')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<CarouselItem className="custom-class" />);
+    const element = container.querySelector('wa-carousel-item');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+});

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

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

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

@@ -0,0 +1,33 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './CarouselItem.css';
+
+/**
+ * Represents an individual slide within a carousel component
+ *
+ * @example
+ * ```tsx
+ * <Carousel>
+ *   <CarouselItem>
+ *     <img src="slide1.jpg" alt="Slide 1" />
+ *   </CarouselItem>
+ *   <CarouselItem>
+ *     <img src="slide2.jpg" alt="Slide 2" />
+ *   </CarouselItem>
+ * </Carousel>
+ * ```
+ */
+export type CarouselItemProps = Omit<HTMLAttributes<HTMLElement>, 'dir'>;
+
+export const CarouselItem = forwardRef<HTMLElement, CarouselItemProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-carousel-item ref={ref} class={clsx('CarouselItem', className)} {...(props as Record<string, unknown>)}>
+        {children}
+      </wa-carousel-item>
+    );
+  }
+);
+
+CarouselItem.displayName = 'CarouselItem';

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

@@ -0,0 +1,24 @@
+/**
+ * Checkbox Component Styles
+ * Documentation: https://webawesome.com/docs/components/checkbox
+ *
+ * CSS Custom Properties:
+ * - --checked-icon-color: The color of the checked and indeterminate icons
+ * - --checked-icon-scale: The size of the checked and indeterminate icons relative to the checkbox
+ *
+ * CSS Parts:
+ * - base: The component's label
+ * - control: The square container that wraps the checkbox's checked state
+ * - checked-icon: The checked icon, a <wa-icon> element
+ * - indeterminate-icon: The indeterminate icon, a <wa-icon> element
+ * - label: The container that wraps the checkbox's label
+ * - hint: The hint's wrapper
+ *
+ * @example
+ * .Checkbox::part(control) {
+ *   // Custom styles
+ * }
+ */
+.Checkbox {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Checkbox.css';
+
+/**
+ * Checkboxes allow the user to toggle an option on or off
+ *
+ * @example
+ * ```jsx
+ * <Checkbox checked>Remember me</Checkbox>
+ * <Checkbox indeterminate>Select all</Checkbox>
+ * ```
+ *
+ * @typedef {Object} CheckboxProps
+ * @property {boolean} [checked] - Checked state
+ * @property {boolean} [disabled] - Disabled state
+ * @property {string} [hint] - Helper text
+ * @property {boolean} [indeterminate] - Mixed state
+ * @property {string} [name] - Form field name
+ * @property {boolean} [required] - Required field
+ * @property {'small'|'medium'|'large'} [size] - Checkbox size
+ * @property {string} [value] - Form value
+ * @property {(event: CustomEvent) => void} [onInvalid] - Invalid handler
+ */
+
+export const Checkbox = React.forwardRef(
+  ({ children, className, onInvalid, ...props }, ref) => {
+    const checkboxRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: (options) => {
+          checkboxRef.current?.focus?.(options);
+        },
+        blur: () => {
+          checkboxRef.current?.blur?.();
+        },
+        click: () => {
+          checkboxRef.current?.click?.();
+        },
+        setCustomValidity: (message) => {
+          checkboxRef.current?.setCustomValidity?.(message);
+        },
+        get element() {
+          return checkboxRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = checkboxRef.current;
+      if (!el) return;
+
+      const handleInvalid = (e) => {
+        if (onInvalid) onInvalid(e);
+      };
+
+      el.addEventListener('wa-invalid', handleInvalid);
+
+      return () => {
+        el.removeEventListener('wa-invalid', handleInvalid);
+      };
+    }, [onInvalid]);
+
+    return (
+      <wa-checkbox
+        ref={checkboxRef}
+        class={clsx('Checkbox', className)}
+        {...props}
+      >
+        {children}
+      </wa-checkbox>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Checkbox />);
+    expect(container.querySelector('wa-checkbox')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<Checkbox ref={ref} />);
+    expect(ref.current).toHaveProperty('focus');
+    expect(ref.current).toHaveProperty('blur');
+    expect(ref.current).toHaveProperty('click');
+    expect(ref.current).toHaveProperty('setCustomValidity');
+  });
+
+  it('renders children as label', () => {
+    const { getByText } = render(<Checkbox>Accept terms</Checkbox>);
+    expect(getByText('Accept terms')).toBeInTheDocument();
+  });
+});

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

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