@rovula/ui 0.0.29 → 0.0.31

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 (77) hide show
  1. package/dist/cjs/bundle.css +139 -69
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +12 -0
  5. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +18 -0
  6. package/dist/cjs/types/components/InputFilter/InputFilter.d.ts +64 -0
  7. package/dist/cjs/types/components/InputFilter/InputFilter.stories.d.ts +370 -0
  8. package/dist/cjs/types/components/InputFilter/InputFilter.styles.d.ts +8 -0
  9. package/dist/cjs/types/components/Search/Search.d.ts +2 -20
  10. package/dist/cjs/types/components/Search/Search.stories.d.ts +26 -38
  11. package/dist/cjs/types/components/TextInput/TextInput.d.ts +10 -0
  12. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +10 -0
  13. package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts +1 -0
  14. package/dist/cjs/types/index.d.ts +1 -0
  15. package/dist/components/ActionButton/ActionButton.stories.js +1 -1
  16. package/dist/components/Checkbox/Checkbox.js +3 -3
  17. package/dist/components/Checkbox/Checkbox.stories.js +1 -1
  18. package/dist/components/DatePicker/DatePicker.js +2 -1
  19. package/dist/components/Dropdown/Dropdown.js +34 -19
  20. package/dist/components/Dropdown/Dropdown.stories.js +1 -0
  21. package/dist/components/Dropdown/Dropdown.styles.js +1 -1
  22. package/dist/components/InputFilter/InputFilter.js +124 -0
  23. package/dist/components/InputFilter/InputFilter.stories.js +34 -0
  24. package/dist/components/InputFilter/InputFilter.styles.js +65 -0
  25. package/dist/components/RadioGroup/RadioGroup.js +5 -2
  26. package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
  27. package/dist/components/Search/Search.js +1 -1
  28. package/dist/components/Search/Search.stories.js +2 -1
  29. package/dist/components/TextInput/TextInput.js +23 -6
  30. package/dist/components/TextInput/TextInput.styles.js +94 -20
  31. package/dist/esm/bundle.css +139 -69
  32. package/dist/esm/bundle.js +3 -3
  33. package/dist/esm/bundle.js.map +1 -1
  34. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +12 -0
  35. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +18 -0
  36. package/dist/esm/types/components/InputFilter/InputFilter.d.ts +64 -0
  37. package/dist/esm/types/components/InputFilter/InputFilter.stories.d.ts +370 -0
  38. package/dist/esm/types/components/InputFilter/InputFilter.styles.d.ts +8 -0
  39. package/dist/esm/types/components/Search/Search.d.ts +2 -20
  40. package/dist/esm/types/components/Search/Search.stories.d.ts +26 -38
  41. package/dist/esm/types/components/TextInput/TextInput.d.ts +10 -0
  42. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +10 -0
  43. package/dist/esm/types/components/TextInput/TextInput.styles.d.ts +1 -0
  44. package/dist/esm/types/index.d.ts +1 -0
  45. package/dist/index.d.ts +82 -16
  46. package/dist/index.js +1 -0
  47. package/dist/src/theme/global.css +278 -161
  48. package/dist/theme/presets/colors.js +21 -0
  49. package/dist/theme/themes/xspector/color.css +13 -0
  50. package/dist/theme/themes/xspector/components/action-button.css +44 -42
  51. package/dist/theme/themes/xspector/state.css +1 -1
  52. package/dist/theme/tokens/color.css +13 -0
  53. package/dist/theme/tokens/components/action-button.css +42 -42
  54. package/package.json +1 -1
  55. package/src/components/ActionButton/ActionButton.stories.tsx +1 -1
  56. package/src/components/Checkbox/Checkbox.stories.tsx +1 -1
  57. package/src/components/Checkbox/Checkbox.tsx +4 -4
  58. package/src/components/DatePicker/DatePicker.tsx +4 -2
  59. package/src/components/Dropdown/Dropdown.stories.tsx +1 -0
  60. package/src/components/Dropdown/Dropdown.styles.ts +1 -1
  61. package/src/components/Dropdown/Dropdown.tsx +69 -38
  62. package/src/components/InputFilter/InputFilter.stories.tsx +72 -0
  63. package/src/components/InputFilter/InputFilter.styles.ts +74 -0
  64. package/src/components/InputFilter/InputFilter.tsx +314 -0
  65. package/src/components/RadioGroup/RadioGroup.stories.tsx +1 -1
  66. package/src/components/RadioGroup/RadioGroup.tsx +7 -9
  67. package/src/components/Search/Search.stories.tsx +3 -2
  68. package/src/components/Search/Search.tsx +13 -2
  69. package/src/components/TextInput/TextInput.styles.ts +94 -20
  70. package/src/components/TextInput/TextInput.tsx +53 -11
  71. package/src/index.ts +1 -0
  72. package/src/theme/presets/colors.js +21 -0
  73. package/src/theme/themes/xspector/color.css +13 -0
  74. package/src/theme/themes/xspector/components/action-button.css +44 -42
  75. package/src/theme/themes/xspector/state.css +1 -1
  76. package/src/theme/tokens/color.css +13 -0
  77. package/src/theme/tokens/components/action-button.css +42 -42
package/src/theme/tokens/components/action-button.css CHANGED
@@ -12,34 +12,34 @@
12
12
  /* ------------------------------------------------------------------ */
13
13
 
14
14
  /* Default State */
15
- --action-button-solid-default-bg: var(--state-color-primary-default);
16
- --action-button-solid-default-border: var(--state-color-primary-default);
17
- --action-button-solid-default-text: var(--state-color-primary-text-solid);
15
+ --action-button-solid-default-bg: var(--function-default-solid);
16
+ --action-button-solid-default-border: var(--function-default-solid);
17
+ --action-button-solid-default-text: var(--function-default-icon);
18
18
 
19
19
  /* Hover State */
20
- --action-button-solid-hover-bg: var(--state-color-primary-hover);
21
- --action-button-solid-hover-border: var(--state-color-primary-hover);
22
- --action-button-solid-hover-text: var(--state-color-primary-text-solid);
20
+ --action-button-solid-hover-bg: var(--function-default-hover);
21
+ --action-button-solid-hover-border: var(--function-default-hover);
22
+ --action-button-solid-hover-text: var(--function-default-icon);
23
23
 
24
24
  /* Pressed State */
25
- --action-button-solid-pressed-bg: var(--state-color-primary-pressed);
26
- --action-button-solid-pressed-border: var(--state-color-primary-pressed);
27
- --action-button-solid-pressed-text: var(--state-color-primary-text-solid);
25
+ --action-button-solid-pressed-bg: var(--function-default-solid);
26
+ --action-button-solid-pressed-border: var(--function-default-solid);
27
+ --action-button-solid-pressed-text: var(--function-default-icon);
28
28
 
29
29
  /* Active State */
30
- --action-button-solid-active-bg: var(--state-color-secondary-default);
31
- --action-button-solid-active-border: var(--state-color-secondary-default);
32
- --action-button-solid-active-text: var(--state-color-secondary-text-solid);
30
+ --action-button-solid-active-bg: var(--function-active-solid);
31
+ --action-button-solid-active-border: var(--function-active-solid);
32
+ --action-button-solid-active-text: var(--function-active-icon);
33
33
 
34
34
  /* Active Hover State */
35
- --action-button-solid-active-hover-bg: var(--state-color-secondary-hover);
36
- --action-button-solid-active-hover-border: var(--state-color-secondary-hover);
37
- --action-button-solid-active-hover-text: var(--state-color-secondary-text-solid);
35
+ --action-button-solid-active-hover-bg: var(--function-active-hover);
36
+ --action-button-solid-active-hover-border: var(--function-active-hover);
37
+ --action-button-solid-active-hover-text: var(--function-active-icon);
38
38
 
39
39
  /* Active Pressed State */
40
- --action-button-solid-active-pressed-bg: var(--state-color-secondary-pressed);
41
- --action-button-solid-active-pressed-border: var(--state-color-secondary-pressed);
42
- --action-button-solid-active-pressed-text: var(--state-color-secondary-text-solid);
40
+ --action-button-solid-active-pressed-bg: var(--function-active-solid);
41
+ --action-button-solid-active-pressed-border: var(--function-active-solid);
42
+ --action-button-solid-active-pressed-text: var(--function-active-icon);
43
43
 
44
44
  /* Disabled State */
45
45
  --action-button-solid-disabled-bg: var(--state-color-disable-solid);
@@ -53,33 +53,33 @@
53
53
 
54
54
  /* Default State */
55
55
  --action-button-outline-default-bg: transparent;
56
- --action-button-outline-default-border: var(--state-color-primary-stroke);
57
- --action-button-outline-default-text: var(--state-color-primary-text-outline);
56
+ --action-button-outline-default-border: var(--function-default-stroke);
57
+ --action-button-outline-default-text: var(--function-default-outline-icon);
58
58
 
59
59
  /* Hover State */
60
- --action-button-outline-hover-bg: var(--state-color-primary-hover-bg);
61
- --action-button-outline-hover-border: var(--state-color-primary-hover);
62
- --action-button-outline-hover-text: var(--state-color-primary-text-hover);
60
+ --action-button-outline-hover-bg: var(--function-default-hover-bg);
61
+ --action-button-outline-hover-border: var(--function-default-hover);
62
+ --action-button-outline-hover-text: var(--function-default-hover);
63
63
 
64
64
  /* Pressed State */
65
- --action-button-outline-pressed-bg: var(--state-color-primary-hover-bg);
66
- --action-button-outline-pressed-border: var(--state-color-primary-pressed);
67
- --action-button-outline-pressed-text: var(--state-color-primary-text-pressed);
65
+ --action-button-outline-pressed-bg: var(--function-default-hover-bg);
66
+ --action-button-outline-pressed-border: var(--function-default-stroke);
67
+ --action-button-outline-pressed-text: var(--function-default-outline-icon);
68
68
 
69
69
  /* Active State */
70
70
  --action-button-outline-active-bg: transparent;
71
- --action-button-outline-active-border: var(--state-color-secondary-stroke);
72
- --action-button-outline-active-text: var(--state-color-secondary-text-outline);
71
+ --action-button-outline-active-border: var(--function-active-stroke);
72
+ --action-button-outline-active-text: var(--function-active-solid);
73
73
 
74
74
  /* Active Hover State */
75
- --action-button-outline-active-hover-bg: var(--state-color-secondary-hover-bg);
76
- --action-button-outline-active-hover-border: var(--state-color-secondary-hover);
77
- --action-button-outline-active-hover-text: var(--state-color-secondary-text-hover);
75
+ --action-button-outline-active-hover-bg: var(--function-active-hover-bg);;
76
+ --action-button-outline-active-hover-border: var(--function-active-hover);
77
+ --action-button-outline-active-hover-text: var(--function-active-hover);
78
78
 
79
79
  /* Active Pressed State */
80
- --action-button-outline-active-pressed-bg: var(--state-color-secondary-hover-bg);
81
- --action-button-outline-active-pressed-border: var(--state-color-secondary-pressed);
82
- --action-button-outline-active-pressed-text: var(--state-color-secondary-text-pressed);
80
+ --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
81
+ --action-button-outline-active-pressed-border: var(--function-active-stroke);
82
+ --action-button-outline-active-pressed-text: var(--function-active-solid);
83
83
 
84
84
  /* Disabled State */
85
85
  --action-button-outline-disabled-bg: transparent;
@@ -93,32 +93,32 @@
93
93
  /* Default State */
94
94
  --action-button-icon-default-bg: transparent;
95
95
  --action-button-icon-default-border: transparent;
96
- --action-button-icon-default-text: var(--state-color-primary-text-outline);
96
+ --action-button-icon-default-text: var(--function-default-outline-icon);
97
97
 
98
98
  /* Hover State */
99
- --action-button-icon-hover-bg: var(--state-color-primary-hover-bg);
99
+ --action-button-icon-hover-bg: var(--function-default-hover-bg);
100
100
  --action-button-icon-hover-border: transparent;
101
- --action-button-icon-hover-text: var(--state-color-primary-text-hover);
101
+ --action-button-icon-hover-text: var(--function-default-hover);
102
102
 
103
103
  /* Pressed State */
104
104
  --action-button-icon-pressed-bg: transparent;
105
105
  --action-button-icon-pressed-border: transparent;
106
- --action-button-icon-pressed-text: var(--state-color-primary-text-pressed);
106
+ --action-button-icon-pressed-text: var(--function-default-outline-icon);
107
107
 
108
108
  /* Active State */
109
109
  --action-button-icon-active-bg: transparent;
110
110
  --action-button-icon-active-border: transparent;
111
- --action-button-icon-active-text: var(--state-color-secondary-text-outline);
111
+ --action-button-icon-active-text: var(--function-active-solid);
112
112
 
113
113
  /* Active Hover State */
114
- --action-button-icon-active-hover-bg: var(--state-color-secondary-hover-bg);
114
+ --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
115
115
  --action-button-icon-active-hover-border: transparent;
116
- --action-button-icon-active-hover-text: var(--state-color-secondary-text-hover);
116
+ --action-button-icon-active-hover-text: var(--function-active-hover);
117
117
 
118
118
  /* Active Pressed State */
119
119
  --action-button-icon-active-pressed-bg: transparent;
120
120
  --action-button-icon-active-pressed-border: transparent;
121
- --action-button-icon-active-pressed-text: var(--state-color-secondary-text-pressed);
121
+ --action-button-icon-active-pressed-text: var(--function-active-solid);
122
122
 
123
123
  /* Disabled State */
124
124
  --action-button-icon-disabled-bg: transparent;