@duro-app/ui 5.13.0 → 5.15.0

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,14 +1,24 @@
-import {createContext, type ReactNode, useContext, useState} from 'react'
+import {createContext, type ReactNode, useContext, useId, useMemo, useState} from 'react'
 import {css, html} from 'react-strict-dom'
+import type {ColorToken} from '@duro-app/tokens/keys'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
 import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
 import {layers} from '@duro-app/tokens/tokens/layers.css'
+import {mergeOverrides, OverridesContext, type ColorOverrides} from './overrides'
+import {overrideRule} from './overrideRule'
 
 export type ThemeName = 'dark' | 'light' | 'high-contrast'
+export type {ColorOverrides}
 
 interface ThemeProviderProps {
   theme?: ThemeName
+  /**
+   * Colours that replace the theme's own, by token key (`{accent: '#ff5a1f'}`).
+   * They update in place, without a re-mount. A nested provider on the same
+   * theme keeps these and lays its own over them.
+   */
+  overrides?: ColorOverrides
   children: ReactNode
 }
 
@@ -49,14 +59,40 @@ export function usePortalMount(): HTMLElement | null {
   return useContext(PortalMountContext)
 }
 
-export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
-  const overrides = themeMap[theme]
-  const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
+/** `var(--bg-x1y2)` → `--bg-x1y2`: the compiled variable a token key names. */
+function variableOf(key: ColorToken): string | null {
+  const ref = String(colors[key] ?? '')
+  const match = /^var\((--[\w-]+)\)$/.exec(ref)
+  return match ? match[1] : null
+}
+
+export function ThemeProvider({theme = 'dark', overrides, children}: ThemeProviderProps) {
+  const themeStyles = themeMap[theme]
+  const style = [themeStyles?.[0], themeStyles?.[1], styles.root] as DivStyle
   const [mount, setMount] = useState<HTMLElement | null>(null)
+  const scope = useId()
+  const outer = useContext(OverridesContext)
+  const effective = useMemo(
+    () => mergeOverrides(outer, theme, overrides),
+    [outer, theme, overrides],
+  )
+  const rule = useMemo(
+    () =>
+      Object.keys(effective.colors).length > 0
+        ? overrideRule(scope, effective.colors, variableOf)
+        : null,
+    [scope, effective],
+  )
 
   return (
-    <html.div data-theme={theme} style={themeStyles}>
-      <PortalMountContext.Provider value={mount}>{children}</PortalMountContext.Provider>
+    <html.div data-theme={theme} data-duro-theme={rule ? scope : undefined} style={style}>
+      {/* A plain, updating <style> (react-strict-dom has no html.style): no
+          href or precedence, which would make React hoist it once and ignore
+          later changes. */}
+      {rule ? <style>{rule}</style> : null}
+      <OverridesContext.Provider value={effective}>
+        <PortalMountContext.Provider value={mount}>{children}</PortalMountContext.Provider>
+      </OverridesContext.Provider>
       <html.div ref={setMount} data-portal-mount style={styles.portalMount} />
     </html.div>
   )

package/src/components/ThemeProvider/overrideRule.ts

@@ -0,0 +1,39 @@
+/**
+ * The web ThemeProvider's override rule, pure: it runs the same on the server
+ * and in the browser (no `CSS` global), so a server-rendered rule hydrates.
+ */
+import type {ColorToken} from '@duro-app/tokens/keys'
+import type {ColorOverrides} from './overrides'
+
+/** A value that is a colour and nothing else, so it cannot leave its rule. */
+export function isSafeColor(value: string): boolean {
+  // The same answer on the server and in the browser (no CSS.supports), so a
+  // server-rendered rule hydrates unchanged: a hex, a colour function, or a
+  // keyword, with nothing that could close the declaration or the rule.
+  if (/[;{}<>"'\\]/.test(value)) return false
+  return (
+    /^#[0-9a-f]{3,8}$/i.test(value) ||
+    /^(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([^()]*\)$/i.test(value) ||
+    /^[a-z]+$/i.test(value)
+  )
+}
+
+/** The scoped rule for a provider's overrides, or null when it has none. */
+export function overrideRule(
+  scope: string,
+  overrides: ColorOverrides,
+  variableOf: (key: ColorToken) => string | null,
+): string | null {
+  const declarations = Object.entries(overrides).flatMap(([key, value]) => {
+    const variable = variableOf(key as ColorToken)
+    return variable && typeof value === 'string' && isSafeColor(value)
+      ? [`${variable}: ${value};`]
+      : []
+  })
+  if (declarations.length === 0) return null
+  // Doubled, so it outranks the theme classes (one class each) wherever the
+  // stylesheets land.
+  // useId output holds neither a quote nor a backslash: safe inside quotes.
+  const selector = `[data-duro-theme="${scope}"]`
+  return `${selector}${selector} { ${declarations.join(' ')} }`
+}

package/src/components/ThemeProvider/overrides.ts

@@ -0,0 +1,27 @@
+import {createContext} from 'react'
+import type {ColorToken} from '@duro-app/tokens/keys'
+
+/** Colours that replace a theme's own, by token key. */
+export type ColorOverrides = Partial<Record<ColorToken, string>>
+
+/** The overrides in force at a provider, and the theme they were made for. */
+export interface EffectiveOverrides {
+  theme: string | null
+  colors: ColorOverrides
+}
+
+export const OverridesContext = createContext<EffectiveOverrides>({theme: null, colors: {}})
+
+/**
+ * One rule on both platforms (plan N0, slice C): a provider on the same theme
+ * as the one above it keeps that one's overrides and lays its own over them;
+ * a provider on another theme starts from its own theme's colours.
+ */
+export function mergeOverrides(
+  outer: EffectiveOverrides,
+  theme: string,
+  own: ColorOverrides | undefined,
+): EffectiveOverrides {
+  const inherited = outer.theme === theme ? outer.colors : {}
+  return {theme, colors: own ? {...inherited, ...own} : inherited}
+}

package/src/form.native.ts

@@ -0,0 +1,7 @@
+/**
+ * `@duro-app/ui/form` on React Native — resolved via the `react-native` export
+ * condition. Form validates the same Effect Schema; a `type="submit"` Button
+ * inside it submits through FormSubmitContext, since native has no DOM
+ * submit event. See `form.ts` for why Form is a subpath.
+ */
+export {Form, type FormProps} from './components/Form/Form'

package/src/index.native.ts

@@ -36,6 +36,7 @@ export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Icon, type IconName} from './components/Icon'
 export {Meter, type MeterProps, type MeterTone} from './components/Meter/Meter'
+export {QrCode, type QrCodeProps} from './components/QrCode/QrCode'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
 export {
   StatusIcon,
@@ -51,6 +52,13 @@ export {Tag, type TagVariant} from './components/Tag/Tag'
 export {SideNav} from './components/SideNav/SideNav'
 export {Tabs} from './components/Tabs/Tabs'
 export {Tree} from './components/Tree/Tree'
+// 5.14: pickers open a bottom sheet (a Drawer at the medium and large detents)
+export {Select} from './components/Select/Select'
+export {Combobox} from './components/Combobox/Combobox'
+export {Listbox} from './components/Listbox/Listbox'
+// The platform's own scroll indicator: Scrollbar and Thumb draw nothing.
+export {ScrollArea} from './components/ScrollArea/ScrollArea'
+export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'
 // Always stacked on native: a phone is below every collapseBelow.
 export {SplitPane} from './components/SplitPane/SplitPane'
 // Always the phone shape on native: the bar on top, the rail in a left Drawer.
@@ -97,9 +105,17 @@ export type {GridTrack} from './shared/length'
 // no display:contents / portal mount; applies the theme to a flex container).
 export {
   ThemeProvider,
+  type ColorOverrides,
   usePortalMount,
   useResolvedColors,
   type ThemeName,
 } from './components/ThemeProvider/ThemeProvider'
+// 'system' follows RN Appearance; persistence is the app's (preference + onPreferenceChange).
+export {
+  ColorModeProvider,
+  ColorModeToggle,
+  useColorMode,
+  type ColorModePreference,
+} from './components/ColorMode'
 // Where toasts draw on native: mount one inside a natively presented route.
 export {PortalHost} from './shared/portal/PortalHost'

package/src/index.ts

@@ -83,6 +83,7 @@ export {TextLink, type TextLinkVariant} from './components/TextLink/TextLink'
 export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
+export {QrCode, type QrCodeProps} from './components/QrCode/QrCode'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
 export {
   ToastProvider,
@@ -125,6 +126,7 @@ export {VirtualList, type VirtualListProps} from './components/VirtualList/Virtu
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {
   ThemeProvider,
+  type ColorOverrides,
   usePortalMount,
   type ThemeName,
 } from './components/ThemeProvider/ThemeProvider'

package/src/shared/focusInput.native.ts

@@ -0,0 +1,18 @@
+interface StrictInputRef {
+  getNativeRef?: () => {focus?: () => void} | null
+  focus?: () => void
+}
+
+/**
+ * Focus an html.input on native. react-strict-dom 0.0.55 hands out a copy of
+ * the TextInput instance, whose `focus()` does nothing (#506); the copy keeps
+ * TextInput's own `getNativeRef()`, which returns the real host.
+ *
+ * holds-until: react-strict-dom releases #515 (focus() on the ref itself).
+ */
+export function focusInput(input: unknown): void {
+  const ref = input as StrictInputRef | null
+  const host = ref?.getNativeRef?.()
+  if (host?.focus) host.focus()
+  else ref?.focus?.()
+}

package/src/shared/textOf.ts

@@ -0,0 +1,13 @@
+import {isValidElement, type ReactNode} from 'react'
+
+/**
+ * The text a React node would render, read from its props: a native picker's
+ * option label, where there is no DOM `textContent` to read it from.
+ */
+export function textOf(node: ReactNode): string {
+  if (node == null || typeof node === 'boolean') return ''
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(textOf).join('')
+  if (isValidElement<{children?: ReactNode}>(node)) return textOf(node.props.children)
+  return ''
+}