rizzo-css 0.0.62 → 0.0.63

package/scaffold/react/Modal.tsx

@@ -0,0 +1,149 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
+
+const FOCUSABLE_SELECTORS = [
+  'button:not([disabled])',
+  'a[href]',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS));
+}
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  title?: string;
+  size?: 'sm' | 'md' | 'lg';
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  children?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+}
+
+export function Modal({
+  id: idProp,
+  title = 'Modal',
+  size = 'md',
+  open = false,
+  onOpenChange,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  children,
+  footer,
+  className = '',
+  ...rest
+}: ModalProps) {
+  const modalId = idProp ?? `modal-${Math.random().toString(36).slice(2, 11)}`;
+  const sizeClass = size !== 'md' ? `modal--${size}` : '';
+  const classes = ['modal', sizeClass, className].filter(Boolean).join(' ').trim();
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousActiveRef = useRef<HTMLElement | null>(null);
+
+  const close = useCallback(() => {
+    onOpenChange?.(false);
+    previousActiveRef.current?.focus();
+    previousActiveRef.current = null;
+  }, [onOpenChange]);
+
+  useEffect(() => {
+    if (!open) return;
+    previousActiveRef.current = document.activeElement as HTMLElement | null;
+    const modalEl = modalRef.current;
+    if (!modalEl) return;
+    const focusable = getFocusableElements(modalEl);
+    const closeBtn = modalEl.querySelector<HTMLElement>('[data-modal-close]');
+    const first = focusable[0] ?? closeBtn;
+    first?.focus();
+
+    const keyHandler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && closeOnEscape) {
+        e.preventDefault();
+        close();
+        return;
+      }
+      if (e.key === 'Tab') {
+        const focusableEls = getFocusableElements(modalEl);
+        if (focusableEls.length === 0) return;
+        const firstEl = focusableEls[0];
+        const lastEl = focusableEls[focusableEls.length - 1];
+        const active = document.activeElement as HTMLElement | null;
+        if (e.shiftKey) {
+          if (active === firstEl || !modalEl.contains(active)) {
+            e.preventDefault();
+            lastEl.focus();
+          }
+        } else {
+          if (active === lastEl || !modalEl.contains(active)) {
+            e.preventDefault();
+            firstEl.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  }, [open, closeOnEscape, close]);
+
+  useEffect(() => {
+    if (overlayRef.current) (overlayRef.current as any).inert = !open;
+    if (modalRef.current) (modalRef.current as any).inert = !open;
+  }, [open]);
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (closeOnOverlayClick && e.target === overlayRef.current) close();
+  };
+
+  return (
+    <>
+      <div
+        ref={overlayRef}
+        className="modal__overlay"
+        data-modal-overlay
+        aria-hidden={!open}
+        {...(open ? {} : { inert: true })}
+        {...(!open && { hidden: true })}
+        id={`${modalId}-overlay`}
+        onClick={handleOverlayClick}
+        role="presentation"
+      />
+      <div
+        ref={modalRef}
+        className={classes}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={`${modalId}-title`}
+        aria-hidden={!open}
+        {...(open ? {} : { inert: true })}
+        {...(!open && { hidden: true })}
+        id={modalId}
+        data-modal
+        data-open={open || undefined}
+        {...rest}
+      >
+        <div className="modal__header">
+          <h2 id={`${modalId}-title`} className="modal__title">
+            {title}
+          </h2>
+          <button type="button" className="modal__close" aria-label="Close modal" data-modal-close onClick={close}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M18 6L6 18" />
+              <path d="M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="modal__body">{children}</div>
+        {footer != null && <div className="modal__footer">{footer}</div>}
+      </div>
+    </>
+  );
+}
+
+export default Modal;

package/scaffold/react/Navbar.tsx

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useState, useEffect } from 'react';
+
+export interface NavbarProps extends HTMLAttributes<HTMLElement> {
+  siteName?: string;
+  logo?: string;
+  children?: ReactNode;
+}
+
+export function Navbar({
+  siteName = 'Site',
+  logo,
+  children,
+  className = '',
+  ...rest
+}: NavbarProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    const onClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (target && !(target as Element).closest?.('.navbar')) setMenuOpen(false);
+    };
+    document.addEventListener('keydown', onEscape);
+    const t = setTimeout(() => document.addEventListener('click', onClick), 0);
+    return () => {
+      document.removeEventListener('keydown', onEscape);
+      document.removeEventListener('click', onClick);
+      clearTimeout(t);
+    };
+  }, [menuOpen]);
+
+  return (
+    <nav className={`navbar ${className}`.trim()} role="navigation" aria-label="Main navigation" {...rest}>
+      <div className="navbar__container">
+        <div className="navbar__brand">
+          <a href="/" className="navbar__brand-link">
+            {logo ? (
+              <img src={logo} alt="" className="navbar__logo" />
+            ) : (
+              <span className="navbar__logo" aria-hidden="true">◎</span>
+            )}
+            {siteName}
+          </a>
+        </div>
+        {children && <div className="navbar__actions-desktop">{children}</div>}
+        <button
+          type="button"
+          className="navbar__toggle"
+          aria-label="Toggle menu"
+          aria-expanded={menuOpen}
+          onClick={() => setMenuOpen((o) => !o)}
+        >
+          <span className="navbar__toggle-icon" aria-hidden="true">
+            <span /><span /><span />
+          </span>
+        </button>
+      </div>
+      {menuOpen && (
+        <div className="navbar__mobile" aria-hidden="false">
+          <div className="navbar__mobile-inner">Mobile menu</div>
+        </div>
+      )}
+    </nav>
+  );
+}
+
+export default Navbar;

package/scaffold/react/Pagination.tsx

@@ -0,0 +1,155 @@
+import type { HTMLAttributes } from 'react';
+
+function buildHref(template: string, page: number): string {
+  return template.replace(/\{page\}/g, String(page));
+}
+
+function getPageItems(
+  total: number,
+  current: number,
+  maxVisible: number
+): (number | 'ellipsis')[] {
+  if (total <= 1) return [];
+  if (total <= maxVisible) return Array.from({ length: total }, (_, i) => i + 1);
+  const items: (number | 'ellipsis')[] = [1];
+  const delta = Math.max(0, Math.floor((maxVisible - 2) / 2));
+  const start = Math.max(2, current - delta);
+  const end = Math.min(total - 1, current + delta);
+  if (start > 2) items.push('ellipsis');
+  for (let p = start; p <= end; p++) {
+    if (p !== 1 && p !== total) items.push(p);
+  }
+  if (end < total - 1) items.push('ellipsis');
+  if (total > 1) items.push(total);
+  return items;
+}
+
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+  currentPage: number;
+  totalPages: number;
+  hrefTemplate?: string;
+  showFirstLast?: boolean;
+  maxVisible?: number;
+  className?: string;
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  hrefTemplate = '?page={page}',
+  showFirstLast = true,
+  maxVisible = 5,
+  className = '',
+  ...rest
+}: PaginationProps) {
+  const classes = ['pagination', className].filter(Boolean).join(' ').trim();
+  const pageItems = getPageItems(totalPages, currentPage, maxVisible);
+  const hasPrev = currentPage > 1;
+  const hasNext = currentPage < totalPages;
+
+  return (
+    <nav className={classes} aria-label="Pagination" {...rest}>
+      <ul className="pagination__list">
+        {showFirstLast && totalPages > 1 && (
+          <li className="pagination__item">
+            {hasPrev ? (
+              <a
+                className="pagination__link pagination__link--prev"
+                href={buildHref(hrefTemplate, 1)}
+                aria-label="First page"
+              >
+                First
+              </a>
+            ) : (
+              <span
+                className="pagination__link pagination__link--prev pagination__link--disabled"
+                aria-disabled="true"
+              >
+                First
+              </span>
+            )}
+          </li>
+        )}
+        <li className="pagination__item">
+          {hasPrev ? (
+            <a
+              className="pagination__link pagination__link--prev"
+              href={buildHref(hrefTemplate, currentPage - 1)}
+              aria-label="Previous page"
+            >
+              Previous
+            </a>
+          ) : (
+            <span
+              className="pagination__link pagination__link--prev pagination__link--disabled"
+              aria-disabled="true"
+            >
+              Previous
+            </span>
+          )}
+        </li>
+        {pageItems.map((item, i) => (
+          <li key={i} className="pagination__item">
+            {item === 'ellipsis' ? (
+              <span className="pagination__ellipsis" aria-hidden="true">
+                …
+              </span>
+            ) : item === currentPage ? (
+              <span className="pagination__link pagination__link--current" aria-current="page">
+                {item}
+              </span>
+            ) : (
+              <a
+                className="pagination__link"
+                href={buildHref(hrefTemplate, item)}
+                aria-label={`Page ${item}`}
+              >
+                {item}
+              </a>
+            )}
+          </li>
+        ))}
+        <li className="pagination__item">
+          {hasNext ? (
+            <a
+              className="pagination__link pagination__link--next"
+              href={buildHref(hrefTemplate, currentPage + 1)}
+              aria-label="Next page"
+            >
+              Next
+            </a>
+          ) : (
+            <span
+              className="pagination__link pagination__link--next pagination__link--disabled"
+              aria-disabled="true"
+            >
+              Next
+            </span>
+          )}
+        </li>
+        {showFirstLast && totalPages > 1 && (
+          <li className="pagination__item">
+            {hasNext ? (
+              <a
+                className="pagination__link pagination__link--next"
+                href={buildHref(hrefTemplate, totalPages)}
+                aria-label="Last page"
+              >
+                Last
+              </a>
+            ) : (
+              <span
+                className="pagination__link pagination__link--next pagination__link--disabled"
+                aria-disabled="true"
+              >
+                Last
+              </span>
+            )}
+          </li>
+        )}
+      </ul>
+    </nav>
+  );
+}
+
+export default Pagination;

package/scaffold/react/Popover.tsx

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useState, useEffect } from 'react';
+
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  trigger?: ReactNode;
+  className?: string;
+}
+
+export function Popover({
+  id: idProp,
+  open = false,
+  onOpenChange,
+  children,
+  trigger,
+  className = '',
+  ...rest
+}: PopoverProps) {
+  const id = idProp ?? `popover-${Math.random().toString(36).slice(2, 9)}`;
+
+  const toggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onOpenChange?.(!open);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (target && !document.getElementById(id)?.contains(target)) {
+        onOpenChange?.(false);
+      }
+    };
+    if (open) {
+      const t = setTimeout(() => document.addEventListener('click', handleClickOutside), 0);
+      return () => {
+        clearTimeout(t);
+        document.removeEventListener('click', handleClickOutside);
+      };
+    }
+  }, [open, id, onOpenChange]);
+
+  return (
+    <div className={`popover ${className}`.trim()} data-popover id={id} {...rest}>
+      <span data-popover-trigger onClick={toggle}>
+        {trigger}
+      </span>
+      <div
+        className={`popover__content ${open ? 'popover__content--open' : ''}`.trim()}
+        role="dialog"
+        aria-modal="false"
+        aria-hidden={!open}
+        hidden={!open}
+        data-popover-content
+        id={`${id}-content`}
+        onKeyDown={(e) => e.key === 'Escape' && onOpenChange?.(false)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Popover;

package/scaffold/react/ProgressBar.tsx

@@ -0,0 +1,66 @@
+import type { HTMLAttributes } from 'react';
+
+export type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type ProgressBarSize = 'sm' | 'md' | 'lg';
+
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  max?: number;
+  variant?: ProgressBarVariant;
+  size?: ProgressBarSize;
+  showLabel?: boolean;
+  indeterminate?: boolean;
+  label?: string;
+  className?: string;
+}
+
+export function ProgressBar({
+  value = 0,
+  max = 100,
+  variant = 'primary',
+  size = 'md',
+  showLabel = false,
+  indeterminate = false,
+  label,
+  className = '',
+  ...rest
+}: ProgressBarProps) {
+  const safeMax = max <= 0 ? 100 : max;
+  const clampedValue = indeterminate ? 0 : Math.max(0, Math.min(value, safeMax));
+  const percentage = indeterminate ? 0 : Math.round((clampedValue / safeMax) * 100);
+  const classes = [
+    'progress',
+    `progress--${variant}`,
+    `progress--${size}`,
+    indeterminate ? 'progress--indeterminate' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  const barStyle = indeterminate ? {} : { width: `${percentage}%` };
+
+  return (
+    <div
+      className={classes}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={safeMax}
+      aria-label={label ?? (indeterminate ? 'Loading' : 'Progress')}
+      aria-valuetext={indeterminate ? 'Loading' : undefined}
+      aria-valuenow={indeterminate ? undefined : clampedValue}
+      {...rest}
+    >
+      <div className="progress__track">
+        <div className="progress__bar" style={barStyle} />
+      </div>
+      {showLabel && !indeterminate && (
+        <span className="progress__label" aria-hidden="true">
+          {percentage}%
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default ProgressBar;

package/scaffold/react/Radio.tsx

@@ -0,0 +1,38 @@
+import type { InputHTMLAttributes } from 'react';
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /** Selected value for the radio group. Use the same name for all radios in the group. */
+  group?: string;
+  ariaDescribedby?: string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function Radio({
+  id,
+  name,
+  value = '',
+  required = false,
+  disabled = false,
+  className = '',
+  ariaDescribedby,
+  ariaLabel,
+  ...rest
+}: RadioProps) {
+  return (
+    <input
+      type="radio"
+      id={id}
+      name={name}
+      value={value}
+      required={required}
+      disabled={disabled}
+      className={className}
+      aria-describedby={ariaDescribedby}
+      aria-label={ariaLabel}
+      {...rest}
+    />
+  );
+}
+
+export default Radio;

package/scaffold/react/ResizableHandle.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+
+export interface ResizableHandleProps extends HTMLAttributes<HTMLDivElement> {
+  withHandle?: boolean;
+  className?: string;
+}
+
+export function ResizableHandle({
+  withHandle = false,
+  className = '',
+  ...rest
+}: ResizableHandleProps) {
+  const classes = [
+    'resizable__handle',
+    withHandle ? 'resizable__handle--with-handle' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return <div className={classes} data-resizable-handle {...rest} />;
+}
+
+export default ResizableHandle;

package/scaffold/react/ResizablePane.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ResizablePaneProps extends HTMLAttributes<HTMLDivElement> {
+  defaultSize?: number;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ResizablePane({
+  defaultSize = 50,
+  className = '',
+  children,
+  style,
+  ...rest
+}: ResizablePaneProps) {
+  const size = Math.min(100, Math.max(0, defaultSize));
+  return (
+    <div
+      className={`resizable__pane ${className}`.trim()}
+      data-resizable-pane
+      style={{ flex: `1 1 ${size}%`, ...(style as object) }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ResizablePane;

package/scaffold/react/ResizablePaneGroup.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ResizablePaneGroupProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  direction?: 'horizontal' | 'vertical';
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ResizablePaneGroup({
+  id: idProp,
+  direction = 'horizontal',
+  className = '',
+  children,
+  ...rest
+}: ResizablePaneGroupProps) {
+  const id = idProp ?? `resizable-${Math.random().toString(36).slice(2, 9)}`;
+  const classes = [`resizable__pane-group`, `resizable__pane-group--${direction}`, className]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <div className={classes} id={id} data-resizable-group data-direction={direction} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export default ResizablePaneGroup;

package/scaffold/react/ScrollArea.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'vertical' | 'horizontal';
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ScrollArea({
+  orientation = 'vertical',
+  className = '',
+  children,
+  ...rest
+}: ScrollAreaProps) {
+  const horizontal = orientation === 'horizontal';
+  const classes = ['scroll-area', horizontal ? 'scroll-area--horizontal' : '', className]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <div className={classes} {...rest}>
+      <div className="scroll-area__viewport" tabIndex={0}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default ScrollArea;