rizzo-css 0.0.61 → 0.0.63

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/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.61`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.63`, 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.
 

package/scaffold/vanilla/components/accordion.html

@@ -397,6 +397,26 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -649,6 +669,26 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert-dialog.html

@@ -397,6 +397,26 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -649,6 +669,26 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -397,6 +397,26 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -649,6 +669,26 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/aspect-ratio.html

@@ -397,6 +397,26 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -649,6 +669,26 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+