@rovula/ui 0.0.12 → 0.0.14

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 (99) hide show
  1. package/dist/cjs/bundle.css +227 -16
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/ActionButton/ActionButton.d.ts +20 -0
  5. package/dist/cjs/types/components/ActionButton/ActionButton.stories.d.ts +311 -0
  6. package/dist/cjs/types/components/ActionButton/ActionButton.styles.d.ts +6 -0
  7. package/dist/cjs/types/components/Avatar/Avatar.d.ts +32 -0
  8. package/dist/cjs/types/components/Avatar/Avatar.stories.d.ts +64 -0
  9. package/dist/cjs/types/components/Avatar/Avatar.styles.d.ts +4 -0
  10. package/dist/cjs/types/components/Avatar/AvatarBase.d.ts +6 -0
  11. package/dist/cjs/types/components/Avatar/AvatarGroup.d.ts +11 -0
  12. package/dist/cjs/types/components/Avatar/AvatarGroup.stories.d.ts +31 -0
  13. package/dist/cjs/types/components/Input/Input.d.ts +21 -4
  14. package/dist/cjs/types/components/Input/Input.stories.d.ts +340 -22
  15. package/dist/cjs/types/components/Input/Input.styles.d.ts +9 -0
  16. package/dist/cjs/types/components/Label/Label.d.ts +6 -1
  17. package/dist/cjs/types/components/Label/Label.stories.d.ts +10 -1
  18. package/dist/cjs/types/components/Label/Label.styles.d.ts +6 -0
  19. package/dist/cjs/types/components/Navbar/Navbar.d.ts +12 -0
  20. package/dist/cjs/types/components/Navbar/Navbar.stories.d.ts +35 -0
  21. package/dist/cjs/types/components/Search/Search.d.ts +2 -0
  22. package/dist/cjs/types/components/Search/Search.stories.d.ts +21 -0
  23. package/dist/cjs/types/components/ThemeToggle.d.ts +2 -0
  24. package/dist/components/ActionButton/ActionButton.js +38 -0
  25. package/dist/components/ActionButton/ActionButton.stories.js +45 -0
  26. package/dist/components/ActionButton/ActionButton.styles.js +71 -0
  27. package/dist/components/Avatar/Avatar.js +22 -0
  28. package/dist/components/Avatar/Avatar.stories.js +47 -0
  29. package/dist/components/Avatar/Avatar.styles.js +23 -0
  30. package/dist/components/Avatar/AvatarBase.js +43 -0
  31. package/dist/components/Avatar/AvatarGroup.js +21 -0
  32. package/dist/components/Avatar/AvatarGroup.stories.js +47 -0
  33. package/dist/components/Button/Button.styles.js +6 -6
  34. package/dist/components/Dropdown/Dropdown.js +39 -2
  35. package/dist/components/Dropdown/Dropdown.stories.js +29 -4
  36. package/dist/components/Input/Input.js +5 -4
  37. package/dist/components/Input/Input.stories.js +2 -4
  38. package/dist/components/Input/Input.styles.js +45 -0
  39. package/dist/components/Label/Label.js +7 -3
  40. package/dist/components/Label/Label.styles.js +57 -0
  41. package/dist/components/Navbar/Navbar.js +9 -0
  42. package/dist/components/Navbar/Navbar.stories.js +41 -0
  43. package/dist/components/Search/Search.js +19 -0
  44. package/dist/components/Search/Search.stories.js +36 -0
  45. package/dist/components/Text/Text.js +2 -1
  46. package/dist/components/ThemeToggle.js +17 -0
  47. package/dist/esm/bundle.css +227 -16
  48. package/dist/esm/bundle.js +3 -3
  49. package/dist/esm/bundle.js.map +1 -1
  50. package/dist/esm/types/components/ActionButton/ActionButton.d.ts +20 -0
  51. package/dist/esm/types/components/ActionButton/ActionButton.stories.d.ts +311 -0
  52. package/dist/esm/types/components/ActionButton/ActionButton.styles.d.ts +6 -0
  53. package/dist/esm/types/components/Avatar/Avatar.d.ts +32 -0
  54. package/dist/esm/types/components/Avatar/Avatar.stories.d.ts +64 -0
  55. package/dist/esm/types/components/Avatar/Avatar.styles.d.ts +4 -0
  56. package/dist/esm/types/components/Avatar/AvatarBase.d.ts +6 -0
  57. package/dist/esm/types/components/Avatar/AvatarGroup.d.ts +11 -0
  58. package/dist/esm/types/components/Avatar/AvatarGroup.stories.d.ts +31 -0
  59. package/dist/esm/types/components/Input/Input.d.ts +21 -4
  60. package/dist/esm/types/components/Input/Input.stories.d.ts +340 -22
  61. package/dist/esm/types/components/Input/Input.styles.d.ts +9 -0
  62. package/dist/esm/types/components/Label/Label.d.ts +6 -1
  63. package/dist/esm/types/components/Label/Label.stories.d.ts +10 -1
  64. package/dist/esm/types/components/Label/Label.styles.d.ts +6 -0
  65. package/dist/esm/types/components/Navbar/Navbar.d.ts +12 -0
  66. package/dist/esm/types/components/Navbar/Navbar.stories.d.ts +35 -0
  67. package/dist/esm/types/components/Search/Search.d.ts +2 -0
  68. package/dist/esm/types/components/Search/Search.stories.d.ts +21 -0
  69. package/dist/esm/types/components/ThemeToggle.d.ts +2 -0
  70. package/dist/index.d.ts +22 -10
  71. package/dist/src/theme/global.css +290 -21
  72. package/dist/theme/global.css +11 -0
  73. package/dist/theme/presets/colors.js +28 -0
  74. package/package.json +2 -1
  75. package/src/components/ActionButton/ActionButton.stories.tsx +176 -0
  76. package/src/components/ActionButton/ActionButton.styles.ts +79 -0
  77. package/src/components/ActionButton/ActionButton.tsx +42 -0
  78. package/src/components/Avatar/Avatar.stories.tsx +107 -0
  79. package/src/components/Avatar/Avatar.styles.ts +28 -0
  80. package/src/components/Avatar/Avatar.tsx +88 -0
  81. package/src/components/Avatar/AvatarBase.tsx +50 -0
  82. package/src/components/Avatar/AvatarGroup.stories.tsx +77 -0
  83. package/src/components/Avatar/AvatarGroup.tsx +55 -0
  84. package/src/components/Button/Button.styles.ts +6 -6
  85. package/src/components/Dropdown/Dropdown.stories.tsx +25 -3
  86. package/src/components/Dropdown/Dropdown.tsx +61 -2
  87. package/src/components/Input/Input.stories.tsx +8 -6
  88. package/src/components/Input/Input.styles.tsx +51 -0
  89. package/src/components/Input/Input.tsx +30 -6
  90. package/src/components/Label/Label.styles.ts +61 -0
  91. package/src/components/Label/Label.tsx +13 -7
  92. package/src/components/Navbar/Navbar.stories.tsx +86 -0
  93. package/src/components/Navbar/Navbar.tsx +56 -0
  94. package/src/components/Search/Search.stories.tsx +44 -0
  95. package/src/components/Search/Search.tsx +25 -0
  96. package/src/components/Text/Text.tsx +2 -1
  97. package/src/components/ThemeToggle.tsx +19 -0
  98. package/src/theme/global.css +11 -0
  99. package/src/theme/presets/colors.js +28 -0
package/src/components/ThemeToggle.tsx ADDED
@@ -0,0 +1,19 @@
1
+ import React, { useState } from "react";
2
+
3
+ const ThemeToggle = () => {
4
+ const [theme, setTheme] = useState("default");
5
+
6
+ const toggleTheme = () => {
7
+ if (theme === "default") {
8
+ document.documentElement.classList.add("xspector");
9
+ setTheme("xspector");
10
+ } else {
11
+ document.documentElement.classList.remove("xspector");
12
+ setTheme("default");
13
+ }
14
+ };
15
+
16
+ return <button onClick={toggleTheme}>Toggle Theme</button>;
17
+ };
18
+
19
+ export default ThemeToggle;
package/src/theme/global.css CHANGED
@@ -128,6 +128,10 @@
128
128
  --error-default: var(--error-100);
129
129
  --error-foreground: var(--white);
130
130
 
131
+ --main-transparent-primary: 1 1 68;
132
+ --main-transparent-secondary: 234 241 255;
133
+ --main-transparent-tertiary: 47 78 255;
134
+
131
135
  /* Button */
132
136
  --btn-rounded-sm: 10px;
133
137
  --btn-rounded-md: 12px;
@@ -162,6 +166,13 @@
162
166
  --popup-overlay: 0 0 0;
163
167
  --popup-overlay-alpha: 0.48;
164
168
  --popup-rounded: 24px;
169
+
170
+ /* Navbar */
171
+ --navbar-height: 58px;
172
+ --navbar-bg-color: var(--primary-default);
173
+ --navbar-text-color: var(--primary-foreground);
174
+ --navbar-border-color: var(--primary-foreground);
175
+ --navbar-gap: 16px;
165
176
 
166
177
  /* TODO for shadcn, wait for refactor */
167
178
  /* --background: 0 0% 100%; */
package/src/theme/presets/colors.js CHANGED
@@ -141,6 +141,34 @@ module.exports = {
141
141
  DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
142
142
  foreground: "rgb(var(--error-foreground) / <alpha-value>)",
143
143
  },
144
+ main: {
145
+ transparent: {
146
+ primary: {
147
+ 8: "rgb(var(--main-transparent-primary) / 0.8)",
148
+ 12: "rgb(var(--main-transparent-primary) / 0.12)",
149
+ 16: "rgb(var(--main-transparent-primary) / 0.16)",
150
+ 24: "rgb(var(--main-transparent-primary) / 0.24)",
151
+ 32: "rgb(var(--main-transparent-primary) / 0.32)",
152
+ 48: "rgb(var(--main-transparent-primary) / 0.48)",
153
+ },
154
+ secondary: {
155
+ 8: "rgb(var(--main-transparent-secondary) / 0.8)",
156
+ 12: "rgb(var(--main-transparent-secondary) / 0.12)",
157
+ 16: "rgb(var(--main-transparent-secondary) / 0.16)",
158
+ 24: "rgb(var(--main-transparent-secondary) / 0.24)",
159
+ 32: "rgb(var(--main-transparent-secondary) / 0.32)",
160
+ 48: "rgb(var(--main-transparent-secondary) / 0.48)",
161
+ },
162
+ tertiary: {
163
+ 8: "rgb(var(--main-transparent-tertiary) / 0.8)",
164
+ 12: "rgb(var(--main-transparent-tertiary) / 0.12)",
165
+ 16: "rgb(var(--main-transparent-tertiary) / 0.16)",
166
+ 24: "rgb(var(--main-transparent-tertiary) / 0.24)",
167
+ 32: "rgb(var(--main-transparent-tertiary) / 0.32)",
168
+ 48: "rgb(var(--main-transparent-tertiary) / 0.48)",
169
+ },
170
+ },
171
+ },
144
172
  // Component color
145
173
  input: {
146
174
  text: {