noorui-rtl 0.3.6 → 0.3.8
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 +44 -14
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -115,38 +115,68 @@ export default config
|
|
|
115
115
|
}
|
|
116
116
|
```
|
|
117
117
|
|
|
118
|
-
### 3.
|
|
118
|
+
### 3. Wrap your app with providers
|
|
119
119
|
|
|
120
|
-
|
|
120
|
+
Add the theme and direction providers to enable all features:
|
|
121
121
|
|
|
122
122
|
```tsx
|
|
123
|
-
import {
|
|
123
|
+
import { ThemeProvider } from 'next-themes'
|
|
124
|
+
import { DirectionProvider, DesignSystemProvider } from 'noorui-rtl'
|
|
124
125
|
|
|
125
126
|
export default function RootLayout({ children }) {
|
|
126
127
|
return (
|
|
127
128
|
<html>
|
|
128
129
|
<body>
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
130
|
+
<ThemeProvider attribute="class" enableSystem={true}>
|
|
131
|
+
<DirectionProvider>
|
|
132
|
+
<DesignSystemProvider defaultTheme="cozy">
|
|
133
|
+
{children}
|
|
134
|
+
</DesignSystemProvider>
|
|
135
|
+
</DirectionProvider>
|
|
136
|
+
</ThemeProvider>
|
|
132
137
|
</body>
|
|
133
138
|
</html>
|
|
134
139
|
)
|
|
135
140
|
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
**What each provider does:**
|
|
144
|
+
- **`ThemeProvider`** (next-themes): Light/Dark mode with system preference support
|
|
145
|
+
- **`DirectionProvider`**: RTL/LTR direction and locale switching (ar/en)
|
|
146
|
+
- **`DesignSystemProvider`**: Design theme variants (minimal/futuristic/cozy/artistic)
|
|
147
|
+
|
|
148
|
+
**Switching themes programmatically:**
|
|
136
149
|
|
|
137
|
-
|
|
150
|
+
```tsx
|
|
138
151
|
import { useDesignSystem } from 'noorui-rtl'
|
|
152
|
+
import { useTheme } from 'next-themes'
|
|
153
|
+
import { useDirection } from 'noorui-rtl'
|
|
139
154
|
|
|
140
|
-
function
|
|
155
|
+
function Settings() {
|
|
141
156
|
const { designTheme, setDesignTheme } = useDesignSystem()
|
|
157
|
+
const { theme, setTheme } = useTheme()
|
|
158
|
+
const { direction, setDirection } = useDirection()
|
|
142
159
|
|
|
143
160
|
return (
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
161
|
+
<div>
|
|
162
|
+
{/* Design theme */}
|
|
163
|
+
<select value={designTheme} onChange={(e) => setDesignTheme(e.target.value)}>
|
|
164
|
+
<option value="minimal">Minimal</option>
|
|
165
|
+
<option value="futuristic">Futuristic</option>
|
|
166
|
+
<option value="cozy">Cozy</option>
|
|
167
|
+
<option value="artistic">Artistic</option>
|
|
168
|
+
</select>
|
|
169
|
+
|
|
170
|
+
{/* Light/Dark mode */}
|
|
171
|
+
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
|
|
172
|
+
Toggle {theme === 'dark' ? 'Light' : 'Dark'} Mode
|
|
173
|
+
</button>
|
|
174
|
+
|
|
175
|
+
{/* Direction */}
|
|
176
|
+
<button onClick={() => setDirection(direction === 'rtl' ? 'ltr' : 'rtl')}>
|
|
177
|
+
Switch to {direction === 'rtl' ? 'LTR' : 'RTL'}
|
|
178
|
+
</button>
|
|
179
|
+
</div>
|
|
150
180
|
)
|
|
151
181
|
}
|
|
152
182
|
```
|
package/dist/index.js
CHANGED
|
@@ -16258,7 +16258,7 @@ function DashboardShell({
|
|
|
16258
16258
|
"aria-label": t.ui.components.menu
|
|
16259
16259
|
},
|
|
16260
16260
|
/* @__PURE__ */ React68__namespace.createElement(lucideReact.Menu, { className: "h-6 w-6" })
|
|
16261
|
-
)), /* @__PURE__ */ React68__namespace.createElement(SheetContent, { side:
|
|
16261
|
+
)), /* @__PURE__ */ React68__namespace.createElement(SheetContent, { side: "start", className: "w-80 p-0" }, /* @__PURE__ */ React68__namespace.createElement(SheetTitle, { className: "sr-only" }, t.ui.components.menu), /* @__PURE__ */ React68__namespace.createElement("div", { className: "flex h-full flex-col" }, /* @__PURE__ */ React68__namespace.createElement("div", { className: "flex h-16 items-center border-b px-6" }, /* @__PURE__ */ React68__namespace.createElement(
|
|
16262
16262
|
Link__default.default,
|
|
16263
16263
|
{
|
|
16264
16264
|
href: logoHref,
|