@estiva-app/ui 0.12.10 → 0.13.0

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.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 } },

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) |