Roovix UI

// main.jsx / App.jsx
import 'roovix-ui/dist/roovix-ui.css';
import Roovix from 'roovix-ui';

Roovix.init();

export default function App() {
  return <YourApp />;
}

import { useState, useEffect } from 'react';
import Roovix from 'roovix-ui';

function ThemeToggle() {
  const [theme, setTheme] = useState(() => Roovix.Theme.get());

  useEffect(() => {
    const onTheme = (e) => setTheme(e.detail.theme);
    document.addEventListener('roovix:theme', onTheme);
    return () => document.removeEventListener('roovix:theme', onTheme);
  }, []);

  return (
    <button
      type="button"
      className="btn btn-secondary"
      onClick={() => setTheme(Roovix.Theme.toggle())}
    >
      Theme: {theme}
    </button>
  );
}

// Option A — utility classes
export function StatusBanner({ ok, children }) {
  return (
    <div className={ok ? 'text-success' : 'text-danger'}>
      {children}
    </div>
  );
}

// Option B — CSS variables in style objects
export function Panel({ children }) {
  return (
    <div
      style={{
        background: 'var(--color-canvas-elevated)',
        color: 'var(--color-fg-default)',
        border: '1px solid var(--color-border-default)',
        padding: 'var(--space-4)',
        borderRadius: 'var(--radius-3)',
      }}
    >
      {children}
    </div>
  );
}

// Option C — read token at runtime (charts, canvas, etc.)
function getAccent() {
  return getComputedStyle(document.documentElement)
    .getPropertyValue('--color-accent-fg')
    .trim();
}

export function PageHeader({ title, description }) {
  return (
    <header style={{ marginBottom: 'var(--space-6)' }}>
      <h1 style={{ fontSize: '1.75rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
        {title}
      </h1>
      {description && (
        <p className="text-muted" style={{ marginTop: 'var(--space-2)' }}>
          {description}
        </p>
      )}
    </header>
  );
}

// Usage
<PageHeader
  title="Billing"
  description="Manage invoices and payment methods for your workspace."
/>

const stack = {
  display: 'flex',
  flexDirection: 'column',
  gap: 'var(--space-4)',
  padding: 'var(--space-5)',
};

export function FormSection({ children }) {
  return <section style={stack}>{children}</section>;
}

<div className="card shadow-lg">{children}</div>

<div style={{ boxShadow: 'var(--shadow-xl)', borderRadius: 'var(--radius-4)', padding: 'var(--space-5)' }}>
  Modal-like surface
</div>

const chip = {
  borderRadius: 'var(--radius-full)',
  padding: '0.15rem 0.6rem',
  transition: 'background var(--transition-fast)',
};

<span style={chip}>Beta</span>

function Fieldset({ error, children }) {
  return (
    <div
      style={{
        border: `1px solid var(--color-border-${error ? 'danger' : 'default'})`,
        borderRadius: 'var(--radius-2)',
        padding: 'var(--space-4)',
      }}
    >
      {children}
    </div>
  );
}

import { useState } from 'react';

function Button({ variant = 'primary', size, disabled, loading, children, onClick, ...props }) {
  const cls = ['btn', `btn-${variant}`, size && `btn-${size}`].filter(Boolean).join(' ');
  return (
    <button type="button" className={cls} disabled={disabled || loading} onClick={onClick} {...props}>
      {loading ? 'Please wait…' : children}
    </button>
  );
}

function SaveButton({ payload }) {
  const [loading, setLoading] = useState(false);
  const handleSave = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error('Save failed');
    } finally {
      setLoading(false);
    }
  };
  return (
    <Button variant="primary" loading={loading} onClick={handleSave}>
      Save changes
    </Button>
  );
}

const STATUS_BADGE = {
  active: 'badge-success',
  pending: 'badge-warning',
  failed: 'badge-danger',
  archived: 'badge-done',
};

export function StatusBadge({ status }) {
  return (
    <span className={`badge ${STATUS_BADGE[status] || 'badge-done'}`}>
      {status}
    </span>
  );
}

// Usage with real API data
<StatusBadge status={user.status} />
<span className="tag tag-accent">{project.tag}</span>

import { useState } from 'react';

export function ProfileForm() {
  const [form, setForm] = useState({
    name: '',
    email: '',
    plan: 'pro',
    terms: false,
    notify: true,
  });
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const set = (key) => (e) => {
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [key]: value }));
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setErrors({});
    try {
      const res = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const json = await res.json();
      if (!res.ok) setErrors(json.errors || { email: 'Invalid email' });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', maxWidth: 420 }}>
      <input className="input" value={form.name} onChange={set('name')} placeholder="Full name" />
      <input
        className={`input ${errors.email ? 'error' : ''}`}
        type="email"
        value={form.email}
        onChange={set('email')}
        placeholder="Email"
      />
      {errors.email && <span className="text-danger text-sm">{errors.email}</span>}

      <label className="control">
        <input type="radio" name="plan" value="free" checked={form.plan === 'free'} onChange={set('plan')} /> Free
      </label>
      <label className="control">
        <input type="radio" name="plan" value="pro" checked={form.plan === 'pro'} onChange={set('plan')} /> Pro
      </label>

      <label className="control">
        <input type="checkbox" checked={form.terms} onChange={set('terms')} /> I agree to the terms
      </label>

      <label className="control">
        <span className="switch">
          <input type="checkbox" checked={form.notify} onChange={set('notify')} />
          <span className="slider" />
        </span>
        Email notifications
      </label>

      <button type="submit" className="btn btn-primary" disabled={submitting || !form.terms}>
        {submitting ? 'Creating…' : 'Create account'}
      </button>
    </form>
  );
}

import { useEffect, useRef, useState } from 'react';
import Roovix from 'roovix-ui';

const PLANS = [
  { value: 'free', label: 'Free — $0/mo' },
  { value: 'pro', label: 'Pro — $29/mo' },
  { value: 'team', label: 'Team — $99/mo' },
];

function PlanSelect({ value, onChange }) {
  const ref = useRef(null);
  const inst = useRef(null);

  useEffect(() => {
    inst.current = new Roovix.Select(ref.current, {
      placeholder: 'Choose plan…',
      onChange: (v) => onChange(v),
    });
  }, []);

  useEffect(() => {
    if (value != null) inst.current?.setValue(value);
  }, [value]);

  return (
    <div className="custom-select" ref={ref}>
      <button className="select-trigger" type="button">
        <span>Choose plan…</span>
        <span className="select-arrow" />
      </button>
      <div className="select-menu" role="listbox">
        {PLANS.map((o) => (
          <div key={o.value} className="select-option" data-value={o.value} role="option">
            {o.label}
          </div>
        ))}
      </div>
    </div>
  );
}

// Parent — real selected value in state
function Checkout() {
  const [plan, setPlan] = useState(null);

  const startCheckout = async () => {
    if (!plan) return;
    await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ planId: plan }),
    });
  };

  return (
    <>
      <PlanSelect value={plan} onChange={setPlan} />
      <p>Selected: {plan ?? '—'}</p>
      <button className="btn btn-primary" disabled={!plan} onClick={startCheckout}>
        Continue
      </button>
    </>
  );
}

function StatCard({ value, label, change }) {
  const positive = change >= 0;
  return (
    <div className="card card-stat">
      <div className="stat-value">{value}</div>
      <div className="stat-label">{label}</div>
      <div className={`stat-change ${positive ? 'positive' : 'negative'}`}>
        {positive ? '↑' : '↓'} {Math.abs(change)}%
      </div>
    </div>
  );
}

// From API
function Metrics() {
  const [m, setM] = useState(null);
  useEffect(() => {
    fetch('/api/metrics').then((r) => r.json()).then(setM);
  }, []);
  if (!m) return <div className="skeleton skeleton-card" />;
  return <StatCard value={m.activeUsers.toLocaleString()} label="Active users" change={m.delta} />;
}

function Alert({ tone = 'accent', icon, children }) {
  return (
    <div className={`alert alert-${tone}`}>
      {icon && <span className="alert-icon">{icon}</span>}
      <div>{children}</div>
    </div>
  );
}

function Toast({ tone, title, description }) {
  return (
    <div className={`toast toast-${tone}`}>
      <div className="toast-icon">{tone === 'success' ? '✓' : '✕'}</div>
      <div className="toast-content">
        <div className="toast-title">{title}</div>
        <div className="toast-desc">{description}</div>
      </div>
    </div>
  );
}

// Usage after mutation
{error && <Alert tone="danger" icon="✕">{error.message}</Alert>}
{saved && <Toast tone="success" title="Saved" description="Profile updated." />}

import { useState } from 'react';

const TABS = [
  { id: 'general', label: 'General' },
  { id: 'security', label: 'Security' },
  { id: 'billing', label: 'Billing' },
];

function SettingsTabs() {
  const [active, setActive] = useState('general');

  return (
    <>
      <div className="tabs">
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            className={`tab ${active === t.id ? 'active' : ''}`}
            onClick={() => setActive(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>
      {active === 'general' && <GeneralPanel />}
      {active === 'security' && <SecurityPanel />}
      {active === 'billing' && <BillingPanel />}
    </>
  );
}

function initials(name) {
  return name.split(' ').map((w) => w[0]).join('').slice(0, 2).toUpperCase();
}

function Avatar({ name, size = '' }) {
  return (
    <div className={`avatar ${size ? `avatar-${size}` : ''}`}>
      {initials(name)}
    </div>
  );
}

function AvatarGroup({ users }) {
  return (
    <div className="avatar-group">
      {users.map((u) => <Avatar key={u.id} name={u.name} />)}
    </div>
  );
}

<AvatarGroup users={project.members} />

function Loader({ size }) {
  return <div className={`spinner ${size ? `spinner-${size}` : ''}`} />;
}

function Progress({ value, indeterminate }) {
  return (
    <div className={`progress ${indeterminate ? 'indeterminate' : ''}`}>
      <div className="bar" style={indeterminate ? undefined : { width: `${value}%` }} />
    </div>
  );
}

// Usage
{loading ? <Loader /> : <ItemList items={items} />}
<Progress value={uploadPct} />

import { useRef } from 'react';
import Roovix from 'roovix-ui';

function DeleteProjectButton({ projectId, projectName }) {
  const modalRef = useRef(null);

  const open = () => {
    modalRef.current = new Roovix.Modal({
      title: 'Delete project?',
      content: `<p>This will permanently remove <strong>${projectName}</strong>.</p>`,
      footer: `
        <button type="button" class="btn btn-secondary" id="m-cancel">Cancel</button>
        <button type="button" class="btn btn-danger" id="m-ok">Delete</button>
      `,
    });
    modalRef.current.open();

    document.getElementById('m-cancel').onclick = () => modalRef.current.close();
    document.getElementById('m-ok').onclick = async () => {
      await fetch(`/api/projects/${projectId}`, { method: 'DELETE' });
      modalRef.current.close();
      // navigate or refresh list
    };
  };

  return (
    <button type="button" className="btn btn-danger" onClick={open}>
      Delete project
    </button>
  );
}

import { useRef } from 'react';
import Roovix from 'roovix-ui';

function FiltersDrawer({ onApply }) {
  const drawerRef = useRef(null);

  const open = () => {
    if (!drawerRef.current) {
      drawerRef.current = new Roovix.Drawer({
        side: 'right',
        title: 'Filters',
        content: `
          <label class="control"><input type="checkbox" name="status" value="active"/> Active</label>
          <label class="control"><input type="checkbox" name="status" value="pending"/> Pending</label>
          <button type="button" class="btn btn-primary btn-sm" id="applyFilters">Apply</button>
        `,
      });
    }
    drawerRef.current.open();
    setTimeout(() => {
      document.getElementById('applyFilters').onclick = () => {
        const values = [...document.querySelectorAll('input[name="status"]:checked')].map((i) => i.value);
        onApply(values);
        drawerRef.current.close();
      };
    }, 0);
  };

  return <button type="button" className="btn btn-secondary" onClick={open}>Filters</button>;
}

import { useEffect, useRef } from 'react';
import Roovix from 'roovix-ui';

function RowActions({ rowId, onDeleted }) {
  const triggerRef = useRef(null);
  const menuRef = useRef(null);

  useEffect(() => {
    new Roovix.Dropdown(triggerRef.current, menuRef.current);
  }, []);

  const run = async (action) => {
    if (action === 'edit') {
      window.location.href = `/projects/${rowId}/edit`;
    } else if (action === 'duplicate') {
      await fetch(`/api/projects/${rowId}/duplicate`, { method: 'POST' });
    } else if (action === 'delete') {
      await fetch(`/api/projects/${rowId}`, { method: 'DELETE' });
      onDeleted?.(rowId);
    }
  };

  return (
    <div className="dropdown">
      <button ref={triggerRef} type="button" className="btn btn-secondary">Actions ▾</button>
      <div ref={menuRef} className="dropdown-menu">
        <div className="dropdown-header">Actions</div>
        <button type="button" className="dropdown-item" onClick={() => run('edit')}>Edit</button>
        <button type="button" className="dropdown-item" onClick={() => run('duplicate')}>Duplicate</button>
        <div className="dropdown-divider" />
        <button type="button" className="dropdown-item" onClick={() => run('delete')}>Delete</button>
      </div>
    </div>
  );
}

function Tooltip({ content, children }) {
  return (
    <span className="tooltip-trigger">
      {children}
      <span className="tooltip">{content}</span>
    </span>
  );
}

<Tooltip content="API keys are shown once. Store them securely.">
  <button type="button" className="btn btn-ghost btn-icon">ℹ</button>
</Tooltip>

import { useEffect, useRef, useState } from 'react';
import Roovix from 'roovix-ui';

async function uploadFileToApi(file, onProgress, token) {
  const form = new FormData();
  form.append('file', file);

  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/uploads');
    xhr.setRequestHeader('Authorization', `Bearer ${token}`);

    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) onProgress(Math.round((e.loaded / e.total) * 100));
    };
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) resolve(JSON.parse(xhr.responseText));
      else reject(new Error(xhr.statusText || 'Upload failed'));
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send(form);
  });
}

export function InvoiceUploader({ authToken, onUploaded }) {
  const ref = useRef(null);
  const inst = useRef(null);
  const [count, setCount] = useState(0);

  useEffect(() => {
    inst.current = new Roovix.FileUpload(ref.current, {
      width: '100%',
      accept: 'image/*,application/pdf',
      multiple: true,
      maxSize: 10 * 1024 * 1024,
      simulate: false,
      onAdd: () => setCount(inst.current.files.length),
      onRemove: () => setCount(inst.current.files.length),
      onUpload: async (files, { updateProgress, setStatus }) => {
        const results = [];
        for (let i = 0; i < files.length; i++) {
          try {
            const json = await uploadFileToApi(
              files[i],
              (pct) => updateProgress(i, pct),
              authToken
            );
            setStatus(i, 'done');
            results.push(json); // { id, url }
          } catch {
            setStatus(i, 'error');
          }
        }
        onUploaded?.(results);
        return results;
      },
    });
  }, [authToken]);

  return (
    <div>
      <div ref={ref} style={{ width: '100%' }}>
        <div className="drop-zone">
          <div className="dz-icon">📁</div>
          <div className="dz-text">Drop invoices or click to browse</div>
          <div className="dz-hint">PDF or image · max 10 MB</div>
        </div>
        <div data-file-list />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12 }}>
        <span className="text-sm text-muted">{count} file{count !== 1 ? 's' : ''}</span>
        <button
          type="button"
          className="btn btn-primary btn-sm"
          onClick={() => inst.current.upload()}
          disabled={count === 0}
        >
          Upload to server
        </button>
      </div>
    </div>
  );
}

// Parent
<InvoiceUploader
  authToken={session.token}
  onUploaded={(files) => {
    // files = [{ id, url }, ...] from your API
    setAttachments((prev) => [...prev, ...files]);
  }}
/>

const STATUS_BADGE = {
  active: 'badge-success',
  pending: 'badge-warning',
  inactive: 'badge-done',
};

function UsersTable({ users }) {
  return (
    <div className="table-wrap">
      <table>
        <thead>
          <tr><th>Name</th><th>Status</th><th>Role</th></tr>
        </thead>
        <tbody>
          {users.map((u) => (
            <tr key={u.id}>
              <td>{u.name}</td>
              <td>
                <span className={`badge ${STATUS_BADGE[u.status]}`}>{u.status}</span>
              </td>
              <td>{u.role}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// Parent loads data
const [users, setUsers] = useState([]);
useEffect(() => {
  fetch('/api/users').then((r) => r.json()).then(setUsers);
}, []);
<UsersTable users={users} />

function Pagination({ page, totalPages, onChange }) {
  return (
    <div className="pagination">
      <button type="button" className="page" disabled={page <= 1}
        onClick={() => onChange(page - 1)}>‹</button>
      {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
        <button key={p} type="button"
          className={`page ${p === page ? 'active' : ''}`}
          onClick={() => onChange(p)}>{p}</button>
      ))}
      <button type="button" className="page" disabled={page >= totalPages}
        onClick={() => onChange(page + 1)}>›</button>
    </div>
  );
}

function ItemList() {
  const [page, setPage] = useState(1);
  const [items, setItems] = useState([]);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    fetch(`/api/items?page=${page}&limit=20`)
      .then((r) => r.json())
      .then((d) => {
        setItems(d.items);
        setTotalPages(d.totalPages);
      });
  }, [page]);

  return (
    <>
      <ItemTable rows={items} />
      <Pagination page={page} totalPages={totalPages} onChange={setPage} />
    </>
  );
}

import { Fragment } from 'react';

function Breadcrumbs({ items }) {
  // items = [{ label: 'Home', href: '/' }, { label: 'Projects', href: '/projects' }, { label: 'Acme' }]
  return (
    <nav className="breadcrumbs" aria-label="Breadcrumb">
      {items.map((item, i) => (
        <Fragment key={item.href || item.label}>
          {i > 0 && <span className="sep">/</span>}
          {item.href
            ? <a href={item.href}>{item.label}</a>
            : <span className="current">{item.label}</span>}
        </Fragment>
      ))}
    </nav>
  );
}