kigumi 0.2.0

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Breadcrumb.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbItem } from './components/ui';
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbItem>Home</BreadcrumbItem>
+ *   <BreadcrumbItem>Category</BreadcrumbItem>
+ *   <BreadcrumbItem>Product</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // With links
+ * <Breadcrumb>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem>Current Page</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // With custom separator
+ * <Breadcrumb>
+ *   <wa-icon slot="separator" name="angle-right" />
+ *   <BreadcrumbItem>First</BreadcrumbItem>
+ *   <BreadcrumbItem>Second</BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ *
+ * @typedef {Object} BreadcrumbProps
+ * @property {string} [label] - The label for assistive devices
+ */
+
+export const Breadcrumb = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-breadcrumb ref={ref} class={clsx('Breadcrumb', className)} {...props}>
+        {children}
+      </wa-breadcrumb>
+    );
+  }
+);
+
+Breadcrumb.displayName = 'Breadcrumb';

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

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Breadcrumb } from './Breadcrumb';
+
+describe('Breadcrumb', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Breadcrumb>
+        <div>Item</div>
+      </Breadcrumb>
+    );
+    expect(container.querySelector('wa-breadcrumb')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Breadcrumb className="custom-class">
+        <div>Item</div>
+      </Breadcrumb>
+    );
+    const element = container.querySelector('wa-breadcrumb');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes label prop', () => {
+    const { container } = render(
+      <Breadcrumb label="Navigation">
+        <div>Item</div>
+      </Breadcrumb>
+    );
+    const element = container.querySelector('wa-breadcrumb');
+    expect(element?.getAttribute('label')).toBe('Navigation');
+  });
+});

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

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

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

@@ -0,0 +1,49 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Breadcrumb.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbItem } from './components/ui';
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbItem>Home</BreadcrumbItem>
+ *   <BreadcrumbItem>Category</BreadcrumbItem>
+ *   <BreadcrumbItem>Product</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // With links
+ * <Breadcrumb>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem>Current Page</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // With custom separator
+ * <Breadcrumb>
+ *   <wa-icon slot="separator" name="angle-right" />
+ *   <BreadcrumbItem>First</BreadcrumbItem>
+ *   <BreadcrumbItem>Second</BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The label to use for the breadcrumb control for assistive devices */
+  label?: string;
+}
+
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-breadcrumb ref={ref} class={clsx('Breadcrumb', className)} {...(props as Record<string, unknown>)}>
+        {children}
+      </wa-breadcrumb>
+    );
+  }
+);
+
+Breadcrumb.displayName = 'Breadcrumb';

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

@@ -0,0 +1,21 @@
+/**
+ * BreadcrumbItem Component Styles
+ * Documentation: https://webawesome.com/docs/components/breadcrumb-item
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - label: The breadcrumb item's label
+ * - start: The container that wraps the start slot
+ * - end: The container that wraps the end slot
+ * - separator: The container that wraps the separator
+ *
+ * @example
+ * .BreadcrumbItem::part(label) {
+ *   // Custom styles
+ * }
+ */
+.BreadcrumbItem {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './BreadcrumbItem.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbItem } from './components/ui';
+ *
+ * // As buttons (default)
+ * <Breadcrumb>
+ *   <BreadcrumbItem>Home</BreadcrumbItem>
+ *   <BreadcrumbItem>Products</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // As links
+ * <Breadcrumb>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem>Current</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // With icons
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <wa-icon slot="start" name="house" />
+ *     Home
+ *   </BreadcrumbItem>
+ *   <BreadcrumbItem>
+ *     Products
+ *     <wa-icon slot="end" name="box" />
+ *   </BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ *
+ * @typedef {Object} BreadcrumbItemProps
+ * @property {string} [href] - Optional URL to direct the user to
+ * @property {string} [target] - Where to open the link
+ * @property {string} [rel] - The rel attribute to use on the link
+ */
+
+export const BreadcrumbItem = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-breadcrumb-item ref={ref} class={clsx('BreadcrumbItem', className)} {...props}>
+        {children}
+      </wa-breadcrumb-item>
+    );
+  }
+);
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';

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

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { BreadcrumbItem } from './BreadcrumbItem';
+
+describe('BreadcrumbItem', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<BreadcrumbItem>Home</BreadcrumbItem>);
+    expect(container.querySelector('wa-breadcrumb-item')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <BreadcrumbItem className="custom-class">Home</BreadcrumbItem>
+    );
+    const element = container.querySelector('wa-breadcrumb-item');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes href prop', () => {
+    const { container } = render(
+      <BreadcrumbItem href="/home">Home</BreadcrumbItem>
+    );
+    const element = container.querySelector('wa-breadcrumb-item');
+    expect(element?.getAttribute('href')).toBe('/home');
+  });
+
+  it('passes target prop', () => {
+    const { container } = render(
+      <BreadcrumbItem href="/external" target="_blank">
+        External
+      </BreadcrumbItem>
+    );
+    const element = container.querySelector('wa-breadcrumb-item');
+    expect(element?.getAttribute('target')).toBe('_blank');
+  });
+});

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

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

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

@@ -0,0 +1,58 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './BreadcrumbItem.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbItem } from './components/ui';
+ *
+ * // As buttons (default)
+ * <Breadcrumb>
+ *   <BreadcrumbItem>Home</BreadcrumbItem>
+ *   <BreadcrumbItem>Products</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // As links
+ * <Breadcrumb>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem>Current</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * // With icons
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <wa-icon slot="start" name="house" />
+ *     Home
+ *   </BreadcrumbItem>
+ *   <BreadcrumbItem>
+ *     Products
+ *     <wa-icon slot="end" name="box" />
+ *   </BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
+export interface BreadcrumbItemProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Optional URL to direct the user to when activated */
+  href?: string;
+  /** Tells the browser where to open the link */
+  target?: '_blank' | '_parent' | '_self' | '_top';
+  /** The rel attribute to use on the link */
+  rel?: string;
+}
+
+export const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <wa-breadcrumb-item ref={ref} class={clsx('BreadcrumbItem', className)} {...(props as Record<string, unknown>)}>
+        {children}
+      </wa-breadcrumb-item>
+    );
+  }
+);
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';

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

@@ -0,0 +1,23 @@
+/**
+ * Button Component Styles
+ * Documentation: https://webawesome.com/docs/components/button
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - start: The container that wraps the start slot
+ * - label: The button's label
+ * - end: The container that wraps the end slot
+ * - caret: The button's caret icon, a <wa-icon> element
+ * - spinner: The spinner that shows when the button is in the loading state
+ *
+ * @example
+ * .Button::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Button {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Button.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * <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 = React.useRef(null);
+ * <button onClick={() => buttonRef.current?.focus()}>Focus Button</button>
+ * <Button ref={buttonRef}>Focusable</Button>
+ * ```
+ *
+ * @typedef {Object} ButtonProps
+ * @property {string} [variant] - Semantic variant
+ * @property {string} [appearance] - Visual appearance
+ * @property {string} [size] - Button size
+ * @property {boolean} [pill] - Rounded edges
+ * @property {boolean} [disabled] - Disables button
+ * @property {boolean} [loading] - Shows loading indicator
+ * @property {boolean} [with-caret] - Adds dropdown caret
+ * @property {string} [href] - Makes button work like link
+ * @property {string} [target] - Link target
+ * @property {string} [download] - Download filename
+ * @property {string} [rel] - Link relationship
+ * @property {string} [data-dialog] - Dialog control attribute
+ * @property {function} [onBlur] - Event fired when button loses focus
+ * @property {function} [onFocus] - Event fired when button gains focus
+ */
+
+export const Button = React.forwardRef(
+  ({ children, className, onBlur, onFocus, ...props }, ref) => {
+    const buttonRef = React.useRef(null);
+
+    React.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;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = buttonRef.current;
+      if (!el) return;
+
+      const handleBlur = (e) => {
+        if (onBlur) onBlur(e);
+      };
+
+      const handleFocus = (e) => {
+        if (onFocus) onFocus(e);
+      };
+
+      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}
+      >
+        {children}
+      </wa-button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

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

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

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