@betfin/ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# @betfin/ui
|
|
2
|
+
|
|
3
|
+
The [Betfin](https://betfin.com) design system — [shadcn](https://ui.shadcn.com)/[Base UI](https://base-ui.com) components, hooks, and the Tailwind v4 theme, for building federated remotes that look native to the Betfin host.
|
|
4
|
+
|
|
5
|
+
Pairs with [`@betfin/sdk`](https://www.npmjs.com/package/@betfin/sdk) (the wallet/theme/i18n + Module Federation contract).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
bun add @betfin/ui
|
|
11
|
+
# peers: react, react-dom
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Set up the theme (Tailwind v4)
|
|
15
|
+
|
|
16
|
+
In your app's stylesheet, import Tailwind, then the Betfin theme. `theme.css` brings the design tokens + base layer and `@source`s the shipped components so their utility classes are generated in **your** build:
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
/* your app's index.css */
|
|
20
|
+
@import "tailwindcss";
|
|
21
|
+
@import "@betfin/ui/theme.css";
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
> Two CSS entries ship: **`@betfin/ui/theme.css`** (for external apps — this one) and **`@betfin/ui/globals.css`** (used internally in the Betfin monorepo; it scans the whole workspace and is *not* what you want outside it).
|
|
25
|
+
|
|
26
|
+
## Use components
|
|
27
|
+
|
|
28
|
+
Each component is its own subpath export:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { Button } from "@betfin/ui/components/button";
|
|
32
|
+
import { Dialog, DialogContent, DialogTrigger } from "@betfin/ui/components/dialog";
|
|
33
|
+
import { cn } from "@betfin/ui/lib/utils";
|
|
34
|
+
|
|
35
|
+
export function Example() {
|
|
36
|
+
return (
|
|
37
|
+
<Dialog>
|
|
38
|
+
<DialogTrigger render={<Button>Open</Button>} />
|
|
39
|
+
<DialogContent>…</DialogContent>
|
|
40
|
+
</Dialog>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The app is **dark-only** — the tokens live on `:root` and render before any JS. (`@betfin/sdk`'s `ThemeProvider`/`MockHost` stamp the `dark` class on `<html>`.)
|
|
46
|
+
|
|
47
|
+
## Components
|
|
48
|
+
|
|
49
|
+
`accordion` · `alert-dialog` · `app-header` · `badge` · `bet-value` · `breadcrumb` · `button` · `calendar` · `carousel` · `chart` · `checkbox` · `collapsible` · `command` · `context-menu` · `dialog` · `drawer` · `dropdown-menu` · `input` · `input-group` · `loading` · `member-profile` · `popover` · `progress` · `radio-group` · `scroll-area` · `select` · `separator` · `sheet` · `sidebar` · `skeleton` · `slider` · `sonner` · `switch` · `table` · `tabs` · `textarea` · `toggle` · `toggle-group` · `tooltip`
|
|
50
|
+
|
|
51
|
+
Hooks: `@betfin/ui/hooks/use-mobile`. Utilities: `@betfin/ui/lib/{utils,format,date}`.
|
|
52
|
+
|
|
53
|
+
## Exports
|
|
54
|
+
|
|
55
|
+
- `@betfin/ui/components/*` — one export per component (built ESM + types).
|
|
56
|
+
- `@betfin/ui/hooks/*`, `@betfin/ui/lib/*`.
|
|
57
|
+
- `@betfin/ui/theme.css` — external theme entry (tokens + base + component `@source`).
|
|
58
|
+
- `@betfin/ui/globals.css` — internal (monorepo) theme entry.
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
MIT
|