# cset-ui

> Engineering-grade Blueprint / Schematic UI library for the CSET ecosystem built on Svelte 5, Tailwind CSS v4, and Bits UI.

## Overview
cset-ui provides a complete set of accessible, high-performance UI primitives designed for engineering and developer platforms. Built natively for Svelte 5 with runes ($props, $state, $derived) and snippets.

- Documentation: https://cset-ui-docs.cset-software.workers.dev
- Repository: https://github.com/cset-cbt/cset-ui
- Full Documentation Text: https://cset-ui-docs.cset-software.workers.dev/llms-full.txt

## Installation
```bash
pnpm add github:cset-cbt/cset-ui#v0.4.0
```

In `src/app.css`:
```css
@import "tailwindcss";
@import "cset-ui/styles.css";
```

## Core Primitives

### Overlays & Actions
- Button: Tactile interactive button with primary, secondary, danger variants, and link mode.
- Toast (Sonner): Stacked notifications with success, error, warning, info states.
- Dialog (Modal): Accessible modal dialog with backdrop blur, keyboard trap, and header/footer snippets.
- Sheet (Drawer): Slide-out drawer panel from left, right, top, or bottom.

### Forms & Controls
- InputField: Monospace label above, input box with subtle corner tick accents, and helper/error slot below.
- Select: Dropdown select component with customizable item rendering.
- DatePicker: Accessible date selection with calendar view and ISO value binding.
- Switch (Toggle): Boolean toggle switch with smooth physical slide.

### Data & Navigation
- Card: Blueprint container with signature technical corner-ticks.
- Badge: Status and category pill tag with semantic variant colors.
- Avatar: User portrait placeholder with initials fallback.
- Tabs: Tabbed view switcher with sliding active indicator.
- Pagination: Numeric and directional page navigation bar.
- Table: Technical data table with striped and hoverable rows.
- Accordion: Collapsible disclosure panels for FAQs and grouped items.
- Breadcrumb: Hierarchical navigation path with chevron separators.
- Skeleton: Shimmering placeholder box preventing layout shifts.
- PageHeader: Standardized page title header with eyebrow badge.
- ThemeToggle: Dark and Light theme switcher with luminescence exposure transition.
- CircuitDivider: Tactical schematic decorative divider rule.