@once-ui-system/core 1.4.32 → 1.5.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.
Files changed (189) hide show
  1. package/.eslintrc.json +3 -3
  2. package/{LICENSE → LICENSE.md} +1 -1
  3. package/dist/components/Animation.d.ts +34 -0
  4. package/dist/components/Animation.d.ts.map +1 -0
  5. package/dist/components/Animation.js +230 -0
  6. package/dist/components/Animation.js.map +1 -0
  7. package/dist/components/ArrowNavigationContext.d.ts.map +1 -1
  8. package/dist/components/ArrowNavigationContext.js +2 -1
  9. package/dist/components/ArrowNavigationContext.js.map +1 -1
  10. package/dist/components/AutoScroll.module.scss +8 -8
  11. package/dist/components/Background.d.ts.map +1 -1
  12. package/dist/components/Background.js +23 -15
  13. package/dist/components/Background.js.map +1 -1
  14. package/dist/components/Button.d.ts +1 -0
  15. package/dist/components/Button.d.ts.map +1 -1
  16. package/dist/components/Button.js +2 -2
  17. package/dist/components/Button.js.map +1 -1
  18. package/dist/components/Card.d.ts.map +1 -1
  19. package/dist/components/Card.js +2 -4
  20. package/dist/components/Card.js.map +1 -1
  21. package/dist/components/Card.module.scss +4 -2
  22. package/dist/components/Carousel.module.scss +31 -31
  23. package/dist/components/ClientFlex.d.ts.map +1 -1
  24. package/dist/components/ClientFlex.js +8 -58
  25. package/dist/components/ClientFlex.js.map +1 -1
  26. package/dist/components/ClientGrid.d.ts.map +1 -1
  27. package/dist/components/ClientGrid.js +8 -58
  28. package/dist/components/ClientGrid.js.map +1 -1
  29. package/dist/components/ColorInput.d.ts.map +1 -1
  30. package/dist/components/ColorInput.js +5 -19
  31. package/dist/components/ColorInput.js.map +1 -1
  32. package/dist/components/CompareImage.d.ts.map +1 -1
  33. package/dist/components/CompareImage.js +1 -1
  34. package/dist/components/CompareImage.js.map +1 -1
  35. package/dist/components/Dialog.module.scss +32 -32
  36. package/dist/components/DropdownWrapper.d.ts.map +1 -1
  37. package/dist/components/DropdownWrapper.js +144 -30
  38. package/dist/components/DropdownWrapper.js.map +1 -1
  39. package/dist/components/EmojiPicker.d.ts.map +1 -1
  40. package/dist/components/EmojiPicker.js +14 -12
  41. package/dist/components/EmojiPicker.js.map +1 -1
  42. package/dist/components/EmojiPicker.module.scss +14 -0
  43. package/dist/components/EmojiPickerDropdown.d.ts.map +1 -1
  44. package/dist/components/EmojiPickerDropdown.js +1 -1
  45. package/dist/components/EmojiPickerDropdown.js.map +1 -1
  46. package/dist/components/Flex.d.ts.map +1 -1
  47. package/dist/components/Flex.js +1 -80
  48. package/dist/components/Flex.js.map +1 -1
  49. package/dist/components/Grid.d.ts.map +1 -1
  50. package/dist/components/Grid.js +1 -80
  51. package/dist/components/Grid.js.map +1 -1
  52. package/dist/components/Hover.d.ts +14 -0
  53. package/dist/components/Hover.d.ts.map +1 -0
  54. package/dist/components/Hover.js +99 -0
  55. package/dist/components/Hover.js.map +1 -0
  56. package/dist/components/Hover.module.scss +12 -0
  57. package/dist/components/HoverCard.d.ts +5 -0
  58. package/dist/components/HoverCard.d.ts.map +1 -0
  59. package/dist/components/HoverCard.js +10 -0
  60. package/dist/components/HoverCard.js.map +1 -0
  61. package/dist/components/HoverCard.module.scss +12 -0
  62. package/dist/components/Icon.d.ts.map +1 -1
  63. package/dist/components/Icon.js +8 -19
  64. package/dist/components/Icon.js.map +1 -1
  65. package/dist/components/IconButton.d.ts.map +1 -1
  66. package/dist/components/IconButton.js +9 -20
  67. package/dist/components/IconButton.js.map +1 -1
  68. package/dist/components/IconButton.module.scss +0 -24
  69. package/dist/components/Input.d.ts +1 -0
  70. package/dist/components/Input.d.ts.map +1 -1
  71. package/dist/components/Input.js +6 -2
  72. package/dist/components/Input.js.map +1 -1
  73. package/dist/components/MatrixFx.d.ts +15 -0
  74. package/dist/components/MatrixFx.d.ts.map +1 -0
  75. package/dist/components/MatrixFx.js +307 -0
  76. package/dist/components/MatrixFx.js.map +1 -0
  77. package/dist/components/Option.d.ts.map +1 -1
  78. package/dist/components/Option.js +38 -7
  79. package/dist/components/Option.js.map +1 -1
  80. package/dist/components/Option.module.scss +13 -10
  81. package/dist/components/Particle.d.ts +2 -1
  82. package/dist/components/Particle.d.ts.map +1 -1
  83. package/dist/components/Particle.js +27 -6
  84. package/dist/components/Particle.js.map +1 -1
  85. package/dist/components/Select.d.ts.map +1 -1
  86. package/dist/components/Select.js +41 -31
  87. package/dist/components/Select.js.map +1 -1
  88. package/dist/components/ServerFlex.d.ts +1 -0
  89. package/dist/components/ServerFlex.d.ts.map +1 -1
  90. package/dist/components/ServerFlex.js +37 -22
  91. package/dist/components/ServerFlex.js.map +1 -1
  92. package/dist/components/ServerGrid.d.ts +1 -0
  93. package/dist/components/ServerGrid.d.ts.map +1 -1
  94. package/dist/components/ServerGrid.js +7 -2
  95. package/dist/components/ServerGrid.js.map +1 -1
  96. package/dist/components/SharedInteractiveStyles.module.scss +1 -1
  97. package/dist/components/ShineFx.d.ts +11 -0
  98. package/dist/components/ShineFx.d.ts.map +1 -0
  99. package/dist/components/ShineFx.js +15 -0
  100. package/dist/components/ShineFx.js.map +1 -0
  101. package/dist/components/ShineFx.module.scss +33 -0
  102. package/dist/components/Swiper.d.ts +17 -0
  103. package/dist/components/Swiper.d.ts.map +1 -0
  104. package/dist/components/Swiper.js +170 -0
  105. package/dist/components/Swiper.js.map +1 -0
  106. package/dist/components/Swiper.module.scss +31 -0
  107. package/dist/components/Switch.module.scss +1 -1
  108. package/dist/components/Textarea.d.ts +1 -0
  109. package/dist/components/Textarea.d.ts.map +1 -1
  110. package/dist/components/Textarea.js +6 -2
  111. package/dist/components/Textarea.js.map +1 -1
  112. package/dist/components/TiltFx.d.ts +1 -0
  113. package/dist/components/TiltFx.d.ts.map +1 -1
  114. package/dist/components/TiltFx.js +5 -4
  115. package/dist/components/TiltFx.js.map +1 -1
  116. package/dist/components/Timeline.d.ts +18 -0
  117. package/dist/components/Timeline.d.ts.map +1 -0
  118. package/dist/components/Timeline.js +28 -0
  119. package/dist/components/Timeline.js.map +1 -0
  120. package/dist/components/Tooltip.d.ts +2 -2
  121. package/dist/components/Tooltip.d.ts.map +1 -1
  122. package/dist/components/Tooltip.js +4 -3
  123. package/dist/components/Tooltip.js.map +1 -1
  124. package/dist/components/Tooltip.module.scss +14 -0
  125. package/dist/components/TypeFx.d.ts +15 -0
  126. package/dist/components/TypeFx.d.ts.map +1 -0
  127. package/dist/components/TypeFx.js +105 -0
  128. package/dist/components/TypeFx.js.map +1 -0
  129. package/dist/components/UserMenu.d.ts.map +1 -1
  130. package/dist/components/UserMenu.js +3 -3
  131. package/dist/components/UserMenu.js.map +1 -1
  132. package/dist/components/index.d.ts +8 -0
  133. package/dist/components/index.d.ts.map +1 -1
  134. package/dist/components/index.js +8 -0
  135. package/dist/components/index.js.map +1 -1
  136. package/dist/contexts/LayoutProvider.d.ts +1 -0
  137. package/dist/contexts/LayoutProvider.d.ts.map +1 -1
  138. package/dist/contexts/LayoutProvider.js +30 -4
  139. package/dist/contexts/LayoutProvider.js.map +1 -1
  140. package/dist/css/styles.css +1 -1
  141. package/dist/css/styles.css.map +1 -1
  142. package/dist/css/tokens.css +1 -1
  143. package/dist/css/tokens.css.map +1 -1
  144. package/dist/data/emoji-data.json +0 -8
  145. package/dist/hooks/useResponsiveClasses.d.ts +9 -0
  146. package/dist/hooks/useResponsiveClasses.d.ts.map +1 -0
  147. package/dist/hooks/useResponsiveClasses.js +250 -0
  148. package/dist/hooks/useResponsiveClasses.js.map +1 -0
  149. package/dist/icons.d.ts.map +1 -1
  150. package/dist/icons.js +3 -1
  151. package/dist/icons.js.map +1 -1
  152. package/dist/interfaces.d.ts +1 -0
  153. package/dist/interfaces.d.ts.map +1 -1
  154. package/dist/modules/code/CodeBlock.d.ts.map +1 -1
  155. package/dist/modules/code/CodeBlock.js +17 -7
  156. package/dist/modules/code/CodeBlock.js.map +1 -1
  157. package/dist/modules/code/LineNumber.css +34 -34
  158. package/dist/modules/navigation/HeadingLink.d.ts +2 -2
  159. package/dist/modules/navigation/HeadingLink.d.ts.map +1 -1
  160. package/dist/modules/navigation/HeadingLink.js +3 -3
  161. package/dist/modules/navigation/HeadingLink.js.map +1 -1
  162. package/dist/modules/navigation/HeadingLink.module.scss +5 -14
  163. package/dist/modules/navigation/HeadingNav.d.ts +1 -0
  164. package/dist/modules/navigation/HeadingNav.d.ts.map +1 -1
  165. package/dist/modules/navigation/HeadingNav.js +32 -30
  166. package/dist/modules/navigation/HeadingNav.js.map +1 -1
  167. package/dist/modules/navigation/Kbar.d.ts.map +1 -1
  168. package/dist/modules/navigation/Kbar.js +40 -99
  169. package/dist/modules/navigation/Kbar.js.map +1 -1
  170. package/dist/modules/navigation/MegaMenu.d.ts +1 -0
  171. package/dist/modules/navigation/MegaMenu.d.ts.map +1 -1
  172. package/dist/modules/navigation/MegaMenu.js +121 -44
  173. package/dist/modules/navigation/MegaMenu.js.map +1 -1
  174. package/dist/package.json +10 -1
  175. package/dist/styles/border.scss +36 -0
  176. package/dist/styles/breakpoints.scss +7 -0
  177. package/dist/styles/display.scss +64 -0
  178. package/dist/styles/flex.scss +87 -0
  179. package/dist/styles/global.scss +3 -24
  180. package/dist/styles/grid.scss +58 -0
  181. package/dist/styles/position.scss +310 -0
  182. package/dist/styles/typography.scss +36 -10
  183. package/dist/tokens/border.scss +28 -4
  184. package/dist/tokens/theme.scss +2 -0
  185. package/dist/tokens/typography.scss +5 -1
  186. package/package.json +10 -1
  187. package/README.md +0 -159
  188. package/USAGE.md +0 -55
  189. package/dist/README.md +0 -159
package/USAGE.md DELETED
@@ -1,55 +0,0 @@
1
- # Usage Examples for @once-ui-system/core
2
-
3
- ## Using Components
4
-
5
- ```jsx
6
- import { Button, Card, Heading } from '@once-ui-system/core';
7
-
8
- export default function MyComponent() {
9
- return (
10
- <Card>
11
- <Heading>Hello World</Heading>
12
- <Button variant="primary">Click Me</Button>
13
- </Card>
14
- );
15
- }
16
- ```
17
-
18
- ## Using Hooks
19
-
20
- ```jsx
21
- import { Input, useDebounce } from '@once-ui-system/core';
22
-
23
- export default function SearchComponent() {
24
- const [searchTerm, setSearchTerm] = useState('');
25
- const debouncedSearchTerm = useDebounce(searchTerm, 500);
26
-
27
- // Use debouncedSearchTerm for API calls
28
-
29
- return (
30
- <Input
31
- type="text"
32
- value={searchTerm}
33
- onChange={(e) => setSearchTerm(e.target.value)}
34
- placeholder="Search..."
35
- />
36
- );
37
- }
38
- ```
39
-
40
- ## Using Utilities
41
-
42
- ```jsx
43
- import { Button, dev } from '@once-ui-system/core';
44
-
45
- export default function MyComponent() {
46
- const handleClick = () => {
47
- dev.log('Button clicked');
48
- // Your logic here
49
- };
50
-
51
- return (
52
- <Button onClick={handleClick}>Click Me</Button>
53
- );
54
- }
55
- ```
package/dist/README.md DELETED
@@ -1,159 +0,0 @@
1
- # Once UI
2
-
3
- A design system for indie builders who move fast and break limits without neglecting quality. Once UI combines the simplicity of low-code with the power of code: write 70% less compared to shadcn + tailwind.
4
-
5
- * **Customization**: Manage design config with the ThemeProvider context.
6
- * **Components**: Access advanced components with simple APIs.
7
- * **Data-viz**: Add responsive charts with a few lines of code.
8
- * **SEO**: Use SEO components to simplify meta and schema setup.
9
-
10
- ## Installation
11
-
12
- ```bash
13
- npm install @once-ui-system/core
14
- # or
15
- yarn add @once-ui-system/core
16
- # or
17
- pnpm add @once-ui-system/core
18
- ```
19
-
20
- ## Documentation
21
-
22
- Learn how to build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
23
-
24
- ## Setup
25
-
26
- Import styles and tokens in your root layout file:
27
-
28
- ```js
29
- // Import the pre-compiled CSS files
30
- import '@once-ui-system/core/css/styles.css';
31
- import '@once-ui-system/core/css/tokens.css';
32
- ```
33
-
34
- Create a `Providers.tsx` component:
35
-
36
- ```js
37
- "use client";
38
-
39
- import { DataThemeProvider, IconProvider, ThemeProvider, ToastProvider } from "@once-ui-system/core";
40
-
41
- export function Providers({ children }: { children: React.ReactNode }) {
42
- return (
43
- <ThemeProvider>
44
- <DataThemeProvider>
45
- <ToastProvider>
46
- <IconProvider>
47
- {children}
48
- </IconProvider>
49
- </ToastProvider>
50
- </DataThemeProvider>
51
- </ThemeProvider>
52
- );
53
- }
54
- ```
55
-
56
- Wrap your app with the `Providers` component in your root layout:
57
-
58
- ```js
59
- import { Providers } from "./providers";
60
-
61
- export default function RootLayout({ children }: {
62
- children: React.ReactNode
63
- }) {
64
- return (
65
- <Providers>
66
- {children}
67
- </Providers>
68
- );
69
- }
70
- ```
71
-
72
- Prevent flash of unstyled content (FOUC) by adding the following script to the `<head>` of your root layout:
73
-
74
- ```js
75
- <head>
76
- <script
77
- dangerouslySetInnerHTML={{
78
- __html: `
79
- (function() {
80
- try {
81
- const root = document.documentElement;
82
-
83
- const defaultTheme = 'system';
84
- root.setAttribute('data-neutral', 'gray');
85
- root.setAttribute('data-brand', 'blue');
86
- root.setAttribute('data-accent', 'indigo');
87
- root.setAttribute('data-solid', 'contrast');
88
- root.setAttribute('data-solid-style', 'flat');
89
- root.setAttribute('data-border', 'playful');
90
- root.setAttribute('data-surface', 'filled');
91
- root.setAttribute('data-transition', 'all');
92
- root.setAttribute('data-scaling', '100');
93
- root.setAttribute('data-viz-style', 'categorical');
94
-
95
- const resolveTheme = (themeValue) => {
96
- if (!themeValue || themeValue === 'system') {
97
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
98
- }
99
- return themeValue;
100
- };
101
-
102
- const theme = localStorage.getItem('data-theme');
103
- const resolvedTheme = resolveTheme(theme);
104
- root.setAttribute('data-theme', resolvedTheme);
105
-
106
- const styleKeys = ['neutral', 'brand', 'accent', 'solid', 'solid-style', 'viz-style', 'border', 'surface', 'transition', 'scaling'];
107
- styleKeys.forEach(key => {
108
- const value = localStorage.getItem('data-' + key);
109
- if (value) {
110
- root.setAttribute('data-' + key, value);
111
- }
112
- });
113
- } catch (e) {
114
- document.documentElement.setAttribute('data-theme', 'dark');
115
- }
116
- })();
117
- `,
118
- }}
119
- />
120
- </head>
121
- ```
122
-
123
- ## Quick start
124
-
125
- [Magic Portfolio](https://once-ui.com/products/magic-portfolio): Our free portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.
126
-
127
- [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.
128
-
129
- [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.
130
-
131
- [Magic Bio](https://once-ui.com/products/magic-bio) (PRO): Our premium link-in-bio template that automatically fetches open-graph data. Just add your links and deploy.
132
-
133
- [Once UI Blocks](https://once-ui.com/blocks) (PRO): Copy-paste pre-designed blocks and deploy fully-functional sites with lightning speed.
134
-
135
- [Once UI for Figma](https://once-ui.com/figma) (PRO): Design and prototype entire products from scratch in hours.
136
-
137
- ## Creators
138
-
139
- Connect with us!
140
-
141
- **Lorant One**: [Portfolio](https://lorant.one) / [Threads](https://www.threads.net/@lorant.one) / [LinkedIn](https://www.linkedin.com/in/lorant-one/)
142
-
143
- **Zsofia Komaromi**: [Portfolio](https://zsofia.pro) / [Threads](https://www.threads.net/@zsofia_kom) / [LinkedIn](https://www.linkedin.com/in/zsofiakomaromi/)
144
-
145
- ## Become a Oncer
146
-
147
- ![Design Engineers Club](https://docs.once-ui.com/images/docs/vibe-coding-dark.jpg)
148
-
149
- Join the [Design Engineers Club](https://discord.com/invite/5EyAQ4eNdS) on Discord to connect with us and share your projects.
150
-
151
- Found a bug? Report it [here](https://github.com/once-ui-system/once-ui/issues/new?labels=bug&template=bug_report.md). Got a feature request? Submit it [here](https://github.com/once-ui-system/once-ui/issues/new?labels=feature%20request&template=feature_request.md).
152
-
153
- ## Sponsors
154
-
155
- Once UI is an indie project. [Sponsor us](https://github.com/sponsors/once-ui-system) and get featured on our site!
156
-
157
- ## License
158
-
159
- Distributed under the MIT License. See `LICENSE.txt` for more information.