01ive-ds

Pill-shaped uppercase tag in the UI sans; variants map to semantic tokens.

<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>

One 36px footprint across every semantic and icon variant. Ledged buttons use a 32px face plus 4px of reserved travel, so hover and press move the whole key without changing layout height.

// Variants
<Button variant="primary">Primary</Button>

// With icon (base gap spaces icon ↔ label)
<Button><Plus /> Add item</Button>

// Icon only (square — pass an aria-label)
<Button size="icon" aria-label="Search"><Search /></Button>

// ThemeToggle composes this Button primitive
<ThemeToggle />

Rounded, hairline-bordered surface panel; `elevated` adds the 6px ledge.

<Card>…</Card>
<Card elevated>…</Card>

Sans uppercase overline for card headers.

<CardTitle>Section label</CardTitle>

Native checkbox behavior in a compact Olive control with checked, focus, description, and disabled states.

<Checkbox
  label="Include archived items"
  checked={checked}
  onChange={(event) => setChecked(event.target.checked)}
/>

Shared command and context menu shell with normal-weight labels, optional icons and hints, bounded scrolling, active state, footer, separators, and danger actions.

<Dropdown floating role="listbox">
  <Dropdown.List ref={listRef}>
    <Dropdown.Item icon={<Search />} active trailing="⌘K">Search</Dropdown.Item>
    <Dropdown.Separator />
    <Dropdown.Item tone="danger">Delete</Dropdown.Item>
  </Dropdown.List>
  <Dropdown.Footer>3 commands</Dropdown.Footer>
</Dropdown>

Sans text input with the system's single focus ring; optional label.

<Input label="Email" placeholder="you@example.com" />

Determinate semantic progress bar with primary, accent, or danger fill and an optional centered label.

<ProgressBar value={5} max={8} tone="accent" label="63% (5/8)" />

Native radio behavior with the same geometry, focus treatment, and ledged selected state as Checkbox.

<Radio name="cadence" label="Weekly" value="weekly" />

Two-to-four independently valued progress segments that double as navigation for a short ordered workflow.

<SegmentedProgress
  activeId="work"
  items={[
    { id: "prepare", label: "Prepare", value: 4, max: 4, tone: "accent" },
    { id: "work", label: "Work", value: 3, max: 8, tone: "primary" },
  ]}
  onSelect={setStage}
/>

A 36px single-value Select whose popup uses the shared Dropdown surface and item behavior.

<Select
  value={status}
  onValueChange={setStatus}
  options={[{ value: "active", label: "Active" }]}
/>

A colored status dot (online/idle/offline) with an optional label.

<StatusDot status="online" label="online" />

Directly editable 36px numeric input with adjacent decrement and increment controls; supports decimal or numeric keyboards.

<StepperField
  label="Weight (kg)"
  value={weight}
  onChange={setWeight}
  onDecrease={() => nudge(-0.5)}
  onIncrease={() => nudge(0.5)}
/>

Wide, Apple-like 36px switch with an Olive active track, sliding thumb, disabled state, and shared focus ring.

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
  aria-label="Enable feature"
/>

Controlled 36px segmented row with a subtly ledged active tab that slides between selections; supports text-only, icon-only, and icon-plus-text items.

<Tabs
  aria-label="Sets"
  activeId={activeId}
  items={[{ id: "home", label: "Home", icon: <Home /> }, { id: "search", icon: <Search />, ariaLabel: "Search" }]}
  onChange={setActiveId}
/>

Multiline Olive form control with the shared label and focus treatment.

<Textarea label="Description" placeholder="Add a few useful details…" />

Full-bleed animated ASCII background that fills its parent; honors reduced-motion.

#   :              :      +     -.            # : =:  *   * +    : .:+    =      =               * #    :          -    
    -              -      *     =:              - +:  #   # *    - --*    +      *     .         # #    -     .    =    
    -              -      #     +-              + *-  #     #    - =-*    *   .  #     :               :+     .    +    
    =              =     .      +=              * #=         .   = +=#    #   :        -              .-*     :    *    
    +.             =     :      *+              #  =         :   + #+   .     =        =              :+      -    *    
    *:             +     :      #*                 +         -   *  *   :     +   .    +            . -*      =    #    
    #:             *     -  .    *    .    .       *       . -   *  #   :     #   .    *   :        : =#      +   .     
     -      .      *   . = .-    #    :    :       *       : =   #      -   .     :    #   -        - +       *   :     
     =      :      #   : + :=         -    -       #    .  - +          =   :     -        =        = *       #   : .   
     +      -          : + -*.        -    =            .  = +          +.  -     =        *        + #           - :   
     *  .   -          -.* =#.    .   =    =            :. = *          *-  =     =  .     #        *           . = -   
     #  :   =          =:# + :    :   +   .+            -. + #          #=  +     +  :              #           . + =   

<div className="relative h-40 overflow-hidden">
  <AsciiField pattern="rain" />
</div>

Bordered, elevated ASCII-art panel (wave / grid / noise).

=++***####***++===------==========---::::::::--=++***#####**++==----::-----===
+**###%%%###**+++=========+++++++====--------==++*###%%%%###**++==------====++
**##%%%%%%%##**+++======+++++++++++==========++**##%%%%%%%###*++====--====++++
*##%%%%%%%%##**+++======++++++++++++========+++**##%%%%%%%%##*++===---====++++
*##%%%%%%%##**++==========++++++++++=========++**##%%%%%%%##*++==-------===+++
**####%%###**++==--------====++++======---====++**########**++=---:::::---===+
++**####***++==--::::::::---=======----------==++****##***++==-:::.....:::--==
=++******++==--::.......:::-----------:::::---===+++****++==--::..    ...::---
==++++++++==--:...     ...:::-------:::::::::--===+++++++==--:..       ...::--

<AsciiPanel pattern="wave" />

The brand's punctuation — a solid olive block blinking at 1.1s.

booting<BlinkCursor />

Faux terminal window — traffic-light titlebar over a mono body.

<TerminalCard title="~/peterhq — zsh">
  <p>$ whoami</p>
</TerminalCard>

The peter/hq wordmark with the slash in olive primary.

<Wordmark />

Fade + slide a block into view on first paint; `delay` staggers a group.

<Reveal delay={0.15}>
  <Card>…</Card>
</Reveal>

Types out text, then an olive accent, followed by a blinking caret.

<Typewriter text="Hello there" accent="…" />

Compact nested-page hierarchy with scroll-safe mobile behavior and current-page semantics.

<Breadcrumbs items={[
  { label: "Apps", href: "/dashboard" },
  { label: "Basketball", href: "/basketball" },
  { label: "Players", href: "/basketball/players" },
  { label: "Peter Dzuruš" },
]} />

Adaptive modal: a bottom sheet on mobile and centered dialog on larger screens, with the same accessible overlay behavior.

<AnimatePresence>
  {open ? <Dialog title="Confirm change" onClose={() => setOpen(false)}>…</Dialog> : null}
</AnimatePresence>

Bordered footer with the wordmark and a tagline.

<Footer tagline="warm canvas · olive primary" />

Auto-generated, scroll-spy table of contents; reads [data-toc] elements from the live DOM — shown live in this page's sidebar.

<OnThisPage label="On this page" />
// mark headings with: <h2 id="…" data-toc data-level="2">

Full-width, compact product-navigation row with a clear active-page state.

<ProductNavLink href="/workout" active>Training week</ProductNavLink>

Authenticated product chrome with an inset app-name sidebar, a top-attached backed breadcrumb header with optional global actions, a collapsible desktop rail, and mobile profile dock.

<ProductShell
  appName="Workout"
  appIcon="🏋️"
  navigation={<ProductNavLink active>Training week</ProductNavLink>}
  appSwitcher={<ProductNavLink>All apps</ProductNavLink>}
  headerActions={<FeedbackButton />}
>
  {children}
</ProductShell>

Animated bottom sheet with a standard scrim, flat X close control, focus trap/restoration, Escape and backdrop dismissal, safe-area padding, and body-scroll lock.

<AnimatePresence>
  {open ? <Sheet title="Details" onClose={() => setOpen(false)}>…</Sheet> : null}
</AnimatePresence>

Sticky, blurred header — brand + overline on the left, controls + theme toggle on the right.

<TopNav overline="v0.1 · alpha" />

Highlighted aside with a colored left rule; tone picks a semantic token.

<Callout tone="primary" title="Note">…</Callout>

Responsive KPI tile row; headline value colored by accent.

<StatTiles columns={3} stats={[{ value: "13", label: "Color tokens" }]} />

The standardized bordered data table used across the site — Notion-style header, hairline rows, an emphasized first column, two-axis constrained scrolling, optional sticky headings, and accessible whole-row activation. Data-driven via head/rows (with optional align, zebra, mono).

<Table
  head={["Token", "Value", "Use"]}
  rows={[
    ["primary", "#66722f", "Brand / primary actions"],
    ["accent", "#c2962f", "Secondary emphasis"],
  ]}
/>

Dependency-free, theme-aware SVG bar chart; recolorable per datum.

<BarChart data={[{ label: "Mon", value: 32 }]} />

SVG scatter / bubble chart with linear or log x-scale.

<BubbleChart data={[{ label: "Alpha", x: 2000, y: 3, size: 20 }]} />

SVG donut with a legend; values sum to a ring.

<DonutChart data={[{ label: "Primary", value: 52 }]} unit="%" />

Horizontal bar chart (div-based, crisp labels).

<HBarChart data={[{ label: "Research", value: 72 }]} unit="%" />

Multi-series SVG line chart; palette cycles per series.

<LineChart labels={["Jan","Feb"]} series={[{ name: "A", points: [20, 42] }]} />