@beyondcorp/beyond-ui 1.0.18 → 1.0.19
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 +117 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -46,29 +46,136 @@ import '@beyondcorp/beyond-ui/dist/styles.css';
|
|
|
46
46
|
|
|
47
47
|
---
|
|
48
48
|
|
|
49
|
-
## 🎨 Theming
|
|
49
|
+
## 🎨 Theming Sidebar & DashboardLayout
|
|
50
50
|
|
|
51
51
|
Beyond-UI is **completely theme-agnostic**:
|
|
52
|
+
- All UI is styled with semantic tokens (e.g., `bg-primary-50`, `text-primary-700`, `border-primary-600`) rather than direct color values.
|
|
53
|
+
- Defaults to Tailwind's built-in palette (e.g., gray/white) but is overrideable using Tailwind config.
|
|
54
|
+
- Ships with a fallback theme ([`theme/default.ts`](src/theme/default.ts)) for instant appearance.
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
- Pulls colors from the consumer project’s `tailwind.config.js` if you optionally add it and rebuild the CSS.
|
|
55
|
-
- Ships with a fallback default theme (`theme/default.ts`) for instant use.
|
|
56
|
+
### Adding Sidebar Items in DashboardLayout
|
|
56
57
|
|
|
57
|
-
To
|
|
58
|
+
To have a configurable sidebar within your dashboard layout:
|
|
59
|
+
|
|
60
|
+
1. **Define menu items** as an array of `MenuItem` objects (each with `id`, `label`, `icon`, `href`, `badge`, and optional `children` for nested menus).
|
|
61
|
+
2. **Pass them to `DashboardLayout`** using the `sidebarMenuItems` prop.
|
|
62
|
+
3. **Control the highlighted menu** by managing the `activeSidebarItem` prop.
|
|
63
|
+
4. **Handle user interaction** with `onSidebarItemClick`.
|
|
64
|
+
|
|
65
|
+
**Example:**
|
|
66
|
+
```tsx
|
|
67
|
+
import { DashboardLayout } from "@beyondcorp/beyond-ui";
|
|
68
|
+
import { Home, BarChart3, Users } from "lucide-react";
|
|
69
|
+
import '@beyondcorp/beyond-ui/dist/styles.css';
|
|
70
|
+
|
|
71
|
+
const menuItems = [
|
|
72
|
+
{
|
|
73
|
+
id: "dashboard",
|
|
74
|
+
label: "Dashboard",
|
|
75
|
+
icon: <Home className="h-5 w-5" />,
|
|
76
|
+
href: "/dashboard",
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
id: "analytics",
|
|
80
|
+
label: "Analytics",
|
|
81
|
+
icon: <BarChart3 className="h-5 w-5" />,
|
|
82
|
+
href: "/analytics",
|
|
83
|
+
badge: "New",
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
id: "users",
|
|
87
|
+
label: "Users",
|
|
88
|
+
icon: <Users className="h-5 w-5" />,
|
|
89
|
+
children: [
|
|
90
|
+
{
|
|
91
|
+
id: "all-users",
|
|
92
|
+
label: "All Users",
|
|
93
|
+
icon: <Users className="h-4 w-4" />,
|
|
94
|
+
},
|
|
95
|
+
],
|
|
96
|
+
},
|
|
97
|
+
];
|
|
98
|
+
export default function DemoDashboard() {
|
|
99
|
+
const [active, setActive] = React.useState("dashboard");
|
|
100
|
+
return (
|
|
101
|
+
<DashboardLayout
|
|
102
|
+
sidebarMenuItems={menuItems}
|
|
103
|
+
activeSidebarItem={active}
|
|
104
|
+
onSidebarItemClick={setActive}
|
|
105
|
+
>
|
|
106
|
+
<main>
|
|
107
|
+
{/* Main dashboard content goes here */}
|
|
108
|
+
</main>
|
|
109
|
+
</DashboardLayout>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
You can build any sidebar structure—single-level, nested, badges—using this pattern and pass it to the layout.
|
|
114
|
+
|
|
115
|
+
### Customizing Sidebar/DashboardLayout Colors
|
|
116
|
+
|
|
117
|
+
To override the sidebar background, accent, and dashboard colors, extend your `tailwind.config.js` with your color palette:
|
|
58
118
|
|
|
59
119
|
```js
|
|
60
120
|
theme: {
|
|
61
121
|
extend: {
|
|
62
122
|
colors: {
|
|
63
|
-
primary: {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
123
|
+
primary: {
|
|
124
|
+
50: '#f2f8ff', // sidebar background
|
|
125
|
+
100: '#dbeafe',
|
|
126
|
+
600: '#2563eb', // sidebar brand area (logo bg, borders)
|
|
127
|
+
700: '#1d4ed8',
|
|
128
|
+
},
|
|
129
|
+
secondary: {
|
|
130
|
+
50: '#f4f6fa',
|
|
131
|
+
700: '#3b82f6',
|
|
132
|
+
},
|
|
133
|
+
danger: {
|
|
134
|
+
50: '#fef2f2',
|
|
135
|
+
600: '#dc2626',
|
|
136
|
+
},
|
|
137
|
+
// You can add other tokens
|
|
138
|
+
// See theme/default.ts for all required keys
|
|
67
139
|
}
|
|
68
140
|
}
|
|
69
141
|
}
|
|
70
142
|
```
|
|
71
143
|
|
|
144
|
+
Sidebar, DashboardLayout, and badge/notification UI use these tokens for their background, text, borders, and hover states.
|
|
145
|
+
|
|
146
|
+
**Example: Custom Sidebar**
|
|
147
|
+
```tsx
|
|
148
|
+
import { Sidebar } from "@beyondcorp/beyond-ui";
|
|
149
|
+
import '@beyondcorp/beyond-ui/dist/styles.css';
|
|
150
|
+
|
|
151
|
+
// Nested menu, custom badges
|
|
152
|
+
const menuItems = [
|
|
153
|
+
{
|
|
154
|
+
id: "main",
|
|
155
|
+
label: "Main",
|
|
156
|
+
icon: <span>M</span>,
|
|
157
|
+
badge: "Hot",
|
|
158
|
+
children: [
|
|
159
|
+
{
|
|
160
|
+
id: "nested1",
|
|
161
|
+
label: "Nested Item",
|
|
162
|
+
icon: <span>N</span>,
|
|
163
|
+
badge: "New",
|
|
164
|
+
},
|
|
165
|
+
]
|
|
166
|
+
},
|
|
167
|
+
];
|
|
168
|
+
|
|
169
|
+
<Sidebar
|
|
170
|
+
menuItems={menuItems}
|
|
171
|
+
className="shadow-xl"
|
|
172
|
+
/>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Fallback Theme
|
|
176
|
+
|
|
177
|
+
If your Tailwind config doesn't specify semantic tokens, Beyond-UI defaults to the palette in [`theme/default.ts`](src/theme/default.ts), ensuring that all layouts/components always render.
|
|
178
|
+
|
|
72
179
|
---
|
|
73
180
|
|
|
74
181
|
## 🧩 Components
|
|
@@ -192,3 +299,4 @@ MIT © Beyond Corp, Soi Technology Solutions 2025
|
|
|
192
299
|
---
|
|
193
300
|
|
|
194
301
|
# Beyond-UI: Build clean, scalable UIs faster, with every detail documented and ready to use.
|
|
302
|
+
|