@estiva-app/ui 0.5.0 → 0.6.0

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'

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: {