@timebraid/vue 1.3.0

package/README.md

@@ -0,0 +1,77 @@
+# @timebraid/vue
+
+Vue 3 components for Timebraid, built only on `@timebraid/tokens` variables.
+
+```sh
+pnpm add @timebraid/vue @timebraid/tokens vue
+```
+
+```vue
+<script setup lang="ts">
+import { TBtn, TPill, TIcon } from '@timebraid/vue'
+</script>
+
+<template>
+  <TBtn size="xl" icon="download">Download for macOS</TBtn>
+  <TPill :running="[{ id: '1', task: 'Logo exploration', project: 'Acme rebrand', color: 'var(--chart-1)', since: '9:12', seconds: 8047 }]" />
+  <TIcon name="play" :size="16" />
+</template>
+```
+
+Import `@timebraid/tokens/styles.css` once in `main.ts` (or `@timebraid/vue/style.css`, which bundles the same tokens). Light is `:root`, dark is `[data-theme="dark"]`, set by `watchTheme`. `watchTheme(() => pref.value, root)` returns `{ refresh, stop }`; call `refresh()` whenever the preference changes and `stop()` on teardown.
+
+## Components
+
+| | Purpose |
+|---|---|
+| `TGroup` | Grouped inset section: uppercase header, optional footer, card background |
+| `TRow` | Inset list row: icon, title, subtitle, value, chevron |
+| `TSeg` | Segmented control with an animated thumb |
+| `TBtn` | Button: primary, tinted, gray, plain, danger, white; four sizes |
+| `TIconBtn` | Round icon-only button |
+| `TToggle` | Switch control |
+| `TField` | Filled text field |
+| `TSelect` | Trailing-value select with `chevrons-up-down`, used inside `TRow`; name the control with `label` (rendered visually hidden) or `ariaLabel` |
+| `TBadge` | Status pill: neutral, running, green, red, soon |
+| `TBar` | Animated value bar |
+| `TAvatar` | Initials avatar |
+| `TLargeTitle` | Large collapsing page title |
+| `TSheet` | Centred sheet on desktop, bottom sheet on phones |
+| `TDot` | Status dot with a pulsing ring when running |
+| `TDur` | Duration readout, mono and tabular |
+| `TWaterfall` | Parallel-time waterfall timeline for reports |
+| `TPill` | The floating always-visible timer pill; the `popover` slot (scoped with `running`) replaces the popover body, and `open` is consumer-owned through `update:open` |
+| `TWorkspaceSwitcher` | Workspace picker popover |
+| `TTimerBar` | Phone bottom timer bar |
+| `TStrokes` | Oversized faded tally strokes behind sign-in and empty states |
+| `TIOSNav` | iOS large-title nav bar that collapses on scroll |
+| `TIOSTabBar` | iOS tab bar |
+| `TAndroidTop` | Android top app bar |
+| `TAndroidNavBar` | Android bottom navigation bar |
+| `TIcon` | Lucide glyph via CSS mask, follows `currentColor` |
+| `TLogo` | The mark, correct artwork per size |
+| `TCodeInput` | 6-digit code entry |
+| `TAuthCard` | Sign-in layout card |
+| `TCheckbox` | Checkbox control |
+| `TTooltip` | Hover tooltip |
+
+Also exported: `formatDuration(seconds, 'clock' | 'short' | 'compact')`, `PROJECT_COLORS`, `TIMEBRAID_ICON_BASE`, `DEFAULT_ICON_BASE`, `resolveTheme`, `applyTheme`, `watchTheme`, `THEME_PREFERENCES`.
+
+`TIcon` masks its glyph from `https://unpkg.com/lucide-static@latest/icons/`. Self-host the glyphs and point every icon at them in one line. An iOS WebView under `tauri://localhost` needs this, because it cannot paint a cross-origin mask:
+
+```ts
+import { TIMEBRAID_ICON_BASE } from '@timebraid/vue'
+app.provide(TIMEBRAID_ICON_BASE, '/icons/')
+```
+
+A `base` prop on a single `TIcon` still wins over the provided value.
+
+## Rules
+
+- `TBadge tone="soon"` with the words "Coming soon" on every roadmap item.
+- Indigo (`--accent`) is the accent and the running colour. Amber lives in the app icon only.
+- Project colours come from `PROJECT_COLORS` (Okabe-Ito). Nothing else.
+
+## Develop
+
+`pnpm dev` opens the playground with every component and state, and a dark/light switch.