@once-ui-system/core 1.0.8 → 1.0.9

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.
Files changed (4) hide show
  1. package/README.md +97 -21
  2. package/dist/README.md +97 -21
  3. package/dist/package.json +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -16,45 +16,123 @@ pnpm add @once-ui-system/core
16
16
 
17
17
  Start building your Next.js app in minutes.
18
18
 
19
- * **Customization**: Manage design config in a single file.
19
+ * **Customization**: Manage design config with the ThemeProvider context.
20
20
  * **Components**: Access advanced components with simple APIs.
21
21
  * **Data-viz**: Add responsive charts with a few lines of code.
22
- * **SEO**: Use our SEO components to simplify meta and schema setup.
22
+ * **SEO**: Use SEO components to simplify meta and schema setup.
23
23
 
24
24
  ## Documentation
25
25
 
26
26
  Learn how to build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
27
27
 
28
- ## Quick start
29
-
30
- [Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
31
-
32
28
  ## Styling
33
29
 
34
- Once UI provides two options for styling your components:
30
+ Import styles and tokens in your root layout file:
35
31
 
36
- ### Option 1: Pre-compiled CSS (Recommended)
37
-
38
- ```jsx
32
+ ```js
39
33
  // Import the pre-compiled CSS files
40
34
  import '@once-ui-system/core/css/styles.css';
41
35
  import '@once-ui-system/core/css/tokens.css';
42
36
  ```
43
37
 
44
- ### Option 2: SCSS (Advanced)
38
+ Create a `Providers.tsx` component:
39
+
40
+ ```js
41
+ "use client";
42
+
43
+ import { DataThemeProvider, IconProvider, ThemeProvider, ToastProvider } from "@once-ui-system/core";
44
+
45
+ export function Providers({ children }: { children: React.ReactNode }) {
46
+ return (
47
+ <ThemeProvider>
48
+ <DataThemeProvider>
49
+ <ToastProvider>
50
+ <IconProvider>
51
+ {children}
52
+ </IconProvider>
53
+ </ToastProvider>
54
+ </DataThemeProvider>
55
+ </ThemeProvider>
56
+ );
57
+ }
58
+ ```
59
+
60
+ Wrap your app with the `Providers` component in your root layout:
45
61
 
46
- If you need more customization, you can import the SCSS files directly. Note that this requires configuring your bundler to handle SCSS imports from node_modules:
62
+ ```js
63
+ import { Providers } from "./providers";
47
64
 
48
- ```jsx
49
- // In a JavaScript/TypeScript file (requires bundler configuration)
50
- import '@once-ui-system/core/styles/index.scss';
51
- import '@once-ui-system/core/tokens/index.scss';
65
+ export default function RootLayout({ children }: {
66
+ children: React.ReactNode
67
+ }) {
68
+ return (
69
+ <Providers>
70
+ {children}
71
+ </Providers>
72
+ );
73
+ }
74
+ ```
52
75
 
53
- // Or in an SCSS file
54
- @use '~@once-ui-system/core/styles/index.scss';
55
- @use '~@once-ui-system/core/tokens/index.scss';
76
+ Prevent flash of unstyled content (FOUC) by adding the following script to the `<head>` of your root layout:
77
+
78
+ ```js
79
+ <head>
80
+ <script
81
+ dangerouslySetInnerHTML={{
82
+ __html: `
83
+ (function() {
84
+ try {
85
+ const root = document.documentElement;
86
+
87
+ root.setAttribute('data-theme', 'dark');
88
+
89
+ root.setAttribute('data-neutral', 'gray');
90
+ root.setAttribute('data-brand', 'blue');
91
+ root.setAttribute('data-accent', 'indigo');
92
+ root.setAttribute('data-solid', 'contrast');
93
+ root.setAttribute('data-solid-style', 'flat');
94
+ root.setAttribute('data-border', 'playful');
95
+ root.setAttribute('data-surface', 'filled');
96
+ root.setAttribute('data-transition', 'all');
97
+ root.setAttribute('data-scaling', '100');
98
+ root.setAttribute('data-viz-style', 'categorical');
99
+
100
+ const theme = localStorage.getItem('theme');
101
+ if (theme) {
102
+ if (theme === 'system') {
103
+ const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
104
+ root.setAttribute('data-theme', isDark ? 'dark' : 'light');
105
+ } else {
106
+ root.setAttribute('data-theme', theme);
107
+ }
108
+ }
109
+
110
+ const styleKeys = ['neutral', 'brand', 'accent', 'solid', 'solid-style', 'border', 'surface', 'transition', 'scaling'];
111
+ styleKeys.forEach(key => {
112
+ const value = localStorage.getItem('data-' + key);
113
+ if (value) {
114
+ root.setAttribute('data-' + key, value);
115
+ }
116
+ });
117
+
118
+ const dataViz = localStorage.getItem('data-viz-style');
119
+ if (dataViz) {
120
+ root.setAttribute('data-viz-style', dataViz);
121
+ }
122
+ } catch (e) {
123
+ document.documentElement.setAttribute('data-theme', 'dark');
124
+ }
125
+ })();
126
+ `,
127
+ }}
128
+ />
129
+ </head>
56
130
  ```
57
131
 
132
+ ## Quick start
133
+
134
+ [Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
135
+
58
136
  [Magic Store](https://once-ui.com/products/magic-store) (PRO): Our premium ecommerce storefront that lets you launch your merch store in minutes. Payment, production and shipping managed by Fourthwall.
59
137
 
60
138
  [Magic Docs](https://once-ui.com/products/magic-docs) (PRO): Our premium documentation generator. Just add your MDX files and let Magic Docs handle the rest.
@@ -65,8 +143,6 @@ import '@once-ui-system/core/tokens/index.scss';
65
143
 
66
144
  [Once UI for Figma](https://once-ui.com/figma) (PRO): Design and prototype entire products from scratch in hours.
67
145
 
68
-
69
-
70
146
  ## Creators
71
147
 
72
148
  Connect with us!
package/dist/README.md CHANGED
@@ -16,45 +16,123 @@ pnpm add @once-ui-system/core
16
16
 
17
17
  Start building your Next.js app in minutes.
18
18
 
19
- * **Customization**: Manage design config in a single file.
19
+ * **Customization**: Manage design config with the ThemeProvider context.
20
20
  * **Components**: Access advanced components with simple APIs.
21
21
  * **Data-viz**: Add responsive charts with a few lines of code.
22
- * **SEO**: Use our SEO components to simplify meta and schema setup.
22
+ * **SEO**: Use SEO components to simplify meta and schema setup.
23
23
 
24
24
  ## Documentation
25
25
 
26
26
  Learn how to build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
27
27
 
28
- ## Quick start
29
-
30
- [Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
31
-
32
28
  ## Styling
33
29
 
34
- Once UI provides two options for styling your components:
30
+ Import styles and tokens in your root layout file:
35
31
 
36
- ### Option 1: Pre-compiled CSS (Recommended)
37
-
38
- ```jsx
32
+ ```js
39
33
  // Import the pre-compiled CSS files
40
34
  import '@once-ui-system/core/css/styles.css';
41
35
  import '@once-ui-system/core/css/tokens.css';
42
36
  ```
43
37
 
44
- ### Option 2: SCSS (Advanced)
38
+ Create a `Providers.tsx` component:
39
+
40
+ ```js
41
+ "use client";
42
+
43
+ import { DataThemeProvider, IconProvider, ThemeProvider, ToastProvider } from "@once-ui-system/core";
44
+
45
+ export function Providers({ children }: { children: React.ReactNode }) {
46
+ return (
47
+ <ThemeProvider>
48
+ <DataThemeProvider>
49
+ <ToastProvider>
50
+ <IconProvider>
51
+ {children}
52
+ </IconProvider>
53
+ </ToastProvider>
54
+ </DataThemeProvider>
55
+ </ThemeProvider>
56
+ );
57
+ }
58
+ ```
59
+
60
+ Wrap your app with the `Providers` component in your root layout:
45
61
 
46
- If you need more customization, you can import the SCSS files directly. Note that this requires configuring your bundler to handle SCSS imports from node_modules:
62
+ ```js
63
+ import { Providers } from "./providers";
47
64
 
48
- ```jsx
49
- // In a JavaScript/TypeScript file (requires bundler configuration)
50
- import '@once-ui-system/core/styles/index.scss';
51
- import '@once-ui-system/core/tokens/index.scss';
65
+ export default function RootLayout({ children }: {
66
+ children: React.ReactNode
67
+ }) {
68
+ return (
69
+ <Providers>
70
+ {children}
71
+ </Providers>
72
+ );
73
+ }
74
+ ```
52
75
 
53
- // Or in an SCSS file
54
- @use '~@once-ui-system/core/styles/index.scss';
55
- @use '~@once-ui-system/core/tokens/index.scss';
76
+ Prevent flash of unstyled content (FOUC) by adding the following script to the `<head>` of your root layout:
77
+
78
+ ```js
79
+ <head>
80
+ <script
81
+ dangerouslySetInnerHTML={{
82
+ __html: `
83
+ (function() {
84
+ try {
85
+ const root = document.documentElement;
86
+
87
+ root.setAttribute('data-theme', 'dark');
88
+
89
+ root.setAttribute('data-neutral', 'gray');
90
+ root.setAttribute('data-brand', 'blue');
91
+ root.setAttribute('data-accent', 'indigo');
92
+ root.setAttribute('data-solid', 'contrast');
93
+ root.setAttribute('data-solid-style', 'flat');
94
+ root.setAttribute('data-border', 'playful');
95
+ root.setAttribute('data-surface', 'filled');
96
+ root.setAttribute('data-transition', 'all');
97
+ root.setAttribute('data-scaling', '100');
98
+ root.setAttribute('data-viz-style', 'categorical');
99
+
100
+ const theme = localStorage.getItem('theme');
101
+ if (theme) {
102
+ if (theme === 'system') {
103
+ const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
104
+ root.setAttribute('data-theme', isDark ? 'dark' : 'light');
105
+ } else {
106
+ root.setAttribute('data-theme', theme);
107
+ }
108
+ }
109
+
110
+ const styleKeys = ['neutral', 'brand', 'accent', 'solid', 'solid-style', 'border', 'surface', 'transition', 'scaling'];
111
+ styleKeys.forEach(key => {
112
+ const value = localStorage.getItem('data-' + key);
113
+ if (value) {
114
+ root.setAttribute('data-' + key, value);
115
+ }
116
+ });
117
+
118
+ const dataViz = localStorage.getItem('data-viz-style');
119
+ if (dataViz) {
120
+ root.setAttribute('data-viz-style', dataViz);
121
+ }
122
+ } catch (e) {
123
+ document.documentElement.setAttribute('data-theme', 'dark');
124
+ }
125
+ })();
126
+ `,
127
+ }}
128
+ />
129
+ </head>
56
130
  ```
57
131
 
132
+ ## Quick start
133
+
134
+ [Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
135
+
58
136
  [Magic Store](https://once-ui.com/products/magic-store) (PRO): Our premium ecommerce storefront that lets you launch your merch store in minutes. Payment, production and shipping managed by Fourthwall.
59
137
 
60
138
  [Magic Docs](https://once-ui.com/products/magic-docs) (PRO): Our premium documentation generator. Just add your MDX files and let Magic Docs handle the rest.
@@ -65,8 +143,6 @@ import '@once-ui-system/core/tokens/index.scss';
65
143
 
66
144
  [Once UI for Figma](https://once-ui.com/figma) (PRO): Design and prototype entire products from scratch in hours.
67
145
 
68
-
69
-
70
146
  ## Creators
71
147
 
72
148
  Connect with us!
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@once-ui-system/core",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "Once UI for Next.js NPM package",
5
5
  "keywords": [
6
6
  "once-ui",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@once-ui-system/core",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "Once UI for Next.js NPM package",
5
5
  "keywords": [
6
6
  "once-ui",