@aivex/ui 0.1.1 → 1.1.0-dev.2
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 +78 -1
- package/dist/components/Icon/index.d.ts +8 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1001 -1132
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +154 -0
- package/package.json +131 -2
package/README.md
CHANGED
|
@@ -10,7 +10,16 @@ npm install @aivex/ui
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
### 1. Import styles
|
|
14
|
+
|
|
15
|
+
Add the following to your global CSS file:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
/* global.css */
|
|
19
|
+
@import "@aivex/ui/styles.css";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Then import and use components:
|
|
14
23
|
|
|
15
24
|
```tsx
|
|
16
25
|
import { Button } from "@aivex/ui";
|
|
@@ -22,6 +31,74 @@ export function Example() {
|
|
|
22
31
|
|
|
23
32
|
The generated styles are namespaced with the `aivex:` Tailwind prefix and `--aivex-*` CSS variables to avoid collisions with application styles.
|
|
24
33
|
|
|
34
|
+
### 2. Using design tokens in your own code (optional)
|
|
35
|
+
|
|
36
|
+
If you want to use the same design tokens in your own Tailwind classes, also import `theme.css`:
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
/* global.css */
|
|
40
|
+
@import "tailwindcss";
|
|
41
|
+
@import "@aivex/ui/styles.css";
|
|
42
|
+
@import "@aivex/ui/theme.css";
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
This registers all design tokens into your Tailwind so you can use them directly:
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
<div className="bg-bg-primary border border-border-default rounded-md p-xl">
|
|
49
|
+
<h1 className="text-text-primary text-heading-md">Title</h1>
|
|
50
|
+
<p className="text-text-secondary text-body-md-regular">Description</p>
|
|
51
|
+
</div>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Theme
|
|
55
|
+
|
|
56
|
+
Set `data-theme` on the app root element so theme tokens are inherited by every component.
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<html data-theme="light">
|
|
60
|
+
<body>
|
|
61
|
+
<div id="root"></div>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Use `"dark"` for dark mode.
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<html data-theme="dark">
|
|
70
|
+
<body>
|
|
71
|
+
<div id="root"></div>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
For React apps, toggle the attribute on `document.documentElement`:
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
function setTheme(theme: "light" | "dark") {
|
|
80
|
+
document.documentElement.dataset.theme = theme;
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
For Next.js App Router, put the initial theme on the root layout's `<html>` element:
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
export default function RootLayout({
|
|
88
|
+
children,
|
|
89
|
+
}: {
|
|
90
|
+
children: React.ReactNode;
|
|
91
|
+
}) {
|
|
92
|
+
return (
|
|
93
|
+
<html lang="en" data-theme="light">
|
|
94
|
+
<body>{children}</body>
|
|
95
|
+
</html>
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Avoid setting the global theme only on `<body>`. The package defines design-token aliases at `:root`, so placing `data-theme` on `<html>` keeps the theme scope aligned with those root tokens.
|
|
101
|
+
|
|
25
102
|
## Requirements
|
|
26
103
|
|
|
27
104
|
- React 19 or newer
|
|
@@ -42,6 +42,14 @@ export declare const CaretLineUpIcon: ({ size, color }: IconProps) => import("re
|
|
|
42
42
|
export declare const CaretUpDownIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
43
|
export declare const ChatIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
44
44
|
export declare const CheckIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare const CheckboxCheckIcon: ({ size, color, }: {
|
|
46
|
+
size?: "sm" | "md" | "lg";
|
|
47
|
+
color?: string;
|
|
48
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
export declare const CheckboxIndeterminateIcon: ({ size, color, }: {
|
|
50
|
+
size?: "sm" | "md" | "lg";
|
|
51
|
+
color?: string;
|
|
52
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
45
53
|
export declare const CheckDoubleIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
46
54
|
export declare const CheckCircleIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
55
|
export declare const CheckCircleFilledIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
|