kigumi 0.2.0

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

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

package/templates/react/Button/Button.tsx.hbs

@@ -0,0 +1,131 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Button.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * <Button variant="brand">Click me</Button>
+ * <Button appearance="outlined" size="large">Large Button</Button>
+ * <Button loading>Loading...</Button>
+ * <Button data-dialog="close">Close Dialog</Button>
+ *
+ * // With event handlers
+ * <Button onBlur={() => console.log('Lost focus')}>
+ *   Button
+ * </Button>
+ *
+ * // With ref methods
+ * const buttonRef = useRef<ButtonRef>(null);
+ * <button onClick={() => buttonRef.current?.focus()}>Focus Button</button>
+ * <Button ref={buttonRef}>Focusable</Button>
+ * ```
+ */
+export interface ButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'onBlur' | 'onFocus' | 'dir'> {
+  /** Semantic variant of the button */
+  variant?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+  /** Visual appearance style */
+  appearance?: 'accent' | 'filled-outlined' | 'filled' | 'outlined' | 'plain';
+  /** Button size */
+  size?: 'small' | 'medium' | 'large';
+  /** Gives the button rounded edges */
+  pill?: boolean;
+  /** Disables the button */
+  disabled?: boolean;
+  /** Shows a loading indicator */
+  loading?: boolean;
+  /** Adds a dropdown indicator caret */
+  'with-caret'?: boolean;
+  /** Makes the button work like a link */
+  href?: string;
+  /** Link target (when href is set) */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  /** Download filename (when href is set) */
+  download?: string;
+  /** Link relationship (when href is set) */
+  rel?: string;
+  /** Dialog control attribute (e.g., "close" to close parent dialog) */
+  'data-dialog'?: string;
+  /** Event fired when the button loses focus */
+  onBlur?: (event: FocusEvent) => void;
+  /** Event fired when the button gains focus */
+  onFocus?: (event: FocusEvent) => void;
+}
+
+export interface ButtonRef {
+  focus: () => void;
+  blur: () => void;
+  click: () => void;
+  element: HTMLElement | null;
+}
+
+export const Button = forwardRef<ButtonRef, ButtonProps>(
+  ({ children, className, onBlur, onFocus, ...props }, ref) => {
+    const buttonRef = useRef<HTMLElement & {
+      focus?: () => void;
+      blur?: () => void;
+      click?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          if (buttonRef.current && typeof buttonRef.current.focus === 'function') {
+            buttonRef.current.focus();
+          }
+        },
+        blur: () => {
+          if (buttonRef.current && typeof buttonRef.current.blur === 'function') {
+            buttonRef.current.blur();
+          }
+        },
+        click: () => {
+          if (buttonRef.current && typeof buttonRef.current.click === 'function') {
+            buttonRef.current.click();
+          }
+        },
+        get element() {
+          return buttonRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = buttonRef.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('wa-blur', handleBlur);
+      el.addEventListener('wa-focus', handleFocus);
+
+      return () => {
+        el.removeEventListener('wa-blur', handleBlur);
+        el.removeEventListener('wa-focus', handleFocus);
+      };
+    }, [onBlur, onFocus]);
+
+    return (
+      <wa-button
+        ref={buttonRef}
+        class={clsx('Button', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/templates/react/Card/Card.css.hbs

@@ -0,0 +1,21 @@
+/**
+ * Card Component Styles
+ * Documentation: https://webawesome.com/docs/components/card
+ *
+ * CSS Custom Properties:
+ * - --spacing: The amount of space around and between sections of the card (Default: var(--wa-space-l))
+ *
+ * CSS Parts:
+ * - media: The container that wraps the card's media
+ * - header: The container that wraps the card's header
+ * - body: The container that wraps the card's main content
+ * - footer: The container that wraps the card's footer
+ *
+ * @example
+ * .Card::part(body) {
+ *   // Custom styles
+ * }
+ */
+.Card {
+  /* Add your custom styles here */
+}

package/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/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/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/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/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/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/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/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/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/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/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/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/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/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';