@humanforest/ui 0.1.0

package/src/themes/toaster.ts

@@ -0,0 +1,66 @@
+/**
+ * Forest theme fragment — UToaster (the toast STACK: viewport, entry/exit, swipe, collapse).
+ *
+ * Distinct from the `toast` fragment, which styles a single notification's surface. Everything the
+ * stack moves lives here, and all of it was stock — this fragment exists only to bring that motion
+ * onto the shared tokens. Nothing else about the toaster needs a Forest opinion: the viewport
+ * position matrix, the stacking transforms and the swipe translate maths are structure.
+ *
+ * Timing, by what each thing is:
+ *   - entry (`toast-slide-in-from-*`) — an overlay arriving, so --motion-base
+ *   - exit (`toast-closed`, `toast-collapsed-closed`) and swipe-dismiss — --motion-fast, the
+ *     overlay-exit bucket; a dismissal the user already committed to should get out of the way
+ *   - the stack reflow (`transition-[transform,translate,height]`, running whenever a sibling
+ *     enters or leaves) — --motion-base, since it is what visually carries the entry
+ *   - `pulse-a` / `pulse-b`, the attention nudge on a repeat toast — --motion-base
+ *   - the front-card opacity fade at duration-100 — --motion-instant
+ *
+ * Every curve becomes --motion-ease-out. Stock eases the entry and both exits with `ease-in-out`,
+ * which the doctrine reserves for movement that starts AND settles on screen; a toast slides in
+ * from outside the viewport and leaves it again.
+ *
+ * Slots touched: base (and its position compounds + the swipeDirection variant).
+ * Stock recipe: apps/docs/node_modules/.nuxt-ui/ui/toaster.ts
+ */
+
+export const toasterTheme = {
+  slots: {
+    // Exits, the attention pulse, the front-card fade, and the stack reflow. Same keyframes and same
+    // property list as stock — only the durations and curves are restated, and tailwind-merge takes
+    // the last of each pair in the concat.
+    base: [
+      'data-[front=false]:*:duration-(--motion-instant)',
+      'data-[state=closed]:animate-[toast-closed_var(--motion-fast)_var(--motion-ease-out)]',
+      'data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_var(--motion-fast)_var(--motion-ease-out)]',
+      'data-[state=open]:data-[pulsing=odd]:animate-[toast-pulse-a_var(--motion-base)_var(--motion-ease-out)]',
+      'data-[state=open]:data-[pulsing=even]:animate-[toast-pulse-b_var(--motion-base)_var(--motion-ease-out)]',
+      'duration-(--motion-base) ease-(--motion-ease-out)',
+    ].join(' '),
+  },
+  variants: {
+    // Swipe-to-dismiss — the fling that completes a gesture the user is already making, so it runs
+    // at the exit duration rather than the entry one.
+    swipeDirection: {
+      up: 'data-[swipe=end]:animate-[toast-slide-up_var(--motion-fast)_var(--motion-ease-out)]',
+      right: 'data-[swipe=end]:animate-[toast-slide-right_var(--motion-fast)_var(--motion-ease-out)]',
+      down: 'data-[swipe=end]:animate-[toast-slide-down_var(--motion-fast)_var(--motion-ease-out)]',
+      left: 'data-[swipe=end]:animate-[toast-slide-left_var(--motion-fast)_var(--motion-ease-out)]',
+    },
+  },
+  // Entry, which stock scopes to the position group (a top toast slides down, a bottom one up). The
+  // discriminator arrays mirror stock's exactly so these land as the same compound, applied last.
+  compoundVariants: [
+    {
+      position: ['top-left', 'top-center', 'top-right'],
+      class: {
+        base: 'data-[state=open]:animate-[toast-slide-in-from-top_var(--motion-base)_var(--motion-ease-out)]',
+      },
+    },
+    {
+      position: ['bottom-left', 'bottom-center', 'bottom-right'],
+      class: {
+        base: 'data-[state=open]:animate-[toast-slide-in-from-bottom_var(--motion-base)_var(--motion-ease-out)]',
+      },
+    },
+  ],
+} as const;

package/src/themes/tooltip.ts

@@ -0,0 +1,31 @@
+/**
+ * Forest theme fragment — UTooltip (hover/focus hint).
+ *
+ * Deltas only (the preset APPENDS to stock Nuxt UI):
+ *   content — flips stock's surface look (`bg-default text-highlighted rounded-sm`) to a floating
+ *             inverted bubble (`bg-inverted text-inverted`) at the brand radius (`rounded-lg`,
+ *             0.5 rem / --ui-radius), and swaps stock's raw `100ms ease` open/close animation for
+ *             the Forest motion tokens (fast enter, instant exit). Shadow, ring, height, padding,
+ *             origin and pointer-events are inherited from stock and not restated.
+ *   arrow   — must follow the inverted bubble: stock fills the caret with `fill-bg` (the light
+ *             surface), which reads as a white pointer on our dark bubble. Re-point it at the
+ *             inverted bg so the caret matches the content. Stock's `stroke-default` is kept (it
+ *             aligns with the bubble's inherited ring).
+ *
+ * Stock slots left untouched: text, kbds (kbds inherit the Forest UKbd theme).
+ *
+ * Slots sourced from: apps/docs/node_modules/.nuxt-ui/ui/tooltip.ts
+ * Slots touched: `content`
+ */
+
+export const tooltipTheme = {
+  slots: {
+    // Both open states animate. Stock only ever reaches `delayed-open` through its own hover timer,
+    // but a tooltip whose `open` is controlled — the chart components drive theirs from their own
+    // hit-testing — reports `instant-open` instead, and matching only the delayed state left those
+    // appearing with no transition at all.
+    content: 'bg-inverted text-inverted rounded-lg data-[state=delayed-open]:animate-[scale-in_var(--motion-fast)_var(--motion-ease-out)] data-[state=instant-open]:animate-[scale-in_var(--motion-fast)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-instant)_var(--motion-ease-out)]',
+    // Caret follows the inverted bubble (stock fills it with the light `fill-bg`). stroke-default kept.
+    arrow: 'fill-[var(--ui-bg-inverted)]',
+  },
+} as const;

package/src/themes/tree.ts

@@ -0,0 +1,41 @@
+/**
+ * Forest theme fragment — UTree (hierarchical disclosure list).
+ *
+ * Deltas over stock (the preset appends to Nuxt UI):
+ *   - `link`: a focused row draws an inset focus-visible ring on the before: pseudo that already
+ *     carries the selection / hover pill.
+ *   - `linkTrailingIcon`: the expand chevron rotates on --motion-fast / --motion-ease-out rather
+ *     than stock's hard-coded duration-200 — a small near element, same bucket as the accordion
+ *     and collapsible chevrons.
+ *
+ * The pill keeps its stock before:rounded-md (12px) — a tree node is a row, the same shape a sidebar
+ * nav row and a command-palette result carry.
+ *
+ * Everything else is stock: the indent guide (border-s border-default), the folder / chevron icons,
+ * the per-colour selected-label and focus colours, and the size ladder all read on the Forest ramps
+ * and semantic tokens without an override.
+ *
+ * Slots touched: link, linkTrailingIcon.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/tree.ts
+ */
+
+export const treeTheme = {
+  slots: {
+    link: 'focus-visible:before:ring-inset focus-visible:before:ring-2',
+    linkTrailingIcon: 'duration-(--motion-fast) ease-(--motion-ease-out)',
+  },
+
+  // Touch: each node promotes ONE size up under a coarse pointer (borrows the next size's padding /
+  // gap / type / icon) — same ladder as the menu/input family. Unlike the input field, tree links
+  // position their icons with flex `gap` (not an absolute ps-*/pe-* inset), so bumping horizontal
+  // padding here is safe. xl is the ceiling; deltas only. `coarse:` carries the :not(.cut-fixed)
+  // escape so a baked mobile cut opts out.
+  variants: {
+    size: {
+      xs: { link: 'coarse:px-2.5 coarse:py-1.5 coarse:gap-1.5' },
+      sm: { link: 'coarse:text-sm', linkLeadingIcon: 'coarse:size-5', linkTrailingIcon: 'coarse:size-5' },
+      md: { link: 'coarse:px-3 coarse:py-2 coarse:gap-2' },
+      lg: { link: 'coarse:text-base', linkLeadingIcon: 'coarse:size-6', linkTrailingIcon: 'coarse:size-6' },
+    },
+  },
+} as const;

package/src/themes/user.ts

@@ -0,0 +1,28 @@
+/**
+ * Forest theme fragment — UUser (name + avatar + description row)
+ *
+ * Deltas only (stock in apps/docs/node_modules/.nuxt-ui/ui/user.ts):
+ *   - `name`: `font-bold` (stock base is `font-medium`) so the rider/operator name reads with
+ *     clear hierarchy above the description at every size. Colour is left to stock: the `to:false`
+ *     variant already sets `text-highlighted` on the non-link name, so restating it here would be
+ *     dead weight; the `to:true` link state keeps its own `text-default → highlighted` transition.
+ *   - `wrapper`: `min-w-0` guard so name + description truncate when the row sits inside a flex
+ *     parent (table cell, narrow sidebar item, list row). Stock wrapper base is empty.
+ *   - `to.true.avatar`: the hover scale runs on --motion-fast / --motion-ease-out instead of stock's
+ *     hard-coded duration-200 (bare `ease`). A hover affordance on a small near element is the
+ *     textbook --motion-fast case.
+ *
+ * Untouched (all stock): `description` (`text-muted`), `avatar` (`shrink-0`), the 3xs–3xl gap +
+ * text size ladder, orientation, chip, and the `to` hover/focus colour transitions.
+ */
+export const userTheme = {
+  slots: {
+    name: 'font-bold',
+    wrapper: 'min-w-0',
+  },
+  variants: {
+    to: {
+      true: { avatar: 'duration-(--motion-fast) ease-(--motion-ease-out)' },
+    },
+  },
+} as const;