@estiva-app/ui 0.5.0 → 0.7.0

package/src/Reaction.tsx

@@ -0,0 +1,86 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cn } from './cn'
+
+/**
+ * A reaction: an emoji, how many people chose it, and whether you are one of
+ * them.
+ *
+ * **This exists because both apps had already built it, and neither could use
+ * the components that were here.** A reaction is a pill with a count that
+ * toggles — `Chip` is a pill and rules itself out for anything clickable,
+ * `Button` is clickable and is a 6px-radius rectangle, and `IconButton` has
+ * nowhere to put the count. So Peek re-typed Chip's class list with a border
+ * added, and Ship reached for a small Button with the count as its label. The
+ * two apps' reactions do not look alike today, and neither is what was drawn.
+ *
+ * ## The one thing it does that nothing else here does
+ *
+ * **It says the reaction is yours.** That is the state a reaction has and a
+ * chip does not: `pressed` fills it with the accent's muted tint and gives it
+ * an accent edge, so a glance separates "two people, one of them me" from "two
+ * people". Ship approximated it as `outlined` versus `muted` — measured at a
+ * 1px hairline against no border at all — which is legible and is not the
+ * signal Peek's accent fill gives.
+ *
+ * It is a real `<button>` with `aria-pressed`, so the state reaches assistive
+ * tech as a toggle rather than as a colour.
+ *
+ * ## `aria-label` is required, and the reason is specific
+ *
+ * The emoji is decorative here — it is `aria-hidden`, because a glyph read
+ * aloud is noise and its spoken name differs per screen reader — and the only
+ * visible text is the count. Without a label the control is announced as
+ * **"2"**, which is what Ship shipped and its own tests caught. Pass the
+ * meaning and the count: `"Makes sense, 2"`.
+ *
+ * ## Geometry
+ *
+ * Chip's pill, at a control's height: fully rounded, 24px to match `Button`
+ * `small`, the same 8px horizontal padding, the `chip` type token for the
+ * count so it sits at 11px/500 like every other count in the system.
+ */
+export interface ReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** The emoji, drawn decoratively — name the control with `aria-label`. */
+  emoji: ReactNode
+  /** How many people reacted. Drawn as-is; `0` is not a reaction and is not drawn. */
+  count: number
+  /** You are one of them: the accent tint and edge, and `aria-pressed`. */
+  pressed?: boolean
+  /**
+   * Names the control. **Required** — the emoji is decorative and the count is
+   * the only visible text, so without this it is announced as a bare number.
+   */
+  'aria-label': string
+}
+
+export function Reaction({ emoji, count, pressed = false, className, type, ...props }: ReactionProps) {
+  return (
+    <button
+      type={type ?? 'button'}
+      aria-pressed={pressed}
+      className={cn(
+        // Chip's pill at a control's height, so a reaction and a status chip
+        // read as the same family — 24px matches Button `small`.
+        'inline-flex h-6 items-center justify-center gap-1.5 rounded-full px-2',
+        'border transition-colors',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        pressed
+          ? 'border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover'
+          : 'border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover',
+        className,
+      )}
+      {...props}
+    >
+      {/* Decorative: the control is named by `aria-label`, and a glyph read
+          aloud is noise. 16px so the emoji is legible at chip scale. */}
+      <span aria-hidden="true" className="shrink-0 text-[16px] leading-none">
+        {emoji}
+      </span>
+      {/* `text-chip` is a plain class, never merged — the same guard Chip uses,
+          because tailwind-merge drops a token size that follows a text colour. */}
+      <span className="text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums">
+        {count}
+      </span>
+    </button>
+  )
+}

package/src/SearchInput.mdx

@@ -15,7 +15,7 @@ optional keyboard hint at the right edge.
 - Filtering a list, live, above the list it filters.
 - As a **launcher affordance**: keep the input `pointer-events-none` and
   open your command surface from a click on the surround — the component
-  is the same either way, and `shortcut` shows the way in ("⌘ K").
+  is the same either way, and `shortcut` shows the way in ("Ctrl+K").
 
 ## When not
 
@@ -27,7 +27,7 @@ optional keyboard hint at the right edge.
 ```tsx
 import { SearchInput } from '@estiva-app/ui'
 
-<SearchInput value={query} onChange={(e) => setQuery(e.target.value)} shortcut="⌘ K" />
+<SearchInput value={query} onChange={(e) => setQuery(e.target.value)} shortcut="Ctrl+K" />
 ```
 
 - The default placeholder is "Search…" — override it with your own.

package/src/SearchInput.stories.tsx

@@ -15,10 +15,10 @@ export const Default: Story = {}
 
 /** The keyboard hint at the right edge. */
 export const WithShortcut: Story = {
-  args: { shortcut: '⌘ K' },
+  args: { shortcut: 'Ctrl+K' },
 }
 
 /** The default placeholder says only "Search…" — the app names what is searched. */
 export const OwnPlaceholder: Story = {
-  args: { placeholder: 'Search documents…', shortcut: '⌘ K' },
+  args: { placeholder: 'Search documents…', shortcut: 'Ctrl+K' },
 }

package/src/SearchInput.tsx

@@ -1,5 +1,6 @@
 import { type InputHTMLAttributes } from 'react'
 import { cn } from './cn'
+import { Kbd } from './Kbd'
 
 /**
  * Peek's SearchInput (2026-09-01), verbatim: an inset field with a hairline
@@ -15,7 +16,7 @@ import { cn } from './cn'
  * command launcher. The component is the same either way.
  */
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
-  /** A keyboard hint drawn at the right edge, e.g. "⌘ K". */
+  /** A keyboard hint drawn at the right edge, e.g. "Ctrl+K". */
   shortcut?: string
   className?: string
 }
@@ -35,11 +36,7 @@ export function SearchInput({ shortcut, className, placeholder = 'Search…', ..
         placeholder={placeholder}
         {...props}
       />
-      {shortcut && (
-        <div className="flex items-center justify-center px-1 py-px rounded-sm bg-bg-inset border border-border-strong shrink-0 signal:bg-[rgba(255,255,255,.05)] signal:border-b-2">
-          <span className="text-caption text-text-secondary whitespace-nowrap signal:font-mono signal:text-[10px]">{shortcut}</span>
-        </div>
-      )}
+      {shortcut && <Kbd>{shortcut}</Kbd>}
     </div>
   )
 }

package/src/Tooltip.mdx

@@ -19,6 +19,11 @@ viewport, kept 8px inside its edges.
 - The word for an icon-only control — alongside its `aria-label`, never
   instead of it (IconButton wires this for you via its `tooltip` prop).
 - The full text behind a truncation.
+- **The key that does the same thing** — pass `shortcut` and it is drawn as
+  the `Kbd` chip after the label. For an icon-only control whose only other
+  affordance is a keyboard shortcut, the tooltip is the only place to say so.
+
+<Canvas of={TooltipStories.ShortcutComparison} />
 
 <Canvas of={TooltipStories.OnADisabledControl} />
 
@@ -45,6 +50,10 @@ import { WithTooltip } from '@estiva-app/ui'
   `wrapperClassName="min-w-0 shrink"`.
 - It shows on **hover only** — there is no focus or touch trigger. Don't
   put anything behind it that a keyboard user must reach.
+- `shortcut` renders, it does not format. A modifier is called Cmd on Apple
+  platforms and Ctrl elsewhere, and only the caller knows which it is
+  looking at — so pass the finished label. `IconButton` forwards its own
+  `tooltipShortcut` here.
 
 ## Props
 

package/src/Tooltip.stories.tsx

@@ -14,6 +14,21 @@ type Story = StoryObj<typeof meta>
 /** The static tooltip surface. */
 export const Default: Story = {}
 
+/** With a key hint — drawn as the `Kbd` chip after the label. */
+export const WithShortcut: Story = { args: { label: 'Bold', shortcut: 'Cmd+B' } }
+
+/** With and without, so the difference is one glance. */
+export const ShortcutComparison: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col items-start gap-2">
+      <Tooltip label="Comment" />
+      <Tooltip label="Bold" shortcut="Cmd+B" />
+      <Tooltip label="Heading" shortcut="Ctrl+Alt+1" />
+    </div>
+  ),
+}
+
 /** Hover the button — WithTooltip portals the tooltip above the trigger. */
 export const OnHoverTop: Story = {
   parameters: { controls: { disable: true } },

package/src/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { cn } from './cn'
+import { Kbd } from './Kbd'
 
 /**
  * Peek's Tooltip and WithTooltip (2026-08-28), verbatim, in one file.
@@ -13,19 +14,26 @@ import { cn } from './cn'
  */
 export interface TooltipProps {
   label: string
+  /** The key that does the same thing, drawn as the `Kbd` chip after the label.
+   *  Pass it already formatted for the platform — this renders, it does not
+   *  decide whether the modifier is a glyph or a word. */
+  shortcut?: string
   className?: string
 }
 
-export function Tooltip({ label, className }: TooltipProps) {
+export function Tooltip({ label, shortcut, className }: TooltipProps) {
   return (
-    <div role="tooltip" className={cn('bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center px-2 shadow-lg', className)}>
+    <div role="tooltip" className={cn('bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg', className)}>
       <span className="text-caption text-text-primary whitespace-nowrap">{label}</span>
+      {shortcut && <Kbd>{shortcut}</Kbd>}
     </div>
   )
 }
 
 export interface WithTooltipProps {
   label: string
+  /** Passed straight to the surface — see `TooltipProps.shortcut`. */
+  shortcut?: string
   placement?: 'top' | 'bottom'
   /** Extra classes on the wrapper — e.g. `min-w-0 shrink` so a truncating label keeps truncating inside it. */
   wrapperClassName?: string
@@ -35,7 +43,7 @@ export interface WithTooltipProps {
 const GAP = 6
 const VIEWPORT_PAD = 8
 
-export function WithTooltip({ label, placement = 'top', wrapperClassName, children }: WithTooltipProps) {
+export function WithTooltip({ label, shortcut, placement = 'top', wrapperClassName, children }: WithTooltipProps) {
   const [show, setShow] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const tooltipRef = useRef<HTMLDivElement>(null)
@@ -69,7 +77,7 @@ export function WithTooltip({ label, placement = 'top', wrapperClassName, childr
       {show &&
         createPortal(
           <div ref={tooltipRef} style={style}>
-            <Tooltip label={label} />
+            <Tooltip label={label} shortcut={shortcut} />
           </div>,
           document.body,
         )}

package/src/TopBar.mdx

@@ -44,7 +44,7 @@ import { TopBar, IdentityMenu, SearchInput } from '@estiva-app/ui'
 
 <TopBar
   logo="Estiva"
-  search={<SearchInput shortcut="⌘ K" className="w-[290px]" />}
+  search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />}
   right={<IdentityMenu me={me} signedIn={signedIn} />}
 />
 ```

package/src/TopBar.stories.tsx

@@ -54,7 +54,7 @@ const Behind = ({ children }: { children: ReactNode }) => (
 export const Solid: Story = {
   render: (args) => (
     <Below>
-      <TopBar {...args} logo="Estiva" search={<SearchInput shortcut="⌘ K" className="w-[290px]" />} right={face} />
+      <TopBar {...args} logo="Estiva" search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />} right={face} />
     </Below>
   ),
 }
@@ -72,7 +72,7 @@ export const SolidNoSearch: Story = {
 export const Floating: Story = {
   render: (args) => (
     <Behind>
-      <TopBar {...args} variant="floating" menu={menuButton} search={<SearchInput shortcut="⌘ K" className="w-[290px]" />} right={face} />
+      <TopBar {...args} variant="floating" menu={menuButton} search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />} right={face} />
     </Behind>
   ),
 }

package/src/index.ts

@@ -18,6 +18,7 @@ export { Checkbox, type CheckboxProps } from './Checkbox'
 export { Chip, type ChipProps, type ChipType } from './Chip'
 export { ChipInput, InputChip, type ChipInputOption, type ChipInputProps, type InputChipProps } from './ChipInput'
 export { IconButton, type IconButtonProps, type IconButtonVariant } from './IconButton'
+export { Kbd, type KbdProps } from './Kbd'
 export { IdentityMenu, IdentityPanel, type Identity, type IdentityMenuProps, type IdentityPanelProps } from './IdentityMenu'
 export { Tooltip, WithTooltip, type TooltipProps, type WithTooltipProps } from './Tooltip'
 export { Field, useFieldControlId, type FieldProps } from './Field'
@@ -31,7 +32,7 @@ export { EditableText, type EditableTextProps } from './EditableText'
 export { EmptyState, type EmptyStateProps } from './EmptyState'
 export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
 export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
-export { EnterHint, Menu, MenuItem, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuProps, type MenuSubProps } from './Menu'
+export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
 export { clampBox, fitMenu, fitSubmenu } from './fit'
 export { NavItem, type NavItemProps } from './NavItem'
 export { Person, type PersonProps } from './Person'
@@ -41,6 +42,7 @@ export { Sidebar, type SidebarProps } from './Sidebar'
 export { TopBar, type TopBarProps } from './TopBar'
 export { PersonTrigger, type PersonTriggerProps } from './PersonTrigger'
 export { Property, type PropertyProps } from './Property'
+export { Reaction, type ReactionProps } from './Reaction'
 export { SearchInput, type SearchInputProps } from './SearchInput'
 export { SectionHeader, type SectionAction, type SectionHeaderProps } from './SectionHeader'
 export { SectionLabel } from './SectionLabel'

package/tailwind-preset.js

@@ -63,7 +63,15 @@ export const estivaContent = [own('./dist/*.js'), own('./src/*.{ts,tsx}')]
 export default {
 
   darkMode: 'class',
-  plugins: [plugin(({ addVariant }) => addVariant('signal', '.signal &'))],
+  // `signal` is Peek's shipped theme (a class); `ship` is Ship's (an attribute,
+  // see tokens.css). Both exist so a treatment can be given to the two apps
+  // without changing the plain light/dark themes the docs render in.
+  plugins: [
+    plugin(({ addVariant }) => {
+      addVariant('signal', '.signal &')
+      addVariant('ship', "[data-theme='ship'] &")
+    }),
+  ],
   theme: {
     extend: {
       fontFamily: {