@neo-ui-kit/react 0.0.0-stage → 1.0.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 (270) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +203 -2
  3. package/dist/artwork/icons.json.d.ts +2 -0
  4. package/dist/artwork/illustrations.json.d.ts +2 -0
  5. package/dist/chunks/chunk-347P6ZE4.js +104 -0
  6. package/dist/chunks/chunk-BJSFN52W.js +417 -0
  7. package/dist/chunks/chunk-FCOU3ODR.js +63 -0
  8. package/dist/chunks/chunk-JZ4GDTH5.js +87 -0
  9. package/dist/chunks/chunk-UGDRXR7P.js +3362 -0
  10. package/dist/chunks/chunk-VK6GHRLV.js +335 -0
  11. package/dist/chunks/chunk-YKCUOZ7V.js +777 -0
  12. package/dist/components/artwork/DatabaseArt/DatabaseArt.d.ts +6 -0
  13. package/dist/components/artwork/DatabaseArt/styles.css +58 -0
  14. package/dist/components/artwork/Landscape/Landscape.d.ts +7 -0
  15. package/dist/components/artwork/Landscape/styles.css +79 -0
  16. package/dist/components/artwork/NeonWaves/NeonWaves.d.ts +15 -0
  17. package/dist/components/artwork/NeonWaves/styles.css +48 -0
  18. package/dist/components/artwork/Planet/Planet.d.ts +4 -0
  19. package/dist/components/artwork/Planet/styles.css +52 -0
  20. package/dist/components/artwork/QuantumField/QuantumField.d.ts +42 -0
  21. package/dist/components/artwork/QuantumField/QuantumFieldExperience.d.ts +22 -0
  22. package/dist/components/artwork/QuantumField/UPSTREAM-LICENSE.txt +21 -0
  23. package/dist/components/artwork/QuantumField/audio.d.ts +15 -0
  24. package/dist/components/artwork/QuantumField/renderer.d.ts +24 -0
  25. package/dist/components/artwork/QuantumField/styles.css +77 -0
  26. package/dist/components/artwork/ServerArt/ServerArt.d.ts +8 -0
  27. package/dist/components/artwork/ServerArt/styles.css +43 -0
  28. package/dist/components/artwork/Spectrum/Spectrum.d.ts +7 -0
  29. package/dist/components/artwork/Spectrum/styles.css +35 -0
  30. package/dist/components/artwork/layers.d.ts +15 -0
  31. package/dist/components/artwork/useArtwork.d.ts +8 -0
  32. package/dist/components/controls/Autocomplete/Autocomplete.d.ts +2 -0
  33. package/dist/components/controls/Autocomplete/styles.css +1 -0
  34. package/dist/components/controls/Button/Button.d.ts +2 -0
  35. package/dist/components/controls/Button/styles.css +1 -0
  36. package/dist/components/controls/Checkbox/Checkbox.d.ts +2 -0
  37. package/dist/components/controls/Checkbox/styles.css +70 -0
  38. package/dist/components/controls/Chip/Chip.d.ts +21 -0
  39. package/dist/components/controls/Chip/styles.css +74 -0
  40. package/dist/components/controls/ChipField.d.ts +25 -0
  41. package/dist/components/controls/ColorPicker/ColorPicker.d.ts +16 -0
  42. package/dist/components/controls/ColorPicker/color.d.ts +9 -0
  43. package/dist/components/controls/ColorPicker/styles.css +103 -0
  44. package/dist/components/controls/DatePicker/DatePicker.d.ts +19 -0
  45. package/dist/components/controls/DatePicker/styles.css +69 -0
  46. package/dist/components/controls/FilePicker/FilePicker.d.ts +2 -0
  47. package/dist/components/controls/FilePicker/styles.css +149 -0
  48. package/dist/components/controls/IconButton/IconButton.d.ts +2 -0
  49. package/dist/components/controls/IconButton/styles.css +4 -0
  50. package/dist/components/controls/InputBase/InputBase.d.ts +21 -0
  51. package/dist/components/controls/InputBase/styles.css +379 -0
  52. package/dist/components/controls/Link/Link.d.ts +11 -0
  53. package/dist/components/controls/Link/styles.css +50 -0
  54. package/dist/components/controls/NumberField/NumberField.d.ts +2 -0
  55. package/dist/components/controls/NumberField/styles.css +1 -0
  56. package/dist/components/controls/PeoplePicker/PeoplePicker.d.ts +37 -0
  57. package/dist/components/controls/PeoplePicker/styles.css +7 -0
  58. package/dist/components/controls/SegmentedControl/SegmentedControl.d.ts +2 -0
  59. package/dist/components/controls/SegmentedControl/styles.css +9 -0
  60. package/dist/components/controls/Select/Select.d.ts +8 -0
  61. package/dist/components/controls/Select/styles.css +142 -0
  62. package/dist/components/controls/Slider/Slider.d.ts +3 -0
  63. package/dist/components/controls/Slider/styles.css +138 -0
  64. package/dist/components/controls/SplitButton/SplitButton.d.ts +2 -0
  65. package/dist/components/controls/SplitButton/styles.css +169 -0
  66. package/dist/components/controls/Switch/Switch.d.ts +2 -0
  67. package/dist/components/controls/Switch/styles.css +54 -0
  68. package/dist/components/controls/Tab/Tab.d.ts +2 -0
  69. package/dist/components/controls/Tab/styles.css +111 -0
  70. package/dist/components/controls/Tabs/Tabs.d.ts +2 -0
  71. package/dist/components/controls/Tabs/styles.css +239 -0
  72. package/dist/components/controls/TagInput/TagInput.d.ts +24 -0
  73. package/dist/components/controls/TagInput/styles.css +24 -0
  74. package/dist/components/controls/TextArea/TextArea.d.ts +2 -0
  75. package/dist/components/controls/TextArea/styles.css +15 -0
  76. package/dist/components/controls/TextField/TextField.d.ts +2 -0
  77. package/dist/components/controls/ThemePicker/ThemePicker.d.ts +24 -0
  78. package/dist/components/controls/ThemePicker/styles.css +128 -0
  79. package/dist/components/controls/ToggleButton/ToggleButton.d.ts +2 -0
  80. package/dist/components/controls/ToggleButton/styles.css +49 -0
  81. package/dist/components/controls/internal.d.ts +62 -0
  82. package/dist/components/controls/shared.css +694 -0
  83. package/dist/components/controls/shared.d.ts +204 -0
  84. package/dist/components/editor/PianoRoll/PianoRoll.d.ts +65 -0
  85. package/dist/components/editor/PianoRoll/styles.css +186 -0
  86. package/dist/components/editor/shared.css +1 -0
  87. package/dist/components/effects/AnimatedBorder/AnimatedBorder.d.ts +9 -0
  88. package/dist/components/effects/AnimatedBorder/styles.css +7 -0
  89. package/dist/components/effects/Beacon/Beacon.d.ts +9 -0
  90. package/dist/components/effects/Beacon/styles.css +38 -0
  91. package/dist/components/effects/Equalizer/Equalizer.d.ts +14 -0
  92. package/dist/components/effects/Equalizer/styles.css +38 -0
  93. package/dist/components/effects/GlowText/GlowText.d.ts +9 -0
  94. package/dist/components/effects/GlowText/styles.css +56 -0
  95. package/dist/components/effects/ImageShine/ImageShine.d.ts +13 -0
  96. package/dist/components/effects/ImageShine/styles.css +66 -0
  97. package/dist/components/effects/Marquee/Marquee.d.ts +9 -0
  98. package/dist/components/effects/Marquee/styles.css +46 -0
  99. package/dist/components/effects/MelodixText/MelodixText.d.ts +15 -0
  100. package/dist/components/effects/MelodixText/styles.css +28 -0
  101. package/dist/components/effects/Reveal/Reveal.d.ts +13 -0
  102. package/dist/components/effects/Reveal/styles.css +25 -0
  103. package/dist/components/effects/Shimmer/Shimmer.d.ts +10 -0
  104. package/dist/components/effects/Shimmer/styles.css +48 -0
  105. package/dist/components/effects/Sparkles/Sparkles.d.ts +9 -0
  106. package/dist/components/effects/Sparkles/styles.css +28 -0
  107. package/dist/components/effects/Spotlight/Spotlight.d.ts +11 -0
  108. package/dist/components/effects/Spotlight/styles.css +45 -0
  109. package/dist/components/effects/Tilt/Tilt.d.ts +11 -0
  110. package/dist/components/effects/Tilt/styles.css +67 -0
  111. package/dist/components/feedback/Badge/Badge.d.ts +3 -0
  112. package/dist/components/feedback/Badge/styles.css +91 -0
  113. package/dist/components/feedback/CollapsibleSection/CollapsibleSection.d.ts +2 -0
  114. package/dist/components/feedback/CollapsibleSection/styles.css +76 -0
  115. package/dist/components/feedback/DataTable/DataTable.d.ts +16 -0
  116. package/dist/components/feedback/DataTable/styles.css +522 -0
  117. package/dist/components/feedback/Dialog/Dialog.d.ts +2 -0
  118. package/dist/components/feedback/Dialog/styles.css +82 -0
  119. package/dist/components/feedback/EmptyState/EmptyState.d.ts +2 -0
  120. package/dist/components/feedback/EmptyState/styles.css +80 -0
  121. package/dist/components/feedback/KeyValueList/KeyValueList.d.ts +2 -0
  122. package/dist/components/feedback/KeyValueList/styles.css +51 -0
  123. package/dist/components/feedback/Menu/Menu.d.ts +2 -0
  124. package/dist/components/feedback/Menu/styles.css +123 -0
  125. package/dist/components/feedback/MenuItem/MenuItem.d.ts +2 -0
  126. package/dist/components/feedback/MenuItem/styles.css +71 -0
  127. package/dist/components/feedback/MessageBar/MessageBar.d.ts +2 -0
  128. package/dist/components/feedback/MessageBar/styles.css +116 -0
  129. package/dist/components/feedback/Popover/Popover.d.ts +2 -0
  130. package/dist/components/feedback/Popover/styles.css +44 -0
  131. package/dist/components/feedback/ProgressBar/ProgressBar.d.ts +2 -0
  132. package/dist/components/feedback/ProgressBar/styles.css +76 -0
  133. package/dist/components/feedback/SignalBars/SignalBars.d.ts +11 -0
  134. package/dist/components/feedback/SignalBars/styles.css +31 -0
  135. package/dist/components/feedback/StatusIndicator/StatusIndicator.d.ts +2 -0
  136. package/dist/components/feedback/StatusIndicator/styles.css +88 -0
  137. package/dist/components/feedback/Steps/Steps.d.ts +2 -0
  138. package/dist/components/feedback/Steps/styles.css +152 -0
  139. package/dist/components/feedback/Toast/Toast.d.ts +2 -0
  140. package/dist/components/feedback/Toast/styles.css +89 -0
  141. package/dist/components/feedback/Tooltip/Tooltip.d.ts +15 -0
  142. package/dist/components/feedback/Tooltip/styles.css +38 -0
  143. package/dist/components/feedback/shared.css +22 -0
  144. package/dist/components/feedback/shared.d.ts +231 -0
  145. package/dist/components/forms/Form/Form.d.ts +35 -0
  146. package/dist/components/forms/Form/styles.css +1 -0
  147. package/dist/components/forms/FormFields/FormFields.d.ts +20 -0
  148. package/dist/components/forms/FormFields/styles.css +72 -0
  149. package/dist/components/foundation/Loader/Loader.d.ts +30 -0
  150. package/dist/components/foundation/LoaderGenerator/LoaderGenerator.d.ts +38 -0
  151. package/dist/components/foundation/LoaderGenerator/styles.css +104 -0
  152. package/dist/components/foundation/ThemeEditor/ThemeEditor.d.ts +15 -0
  153. package/dist/components/foundation/ThemeEditor/styles.css +97 -0
  154. package/dist/components/foundation/ThemeEditor/themeConfig.d.ts +47 -0
  155. package/dist/components/foundation/ThemeProvider/ThemeProvider.d.ts +32 -0
  156. package/dist/components/foundation/ThemeProvider/styles.css +59 -0
  157. package/dist/components/foundation/Typography/Typography.d.ts +17 -0
  158. package/dist/components/foundation/Typography/styles.css +115 -0
  159. package/dist/components/layout/Avatar/Avatar.d.ts +2 -0
  160. package/dist/components/layout/Avatar/HostSeal.d.ts +5 -0
  161. package/dist/components/layout/Avatar/styles.css +166 -0
  162. package/dist/components/layout/BrandMark/BrandMark.d.ts +2 -0
  163. package/dist/components/layout/BrandMark/styles.css +39 -0
  164. package/dist/components/layout/ButtonGroup/ButtonGroup.d.ts +12 -0
  165. package/dist/components/layout/ButtonGroup/styles.css +36 -0
  166. package/dist/components/layout/Card/Card.d.ts +14 -0
  167. package/dist/components/layout/Card/styles.css +37 -0
  168. package/dist/components/layout/DialogActions/DialogActions.d.ts +12 -0
  169. package/dist/components/layout/DialogActions/styles.css +31 -0
  170. package/dist/components/layout/DialogBody/DialogBody.d.ts +12 -0
  171. package/dist/components/layout/DialogBody/styles.css +28 -0
  172. package/dist/components/layout/Divider/Divider.d.ts +2 -0
  173. package/dist/components/layout/Divider/styles.css +58 -0
  174. package/dist/components/layout/FloatingPanel/FloatingPanel.d.ts +15 -0
  175. package/dist/components/layout/FloatingPanel/styles.css +47 -0
  176. package/dist/components/layout/FloatingPanel/useFloatingPanel.d.ts +54 -0
  177. package/dist/components/layout/Grid/Grid.d.ts +24 -0
  178. package/dist/components/layout/Grid/styles.css +90 -0
  179. package/dist/components/layout/Header/Header.d.ts +2 -0
  180. package/dist/components/layout/Header/styles.css +42 -0
  181. package/dist/components/layout/Icon/Icon.d.ts +4 -0
  182. package/dist/components/layout/Icon/styles.css +62 -0
  183. package/dist/components/layout/Illustration/Illustration.d.ts +2 -0
  184. package/dist/components/layout/Illustration/styles.css +104 -0
  185. package/dist/components/layout/ScrollArea/ScrollArea.d.ts +2 -0
  186. package/dist/components/layout/ScrollArea/styles.css +61 -0
  187. package/dist/components/layout/Stack/Stack.d.ts +21 -0
  188. package/dist/components/layout/Stack/styles.css +53 -0
  189. package/dist/components/layout/StatTile/StatTile.d.ts +20 -0
  190. package/dist/components/layout/StatTile/styles.css +90 -0
  191. package/dist/components/layout/TabPanel/TabPanel.d.ts +2 -0
  192. package/dist/components/layout/TabPanel/styles.css +16 -0
  193. package/dist/components/layout/Text/Text.d.ts +2 -0
  194. package/dist/components/layout/Text/styles.css +29 -0
  195. package/dist/components/layout/Toolbar/Toolbar.d.ts +12 -0
  196. package/dist/components/layout/Toolbar/styles.css +7 -0
  197. package/dist/components/layout/shared.css +79 -0
  198. package/dist/components/layout/shared.d.ts +64 -0
  199. package/dist/components/media/AudioPlayer/AudioPlayer.d.ts +2 -0
  200. package/dist/components/media/AudioPlayer/styles.css +86 -0
  201. package/dist/components/media/KaraokeLyrics/KaraokeLyrics.d.ts +25 -0
  202. package/dist/components/media/KaraokeLyrics/styles.css +56 -0
  203. package/dist/components/media/LevelMeter/LevelMeter.d.ts +7 -0
  204. package/dist/components/media/LevelMeter/styles.css +30 -0
  205. package/dist/components/media/MediaCard/MediaCard.d.ts +24 -0
  206. package/dist/components/media/MediaCard/styles.css +108 -0
  207. package/dist/components/media/MelodyRoll/MelodyRoll.d.ts +48 -0
  208. package/dist/components/media/MelodyRoll/styles.css +196 -0
  209. package/dist/components/media/PianoKeyboard/PianoKeyboard.d.ts +24 -0
  210. package/dist/components/media/PianoKeyboard/styles.css +83 -0
  211. package/dist/components/media/RotaryKnob/RotaryKnob.d.ts +3 -0
  212. package/dist/components/media/RotaryKnob/styles.css +319 -0
  213. package/dist/components/media/Sparkline/Sparkline.d.ts +2 -0
  214. package/dist/components/media/Sparkline/styles.css +70 -0
  215. package/dist/components/media/WaveDecoration/WaveDecoration.d.ts +2 -0
  216. package/dist/components/media/WaveDecoration/styles.css +2 -0
  217. package/dist/components/media/Waveform/Waveform.d.ts +9 -0
  218. package/dist/components/media/Waveform/styles.css +375 -0
  219. package/dist/components/media/Waveform/useWaveformPeaks.d.ts +11 -0
  220. package/dist/components/media/shared.css +7 -0
  221. package/dist/components/media/shared.d.ts +80 -0
  222. package/dist/components/navigation/Router/Router.d.ts +32 -0
  223. package/dist/components/navigation/Router/styles.css +1 -0
  224. package/dist/components.css +102 -0
  225. package/dist/core/artwork.d.ts +17 -0
  226. package/dist/core/base.d.ts +65 -0
  227. package/dist/core/environment.d.ts +5 -0
  228. package/dist/core/i18n.d.ts +34 -0
  229. package/dist/core/messages.d.ts +1 -0
  230. package/dist/core/motion/hooks.d.ts +17 -0
  231. package/dist/core/motion-engine.d.ts +13 -0
  232. package/dist/core/noise.d.ts +20 -0
  233. package/dist/core/providers/context.d.ts +4 -0
  234. package/dist/core/responsive.d.ts +13 -0
  235. package/dist/core.d.ts +8 -0
  236. package/dist/core.js +56 -0
  237. package/dist/editor.d.ts +2 -0
  238. package/dist/editor.js +8 -0
  239. package/dist/fonts/melodix/Melodix-100.woff2 +0 -0
  240. package/dist/fonts/melodix/Melodix-200.woff2 +0 -0
  241. package/dist/fonts/melodix/Melodix-300.woff2 +0 -0
  242. package/dist/fonts/melodix/Melodix-400.woff2 +0 -0
  243. package/dist/fonts/melodix/Melodix-500.woff2 +0 -0
  244. package/dist/fonts/melodix/Melodix-600.woff2 +0 -0
  245. package/dist/fonts/melodix/Melodix-700.woff2 +0 -0
  246. package/dist/fonts/melodix/Melodix-800.woff2 +0 -0
  247. package/dist/fonts/melodix/Melodix-900.woff2 +0 -0
  248. package/dist/fonts/melodix/MelodixText-100.woff2 +0 -0
  249. package/dist/fonts/melodix/MelodixText-200.woff2 +0 -0
  250. package/dist/fonts/melodix/MelodixText-300.woff2 +0 -0
  251. package/dist/fonts/melodix/MelodixText-400.woff2 +0 -0
  252. package/dist/fonts/melodix/MelodixText-500.woff2 +0 -0
  253. package/dist/fonts/melodix/MelodixText-600.woff2 +0 -0
  254. package/dist/fonts/melodix/MelodixText-700.woff2 +0 -0
  255. package/dist/fonts/melodix/MelodixText-800.woff2 +0 -0
  256. package/dist/fonts/melodix/MelodixText-900.woff2 +0 -0
  257. package/dist/fonts/melodix/OFL-PlayfairDisplay.txt +93 -0
  258. package/dist/fonts/melodix.css +123 -0
  259. package/dist/forms.d.ts +4 -0
  260. package/dist/forms.js +17 -0
  261. package/dist/index.d.ts +163 -0
  262. package/dist/index.js +9683 -0
  263. package/dist/router.d.ts +2 -0
  264. package/dist/router.js +11 -0
  265. package/dist/styles.css +2 -0
  266. package/dist/theme/base.css +221 -0
  267. package/dist/theme/tokens.css +196 -0
  268. package/dist/theme/typography.d.ts +24 -0
  269. package/dist/tokens.css +1 -0
  270. package/package.json +83 -4
@@ -0,0 +1,2 @@
1
+ export { Router, useRouter, matchRoute, } from "./components/navigation/Router/Router";
2
+ export type { RouterProps, RouterValue, RouteDefinition, RouteMatch, RouteAccessContext, } from "./components/navigation/Router/Router";
package/dist/router.js ADDED
@@ -0,0 +1,11 @@
1
+ import {
2
+ Router,
3
+ matchRoute,
4
+ useRouter
5
+ } from "./chunks/chunk-347P6ZE4.js";
6
+ import "./chunks/chunk-FCOU3ODR.js";
7
+ export {
8
+ Router,
9
+ matchRoute,
10
+ useRouter
11
+ };
@@ -0,0 +1,2 @@
1
+ @import "./theme/tokens.css";
2
+ @import "./components.css";
@@ -0,0 +1,221 @@
1
+ /* Truly global component plumbing. */
2
+ /* Shared component rules: dimensions belong to the layout, materials to tokens. */
3
+ .ad,
4
+ .ad *,
5
+ [data-ad-reference],
6
+ [data-ad-reference] * {
7
+ box-sizing: border-box;
8
+ }
9
+ [data-ad-material="ghost"] {
10
+ --ad-material-bg: transparent;
11
+ --ad-material-shadow: none;
12
+ }
13
+ [data-ad-material="danger"] {
14
+ --ad-material-bg: linear-gradient(135deg, var(--ad-primary-700), var(--ad-primary-800));
15
+ --ad-material-shadow:
16
+ inset 0 0.0625rem 0.0625rem rgb(from var(--ad-secondary-200) r g b / 0.3), 0 0 0.875rem rgb(from var(--ad-primary) r g b / 0.19);
17
+ }
18
+ .ad[data-ad-material],
19
+ [data-ad-reference][data-ad-material][data-ad-component] {
20
+ background: var(--ad-material-bg);
21
+ box-shadow: var(--ad-material-shadow);
22
+ }
23
+ .ad[data-ad-material] {
24
+ border: 0.0625rem solid transparent;
25
+ }
26
+ :where(.ad) button,
27
+ :where(.ad) input,
28
+ :where(.ad) select,
29
+ button:where(.ad),
30
+ input:where(.ad),
31
+ select:where(.ad) {
32
+ font-family: var(--ad-font-family-sans);
33
+ color: inherit;
34
+ }
35
+ button.ad {
36
+ cursor: pointer;
37
+ -webkit-tap-highlight-color: transparent;
38
+ }
39
+ button.ad:disabled {
40
+ cursor: default;
41
+ opacity: 0.4;
42
+ }
43
+ .ad button:focus-visible,
44
+ .ad input:focus-visible,
45
+ .ad select:focus-visible,
46
+ .ad[tabindex]:focus-visible,
47
+ button.ad:focus-visible {
48
+ outline: 0.125rem solid var(--ad-focus);
49
+ outline-offset: 0.1875rem;
50
+ }
51
+ [data-ad-tone="success"] {
52
+ --ad-tone: var(--ad-success);
53
+ }
54
+ [data-ad-tone="error"] {
55
+ --ad-tone: var(--ad-primary);
56
+ }
57
+ [data-ad-tone="warning"] {
58
+ --ad-tone: var(--ad-warning);
59
+ }
60
+ [data-ad-tone="pending"],
61
+ [data-ad-tone="offline"] {
62
+ --ad-tone: var(--ad-neutral-400);
63
+ }
64
+ [data-ad-tone="processing"] {
65
+ --ad-tone: var(--ad-secondary);
66
+ }
67
+ [data-ad-tone="info"] {
68
+ --ad-tone: var(--ad-info);
69
+ }
70
+ .ad-empty-state > .ad-icon {
71
+ color: var(--ad-secondary);
72
+ filter: drop-shadow(0 0 0.5625rem rgb(from var(--ad-primary) r g b / 0.33));
73
+ }
74
+ .ad-menu .ad-divider {
75
+ margin: 0.3125rem 0;
76
+ }
77
+ .ad-border {
78
+ position: absolute;
79
+ inset: 0;
80
+ display: block;
81
+ width: 100%;
82
+ height: 100%;
83
+ max-width: none;
84
+ max-height: none;
85
+ overflow: visible;
86
+ /* Decorative overflow can paint outside the host without enlarging its scroll area. */
87
+ contain: layout;
88
+ pointer-events: none;
89
+ user-select: none;
90
+ z-index: 20;
91
+ }
92
+ .ad-border > svg {
93
+ position: absolute;
94
+ inset: 0;
95
+ display: block;
96
+ width: 100%;
97
+ height: 100%;
98
+ overflow: visible;
99
+ }
100
+ /* The rings: still masks around the edge (with room for the halo), lit by spots that move. */
101
+ .ad-border-aura,
102
+ .ad-border-core {
103
+ position: absolute;
104
+ inset: -16px;
105
+ /* The mask hides paint, but only clipping keeps moving lights out of scroll geometry. */
106
+ overflow: clip;
107
+ mask-size: 100% 100%;
108
+ mask-repeat: no-repeat;
109
+ -webkit-mask-size: 100% 100%;
110
+ -webkit-mask-repeat: no-repeat;
111
+ }
112
+ .ad-border-light {
113
+ position: absolute;
114
+ top: 0;
115
+ left: 0;
116
+ will-change: transform;
117
+ }
118
+ /* Paused borders should not reserve compositor layers for their four static spots. */
119
+ [data-ad-offscreen] .ad-border-light,
120
+ [data-ad-motion="off"] .ad-border-light {
121
+ will-change: auto;
122
+ }
123
+ [data-ad-color-scheme="light"] .ad-border .ad-border-aura {
124
+ opacity: 0.4;
125
+ }
126
+ .ad-spinner {
127
+ width: 0.9375rem;
128
+ height: 0.9375rem;
129
+ border: 0.125rem solid rgb(from var(--ad-secondary) r g b / 0.2);
130
+ border-top-color: var(--ad-secondary-100);
131
+ border-radius: 50%;
132
+ animation: ad-spin 0.8s linear infinite;
133
+ }
134
+ @keyframes ad-spin {
135
+ to {
136
+ transform: rotate(360deg);
137
+ }
138
+ }
139
+ /* Motion off: every animation jumps straight to its final frame, so entrances (dialogs, toasts,
140
+ popovers) still end visible, and nothing keeps looping. */
141
+ :is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *),
142
+ :is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *)::before,
143
+ :is([data-ad-motion="off"] .ad, [data-ad-motion="off"] .ad *)::after,
144
+ [data-ad-motion="off"] .ad-dialog::backdrop {
145
+ animation-duration: 0.01ms !important;
146
+ animation-delay: 0s !important;
147
+ animation-iteration-count: 1 !important;
148
+ transition-duration: 0.01ms !important;
149
+ }
150
+ @media (prefers-reduced-motion: reduce) {
151
+ :root:not([data-ad-motion="on"]) :is(.ad, .ad *),
152
+ :root:not([data-ad-motion="on"]) :is(.ad, .ad *)::before,
153
+ :root:not([data-ad-motion="on"]) :is(.ad, .ad *)::after,
154
+ :root:not([data-ad-motion="on"]) .ad-dialog::backdrop {
155
+ animation-duration: 0.01ms !important;
156
+ animation-delay: 0s !important;
157
+ animation-iteration-count: 1 !important;
158
+ transition: none !important;
159
+ }
160
+ }
161
+ /* Ring of light spread from the press point; hosts clip it with overflow: hidden. */
162
+ .ad-ripple {
163
+ position: absolute;
164
+ z-index: 0;
165
+ width: 0.5rem;
166
+ height: 0.5rem;
167
+ margin: -0.25rem 0 0 -0.25rem;
168
+ border-radius: 50%;
169
+ border: 0.0625rem solid var(--ad-secondary-100);
170
+ background: radial-gradient(closest-side, rgb(from var(--ad-secondary) r g b / 0.2), transparent);
171
+ box-shadow: 0 0 0.75rem var(--ad-primary);
172
+ pointer-events: none;
173
+ animation: ad-ripple 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
174
+ }
175
+ @keyframes ad-ripple {
176
+ to {
177
+ scale: 18;
178
+ opacity: 0;
179
+ }
180
+ }
181
+ @media (prefers-reduced-motion: reduce) {
182
+ .ad-ripple {
183
+ display: none;
184
+ }
185
+ }
186
+
187
+ /* Scrollbars inside a themed area: a slim glowing thumb in the primary colour, no arrows, a quiet track.
188
+ (Setting scrollbar-color would switch Chromium to plain bars, so only the WebKit parts are styled.) */
189
+ .ad-theme ::-webkit-scrollbar {
190
+ width: clamp(0.6rem, 0.7vw, 1rem);
191
+ height: clamp(0.6rem, 0.7vw, 1rem);
192
+ }
193
+ .ad-theme ::-webkit-scrollbar-track {
194
+ border-radius: var(--ad-radius-pill);
195
+ background: rgb(from var(--ad-neutral-950) r g b / 0.35);
196
+ }
197
+ .ad-theme ::-webkit-scrollbar-thumb {
198
+ border: 0.18rem solid transparent;
199
+ border-radius: var(--ad-radius-pill);
200
+ background: linear-gradient(180deg, var(--ad-secondary), var(--ad-primary)) padding-box;
201
+ box-shadow: 0 0 0.5rem rgb(from var(--ad-primary) r g b / 0.6);
202
+ }
203
+ .ad-theme ::-webkit-scrollbar-thumb:hover {
204
+ background: var(--ad-secondary) padding-box;
205
+ }
206
+ .ad-theme ::-webkit-scrollbar-button {
207
+ display: none;
208
+ }
209
+ .ad-theme ::-webkit-scrollbar-corner {
210
+ background: transparent;
211
+ }
212
+
213
+ /* Out of view (see usePauseOffscreen): every animation inside holds still until it scrolls back. */
214
+ [data-ad-offscreen],
215
+ [data-ad-offscreen]::before,
216
+ [data-ad-offscreen]::after,
217
+ [data-ad-offscreen] *,
218
+ [data-ad-offscreen] *::before,
219
+ [data-ad-offscreen] *::after {
220
+ animation-play-state: paused !important;
221
+ }
@@ -0,0 +1,196 @@
1
+ /* Approved Advanced / ENV visual materials. Single source for both pages. */
2
+ :root,
3
+ :host,
4
+ .ad-theme {
5
+
6
+ /* Typography */
7
+ --ad-font-family-sans:
8
+ "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system,
9
+ BlinkMacSystemFont, sans-serif;
10
+ --ad-font-family-mono:
11
+ "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
12
+ /* Titles (display, h1–h3, card and dialog headings); the text font unless a theme sets one. */
13
+ --ad-font-family-heading: var(--ad-font-family-sans);
14
+
15
+ --ad-font-size-display: clamp(2.125rem, 1.55rem + 1.6vw, 3.125rem);
16
+ --ad-font-size-h1: clamp(1.75rem, 1.42rem + 0.9vw, 2.375rem);
17
+ --ad-font-size-h2: clamp(1.5rem, 1.28rem + 0.65vw, 1.9375rem);
18
+ --ad-font-size-h3: clamp(1.25rem, 1.12rem + 0.4vw, 1.5625rem);
19
+ --ad-font-size-title: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
20
+ --ad-font-size-subtitle: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
21
+ --ad-font-size-body: clamp(0.8125rem, 0.78rem + 0.12vw, 0.9375rem);
22
+ --ad-font-size-body-sm: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);
23
+ --ad-font-size-label: clamp(0.6875rem, 0.66rem + 0.08vw, 0.8125rem);
24
+ --ad-font-size-caption: clamp(0.625rem, 0.6rem + 0.08vw, 0.75rem);
25
+
26
+ --ad-font-weight-regular: 400;
27
+ --ad-font-weight-medium: 500;
28
+ --ad-font-weight-semibold: 600;
29
+ --ad-font-weight-bold: 700;
30
+
31
+ --ad-line-height-display: 1.04;
32
+ --ad-line-height-heading: 1.15;
33
+ --ad-line-height-title: 1.25;
34
+ --ad-line-height-body: 1.5;
35
+ --ad-line-height-compact: 1.3;
36
+
37
+ --ad-letter-spacing-display: -0.035em;
38
+ --ad-letter-spacing-heading: -0.02em;
39
+ --ad-letter-spacing-title: -0.01em;
40
+ --ad-letter-spacing-label: 0.015em;
41
+ --ad-letter-spacing-eyebrow: 0.1em;
42
+ /* Palette: two inputs, everything else is derived from them. Change --ad-primary and
43
+ --ad-secondary (or any step below) and every component follows. */
44
+ --ad-primary: #ff244c;
45
+ --ad-secondary: #ff7c97;
46
+ --ad-primary-900: oklch(from var(--ad-primary) 0.18 calc(c * 0.42) h);
47
+ --ad-primary-800: oklch(from var(--ad-primary) 0.27 calc(c * 0.6) h);
48
+ --ad-primary-700: oklch(from var(--ad-primary) 0.38 calc(c * 0.78) h);
49
+ --ad-primary-600: oklch(from var(--ad-primary) 0.5 calc(c * 0.92) h);
50
+ --ad-secondary-200: oklch(from var(--ad-secondary) 0.84 calc(c * 0.62) h);
51
+ --ad-secondary-100: oklch(from var(--ad-secondary) 0.92 calc(c * 0.32) h);
52
+ --ad-secondary-50: oklch(from var(--ad-secondary) 0.97 calc(c * 0.12) h);
53
+ /* Neutrals: near-greys carrying a hint of the primary hue. */
54
+ --ad-neutral-950: oklch(from var(--ad-primary) 0.1 0.012 h);
55
+ --ad-neutral-900: oklch(from var(--ad-primary) 0.14 0.016 h);
56
+ --ad-neutral-850: oklch(from var(--ad-primary) 0.18 0.018 h);
57
+ --ad-neutral-800: oklch(from var(--ad-primary) 0.23 0.02 h);
58
+ --ad-neutral-700: oklch(from var(--ad-primary) 0.32 0.02 h);
59
+ --ad-neutral-600: oklch(from var(--ad-primary) 0.45 0.02 h);
60
+ --ad-neutral-500: oklch(from var(--ad-primary) 0.58 0.02 h);
61
+ --ad-neutral-400: oklch(from var(--ad-primary) 0.7 0.018 h);
62
+ --ad-neutral-300: oklch(from var(--ad-primary) 0.82 0.014 h);
63
+ --ad-neutral-200: oklch(from var(--ad-primary) 0.92 0.01 h);
64
+ --ad-info: #6fc8ff;
65
+ /* Older names, kept as aliases. */
66
+ --ad-red: var(--ad-primary);
67
+ --ad-pink: var(--ad-secondary);
68
+ --ad-text: #f7f5f8;
69
+ --ad-muted: #bfc0d9;
70
+ /* Foreground for intentionally dark accent materials in either colour scheme. */
71
+ --ad-on-accent: #fff;
72
+ --ad-on-accent-muted: #f0dfe4;
73
+ --ad-surface-shell:
74
+ radial-gradient(ellipse 27.5rem 6.875rem at 37% 0, rgb(from var(--ad-primary-800) r g b / 0.16), transparent)
75
+ padding-box,
76
+ radial-gradient(ellipse 9.375rem 28.125rem at 0 65%, rgb(from var(--ad-primary-700) r g b / 0.09), transparent)
77
+ padding-box,
78
+ linear-gradient(110deg, var(--ad-neutral-900), var(--ad-neutral-950) 47%, var(--ad-neutral-900)) padding-box,
79
+ linear-gradient(
80
+ 118deg,
81
+ var(--ad-secondary),
82
+ var(--ad-primary-600) 14%,
83
+ var(--ad-primary-700) 40%,
84
+ var(--ad-secondary) 75%,
85
+ var(--ad-primary-600)
86
+ )
87
+ border-box;
88
+ --ad-shadow-shell:
89
+ 0 0 0.375rem rgb(from var(--ad-secondary) r g b / 0.57), 0 0 1.1875rem rgb(from var(--ad-primary) r g b / 0.43), 0 0 2.6875rem rgb(from var(--ad-primary) r g b / 0.21),
90
+ 0 1.5625rem 5.625rem #000b, inset 0 0 0.1875rem rgb(from var(--ad-secondary) r g b / 0.23),
91
+ inset 0 0 1.375rem rgb(from var(--ad-primary) r g b / 0.14);
92
+ --ad-surface-card:
93
+ radial-gradient(
94
+ ellipse 22.1875rem 9.6875rem at 43% -8%,
95
+ rgb(from var(--ad-primary) r g b / 0.36),
96
+ transparent 78%
97
+ )
98
+ padding-box,
99
+ radial-gradient(ellipse 43.75rem 22.5rem at 7% 0, rgb(from var(--ad-neutral-850) r g b / 0.35), transparent)
100
+ padding-box,
101
+ linear-gradient(115deg, var(--ad-neutral-900), var(--ad-neutral-900) 61%, var(--ad-neutral-900)) padding-box,
102
+ linear-gradient(
103
+ 145deg,
104
+ var(--ad-primary),
105
+ var(--ad-primary-600) 20%,
106
+ var(--ad-primary-700) 54%,
107
+ var(--ad-primary) 82%,
108
+ var(--ad-primary-600)
109
+ )
110
+ border-box;
111
+ --ad-shadow-card:
112
+ inset 0 0.0625rem 0.0625rem rgb(from var(--ad-secondary-100) r g b / 0.12), inset 0 0 0.875rem rgb(from var(--ad-primary) r g b / 0.07),
113
+ 0 0 0.6875rem rgb(from var(--ad-primary) r g b / 0.1);
114
+ --ad-surface-glass:
115
+ radial-gradient(ellipse at 32% 0, rgb(from var(--ad-primary-800) r g b / 0.19), transparent 62%) padding-box,
116
+ linear-gradient(135deg, var(--ad-neutral-900), var(--ad-neutral-900) 60%, var(--ad-neutral-850)) padding-box,
117
+ linear-gradient(125deg, var(--ad-secondary), var(--ad-primary-600) 18%, var(--ad-neutral-700) 49%, var(--ad-primary-600) 100%)
118
+ border-box;
119
+ --ad-shadow-glass:
120
+ inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.17), inset 0 0 0.5rem rgb(from var(--ad-secondary-200) r g b / 0.02),
121
+ 0 0.1875rem 0.4375rem #0005;
122
+ --ad-shadow-glass-hover:
123
+ 0 0 0.875rem rgb(from var(--ad-primary) r g b / 0.2), inset 0 0.0625rem 0.125rem rgb(from var(--ad-secondary-100) r g b / 0.22);
124
+ --ad-surface-ruby:
125
+ radial-gradient(ellipse at 35% 0, rgb(from var(--ad-primary-600) r g b / 0.25), transparent 70%) padding-box,
126
+ radial-gradient(ellipse at 100% 100%, rgb(from var(--ad-primary-600) r g b / 0.27), transparent 68%)
127
+ padding-box,
128
+ linear-gradient(140deg, var(--ad-primary-700), var(--ad-primary-900) 55%, var(--ad-primary-700)) padding-box,
129
+ linear-gradient(125deg, var(--ad-secondary-200), var(--ad-primary) 22%, var(--ad-primary-600) 58%, var(--ad-secondary))
130
+ border-box;
131
+ --ad-shadow-ruby:
132
+ inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.46), inset 0 0 0.9375rem rgb(from var(--ad-primary) r g b / 0.28),
133
+ 0 0 0.3125rem rgb(from var(--ad-primary) r g b / 0.3), 0 0 1.1875rem rgb(from var(--ad-primary) r g b / 0.19);
134
+ --ad-surface-tile:
135
+ radial-gradient(ellipse at 52% 42%, rgb(from var(--ad-primary-700) r g b / 0.44), rgb(from var(--ad-primary-900) r g b / 0.2) 68%) padding-box,
136
+ linear-gradient(145deg, var(--ad-primary-900), var(--ad-primary-900) 69%, var(--ad-primary-900)) padding-box,
137
+ linear-gradient(135deg, var(--ad-primary), var(--ad-primary-700) 22%, var(--ad-primary-600) 68%, var(--ad-primary-700))
138
+ border-box;
139
+ --ad-shadow-tile:
140
+ inset 0 0 0.5625rem rgb(from var(--ad-primary) r g b / 0.14), inset 0 0.0625rem 0.0625rem rgb(from var(--ad-secondary) r g b / 0.17),
141
+ 0 0 0.9375rem rgb(from var(--ad-primary) r g b / 0.16);
142
+ --ad-surface-input:
143
+ radial-gradient(ellipse at 75% 0, rgb(from var(--ad-primary-700) r g b / 0.06), transparent 70%) padding-box,
144
+ linear-gradient(135deg, var(--ad-neutral-900), var(--ad-neutral-900) 60%, var(--ad-neutral-850)) padding-box,
145
+ linear-gradient(125deg, var(--ad-primary), var(--ad-primary-600) 18%, var(--ad-primary-800) 49%, var(--ad-primary))
146
+ border-box;
147
+ --ad-shadow-input:
148
+ inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.13), inset 0 0 0.5rem rgb(from var(--ad-secondary-200) r g b / 0.02),
149
+ 0 0.1875rem 0.4375rem #0005;
150
+ --ad-surface-dialog:
151
+ radial-gradient(ellipse at 80% 0, rgb(from var(--ad-primary-700) r g b / 0.25), transparent 70%), var(--ad-neutral-850);
152
+ --ad-shadow-dialog: 0 0 1.75rem rgb(from var(--ad-primary) r g b / 0.19), 0 2.1875rem 6.25rem #000b;
153
+
154
+ /* Adaptive geometry unit: preserves component proportions while scaling gently with the viewport. */
155
+ --ad-fluid-unit: clamp(0.052rem, 0.043rem + 0.045vw, 0.075rem);
156
+
157
+ /* Spacing scale used by Stack / Grid and other layout primitives. */
158
+ --ad-space-unit: clamp(0.21875rem, 0.18rem + 0.1vw, 0.28125rem);
159
+ --ad-space-1: calc(var(--ad-space-unit) * 1);
160
+ --ad-space-2: calc(var(--ad-space-unit) * 2);
161
+ --ad-space-3: calc(var(--ad-space-unit) * 3);
162
+ --ad-space-4: calc(var(--ad-space-unit) * 4);
163
+ --ad-space-5: calc(var(--ad-space-unit) * 5);
164
+ --ad-space-6: calc(var(--ad-space-unit) * 6);
165
+ --ad-space-8: calc(var(--ad-space-unit) * 8);
166
+ --ad-space-10: calc(var(--ad-space-unit) * 10);
167
+ --ad-space-12: calc(var(--ad-space-unit) * 12);
168
+
169
+ --ad-radius: clamp(0.6875rem, 0.58rem + 0.28vw, 0.9375rem);
170
+ --ad-radius-sm: calc(var(--ad-radius) * 0.6);
171
+ --ad-radius-lg: calc(var(--ad-radius) * 1.4);
172
+ --ad-radius-pill: 999rem;
173
+
174
+ /* Motion: one set of timings and curves, so every screen moves alike. */
175
+ --ad-duration-fast: 140ms;
176
+ --ad-duration-normal: 220ms;
177
+ --ad-duration-slow: 360ms;
178
+ --ad-ease-standard: cubic-bezier(0.2, 0, 0, 1);
179
+ --ad-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
180
+
181
+ /* Stacking layers for things floating over a screen. */
182
+ --ad-z-floating: 40;
183
+ --ad-z-overlay: 900;
184
+ --ad-z-toast: 1600;
185
+ --ad-z-system: 2100;
186
+ --ad-control-height: clamp(2.375rem, 2.15rem + 0.6vw, 2.875rem);
187
+ --ad-focus: var(--ad-secondary-100);
188
+ --ad-success: #11d6a4;
189
+ --ad-warning: #f0c16a;
190
+ }
191
+
192
+ /* Only a themed area takes the library's type and dark scheme; the host page keeps its own. */
193
+ .ad-theme {
194
+ color-scheme: dark;
195
+ font-family: var(--ad-font-family-sans);
196
+ }
@@ -0,0 +1,24 @@
1
+ export declare const typography: {
2
+ readonly fontFamily: {
3
+ readonly sans: "var(--ad-font-family-sans)";
4
+ readonly mono: "var(--ad-font-family-mono)";
5
+ };
6
+ readonly size: {
7
+ readonly display: "var(--ad-font-size-display)";
8
+ readonly h1: "var(--ad-font-size-h1)";
9
+ readonly h2: "var(--ad-font-size-h2)";
10
+ readonly h3: "var(--ad-font-size-h3)";
11
+ readonly title: "var(--ad-font-size-title)";
12
+ readonly subtitle: "var(--ad-font-size-subtitle)";
13
+ readonly body: "var(--ad-font-size-body)";
14
+ readonly bodySmall: "var(--ad-font-size-body-sm)";
15
+ readonly label: "var(--ad-font-size-label)";
16
+ readonly caption: "var(--ad-font-size-caption)";
17
+ };
18
+ readonly weight: {
19
+ readonly regular: 400;
20
+ readonly medium: 500;
21
+ readonly semibold: 600;
22
+ readonly bold: 700;
23
+ };
24
+ };
@@ -0,0 +1 @@
1
+ @import "./theme/tokens.css";
package/package.json CHANGED
@@ -1,6 +1,85 @@
1
1
  {
2
2
  "name": "@neo-ui-kit/react",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "1.0.0",
4
+ "description": "NEO UI — React component library",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/Pro100Dimka/adui.git",
10
+ "directory": "packages/ui"
11
+ },
12
+ "homepage": "https://github.com/Pro100Dimka/adui#readme",
13
+ "bugs": {
14
+ "url": "https://github.com/Pro100Dimka/adui/issues"
15
+ },
16
+ "sideEffects": [
17
+ "**/*.css"
18
+ ],
19
+ "files": [
20
+ "dist",
21
+ "README.md",
22
+ "LICENSE"
23
+ ],
24
+ "main": "./dist/index.js",
25
+ "module": "./dist/index.js",
26
+ "types": "./dist/index.d.ts",
27
+ "exports": {
28
+ ".": {
29
+ "types": "./dist/index.d.ts",
30
+ "import": "./dist/index.js",
31
+ "default": "./dist/index.js"
32
+ },
33
+ "./editor": {
34
+ "types": "./dist/editor.d.ts",
35
+ "import": "./dist/editor.js",
36
+ "default": "./dist/editor.js"
37
+ },
38
+ "./core": {
39
+ "types": "./dist/core.d.ts",
40
+ "import": "./dist/core.js",
41
+ "default": "./dist/core.js"
42
+ },
43
+ "./styles.css": "./dist/styles.css",
44
+ "./tokens.css": "./dist/tokens.css",
45
+ "./package.json": "./package.json",
46
+ "./components.css": "./dist/components.css",
47
+ "./fonts/melodix.css": "./dist/fonts/melodix.css",
48
+ "./router": {
49
+ "types": "./dist/router.d.ts",
50
+ "import": "./dist/router.js",
51
+ "default": "./dist/router.js"
52
+ },
53
+ "./forms": {
54
+ "types": "./dist/forms.d.ts",
55
+ "import": "./dist/forms.js",
56
+ "default": "./dist/forms.js"
57
+ }
58
+ },
59
+ "scripts": {
60
+ "test": "vitest run",
61
+ "typecheck": "tsc -p tsconfig.json",
62
+ "build": "node scripts/build.mjs",
63
+ "prepublishOnly": "npm run typecheck && npm run build && npm test"
64
+ },
65
+ "peerDependencies": {
66
+ "react": ">=18.2.0 <20",
67
+ "react-dom": ">=18.2.0 <20"
68
+ },
69
+ "devDependencies": {
70
+ "@types/react": "^19.1.0",
71
+ "@types/react-dom": "^19.1.0",
72
+ "@types/react-test-renderer": "^19.3.0",
73
+ "esbuild": "^0.25.12",
74
+ "react-test-renderer": "^19.3.0",
75
+ "typescript": "^5.8.3",
76
+ "vitest": "^3.2.4"
77
+ },
78
+ "engines": {
79
+ "node": ">=20"
80
+ },
81
+ "publishConfig": {
82
+ "access": "public"
83
+ },
84
+ "private": false
85
+ }