rizzo-css 0.0.62 → 0.0.63

package/scaffold/react/Dropdown.tsx

@@ -0,0 +1,256 @@
+import type { ReactNode } from 'react';
+import { useState, useRef, useEffect } from 'react';
+
+export interface MenuItem {
+  label: string;
+  value?: string;
+  href?: string;
+  onClick?: (value: string) => void;
+  disabled?: boolean;
+  separator?: boolean;
+  submenu?: MenuItem[];
+}
+
+export interface DropdownProps {
+  trigger: string;
+  items: MenuItem[];
+  id?: string;
+  className?: string;
+  position?: 'left' | 'right';
+  align?: 'start' | 'end';
+}
+
+export function Dropdown({
+  trigger,
+  items,
+  id: idProp,
+  className = '',
+  position = 'left',
+  align = 'start',
+}: DropdownProps) {
+  const dropdownId = idProp ?? `dropdown-${Math.random().toString(36).slice(2, 11)}`;
+  const menuId = `${dropdownId}-menu`;
+  const triggerId = `${dropdownId}-trigger`;
+  const [open, setOpen] = useState(false);
+  const [openSubmenuIndex, setOpenSubmenuIndex] = useState<number | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const closeMenu = () => {
+    setOpen(false);
+    setOpenSubmenuIndex(null);
+  };
+
+  const toggleSubmenu = (index: number) => {
+    setOpenSubmenuIndex((prev) => (prev === index ? null : index));
+  };
+
+  const handleItemClick = (item: MenuItem, e: React.MouseEvent) => {
+    if (item.separator || item.disabled) return;
+    if (item.submenu?.length) {
+      e.preventDefault();
+      return;
+    }
+    if (item.href) window.location.href = item.href;
+    item.onClick?.(item.value ?? item.label);
+    closeMenu();
+  };
+
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (!open) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeMenu();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKeydown);
+    return () => document.removeEventListener('keydown', handleKeydown);
+  }, [open]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        menuRef.current &&
+        triggerRef.current &&
+        !menuRef.current.contains(e.target as Node) &&
+        !triggerRef.current.contains(e.target as Node)
+      ) {
+        closeMenu();
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  const classes = ['dropdown', className].filter(Boolean).join(' ').trim();
+  const menuClasses = `dropdown__menu dropdown__menu--${position} dropdown__menu--${align} ${open ? 'dropdown__menu--open' : ''}`.trim();
+
+  return (
+    <div className={classes} data-dropdown={dropdownId}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className="dropdown__trigger"
+        id={triggerId}
+        aria-expanded={open}
+        aria-haspopup="true"
+        aria-controls={menuId}
+        aria-label={trigger}
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setOpen((o) => !o);
+          }
+          if (e.key === 'ArrowDown' && !open) {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+      >
+        <span className="dropdown__trigger-text">{trigger}</span>
+        <span className="dropdown__icon" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </span>
+      </button>
+      <div
+        ref={menuRef}
+        className={menuClasses}
+        id={menuId}
+        role="menu"
+        aria-labelledby={triggerId}
+        aria-label={`${trigger} menu`}
+        aria-orientation="vertical"
+        aria-hidden={!open}
+        tabIndex={-1}
+      >
+        {items.map((item, index) => {
+          if (item.separator) {
+            return <div key={index} className="dropdown__separator" role="separator" />;
+          }
+          const hasSubmenu = item.submenu && item.submenu.length > 0;
+          const isSubmenuOpen = openSubmenuIndex === index;
+          return (
+            <div
+              key={index}
+              className={`dropdown__item-wrapper ${hasSubmenu ? 'dropdown__item-wrapper--has-submenu' : ''}`.trim()}
+            >
+              {item.href && !hasSubmenu ? (
+                <a
+                  className={`dropdown__item ${item.disabled ? 'dropdown__item--disabled' : ''}`.trim()}
+                  role="menuitem"
+                  href={item.href}
+                  aria-label={item.label}
+                  aria-disabled={item.disabled ? 'true' : undefined}
+                  tabIndex={open ? 0 : -1}
+                  onClick={(e) => {
+                    if (item.disabled) e.preventDefault();
+                    else closeMenu();
+                  }}
+                >
+                  <span>{item.label}</span>
+                </a>
+              ) : (
+                <div
+                  className={`dropdown__item ${item.disabled ? 'dropdown__item--disabled' : ''} ${hasSubmenu ? 'dropdown__item--has-submenu' : ''}`.trim()}
+                  role="menuitem"
+                  aria-disabled={item.disabled ? 'true' : undefined}
+                  aria-expanded={hasSubmenu ? isSubmenuOpen : undefined}
+                  aria-haspopup={hasSubmenu ? 'true' : undefined}
+                  tabIndex={open ? 0 : -1}
+                  onClick={(e) => {
+                    if (item.disabled) return;
+                    if (hasSubmenu) {
+                      e.preventDefault();
+                      toggleSubmenu(index);
+                    } else {
+                      handleItemClick(item, e);
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (item.disabled) return;
+                    if (hasSubmenu && (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight')) {
+                      e.preventDefault();
+                      toggleSubmenu(index);
+                    } else if (!hasSubmenu && (e.key === 'Enter' || e.key === ' ')) {
+                      e.preventDefault();
+                      handleItemClick(item, e as unknown as React.MouseEvent);
+                    }
+                  }}
+                >
+                  <span>{item.label}</span>
+                  {hasSubmenu && (
+                    <span className="dropdown__item-arrow" aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="m9 6 6 6-6 6" />
+                      </svg>
+                    </span>
+                  )}
+                </div>
+              )}
+              {hasSubmenu && item.submenu && (
+                <div
+                  className={`dropdown__submenu ${isSubmenuOpen ? 'dropdown__submenu--open' : ''}`.trim()}
+                  role="menu"
+                  aria-label={`${item.label} submenu`}
+                  aria-hidden={!isSubmenuOpen}
+                >
+                  {item.submenu.map((subItem, i) =>
+                    subItem.separator ? (
+                      <div key={i} className="dropdown__separator" role="separator" />
+                    ) : subItem.href ? (
+                      <a
+                        key={i}
+                        className={`dropdown__item dropdown__submenu-item ${subItem.disabled ? 'dropdown__item--disabled' : ''}`.trim()}
+                        role="menuitem"
+                        href={subItem.href}
+                        aria-label={subItem.label}
+                        aria-disabled={subItem.disabled ? 'true' : undefined}
+                        onClick={(e) => {
+                          if (subItem.disabled) e.preventDefault();
+                          else closeMenu();
+                        }}
+                      >
+                        <span>{subItem.label}</span>
+                      </a>
+                    ) : (
+                      <div
+                        key={i}
+                        className={`dropdown__item dropdown__submenu-item ${subItem.disabled ? 'dropdown__item--disabled' : ''}`.trim()}
+                        role="menuitem"
+                        aria-disabled={subItem.disabled ? 'true' : undefined}
+                        tabIndex={open ? 0 : -1}
+                        onClick={(e) => {
+                          if (!subItem.disabled) {
+                            subItem.onClick?.(subItem.value ?? subItem.label);
+                            closeMenu();
+                          }
+                        }}
+                        onKeyDown={(e) => {
+                          if (subItem.disabled) return;
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            subItem.onClick?.(subItem.value ?? subItem.label);
+                            closeMenu();
+                          }
+                        }}
+                      >
+                        <span>{subItem.label}</span>
+                      </div>
+                    )
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Dropdown;

package/scaffold/react/Empty.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface EmptyProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function Empty({
+  title = 'No results',
+  description,
+  icon,
+  action,
+  className = '',
+  ...rest
+}: EmptyProps) {
+  return (
+    <div className={`empty ${className}`.trim()} {...rest}>
+      {icon && <div className="empty__icon">{icon}</div>}
+      <h3 className="empty__title">{title}</h3>
+      {description && <p className="empty__description">{description}</p>}
+      {action && <div className="empty__action">{action}</div>}
+    </div>
+  );
+}
+
+export default Empty;

package/scaffold/react/FontSwitcher.tsx

@@ -0,0 +1,68 @@
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
+
+export interface FontPair {
+  id: string;
+  label: string;
+}
+
+export interface FontSwitcherProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  fonts?: FontPair[];
+  className?: string;
+}
+
+const DEFAULT_FONTS: FontPair[] = [
+  { id: 'system', label: 'System' },
+  { id: 'sans-mono', label: 'Sans + Mono' },
+];
+
+export function FontSwitcher({
+  id: idProp,
+  fonts = DEFAULT_FONTS,
+  className = '',
+  ...rest
+}: FontSwitcherProps) {
+  const id = idProp ?? `font-switcher-${Math.random().toString(36).slice(2, 9)}`;
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useState(fonts[0]?.id ?? 'system');
+
+  return (
+    <div className={`font-switcher ${className}`.trim()} data-font-switcher id={id} {...rest}>
+      <button
+        type="button"
+        className="font-switcher__trigger"
+        aria-expanded={open}
+        aria-haspopup="true"
+        aria-controls={`${id}-menu`}
+        onClick={() => setOpen((o) => !o)}
+      >
+        {fonts.find((f) => f.id === current)?.label ?? 'Font'}
+      </button>
+      <div
+        className={`font-switcher__menu ${open ? 'font-switcher__menu--open' : ''}`.trim()}
+        id={`${id}-menu`}
+        role="menu"
+        aria-hidden={!open}
+        hidden={!open}
+      >
+        {fonts.map((f) => (
+          <button
+            key={f.id}
+            type="button"
+            role="menuitem"
+            className={`font-switcher__item ${current === f.id ? 'font-switcher__item--active' : ''}`.trim()}
+            onClick={() => {
+              setCurrent(f.id);
+              setOpen(false);
+            }}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default FontSwitcher;

package/scaffold/react/Footer.tsx

@@ -0,0 +1,55 @@
+import type { HTMLAttributes } from 'react';
+
+export interface FooterLink {
+  href: string;
+  label: string;
+}
+
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
+  siteName?: string;
+  year?: number;
+  links?: FooterLink[];
+  className?: string;
+}
+
+export function Footer({
+  siteName = '',
+  year = new Date().getFullYear(),
+  links = [],
+  className = '',
+  ...rest
+}: FooterProps) {
+  const classes = ['footer', className].filter(Boolean).join(' ').trim();
+  return (
+    <footer className={classes} {...rest}>
+      <div className="footer__container">
+        <div className="footer__inner">
+          <p className="footer__copyright">
+            {siteName && (
+              <>
+                <span className="footer__site-name">{siteName}</span>
+                {' · '}
+              </>
+            )}
+            <span className="footer__year">© {year}</span>
+          </p>
+          {links && links.length > 0 && (
+            <nav className="footer__nav" aria-label="Footer">
+              <ul className="footer__links">
+                {links.map((link, i) => (
+                  <li key={i} className="footer__link-item">
+                    <a className="footer__link" href={link.href}>
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

package/scaffold/react/FormGroup.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+
+export interface FormGroupProps {
+  label?: string;
+  labelFor?: string;
+  required?: boolean;
+  help?: string;
+  error?: string;
+  success?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function FormGroup({
+  label,
+  labelFor,
+  required = false,
+  help,
+  error,
+  success,
+  className = '',
+  children,
+}: FormGroupProps) {
+  const errorId = labelFor && error ? `${labelFor}-error` : undefined;
+  const helpId = labelFor && help ? `${labelFor}-help` : undefined;
+
+  return (
+    <div className={`form-group ${className}`.trim()}>
+      {label &&
+        (labelFor ? (
+          <label htmlFor={labelFor} className={`form-group__label ${required ? 'required' : ''}`.trim()}>
+            {label}
+          </label>
+        ) : (
+          <span className={`form-group__label ${required ? 'required' : ''}`.trim()}>{label}</span>
+        ))}
+      {children}
+      {help && (
+        <span id={helpId} className="form-group__help">
+          {help}
+        </span>
+      )}
+      {error && (
+        <span id={errorId} className="form-error" role="alert">
+          {error}
+        </span>
+      )}
+      {success && (
+        <span className="form-success" role="status">
+          {success}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default FormGroup;

package/scaffold/react/HoverCard.tsx

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useState, useRef } from 'react';
+
+export interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  openDelay?: number;
+  closeDelay?: number;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  trigger?: ReactNode;
+  className?: string;
+}
+
+export function HoverCard({
+  id: idProp,
+  openDelay = 200,
+  closeDelay = 100,
+  open = false,
+  onOpenChange,
+  children,
+  trigger,
+  className = '',
+  ...rest
+}: HoverCardProps) {
+  const id = idProp ?? `hover-card-${Math.random().toString(36).slice(2, 9)}`;
+  const openTRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const openContent = () => {
+    if (closeTRef.current) clearTimeout(closeTRef.current);
+    openTRef.current = setTimeout(() => onOpenChange?.(true), openDelay);
+  };
+
+  const closeContent = () => {
+    if (openTRef.current) clearTimeout(openTRef.current);
+    closeTRef.current = setTimeout(() => onOpenChange?.(false), closeDelay);
+  };
+
+  return (
+    <div className={`hover-card ${className}`.trim()} data-hover-card id={id} {...rest}>
+      <div data-hover-card-trigger onMouseEnter={openContent} onMouseLeave={closeContent}>
+        {trigger}
+      </div>
+      <div
+        className={`hover-card__content ${open ? 'hover-card__content--open' : ''}`.trim()}
+        role="dialog"
+        aria-hidden={!open}
+        hidden={!open}
+        data-hover-card-content
+        id={`${id}-content`}
+        onMouseEnter={openContent}
+        onMouseLeave={closeContent}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default HoverCard;

package/scaffold/react/Icons.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface IconsProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Icons({ children, className = '', ...rest }: IconsProps) {
+  return (
+    <div className={`icons-grid ${className}`.trim()} data-icons-grid {...rest}>
+      {children ?? (
+        <>
+          <div className="icons-grid__item"><span className="kbd">Icon 1</span></div>
+          <div className="icons-grid__item"><span className="kbd">Icon 2</span></div>
+          <div className="icons-grid__item"><span className="kbd">Icon 3</span></div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Icons;

package/scaffold/react/Input.tsx

@@ -0,0 +1,69 @@
+import type { InputHTMLAttributes } from 'react';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: InputSize;
+  error?: boolean;
+  success?: boolean;
+  ariaDescribedby?: string;
+  ariaInvalid?: boolean | 'true' | 'false';
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export function Input({
+  type = 'text',
+  id,
+  name,
+  value = '',
+  placeholder,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  autoComplete,
+  size = 'md',
+  error = false,
+  success = false,
+  className = '',
+  ariaDescribedby,
+  ariaInvalid,
+  onChange,
+  onValueChange,
+  ...rest
+}: InputProps) {
+  const sizeClass = size !== 'md' ? `form-input--${size}` : '';
+  const errorClass = error ? 'form-input--error' : '';
+  const successClass = success ? 'form-input--success' : '';
+  const classes = ['form-input', sizeClass, errorClass, successClass, className]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  const invalid = error || ariaInvalid === true || ariaInvalid === 'true';
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    onValueChange?.(e.target.value);
+  };
+
+  return (
+    <input
+      type={type}
+      id={id}
+      name={name}
+      value={value}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled}
+      readOnly={readOnly}
+      autoComplete={autoComplete}
+      className={classes}
+      aria-invalid={invalid ? 'true' : 'false'}
+      aria-describedby={ariaDescribedby}
+      onChange={handleChange}
+      {...rest}
+    />
+  );
+}
+
+export default Input;

package/scaffold/react/Kbd.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Kbd({ className = '', children, ...rest }: KbdProps) {
+  return (
+    <kbd className={`kbd ${className}`.trim()} {...rest}>
+      {children}
+    </kbd>
+  );
+}
+
+export default Kbd;

package/scaffold/react/Label.tsx

@@ -0,0 +1,16 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Label({ className = '', children, ...rest }: LabelProps) {
+  return (
+    <label className={`label ${className}`.trim()} {...rest}>
+      {children}
+    </label>
+  );
+}
+
+export default Label;