learning_ai_user

Repositories Projects Packages Public Activity Starred Repositories

@bytelyst/ui (0.2.2)

Published 2026-07-27 04:51:33 +00:00 by learning_ai_user

Installation

Setup this registry in your project .npmrc file:

@bytelyst:registry=

To install the package using npm, run the following command:

npm install @bytelyst/ui@0.2.2

or add it to the package.json file:

"@bytelyst/ui": "0.2.2"

For more information on the npm registry, see the documentation.

About this package

@bytelyst/ui

Shared component library for the ByteLyst ecosystem. Built with Radix UI primitives, Lucide icons, and CSS custom properties from @bytelyst/design-tokens.

Install

pnpm add @bytelyst/ui

Peer dependencies: react, react-dom.

Components

The package offers a cohesive, token-driven web toolkit: controls and fields, overlays and menus, navigation and layout primitives, data display, feedback, and loading states. Import from the root for application use, or use a documented subpath such as @bytelyst/ui/button when a consumer needs to keep its dependency boundary explicit.

The main exports include Button, IconButton, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Combobox, SearchInput, TagInput, Field, Label, Card, Panel, Surface, Section, PageHeader, Sidebar, Tabs, SegmentedControl, Modal, ConfirmDialog, Drawer, Tooltip, DropdownMenu, ActionMenu, Toast, Badge, StatusBadge, AlertBanner, EmptyState, StateView, Skeleton, LoadingSpinner, LoadingDots, DataList, DataTable, and supporting composition primitives.

Button

5 variants (primary, secondary, ghost, destructive, outline), 3 sizes, loading state with spinner.

import { Button } from '@bytelyst/ui';

<Button variant="primary" size="md" loading={saving}>Save</Button>
<Button variant="destructive" onClick={onDelete}>Delete</Button>
<Button variant="ghost" size="sm">Cancel</Button>

Input

Text input with error/success states. Supports aria-invalid automatically when error is truthy.

import { Input } from '@bytelyst/ui';

<Input placeholder="Email" type="email" />
<Input error="Required field" />

Textarea

Auto-resize textarea with error states.

import { Textarea } from '@bytelyst/ui';

<Textarea placeholder="Description" rows={4} />;

Select

Styled <select> with keyboard navigation.

import { Select } from '@bytelyst/ui';

<Select
  options={[
    { value: 'a', label: 'Option A' },
    { value: 'b', label: 'Option B' },
  ]}
  value={selected}
  onChange={setSelected}
/>;

Modal / Dialog

Radix @radix-ui/react-dialog with focus trap, Esc close, and aria-modal.

import { Modal } from '@bytelyst/ui';

<Modal open={isOpen} onOpenChange={setOpen} title="Edit item">
  <p>Modal content here</p>
</Modal>;

ConfirmDialog

Radix AlertDialog for destructive/warning confirmations. Supports async onConfirm.

import { ConfirmDialog } from '@bytelyst/ui';

<ConfirmDialog
  open={showConfirm}
  onOpenChange={setShowConfirm}
  title="Delete item?"
  description="This action cannot be undone."
  onConfirm={handleDelete}
  variant="destructive"
/>;

Toast

4 types (success, error, warning, info), auto-dismiss, role="alert". Use ToastProvider in your root layout and toast() anywhere.

import { ToastProvider, toast } from '@bytelyst/ui';

// In providers.tsx
<ToastProvider>{children}</ToastProvider>;

// Anywhere in app
toast('Saved successfully', 'success');
toast('Something went wrong', 'error');

Card

Container with default, elevated, and interactive variants. Includes CardHeader, CardTitle, CardDescription sub-components.

import { Card, CardHeader, CardTitle, CardDescription } from '@bytelyst/ui';

<Card>
  <CardHeader>
    <CardTitle>Dashboard</CardTitle>
    <CardDescription>Overview of your data</CardDescription>
  </CardHeader>
  {children}
</Card>;

Badge

Status/count/risk-level badges, color-coded by semantic tokens.

import { Badge } from '@bytelyst/ui';

<Badge variant="success">Active</Badge>
<Badge variant="danger">Critical</Badge>
<Badge variant="warning" count={5} />

EmptyState

Placeholder for empty lists with icon, description, and optional CTA.

import { EmptyState } from '@bytelyst/ui';

<EmptyState
  icon={<FileText size={48} />}
  title="No items yet"
  description="Create your first item to get started."
  action={<Button onClick={onCreate}>Create</Button>}
/>;

Label

Styled form label.

import { Label } from '@bytelyst/ui';

<Label htmlFor="email">Email address</Label>;

Separator

Horizontal/vertical divider.

import { Separator } from '@bytelyst/ui';

<Separator />
<Separator orientation="vertical" />

Sidebar

Responsive collapsible sidebar with mobile toggle, overlay, and navigation items.

import { Sidebar, SidebarItem } from '@bytelyst/ui';

<Sidebar
  collapsed={collapsed}
  onToggle={() => setCollapsed(!collapsed)}
  header={<span>MyApp</span>}
  footer="v1.0.0"
>
  <SidebarItem href="/dashboard" label="Dashboard" icon={<Home size={18} />} active />
  <SidebarItem href="/settings" label="Settings" icon={<Settings size={18} />} />
</Sidebar>;

StatCard

Dashboard metric card with trend indicator.

import { StatCard } from '@bytelyst/ui';

<StatCard label="Total Users" value="1,234" trend="up" trendValue="+12%" />
<StatCard label="Errors" value={42} trend="down" trendValue="-8%" icon={<AlertCircle />} />

LoadingSpinner

Accessible loading indicator with aria-busy and prefers-reduced-motion support.

import { LoadingSpinner } from '@bytelyst/ui';

<LoadingSpinner size="md" label="Loading data…" />
<LoadingSpinner size="sm" label="" />  {/* spinner only, no text */}

Design Token Integration

All components use CSS custom properties with --bl- prefix and sensible fallbacks. Override them per-product:

:root {
  --bl-accent: var(--jj-accent); /* JarvisJr */
  --bl-surface-card: var(--fm-surface); /* FlowMonk */
}

Accessibility

Every component includes:

• focus-visible ring styles
• ARIA attributes (aria-label, aria-modal, aria-busy, aria-invalid, aria-current)
• Keyboard navigation (Esc to close, Tab focus trap in modals)
• prefers-reduced-motion respected via Tailwind's animate-spin

Storybook

pnpm --filter @bytelyst/ui storybook

Storybook is configured with @storybook/addon-a11y for automated accessibility checks.

Dependencies

Dependencies

ID	Version
@radix-ui/react-alert-dialog	^1.1.0
@radix-ui/react-checkbox	^1.3.0
@radix-ui/react-dialog	^1.1.0
@radix-ui/react-dropdown-menu	^2.1.0
@radix-ui/react-radio-group	^1.3.0
@radix-ui/react-slot	^1.1.0
@radix-ui/react-switch	^1.2.0
@radix-ui/react-tabs	^1.1.0
@radix-ui/react-tooltip	^1.2.0
clsx	^2.1.0
lucide-react	^0.460.0

Development Dependencies

ID	Version
@storybook/addon-a11y	^8.5.0
@storybook/addon-essentials	^8.5.0
@storybook/react	^8.5.0
@storybook/react-vite	^8.5.0
@tailwindcss/vite	4.2.0
@testing-library/react	^16.3.2
@types/react	^19.0.0
@types/react-dom	^19.0.0
happy-dom	^20.9.0
react	^19.2.4
react-dom	^19.2.4
storybook	^8.5.0
tailwindcss	4.2.0
typescript	^5.7.0
vite	^6.0.0
vitest	^4.0.18

Peer Dependencies

ID	Version
react	^18.0.0 || ^19.0.0
react-dom	^18.0.0 || ^19.0.0

Details

npm

2026-07-27 04:51:33 +00:00

31

latest

58 KiB

Assets (1)

ui-0.2.2.tgz 58 KiB

Versions (4) View all

0.2.2 2026-07-27

0.2.1 2026-07-26

0.1.11 2026-05-27

0.1.10 2026-05-27