@tempoxyz/ds 0.2.5 → 0.2.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "license": "MIT",
   "files": [
     "DESIGN.md",
@@ -31,10 +31,42 @@
       "src": "./src/fonts/GeistMono-Variable.woff2",
       "default": "./dist/fonts/GeistMono-Variable.woff2"
     },
+    "./fonts/Inter-cyrillic-ext.woff2": {
+      "src": "./src/fonts/Inter-cyrillic-ext.woff2",
+      "default": "./dist/fonts/Inter-cyrillic-ext.woff2"
+    },
+    "./fonts/Inter-cyrillic.woff2": {
+      "src": "./src/fonts/Inter-cyrillic.woff2",
+      "default": "./dist/fonts/Inter-cyrillic.woff2"
+    },
+    "./fonts/Inter-greek-ext.woff2": {
+      "src": "./src/fonts/Inter-greek-ext.woff2",
+      "default": "./dist/fonts/Inter-greek-ext.woff2"
+    },
+    "./fonts/Inter-greek.woff2": {
+      "src": "./src/fonts/Inter-greek.woff2",
+      "default": "./dist/fonts/Inter-greek.woff2"
+    },
+    "./fonts/Inter-latin-ext.woff2": {
+      "src": "./src/fonts/Inter-latin-ext.woff2",
+      "default": "./dist/fonts/Inter-latin-ext.woff2"
+    },
+    "./fonts/Inter-latin.woff2": {
+      "src": "./src/fonts/Inter-latin.woff2",
+      "default": "./dist/fonts/Inter-latin.woff2"
+    },
+    "./fonts/Inter-symbols.woff2": {
+      "src": "./src/fonts/Inter-symbols.woff2",
+      "default": "./dist/fonts/Inter-symbols.woff2"
+    },
     "./fonts/Inter-Variable.woff2": {
       "src": "./src/fonts/Inter-Variable.woff2",
       "default": "./dist/fonts/Inter-Variable.woff2"
     },
+    "./fonts/Inter-vietnamese.woff2": {
+      "src": "./src/fonts/Inter-vietnamese.woff2",
+      "default": "./dist/fonts/Inter-vietnamese.woff2"
+    },
     "./icons": {
       "src": "./src/web/icons/index.ts",
       "types": "./dist/web/icons/index.d.ts",

package/src/fonts/README.md

@@ -1,3 +1,11 @@
 # Fonts
 
 Inter is the Inter Project's variable font, copied unchanged from `web/InterVariable.woff2` in the [Inter 4.1 release](https://github.com/rsms/inter/releases/tag/v4.1). Geist Mono is Vercel's variable font, copied unchanged from the [`geist`](https://www.npmjs.com/package/geist) package (1.8.1). The SIL Open Font License 1.1 in `Inter-OFL.txt` and `Geist-OFL.txt` permits redistribution in `@tempoxyz/ds`. The Web contracts declare each face across weights 100 to 900.
+
+The Web contracts load Inter from its subsets, such as `Inter-latin.woff2`, one for each Inter face in `src/web/zyzz.config.ts`. A browser downloads only the subsets that cover the page's text. Each subset keeps Inter's axes, OpenType features, and names, and together they hold every character of `Inter-Variable.woff2`. The license permits modified versions, since Inter reserves no font name.
+
+If an Inter face's `unicodeRange` changes, write the subsets again. The script requires fonttools and brotli (`pip install fonttools brotli`).
+
+```sh
+node scripts/subset-fonts.ts
+```

package/src/mobile/Haptics.ts

@@ -0,0 +1,55 @@
+/** Haptic feedback with the meanings Apple documents for each system pattern. @module */
+import * as ExpoHaptics from 'expo-haptics'
+
+/**
+ * Plays an error notification: a task or action failed.
+ *
+ * @example
+ * Haptics.error()
+ */
+export function error() {
+  void ExpoHaptics.notificationAsync(ExpoHaptics.NotificationFeedbackType.Error)
+}
+
+/**
+ * Plays a light impact: a control was pressed. `Button`, `IconButton`, and `TextButton` play it
+ * before `onPress`.
+ *
+ * @example
+ * <Pressable onPress={() => { Haptics.press(); open() }} />
+ */
+export function press() {
+  void ExpoHaptics.impactAsync(ExpoHaptics.ImpactFeedbackStyle.Light)
+}
+
+/**
+ * Plays a selection tick: a value changed, such as a picked option or a toggled setting.
+ * `Toggle` plays it when its value changes.
+ *
+ * @example
+ * Haptics.select()
+ */
+export function select() {
+  void ExpoHaptics.selectionAsync()
+}
+
+/**
+ * Plays a success notification: a task or action completed, such as a sent message or a saved
+ * change.
+ *
+ * @example
+ * Haptics.success()
+ */
+export function success() {
+  void ExpoHaptics.notificationAsync(ExpoHaptics.NotificationFeedbackType.Success)
+}
+
+/**
+ * Plays a warning notification: a task or action produced a warning, such as a blocked send.
+ *
+ * @example
+ * Haptics.warning()
+ */
+export function warning() {
+  void ExpoHaptics.notificationAsync(ExpoHaptics.NotificationFeedbackType.Warning)
+}

package/src/mobile/README.md

@@ -24,6 +24,12 @@ export default zyzz(getDefaultConfig(import.meta.dirname), {
 
 `fonts` maps each Figma family to a font that your app registers. The library bundles no font files. Map a family to `System` to preview with iOS system fonts.
 
+`fonts` must name every family that any style sets, including your app's own. A `fontFamily` that the map does not name fails the Metro build with `Provide an explicit fonts mapping for this family`. Register the font files with `expo-font`.
+
+```ts
+fonts: { 'HB Set v0.96': 'HBSet', Inter: 'Inter', 'JetBrains Mono': 'JetBrainsMono', 'Pilat-Book': 'Pilat-Book' },
+```
+
 ## Usage
 
 Render components below a `Provider`. Styles resolve against the Provider above the component that renders them, so place it at your app root.
@@ -48,6 +54,75 @@ function Checkout() {
 
 `style` and `variants` accept TDS tokens and React Native's axis shorthands, such as `paddingHorizontal`.
 
+Props that take a color instead of a style, such as icon fills and spinner tints, read a style's color through `useColor`. It follows the Provider's scheme.
+
+```tsx
+import { style, useColor } from '@tempoxyz/ds/mobile'
+import { Copy } from '@tempoxyz/ds/mobile/icons'
+
+namespace styles {
+  export const icon = style({ color: 'content.secondary' })
+}
+
+function CopyIcon() {
+  return <Copy color={useColor(styles.icon().style)} />
+}
+```
+
+Metro reads every `style` and `variants` call while it bundles, before your code runs, so their arguments follow these rules:
+
+- **Static values:** Each value must be a literal or a reference to a constant. Spreads of constant objects work. A computed expression, such as `Platform.select(...)` or a function call, fails the build with `Expected a literal string or number; expressions are not evaluated`.
+- **Values off the scale:** Add `!custom` to a value that no token covers, such as `maxWidth: '85% !custom'` or `height: '36px !custom'`.
+- **Zero:** Spacing and position props take the `none` token, such as `left: 'none'`.
+
+```tsx
+namespace styles {
+  export const bubble = style({ borderRadius: 'md', maxWidth: '85% !custom', padding: '12' })
+
+  export const fill = style({
+    bottom: 'none',
+    left: 'none',
+    position: 'absolute',
+    right: 'none',
+    top: 'none',
+  })
+}
+```
+
+### Platform differences
+
+Put values that differ by platform in `targets`. Metro builds one bundle per platform and compiles only that platform's branch into it, so nothing checks the platform at runtime. Declarations apply in this order: shared, then `native`, then `ios` or `android`.
+
+```tsx
+namespace styles {
+  export const card = style({
+    backgroundColor: 'container.regular',
+    padding: '12',
+    targets: {
+      ios: { borderRadius: 28 },
+      android: { borderRadius: 16, elevation: 2 },
+    },
+  })
+}
+```
+
+Branches take plain React Native values, not tokens. A token name in a branch, such as `ios: { backgroundColor: 'container.regular' }`, passes the build and the type check, but reaches React Native as that string and does not render. Keep token values in the shared declarations.
+
+For a module that differs as a whole, Metro also resolves `Card.ios.tsx` and `Card.android.tsx`.
+
+### Runtime values
+
+Values known only at runtime, such as safe area insets, keyboard height or measured sizes, go next to the compiled style in an array. Pick between compiled styles for state in the same array, or use `variants`.
+
+```tsx
+const insets = useSafeAreaInsets()
+
+<View style={[styles.footer().style, { paddingBottom: insets.bottom }]} />
+<Pressable style={[styles.option().style, selected && styles.selected().style]} />
+```
+
+Props that take a color instead of a style read it through `useColor`, as above.
+
 ## Custom Tokens
 
 An app config names its sets `base` and `inverse`, since every Zyzz config reads the Provider's set selection. Zyzz extensions only replace existing tokens. Define app tokens in your own sets, and reference TDS tokens through `variables` and `inverse`.
@@ -105,9 +180,30 @@ Components also accept the props and `ref` of the React Native element they rend
 - Skeleton placeholders pulse and Spinner rotates, and both stay still when Reduce Motion is on.
 - React Native has no backdrop blur, so overlay secondary controls keep only their translucent fill.
 
+## Haptics
+
+`Haptics` plays the system patterns with the meanings Apple documents for them, so feedback reads the same in every TDS app. Components play `press` and `select` on their own. Play the others where the outcome happens.
+
+| Function  | Pattern              | Use for                                                        |
+| --------- | -------------------- | -------------------------------------------------------------- |
+| `press`   | Light impact         | A pressed control. Button, IconButton, and TextButton play it. |
+| `select`  | Selection            | A changed value. Toggle plays it.                              |
+| `success` | Success notification | A completed task, such as a sent message.                      |
+| `warning` | Warning notification | A task that produced a warning.                                |
+| `error`   | Error notification   | A failed task.                                                 |
+
+```tsx
+import { Haptics } from '@tempoxyz/ds/mobile'
+
+async function send() {
+  await api.send(message)
+  Haptics.success()
+}
+```
+
 ## Icons
 
-Use the [mobile icon components](./icons/README.md) for the App icon catalog. Pass a `color`, because SVG elements do not inherit text color in React Native.
+Use the [mobile icon components](./icons/README.md) for the App icon catalog. Pass a `color`, because SVG elements do not inherit text color in React Native. `useColor` resolves a token for it.
 
 ```tsx
 import { Copy } from '@tempoxyz/ds/mobile/icons'

package/src/mobile/components/Button.tsx

@@ -1,8 +1,8 @@
-import * as Haptics from 'expo-haptics'
 import { cloneElement, type ComponentPropsWithRef, type ReactElement } from 'react'
 import { type ColorValue, Pressable, Text, View } from 'react-native'
 import type * as zyzz from 'zyzz'
-import { useColor } from '../internal/useColor.js'
+import * as Haptics from '../Haptics.js'
+import { useColor } from '../useColor.js'
 import { inverse } from '../vars.js'
 import { style, variants } from '../zyzz.config.js'
 import { Spinner } from './Spinner.js'
@@ -51,7 +51,7 @@ export function Button(props: Button.Props) {
       {...pressableProps}
       disabled={disabled || loading}
       onPress={(event) => {
-        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+        Haptics.press()
         props.onPress?.(event)
       }}
       style={(state) => [

package/src/mobile/components/IconButton.tsx

@@ -1,8 +1,8 @@
-import * as Haptics from 'expo-haptics'
 import { cloneElement, type ComponentPropsWithRef, type ReactElement } from 'react'
 import { type ColorValue, Pressable } from 'react-native'
 import type * as zyzz from 'zyzz'
-import { useColor } from '../internal/useColor.js'
+import * as Haptics from '../Haptics.js'
+import { useColor } from '../useColor.js'
 import { inverse } from '../vars.js'
 import { variants } from '../zyzz.config.js'
 
@@ -39,7 +39,7 @@ export function IconButton(props: IconButton.Props) {
       {...pressableProps}
       disabled={disabled}
       onPress={(event) => {
-        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+        Haptics.press()
         props.onPress?.(event)
       }}
       style={(state) => [

package/src/mobile/components/Spinner.tsx

@@ -3,7 +3,7 @@ import { type ColorValue, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import { Circle, Path, Svg } from 'react-native-svg'
 import type * as zyzz from 'zyzz'
-import { useColor } from '../internal/useColor.js'
+import { useColor } from '../useColor.js'
 import { useReducedMotion } from '../internal/useReducedMotion.js'
 import { style, variants } from '../zyzz.config.js'
 

package/src/mobile/components/TextButton.tsx

@@ -1,8 +1,8 @@
-import * as Haptics from 'expo-haptics'
 import type { ComponentPropsWithRef } from 'react'
 import { Pressable, Text } from 'react-native'
+import * as Haptics from '../Haptics.js'
 import { ChevronRight } from '../icons/index.js'
-import { useColor } from '../internal/useColor.js'
+import { useColor } from '../useColor.js'
 import { style, variants } from '../zyzz.config.js'
 
 /**
@@ -35,7 +35,7 @@ export function TextButton(props: TextButton.Props) {
       {...pressableProps}
       disabled={disabled}
       onPress={(event) => {
-        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+        Haptics.press()
         props.onPress?.(event)
       }}
       style={(state) => [

package/src/mobile/components/TextInput.tsx

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithRef } from 'react'
 import { TextInput as NativeTextInput, Text, View } from 'react-native'
 import type * as zyzz from 'zyzz'
-import { useColor } from '../internal/useColor.js'
+import { useColor } from '../useColor.js'
 import { style, variants } from '../zyzz.config.js'
 
 /**

package/src/mobile/components/Toast.tsx

@@ -2,7 +2,7 @@ import type { ComponentPropsWithRef } from 'react'
 import { Text, View } from 'react-native'
 import type * as zyzz from 'zyzz'
 import { AlertCircle, CheckCircle } from '../icons/index.js'
-import { useColor } from '../internal/useColor.js'
+import { useColor } from '../useColor.js'
 import { style, variants } from '../zyzz.config.js'
 
 /**

package/src/mobile/components/Toggle.tsx

@@ -1,7 +1,7 @@
-import * as Haptics from 'expo-haptics'
 import type { ComponentPropsWithRef } from 'react'
 import { Pressable, View } from 'react-native'
 import type * as zyzz from 'zyzz'
+import * as Haptics from '../Haptics.js'
 import { variables as core } from '../primitives.js'
 import { style, variants } from '../zyzz.config.js'
 
@@ -33,7 +33,7 @@ export function Toggle(props: Toggle.Props) {
       {...pressableProps}
       disabled={disabled}
       onPress={(event) => {
-        void Haptics.selectionAsync()
+        Haptics.select()
         props.onPress?.(event)
         onValueChange?.(value !== true)
       }}

package/src/mobile/index.ts

@@ -2,6 +2,7 @@ export { Avatar } from './components/Avatar.js'
 export { Badge } from './components/Badge.js'
 export { Button } from './components/Button.js'
 export { CodeInput } from './components/CodeInput.js'
+export * as Haptics from './Haptics.js'
 export { IconButton } from './components/IconButton.js'
 export { Skeleton } from './components/Skeleton.js'
 export { Spinner } from './components/Spinner.js'
@@ -9,5 +10,6 @@ export { TextButton } from './components/TextButton.js'
 export { TextInput } from './components/TextInput.js'
 export { Toast } from './components/Toast.js'
 export { Toggle } from './components/Toggle.js'
+export { useColor } from './useColor.js'
 export { inverse, variables } from './vars.js'
 export { Provider, style, variants, vars } from './zyzz.config.js'

package/src/mobile/useColor.ts

@@ -0,0 +1,31 @@
+/** Resolves a compiled style's color for native props that take a color instead of a style. @module */
+import type { ColorValue } from 'react-native'
+import { useStyles } from 'zyzz/react-native'
+
+/**
+ * Returns the `color` of a compiled style, resolved against the nearest `Provider`. Use it for
+ * props that take a color value instead of a style, such as SVG and icon fills, `ActivityIndicator`
+ * and `RefreshControl` tints, and `TextInput` placeholder colors.
+ *
+ * On iOS, a `system` color scheme resolves to a dynamic color object that switches with the device
+ * appearance, so pass the value through rather than reading it as a string.
+ *
+ * @throws {Error} If the style sets no `color`.
+ *
+ * @example
+ * namespace styles {
+ *   export const icon = style({ color: 'content.secondary' })
+ * }
+ *
+ * function CopyIcon() {
+ *   return <Copy color={useColor(styles.icon().style)} />
+ * }
+ */
+export function useColor(
+  style: Readonly<Record<string, string | number | undefined>> | undefined,
+): ColorValue {
+  const color: unknown = useStyles().style(style).color
+  if (typeof color === 'string') return color
+  if (color && typeof color === 'object') return color as ColorValue
+  throw new Error('Expected a compiled style with a color')
+}

package/src/web/components/Hex.tsx

@@ -55,6 +55,8 @@ export declare namespace formatHex {
  * - Add `copy` wherever readers need the full value, since the visible text omits its middle.
  * - The copy button is named `Copy <value>` by default. Pass `aria-label` to `Hex.Copy` to name
  *   what it copies, such as `Copy address`.
+ * - After a `Rows.Label`, the text matches the row's 500 weight, and the text and copy icon end at
+ *   the row's text edge, as the other row values do.
  *
  * @example
  * <Hex copy value="0x3c44cdddb6a900fa2b585dd299e03d12fa4293bc" />
@@ -119,6 +121,7 @@ export namespace Hex {
       <HexContext value={{ evm, setSlack, slack, value, variant }}>
         <span
           {...attributes}
+          data-hex=""
           {...styles.root({ className, size, style: props.style, variant, vars })}
         >
           {children}
@@ -199,7 +202,7 @@ export namespace Hex {
         }}
         {...styles.text({ className: props.className, style: props.style })}
       >
-        <span aria-hidden="true" {...styles.cut()}>
+        <span aria-hidden="true" data-hex-cut="" {...styles.cut()}>
           <Midcut prefix={prefix} value={value} />
         </span>
         {/* Sizes the text to the value plus one character, since Midcut truncates at that width.
@@ -347,7 +350,47 @@ namespace styles {
               selectors: { '&:has([data-stretch]:active)': { scale: 'none !custom' } },
             },
           },
-          inline: {},
+          // After a `Rows.Label`, an inline Hex ends the row's value column and matches the 500
+          // weight of the row text beside it. Midcut's leftover space moves before the text, which
+          // leaves the button no slack to cover, and the button bleeds over the 4px around its icon.
+          // The text and icon then end at the row's text edge.
+          inline: {
+            selectors: {
+              // The other half of the row, less the 12px gap after the label, the 24px of the copy
+              // button and its gap, and Midcut's last character, rounded down to whole character
+              // pairs. The text box then fits the visible text, and half a pixel keeps Midcut's own
+              // rounding from dropping a pair to floating-point error.
+              '[data-label] ~ &': {
+                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 24.5px) !custom',
+                typography: 'copy.13.mono.strong',
+              },
+              // A leading identicon and its 8px gap add to that width, and `Rows.Label` yields the
+              // same width, so the address keeps the width of one without an identicon.
+              '[data-label] ~ &:has(> [data-identicon="16"]:first-child)': {
+                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 48.5px) !custom',
+              },
+              '[data-label] ~ &:has(> [data-identicon="24"]:first-child)': {
+                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 56.5px) !custom',
+              },
+              '[data-label] ~ &:has(> [data-identicon="32"]:first-child)': {
+                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 64.5px) !custom',
+              },
+              '[data-label] ~ &:has(> [data-identicon="40"]:first-child)': {
+                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 72.5px) !custom',
+              },
+              '[data-label] ~ &:has(> [data-identicon="48"]:first-child)': {
+                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 80.5px) !custom',
+              },
+              '[data-label] ~ &:has(> [data-identicon="64"]:first-child)': {
+                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 96.5px) !custom',
+              },
+              '[data-label] ~ & [data-hex-cut] > [title]': { justifyContent: 'flex-end' },
+              '[data-label] ~ & [data-hex-copy]': { marginInlineEnd: '-4' },
+              '[data-label] ~ * &': { typography: 'copy.13.mono.strong' },
+              '[data-label] ~ * & [data-hex-cut] > [title]': { justifyContent: 'flex-end' },
+              '[data-label] ~ * & [data-hex-copy]': { marginInlineEnd: '-4' },
+            },
+          },
         },
       },
     },

package/src/web/components/Identicon.tsx

@@ -22,6 +22,9 @@ const palette = [
  * - Never use it as the only identifier. Show the address or account name beside it.
  * - When that text is adjacent, pass `aria-hidden` so the address is not announced twice.
  * - Otherwise pass an `aria-label` that names the account, since raw addresses read poorly.
+ * - In a `Rows` value, render it as the first child of `Hex.Root`. It sits 8px before the
+ *   address, and the label yields its width, so the address keeps the width of one without an
+ *   identicon.
  *
  * @example
  * <Identicon aria-hidden address={address} size="32" />
@@ -41,6 +44,7 @@ export function Identicon(props: Identicon.Props) {
       role="img"
       viewBox="0 0 1 1"
       {...attributes}
+      data-identicon={size ?? '40'}
       {...styles.identicon({ className, size, style: props.style, vars })}
     >
       <defs>
@@ -104,7 +108,17 @@ function derive(address: string) {
 namespace styles {
   export const identicon = variants(
     {
-      base: { borderRadius: 'full', display: 'block', flexShrink: '0 !custom' },
+      base: {
+        borderRadius: 'full',
+        display: 'block',
+        flexShrink: '0 !custom',
+        selectors: {
+          // Leading a `Hex` after a `Rows.Label`, the identicon stays in flow 8px before the
+          // address, so a tall identicon grows the row and a long label never sits under it.
+          // `Hex.Root` adds 4px of gap.
+          '[data-label] ~ [data-hex] > &:first-child': { marginInlineEnd: '4' },
+        },
+      },
       defaultVariants: { size: '40' },
       variants: {
         size: {