@estiva-app/ui 0.12.9 → 0.13.0

package/src/Popover.test.tsx

@@ -223,3 +223,41 @@ describe('Popover, centred on its anchor', () => {
     expect(positioner?.getAttribute('data-align')).toBe('center')
   })
 })
+
+/**
+ * The padding lives on the scrolling content, so the scrollbar hugs the panel
+ * (D63) — and a caller's padding has to land there too. At 0.12.6 a toolbar's
+ * `p-1` on `className` was added to the content's `p-2` instead of replacing
+ * it, and every toolbar in a Popover grew 8px a side (PLAN Finding 60).
+ * Measured in Chrome after the fix: the toolbar 5px inside the panel's edge,
+ * as on 0.12.5.
+ */
+describe('Popover, padding', () => {
+  // The scrolling content is the box that carries the separator rule.
+  const contentOf = (child: HTMLElement) => child.closest('[class*="role=separator"]') as HTMLElement
+
+  it('pads its content 8px by default', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} ariaLabel="A panel">
+        <span>Inside</span>
+      </Popover>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }))
+    const content = contentOf(await screen.findByText('Inside'))
+    expect(content.className).toContain('p-2')
+  })
+
+  it('takes a caller’s padding on contentClassName, instead of the 8px', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} ariaLabel="A toolbar" className="w-auto" contentClassName="p-1">
+        <span>Inside</span>
+      </Popover>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }))
+    const content = contentOf(await screen.findByText('Inside'))
+    expect(content.className.split(/\s+/)).toContain('p-1')
+    expect(content.className.split(/\s+/)).not.toContain('p-2')
+    // And the panel carries none of it.
+    expect((await screen.findByRole('dialog')).className.split(/\s+/)).not.toContain('p-1')
+  })
+})

package/src/Popover.tsx

@@ -91,8 +91,23 @@ export interface PopoverProps {
    *  point at it instead, with `aria-labelledby`. */
   ariaLabel?: string
   children: ReactNode
-  /** On the panel's surface — its width, its internal rhythm. */
+  /**
+   * On the panel's surface — its width. **Not its padding**: see
+   * `contentClassName`.
+   */
   className?: string
+  /**
+   * The padding around the children, as a class. Default `p-2`, 8px — what a
+   * panel of rows or a small form wants. **A toolbar wants `p-1`.**
+   *
+   * The padding is on the scrolling content, not on the panel, so a scrollbar
+   * is drawn over it and hugs the panel's edge (D63). A padding class on
+   * `className` therefore does not replace this one — it adds to it: that is
+   * how every toolbar in a `Popover` grew 8px a side at `0.12.6`, measured 13px
+   * from the panel's edge to the toolbar where it had been 5px (PLAN Finding
+   * 60). Set it here.
+   */
+  contentClassName?: string
   /**
    * A cap on the scrolling box, as a class — `max-h-[360px]`. Without one the
    * panel grows to the room the positioner has, which is the right default for
@@ -121,7 +136,7 @@ export interface PopoverProps {
 const GAP = 4
 const VIEWPORT_PAD = 8
 
-export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, maxHeight }: PopoverProps) {
+export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, contentClassName, maxHeight }: PopoverProps) {
   /* A rect is not an element, so it becomes a virtual anchor — the one shape
      Floating UI takes besides an element. */
   const anchorTarget = useMemo(() => {
@@ -181,10 +196,11 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
             {/* As in Menu: the cap on the scrolling box, and the padding on the
                 content rather than the panel, so the bar is drawn over the
                 padding instead of 9px inside it (D63). A caller's `maxHeight`
-                replaces the cap — see the prop. */}
+                replaces the cap, and a caller's `contentClassName` the padding
+                — see the props. */}
             <ScrollArea
               viewportClassName={maxHeight ?? 'max-h-[var(--available-height)]'}
-              contentClassName="flex flex-col p-2 [&>[role=separator]]:mx-0"
+              contentClassName={cn('flex flex-col p-2 [&>[role=separator]]:mx-0', contentClassName)}
             >
               {children}
             </ScrollArea>

package/src/ProgressBar.mdx

@@ -0,0 +1,47 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as ProgressBarStories from './ProgressBar.stories'
+
+<Meta of={ProgressBarStories} />
+
+# ProgressBar
+
+How much of something is done: a thin rounded track with a success-coloured
+fill.
+
+<Canvas of={ProgressBarStories.WithWords} />
+
+## When
+
+- **`default`** — 6px, the success colour: a bar someone reads, with the words
+  printed beside it.
+- **`quiet`** — 4px, the muted success colour: a glance on the same line as a
+  count.
+
+<Canvas of={ProgressBarStories.Quiet} />
+
+## When not
+
+- Something still loading, with no amount to show → **Skeleton**.
+- A state with a verdict rather than an amount → **Chip**.
+
+## How
+
+```tsx
+import { ProgressBar } from '@estiva-app/ui'
+
+<ProgressBar value={done} max={total} label="Items done" />
+<span className="text-caption text-text-muted">{done} of {total} done</span>
+```
+
+- `label` is required: it is the bar's accessible name. A screen reader hears
+  the name and the share as a percentage; print the counts beside the bar for
+  everyone else.
+- A value above `max` fills the bar and no further. `max={0}` is an empty bar.
+- It is built on Base UI's `Progress`, which owns the `progressbar` role and
+  its numbers. Do not nest it inside a button: the bar's name would become part
+  of the button's.
+- `className` is for placement: a width, a margin, `flex-1` in a row.
+
+## Props
+
+<Controls of={ProgressBarStories.Default} />

package/src/ProgressBar.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ProgressBar } from './ProgressBar'
+
+const meta = {
+  title: 'Feedback/ProgressBar',
+  component: ProgressBar,
+  args: { value: 10, max: 14, label: 'Items done', variant: 'default' },
+  argTypes: { variant: { control: 'inline-radio', options: ['default', 'quiet'] } },
+  decorators: [(Story) => <div className="w-[346px]">{Story()}</div>],
+} satisfies Meta<typeof ProgressBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 6px, the success colour: a bar someone reads. */
+export const Default: Story = {}
+
+/** The bar, then the words that say it. */
+export const WithWords: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-2">
+      <ProgressBar {...args} />
+      <span className="text-caption tabular-nums text-text-muted">
+        {args.value} of {args.max} done
+      </span>
+    </div>
+  ),
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled: the words are
+  // muted caption text, 3.94:1 in signal (computed 2026-09-14; AA 4.5:1) — the same
+  // number NavItem's count is excepted for.
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
+}
+
+/** 4px, the muted success colour: a glance, on the same line as a count — a caption label, 12px before the bar. */
+export const Quiet: Story = {
+  args: { variant: 'quiet', value: 3, max: 4 },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <span className="shrink-0 text-caption text-text-secondary">
+        Items ({args.value}/{args.max})
+      </span>
+      <ProgressBar {...args} className="flex-1" />
+    </div>
+  ),
+}
+
+export const Empty: Story = { args: { value: 0, max: 14 } }
+export const Complete: Story = { args: { value: 14, max: 14 } }

package/src/ProgressBar.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+/**
+ * What the ProgressBar page claims, pinned: it is a named progressbar carrying
+ * its numbers; the fill is the done share of the track, capped at full; an
+ * empty set is an empty bar, not a division by zero; each look is its own
+ * class list; and the caller's className lands on the outside, for placement.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { ProgressBar } from './ProgressBar'
+
+afterEach(cleanup)
+
+const classesOf = (el: Element) => el.getAttribute('class')?.split(' ').filter(Boolean) ?? []
+const fillOf = (bar: HTMLElement) => bar.firstElementChild!.firstElementChild as HTMLElement
+
+describe('ProgressBar', () => {
+  it('is a progressbar named by its label, carrying its numbers', () => {
+    render(<ProgressBar value={10} max={14} label="Items done" />)
+    const bar = screen.getByRole('progressbar', { name: 'Items done' })
+    expect(bar.getAttribute('aria-valuenow')).toBe('10')
+    expect(bar.getAttribute('aria-valuemin')).toBe('0')
+    expect(bar.getAttribute('aria-valuemax')).toBe('14')
+  })
+
+  it('fills the done share of the track', () => {
+    render(<ProgressBar value={7} max={14} label="Items done" />)
+    expect(fillOf(screen.getByRole('progressbar')).style.width).toBe('50%')
+  })
+
+  it('never fills past full', () => {
+    render(<ProgressBar value={20} max={14} label="Items done" />)
+    expect(fillOf(screen.getByRole('progressbar')).style.width).toBe('100%')
+  })
+
+  it('an empty set is an empty bar, and still says its max is 0', () => {
+    render(<ProgressBar value={0} max={0} label="Items done" />)
+    const bar = screen.getByRole('progressbar')
+    expect(fillOf(bar).style.width).toBe('0%')
+    expect(bar.getAttribute('aria-valuemax')).toBe('0')
+  })
+
+  it('default is 6px with the success colour; quiet is 4px with the muted one', () => {
+    render(
+      <>
+        <ProgressBar value={1} max={2} label="Default" />
+        <ProgressBar value={1} max={2} label="Quiet" variant="quiet" />
+      </>,
+    )
+    const standard = screen.getByRole('progressbar', { name: 'Default' })
+    expect(classesOf(standard.firstElementChild!)).toContain('h-1.5')
+    expect(classesOf(fillOf(standard))).toContain('bg-success-default')
+    const quiet = screen.getByRole('progressbar', { name: 'Quiet' })
+    expect(classesOf(quiet.firstElementChild!)).toContain('h-1')
+    expect(classesOf(fillOf(quiet))).toContain('bg-success-muted')
+  })
+
+  it("the caller's className lands on the outside", () => {
+    render(<ProgressBar value={1} max={2} label="Items done" className="flex-1" />)
+    expect(classesOf(screen.getByRole('progressbar'))).toContain('flex-1')
+  })
+})

package/src/ProgressBar.tsx

@@ -0,0 +1,56 @@
+import { Progress } from '@base-ui/react/progress'
+import { cn } from './cn'
+
+/**
+ * How much of something is done: a thin rounded track with a success-coloured
+ * fill. On Base UI's `Progress`, which owns the `progressbar` role and its
+ * numbers; this component writes the look.
+ *
+ * Both apps hand-built one, each with its own `role="progressbar"` (UIG-27).
+ * Their two looks are both kept, because each does a different job:
+ *
+ * - `default` is Ship's (`ui/ProgressBar.tsx`): 6px, the success colour — a
+ *   bar someone reads, with the words printed beside it.
+ * - `quiet` is Peek's (`ui/ProjectTickets.tsx`): 4px, the muted success colour
+ *   — a glance on the same line as a count, "not a chart".
+ *
+ * The props are Ship's, unchanged. The bar alone says nothing a screen reader
+ * can use beyond its numbers, so `label` is required; Base UI reads the value
+ * out as a percentage.
+ */
+export type ProgressBarVariant = 'default' | 'quiet'
+
+const TRACK_CLASSES: Record<ProgressBarVariant, string> = {
+  default: 'h-1.5 w-full overflow-hidden rounded-full bg-bg-inset',
+  // 4px, Katerina's ruling of 14 September; Peek's own bar is 3px until it takes this one.
+  quiet: 'h-1 w-full overflow-hidden rounded-full bg-bg-inset',
+}
+
+const INDICATOR_CLASSES: Record<ProgressBarVariant, string> = {
+  default: 'h-full rounded-full bg-success-default transition-[width]',
+  quiet: 'h-full rounded-full bg-success-muted transition-[width] duration-300',
+}
+
+export interface ProgressBarProps {
+  /** How many are done. */
+  value: number
+  /** How many there are. At `0` the bar is empty. */
+  max: number
+  /** The accessible name — "Items done". */
+  label: string
+  /** Default `default`. */
+  variant?: ProgressBarVariant
+  /** Placement only: a width, a margin, `flex-1` in a row. */
+  className?: string
+}
+
+export function ProgressBar({ value, max, label, variant = 'default', className }: ProgressBarProps) {
+  return (
+    // `max={0}` needs no guard: Base UI reads the 0/0 share as an empty bar.
+    <Progress.Root value={value} max={max} aria-label={label} className={className}>
+      <Progress.Track className={TRACK_CLASSES[variant]}>
+        <Progress.Indicator className={INDICATOR_CLASSES[variant]} />
+      </Progress.Track>
+    </Progress.Root>
+  )
+}

package/src/ReactionPicker.mdx

@@ -32,7 +32,7 @@ The reactions on offer, to choose one from — icon buttons holding emoji, on a
 ```tsx
 import { ReactionPicker } from '@estiva-app/ui'
 
-<Popover side="top" align="right" trigger={reactButton} ariaLabel="Reactions" className="w-auto p-1">
+<Popover side="top" align="right" trigger={reactButton} ariaLabel="Reactions" className="w-auto" contentClassName="p-1">
   <ReactionPicker
     surface={false}
     options={[

package/src/ReactionPicker.stories.tsx

@@ -25,7 +25,7 @@ const OPTIONS: ReactionOption[] = [
 ]
 
 const meta = {
-  title: 'Primitives/ReactionPicker',
+  title: 'Components/ReactionPicker',
   component: ReactionPicker,
   args: { options: OPTIONS, onSelect: () => {} },
   argTypes: { options: { control: false }, onSelect: { control: false } },
@@ -62,7 +62,8 @@ export const FromATrigger: Story = {
             side="top"
             align="right"
             ariaLabel="Reactions"
-            className="w-auto min-w-0 p-1"
+            className="w-auto min-w-0"
+            contentClassName="p-1"
             trigger={
               <ToolbarButton aria-label="React" tooltip="React">
                 <IconMoodPlus size={16} stroke={1.5} />

package/src/Toolbar.stories.tsx

@@ -129,7 +129,8 @@ export const OnAnExistingSurface: Story = {
       /* Above the control that opened it: a strip acts on what is under it.
          `side` is the preference; Base UI flips it when there is no room. */
       side="top"
-      className="w-auto min-w-0 p-1"
+      className="w-auto min-w-0"
+      contentClassName="p-1"
     >
       <Toolbar aria-label="Formatting" surface={false}>
         <ToolbarButton aria-label="Item one" tooltip="Item one">{icon}</ToolbarButton>

package/src/index.ts

@@ -10,13 +10,24 @@
  * TypeScript that produced it.
  */
 export { AppShell, type AppShellProps } from './AppShell'
+export { AttachmentCard, type AttachmentCardProps, type AttachmentCardState } from './AttachmentCard'
 export { Avatar, hueFor, initialsFor, type AvatarProps } from './Avatar'
 export { AvatarGroup, type AvatarGroupMember, type AvatarGroupProps } from './AvatarGroup'
 export { Banner, type BannerProps, type BannerTone } from './Banner'
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'
+export { Card, type CardAttention, type CardFill, type CardHover, type CardProps } from './Card'
 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 {
+  INLINE_CHIP_CLASSES,
+  INLINE_CHIP_TONE_CLASSES,
+  InlineChip,
+  inlineChipClassName,
+  type InlineChipProps,
+  type InlineChipTone,
+} from './InlineChip'
+export { Link, type LinkProps, type LinkVariant } from './Link'
 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'
@@ -30,6 +41,7 @@ export { DialogShell, type DialogShellProps } from './DialogShell'
 export { Divider, type DividerProps } from './Divider'
 export { EditableText, type EditableTextProps } from './EditableText'
 export { EmptyState, type EmptyStateProps } from './EmptyState'
+export { ProgressBar, type ProgressBarProps, type ProgressBarVariant } from './ProgressBar'
 export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
 export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
 export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'

package/stories/Choosing.mdx

@@ -69,11 +69,15 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | You need | Reach for |
 |---|---|
 | Label–value rows (a details rail) | **Property** — `row` and `stacked` |
+| One thing — a conversation, a project, an object — as a box you can pick | **Card** — the fill by what it sits on; `href` for a link, `hover="fill"` in a feed |
 | A section heading, chevron, hover actions | **SectionHeader** |
 | A group of rows that opens and closes, and stays how you left it | **CollapsibleSection** — `storageKey` remembers |
 | The uppercase micro-label | **SectionLabel** |
 | A hairline | **Divider** |
 | Where am I, and the way back up | **Breadcrumb** |
+| A link — in text, on a title, beside a note, or a whole box | **Link** — `text`, `quiet`, `underlined`, `plain`; `external` for a new tab |
+| A document or an image attached to something, posted or waiting to be sent | **AttachmentCard** — the file decides the shape; `pending` in a composer |
+| A person or a thing named inside a sentence | **InlineChip** — one line high, level with the words; `href` makes it a link |
 | The key that does this too | **Kbd** — or the `shortcut` prop on **MenuItem**, **Tooltip** and **SearchInput** |
 
 ## Feedback
@@ -81,6 +85,7 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | You need | Reach for |
 |---|---|
 | Data is on its way | **Skeleton** — shaped like what will arrive |
+| How much of something is done | **ProgressBar** — `default` to be read, with the words beside it; `quiet` for a glance beside a count |
 | Nothing to show | **EmptyState** — says what would fill it; `page` when the whole page is empty (icon, centred), `section` when one part of it is (the line alone, left) |
 | It happened, briefly | **Toast**, via `useToast` inside a `ToastProvider` |
 | It happened, and must not be missed | **Toast** with `durationMs: 0` and an action — it floats and stays until dismissed (D21) |