@neo-ui-kit/react 1.0.0 → 1.0.1

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 (55) hide show
  1. package/README.md +12 -2
  2. package/dist/components/artwork/DatabaseArt/styles.css +58 -58
  3. package/dist/components/artwork/Landscape/styles.css +79 -79
  4. package/dist/components/artwork/Planet/styles.css +52 -52
  5. package/dist/components/artwork/QuantumField/UPSTREAM-LICENSE.txt +21 -21
  6. package/dist/components/artwork/ServerArt/styles.css +43 -43
  7. package/dist/components/artwork/Spectrum/styles.css +35 -35
  8. package/dist/components/controls/Autocomplete/styles.css +1 -1
  9. package/dist/components/controls/Checkbox/styles.css +58 -58
  10. package/dist/components/controls/InputBase/styles.css +374 -374
  11. package/dist/components/controls/Link/styles.css +50 -50
  12. package/dist/components/controls/SegmentedControl/styles.css +9 -9
  13. package/dist/components/controls/Switch/styles.css +54 -54
  14. package/dist/components/controls/Tabs/styles.css +239 -239
  15. package/dist/components/controls/ToggleButton/styles.css +49 -49
  16. package/dist/components/controls/shared.css +694 -694
  17. package/dist/components/editor/shared.css +1 -1
  18. package/dist/components/effects/Beacon/styles.css +38 -38
  19. package/dist/components/effects/Equalizer/styles.css +34 -34
  20. package/dist/components/effects/GlowText/styles.css +56 -56
  21. package/dist/components/effects/Marquee/styles.css +46 -46
  22. package/dist/components/effects/Reveal/styles.css +25 -25
  23. package/dist/components/effects/Shimmer/styles.css +48 -48
  24. package/dist/components/effects/Sparkles/styles.css +28 -28
  25. package/dist/components/effects/Spotlight/styles.css +45 -45
  26. package/dist/components/effects/Tilt/styles.css +67 -67
  27. package/dist/components/feedback/CollapsibleSection/styles.css +76 -76
  28. package/dist/components/feedback/DataTable/styles.css +522 -522
  29. package/dist/components/feedback/EmptyState/styles.css +80 -80
  30. package/dist/components/feedback/KeyValueList/styles.css +51 -51
  31. package/dist/components/feedback/MenuItem/styles.css +71 -71
  32. package/dist/components/feedback/Popover/styles.css +44 -44
  33. package/dist/components/feedback/Steps/styles.css +152 -152
  34. package/dist/components/feedback/Toast/styles.css +89 -89
  35. package/dist/components/forms/FormFields/styles.css +21 -21
  36. package/dist/components/foundation/ThemeProvider/styles.css +31 -31
  37. package/dist/components/layout/Avatar/styles.css +151 -151
  38. package/dist/components/layout/Card/styles.css +37 -37
  39. package/dist/components/layout/DialogActions/styles.css +31 -31
  40. package/dist/components/layout/DialogBody/styles.css +17 -17
  41. package/dist/components/layout/Illustration/styles.css +104 -104
  42. package/dist/components/layout/ScrollArea/styles.css +61 -61
  43. package/dist/components/layout/TabPanel/styles.css +16 -16
  44. package/dist/components/layout/shared.css +65 -65
  45. package/dist/components/media/AudioPlayer/styles.css +86 -86
  46. package/dist/components/media/LevelMeter/styles.css +30 -30
  47. package/dist/components/media/MelodyRoll/styles.css +196 -196
  48. package/dist/components/media/RotaryKnob/styles.css +319 -319
  49. package/dist/components/media/Sparkline/styles.css +69 -69
  50. package/dist/components/media/WaveDecoration/styles.css +1 -1
  51. package/dist/components/media/shared.css +7 -7
  52. package/dist/fonts/melodix.css +123 -123
  53. package/dist/index.js +2101 -2101
  54. package/dist/theme/base.css +210 -210
  55. package/package.json +1 -1
@@ -1,67 +1,67 @@
1
- /* Styles owned by Tilt: floats gently on its own, leans toward the pointer with depth and glare. */
2
- .ad-tilt {
3
- position: relative;
4
- display: block;
5
- border-radius: var(--ad-radius);
6
- perspective: 50rem;
7
- transform-style: preserve-3d;
8
- animation: ad-tilt-float 6s ease-in-out infinite;
9
- }
10
- .ad-tilt:hover {
11
- animation-play-state: paused;
12
- }
13
- .ad-tilt > * {
14
- transform: rotateX(var(--ad-tilt-x, 0deg)) rotateY(var(--ad-tilt-y, 0deg));
15
- transform-style: preserve-3d;
16
- transition:
17
- transform 0.7s cubic-bezier(0.34, 1.45, 0.5, 1),
18
- scale 0.5s cubic-bezier(0.34, 1.45, 0.5, 1),
19
- box-shadow 0.4s;
20
- will-change: transform;
21
- }
22
- .ad-tilt:hover > * {
23
- scale: 1.03;
24
- transition-duration: 0.12s, 0.5s, 0.4s;
25
- box-shadow:
26
- 0 1.4rem 2.6rem #000c,
27
- 0 0 1.6rem rgb(from var(--ad-primary) r g b / 0.2);
28
- }
29
- .ad-tilt[data-glare]::after {
30
- content: "";
31
- position: absolute;
32
- inset: 0;
33
- z-index: 3;
34
- border-radius: inherit;
35
- background: radial-gradient(
36
- circle at var(--ad-glare-x, 50%) var(--ad-glare-y, 50%),
37
- #ffffff44,
38
- rgb(from var(--ad-secondary-200) r g b / 0.1) 30%,
39
- transparent 60%
40
- );
41
- mix-blend-mode: screen;
42
- opacity: 0;
43
- transition: opacity 0.3s;
44
- pointer-events: none;
45
- }
46
- .ad-tilt[data-glare]:hover::after {
47
- opacity: 1;
48
- }
49
- .ad-tilt[data-ad-motion="off"],
50
- .ad-tilt[data-ad-motion="off"] > * {
51
- animation: none;
52
- transform: none;
53
- translate: none;
54
- scale: none;
55
- will-change: auto;
56
- }
57
- @keyframes ad-tilt-float {
58
- 0%,
59
- 100% {
60
- transform: perspective(50rem) rotateX(3deg) rotateY(-4deg);
61
- translate: 0 0;
62
- }
63
- 50% {
64
- transform: perspective(50rem) rotateX(-3deg) rotateY(4deg);
65
- translate: 0 -0.35rem;
66
- }
67
- }
1
+ /* Styles owned by Tilt: floats gently on its own, leans toward the pointer with depth and glare. */
2
+ .ad-tilt {
3
+ position: relative;
4
+ display: block;
5
+ border-radius: var(--ad-radius);
6
+ perspective: 50rem;
7
+ transform-style: preserve-3d;
8
+ animation: ad-tilt-float 6s ease-in-out infinite;
9
+ }
10
+ .ad-tilt:hover {
11
+ animation-play-state: paused;
12
+ }
13
+ .ad-tilt > * {
14
+ transform: rotateX(var(--ad-tilt-x, 0deg)) rotateY(var(--ad-tilt-y, 0deg));
15
+ transform-style: preserve-3d;
16
+ transition:
17
+ transform 0.7s cubic-bezier(0.34, 1.45, 0.5, 1),
18
+ scale 0.5s cubic-bezier(0.34, 1.45, 0.5, 1),
19
+ box-shadow 0.4s;
20
+ will-change: transform;
21
+ }
22
+ .ad-tilt:hover > * {
23
+ scale: 1.03;
24
+ transition-duration: 0.12s, 0.5s, 0.4s;
25
+ box-shadow:
26
+ 0 1.4rem 2.6rem #000c,
27
+ 0 0 1.6rem rgb(from var(--ad-primary) r g b / 0.2);
28
+ }
29
+ .ad-tilt[data-glare]::after {
30
+ content: "";
31
+ position: absolute;
32
+ inset: 0;
33
+ z-index: 3;
34
+ border-radius: inherit;
35
+ background: radial-gradient(
36
+ circle at var(--ad-glare-x, 50%) var(--ad-glare-y, 50%),
37
+ #ffffff44,
38
+ rgb(from var(--ad-secondary-200) r g b / 0.1) 30%,
39
+ transparent 60%
40
+ );
41
+ mix-blend-mode: screen;
42
+ opacity: 0;
43
+ transition: opacity 0.3s;
44
+ pointer-events: none;
45
+ }
46
+ .ad-tilt[data-glare]:hover::after {
47
+ opacity: 1;
48
+ }
49
+ .ad-tilt[data-ad-motion="off"],
50
+ .ad-tilt[data-ad-motion="off"] > * {
51
+ animation: none;
52
+ transform: none;
53
+ translate: none;
54
+ scale: none;
55
+ will-change: auto;
56
+ }
57
+ @keyframes ad-tilt-float {
58
+ 0%,
59
+ 100% {
60
+ transform: perspective(50rem) rotateX(3deg) rotateY(-4deg);
61
+ translate: 0 0;
62
+ }
63
+ 50% {
64
+ transform: perspective(50rem) rotateX(-3deg) rotateY(4deg);
65
+ translate: 0 -0.35rem;
66
+ }
67
+ }
@@ -1,76 +1,76 @@
1
- /* Styles owned by CollapsibleSection: the body unfolds smoothly, the chevron turns, content rises in. */
2
- .ad-collapsible-section {
3
- border-radius: 0.9375rem;
4
- interpolate-size: allow-keywords;
5
- transition: box-shadow 0.35s;
6
- }
7
- .ad-collapsible-section[open] {
8
- box-shadow: 0 0 1.2rem rgb(from var(--ad-primary) r g b / 0.13);
9
- }
10
- .ad-collapsible-section summary {
11
- position: relative;
12
- padding: 1rem 1.25rem;
13
- display: flex;
14
- align-items: center;
15
- gap: 0.875rem;
16
- cursor: pointer;
17
- list-style: none;
18
- font-size: 1rem;
19
- font-weight: 600;
20
- border-radius: inherit;
21
- transition:
22
- background 0.25s,
23
- color 0.25s;
24
- }
25
- .ad-collapsible-section summary::-webkit-details-marker {
26
- display: none;
27
- }
28
- .ad-collapsible-section summary:hover {
29
- background: #ffffff08;
30
- }
31
- .ad-collapse-heading {
32
- display: grid;
33
- flex: 1;
34
- gap: 0.15rem;
35
- min-width: 0;
36
- }
37
- .ad-collapse-heading > small {
38
- color: var(--ad-muted);
39
- font-size: var(--ad-font-size-caption);
40
- font-weight: 400;
41
- }
42
- .ad-collapsible-section summary > .ad-icon:first-child {
43
- transition:
44
- transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1),
45
- color 0.25s;
46
- }
47
- .ad-collapsible-section summary:hover > .ad-icon:first-child,
48
- .ad-collapsible-section[open] summary > .ad-icon:first-child {
49
- transform: scale(1.12) rotate(-8deg);
50
- color: var(--ad-pink);
51
- }
52
- /* Smooth height where supported (::details-content); elsewhere it opens instantly. */
53
- .ad-collapsible-section::details-content {
54
- block-size: 0;
55
- overflow: hidden;
56
- transition:
57
- block-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
58
- content-visibility 0.45s allow-discrete;
59
- }
60
- .ad-collapsible-section[open]::details-content {
61
- block-size: auto;
62
- }
63
- .ad-collapse-content {
64
- padding: 0 1.25rem 1.25rem;
65
- font-size: 0.8125rem;
66
- color: var(--ad-muted);
67
- }
68
- .ad-collapsible-section[open] .ad-collapse-content {
69
- animation: ad-collapse-in 0.5s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
70
- }
71
- @keyframes ad-collapse-in {
72
- from {
73
- opacity: 0;
74
- transform: translateY(-0.5rem);
75
- }
76
- }
1
+ /* Styles owned by CollapsibleSection: the body unfolds smoothly, the chevron turns, content rises in. */
2
+ .ad-collapsible-section {
3
+ border-radius: 0.9375rem;
4
+ interpolate-size: allow-keywords;
5
+ transition: box-shadow 0.35s;
6
+ }
7
+ .ad-collapsible-section[open] {
8
+ box-shadow: 0 0 1.2rem rgb(from var(--ad-primary) r g b / 0.13);
9
+ }
10
+ .ad-collapsible-section summary {
11
+ position: relative;
12
+ padding: 1rem 1.25rem;
13
+ display: flex;
14
+ align-items: center;
15
+ gap: 0.875rem;
16
+ cursor: pointer;
17
+ list-style: none;
18
+ font-size: 1rem;
19
+ font-weight: 600;
20
+ border-radius: inherit;
21
+ transition:
22
+ background 0.25s,
23
+ color 0.25s;
24
+ }
25
+ .ad-collapsible-section summary::-webkit-details-marker {
26
+ display: none;
27
+ }
28
+ .ad-collapsible-section summary:hover {
29
+ background: #ffffff08;
30
+ }
31
+ .ad-collapse-heading {
32
+ display: grid;
33
+ flex: 1;
34
+ gap: 0.15rem;
35
+ min-width: 0;
36
+ }
37
+ .ad-collapse-heading > small {
38
+ color: var(--ad-muted);
39
+ font-size: var(--ad-font-size-caption);
40
+ font-weight: 400;
41
+ }
42
+ .ad-collapsible-section summary > .ad-icon:first-child {
43
+ transition:
44
+ transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1),
45
+ color 0.25s;
46
+ }
47
+ .ad-collapsible-section summary:hover > .ad-icon:first-child,
48
+ .ad-collapsible-section[open] summary > .ad-icon:first-child {
49
+ transform: scale(1.12) rotate(-8deg);
50
+ color: var(--ad-pink);
51
+ }
52
+ /* Smooth height where supported (::details-content); elsewhere it opens instantly. */
53
+ .ad-collapsible-section::details-content {
54
+ block-size: 0;
55
+ overflow: hidden;
56
+ transition:
57
+ block-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
58
+ content-visibility 0.45s allow-discrete;
59
+ }
60
+ .ad-collapsible-section[open]::details-content {
61
+ block-size: auto;
62
+ }
63
+ .ad-collapse-content {
64
+ padding: 0 1.25rem 1.25rem;
65
+ font-size: 0.8125rem;
66
+ color: var(--ad-muted);
67
+ }
68
+ .ad-collapsible-section[open] .ad-collapse-content {
69
+ animation: ad-collapse-in 0.5s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
70
+ }
71
+ @keyframes ad-collapse-in {
72
+ from {
73
+ opacity: 0;
74
+ transform: translateY(-0.5rem);
75
+ }
76
+ }