xedonium 0.1.0 → 0.2.0
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 +74 -74
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,74 +1,74 @@
|
|
|
1
|
-
# xedonium
|
|
2
|
-
|
|
3
|
-
Minimal, theme-aware React + Tailwind UI components, extracted from Boot Bridge.
|
|
4
|
-
Square corners, semantic `app-*` color tokens, light/dark via `<html data-theme>`.
|
|
5
|
-
|
|
6
|
-
## Install
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
npm i xedonium # or: yarn add xedonium
|
|
10
|
-
# peers: react, react-dom, tailwindcss ^3.4
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Setup
|
|
14
|
-
|
|
15
|
-
1. Tailwind config: use the preset and scan the library's files.
|
|
16
|
-
|
|
17
|
-
```js
|
|
18
|
-
// tailwind.config.js
|
|
19
|
-
import xedonium from 'xedonium/tailwind-preset'
|
|
20
|
-
|
|
21
|
-
export default {
|
|
22
|
-
presets: [xedonium],
|
|
23
|
-
content: ['./index.html', './src/**/*.{js,jsx}', './node_modules/xedonium/dist/**/*.js'],
|
|
24
|
-
}
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
2. Import the theme tokens + base styles once (before your Tailwind CSS):
|
|
28
|
-
|
|
29
|
-
```js
|
|
30
|
-
import 'xedonium/styles.css'
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
3. Wrap your app:
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
import { ThemeProvider, AppBar, PageLayout, Button } from 'xedonium'
|
|
37
|
-
|
|
38
|
-
;<ThemeProvider storageKey="my-app-theme">
|
|
39
|
-
<AppBar brand="My App" />
|
|
40
|
-
<PageLayout>
|
|
41
|
-
<Button>Hello</Button>
|
|
42
|
-
</PageLayout>
|
|
43
|
-
</ThemeProvider>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## What's included
|
|
47
|
-
|
|
48
|
-
- Layout: `AppShell`, `AppBar`, `Navbar`, `Sidebar`, `PageLayout`, `PageHeader`, `Container`, `Flex`, `Stack`, `Grid`, `Card`, `Dashboard`, `Divider`, `Tabs`, `Breadcrumb`
|
|
49
|
-
- Forms: `Button`, `Field`, `Input`, `Select`, `Checkbox`, `Radio`, `RadioGroup`, `Switch`, `Slider`, `DatePicker`, `DateRangePicker`, `TimePicker`, `FileUpload`
|
|
50
|
-
- Data: `Table`, `DataGrid`, `List`, `SortableList`, `VirtualList`, `Tree`, `Pagination`, `Calendar`, `Carousel`, `Timeline`, `Stepper`, `StatCard`, and charts (`LineChart`, `AreaChart`, `BarChart`, `PieChart`)
|
|
51
|
-
- Feedback and overlays: `Alert`, `Toast`, `Tooltip`, `Modal`, `ConfirmDialog`, `Drawer`, `Popover`, `ActionMenu`, `CommandPalette`, `NotificationCenter`, `Progress`, `Skeleton`, `FanFavicon`, `LoadingScreen`, `RackServer`
|
|
52
|
-
- Media and utilities: `Avatar`, `Image`, `Video`, `Portal`, `FocusTrap`, `ThemeToggle`, plus 14 icons
|
|
53
|
-
- Hooks: `useTimedToast`, `useEscapeKey`, `useDialogFocus`, `useDismissable`, `useFlipAlign`, `useKeyboardShortcuts`, `useLeaveWarning`, `useDocumentTitle(title, suffix)`.
|
|
54
|
-
- Theme: `ThemeProvider`, `useTheme`, `useAppTheme`, `buildFaviconHref`.
|
|
55
|
-
|
|
56
|
-
`AppBar` has no router dependency. For react-router pass `linkComponent={Link} linkProp="to"`.
|
|
57
|
-
|
|
58
|
-
Overlay z-indexes can be overridden with `--xd-z-modal`, `--xd-z-toast`, `--xd-z-tooltip`.
|
|
59
|
-
|
|
60
|
-
## Develop
|
|
61
|
-
|
|
62
|
-
```bash
|
|
63
|
-
yarn dev # playground (every component, tabbed) at http://localhost:3100
|
|
64
|
-
yarn build # dist/ (ESM, CJS, .d.ts, styles.css)
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
## Docs
|
|
68
|
-
|
|
69
|
-
Docusaurus site in `docs/` (live examples, uses the built `dist/`). Install once with `yarn --cwd docs install`.
|
|
70
|
-
|
|
71
|
-
```bash
|
|
72
|
-
yarn docs # builds the lib, then serves at http://localhost:3000
|
|
73
|
-
yarn docs:build # static site in docs/build
|
|
74
|
-
```
|
|
1
|
+
# xedonium
|
|
2
|
+
|
|
3
|
+
Minimal, theme-aware React + Tailwind UI components, extracted from Boot Bridge.
|
|
4
|
+
Square corners, semantic `app-*` color tokens, light/dark via `<html data-theme>`.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm i xedonium # or: yarn add xedonium
|
|
10
|
+
# peers: react, react-dom, tailwindcss ^3.4
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
1. Tailwind config: use the preset and scan the library's files.
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
// tailwind.config.js
|
|
19
|
+
import xedonium from 'xedonium/tailwind-preset'
|
|
20
|
+
|
|
21
|
+
export default {
|
|
22
|
+
presets: [xedonium],
|
|
23
|
+
content: ['./index.html', './src/**/*.{js,jsx}', './node_modules/xedonium/dist/**/*.js'],
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
2. Import the theme tokens + base styles once (before your Tailwind CSS):
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
import 'xedonium/styles.css'
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
3. Wrap your app:
|
|
34
|
+
|
|
35
|
+
```jsx
|
|
36
|
+
import { ThemeProvider, AppBar, PageLayout, Button } from 'xedonium'
|
|
37
|
+
|
|
38
|
+
;<ThemeProvider storageKey="my-app-theme">
|
|
39
|
+
<AppBar brand="My App" />
|
|
40
|
+
<PageLayout>
|
|
41
|
+
<Button>Hello</Button>
|
|
42
|
+
</PageLayout>
|
|
43
|
+
</ThemeProvider>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## What's included
|
|
47
|
+
|
|
48
|
+
- Layout: `AppShell`, `AppBar`, `Navbar`, `Sidebar`, `PageLayout`, `PageHeader`, `Container`, `Flex`, `Stack`, `Grid`, `Card`, `Dashboard`, `Divider`, `Tabs`, `Breadcrumb`
|
|
49
|
+
- Forms: `Button`, `Field`, `Input`, `Select`, `Checkbox`, `Radio`, `RadioGroup`, `Switch`, `Slider`, `DatePicker`, `DateRangePicker`, `TimePicker`, `FileUpload`
|
|
50
|
+
- Data: `Table`, `DataGrid`, `List`, `SortableList`, `VirtualList`, `Tree`, `Pagination`, `Calendar`, `Carousel`, `Timeline`, `Stepper`, `StatCard`, and charts (`LineChart`, `AreaChart`, `BarChart`, `PieChart`)
|
|
51
|
+
- Feedback and overlays: `Alert`, `Toast`, `Tooltip`, `Modal`, `ConfirmDialog`, `Drawer`, `Popover`, `ActionMenu`, `CommandPalette`, `NotificationCenter`, `Progress`, `Skeleton`, `FanFavicon`, `LoadingScreen`, `RackServer`
|
|
52
|
+
- Media and utilities: `Avatar`, `Image`, `Video`, `Portal`, `FocusTrap`, `ThemeToggle`, plus 14 icons
|
|
53
|
+
- Hooks: `useTimedToast`, `useEscapeKey`, `useDialogFocus`, `useDismissable`, `useFlipAlign`, `useKeyboardShortcuts`, `useLeaveWarning`, `useDocumentTitle(title, suffix)`.
|
|
54
|
+
- Theme: `ThemeProvider`, `useTheme`, `useAppTheme`, `buildFaviconHref`.
|
|
55
|
+
|
|
56
|
+
`AppBar` has no router dependency. For react-router pass `linkComponent={Link} linkProp="to"`.
|
|
57
|
+
|
|
58
|
+
Overlay z-indexes can be overridden with `--xd-z-modal`, `--xd-z-toast`, `--xd-z-tooltip`.
|
|
59
|
+
|
|
60
|
+
## Develop
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
yarn dev # playground (every component, tabbed) at http://localhost:3100
|
|
64
|
+
yarn build # dist/ (ESM, CJS, .d.ts, styles.css)
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Docs
|
|
68
|
+
|
|
69
|
+
Docusaurus site in `docs/` (live examples, uses the built `dist/`). Install once with `yarn --cwd docs install`.
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
yarn docs # builds the lib, then serves at http://localhost:3000
|
|
73
|
+
yarn docs:build # static site in docs/build
|
|
74
|
+
```
|