@luxfi/ui 5.6.0 → 6.0.0

package/README.md

@@ -0,0 +1,109 @@
+# `ui` Package
+
+This package holds a component library and themes that can be used across all apps.
+
+## UI Package Philosophy
+
+The `ui` package contains all low level components that are shared between apps. It should *not* contain components that are specific to any one app or Uniswap business logic. Each component should be guided by the following principles:
+
+- All components should be compatible with all platforms.
+- Wrap as many implementation details as possible, including any direct exports from Tamagui.
+- Export only what’s needed from `ui/src` or another allowlisted path.
+- Only include components that will be used beyond a single feature.
+
+Components that are shared between all applications but encode Uniswap business logic should most likely be placed in the `uniswap` package!
+
+## Icons and Logos
+
+Icons and logos are placed in `ui/src/components/{icons|logos}`. These files are generated from placing the file in `packages/ui/src/assets/icons` or `packages/ui/src/assets/logos/svg` and running the generate command(s):
+
+```bash
+# Generate all icons
+bun ui build:icons
+# Generate any icons that do not yet have an existing TS file
+bun ui build:icons:missing
+```
+
+When adding an SVG, please ensure you replace color references as needed with `currentColor` to ensure the asset respects the color property when used.
+
+Custom icons that take props can be added to the same icons import by adding the file in `packages/ui/src/components/icons/index.ts`.
+
+## Core Components
+
+Many base components are available in the UI library. While some are customized `tamagui` elements or even fully custom elements, many are simple or direct exposure of `tamagui` elements. If you would like to use any `tamagui` elements, please add them through this library to ensure a layer of abstraction between tamagui and our usage when possible.
+
+Below are summaries of the most commonly used elements.
+
+### Flex
+
+The `Flex` component is the core organizational element of the UI library, acting as a base of a flexbox styling approach. Shortcuts are available for `row`, `grow`, `shrink`, `fill`, and `centered`. All other styling props can be added directly as needed.
+
+### Text
+
+The `Text` element is the core element for displaying text through the app. The `variant` prop takes in the text variant from our design system (e.g `heading1`, `body2`, etc.) that is desired. All other text styling props can be added directly as needed.
+
+## Theme and Platform
+
+### Theming
+
+Theming is applied through two primary methods:
+
+1. Any components that take in design systems values (e.g `heading1`, `body2`, etc.) will automatically respect the theme.
+2. In all other cases, `useSporeColors` will return the current theme colors to be used in any component.
+
+To force a specific theme usage, the `Theme` wrapper will ensure other theme elements pick up the specific theme.
+
+```javascript
+<Theme name="dark">
+  ...
+</Theme>
+```
+
+### Screen Size Differences
+
+All breakpoints for both vertical and horizontal sizing have been defined in `packages/ui/src/theme/breakpoints.ts`.
+
+To account for screen size references, components take in props to adapt custom style per breakpoint, like so:
+
+```javascript
+<Flex
+  margin="20"
+  $short={{ margin: 10 }}
+>
+  ...
+</Flex>
+```
+
+When components cannot take in these props or a value needs to be resued multiple times, the `useMedia` hook allows these same breakpoint values to be defined programmatically.
+
+### Colors
+
+We've made a hook `useSporeColors()` which gives you access to the current theme, and you can access the values off it as follows:
+
+```tsx
+import { useSporeColors } from 'ui/src'
+
+function MyComponent() {
+  const colors = useSporeColors()
+
+  colors.accent1.val // returns something like #fff
+  colors.accent1.get() // returns a "dynamic" color value
+}
+```
+
+#### When to use `.get()` vs `.val`
+
+After some discussion we've come to prefer `.val` by default. This will always return the raw string color (in our case hex color) on all platforms, whereas `.get()` returns either an Object (iOS) or a string, which can cause issues when used with things like animations, or external components.
+
+Using .val has some performance downside vs .get in that all usages of .val will re-render when themes change, whereas .get will avoid re-renders on iOS and Web by optimizing to platform-specific constructs. On iOS, it optimizes to [DynamicColorIOS](https://reactnative.dev/docs/dynamiccolorios), on web a CSS variable like `var(--accent1)`.
+
+So if/when we notice slowness in our light/dark mode change, we'll want to check if our usages of .val are causing expensive re-renders and see if we can convert them to .get.
+
+In summary:
+
+- Prefer `.val` which always returns the original color string, like `#fff`.
+- Using `.get()` returns a dynamic value depending on the platform and avoids re-rendering when themes change between light and dark. This is nice for fast light/dark mode switching (and in the future if we use sub-themes, it would also avoid re-renders there).
+  - On Android it returns the same as .val, `#fff`
+  - On iOS, it returns an object like `{ dynamic: { light: '#fff', dark: '#000' } }`
+  - On the web, it returns a CSS variable string, `var(--colorName)`
+  - You can call `.get('web')` to only optimize for web, or `.get('ios')` to only optimize for ios.

package/package.json

@@ -1,286 +1,89 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.6.0",
-  "description": "Radix + Tailwind UI primitives for Lux apps. Drop-in replacements for Chakra compound components.",
-  "type": "module",
-  "license": "MIT",
-  "author": {
-    "name": "Lux Partners",
-    "url": "https://lux.network"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/luxfi/ui.git",
-    "directory": "packages/ui"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
+  "version": "6.0.0",
+  "dependencies": {
+    "@gorhom/bottom-sheet": "4.6.4",
+    "@react-native-masked-view/masked-view": "0.3.2",
+    "@shopify/flash-list": "1.7.6",
+    "@shopify/react-native-skia": "2.2.20",
+    "@storybook/react": "8.5.2",
+    "@hanzogui/adapt": "2.0.1",
+    "@hanzogui/animations-css": "2.0.1",
+    "@hanzogui/animations-react-native": "2.0.1",
+    "@hanzogui/font-geist-sans": "2.0.1",
+    "@hanzogui/helpers-icon": "2.0.1",
+    "@hanzogui/portal": "2.0.1",
+    "@hanzogui/react-native-media-driver": "2.0.1",
+    "@hanzogui/remove-scroll": "2.0.1",
+    "@hanzogui/theme-base": "2.0.1",
+    "@tanstack/react-query": "5.90.20",
+    "@testing-library/react": "16.3.0",
+    "ethers": "5.7.2",
+    "expo-blur": "14.1.5",
+    "expo-linear-gradient": "14.1.5",
+    "i18next": "23.10.0",
+    "qrcode": "1.5.1",
+    "react": "19.0.3",
+    "react-i18next": "14.1.0",
+    "react-native": "0.79.5",
+    "react-native-fast-image": "8.6.3",
+    "react-native-gesture-handler": "2.24.0",
+    "react-native-image-colors": "1.5.2",
+    "react-native-keyboard-controller": "1.17.5",
+    "react-native-reanimated": "3.19.3",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-svg": "15.13.0",
+    "react-native-webview": "13.13.5",
+    "@hanzo/gui": "2.0.1",
+    "@luxfi/utilities": "^1.0.0",
+    "uuid": "9.0.0",
+    "wcag-contrast": "3.0.0"
   },
-  "sideEffects": [
-    "*.css"
-  ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "tokens.css"
-  ],
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./tokens.css": "./tokens.css",
-    "./accordion": {
-      "types": "./dist/accordion.d.ts",
-      "import": "./dist/accordion.js",
-      "require": "./dist/accordion.cjs"
-    },
-    "./alert": {
-      "types": "./dist/alert.d.ts",
-      "import": "./dist/alert.js",
-      "require": "./dist/alert.cjs"
-    },
-    "./avatar": {
-      "types": "./dist/avatar.d.ts",
-      "import": "./dist/avatar.js",
-      "require": "./dist/avatar.cjs"
-    },
-    "./badge": {
-      "types": "./dist/badge.d.ts",
-      "import": "./dist/badge.js",
-      "require": "./dist/badge.cjs"
-    },
-    "./button": {
-      "types": "./dist/button.d.ts",
-      "import": "./dist/button.js",
-      "require": "./dist/button.cjs"
-    },
-    "./checkbox": {
-      "types": "./dist/checkbox.d.ts",
-      "import": "./dist/checkbox.js",
-      "require": "./dist/checkbox.cjs"
-    },
-    "./close-button": {
-      "types": "./dist/close-button.d.ts",
-      "import": "./dist/close-button.js",
-      "require": "./dist/close-button.cjs"
-    },
-    "./collapsible": {
-      "types": "./dist/collapsible.d.ts",
-      "import": "./dist/collapsible.js",
-      "require": "./dist/collapsible.cjs"
-    },
-    "./color-mode": {
-      "types": "./dist/color-mode.d.ts",
-      "import": "./dist/color-mode.js",
-      "require": "./dist/color-mode.cjs"
-    },
-    "./dialog": {
-      "types": "./dist/dialog.d.ts",
-      "import": "./dist/dialog.js",
-      "require": "./dist/dialog.cjs"
-    },
-    "./drawer": {
-      "types": "./dist/drawer.d.ts",
-      "import": "./dist/drawer.js",
-      "require": "./dist/drawer.cjs"
-    },
-    "./empty-state": {
-      "types": "./dist/empty-state.d.ts",
-      "import": "./dist/empty-state.js",
-      "require": "./dist/empty-state.cjs"
-    },
-    "./field": {
-      "types": "./dist/field.d.ts",
-      "import": "./dist/field.js",
-      "require": "./dist/field.cjs"
-    },
-    "./heading": {
-      "types": "./dist/heading.d.ts",
-      "import": "./dist/heading.js",
-      "require": "./dist/heading.cjs"
-    },
-    "./icon-button": {
-      "types": "./dist/icon-button.d.ts",
-      "import": "./dist/icon-button.js",
-      "require": "./dist/icon-button.cjs"
-    },
-    "./image": {
-      "types": "./dist/image.d.ts",
-      "import": "./dist/image.js",
-      "require": "./dist/image.cjs"
-    },
-    "./input": {
-      "types": "./dist/input.d.ts",
-      "import": "./dist/input.js",
-      "require": "./dist/input.cjs"
-    },
-    "./input-group": {
-      "types": "./dist/input-group.d.ts",
-      "import": "./dist/input-group.js",
-      "require": "./dist/input-group.cjs"
-    },
-    "./link": {
-      "types": "./dist/link.d.ts",
-      "import": "./dist/link.js",
-      "require": "./dist/link.cjs"
-    },
-    "./menu": {
-      "types": "./dist/menu.d.ts",
-      "import": "./dist/menu.js",
-      "require": "./dist/menu.cjs"
-    },
-    "./pin-input": {
-      "types": "./dist/pin-input.d.ts",
-      "import": "./dist/pin-input.js",
-      "require": "./dist/pin-input.cjs"
-    },
-    "./popover": {
-      "types": "./dist/popover.d.ts",
-      "import": "./dist/popover.js",
-      "require": "./dist/popover.cjs"
-    },
-    "./progress": {
-      "types": "./dist/progress.d.ts",
-      "import": "./dist/progress.js",
-      "require": "./dist/progress.cjs"
-    },
-    "./progress-circle": {
-      "types": "./dist/progress-circle.d.ts",
-      "import": "./dist/progress-circle.js",
-      "require": "./dist/progress-circle.cjs"
-    },
-    "./radio": {
-      "types": "./dist/radio.d.ts",
-      "import": "./dist/radio.js",
-      "require": "./dist/radio.cjs"
-    },
-    "./rating": {
-      "types": "./dist/rating.d.ts",
-      "import": "./dist/rating.js",
-      "require": "./dist/rating.cjs"
-    },
-    "./select": {
-      "types": "./dist/select.d.ts",
-      "import": "./dist/select.js",
-      "require": "./dist/select.cjs"
-    },
-    "./separator": {
-      "types": "./dist/separator.d.ts",
-      "import": "./dist/separator.js",
-      "require": "./dist/separator.cjs"
-    },
-    "./skeleton": {
-      "types": "./dist/skeleton.d.ts",
-      "import": "./dist/skeleton.js",
-      "require": "./dist/skeleton.cjs"
-    },
-    "./slider": {
-      "types": "./dist/slider.d.ts",
-      "import": "./dist/slider.js",
-      "require": "./dist/slider.cjs"
-    },
-    "./switch": {
-      "types": "./dist/switch.d.ts",
-      "import": "./dist/switch.js",
-      "require": "./dist/switch.cjs"
-    },
-    "./table": {
-      "types": "./dist/table.d.ts",
-      "import": "./dist/table.js",
-      "require": "./dist/table.cjs"
-    },
-    "./tabs": {
-      "types": "./dist/tabs.d.ts",
-      "import": "./dist/tabs.js",
-      "require": "./dist/tabs.cjs"
-    },
-    "./tag": {
-      "types": "./dist/tag.d.ts",
-      "import": "./dist/tag.js",
-      "require": "./dist/tag.cjs"
-    },
-    "./textarea": {
-      "types": "./dist/textarea.d.ts",
-      "import": "./dist/textarea.js",
-      "require": "./dist/textarea.cjs"
-    },
-    "./toaster": {
-      "types": "./dist/toaster.d.ts",
-      "import": "./dist/toaster.js",
-      "require": "./dist/toaster.cjs"
-    },
-    "./tooltip": {
-      "types": "./dist/tooltip.d.ts",
-      "import": "./dist/tooltip.js",
-      "require": "./dist/tooltip.cjs"
-    },
-    "./provider": {
-      "types": "./dist/provider.d.ts",
-      "import": "./dist/provider.js",
-      "require": "./dist/provider.cjs"
-    },
-    "./utils": {
-      "types": "./dist/utils.d.ts",
-      "import": "./dist/utils.js",
-      "require": "./dist/utils.cjs"
-    },
-    "./explore": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./explore/*": {
-      "import": "./dist/*.js",
-      "require": "./dist/*.cjs",
-      "types": "./dist/*.d.ts"
-    }
+  "devDependencies": {
+    "@storybook/test": "8.5.2",
+    "@hanzogui/animations-moti": "2.0.1",
+    "@hanzogui/core": "2.0.1",
+    "@types/chrome": "0.0.304",
+    "@types/fs-extra": "11.0.2",
+    "@types/node": "22.13.1",
+    "@types/qrcode": "1.5.5",
+    "@typescript/native-preview": "7.0.0-dev.20260108.1",
+    "@luxfi/eslint-config": "^1.0.0",
+    "@vitejs/plugin-react": "4.7.0",
+    "camelcase": "6.3.0",
+    "cheerio": "1.0.0-rc.12",
+    "esbuild-register": "3.6.0",
+    "eslint": "8.57.1",
+    "fs-extra": "11.2.0",
+    "jsdom": "20.0.3",
+    "typescript": "5.8.3",
+    "uppercamelcase": "3.0.0",
+    "vitest": "3.2.1",
+    "vitest-presets": "*"
   },
+  "files": ["types", "dist"],
+  "main": "./src/index.ts",
+  "module:jsx": "src",
+  "private": false,
   "scripts": {
-    "build": "tsup",
-    "build:check": "tsc --noEmit",
-    "clean": "rm -rf dist",
-    "dev": "tsup --watch"
+    "build:icons": "nx build:icons ui",
+    "build:icons:missing": "nx build:icons:missing ui",
+    "check:deps:usage": "nx check:deps:usage ui",
+    "lint": "nx lint ui",
+    "lint:fix": "nx lint:fix ui",
+    "lint:biome": "nx lint:biome ui",
+    "lint:biome:fix": "nx lint:biome:fix ui",
+    "lint:eslint": "nx lint:eslint ui",
+    "lint:eslint:fix": "nx lint:eslint:fix ui",
+    "test": "nx test ui",
+    "test:coverage": "nx test:coverage ui",
+    "typecheck": "nx typecheck ui",
+    "typecheck:tsgo": "nx typecheck:tsgo ui",
+    "watch": "nx watch ui"
   },
-  "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@uidotdev/usehooks": "^2.4.1",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "es-toolkit": "^1.31.0",
-    "react-icons": "^5.4.0",
-    "sonner": "^2.0.0",
-    "tailwind-merge": "^3.0.0"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+  "nx": {
+    "includedScripts": []
   },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
-  }
+  "sideEffects": ["*.css"],
+  "types": "./types/index"
 }