npm.io
0.15.0 • Published 6d ago

@arqel-dev/ui

Licence
MIT
Version
0.15.0
Deps
5
Size
646 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

@arqel-dev/ui

License React Status

Structural React components for Arqel admin panels.

Status

Pre-alpha — UI-001..006 entregues (shell, table, form, action, flash, utility).

Install

pnpm add @arqel-dev/ui @arqel-dev/react @arqel-dev/hooks @arqel-dev/types
pnpm add @inertiajs/react react react-dom @base-ui-components/react @tanstack/react-table lucide-react

Usage

import '@arqel-dev/ui/styles.css';
import {
  AppShell, Sidebar, Topbar, MainContent,
  ResourceIndex, FormRenderer, ActionButton, FlashContainer,
} from '@arqel-dev/ui';

What's inside

Subpath Components
@arqel-dev/ui/shell AppShell, Sidebar, Topbar, MainContent, Footer
@arqel-dev/ui/table DataTable, TableCell, TableFilters, TablePagination, TableToolbar
@arqel-dev/ui/resource ResourceIndex
@arqel-dev/ui/form FormRenderer, FieldRenderer, FormSection, FormFieldset, FormGrid, FormTabs, FormActions, registerField
@arqel-dev/ui/action Button, ActionButton, ActionMenu, ConfirmDialog, ActionFormModal
@arqel-dev/ui/auth CanAccess
@arqel-dev/ui/flash FlashContainer, FlashToast
@arqel-dev/ui/utility Breadcrumbs, PageHeader, EmptyState, ErrorState, LoadingSkeleton
@arqel-dev/ui/utils cn

Design tokens

Tokens são CSS vars em oklch, honram light/dark via .dark class flip aplicada pelo <ThemeProvider>:

--color-arqel-bg / -fg
--color-arqel-primary / -fg
--color-arqel-secondary / -fg
--color-arqel-destructive / -fg
--color-arqel-success / -warning
--color-arqel-muted / -fg
--color-arqel-border / -input / -ring
--radius-arqel / -sm / -lg

Links

Keywords

arqellaravelinertiareactuishadcntailwind