@duro-app/ui 5.34.0 → 5.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.34.0",
+  "version": "5.34.2",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -92,7 +92,7 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.13",
     "qrcode": "^1.5.4",
-    "@duro-app/tokens": "^5.34.0"
+    "@duro-app/tokens": "^5.34.2"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

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

@@ -2,7 +2,7 @@ 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.',
+    '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. svg takes a complete SVG document string generated by the app (never user-supplied markup) and draws it filling the frame. Precedence: src (until it fails to load) > svg > initials > blank.',
   whenToUse: [
     'The owner, author or assignee of a record, beside their name',
     'A List.Leading slot for people or accounts',
@@ -25,6 +25,7 @@ export const meta: ComponentMeta = {
   ],
   example: `<Inline gap="sm" align="center">
   <Avatar src="/people/ada.png" alt="Ada Lovelace" />
+  <Avatar alt="Generated" svg={generatedArt} />
   <Avatar alt="Grace Hopper" initials="GH" size="lg" />
   <Avatar alt="Unassigned" shape="square" />
 </Inline>`,

package/src/components/Avatar/Avatar.native.tsx

@@ -0,0 +1,37 @@
+import {useState} from 'react'
+import {html} from 'react-strict-dom'
+import {SvgXml} from 'react-native-svg'
+import {styles} from './styles.css'
+import type {AvatarProps} from './types'
+
+export type {AvatarProps, AvatarShape, AvatarSize} from './types'
+
+/**
+ * Native Avatar: the web's precedence (src until it fails, svg, initials, blank). The svg document
+ * is drawn with react-native-svg's SvgXml, since RSD has no `svg`.
+ */
+export function Avatar({src, svg, 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>
+    )
+  }
+  if (svg !== undefined) {
+    return (
+      <html.div role="img" aria-label={alt} style={frame}>
+        <SvgXml xml={svg} width="100%" height="100%" />
+      </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/Avatar.stories.tsx

@@ -77,3 +77,16 @@ export const BrokenImage: Story = {
     })
   },
 }
+
+const ART =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><rect width="1" height="1" fill="#c33"/><rect x="1" width="1" height="1" fill="#36c"/></svg>'
+
+/** An app-generated SVG document fills the frame when there is no loadable src. */
+export const GeneratedSvg: Story = {
+  args: {svg: ART, alt: 'Generated art'},
+  play: async ({canvas}) => {
+    const image = canvas.getByRole('img', {name: 'Generated art'})
+    await expect(image.tagName).toBe('IMG')
+    await expect(image.getAttribute('src')).toMatch(/^data:image\/svg\+xml/)
+  },
+}

package/src/components/Avatar/Avatar.tsx

@@ -1,28 +1,15 @@
 import {useState} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
+import type {AvatarProps} from './types'
 
-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
-}
+export type {AvatarProps, AvatarShape, AvatarSize} from './types'
 
 /**
- * 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.
+ * A person or entity as a picture, else an app-generated SVG, else their initials, else a neutral
+ * blank. Each carries `alt` as the accessible name.
  */
-export function Avatar({src, alt, initials, size = 'md', shape = 'circle'}: AvatarProps) {
+export function Avatar({src, svg, 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]]
@@ -34,6 +21,17 @@ export function Avatar({src, alt, initials, size = 'md', shape = 'circle'}: Avat
       </html.div>
     )
   }
+  if (svg !== undefined) {
+    return (
+      <html.div style={frame}>
+        <html.img
+          src={`data:image/svg+xml,${encodeURIComponent(svg)}`}
+          alt={alt}
+          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}

package/src/components/Avatar/types.ts

@@ -0,0 +1,21 @@
+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 svg, else the initials, show. */
+  src?: string
+  /** The accessible name: who or what this avatar stands for. Never empty. */
+  alt: string
+  /**
+   * A complete SVG document string generated by the app (for example id-seeded art), drawn as the
+   * picture, filling the frame. Never user-supplied markup. Used when there is no `src`, or `src`
+   * failed to load; it wins over the initials.
+   */
+  svg?: string
+  /** Shown when there is no image or svg; 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
+}

package/src/components/Icon/Icon.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {css, html} from 'react-strict-dom'
 import {Icon} from './Icon'
 import type {IconName} from './Icon'
+import {PHOSPHOR_GLYPHS} from './phosphor-glyphs'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
@@ -69,6 +70,11 @@ const groups: ReadonlyArray<{title: string; names: readonly IconName[]}> = [
       'lock-filled',
     ],
   },
+  // Generated from @phosphor-icons/core (scripts/generate-phosphor-icons.mjs), alphabetical.
+  {
+    title: 'Phosphor',
+    names: (Object.keys(PHOSPHOR_GLYPHS) as IconName[]).sort(),
+  },
 ]
 
 const styles = css.create({