@bizarre/ui NPM

`@bizarre/ui` 🧠👻

Headless UI components for the edges of the web.
Wrote these so I could ship weird stuff faster. You can too.

📦 Installation

bun add @bizarre/ui

Or use npm, yarn, or pnpm. Whatever you like.

🧩 Components

`TimeSlice`

A smart, headless time range picker that speaks human.

🔑 Features

🧠 Natural language input – understands "last 3 days" or "yesterday to tomorrow" (powered by chrono-node)
⏳ Relative time ranges – like "last hour" or "past 15 minutes"
🧱 Fully composable – render it your way
🧭 Keyboard accessible – arrow keys, tab jumping, full control
🌍 Timezone-aware
⚡ Performance-tuned
♿ Accessible by default

🛠 Basic Usage

import { TimeSlice } from '@bizarre/ui'

function MyComponent() {
  const handleConfirm = (range) => {
    console.log('Selected range:', range)
  }

  return (
    <TimeSlice.Root onDateRangeConfirm={handleConfirm}>
      <TimeSlice.Input />
      <TimeSlice.Portal>
        <TimeSlice.Shortcut duration={{ minutes: 15 }}>
          15 minutes
        </TimeSlice.Shortcut>
        <TimeSlice.Shortcut duration={{ hours: 1 }}>1 hour</TimeSlice.Shortcut>
        <TimeSlice.Shortcut duration={{ days: 1 }}>1 day</TimeSlice.Shortcut>
        <TimeSlice.Shortcut duration={{ months: 1 }}>
          1 month
        </TimeSlice.Shortcut>
      </TimeSlice.Portal>
    </TimeSlice.Root>
  )
}