rizzo-css 0.0.62 → 0.0.63

package/scaffold/react/Search.tsx

@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
+
+export interface SearchProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export function Search({
+  id: idProp,
+  placeholder = 'Search…',
+  className = '',
+  ...rest
+}: SearchProps) {
+  const id = idProp ?? `search-${Math.random().toString(36).slice(2, 9)}`;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={`search ${className}`.trim()} data-search id={id} {...rest}>
+      <button
+        type="button"
+        className="search__trigger"
+        aria-label="Open search"
+        aria-expanded={open}
+        aria-controls={`${id}-overlay`}
+        onClick={() => setOpen(true)}
+      >
+        <span className="search__trigger-icon" aria-hidden="true">⌘</span>
+        <span className="search__trigger-label">Search</span>
+      </button>
+      <div
+        className={`search__overlay ${open ? 'search__overlay--open' : ''}`.trim()}
+        id={`${id}-overlay`}
+        role="dialog"
+        aria-label="Search"
+        aria-hidden={!open}
+        hidden={!open}
+      >
+        <div className="search__overlay-inner">
+          <input
+            type="search"
+            className="search__input"
+            placeholder={placeholder}
+            autoFocus
+            aria-label="Search"
+          />
+          <button
+            type="button"
+            className="search__close"
+            aria-label="Close search"
+            onClick={() => setOpen(false)}
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Search;

package/scaffold/react/Select.tsx

@@ -0,0 +1,65 @@
+import type { SelectHTMLAttributes, ReactNode } from 'react';
+
+export type SelectSize = 'sm' | 'md' | 'lg';
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  size?: SelectSize;
+  error?: boolean;
+  success?: boolean;
+  ariaDescribedby?: string;
+  ariaInvalid?: boolean | 'true' | 'false';
+  onValueChange?: (value: string) => void;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function Select({
+  id,
+  name,
+  value = '',
+  required = false,
+  disabled = false,
+  size = 'md',
+  error = false,
+  success = false,
+  className = '',
+  ariaDescribedby,
+  ariaInvalid,
+  children,
+  onChange,
+  onValueChange,
+  ...rest
+}: SelectProps) {
+  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<HTMLSelectElement>) => {
+    onChange?.(e);
+    onValueChange?.(e.target.value);
+  };
+
+  return (
+    <select
+      id={id}
+      name={name}
+      value={value}
+      required={required}
+      disabled={disabled}
+      className={classes}
+      aria-invalid={invalid ? 'true' : 'false'}
+      aria-describedby={ariaDescribedby}
+      onChange={handleChange}
+      {...rest}
+    >
+      {children}
+    </select>
+  );
+}
+
+export default Select;

package/scaffold/react/Separator.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react';
+
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+  className?: string;
+}
+
+export function Separator({
+  orientation = 'horizontal',
+  decorative = true,
+  className = '',
+  ...rest
+}: SeparatorProps) {
+  const classes = [
+    'separator',
+    `separator--${orientation}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <div
+      className={classes}
+      role={decorative ? 'none' : 'separator'}
+      aria-orientation={decorative ? undefined : orientation}
+      {...rest}
+    />
+  );
+}
+
+export default Separator;

package/scaffold/react/Settings.tsx

@@ -0,0 +1,60 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useEffect } from 'react';
+
+export interface SettingsProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  title?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Settings({
+  id: idProp,
+  title = 'Settings',
+  open = false,
+  onOpenChange,
+  children,
+  className = '',
+  ...rest
+}: SettingsProps) {
+  const id = idProp ?? `settings-${Math.random().toString(36).slice(2, 9)}`;
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onOpenChange?.(false);
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open, onOpenChange]);
+
+  return (
+    <div
+      className={`settings ${open ? 'settings--open' : ''} ${className}`.trim()}
+      id={id}
+      data-settings
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={`${id}-title`}
+      aria-hidden={!open}
+      hidden={!open}
+      {...rest}
+    >
+      <div className="settings__backdrop" onClick={() => onOpenChange?.(false)} aria-hidden="true" />
+      <div className="settings__panel">
+        <div className="settings__header">
+          <h2 id={`${id}-title`} className="settings__title">{title}</h2>
+          <button type="button" className="settings__close" aria-label="Close settings" onClick={() => onOpenChange?.(false)}>×</button>
+        </div>
+        <div className="settings__body">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export default Settings;

package/scaffold/react/Sheet.tsx

@@ -0,0 +1,86 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useEffect } from 'react';
+
+export type SheetSide = 'top' | 'right' | 'bottom' | 'left';
+
+export interface SheetProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  title?: string;
+  side?: SheetSide;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Sheet({
+  id: idProp,
+  title,
+  side = 'right',
+  open = false,
+  onOpenChange,
+  children,
+  className = '',
+  onKeyDown,
+  ...rest
+}: SheetProps) {
+  const id = idProp ?? `sheet-${Math.random().toString(36).slice(2, 9)}`;
+
+  const close = () => onOpenChange?.(false);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+    if (open) document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    onKeyDown?.(e);
+    if (e.key === 'Escape') close();
+  };
+
+  return (
+    <>
+      <div
+        className={`sheet__overlay ${open ? 'sheet__overlay--open' : ''}`.trim()}
+        data-sheet-overlay
+        aria-hidden={!open}
+        id={`${id}-overlay`}
+        onClick={close}
+        role="presentation"
+      />
+      <div
+        className={`sheet sheet--${side} ${open ? 'sheet--open' : ''} ${className}`.trim()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? `${id}-title` : undefined}
+        aria-hidden={!open}
+        id={id}
+        data-sheet
+        hidden={!open}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        <div className="sheet__content">
+          {title && (
+            <div className="sheet__header">
+              <h2 id={`${id}-title`} className="sheet__title">
+                {title}
+              </h2>
+              <button type="button" className="sheet__close" aria-label="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" aria-hidden="true">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          )}
+          <div className="sheet__body">{children}</div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Sheet;

package/scaffold/react/Skeleton.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'react';
+
+export type SkeletonVariant = 'text' | 'circle' | 'rect' | 'default';
+
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: SkeletonVariant;
+  label?: string;
+  className?: string;
+}
+
+export function Skeleton({
+  variant = 'default',
+  label = 'Loading',
+  className = '',
+  ...rest
+}: SkeletonProps) {
+  const variantClass = variant !== 'default' ? `skeleton--${variant}` : '';
+  const classes = ['skeleton', variantClass, className].filter(Boolean).join(' ').trim();
+  const isDecorative = label === '';
+  return (
+    <span
+      className={classes}
+      role={isDecorative ? undefined : 'status'}
+      aria-label={isDecorative ? undefined : label}
+      aria-busy={isDecorative ? undefined : 'true'}
+      aria-hidden={isDecorative ? 'true' : undefined}
+      {...rest}
+    />
+  );
+}
+
+export default Skeleton;

package/scaffold/react/Slider.tsx

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  id?: string;
+  name?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  disabled?: boolean;
+  ariaLabel?: string;
+  onValueChange?: (value: number) => void;
+  className?: string;
+}
+
+export function Slider({
+  id: idProp,
+  name,
+  min = 0,
+  max = 100,
+  step = 1,
+  value = min,
+  disabled = false,
+  ariaLabel,
+  onValueChange,
+  onChange,
+  className = '',
+  ...rest
+}: SliderProps) {
+  const id = idProp ?? `slider-${Math.random().toString(36).slice(2, 9)}`;
+  const pct = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    const v = parseFloat(e.target.value);
+    if (!Number.isNaN(v)) onValueChange?.(v);
+  };
+
+  return (
+    <div className={`slider ${className}`.trim()} data-slider>
+      <input
+        type="range"
+        id={id}
+        name={name}
+        className="slider__input"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-label={ariaLabel}
+        data-slider-input
+        onChange={handleInput}
+        {...rest}
+      />
+      <div className="slider__track" aria-hidden="true">
+        <div className="slider__fill" data-slider-fill style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  );
+}
+
+export default Slider;

package/scaffold/react/SoundEffects.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { Switch } from './Switch';
+
+export function SoundEffects() {
+  const [on, setOn] = useState(false);
+  return (
+    <div className="sound-effects" data-sound-effects>
+      <Switch
+        label="Play sound on click"
+        checked={on}
+        onCheckedChange={setOn}
+      />
+    </div>
+  );
+}

package/scaffold/react/Spinner.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'react';
+
+export type SpinnerVariant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: SpinnerSize;
+  variant?: SpinnerVariant;
+  label?: string;
+  className?: string;
+}
+
+export function Spinner({
+  size = 'md',
+  variant = 'primary',
+  label = 'Loading',
+  className = '',
+  ...rest
+}: SpinnerProps) {
+  const classes = [
+    'spinner',
+    `spinner--${size}`,
+    `spinner--${variant}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <span className={classes} role="status" aria-label={label} {...rest}>
+      <span className="spinner__ring" aria-hidden="true" />
+    </span>
+  );
+}
+
+export default Spinner;

package/scaffold/react/Switch.tsx

@@ -0,0 +1,52 @@
+import type { InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  id?: string;
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  label?: string;
+  onCheckedChange?: (checked: boolean) => void;
+  className?: string;
+}
+
+export function Switch({
+  id: idProp,
+  name,
+  checked = false,
+  disabled = false,
+  label,
+  onCheckedChange,
+  onChange,
+  className = '',
+  ...rest
+}: SwitchProps) {
+  const id = idProp ?? `switch-${Math.random().toString(36).slice(2, 11)}`;
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    onCheckedChange?.(e.target.checked);
+  };
+  const labelProps: LabelHTMLAttributes<HTMLLabelElement> = { htmlFor: id, className: `switch ${className}`.trim() };
+  return (
+    <label {...labelProps}>
+      <input
+        type="checkbox"
+        id={id}
+        name={name}
+        checked={checked}
+        disabled={disabled}
+        className="switch__input"
+        role="switch"
+        aria-checked={checked}
+        onChange={handleChange}
+        {...rest}
+      />
+      <span className="switch__track" aria-hidden="true">
+        <span className="switch__thumb" />
+      </span>
+      {label && <span className="switch__label">{label}</span>}
+    </label>
+  );
+}
+
+export default Switch;

package/scaffold/react/Table.tsx

@@ -0,0 +1,178 @@
+import type { HTMLAttributes } from 'react';
+import { useState, useMemo } from 'react';
+
+export interface TableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  type?: 'string' | 'number';
+}
+
+export interface TableProps extends HTMLAttributes<HTMLDivElement> {
+  columns: TableColumn[];
+  data: Record<string, string | number>[];
+  caption?: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterPlaceholder?: string;
+  striped?: boolean;
+  className?: string;
+}
+
+export function Table({
+  columns,
+  data,
+  caption,
+  sortable = true,
+  filterable = false,
+  filterPlaceholder = 'Filter table…',
+  striped = true,
+  className = '',
+  ...rest
+}: TableProps) {
+  const tableId = `table-${Math.random().toString(36).slice(2, 11)}`;
+  const [sortColumnIndex, setSortColumnIndex] = useState<number | null>(null);
+  const [sortDirection, setSortDirection] = useState<'ascending' | 'descending'>('ascending');
+  const [filterQuery, setFilterQuery] = useState('');
+
+  const filteredData = useMemo(() => {
+    if (!filterable || !filterQuery.trim()) return data;
+    const q = filterQuery.trim().toLowerCase();
+    return data.filter((row) =>
+      columns.some((col) => String(row[col.key] ?? '').toLowerCase().includes(q))
+    );
+  }, [data, columns, filterable, filterQuery]);
+
+  const sortedData = useMemo(() => {
+    if (!sortable || sortColumnIndex === null) return filteredData;
+    const col = columns[sortColumnIndex];
+    const type = col?.type ?? 'string';
+    const dir = sortDirection === 'ascending' ? 1 : -1;
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[col.key];
+      const bVal = b[col.key];
+      if (type === 'number') {
+        const aNum = parseFloat(String(aVal).replace(/[^0-9.-]/g, '')) || 0;
+        const bNum = parseFloat(String(bVal).replace(/[^0-9.-]/g, '')) || 0;
+        return dir * (aNum - bNum);
+      }
+      const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+      return dir * cmp;
+    });
+  }, [filteredData, columns, sortable, sortColumnIndex, sortDirection]);
+
+  function getSortState(colIndex: number): 'none' | 'ascending' | 'descending' {
+    if (sortColumnIndex !== colIndex) return 'none';
+    return sortDirection;
+  }
+
+  function handleSort(colIndex: number) {
+    if (sortColumnIndex === colIndex) {
+      setSortDirection((d) => (d === 'ascending' ? 'descending' : 'ascending'));
+    } else {
+      setSortColumnIndex(colIndex);
+      setSortDirection('ascending');
+    }
+  }
+
+  const classes = [
+    'table',
+    striped ? 'table--striped' : '',
+    sortable ? 'table--sortable' : '',
+    filterable ? 'table--filterable' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+
+  return (
+    <div
+      className={classes}
+      data-table-id={tableId}
+      data-table-sortable={sortable ? 'true' : undefined}
+      data-table-filterable={filterable ? 'true' : undefined}
+      {...rest}
+    >
+      {filterable && (
+        <div className="table__filter-wrap">
+          <label htmlFor={`${tableId}-filter`} className="sr-only">
+            Filter table
+          </label>
+          <span className="table__filter-icon" aria-hidden="true">
+            <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" className="table__filter-icon-svg icon" aria-hidden="true">
+              <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
+            </svg>
+          </span>
+          <input
+            type="search"
+            id={`${tableId}-filter`}
+            className="table__filter"
+            placeholder={filterPlaceholder}
+            aria-controls={tableId}
+            data-table-filter
+            autoComplete="off"
+            value={filterQuery}
+            onChange={(e) => setFilterQuery(e.target.value)}
+          />
+        </div>
+      )}
+      <div className="table__wrapper">
+        <table className="table__table" id={tableId}>
+          {caption && <caption className="table__caption">{caption}</caption>}
+          <thead className="table__head">
+            <tr className="table__row">
+              {columns.map((col, i) => {
+                const canSort = sortable && col.sortable !== false;
+                return (
+                  <th
+                    key={col.key}
+                    className="table__cell table__cell--head"
+                    scope="col"
+                    data-column-index={i}
+                    data-sortable={canSort ? 'true' : undefined}
+                    data-type={col.type ?? 'string'}
+                    aria-sort={canSort ? getSortState(i) : undefined}
+                  >
+                    {canSort ? (
+                      <button
+                        type="button"
+                        className="table__sort-trigger"
+                        data-column-index={i}
+                        aria-label={`Sort by ${col.label}`}
+                        onClick={() => handleSort(i)}
+                      >
+                        <span className="table__cell-content">{col.label}</span>
+                        <span className="table__sort-icon" aria-hidden="true">
+                          <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" className="table__sort-icon-svg icon" aria-hidden="true">
+                            <path d="m7 15 5 5 5-5" />
+                            <path d="m7 9 5-5 5 5" />
+                          </svg>
+                        </span>
+                      </button>
+                    ) : (
+                      <span className="table__cell-content">{col.label}</span>
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody className="table__body">
+            {sortedData.map((row, rowIndex) => (
+              <tr key={rowIndex} className="table__row" data-row-index={rowIndex}>
+                {columns.map((col) => (
+                  <td key={col.key} className="table__cell" data-column-key={col.key}>
+                    {row[col.key] ?? ''}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default Table;