kigumi 0.2.0

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

@@ -0,0 +1,111 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Details.css';
+
+/**
+ * Shows a brief summary and expands to show additional content
+ *
+ * @example
+ * ```tsx
+ * <Details summary="Click to expand">
+ *   <p>Hidden content that reveals when expanded.</p>
+ * </Details>
+ *
+ * // Controlled
+ * <Details open summary="Already open">
+ *   <p>This is expanded by default.</p>
+ * </Details>
+ * ```
+ */
+export interface DetailsProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Whether the details are expanded */
+  open?: boolean;
+  /** Summary text shown in header */
+  summary?: string;
+  /** Disables the details */
+  disabled?: boolean;
+  /** Visual appearance style */
+  appearance?: 'filled' | 'outlined' | 'filled-outlined' | 'plain';
+  /** Position of the expand icon */
+  'icon-placement'?: 'start' | 'end';
+  /** Name for accordion grouping */
+  name?: string;
+  /** Event fired when details opens */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after details opens */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when details closes */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after details closes */
+  onAfterHide?: (event: CustomEvent) => void;
+}
+
+export interface DetailsRef {
+  show: () => void;
+  hide: () => void;
+  element: HTMLElement | null;
+}
+
+export const Details = forwardRef<DetailsRef, DetailsProps>(
+  ({ children, className, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const detailsRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          if (detailsRef.current && typeof detailsRef.current.show === 'function') {
+            detailsRef.current.show();
+          }
+        },
+        hide: () => {
+          if (detailsRef.current && typeof detailsRef.current.hide === 'function') {
+            detailsRef.current.hide();
+          }
+        },
+        get element() {
+          return detailsRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = detailsRef.current;
+      if (!el) return;
+
+      const handleShow = (e: Event) => onShow?.(e as CustomEvent);
+      const handleAfterShow = (e: Event) => onAfterShow?.(e as CustomEvent);
+      const handleHide = (e: Event) => onHide?.(e as CustomEvent);
+      const handleAfterHide = (e: Event) => onAfterHide?.(e as CustomEvent);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide]);
+
+    return (
+      <wa-details
+        ref={detailsRef}
+        class={clsx('Details', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-details>
+    );
+  }
+);
+
+Details.displayName = 'Details';

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

@@ -0,0 +1,28 @@
+/**
+ * Dialog Component Styles
+ * Documentation: https://webawesome.com/docs/components/dialog
+ *
+ * CSS Custom Properties:
+ * - --spacing: The amount of space around and between the dialog's content
+ * - --width: The preferred width of the dialog
+ * - --show-duration: The animation duration when showing the dialog (Default: 200ms)
+ * - --hide-duration: The animation duration when hiding the dialog (Default: 200ms)
+ *
+ * CSS Parts:
+ * - dialog: The dialog's internal <dialog> element
+ * - header: The dialog's header. This element wraps the title and header actions
+ * - header-actions: Optional actions to add to the header
+ * - title: The dialog's title
+ * - close-button: The close button, a <wa-button>
+ * - close-button__base: The close button's exported base part
+ * - body: The dialog's body
+ * - footer: The dialog's footer
+ *
+ * @example
+ * .Dialog::part(dialog) {
+ *   // Custom styles
+ * }
+ */
+.Dialog {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Dialog.css';
+
+/**
+ * Dialogs display important prompts and information
+ *
+ * @example
+ * // Using ref methods
+ * const dialogRef = React.useRef(null);
+ * <Dialog ref={dialogRef} label="Dialog Title">
+ *   <p>Dialog content</p>
+ *   <div slot="footer">
+ *     <Button data-dialog="close">Close</Button>
+ *   </div>
+ * </Dialog>
+ * dialogRef.current?.show();
+ *
+ * // Using open prop (recommended)
+ * const [open, setOpen] = React.useState(false);
+ * <Dialog open={open} label="Dialog Title" onHide={() => setOpen(false)}>
+ *   <p>Dialog content</p>
+ * </Dialog>
+ *
+ * @param {Object} props
+ * @param {boolean} [props.open] - Indicates whether or not the dialog is open
+ * @param {string} props.label - The dialog's label as displayed in the header
+ * @param {boolean} [props['without-header']] - Disables the header and removes the default close button
+ * @param {boolean} [props['light-dismiss']] - When enabled, the dialog will be closed when the user clicks outside of it
+ * @param {function} [props.onShow] - Event fired when the dialog is shown
+ * @param {function} [props.onAfterShow] - Event fired after the dialog is shown
+ * @param {function} [props.onHide] - Event fired when the dialog is about to hide
+ * @param {function} [props.onAfterHide] - Event fired after the dialog is hidden
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.children] - Dialog content
+ * @param {React.Ref} ref - Ref with methods: show(), hide(), requestClose()
+ */
+export const Dialog = React.forwardRef(
+  ({ children, className, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const dialogRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          if (dialogRef.current && typeof dialogRef.current.show === 'function') {
+            dialogRef.current.show();
+          }
+        },
+        hide: () => {
+          // hide is an alias for requestClose for consistency with other components
+          if (dialogRef.current && typeof dialogRef.current.requestClose === 'function') {
+            dialogRef.current.requestClose();
+          }
+        },
+        requestClose: () => {
+          if (dialogRef.current && typeof dialogRef.current.requestClose === 'function') {
+            dialogRef.current.requestClose();
+          }
+        },
+        get element() {
+          return dialogRef.current;
+        },
+      }),
+      []
+    );
+
+    // Setup event listeners
+    React.useEffect(() => {
+      const el = dialogRef.current;
+      if (!el) return;
+
+      const handleShow = (e) => {
+        if (onShow) onShow(e);
+      };
+
+      const handleAfterShow = (e) => {
+        if (onAfterShow) onAfterShow(e);
+      };
+
+      const handleHide = (e) => {
+        if (onHide) onHide(e);
+      };
+
+      const handleAfterHide = (e) => {
+        if (onAfterHide) onAfterHide(e);
+      };
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide]);
+
+    return (
+      <wa-dialog
+        ref={dialogRef}
+        class={clsx('Dialog', className)}
+        {...props}
+      >
+        {children}
+      </wa-dialog>
+    );
+  }
+);
+
+Dialog.displayName = 'Dialog';

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Dialog } from './Dialog';
+
+describe('Dialog', () => {
+  it('renders without crashing', () => {
+    render(<Dialog label="Test Dialog">Dialog content</Dialog>);
+    const dialog = screen.getByText('Dialog content');
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Dialog label="Test" className="custom-class">
+        Test
+      </Dialog>
+    );
+    const dialog = container.querySelector('wa-dialog');
+    expect(dialog?.className).toContain('custom-class');
+  });
+
+  it('forwards ref correctly', () => {
+    const ref = React.createRef();
+    render(<Dialog ref={ref} label="Test">Test</Dialog>);
+    expect(ref.current).toHaveProperty('show');
+    expect(ref.current).toHaveProperty('hide');
+    expect(ref.current).toHaveProperty('requestClose');
+  });
+});

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

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

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

@@ -0,0 +1,165 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Dialog.css';
+
+/**
+ * Dialogs display important prompts and information
+ *
+ * @example
+ * ```tsx
+ * // Using open prop (recommended)
+ * import { useState } from 'react';
+ * import { Dialog } from './components/ui';
+ * import { Button } from './components/ui';
+ * 
+ * function App() {
+ *   const [open, setOpen] = useState(false);
+ *   
+ *   return (
+ *     <>
+ *       <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+ *       <Dialog open={open} label="Dialog Title" onHide={() => setOpen(false)}>
+ *         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ *         <Button slot="footer" variant="brand" onClick={() => setOpen(false)}>
+ *           Close
+ *         </Button>
+ *       </Dialog>
+ *     </>
+ *   );
+ * }
+ *
+ * // Using ref methods (alternative)
+ * import { useRef } from 'react';
+ * const dialogRef = useRef<DialogRef>(null);
+ * 
+ * <Button onClick={() => dialogRef.current?.show()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef} label="Dialog Title">
+ *   <p>Dialog content</p>
+ *   <Button slot="footer" variant="brand" onClick={() => dialogRef.current?.hide()}>
+ *     Close
+ *   </Button>
+ * </Dialog>
+ * ```
+ */
+export interface DialogProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'dir'> {
+  /** Indicates whether or not the dialog is open */
+  open?: boolean;
+  /** The dialog's label as displayed in the header */
+  label: string;
+  /** Disables the header and removes the default close button */
+  'without-header'?: boolean;
+  /** When enabled, the dialog will be closed when the user clicks outside of it */
+  'light-dismiss'?: boolean;
+  /** Event fired when the dialog is shown */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after the dialog is shown */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when the dialog is about to hide */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after the dialog is hidden */
+  onAfterHide?: (event: CustomEvent) => void;
+}
+
+export interface DialogRef {
+  show: () => void;
+  hide: () => void;
+  requestClose: () => void;
+  element: HTMLElement | null;
+}
+
+export const Dialog = forwardRef<DialogRef, DialogProps>(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const dialogRef = useRef<HTMLElement & {
+      show?: () => void;
+      requestClose?: () => void;
+      open?: boolean;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          if (dialogRef.current && typeof dialogRef.current.show === 'function') {
+            dialogRef.current.show();
+          }
+        },
+        hide: () => {
+          // hide is an alias for requestClose for consistency with other components
+          if (dialogRef.current && typeof dialogRef.current.requestClose === 'function') {
+            dialogRef.current.requestClose();
+          }
+        },
+        requestClose: () => {
+          if (dialogRef.current && typeof dialogRef.current.requestClose === 'function') {
+            dialogRef.current.requestClose();
+          }
+        },
+        get element() {
+          return dialogRef.current;
+        },
+      }),
+      []
+    );
+
+    // Sync open prop with dialog element
+    useEffect(() => {
+      const el = dialogRef.current;
+      if (!el || open === undefined) return;
+
+      // Sync open prop with element state
+      const isOpen = el.open ?? false;
+      if (open && !isOpen) {
+        el.show?.();
+      } else if (!open && isOpen) {
+        el.requestClose?.();
+      }
+    }, [open]);
+
+    // Setup event listeners
+    useEffect(() => {
+      const el = dialogRef.current;
+      if (!el) return;
+
+      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);
+      };
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide]);
+
+    return (
+      <wa-dialog
+        ref={dialogRef}
+        class={clsx('Dialog', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-dialog>
+    );
+  }
+);
+
+Dialog.displayName = 'Dialog';

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

@@ -0,0 +1,21 @@
+/**
+ * Divider Component Styles
+ * Documentation: https://webawesome.com/docs/components/divider
+ *
+ * CSS Custom Properties:
+ * - --color: The color of the divider
+ * - --width: The width of the divider
+ * - --spacing: The spacing of the divider
+ *
+ * CSS Parts:
+ * (No CSS parts defined for this component)
+ *
+ * @example
+ * .Divider {
+ *   --color: #ccc;
+ *   --width: 2px;
+ * }
+ */
+.Divider {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Divider.css';
+
+/**
+ * @typedef {Object} DividerProps
+ * @property {'horizontal' | 'vertical'} [orientation] - Sets the divider's orientation
+ */
+
+export const Divider = React.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    return (
+      <wa-divider
+        ref={ref}
+        class={clsx('Divider', className)}
+        orientation={orientation}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

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

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Divider } from './Divider';
+
+describe('Divider', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Divider />);
+    expect(container.querySelector('wa-divider')).toBeInTheDocument();
+  });
+
+  it('applies orientation prop', () => {
+    const { container } = render(<Divider orientation="vertical" />);
+    expect(container.querySelector('wa-divider')).toHaveAttribute('orientation', 'vertical');
+  });
+});

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

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { Divider } from './Divider';
+
+describe('Divider', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Divider />);
+    expect(container.querySelector('wa-divider')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Divider className="custom-class" />);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Divider.css';
+
+export interface DividerProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Sets the divider's orientation */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Divider = forwardRef<HTMLElement, DividerProps>(
+  ({ className, orientation, ...props }, ref) => {
+    return (
+      <wa-divider
+        ref={ref}
+        class={clsx('Divider', className)}
+        orientation={orientation}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

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

@@ -0,0 +1,28 @@
+/**
+ * Drawer Component Styles
+ * Documentation: https://webawesome.com/docs/components/drawer
+ *
+ * CSS Custom Properties:
+ * - --spacing: The amount of space around and between the drawer's content
+ * - --size: The preferred size of the drawer
+ * - --show-duration: The animation duration when showing the drawer (Default: 200ms)
+ * - --hide-duration: The animation duration when hiding the drawer (Default: 200ms)
+ *
+ * CSS Parts:
+ * - dialog: The drawer's internal <dialog> element
+ * - header: The drawer's header. This element wraps the title and header actions
+ * - header-actions: Optional actions to add to the header
+ * - title: The drawer's title
+ * - close-button: The close button, a <wa-button>
+ * - close-button__base: The close button's exported base part
+ * - body: The drawer's body
+ * - footer: The drawer's footer
+ *
+ * @example
+ * .Drawer::part(dialog) {
+ *   // Custom styles
+ * }
+ */
+.Drawer {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Drawer.css';
+
+/**
+ * @typedef {Object} DrawerRef
+ * @property {() => void} show
+ * @property {() => void} hide
+ * @property {HTMLElement | null} element
+ */
+
+export const Drawer = React.forwardRef(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const drawerRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => drawerRef.current?.show?.(),
+        hide: () => drawerRef.current?.hide?.(),
+        get element() {
+          return drawerRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = drawerRef.current;
+      if (!el || open === undefined) return;
+
+      const isOpen = el.open ?? false;
+      if (open && !isOpen) {
+        el.show?.();
+      } else if (!open && isOpen) {
+        el.hide?.();
+      }
+    }, [open]);
+
+    React.useEffect(() => {
+      const el = drawerRef.current;
+      if (!el) return;
+
+      const handleShow = (e) => onShow?.(e);
+      const handleAfterShow = (e) => onAfterShow?.(e);
+      const handleHide = (e) => onHide?.(e);
+      const handleAfterHide = (e) => onAfterHide?.(e);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide]);
+
+    return (
+      <wa-drawer
+        ref={drawerRef}
+        class={clsx('Drawer', className)}
+        {...props}
+      >
+        {children}
+      </wa-drawer>
+    );
+  }
+);
+
+Drawer.displayName = 'Drawer';