@duro-app/ui 5.13.0 → 5.15.0

package/src/components/Listbox/Listbox.native.tsx

@@ -0,0 +1,153 @@
+import {createContext, type ReactNode, type Ref, useContext} from 'react'
+import {View} from 'react-native'
+import {Pressable} from 'react-native-gesture-handler'
+import {html} from 'react-strict-dom'
+import {sheetStyles} from './native.css'
+import {textOf} from '../../shared/textOf'
+
+/**
+ * Native Listbox (plan N0, Slice C): a plain list of options, laid out where
+ * it is rendered — inside a Select or Combobox sheet. Nothing is anchored and
+ * nothing is highlighted: native has no arrow keys (Decision 6), so each option
+ * is its own screen-reader stop and a press chooses it.
+ */
+
+export type ListboxMaxHeight = 'listMaxH' | 'listMaxHSm'
+
+/** Default option id: the listbox id plus the value, made safe for an id. */
+export function defaultOptionId(listboxId: string, value: string): string {
+  return `${listboxId}-option-${value.replace(/[^\w-]/g, (ch) => `_${ch.charCodeAt(0).toString(16)}`)}`
+}
+
+export interface ListboxAnchorProps {
+  role?: 'combobox'
+  'aria-controls': string | undefined
+  'aria-expanded': boolean
+  'aria-activedescendant': string | undefined
+  'aria-autocomplete': 'list'
+  'aria-haspopup': 'listbox'
+}
+
+/** The web's anchor ARIA, kept for one API: RSD drops these props on native. */
+export function getAnchorProps({
+  id,
+  open,
+  highlightedId,
+}: {
+  id: string
+  open: boolean
+  highlightedId: string | null | undefined
+}): ListboxAnchorProps {
+  return {
+    'aria-controls': open ? id : undefined,
+    'aria-expanded': open,
+    'aria-activedescendant': open && highlightedId ? highlightedId : undefined,
+    'aria-autocomplete': 'list',
+    'aria-haspopup': 'listbox',
+  }
+}
+
+interface ListboxContextValue {
+  onSelect?: (value: string) => void
+}
+
+const ListboxContext = createContext<ListboxContextValue | null>(null)
+
+function useListbox(part: string) {
+  const ctx = useContext(ListboxContext)
+  if (!ctx) throw new Error(`Listbox.${part} must be used within Listbox.Root`)
+  return ctx
+}
+
+interface RootProps {
+  id: string
+  open: boolean
+  /** A press on an option. */
+  onSelect?: (value: string) => void
+  /** Accessible name of the list. */
+  'aria-label'?: string
+  children: ReactNode
+  // The web's placement and keyboard props; a native list flows in place.
+  anchor?: () => unknown
+  matchAnchorWidth?: boolean
+  highlightedId?: string | null
+  onHighlight?: (id: string | null) => void
+  getOptionId?: (value: string) => string
+  maxHeight?: ListboxMaxHeight
+}
+
+function Root({id, open, onSelect, 'aria-label': ariaLabel, children}: RootProps) {
+  if (!open) return null
+  return (
+    <ListboxContext.Provider value={{onSelect}}>
+      <html.div id={id} role="listbox" aria-label={ariaLabel} style={sheetStyles.list}>
+        {children}
+      </html.div>
+    </ListboxContext.Provider>
+  )
+}
+
+interface OptionProps {
+  value: string
+  id?: string
+  /** The committed choice: filled, with a trailing check. */
+  selected?: boolean
+  disabled?: boolean
+  children: ReactNode
+  ref?: Ref<unknown>
+}
+
+function Option({value, selected = false, disabled = false, children, ref}: OptionProps) {
+  const {onSelect} = useListbox('Option')
+  const choose = () => {
+    if (!disabled) onSelect?.(value)
+  }
+  // Two hosts, one job each. The View is what a screen reader reads: a
+  // selected button named by its text alone, activated by a double-tap.
+  // Gesture Handler's Pressable takes the touch natively, since an RN
+  // Pressable loses the first tap with the keyboard up to any ScrollView
+  // above the sheet's Modal (keyboardShouldPersistTaps 'never', the default);
+  // its native button does not expose a role or state, so it is hidden.
+  return (
+    <View
+      ref={ref as Ref<never>}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={textOf(children) || undefined}
+      accessibilityState={{selected, disabled}}
+      accessibilityActions={ACTIVATE}
+      onAccessibilityAction={(e) => {
+        if (e.nativeEvent.actionName === 'activate') choose()
+      }}
+    >
+      <Pressable accessible={false} disabled={disabled} onPress={choose}>
+        {({pressed}) => (
+          <html.div style={[sheetStyles.option, (selected || pressed) && sheetStyles.optionFilled]}>
+            <html.span style={[sheetStyles.label, disabled && sheetStyles.labelDisabled]}>
+              {children}
+            </html.span>
+            {selected && (
+              <html.span aria-hidden style={sheetStyles.check}>
+                ✓
+              </html.span>
+            )}
+          </html.div>
+        )}
+      </Pressable>
+    </View>
+  )
+}
+
+const ACTIVATE = [{name: 'activate'}] as const
+
+/** Shown in place of options when there are none, or none match. */
+function Empty({children}: {children: ReactNode}) {
+  return <html.div style={sheetStyles.empty}>{children}</html.div>
+}
+
+export const Listbox = {
+  Root,
+  Option,
+  Empty,
+  getAnchorProps,
+}

package/src/components/Listbox/native.css.ts

@@ -0,0 +1,91 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * A picker sheet's rows on native (plan N0, C0 direction A "Check"): a
+ * touch-target row per option, the chosen one filled and checked.
+ */
+export const sheetStyles = css.create({
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  option: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.touchTarget,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    borderBottomWidth: borders.hairline,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+  // The chosen option, and a row under the finger.
+  optionFilled: {
+    backgroundColor: colors.bgCardHover,
+  },
+  label: {
+    flex: 1,
+    color: colors.text,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+  },
+  labelDisabled: {
+    color: colors.textMuted,
+  },
+  check: {
+    color: colors.accent,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+  },
+  empty: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingTop: spacing.xl,
+    paddingBottom: spacing.xl,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    color: colors.textMuted,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    textAlign: 'center',
+  },
+  // The search field pinned at a Combobox sheet's top, under its header.
+  search: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.touchTarget,
+    marginLeft: spacing.md,
+    marginRight: spacing.md,
+    marginBottom: spacing.sm,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderRadius: radii.sm,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    backgroundColor: colors.bg,
+  },
+  searchInput: {
+    flex: 1,
+    color: colors.text,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    '::placeholder': {
+      color: colors.textMuted,
+    },
+  },
+})

package/src/components/QrCode/QrCode.meta.ts

@@ -0,0 +1,18 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A QR code for another device to scan: dark modules on a fixed light square, as wide as its container, announced by its label as one image. The same on web and native.',
+  whenToUse: [
+    'Pairing or sign-in by scanning from a second device',
+    'Handing a URL or a short secret to a phone camera',
+  ],
+  whenNotToUse: [
+    'Decoration or branding: a QR code is a machine-readable payload, not an illustration',
+    'The only way to reach something: also give the text or a link beside it',
+  ],
+  example: `<Stack gap="sm">
+  <QrCode value="https://example.com/pair?key=abc" label="Scan to sign in on this device" />
+  <Text>Scan with a signed-in phone</Text>
+</Stack>`,
+}

package/src/components/QrCode/QrCode.native.tsx

@@ -0,0 +1,31 @@
+import {useMemo} from 'react'
+import {html} from 'react-strict-dom'
+import Svg, {Path} from 'react-native-svg'
+import {useResolvedColors} from '../ThemeProvider/ThemeProvider'
+import {qrGeometry} from './geometry'
+import {styles} from './styles.css'
+import type {QrCodeProps} from './types'
+
+export type {QrCodeProps} from './types'
+
+/**
+ * Native QrCode: the web's path, drawn with react-native-svg (RSD has no `svg`). The colour is the
+ * fixed dark token resolved through the nearest ThemeProvider, as the native Icon resolves its own.
+ */
+export function QrCode({value, label}: QrCodeProps) {
+  const {size, d} = useMemo(() => qrGeometry(value), [value])
+  const dark = useResolvedColors().fixedDark
+  return (
+    <html.div role="img" aria-label={label} style={styles.frame}>
+      <Svg
+        viewBox={`0 0 ${size} ${size}`}
+        width="100%"
+        height="100%"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        <Path d={d} fill={dark} />
+      </Svg>
+    </html.div>
+  )
+}

package/src/components/QrCode/QrCode.stories.tsx

@@ -0,0 +1,44 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {QrCode} from './QrCode'
+
+const styles = css.create({
+  column: {width: sizes.dialogSm},
+})
+
+const meta: Meta<typeof QrCode> = {
+  title: 'Components/QrCode',
+  component: QrCode,
+  args: {
+    value: 'https://example.com/pair?key=0123456789abcdef',
+    label: 'Scan to sign in on this device',
+  },
+  decorators: [
+    (Story) => (
+      <html.div style={styles.column}>
+        <Story />
+      </html.div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof QrCode>
+
+export const Default: Story = {
+  play: async ({canvas}) => {
+    const code = canvas.getByRole('img', {name: 'Scan to sign in on this device'})
+    await expect(code).toBeInTheDocument()
+    const box = code.getBoundingClientRect()
+    await expect(Math.round(box.width)).toBe(Math.round(box.height))
+  },
+}
+
+export const LongValue: Story = {
+  args: {
+    value: 'happier://account?key=AbCdEfGhIjKlMnOpQrStUvWxYz0123456789-_AbCdEfGhIjKlMnOpQrStUvWxYz',
+    label: 'Scan to connect',
+  },
+}

package/src/components/QrCode/QrCode.tsx

@@ -0,0 +1,30 @@
+import {useMemo} from 'react'
+import {html} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {qrGeometry} from './geometry'
+import {styles} from './styles.css'
+import type {QrCodeProps} from './types'
+
+export type {QrCodeProps} from './types'
+
+/**
+ * A QR code for another device to scan: one SVG path of the dark modules, drawn as an image with
+ * a label. Native draws the same path with react-native-svg (QrCode.native.tsx).
+ */
+export function QrCode({value, label}: QrCodeProps) {
+  const {size, d} = useMemo(() => qrGeometry(value), [value])
+  return (
+    <html.div role="img" aria-label={label} style={styles.frame}>
+      <svg
+        viewBox={`0 0 ${size} ${size}`}
+        width="100%"
+        height="100%"
+        fill="currentColor"
+        style={{color: colors.fixedDark, display: 'block'}}
+        aria-hidden="true"
+      >
+        <path d={d} />
+      </svg>
+    </html.div>
+  )
+}

package/src/components/QrCode/geometry.ts

@@ -0,0 +1,34 @@
+import {create} from 'qrcode'
+
+/** Light modules around the code, part of the symbol: scanners need it to find the edges. */
+export const QUIET_ZONE = 2
+
+export interface QrGeometry {
+  /** Side of the square viewBox, in modules, quiet zone included. */
+  readonly size: number
+  /** Every dark module as one SVG path, one horizontal run per subpath. */
+  readonly d: string
+}
+
+/**
+ * The code as one path, drawn identically by the web `<svg>` and by react-native-svg on native.
+ * Error correction M (15 %) matches what Happier's pairing codes used before this component.
+ */
+export function qrGeometry(value: string): QrGeometry {
+  const {modules} = create(value, {errorCorrectionLevel: 'M'})
+  const count = modules.size
+  const runs: string[] = []
+  for (let row = 0; row < count; row++) {
+    let col = 0
+    while (col < count) {
+      if (!modules.get(row, col)) {
+        col++
+        continue
+      }
+      const start = col
+      while (col < count && modules.get(row, col)) col++
+      runs.push(`M${start + QUIET_ZONE} ${row + QUIET_ZONE}h${col - start}v1h-${col - start}z`)
+    }
+  }
+  return {size: count + QUIET_ZONE * 2, d: runs.join('')}
+}

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

@@ -0,0 +1,12 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+export const styles = css.create({
+  // Square, as wide as its container: the caller sizes the column it sits in. Dark modules on the
+  // fixed light, in every theme: an inverted code does not scan on every camera.
+  frame: {
+    width: '100%',
+    aspectRatio: 1,
+    backgroundColor: colors.fixedLight,
+  },
+})

package/src/components/QrCode/types.ts

@@ -0,0 +1,6 @@
+export interface QrCodeProps {
+  /** The text the code carries: a URL, a pairing link. */
+  value: string
+  /** What the code is for, read by assistive tech in place of the image. */
+  label: string
+}

package/src/components/ScrollArea/ScrollArea.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start.',
+    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start. On React Native the Viewport is an RN ScrollView with the platform scroll indicator, capped by the same maxHeight token key; Scrollbar and Thumb render nothing.',
   whenToUse: [
     'Custom-styled scrollbars for content overflow areas',
     'Chat logs, code blocks, or long lists with constrained height',

package/src/components/ScrollArea/ScrollArea.native.tsx

@@ -0,0 +1,61 @@
+import type {ComponentProps, ReactNode} from 'react'
+import {ScrollView, StyleSheet} from 'react-native'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {resolveLength, type Length} from '../../shared/length'
+
+/**
+ * Native ScrollArea (plan N0, Slice C): Viewport is an RN ScrollView with the
+ * platform's own scroll indicator, so Scrollbar and Thumb draw nothing. The
+ * cap (`maxHeight`, a size-token key) sits on the view around it, where
+ * react-strict-dom resolves the token.
+ */
+
+function Root({children}: {children: ReactNode}) {
+  return <html.div style={styles.root}>{children}</html.div>
+}
+
+interface ViewportProps {
+  children: ReactNode
+  maxHeight?: Length
+  /** Extra styles for the viewport (e.g. a pointer-aware max height). */
+  style?: ComponentProps<typeof html.div>['style']
+  /** The web's roving-focus flag; native has no tab stops. */
+  rovingOwner?: boolean
+}
+
+function Viewport({children, maxHeight, style}: ViewportProps) {
+  return (
+    <html.div
+      style={[maxHeight != null && styles.viewportMaxHeight(resolveLength(maxHeight)), style]}
+    >
+      <ScrollView style={layout.scroll}>{children}</ScrollView>
+    </html.div>
+  )
+}
+
+function Content({children}: {children: ReactNode}) {
+  return <html.div>{children}</html.div>
+}
+
+type ScrollbarOrientation = 'vertical' | 'horizontal'
+
+/** The platform draws its own scroll indicator. */
+function Scrollbar(_props: {orientation?: ScrollbarOrientation; children?: ReactNode}) {
+  return null
+}
+
+function Thumb(_props: {orientation?: ScrollbarOrientation}) {
+  return null
+}
+
+// The ScrollView shrinks to its capped parent instead of growing past it.
+const layout = StyleSheet.create({scroll: {flexGrow: 0, flexShrink: 1}})
+
+export const ScrollArea = {
+  Root,
+  Viewport,
+  Content,
+  Scrollbar,
+  Thumb,
+}

package/src/components/Select/Select.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size="small" to match small Toggles and Buttons in a toolbar.',
+    'Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size="small" to match small Toggles and Buttons in a toolbar. Select.Popup takes label (the list\'s accessible name) and empty (shown in place of the list when it has no items). On React Native the trigger opens a bottom sheet (a Drawer at the medium and large detents) titled by label, with a Cancel text button (cancelLabel); the chosen option is filled with a trailing check, and a press picks an option and closes the sheet. Native has no arrow keys: each option is its own screen-reader stop.',
   whenToUse: [
     'User must pick one option from a predefined list',
     'Form field for country, category, role selection',