@duro-app/ui 5.32.0 → 5.34.0

package/dist/table.js

@@ -1,6 +1,6 @@
-import { M as F, q as gt, R as it, H as kt, t as pt, v as bt, w as ft, x as mt, b as ht, g as yt, r as St, y as Tt } from "./Table-ypIvytAS.js";
+import { M as F, q as gt, R as it, H as kt, t as pt, v as bt, w as ft, x as mt, b as ht, g as yt, r as St, y as Tt } from "./Table-IuD0tooi.js";
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
-import { c as H, m as p, d as b } from "./compiler-runtime-BuugS4D0.js";
+import { c as H, m as p, d as b } from "./compiler-runtime-CV6vsf8h.js";
 import { flexRender as E, useReactTable as rt, getPaginationRowModel as Ct, getFilteredRowModel as vt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";
 import { useState as G, useCallback as wt, useRef as K, useEffect as Z, useLayoutEffect as zt } from "react";
 import { useVirtualizer as Vt } from "@tanstack/react-virtual";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.32.0",
+  "version": "5.34.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -92,11 +92,12 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.13",
     "qrcode": "^1.5.4",
-    "@duro-app/tokens": "^5.32.0"
+    "@duro-app/tokens": "^5.34.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",
     "@hookform/resolvers": "^5.0.0",
+    "@phosphor-icons/core": "2.1.1",
     "@types/qrcode": "^1.5.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/src/components/Avatar/Avatar.meta.ts

@@ -0,0 +1,31 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A person or entity as a picture, else their initials, else a neutral placeholder. alt is required and is the accessible name in all three states. sm, md and lg map to the controlSm, thumbSm and iconXxl size tokens; shape is circle or square. An image that fails to load falls back to the initials.',
+  whenToUse: [
+    'The owner, author or assignee of a record, beside their name',
+    'A List.Leading slot for people or accounts',
+  ],
+  whenNotToUse: [
+    'A glyph for a thing or a status — use Icon or StatusIcon',
+    'A photo that is the content — use an image element inside Card',
+  ],
+  relatedTo: [
+    {
+      component: 'List',
+      kind: 'composition',
+      relationship: 'Avatar fills List.Leading for people and accounts',
+    },
+    {
+      component: 'Icon',
+      kind: 'contrast',
+      relationship: 'Icon draws a glyph; Avatar identifies someone',
+    },
+  ],
+  example: `<Inline gap="sm" align="center">
+  <Avatar src="/people/ada.png" alt="Ada Lovelace" />
+  <Avatar alt="Grace Hopper" initials="GH" size="lg" />
+  <Avatar alt="Unassigned" shape="square" />
+</Inline>`,
+}

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,79 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, waitFor} from 'storybook/test'
+import {Avatar} from './Avatar'
+import {Inline} from '../Inline/Inline'
+import {onThemeSurface} from '../../docs/themedSurface'
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  decorators: [onThemeSurface],
+  argTypes: {
+    size: {control: 'select', options: ['sm', 'md', 'lg']},
+    shape: {control: 'select', options: ['circle', 'square']},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Avatar>
+
+// A 1x1 transparent GIF: a real image that needs no network.
+const PICTURE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+export const Default: Story = {
+  args: {alt: 'Grace Hopper', initials: 'GH'},
+}
+
+/** The image when there is a src; else the initials; else a neutral placeholder. */
+export const ImageInitialsPlaceholder: Story = {
+  render: () => (
+    <Inline gap="md" align="center">
+      <Avatar src={PICTURE} alt="Ada Lovelace" />
+      <Avatar alt="Grace Hopper" initials="GH" />
+      <Avatar alt="Unassigned" />
+    </Inline>
+  ),
+  play: async ({canvas}) => {
+    const image = canvas.getByRole('img', {name: 'Ada Lovelace'})
+    await expect(image.tagName).toBe('IMG')
+    await expect(image).toHaveAttribute('src', PICTURE)
+
+    const initials = canvas.getByRole('img', {name: 'Grace Hopper'})
+    await expect(initials.tagName).not.toBe('IMG')
+    await expect(initials).toHaveTextContent('GH')
+
+    const placeholder = canvas.getByRole('img', {name: 'Unassigned'})
+    await expect(placeholder).toBeEmptyDOMElement()
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <Inline gap="md" align="center">
+      <Avatar alt="Small" initials="S" size="sm" />
+      <Avatar alt="Medium" initials="M" size="md" />
+      <Avatar alt="Large" initials="L" size="lg" />
+    </Inline>
+  ),
+}
+
+export const Shapes: Story = {
+  render: () => (
+    <Inline gap="md" align="center">
+      <Avatar alt="Circle" initials="C" shape="circle" />
+      <Avatar alt="Square" initials="S" shape="square" />
+    </Inline>
+  ),
+}
+
+/** An image that cannot load falls back to the initials. */
+export const BrokenImage: Story = {
+  args: {src: 'data:image/png;base64,not-an-image', alt: 'Alan Turing', initials: 'AT'},
+  play: async ({canvas}) => {
+    await waitFor(async () => {
+      const avatar = canvas.getByRole('img', {name: 'Alan Turing'})
+      await expect(avatar.tagName).not.toBe('IMG')
+      await expect(avatar).toHaveTextContent('AT')
+    })
+  },
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,42 @@
+import {useState} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type AvatarSize = 'sm' | 'md' | 'lg'
+export type AvatarShape = 'circle' | 'square'
+
+export interface AvatarProps {
+  /** Image URL. Without it, or when it fails to load, the initials show. */
+  src?: string
+  /** The accessible name: who or what this avatar stands for. Never empty. */
+  alt: string
+  /** Shown when there is no image; one or two characters. */
+  initials?: string
+  /** sm 28, md 40, lg 48 (the controlSm, thumbSm and iconXxl size tokens). Default md. */
+  size?: AvatarSize
+  /** Default circle. */
+  shape?: AvatarShape
+}
+
+/**
+ * A person or entity as a picture, else their initials, else a neutral blank. The image, the
+ * initials and the blank all carry `alt` as the accessible name.
+ */
+export function Avatar({src, alt, initials, size = 'md', shape = 'circle'}: AvatarProps) {
+  const [failedSrc, setFailedSrc] = useState<string | null>(null)
+  const showImage = src !== undefined && src !== failedSrc
+  const frame = [styles.base, styles[size], styles[shape]]
+
+  if (showImage) {
+    return (
+      <html.div style={frame}>
+        <html.img src={src} alt={alt} onError={() => setFailedSrc(src)} style={styles.image} />
+      </html.div>
+    )
+  }
+  return (
+    <html.div role="img" aria-label={alt} style={frame}>
+      {initials ? <html.span aria-hidden={true}>{initials}</html.span> : null}
+    </html.div>
+  )
+}

package/src/components/Avatar/styles.css.ts

@@ -0,0 +1,32 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    overflow: 'hidden',
+    backgroundColor: colors.neutralBg,
+    color: colors.neutralText,
+    fontWeight: typography.fontWeightMedium,
+    lineHeight: 1,
+  },
+
+  sm: {width: sizes.controlSm, height: sizes.controlSm, fontSize: typography.fontSizeXs},
+  md: {width: sizes.thumbSm, height: sizes.thumbSm, fontSize: typography.fontSizeSm},
+  lg: {width: sizes.iconXxl, height: sizes.iconXxl, fontSize: typography.fontSizeMd},
+
+  circle: {borderRadius: radii.full},
+  square: {borderRadius: radii.sm},
+
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+})

package/src/components/Icon/Icon.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'SVG icon component. Renders stroke or filled icons from the design system icon set. Size scales with the size prop. Use inside buttons, badges, or standalone.',
+    'SVG icon component. Renders stroke or filled icons from the design system icon set, plus Phosphor glyphs (regular weight, fill style, generated by scripts/generate-phosphor-icons.mjs from phosphor-names.json) under their Phosphor names. Size scales with the size prop. Use inside buttons, badges, or standalone.',
   whenToUse: [
     'Button icons (inside Button children)',
     'Status indicators alongside text',

package/src/components/Icon/Icon.native.tsx

@@ -2,7 +2,7 @@ import {createElement} from 'react'
 import Svg, {Circle, Ellipse, Line, Path, Polygon, Polyline, Rect} from 'react-native-svg'
 import {ICON_SIZES, type ColorToken} from '@duro-app/tokens/keys'
 import {useResolvedColors} from '../ThemeProvider/ThemeProvider'
-import {GLYPHS, type Paint, type Shape} from './geometry'
+import {DEFAULT_VIEW_BOX, GLYPHS, type Paint, type Shape} from './geometry'
 import type {IconProps} from './types'
 
 export type {IconName, IconProps, IconSize} from './types'
@@ -37,7 +37,7 @@ export function Icon({name, size: sizeToken = 'lg', color = 'text'}: IconProps)
     glyph.style === 'fill' ? {fill: 'currentColor'} : {fill: 'none', stroke: 'currentColor'}
   return (
     <Svg
-      viewBox="0 0 24 24"
+      viewBox={glyph.viewBox ?? DEFAULT_VIEW_BOX}
       width={size}
       height={size}
       color={resolved}

package/src/components/Icon/Icon.tsx

@@ -2,7 +2,7 @@ import {createElement} from 'react'
 import {ICON_SIZES} from '@duro-app/tokens/keys'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
-import {GLYPHS, type Shape} from './geometry'
+import {DEFAULT_VIEW_BOX, GLYPHS, type Shape} from './geometry'
 import type {IconProps} from './types'
 
 export type {IconName, IconProps, IconSize} from './types'
@@ -16,11 +16,12 @@ function svgShape(shape: Shape, key: number) {
 export function Icon({name, size: sizeToken = 'lg', color}: IconProps) {
   const size = ICON_SIZES[sizeToken]
   const glyph = GLYPHS[name]
+  const viewBox = glyph.viewBox ?? DEFAULT_VIEW_BOX
   const shapes = glyph.shapes.map(svgShape)
   const style = color ? {color: colors[color]} : undefined
   if (glyph.style === 'fill') {
     return (
-      <svg viewBox="0 0 24 24" fill="currentColor" width={size} height={size} style={style}>
+      <svg viewBox={viewBox} fill="currentColor" width={size} height={size} style={style}>
         {shapes}
       </svg>
     )
@@ -28,7 +29,7 @@ export function Icon({name, size: sizeToken = 'lg', color}: IconProps) {
 
   return (
     <svg
-      viewBox="0 0 24 24"
+      viewBox={viewBox}
       fill="none"
       stroke="currentColor"
       strokeWidth={2}

package/src/components/Icon/geometry.ts

@@ -1,3 +1,4 @@
+import {PHOSPHOR_GLYPHS} from './phosphor-glyphs'
 import type {IconName} from './types'
 
 /**
@@ -33,10 +34,16 @@ export type Shape =
 
 export interface Glyph {
   readonly style: 'stroke' | 'fill'
+  /** The glyph's own coordinate space; the 24-unit grid when absent. */
+  readonly viewBox?: string
   readonly shapes: readonly Shape[]
 }
 
+/** The grid Duro's own glyphs are drawn on. */
+export const DEFAULT_VIEW_BOX = '0 0 24 24'
+
 export const GLYPHS: Record<IconName, Glyph> = {
+  ...PHOSPHOR_GLYPHS,
   'x-circle': {
     style: 'stroke',
     shapes: [