# rawblock-ui

**Repository Path**: uyevan/rawblock-ui

## Basic Information

- **Project Name**: rawblock-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-04
- **Last Updated**: 2026-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RawBlock

Brutalist UI Component Library — **0px radius**, thick black borders, zero shadows, full color inversions.

**50 components, zero dependencies.** Just CSS + ~50KB of vanilla JS.

```bash
npm install rawblock-ui
```

## Quick Start

```js
import 'rawblock-ui/rawblock.css'
import RB from 'rawblock-ui'
```

Or via CDN:

```html
<link rel="stylesheet" href="https://unpkg.com/rawblock-ui/rawblock.css">
<script src="https://unpkg.com/rawblock-ui/rawblock.js"></script>
```

## What's New in v3.0

v3.0 is a major enhancement to 15 core components with real working functionality:

- **Button**: ripple effect, loading state, button groups
- **Input**: clear button, password toggle, char counter, validation states
- **Checkbox**: indeterminate state, card variant, `RB.checkboxGroup()` for select-all
- **Radio**: card variant
- **Toggle**: 3 sizes (sm / md / lg)
- **Calendar**: real month/year navigation, range selection, keyboard nav (arrows / PageUp / PageDown / Home / End), today highlight, min/max constraints
- **Date Picker** (NEW): single / range modes, auto-flip popup
- **Time Picker** (NEW): scroll wheels, 12h / 24h formats
- **Search Bar**: debounced, with results dropdown, keyboard nav
- **Command Palette** (NEW): `⌘K` / `Ctrl+K` global shortcut, fuzzy search, categories, recents
- **Tooltip**: 4 positions, viewport-aware auto-shift, focus support, light variant
- **Modal**: focus trap, body scroll lock, ESC close, 5 sizes, side drawers (`bottom` / `right` variants)
- **Drawer**: focus trap, body scroll lock, ESC
- **Toast**: types (success / error / warning / info), action button, progress bar, pause-on-hover, queue
- **Searchable Select** (NEW): single / multi modes, fuzzy search, keyboard nav

## Components

| # | Component | Class | JS |
|---|---|---|---|
| 1 | Typography | `.rb-h1`–`.rb-h4`, `.rb-mono`, `.rb-link` | — |
| 2 | **Button** | `.rb-btn`, variants + ripple + groups | ✓ |
| 3 | **Input** | `.rb-input` + clear, pwd, counter, validation | ✓ |
| 4 | Textarea | `.rb-textarea` | — |
| 5 | Select | `.rb-select` | — |
| 6 | **Searchable Select** | `data-select-search` | ✓ |
| 7 | **Checkbox** | `.rb-checkbox`, card, indeterminate | ✓ |
| 8 | **Radio** | `.rb-radio`, card variant | — |
| 9 | **Toggle** | `.rb-toggle`, 3 sizes | — |
| 10 | Card | `.rb-card`, `-elevated`, `-interactive` | — |
| 11 | Tabs | `.rb-tabs` | ✓ |
| 12 | Breadcrumb | `.rb-breadcrumb` | — |
| 13 | Pagination | `.rb-pagination` | — |
| 14 | Accordion | `.rb-accordion` | ✓ |
| 15 | **Modal** | `.rb-modal`, 5 sizes + focus trap + dynamic API | ✓ RB.openModal/closeModal |
| 16 | **Tooltip** | `.rb-tooltip`, 4 positions, 5 variants, rich content, delay | ✓ |
| 17 | **Table** | `.rb-table`, striped/hover/sortable/sticky/compact/bordered/row-select+multi/status cell/numeric/action col/pagination | ✓ |
| 18 | **List** | `.rb-list`, bordered/hoverable/selectable+multi/ordered/with-icons/media/status/grouped/sizes + kbnav | ✓ |
| 19 | **Avatar** | `.rb-avatar`, 6 sizes + 3 shapes + initials + status dot + badge overlay + stacked group | ✓ |
| 20 | Badge | `.rb-badge` | — |
| 21 | Progress | `.rb-progress`, indeterminate | — |
| 22 | **Progress Circle** | `.rb-progress-circle`, SVG | ✓ |
| 23 | Skeleton | `.rb-skeleton` | — |
| 24 | Divider | `.rb-divider` | — |
| 25 | Alert | `.rb-alert` | — |
| 26 | **Toast** | `.rb-toast`, 4 types + queue | ✓ RB.toast() |
| 27 | Dropdown | `.rb-dropdown` | ✓ |
| 28 | Slider | `.rb-range` | ✓ |
| 29 | **Dual Range** | `.rb-range-double` | ✓ |
| 30 | Stepper | `.rb-steps` | — |
| 31 | File Input | `.rb-file-input` | ✓ |
| 32 | **Code Block** | `.rb-code`, syntax highlight | ✓ |
| 33 | **Drawer** | `.rb-drawer` | ✓ |
| 34 | **Spinner** | `.rb-spinner-*` | — |
| 35 | **Rating** | `.rb-rating` | ✓ |
| 36 | **Notification Badge** | `.rb-notif-wrap` | — |
| 37 | **Timeline** | `.rb-timeline` | — |
| 38 | **Empty State** | `.rb-empty` | — |
| 39 | **Stats** | `.rb-stat` | — |
| 40 | **Keyboard Key** | `.rb-kbd` | — |
| 41 | **Popover** | `.rb-popover` | ✓ |
| 42 | **Banner** | `.rb-banner` | ✓ |
| 43 | **Card Grid** | `.rb-card-grid` | — |
| 44 | **Search Bar** | `.rb-search` | ✓ |
| 45 | **Calendar** | `.rb-calendar` | ✓ |
| 46 | **Navigation Bar** | `.rb-navbar` | ✓ |
| 47 | **Footer** | `.rb-footer` | — |
| 48 | **Sidebar** | `.rb-sidebar` | — |
| 49 | **Pricing Card** | `.rb-price-card` | — |
| 50 | **Tag Input** | `.rb-tag-input` | ✓ |

**Bold** = enhanced or added in v3.0.

## Usage Examples

### Button (with ripple + loading)

```html
<button class="rb-btn rb-btn-primary">SUBMIT</button>
<button class="rb-btn rb-btn-primary" data-loading>SEND</button>
<button class="rb-btn-group">
  <button class="rb-btn rb-btn-secondary">LEFT</button>
  <button class="rb-btn rb-btn-secondary">CENTER</button>
  <button class="rb-btn rb-btn-secondary">RIGHT</button>
</button>
```

### Input (with clear, counter, password toggle)

```html
<input class="rb-input" data-clear data-counter="50" placeholder="Email">
<input class="rb-input" type="password" data-password-toggle>
<input class="rb-input rb-input-error" placeholder="Username">
<span class="rb-input-feedback rb-input-feedback-error">Required</span>
```

### Modal (focus trap + scroll lock)

```html
<button data-modal="#my-modal">Open</button>
<div class="rb-overlay" id="my-modal" hidden>
  <div class="rb-modal rb-modal-lg">
    <div class="rb-modal-header">
      <span class="rb-modal-title">Title</span>
      <button class="rb-modal-close">×</button>
    </div>
    <p>Content here.</p>
  </div>
</div>
```

### Toast (with action + progress)

```js
RB.toast('Saved!', 'success', { duration: 4000 });
RB.toast('Delete this?', 'warning', {
  duration: 8000,
  action: { label: 'UNDO', onClick: () => console.log('undone') }
});
```

### Calendar (single + range + keyboard)

```html
<div class="rb-calendar" data-calendar data-mode="single"></div>
<div class="rb-calendar" data-calendar data-mode="range" data-min="2026-01-01" data-max="2026-12-31"></div>
```

```js
document.querySelector('[data-calendar]').addEventListener('calendar:select', (e) => {
  console.log(e.detail.date || { start: e.detail.start, end: e.detail.end });
});
```

### Command Palette (⌘K)

```js
RB.openCommandK();      // open
RB.closeCommandK();     // close
// auto-registered via data-cmdk-item anchors
```

### Searchable Select

```html
<select data-select-search data-multi>
  <option>Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>
```

## Events

```js
RB.on('modal:open',    ({ modal })   => {});
RB.on('modal:close',   ({ overlay }) => {});
RB.on('drawer:open',   ({ drawer })  => {});
RB.on('drawer:close',  ({ drawer })  => {});
RB.on('toast:show',    ({ message }) => {});
RB.on('toast:close',   ({ toast })   => {});
RB.on('tab:change',    ({ prev, current }) => {});
RB.on('calendar:select',({ date, dateObj, calendar, mode }) => {});
RB.on('timepicker:change', ({ value, picker }) => {});
RB.on('search:input',  ({ query }) => {});
RB.on('search:select', ({ value }) => {});
RB.on('select:change', ({ values }) => {});
```

## File Structure

```
rawblock-ui/
├── rawblock.css      # All styles (~1550 lines)
├── rawblock.js       # RB library v3.0 (~1750 lines)
├── index.js          # CJS / ESM shim
├── index.html        # Landing page
├── test.html         # Quick test page
├── demos/            # Multi-page docs
│   ├── _layout.css   # Shared docs styles
│   ├── _layout.js    # Sidebar + cmd-k catalog
│   ├── foundations.html
│   ├── forms.html
│   ├── pickers.html
│   ├── overlays.html
│   ├── data.html
│   ├── navigation.html
│   ├── inputs.html
│   └── showcase.html
├── DESIGN.md
├── package.json
└── README.md
```

## Design Principles

- 0px border-radius (always)
- 3-5px black borders replace shadows
- Full black/white color inversions on hover
- Archivo Black + Work Sans + Space Mono fonts
- No decorative elements — content and typography do the work

## License

MIT