@tomo-inc/tomo-ui 0.0.11 → 0.0.12
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 +217 -0
- package/package.json +21 -7
- package/src/components/formatted-number/type.ts +7 -5
- package/src/components/mfaTypeChoose/index.tsx +2 -1
- package/src/index.ts +3 -1
- package/src/tailwind/plugin.ts +2 -188
- package/src/theme-context.tsx +6 -1
- package/src/theme-provider.tsx +1 -1
- package/src/types.ts +1 -0
- package/tsup.config.ts +16 -0
package/README.md
ADDED
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
# @tomo-inc/tomo-ui
|
|
2
|
+
|
|
3
|
+
Tomo UI is a React-based design system built on top of **HeroUI** and **Tailwind CSS v4**.
|
|
4
|
+
It provides:
|
|
5
|
+
|
|
6
|
+
- A **component layer** (`Button`, `Card`, `Modal`, etc.) with Tomo defaults
|
|
7
|
+
- A **provider layer** (`TomoUIProvider`) and a **theme hook** (`useTheme`)
|
|
8
|
+
- A **Tailwind v4 plugin** that wires HeroUI and Tomo design tokens together
|
|
9
|
+
|
|
10
|
+
It is designed so that **applications only depend on `@tomo-inc/tomo-ui`**, without touching the underlying UI framework directly.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## 1. Installation
|
|
15
|
+
|
|
16
|
+
> This package is currently intended for use inside the Tomo monorepo and selected internal projects.
|
|
17
|
+
|
|
18
|
+
Install from your workspace (example uses `pnpm`):
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @tomo-inc/tomo-ui
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Peer dependencies (usually already present in the host app):
|
|
25
|
+
|
|
26
|
+
- `react` `>=18`
|
|
27
|
+
- `react-dom` `>=18`
|
|
28
|
+
- `tailwindcss` `^4` (for apps that want to use the Tailwind plugin)
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## 2. Usage
|
|
33
|
+
|
|
34
|
+
### 2.1 Basic React usage
|
|
35
|
+
|
|
36
|
+
Wrap your app with `TomoUIProvider` and import components from the root package:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import {
|
|
40
|
+
TomoUIProvider,
|
|
41
|
+
Button,
|
|
42
|
+
Card,
|
|
43
|
+
CardBody,
|
|
44
|
+
CardFooter,
|
|
45
|
+
CardHeader,
|
|
46
|
+
} from "@tomo-inc/tomo-ui";
|
|
47
|
+
|
|
48
|
+
export function App() {
|
|
49
|
+
return (
|
|
50
|
+
<TomoUIProvider>
|
|
51
|
+
<div className="app-root">
|
|
52
|
+
<Card>
|
|
53
|
+
<CardHeader>
|
|
54
|
+
<h1>Tomo UI Starter</h1>
|
|
55
|
+
</CardHeader>
|
|
56
|
+
<CardBody>
|
|
57
|
+
<p>Now you can start building with @tomo-inc/tomo-ui components.</p>
|
|
58
|
+
</CardBody>
|
|
59
|
+
<CardFooter>
|
|
60
|
+
<Button color="primary">Get Started</Button>
|
|
61
|
+
</CardFooter>
|
|
62
|
+
</Card>
|
|
63
|
+
</div>
|
|
64
|
+
</TomoUIProvider>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### 2.2 Tailwind CSS v4 integration
|
|
70
|
+
|
|
71
|
+
Tomo UI ships a Tailwind v4 plugin that wraps HeroUI and Tomo design tokens.
|
|
72
|
+
In your main CSS entry (for example `src/index.css`):
|
|
73
|
+
|
|
74
|
+
```css
|
|
75
|
+
@import "tailwindcss";
|
|
76
|
+
|
|
77
|
+
@plugin "@tomo-inc/tomo-ui/tailwind/plugin";
|
|
78
|
+
|
|
79
|
+
@source "./**/*.{js,ts,jsx,tsx,mdx}";
|
|
80
|
+
@source "../node_modules/@tomo-inc/tomo-ui/dist/**/*.{js,mjs}";
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Notes:
|
|
84
|
+
|
|
85
|
+
- `@plugin` references the **Tomo UI plugin only**; your app does not need to reference HeroUI directly.
|
|
86
|
+
- `@source` must include:
|
|
87
|
+
- Your application source (so Tailwind can see your class usage)
|
|
88
|
+
- Tomo UI’s `dist` (so Tailwind can generate classes used by Tomo components)
|
|
89
|
+
|
|
90
|
+
Tailwind v4 is configured via PostCSS only. A minimal `postcss.config.(js|mjs|cjs)` looks like:
|
|
91
|
+
|
|
92
|
+
```js
|
|
93
|
+
export default {
|
|
94
|
+
plugins: {
|
|
95
|
+
"@tailwindcss/postcss": {},
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### 2.3 Dynamic theme configuration
|
|
101
|
+
|
|
102
|
+
Tomo UI allows you to provide a theme configuration at runtime.
|
|
103
|
+
The type is aligned with HeroUI’s theme configuration surface.
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
import {
|
|
107
|
+
TomoUIProvider,
|
|
108
|
+
useTheme,
|
|
109
|
+
type ThemeConfig,
|
|
110
|
+
} from "@tomo-inc/tomo-ui";
|
|
111
|
+
|
|
112
|
+
const themeConfig: ThemeConfig = {
|
|
113
|
+
themes: {
|
|
114
|
+
light: {
|
|
115
|
+
colors: {
|
|
116
|
+
primary: "#FCD436",
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
dark: {
|
|
120
|
+
colors: {
|
|
121
|
+
primary: "#FCD436",
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
defaultTheme: "light",
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
export function Root() {
|
|
129
|
+
return (
|
|
130
|
+
<TomoUIProvider themeConfig={themeConfig}>
|
|
131
|
+
<ThemedApp />
|
|
132
|
+
</TomoUIProvider>
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
function ThemedApp() {
|
|
137
|
+
const { theme, setTheme } = useTheme();
|
|
138
|
+
|
|
139
|
+
return (
|
|
140
|
+
<div>
|
|
141
|
+
<p>Current theme: {theme}</p>
|
|
142
|
+
<button onClick={() => setTheme("light")}>Light</button>
|
|
143
|
+
<button onClick={() => setTheme("dark")}>Dark</button>
|
|
144
|
+
</div>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
Under the hood, the provider:
|
|
150
|
+
|
|
151
|
+
- Runs the Tomo UI Tailwind plugin at build time to generate base tokens
|
|
152
|
+
- Uses `themeConfigToCSS` at runtime to convert your `ThemeConfig` into CSS variables
|
|
153
|
+
- Scopes the variables to the provider’s DOM subtree, enabling per-subtree theming
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## 3. Architecture Overview
|
|
158
|
+
|
|
159
|
+
High-level architecture of `@tomo-inc/tomo-ui`:
|
|
160
|
+
|
|
161
|
+
- **React components**
|
|
162
|
+
- Most components are **thin wrappers** around HeroUI components.
|
|
163
|
+
- Props and types are re-exported from the root package so consumers only import from `@tomo-inc/tomo-ui`.
|
|
164
|
+
- Domain-specific primitives (e.g. formatted numbers, QR code, MFA/passcode inputs) live under `src/components`.
|
|
165
|
+
|
|
166
|
+
- **Provider and theming**
|
|
167
|
+
- `TomoUIProvider` wraps `HeroUIProvider` and a custom `ThemeContextProvider`.
|
|
168
|
+
- `ThemeConfig` (a typed wrapper around HeroUI’s theme config) is converted to CSS variables via `themeConfigToCSS`.
|
|
169
|
+
- Theme variables are scoped to a unique DOM node, allowing:
|
|
170
|
+
- Multiple independent theme instances on the same page
|
|
171
|
+
- Runtime theme switching (light/dark or brand-based)
|
|
172
|
+
|
|
173
|
+
- **Tailwind v4 integration**
|
|
174
|
+
- `src/tailwind/plugin.ts` defines `baseConfig` and exports `heroui(baseConfig)` as the Tailwind plugin.
|
|
175
|
+
- The compiled plugin is exposed as `@tomo-inc/tomo-ui/tailwind/plugin`.
|
|
176
|
+
- During build, HeroUI’s theme dist is copied into `dist/theme` so that Tailwind can scan it through Tomo UI’s own package paths.
|
|
177
|
+
- Applications only interact with:
|
|
178
|
+
- `@plugin "@tomo-inc/tomo-ui/tailwind/plugin";`
|
|
179
|
+
- `@source "../node_modules/@tomo-inc/tomo-ui/dist/**/*.{js,mjs}";`
|
|
180
|
+
|
|
181
|
+
- **Dynamic theme vs. build-time theme**
|
|
182
|
+
- **Build-time**: Tailwind + HeroUI produce the base class names and token structure.
|
|
183
|
+
- **Runtime**: `ThemeConfig` controls the concrete colors and layout tokens via CSS variables.
|
|
184
|
+
- This separation allows you to change branding and theme behavior without changing the Tailwind build configuration.
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
## 4. License, Copyright, and Usage
|
|
189
|
+
|
|
190
|
+
> **Important:** This package is primarily intended for internal use within Tomo, Inc. and for selected partners.
|
|
191
|
+
> It is not a general-purpose public UI library unless explicitly documented and licensed as such.
|
|
192
|
+
|
|
193
|
+
- **Ownership**
|
|
194
|
+
- `@tomo-inc/tomo-ui` is owned and maintained by **Tomo, Inc.**.
|
|
195
|
+
- All source code, compiled artifacts, and design assets are copyrighted.
|
|
196
|
+
|
|
197
|
+
- **Usage scope**
|
|
198
|
+
- Intended for:
|
|
199
|
+
- Applications and packages inside the Tomo monorepo
|
|
200
|
+
- Official Tomo products and demos
|
|
201
|
+
- Partner integrations explicitly authorized by Tomo, Inc.
|
|
202
|
+
- Not intended for:
|
|
203
|
+
- Unlicensed redistribution
|
|
204
|
+
- White-label resale as a standalone UI library
|
|
205
|
+
|
|
206
|
+
- **License**
|
|
207
|
+
- Unless otherwise stated in the repository root (e.g. in a `LICENSE` file), usage is governed by Tomo’s internal agreements and partner contracts.
|
|
208
|
+
- If you are unsure whether you are allowed to use this package, please contact the Tomo team or your technical point of contact.
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
If you are extending `@tomo-inc/tomo-ui` or integrating it into a new application, please:
|
|
213
|
+
|
|
214
|
+
- Prefer importing from the root package (`@tomo-inc/tomo-ui`) instead of deep imports.
|
|
215
|
+
- Avoid depending on HeroUI directly; treat it as an internal implementation detail.
|
|
216
|
+
- Keep Tailwind integration minimal and aligned with the usage examples above, so that future UI framework changes can remain transparent to applications.
|
|
217
|
+
|
package/package.json
CHANGED
|
@@ -1,16 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tomo-inc/tomo-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"main": "./
|
|
6
|
-
"module": "./
|
|
5
|
+
"main": "./dist/index.cjs",
|
|
6
|
+
"module": "./dist/index.js",
|
|
7
7
|
"types": "./src/index.ts",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/tomo-inc"
|
|
11
|
+
},
|
|
12
|
+
"homepage": "https://github.com/tomo-inc",
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/tomo-inc/discussions"
|
|
15
|
+
},
|
|
8
16
|
"exports": {
|
|
9
17
|
".": {
|
|
10
18
|
"types": "./src/index.ts",
|
|
11
|
-
"import": "./
|
|
12
|
-
"require": "./
|
|
13
|
-
"default": "./
|
|
19
|
+
"import": "./dist/index.js",
|
|
20
|
+
"require": "./dist/index.cjs",
|
|
21
|
+
"default": "./dist/index.js"
|
|
22
|
+
},
|
|
23
|
+
"./tailwind/plugin": {
|
|
24
|
+
"import": "./dist/tailwind/plugin.js",
|
|
25
|
+
"require": "./dist/tailwind/plugin.cjs",
|
|
26
|
+
"default": "./dist/tailwind/plugin.js"
|
|
14
27
|
},
|
|
15
28
|
"./tailwind/tailwind.css": "./src/tailwind/tailwind.css"
|
|
16
29
|
},
|
|
@@ -44,6 +57,7 @@
|
|
|
44
57
|
"vite": "^7.2.4"
|
|
45
58
|
},
|
|
46
59
|
"scripts": {
|
|
47
|
-
"dev": "vite"
|
|
60
|
+
"dev": "vite",
|
|
61
|
+
"build": "tsup && node ./scripts/copy-heroui-theme.mjs"
|
|
48
62
|
}
|
|
49
63
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
export
|
|
2
|
-
USD
|
|
3
|
-
PRICE
|
|
4
|
-
BALANCE
|
|
5
|
-
}
|
|
1
|
+
export const NumberType = {
|
|
2
|
+
USD: "USD",
|
|
3
|
+
PRICE: "PRICE",
|
|
4
|
+
BALANCE: "BALANCE",
|
|
5
|
+
} as const;
|
|
6
|
+
|
|
7
|
+
export type NumberType = (typeof NumberType)[keyof typeof NumberType];
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { RadioProps } from "@heroui/react";
|
|
2
|
+
import { cn, RadioGroup, useRadio, VisuallyHidden } from "@heroui/react";
|
|
2
3
|
import { useEffect, useState } from "react";
|
|
3
4
|
|
|
4
5
|
interface CustomRadioProps extends RadioProps {
|
package/src/index.ts
CHANGED
package/src/tailwind/plugin.ts
CHANGED
|
@@ -1,22 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { HeroUIPluginConfig } from "@heroui/react";
|
|
2
|
+
import { heroui } from "@heroui/react";
|
|
2
3
|
|
|
3
4
|
export const baseConfig: HeroUIPluginConfig = {
|
|
4
5
|
// Don't change this prefix, some css not working
|
|
5
6
|
prefix: "heroui",
|
|
6
|
-
// prefix: "tomoui",
|
|
7
7
|
themes: {
|
|
8
|
-
// light: {
|
|
9
|
-
// colors: {
|
|
10
|
-
// foreground: "#000",
|
|
11
|
-
// background: "#FFF",
|
|
12
|
-
// content1: "#FCFCFD",
|
|
13
|
-
// primary: {
|
|
14
|
-
// ...generateColorScale("#fe3c9c"),
|
|
15
|
-
// DEFAULT: "#fe3c9c",
|
|
16
|
-
// foreground: "#fff",
|
|
17
|
-
// },
|
|
18
|
-
// },
|
|
19
|
-
// },
|
|
20
8
|
light: {
|
|
21
9
|
colors: {
|
|
22
10
|
foreground: "#12122A",
|
|
@@ -49,177 +37,3 @@ export const baseConfig: HeroUIPluginConfig = {
|
|
|
49
37
|
},
|
|
50
38
|
};
|
|
51
39
|
export default heroui(baseConfig) as any;
|
|
52
|
-
|
|
53
|
-
// export const ThemePlugin: any = heroui({
|
|
54
|
-
// layout: {},
|
|
55
|
-
// themes: {
|
|
56
|
-
// light: {
|
|
57
|
-
// colors: {
|
|
58
|
-
// foreground: "#12122A",
|
|
59
|
-
// background: "#FFF",
|
|
60
|
-
// content1: "#FCFCFD",
|
|
61
|
-
// primary: {
|
|
62
|
-
// 50: "#FFFBEA",
|
|
63
|
-
// 100: "#FFF3C4",
|
|
64
|
-
// 200: "#FCE588",
|
|
65
|
-
// 300: "#FADB5F",
|
|
66
|
-
// 400: "#F7C948",
|
|
67
|
-
// 500: "#FCD436",
|
|
68
|
-
// 600: "#F0B429",
|
|
69
|
-
// 700: "#DE911D",
|
|
70
|
-
// 800: "#CB6E17",
|
|
71
|
-
// 900: "#B44D12",
|
|
72
|
-
// DEFAULT: "#FCD436",
|
|
73
|
-
// },
|
|
74
|
-
// danger: "#FF5A5A",
|
|
75
|
-
// warning: "#FFAD32",
|
|
76
|
-
// success: "#079455",
|
|
77
|
-
// // Remove no required colors
|
|
78
|
-
// // t1: "#12122A",
|
|
79
|
-
// // t2: "#616184",
|
|
80
|
-
// // t3: "#8989AB",
|
|
81
|
-
// // t4: "#C1C0D8",
|
|
82
|
-
// // t5: "#EEC41F",
|
|
83
|
-
// },
|
|
84
|
-
// },
|
|
85
|
-
// // doge_light: {
|
|
86
|
-
// // colors: {
|
|
87
|
-
// // foreground: "#12122A",
|
|
88
|
-
// // background: "#FFF",
|
|
89
|
-
// // content1: "#FCFCFD",
|
|
90
|
-
// // primary: {
|
|
91
|
-
// // 50: "#FFFBEA",
|
|
92
|
-
// // 100: "#FFF3C4",
|
|
93
|
-
// // 200: "#FCE588",
|
|
94
|
-
// // 300: "#FADB5F",
|
|
95
|
-
// // 400: "#F7C948",
|
|
96
|
-
// // 500: "#FCD436",
|
|
97
|
-
// // 600: "#F0B429",
|
|
98
|
-
// // 700: "#DE911D",
|
|
99
|
-
// // 800: "#CB6E17",
|
|
100
|
-
// // 900: "#B44D12",
|
|
101
|
-
// // foreground: "#12122A",
|
|
102
|
-
// // DEFAULT: "#FCD436",
|
|
103
|
-
// // },
|
|
104
|
-
// // danger: "#FF5A5A",
|
|
105
|
-
// // warning: "#FFAD32",
|
|
106
|
-
// // success: "#079455",
|
|
107
|
-
// // t1: "#12122A",
|
|
108
|
-
// // t2: "#616184",
|
|
109
|
-
// // t3: "#8989AB",
|
|
110
|
-
// // t4: "#C1C0D8",
|
|
111
|
-
// // t5: "#EEC41F",
|
|
112
|
-
// // } as any,
|
|
113
|
-
// // },
|
|
114
|
-
|
|
115
|
-
// // mydoge: {
|
|
116
|
-
// // colors: {
|
|
117
|
-
// // primary: {
|
|
118
|
-
// // "50": "#fffef7",
|
|
119
|
-
// // "100": "#fffceb",
|
|
120
|
-
// // "200": "#fff9d5",
|
|
121
|
-
// // "300": "#fff5b8",
|
|
122
|
-
// // "400": "#feef8a",
|
|
123
|
-
// // "500": "#FED70B",
|
|
124
|
-
// // "600": "#e5c009",
|
|
125
|
-
// // "700": "#bfa007",
|
|
126
|
-
// // "800": "#998006",
|
|
127
|
-
// // "900": "#736005",
|
|
128
|
-
// // foreground: "#000",
|
|
129
|
-
// // DEFAULT: "#FED70B",
|
|
130
|
-
// // },
|
|
131
|
-
// // secondary: {
|
|
132
|
-
// // "50": "#f5f3ff",
|
|
133
|
-
// // "100": "#ede9fe",
|
|
134
|
-
// // "200": "#ddd6fe",
|
|
135
|
-
// // "300": "#c4b5fd",
|
|
136
|
-
// // "400": "#a78bfa",
|
|
137
|
-
// // "500": "#8b5cf6",
|
|
138
|
-
// // "600": "#7c3aed",
|
|
139
|
-
// // "700": "#6d28d9",
|
|
140
|
-
// // "800": "#5b21b6",
|
|
141
|
-
// // "900": "#4c1d95",
|
|
142
|
-
// // foreground: "#fff",
|
|
143
|
-
// // DEFAULT: "#8b5cf6",
|
|
144
|
-
// // },
|
|
145
|
-
// // default: {
|
|
146
|
-
// // "50": "#0e0e0e",
|
|
147
|
-
// // "100": "#1c1c1c",
|
|
148
|
-
// // "200": "#2a2a2a",
|
|
149
|
-
// // "300": "#383838",
|
|
150
|
-
// // "400": "#464646",
|
|
151
|
-
// // "500": "#6b6b6b",
|
|
152
|
-
// // "600": "#909090",
|
|
153
|
-
// // "700": "#b5b5b5",
|
|
154
|
-
// // "800": "#dadada",
|
|
155
|
-
// // "900": "#ffffff",
|
|
156
|
-
// // foreground: "#ffffff",
|
|
157
|
-
// // DEFAULT: "#464646",
|
|
158
|
-
// // },
|
|
159
|
-
// // success: {
|
|
160
|
-
// // "50": "#f0fdf4",
|
|
161
|
-
// // "100": "#dcfce7",
|
|
162
|
-
// // "200": "#bbf7d0",
|
|
163
|
-
// // "300": "#86efac",
|
|
164
|
-
// // "400": "#4ade80",
|
|
165
|
-
// // "500": "#10b981",
|
|
166
|
-
// // "600": "#059669",
|
|
167
|
-
// // "700": "#047857",
|
|
168
|
-
// // "800": "#065f46",
|
|
169
|
-
// // "900": "#064e3b",
|
|
170
|
-
// // foreground: "#fff",
|
|
171
|
-
// // DEFAULT: "#10b981",
|
|
172
|
-
// // },
|
|
173
|
-
// // warning: {
|
|
174
|
-
// // "50": "#fffbeb",
|
|
175
|
-
// // "100": "#fef3c7",
|
|
176
|
-
// // "200": "#fde68a",
|
|
177
|
-
// // "300": "#fcd34d",
|
|
178
|
-
// // "400": "#fbbf24",
|
|
179
|
-
// // "500": "#f59e0b",
|
|
180
|
-
// // "600": "#d97706",
|
|
181
|
-
// // "700": "#b45309",
|
|
182
|
-
// // "800": "#92400e",
|
|
183
|
-
// // "900": "#78350f",
|
|
184
|
-
// // foreground: "#000",
|
|
185
|
-
// // DEFAULT: "#f59e0b",
|
|
186
|
-
// // },
|
|
187
|
-
// // danger: {
|
|
188
|
-
// // "50": "#fef2f2",
|
|
189
|
-
// // "100": "#fee2e2",
|
|
190
|
-
// // "200": "#fecaca",
|
|
191
|
-
// // "300": "#fca5a5",
|
|
192
|
-
// // "400": "#f87171",
|
|
193
|
-
// // "500": "#ef4444",
|
|
194
|
-
// // "600": "#dc2626",
|
|
195
|
-
// // "700": "#b91c1c",
|
|
196
|
-
// // "800": "#991b1b",
|
|
197
|
-
// // "900": "#7f1d1d",
|
|
198
|
-
// // foreground: "#fff",
|
|
199
|
-
// // DEFAULT: "#ef4444",
|
|
200
|
-
// // },
|
|
201
|
-
// // background: "#000000",
|
|
202
|
-
// // foreground: "#ffffff",
|
|
203
|
-
// // content1: {
|
|
204
|
-
// // DEFAULT: "#1A1A1A",
|
|
205
|
-
// // foreground: "#fff",
|
|
206
|
-
// // },
|
|
207
|
-
// // content2: {
|
|
208
|
-
// // DEFAULT: "#242424",
|
|
209
|
-
// // foreground: "#fff",
|
|
210
|
-
// // },
|
|
211
|
-
// // content3: {
|
|
212
|
-
// // DEFAULT: "#464646",
|
|
213
|
-
// // foreground: "#fff",
|
|
214
|
-
// // },
|
|
215
|
-
// // content4: {
|
|
216
|
-
// // DEFAULT: "#666666",
|
|
217
|
-
// // foreground: "#fff",
|
|
218
|
-
// // },
|
|
219
|
-
// // focus: "#FED70B",
|
|
220
|
-
// // overlay: "#000000",
|
|
221
|
-
// // divider: "#464646",
|
|
222
|
-
// // },
|
|
223
|
-
// // },
|
|
224
|
-
// },
|
|
225
|
-
// });
|
package/src/theme-context.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
|
|
1
|
+
import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
|
|
2
2
|
|
|
3
3
|
type Theme = string;
|
|
4
4
|
|
|
@@ -19,6 +19,11 @@ interface ThemeContextProviderProps {
|
|
|
19
19
|
export function ThemeContextProvider({ children, defaultTheme = "light", forcedTheme }: ThemeContextProviderProps) {
|
|
20
20
|
const [theme, setThemeState] = useState<Theme>(forcedTheme || defaultTheme);
|
|
21
21
|
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
const next = forcedTheme ?? defaultTheme ?? "light";
|
|
24
|
+
setThemeState(next);
|
|
25
|
+
}, [defaultTheme, forcedTheme]);
|
|
26
|
+
|
|
22
27
|
const setTheme = useCallback(
|
|
23
28
|
(newTheme: Theme) => {
|
|
24
29
|
if (!forcedTheme) {
|
package/src/theme-provider.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import { useId, useMemo, type ReactElement, type ReactNode } from "react";
|
|
|
3
3
|
import { baseConfig } from "./tailwind/plugin";
|
|
4
4
|
import { themeConfigToCSS } from "./tailwind/theme-to-css";
|
|
5
5
|
import { ThemeContextProvider, useTheme } from "./theme-context";
|
|
6
|
-
import { ThemeConfig } from "./types";
|
|
6
|
+
import type { ThemeConfig } from "./types";
|
|
7
7
|
|
|
8
8
|
type Props = {
|
|
9
9
|
children: ReactNode;
|
package/src/types.ts
CHANGED
package/tsup.config.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { defineConfig } from "tsup";
|
|
2
|
+
|
|
3
|
+
export default defineConfig({
|
|
4
|
+
entry: {
|
|
5
|
+
index: "src/index.ts",
|
|
6
|
+
"tailwind/plugin": "src/tailwind/plugin.ts",
|
|
7
|
+
},
|
|
8
|
+
format: ["esm", "cjs"],
|
|
9
|
+
dts: false,
|
|
10
|
+
sourcemap: false,
|
|
11
|
+
clean: true,
|
|
12
|
+
target: "es2019",
|
|
13
|
+
splitting: false,
|
|
14
|
+
external: ["react", "react-dom", "@heroui/react", "@heroui/system", "@heroui/theme", "tailwindcss"],
|
|
15
|
+
});
|
|
16
|
+
|