rizzo-css 0.0.62 → 0.0.64

package/scaffold/react/Tabs.tsx

@@ -0,0 +1,143 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useState, useCallback, useRef } from 'react';
+
+export interface Tab {
+  id: string;
+  label: string;
+  icon?: string;
+  content?: string;
+}
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  tabs: Tab[];
+  id?: string;
+  defaultTab?: string;
+  variant?: 'default' | 'pills' | 'underline';
+  children?: (activeTabId: string) => ReactNode;
+  className?: string;
+}
+
+export function Tabs({
+  tabs,
+  id: idProp,
+  defaultTab,
+  variant = 'default',
+  children,
+  className = '',
+  ...rest
+}: TabsProps) {
+  const defaultActiveId = defaultTab ?? tabs[0]?.id ?? '';
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const activeTabId = selectedId ?? defaultActiveId;
+  const tabsId = idProp ?? `tabs-${Math.random().toString(36).slice(2, 11)}`;
+  const variantClass = variant !== 'default' ? `tabs--${variant}` : '';
+  const classes = ['tabs', variantClass, className].filter(Boolean).join(' ').trim();
+  const tabListRef = useRef<HTMLDivElement>(null);
+
+  const activateTab = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= tabs.length) return;
+      setSelectedId(tabs[index].id);
+    },
+    [tabs]
+  );
+
+  const handleKeydown = useCallback(
+    (e: React.KeyboardEvent, index: number) => {
+      let targetIndex = index;
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          e.preventDefault();
+          targetIndex = (index + 1) % tabs.length;
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          e.preventDefault();
+          targetIndex = index === 0 ? tabs.length - 1 : index - 1;
+          break;
+        case 'Home':
+          e.preventDefault();
+          targetIndex = 0;
+          break;
+        case 'End':
+          e.preventDefault();
+          targetIndex = tabs.length - 1;
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          activateTab(index);
+          return;
+        default:
+          return;
+      }
+      activateTab(targetIndex);
+      const buttons = tabListRef.current?.querySelectorAll('[role="tab"]');
+      if (buttons && buttons[targetIndex]) (buttons[targetIndex] as HTMLElement).focus();
+    },
+    [tabs.length, activateTab]
+  );
+
+  return (
+    <div className={classes} data-tabs={tabsId} {...rest}>
+      <div className="tabs__list" role="tablist" aria-label="Tabs" ref={tabListRef}>
+        {tabs.map((tab, index) => {
+          const isActive = tab.id === activeTabId;
+          return (
+            <span
+              key={tab.id}
+              className={`tabs__tab ${isActive ? 'tabs__tab--active' : ''}`.trim()}
+              id={`${tabsId}-tab-${tab.id}`}
+              role="tab"
+              tabIndex={isActive ? 0 : -1}
+              aria-selected={isActive ? 'true' : 'false'}
+              aria-controls={`${tabsId}-panel-${tab.id}`}
+              data-tab-id={tab.id}
+              data-tab-index={index}
+              onClick={() => activateTab(index)}
+              onKeyDown={(e) => handleKeydown(e, index)}
+            >
+              {tab.icon && (
+                <img
+                  src={tab.icon}
+                  alt=""
+                  className="tabs__tab-icon"
+                  width={20}
+                  height={20}
+                  loading="lazy"
+                  aria-hidden="true"
+                />
+              )}
+              {tab.label}
+            </span>
+          );
+        })}
+      </div>
+      <div className="tabs__panels-wrapper">
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTabId;
+          return (
+            <div
+              key={tab.id}
+              className={`tabs__panel ${isActive ? 'tabs__panel--active' : ''}`.trim()}
+              id={`${tabsId}-panel-${tab.id}`}
+              role="tabpanel"
+              aria-labelledby={`${tabsId}-tab-${tab.id}`}
+              aria-hidden={isActive ? 'false' : 'true'}
+              data-panel-id={tab.id}
+            >
+              {tab.content ? (
+                <div className="tabs__panel-content" dangerouslySetInnerHTML={{ __html: tab.content }} />
+              ) : isActive && children ? (
+                children(activeTabId)
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Tabs;

package/scaffold/react/Textarea.tsx

@@ -0,0 +1,69 @@
+import type { TextareaHTMLAttributes } from 'react';
+
+export type TextareaSize = 'sm' | 'md' | 'lg';
+
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+  size?: TextareaSize;
+  error?: boolean;
+  success?: boolean;
+  ariaDescribedby?: string;
+  ariaInvalid?: boolean | 'true' | 'false';
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export function Textarea({
+  id,
+  name,
+  value = '',
+  placeholder,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  rows = 4,
+  cols,
+  size = 'md',
+  error = false,
+  success = false,
+  className = '',
+  ariaDescribedby,
+  ariaInvalid,
+  onChange,
+  onValueChange,
+  ...rest
+}: TextareaProps) {
+  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<HTMLTextAreaElement>) => {
+    onChange?.(e);
+    onValueChange?.(e.target.value);
+  };
+
+  return (
+    <textarea
+      id={id}
+      name={name}
+      value={value}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled}
+      readOnly={readOnly}
+      rows={rows}
+      cols={cols}
+      className={classes}
+      aria-invalid={invalid ? 'true' : 'false'}
+      aria-describedby={ariaDescribedby}
+      onChange={handleChange}
+      {...rest}
+    />
+  );
+}
+
+export default Textarea;

package/scaffold/react/ThemeSwitcher.tsx

@@ -0,0 +1,89 @@
+import type { HTMLAttributes } from 'react';
+import { useState, useEffect } from 'react';
+
+export interface ThemeOption {
+  value: string;
+  label: string;
+}
+
+export interface ThemeSwitcherProps extends HTMLAttributes<HTMLDivElement> {
+  idPrefix?: string;
+  themes?: ThemeOption[];
+  className?: string;
+}
+
+const DEFAULT_THEMES: ThemeOption[] = [
+  { value: 'github-dark-classic', label: 'GitHub Dark' },
+  { value: 'github-light', label: 'GitHub Light' },
+  { value: 'system', label: 'System' },
+];
+
+export function ThemeSwitcher({
+  idPrefix = '',
+  themes = DEFAULT_THEMES,
+  className = '',
+  ...rest
+}: ThemeSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useState(themes[0]?.value ?? 'system');
+
+  useEffect(() => {
+    const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null;
+    if (stored) setCurrent(stored);
+  }, []);
+
+  const menuId = idPrefix ? `theme-switcher-${idPrefix}-menu` : 'theme-switcher-menu';
+  const triggerId = idPrefix ? `theme-switcher-${idPrefix}-trigger` : 'theme-switcher-trigger';
+
+  const apply = (value: string) => {
+    if (value === 'system') {
+      document.documentElement.removeAttribute('data-theme');
+      localStorage.removeItem('theme');
+    } else {
+      document.documentElement.setAttribute('data-theme', value);
+      localStorage.setItem('theme', value);
+    }
+    setCurrent(value);
+    setOpen(false);
+  };
+
+  return (
+    <div className={`theme-switcher ${className}`.trim()} data-theme-switcher {...rest}>
+      <button
+        type="button"
+        id={triggerId}
+        className="theme-switcher__trigger"
+        aria-expanded={open}
+        aria-haspopup="true"
+        aria-controls={menuId}
+        aria-label="Theme"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span className="theme-switcher__trigger-icon" aria-hidden="true">◐</span>
+        <span className="theme-switcher__trigger-label">{themes.find((t) => t.value === current)?.label ?? 'Theme'}</span>
+      </button>
+      <div
+        className={`theme-switcher__menu ${open ? 'theme-switcher__menu--open' : ''}`.trim()}
+        id={menuId}
+        role="menu"
+        aria-labelledby={triggerId}
+        aria-hidden={!open}
+        hidden={!open}
+      >
+        {themes.map((t) => (
+          <button
+            key={t.value}
+            type="button"
+            role="menuitem"
+            className={`theme-switcher__item ${current === t.value ? 'theme-switcher__item--active' : ''}`.trim()}
+            onClick={() => apply(t.value)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ThemeSwitcher;

package/scaffold/react/Toast.tsx

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Alert } from './Alert';
+
+export type ToastPosition =
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'top-center'
+  | 'bottom-center';
+
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'success' | 'error' | 'warning' | 'info';
+  dismissible?: boolean;
+  autoDismiss?: number;
+  position?: ToastPosition;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+}
+
+export function Toast({
+  variant = 'info',
+  dismissible = true,
+  autoDismiss = 5000,
+  position = 'top-right',
+  children,
+  className = '',
+  id,
+  ...rest
+}: ToastProps) {
+  const positionClass = `toast--${position}`;
+  const classes = ['toast', positionClass, className].filter(Boolean).join(' ').trim();
+  return (
+    <div className={classes} data-toast-container {...rest}>
+      <Alert variant={variant} dismissible={dismissible} autoDismiss={autoDismiss} id={id}>
+        {children}
+      </Alert>
+    </div>
+  );
+}
+
+export default Toast;

package/scaffold/react/Toggle.tsx

@@ -0,0 +1,45 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Toggle({
+  pressed = false,
+  onPressedChange,
+  disabled = false,
+  type = 'button',
+  value,
+  'aria-label': ariaLabel,
+  className = '',
+  children,
+  onClick,
+  ...rest
+}: ToggleProps) {
+  const pressedClass = pressed ? 'toggle--pressed' : '';
+  const classes = ['toggle', pressedClass, className].filter(Boolean).join(' ').trim();
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e);
+    if (!disabled) onPressedChange?.(!pressed);
+  };
+  return (
+    <button
+      type={type}
+      className={classes}
+      aria-pressed={pressed}
+      disabled={disabled}
+      value={value}
+      aria-label={ariaLabel}
+      data-toggle
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Toggle;

package/scaffold/react/ToggleGroup.tsx

@@ -0,0 +1,34 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
+  type?: 'single' | 'multiple';
+  orientation?: 'horizontal' | 'vertical';
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ToggleGroup({
+  type = 'single',
+  orientation = 'horizontal',
+  className = '',
+  children,
+  ...rest
+}: ToggleGroupProps) {
+  const orientationClass = orientation === 'vertical' ? 'toggle-group--vertical' : '';
+  const role = type === 'single' ? 'radiogroup' : 'group';
+  const classes = ['toggle-group', orientationClass, className].filter(Boolean).join(' ').trim();
+  return (
+    <div
+      className={classes}
+      role={role}
+      aria-label="Toggle group"
+      data-toggle-group
+      data-toggle-type={type}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ToggleGroup;

package/scaffold/react/Tooltip.tsx

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from 'react';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
+  text: string;
+  position?: TooltipPosition;
+  delay?: number;
+  className?: string;
+  id?: string;
+}
+
+export function Tooltip({
+  text,
+  position = 'top',
+  delay = 0,
+  className = '',
+  id: idProp,
+  style,
+  ...rest
+}: TooltipProps) {
+  const tooltipId = idProp ?? `tooltip-${Math.random().toString(36).slice(2, 11)}`;
+  const positionClass = `tooltip--${position}`;
+  const classes = ['tooltip', positionClass, className].filter(Boolean).join(' ').trim();
+  const delayStyle = delay > 0 ? { ['--tooltip-delay' as string]: `${delay}ms`, ...(style as object) } : style;
+  return (
+    <span
+      className={classes}
+      role="tooltip"
+      id={tooltipId}
+      aria-hidden="true"
+      style={delayStyle}
+      {...rest}
+    >
+      {text}
+    </span>
+  );
+}
+
+export default Tooltip;

package/scaffold/react/base/README-RIZZO.md

@@ -0,0 +1,50 @@
+# React + Rizzo CSS
+
+<pre style="font-family: ui-monospace, monospace; font-size: 0.85em; line-height: 1.2;">
+      /\___/\   
+   __(  o o  )__
+     (  =^=  )  
+    _/   ~   \_ 
+   /  \_____/  \
+<span style="color:#c44536"> ____ </span><span style="color:#e07c3e"> ___ _</span><span style="color:#d4a800">______</span><span style="color:#2d9d78">______</span><span style="color:#0052bd">     _</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">__ ____</span>
+<span style="color:#c44536">|  _ \</span><span style="color:#e07c3e">|_ _|_</span><span style="color:#d4a800">_  /__</span><span style="color:#2d9d78">  / _ </span><span style="color:#0052bd">\   / </span><span style="color:#7c3aed">___/ _</span><span style="color:#d946ef">__/ ___|</span>
+<span style="color:#c44536">| |_) </span><span style="color:#e07c3e">|| |  </span><span style="color:#d4a800">/ /  /</span><span style="color:#2d9d78"> / | |</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">   \__</span><span style="color:#d946ef">_ \___ \</span>
+<span style="color:#c44536">|  _ &lt;</span><span style="color:#e07c3e"> | | /</span><span style="color:#d4a800"> /_ / </span><span style="color:#2d9d78">/| |_|</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">_) |__) |</span>
+<span style="color:#c44536">|_| \_</span><span style="color:#e07c3e">\___/_</span><span style="color:#d4a800">___/__</span><span style="color:#2d9d78">__\___</span><span style="color:#0052bd">/   \_</span><span style="color:#7c3aed">___|__</span><span style="color:#d946ef">__/____/</span>
+
+  Design system · Vanilla · Astro · Svelte · React · Vue
+</pre>
+
+Vite + React project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and React, then **Landing**, **Docs**, **Dashboard**, or **Full**. Same template choice for **Add to existing** (`npx rizzo-css add`).
+
+## Setup
+
+1. Install dependencies:
+   ```bash
+   pnpm install
+   # or: npm install
+   ```
+
+2. Start the dev server:
+   ```bash
+   pnpm dev
+   ```
+
+## Project structure
+
+- `vite.config.ts` — Vite configuration
+- `index.html` — HTML shell with Rizzo CSS and theme (edit `data-theme` for default)
+- `src/main.tsx` — Entry point
+- `src/App.tsx` — Root component
+- `public/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
+- `public/assets/fonts/` — Rizzo font files (added by CLI)
+- `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)
+- `LICENSE-RIZZO` — Rizzo CSS license (does not replace your project LICENSE)
+
+## Commands
+
+- `pnpm dev` — Start dev server
+- `pnpm build` — Build for production
+- `pnpm preview` — Preview production build
+
+Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/react/base/gitignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+dist-ssr
+.DS_Store
+.env
+.env.*
+!.env.example
+*.local

package/scaffold/react/base/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" data-theme="{{DATA_THEME}}"><!-- {{THEME_LIST_COMMENT}} -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script>
+      (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
+    </script>
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    <title>{{TITLE}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/scaffold/react/base/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
+  }
+}

package/scaffold/react/base/src/App.tsx

@@ -0,0 +1,11 @@
+export default function App() {
+  return (
+    <>
+      <a href="#main-content" className="skip-link">Skip to main content</a>
+      <main id="main-content" className="container">
+        <h1>Hello, Rizzo CSS</h1>
+        <p>Edit <code>src/App.tsx</code> and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+      </main>
+    </>
+  );
+}

package/scaffold/react/base/src/index.css

@@ -0,0 +1 @@
+/* App styles; Rizzo is loaded from /css/rizzo.min.css in index.html */

package/scaffold/react/base/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/scaffold/react/base/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/scaffold/react/base/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/scaffold/react/base/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts"]
+}

package/scaffold/react/base/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/scaffold/vanilla/README-RIZZO.md

@@ -28,7 +28,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.62`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.64`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.