@tempoxyz/ds 0.2.5 → 0.3.0

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "license": "MIT",
   "files": [
     "DESIGN.md",
     "LICENSE-MIT",
     "dist",
     "src",
+    "!src/**/*.figma.ts",
+    "!src/**/figma.config.ts",
     "!src/**/*.zyzz.json",
     "!src/**/*.test.*",
     "!src/**/*.test-d.*",
@@ -19,6 +21,8 @@
     "@oxlint/plugins": "1.79.0",
     "cuer": "0.0.3",
     "midcut": "0.2.0",
+    "react-is": "19.2.3",
+    "recharts": "3.10.1",
     "torph": "0.1.3"
   },
   "exports": {
@@ -27,14 +31,186 @@
       "types": "./dist/web/index.d.ts",
       "default": "./dist/web/index.js"
     },
-    "./fonts/GeistMono-Variable.woff2": {
-      "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"
+    },
+    "./fonts/JetBrainsMono-Bold-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Bold-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Bold-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-Bold-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Bold-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Bold-other.woff2"
+    },
+    "./fonts/JetBrainsMono-Bold.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Bold.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Bold.woff2"
+    },
+    "./fonts/JetBrainsMono-Medium-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Medium-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Medium-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-Medium-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Medium-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Medium-other.woff2"
+    },
+    "./fonts/JetBrainsMono-Medium.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Medium.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Medium.woff2"
+    },
+    "./fonts/JetBrainsMono-Regular-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Regular-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Regular-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-Regular-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Regular-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Regular-other.woff2"
+    },
+    "./fonts/JetBrainsMono-Regular.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Regular.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Regular.woff2"
+    },
+    "./fonts/JetBrainsMono-SemiBold-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-SemiBold-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-SemiBold-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-SemiBold-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-SemiBold-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-SemiBold-other.woff2"
+    },
+    "./fonts/JetBrainsMono-SemiBold.woff2": {
+      "src": "./src/fonts/JetBrainsMono-SemiBold.woff2",
+      "default": "./dist/fonts/JetBrainsMono-SemiBold.woff2"
+    },
+    "./fonts/Pilat-Black-latin.woff2": {
+      "src": "./src/fonts/Pilat-Black-latin.woff2",
+      "default": "./dist/fonts/Pilat-Black-latin.woff2"
+    },
+    "./fonts/Pilat-Black-other.woff2": {
+      "src": "./src/fonts/Pilat-Black-other.woff2",
+      "default": "./dist/fonts/Pilat-Black-other.woff2"
+    },
+    "./fonts/Pilat-Black.woff2": {
+      "src": "./src/fonts/Pilat-Black.woff2",
+      "default": "./dist/fonts/Pilat-Black.woff2"
+    },
+    "./fonts/Pilat-Bold-latin.woff2": {
+      "src": "./src/fonts/Pilat-Bold-latin.woff2",
+      "default": "./dist/fonts/Pilat-Bold-latin.woff2"
+    },
+    "./fonts/Pilat-Bold-other.woff2": {
+      "src": "./src/fonts/Pilat-Bold-other.woff2",
+      "default": "./dist/fonts/Pilat-Bold-other.woff2"
+    },
+    "./fonts/Pilat-Bold.woff2": {
+      "src": "./src/fonts/Pilat-Bold.woff2",
+      "default": "./dist/fonts/Pilat-Bold.woff2"
+    },
+    "./fonts/Pilat-Book-latin.woff2": {
+      "src": "./src/fonts/Pilat-Book-latin.woff2",
+      "default": "./dist/fonts/Pilat-Book-latin.woff2"
+    },
+    "./fonts/Pilat-Book-other.woff2": {
+      "src": "./src/fonts/Pilat-Book-other.woff2",
+      "default": "./dist/fonts/Pilat-Book-other.woff2"
+    },
+    "./fonts/Pilat-Book.woff2": {
+      "src": "./src/fonts/Pilat-Book.woff2",
+      "default": "./dist/fonts/Pilat-Book.woff2"
+    },
+    "./fonts/Pilat-Demi-latin.woff2": {
+      "src": "./src/fonts/Pilat-Demi-latin.woff2",
+      "default": "./dist/fonts/Pilat-Demi-latin.woff2"
+    },
+    "./fonts/Pilat-Demi-other.woff2": {
+      "src": "./src/fonts/Pilat-Demi-other.woff2",
+      "default": "./dist/fonts/Pilat-Demi-other.woff2"
+    },
+    "./fonts/Pilat-Demi.woff2": {
+      "src": "./src/fonts/Pilat-Demi.woff2",
+      "default": "./dist/fonts/Pilat-Demi.woff2"
+    },
+    "./fonts/Pilat-Heavy-latin.woff2": {
+      "src": "./src/fonts/Pilat-Heavy-latin.woff2",
+      "default": "./dist/fonts/Pilat-Heavy-latin.woff2"
+    },
+    "./fonts/Pilat-Heavy-other.woff2": {
+      "src": "./src/fonts/Pilat-Heavy-other.woff2",
+      "default": "./dist/fonts/Pilat-Heavy-other.woff2"
+    },
+    "./fonts/Pilat-Heavy.woff2": {
+      "src": "./src/fonts/Pilat-Heavy.woff2",
+      "default": "./dist/fonts/Pilat-Heavy.woff2"
+    },
+    "./fonts/Pilat-Light-latin.woff2": {
+      "src": "./src/fonts/Pilat-Light-latin.woff2",
+      "default": "./dist/fonts/Pilat-Light-latin.woff2"
+    },
+    "./fonts/Pilat-Light-other.woff2": {
+      "src": "./src/fonts/Pilat-Light-other.woff2",
+      "default": "./dist/fonts/Pilat-Light-other.woff2"
+    },
+    "./fonts/Pilat-Light.woff2": {
+      "src": "./src/fonts/Pilat-Light.woff2",
+      "default": "./dist/fonts/Pilat-Light.woff2"
+    },
+    "./fonts/Pilat-Regular-latin.woff2": {
+      "src": "./src/fonts/Pilat-Regular-latin.woff2",
+      "default": "./dist/fonts/Pilat-Regular-latin.woff2"
+    },
+    "./fonts/Pilat-Regular-other.woff2": {
+      "src": "./src/fonts/Pilat-Regular-other.woff2",
+      "default": "./dist/fonts/Pilat-Regular-other.woff2"
+    },
+    "./fonts/Pilat-Regular.woff2": {
+      "src": "./src/fonts/Pilat-Regular.woff2",
+      "default": "./dist/fonts/Pilat-Regular.woff2"
+    },
+    "./fonts/Pilat-Thin-latin.woff2": {
+      "src": "./src/fonts/Pilat-Thin-latin.woff2",
+      "default": "./dist/fonts/Pilat-Thin-latin.woff2"
+    },
+    "./fonts/Pilat-Thin-other.woff2": {
+      "src": "./src/fonts/Pilat-Thin-other.woff2",
+      "default": "./dist/fonts/Pilat-Thin-other.woff2"
+    },
+    "./fonts/Pilat-Thin.woff2": {
+      "src": "./src/fonts/Pilat-Thin.woff2",
+      "default": "./dist/fonts/Pilat-Thin.woff2"
+    },
     "./icons": {
       "src": "./src/web/icons/index.ts",
       "types": "./dist/web/icons/index.d.ts",

package/src/fonts/{Geist-OFL.txt → JetBrainsMono-OFL.txt}

@@ -1,8 +1,9 @@
-Copyright (c) 2023 Vercel, in collaboration with basement.studio
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
+https://scripts.sil.org/OFL
+
 
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
@@ -43,7 +44,7 @@ new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 
-PERMISSION AND CONDITIONS
+PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font

package/src/fonts/README.md

@@ -1,3 +1,24 @@
 # 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.
+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). The SIL Open Font License 1.1 in `Inter-OFL.txt` permits redistribution in `@tempoxyz/ds`. The Web contracts declare it 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 a face's `unicodeRange` changes, write the subsets again. The script requires fonttools and brotli (`pip install fonttools brotli`).
+
+```sh
+node scripts/subset-fonts.ts
+```
+
+Each JetBrains Mono and Pilat weight loads the same way, from a `latin` subset with Inter's Latin range and an `other` subset with every other character, such as `Pilat-Book-latin.woff2`. Each subset keeps the font's OpenType features and names, and the two hold every character of the weight's file. The unmodified files stay exported.
+
+Pilat is supplied by Tempo, which confirmed that its license permits redistribution in `@tempoxyz/ds`. The Web contracts declare its eight static weights, from Thin (100) to Black (900).
+
+JetBrains Mono comes from the [JetBrains Mono v2.304](https://github.com/JetBrains/JetBrainsMono/tree/v2.304/fonts/webfonts) webfonts. Each unmodified WOFF2 also matches the `JetBrainsMono-2.304.zip` release asset. Its [SIL Open Font License](./JetBrainsMono-OFL.txt) permits bundling and redistribution with the included copyright notice and license.
+
+| File                           | Weight | SHA-256                                                            |
+| ------------------------------ | ------ | ------------------------------------------------------------------ |
+| `JetBrainsMono-Regular.woff2`  | 400    | `a9cb1cd82332b23a47e3a1239d25d13c86d16c4220695e34b243effa999f45f2` |
+| `JetBrainsMono-Medium.woff2`   | 500    | `086c48dfbea9ddaff1320f7e09399b8e2924e88ce67453721255db3bdbb5a353` |
+| `JetBrainsMono-SemiBold.woff2` | 600    | `918edad542a1da608fd2ba8daebaff9ac802309103fe760eed465b8b4e47faf1` |
+| `JetBrainsMono-Bold.woff2`     | 700    | `c503cc5ec5f8b2c7666b7ecda1adf44bd45f2e6579b2eba0fc292150416588a2` |

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'
 
 /**