rizzo-css 0.0.62 → 0.0.63

package/scaffold/react/BackToTop.tsx

@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
+
+export interface BackToTopProps extends HTMLAttributes<HTMLDivElement> {
+  threshold?: number;
+  label?: string;
+  className?: string;
+}
+
+export function BackToTop({
+  threshold = 400,
+  label = 'Back to top',
+  className = '',
+  ...rest
+}: BackToTopProps) {
+  const [visible, setVisible] = useState(false);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    const handler = () => setVisible(window.scrollY > threshold);
+    window.addEventListener('scroll', handler, { passive: true });
+    handler();
+    return () => window.removeEventListener('scroll', handler);
+  }, [threshold]);
+
+  const wrapperClass = ['back-to-top', className].filter(Boolean).join(' ').trim();
+
+  return (
+    <div
+      className={wrapperClass}
+      data-back-to-top
+      data-visible={visible ? 'true' : 'false'}
+      aria-hidden={visible ? 'false' : 'true'}
+      {...rest}
+    >
+      <button type="button" className="back-to-top__btn" aria-label={label} onClick={scrollToTop}>
+        <span className="back-to-top__icon" aria-hidden="true">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="icon"
+            aria-hidden="true"
+          >
+            <path d="m18 15-6-6-6 6" />
+          </svg>
+        </span>
+      </button>
+    </div>
+  );
+}
+
+export default BackToTop;

package/scaffold/react/Badge.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  pill?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Badge({
+  variant = 'primary',
+  size = 'md',
+  pill = false,
+  className = '',
+  children,
+  ...rest
+}: BadgeProps) {
+  const classes = [
+    'badge',
+    `badge--${variant}`,
+    `badge--${size}`,
+    pill ? 'badge--pill' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <span className={classes} {...rest}>
+      {children}
+    </span>
+  );
+}
+
+export default Badge;

package/scaffold/react/Breadcrumb.tsx

@@ -0,0 +1,81 @@
+import type { HTMLAttributes } from 'react';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export type BreadcrumbSeparator = 'chevron' | 'slash' | 'arrow' | string;
+
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+  items: BreadcrumbItem[];
+  separator?: BreadcrumbSeparator;
+  className?: string;
+}
+
+export function Breadcrumb({
+  items,
+  separator = 'chevron',
+  className = '',
+  ...rest
+}: BreadcrumbProps) {
+  const separatorVariant =
+    separator === 'slash'
+      ? 'breadcrumb--slash'
+      : separator === 'arrow'
+        ? 'breadcrumb--arrow'
+        : 'breadcrumb--chevron';
+  const classes = ['breadcrumb', separatorVariant, className].filter(Boolean).join(' ').trim();
+  const separatorChar =
+    separator === 'slash' ? '/' : separator === 'arrow' ? '›' : typeof separator === 'string' ? separator : '›';
+  const useIcon = separator === 'chevron';
+
+  return (
+    <nav className={classes} aria-label="Breadcrumb" {...rest}>
+      <ol className="breadcrumb__list">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          const isCurrent = isLast || !item.href;
+          return (
+            <li
+              key={index}
+              className={`breadcrumb__item ${isCurrent ? 'breadcrumb__item--current' : ''}`.trim()}
+            >
+              {isCurrent ? (
+                <span className="breadcrumb__current" aria-current="page">
+                  {item.label}
+                </span>
+              ) : (
+                <a className="breadcrumb__link" href={item.href}>
+                  {item.label}
+                </a>
+              )}
+              {!isLast && (
+                <span className="breadcrumb__separator" aria-hidden="true">
+                  {useIcon ? (
+                    <svg
+                      className="breadcrumb__separator-icon"
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      aria-hidden="true"
+                    >
+                      <path d="M6 9l6 6 6-6" />
+                    </svg>
+                  ) : (
+                    separatorChar
+                  )}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+export default Breadcrumb;

package/scaffold/react/Button.tsx

@@ -0,0 +1,40 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export type ButtonVariant =
+  | 'default'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'outline';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Button component using Rizzo CSS BEM classes (btn, btn-primary, etc.).
+ * Same API and markup as Astro/Svelte Button for design system parity.
+ */
+export function Button({
+  variant = 'default',
+  type = 'button',
+  disabled = false,
+  className = '',
+  children,
+  ...rest
+}: ButtonProps) {
+  const variantClass = variant === 'default' ? '' : `btn-${variant}`;
+  const classes = ['btn', variantClass, className].filter(Boolean).join(' ');
+
+  return (
+    <button type={type} disabled={disabled} className={classes} {...rest}>
+      {children}
+    </button>
+  );
+}
+
+export default Button;

package/scaffold/react/ButtonGroup.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ButtonGroup({
+  orientation = 'horizontal',
+  className = '',
+  children,
+  ...rest
+}: ButtonGroupProps) {
+  const orientationClass = orientation === 'vertical' ? 'button-group--vertical' : '';
+  const classes = ['button-group', orientationClass, className].filter(Boolean).join(' ').trim();
+  return (
+    <div className={classes} role="group" {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export default ButtonGroup;

package/scaffold/react/Card.tsx

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Card({
+  variant = 'default',
+  className = '',
+  children,
+  ...rest
+}: CardProps) {
+  const variantClass = variant !== 'default' ? `card--${variant}` : '';
+  const classes = ['card', variantClass, className].filter(Boolean).join(' ').trim();
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export default Card;

package/scaffold/react/Checkbox.tsx

@@ -0,0 +1,40 @@
+import type { InputHTMLAttributes } from 'react';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  ariaDescribedby?: string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function Checkbox({
+  id,
+  name,
+  value,
+  checked = false,
+  required = false,
+  disabled = false,
+  className = '',
+  ariaDescribedby,
+  ariaLabel,
+  onChange,
+  ...rest
+}: CheckboxProps) {
+  return (
+    <input
+      type="checkbox"
+      id={id}
+      name={name}
+      value={value}
+      checked={checked}
+      required={required}
+      disabled={disabled}
+      className={className}
+      aria-describedby={ariaDescribedby}
+      aria-label={ariaLabel}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+}
+
+export default Checkbox;

package/scaffold/react/Collapsible.tsx

@@ -0,0 +1,58 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useState } from 'react';
+
+export interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  defaultOpen?: boolean;
+  triggerLabel?: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Collapsible({
+  id: idProp,
+  defaultOpen = false,
+  triggerLabel = 'Toggle',
+  children,
+  className = '',
+  ...rest
+}: CollapsibleProps) {
+  const id = idProp ?? `collapsible-${Math.random().toString(36).slice(2, 9)}`;
+  const triggerId = `${id}-trigger`;
+  const panelId = `${id}-panel`;
+  const [open, setOpen] = useState(defaultOpen);
+
+  const triggerClasses = ['collapsible__trigger', open ? 'collapsible__trigger--open' : ''].filter(Boolean).join(' ');
+  const panelClasses = ['collapsible__panel', open ? 'collapsible__panel--open' : ''].filter(Boolean).join(' ');
+
+  return (
+    <div className={`collapsible ${className}`.trim()} data-collapsible id={id} {...rest}>
+      <button
+        type="button"
+        className={triggerClasses}
+        id={triggerId}
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span className="collapsible__trigger-label">{triggerLabel}</span>
+        <span className="collapsible__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" strokeLinecap="round" strokeLinejoin="round">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </span>
+      </button>
+      <div
+        className={panelClasses}
+        id={panelId}
+        role="region"
+        aria-labelledby={triggerId}
+        hidden={!open}
+      >
+        <div className="collapsible__panel-inner">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export default Collapsible;

package/scaffold/react/ContextMenu.tsx

@@ -0,0 +1,67 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useState, useRef, useEffect } from 'react';
+
+export interface ContextMenuProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  children?: ReactNode;
+  trigger?: ReactNode;
+  className?: string;
+}
+
+export function ContextMenu({
+  id: idProp,
+  children,
+  trigger,
+  className = '',
+  ...rest
+}: ContextMenuProps) {
+  const id = idProp ?? `context-menu-${Math.random().toString(36).slice(2, 9)}`;
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setPosition({ x: e.clientX, y: e.clientY });
+    setOpen(true);
+    requestAnimationFrame(() => document.addEventListener('click', closeMenu));
+  };
+
+  const closeMenu = () => {
+    setOpen(false);
+    document.removeEventListener('click', closeMenu);
+  };
+
+  const handleKeydown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') closeMenu();
+  };
+
+  useEffect(() => {
+    if (open && contentRef.current) {
+      contentRef.current.style.left = `${position.x}px`;
+      contentRef.current.style.top = `${position.y}px`;
+    }
+  }, [open, position]);
+
+  return (
+    <div className={`context-menu ${className}`.trim()} data-context-menu id={id} {...rest}>
+      <div data-context-menu-trigger onContextMenu={handleContextMenu}>
+        {trigger}
+      </div>
+      <div
+        ref={contentRef}
+        className={`context-menu__content ${open ? 'context-menu__content--open' : ''}`.trim()}
+        role="menu"
+        aria-hidden={!open}
+        hidden={!open}
+        data-context-menu-content
+        id={`${id}-content`}
+        onKeyDown={handleKeydown}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default ContextMenu;

package/scaffold/react/CopyToClipboard.tsx

@@ -0,0 +1,128 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { useState } from 'react';
+
+export interface CopyToClipboardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  value: string;
+  label?: string;
+  format?: string;
+  iconOnly?: boolean;
+  buttonLabel?: string;
+  className?: string;
+  id?: string;
+}
+
+export function CopyToClipboard({
+  value,
+  label,
+  format,
+  iconOnly = false,
+  buttonLabel,
+  className = '',
+  id: idProp,
+  onClick,
+  onKeyDown,
+  ...rest
+}: CopyToClipboardProps) {
+  const [copied, setCopied] = useState(false);
+  const [feedbackText, setFeedbackText] = useState('');
+  const buttonId = idProp ?? `copy-btn-${Math.random().toString(36).slice(2, 11)}`;
+  const displayText = iconOnly ? (buttonLabel ?? 'Copy') : value;
+  const classes = [
+    'copy-to-clipboard',
+    iconOnly ? 'copy-to-clipboard--icon-only' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  const ariaLabel = copied
+    ? format ? `Copied ${format}!` : 'Copied!'
+    : label ?? (iconOnly ? (buttonLabel ?? 'Copy to clipboard') : `Copy ${value} to clipboard`);
+  const tooltipText = copied
+    ? format ? `Copied ${format}!` : 'Copied!'
+    : label ?? (iconOnly ? (buttonLabel ?? 'Copy') : 'Copy to clipboard');
+
+  const copy = async () => {
+    if (!value) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setFeedbackText(format ? `Copied ${format}!` : 'Copied!');
+      setTimeout(() => {
+        setCopied(false);
+        setFeedbackText('');
+      }, 2000);
+    } catch {
+      const textArea = document.createElement('textarea');
+      textArea.value = value;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-999999px';
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      try {
+        document.execCommand('copy');
+        setCopied(true);
+        setFeedbackText(format ? `Copied ${format}!` : 'Copied!');
+        setTimeout(() => {
+          setCopied(false);
+          setFeedbackText('');
+        }, 2000);
+      } catch {
+        setFeedbackText('Failed to copy');
+      }
+      document.body.removeChild(textArea);
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e);
+    copy();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    onKeyDown?.(e);
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      copy();
+    }
+  };
+
+  return (
+    <span className="tooltip-host" data-tooltip={tooltipText}>
+      <button
+        type="button"
+        className={classes}
+        aria-label={ariaLabel}
+        id={buttonId}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        <span className="copy-to-clipboard__text">{displayText}</span>
+        <span
+          className={`copy-to-clipboard__icon copy-to-clipboard__icon--copy ${copied ? 'copy-to-clipboard__icon--hidden' : ''}`.trim()}
+          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" aria-hidden="true">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        </span>
+        <span
+          className={`copy-to-clipboard__icon copy-to-clipboard__icon--check ${!copied ? 'copy-to-clipboard__icon--hidden' : ''}`.trim()}
+          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" aria-hidden="true">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </span>
+        <span className="copy-to-clipboard__feedback" aria-live="polite">
+          {feedbackText}
+        </span>
+      </button>
+    </span>
+  );
+}
+
+export default CopyToClipboard;

package/scaffold/react/Dashboard.tsx

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface DashboardProps extends HTMLAttributes<HTMLDivElement> {
+  sidebar?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Dashboard({
+  sidebar,
+  children,
+  className = '',
+  ...rest
+}: DashboardProps) {
+  return (
+    <div className={`dashboard ${className}`.trim()} data-dashboard {...rest}>
+      {sidebar && <div className="dashboard__sidebar">{sidebar}</div>}
+      <main className="dashboard__main">{children}</main>
+    </div>
+  );
+}
+
+export default Dashboard;

package/scaffold/react/Divider.tsx

@@ -0,0 +1,47 @@
+import type { HTMLAttributes } from 'react';
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  label?: string;
+  className?: string;
+}
+
+export function Divider({
+  orientation = 'horizontal',
+  label,
+  className = '',
+  ...rest
+}: DividerProps) {
+  const hasLabel = typeof label === 'string' && label.trim().length > 0;
+  const labelText = label?.trim() ?? '';
+  const classes = [
+    'divider',
+    `divider--${orientation}`,
+    hasLabel ? 'divider--labeled' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <div
+      className={classes}
+      role="separator"
+      aria-orientation={orientation}
+      aria-label={labelText || undefined}
+      {...rest}
+    >
+      {hasLabel && orientation === 'horizontal' ? (
+        <>
+          <span className="divider__line" aria-hidden="true" />
+          <span className="divider__label">{labelText}</span>
+          <span className="divider__line" aria-hidden="true" />
+        </>
+      ) : (
+        <span className="divider__line" aria-hidden="true" />
+      )}
+    </div>
+  );
+}
+
+export default Divider;

package/scaffold/react/DocsSidebar.tsx

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface DocsSidebarLink {
+  href: string;
+  label: string;
+  active?: boolean;
+}
+
+export interface DocsSidebarProps extends HTMLAttributes<HTMLElement> {
+  links?: DocsSidebarLink[];
+  children?: ReactNode;
+  className?: string;
+}
+
+const DEFAULT_LINKS: DocsSidebarLink[] = [
+  { href: '/docs', label: 'Overview' },
+  { href: '/docs/getting-started', label: 'Getting started' },
+  { href: '/docs/components', label: 'Components', active: true },
+];
+
+export function DocsSidebar({
+  links = DEFAULT_LINKS,
+  children,
+  className = '',
+  ...rest
+}: DocsSidebarProps) {
+  return (
+    <aside className={`docs-sidebar ${className}`.trim()} {...rest}>
+      <nav className="docs-sidebar__nav" aria-label="Docs">
+        <ul className="docs-sidebar__list">
+          {children ??
+            links.map((link, i) => (
+              <li key={i} className="docs-sidebar__item">
+                <a
+                  href={link.href}
+                  className={`docs-sidebar__link ${link.active ? 'docs-sidebar__link--active' : ''}`.trim()}
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}
+
+export default DocsSidebar;