@rvx/ui 0.1.11 → 0.1.13

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 (58) hide show
  1. package/dist/common/coupling.d.ts +2 -0
  2. package/dist/common/coupling.js +18 -0
  3. package/dist/common/coupling.js.map +1 -0
  4. package/dist/common/debounce.js +2 -2
  5. package/dist/common/debounce.js.map +1 -1
  6. package/dist/common/parsers.d.ts +1 -1
  7. package/dist/common/parsers.js +3 -3
  8. package/dist/common/parsers.js.map +1 -1
  9. package/dist/common/theme.d.ts +4 -0
  10. package/dist/common/trim.js +2 -2
  11. package/dist/common/trim.js.map +1 -1
  12. package/dist/components/collapse.js +3 -3
  13. package/dist/components/collapse.js.map +1 -1
  14. package/dist/components/dialog.js +2 -2
  15. package/dist/components/dialog.js.map +1 -1
  16. package/dist/components/dropdown.js +2 -2
  17. package/dist/components/dropdown.js.map +1 -1
  18. package/dist/components/layer.js +4 -4
  19. package/dist/components/layer.js.map +1 -1
  20. package/dist/components/nav-list.d.ts +26 -0
  21. package/dist/components/nav-list.js +36 -0
  22. package/dist/components/nav-list.js.map +1 -0
  23. package/dist/components/popout.js +3 -3
  24. package/dist/components/popout.js.map +1 -1
  25. package/dist/components/popover.js +2 -2
  26. package/dist/components/popover.js.map +1 -1
  27. package/dist/components/scroll-view.js +5 -5
  28. package/dist/components/scroll-view.js.map +1 -1
  29. package/dist/components/slider.d.ts +11 -0
  30. package/dist/components/slider.js +25 -0
  31. package/dist/components/slider.js.map +1 -0
  32. package/dist/components/validation.js +4 -4
  33. package/dist/components/validation.js.map +1 -1
  34. package/dist/index.d.ts +3 -0
  35. package/dist/index.js +3 -0
  36. package/dist/index.js.map +1 -1
  37. package/dist/theme.module.css +69 -0
  38. package/dist/theme.module.css.map +1 -1
  39. package/package.json +2 -2
  40. package/src/common/coupling.tsx +18 -0
  41. package/src/common/debounce.tsx +2 -2
  42. package/src/common/parsers.tsx +4 -4
  43. package/src/common/theme.tsx +6 -0
  44. package/src/common/trim.tsx +2 -2
  45. package/src/components/collapse.tsx +3 -3
  46. package/src/components/dialog.tsx +2 -2
  47. package/src/components/dropdown.tsx +2 -2
  48. package/src/components/layer.tsx +4 -4
  49. package/src/components/nav-list.tsx +80 -0
  50. package/src/components/popout.tsx +3 -3
  51. package/src/components/popover.tsx +2 -2
  52. package/src/components/scroll-view.tsx +5 -5
  53. package/src/components/slider.tsx +56 -0
  54. package/src/components/validation.tsx +4 -4
  55. package/src/index.tsx +3 -0
  56. package/src/theme/components/nav-list.scss +82 -0
  57. package/src/theme/components/slider.scss +14 -0
  58. package/src/theme/theme.scss +2 -0
package/src/theme/components/nav-list.scss ADDED
@@ -0,0 +1,82 @@
1
+ @use "../common";
2
+
3
+ @include common.theme((
4
+ nav-list-item-bg: (
5
+ dark: transparent,
6
+ ),
7
+ nav-list-item-bg-hover: (
8
+ dark: rgba(255, 255, 255, 0.1),
9
+ ),
10
+ nav-list-item-bg-active: (
11
+ dark: rgba(255, 255, 255, 0.08),
12
+ ),
13
+ nav-list-item-bg-current: (
14
+ dark: rgba(255, 255, 255, 0.1),
15
+ ),
16
+ nav-list-item-fg: (
17
+ dark: rgb(172, 172, 172),
18
+ ),
19
+ nav-list-item-fg-hover: (
20
+ dark: var(--fg),
21
+ ),
22
+ nav-list-item-fg-active: (
23
+ dark: var(--fg),
24
+ ),
25
+ nav-list-item-fg-current: (
26
+ dark: var(--fg),
27
+ ),
28
+ nav-list-item-border: (
29
+ dark: transparent,
30
+ ),
31
+ ));
32
+
33
+ .nav_list {
34
+ display: flex;
35
+ flex-direction: column;
36
+ position: relative;
37
+ z-index: 0;
38
+ }
39
+
40
+ .nav_list_item {
41
+ font-family: inherit;
42
+ font-size: inherit;
43
+ font-weight: 600;
44
+ line-height: 1;
45
+ text-align: left;
46
+
47
+ background-color: var(--nav-list-item-bg);
48
+ color: var(--nav-list-item-fg);
49
+ border: var(--nav-list-item-border) solid var(--control-border);
50
+
51
+ cursor: pointer;
52
+
53
+ outline: none;
54
+ @include common.padding(control-pad, var(--control-border));
55
+
56
+ border-radius: var(--control-radius);
57
+ transition: var(--color-transition) background-color,
58
+ var(--color-transition) border-color;
59
+
60
+ &[disabled] {
61
+ cursor: default;
62
+ filter: var(--control-disabled);
63
+ }
64
+
65
+ &:hover:not(:active):not([disabled]),
66
+ &:focus-visible {
67
+ color: var(--nav-list-item-fg-hover);
68
+ background-color: var(--nav-list-item-bg-hover);
69
+ }
70
+
71
+ &:active {
72
+ color: var(--nav-list-item-fg-active);
73
+ background-color: var(--nav-list-item-bg-active);
74
+ }
75
+ }
76
+
77
+ .nav_list_item_current {
78
+ color: var(--nav-list-item-fg-current);
79
+ background-color: var(--nav-list-item-bg-current);
80
+ box-shadow: var(--control-shadow);
81
+ z-index: 1;
82
+ }
package/src/theme/components/slider.scss ADDED
@@ -0,0 +1,14 @@
1
+
2
+ .slider_host {
3
+ display: flex;
4
+ flex-direction: column;
5
+ row-gap: var(--control-row-gap);
6
+
7
+ & > input {
8
+ outline: none;
9
+
10
+ &:focus-visible {
11
+ outline: var(--focus-outline);
12
+ }
13
+ }
14
+ }
package/src/theme/theme.scss CHANGED
@@ -12,11 +12,13 @@
12
12
  @forward "components/heading";
13
13
  @forward "components/label";
14
14
  @forward "components/link";
15
+ @forward "components/nav-list";
15
16
  @forward "components/page";
16
17
  @forward "components/popover";
17
18
  @forward "components/radio-buttons";
18
19
  @forward "components/row";
19
20
  @forward "components/scroll-view";
21
+ @forward "components/slider";
20
22
  @forward "components/text-input";
21
23
  @forward "components/text";
22
24
  @forward "components/validation";