ropav 0.0.4 → 0.0.6

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 (97) hide show
  1. package/README.md +21 -43
  2. package/dist/base.css +36 -14
  3. package/dist/button-group.css +50 -0
  4. package/dist/button-group.js +49 -0
  5. package/dist/button-group.js.map +1 -0
  6. package/dist/button.css +73 -43
  7. package/dist/button.js +41 -40
  8. package/dist/button.js.map +1 -1
  9. package/dist/card.css +88 -0
  10. package/dist/card.js +71 -0
  11. package/dist/card.js.map +1 -0
  12. package/dist/checkbox.css +108 -94
  13. package/dist/checkbox.js +18 -6
  14. package/dist/checkbox.js.map +1 -1
  15. package/dist/componentColors.js +22 -0
  16. package/dist/componentColors.js.map +1 -0
  17. package/dist/components/button/button.d.ts +2 -0
  18. package/dist/components/button/types.d.ts +2 -1
  19. package/dist/components/button/useButtonColor.d.ts +13 -0
  20. package/dist/components/button-group/button-group.d.ts +21 -0
  21. package/dist/components/button-group/index.d.ts +2 -0
  22. package/dist/components/button-group/index.js +2 -0
  23. package/dist/components/button-group/types.d.ts +10 -0
  24. package/dist/components/card/card.d.ts +21 -0
  25. package/dist/components/card/index.d.ts +2 -0
  26. package/dist/components/card/index.js +2 -0
  27. package/dist/components/card/types.d.ts +11 -0
  28. package/dist/components/checkbox/types.d.ts +2 -1
  29. package/dist/components/checkbox/useCheckbox.d.ts +4 -0
  30. package/dist/components/field/field.d.ts +35 -0
  31. package/dist/components/field/index.d.ts +2 -0
  32. package/dist/components/field/index.js +2 -0
  33. package/dist/components/field/types.d.ts +21 -0
  34. package/dist/components/icon-button/icon-button.d.ts +21 -0
  35. package/dist/components/icon-button/index.d.ts +2 -0
  36. package/dist/components/icon-button/index.js +2 -0
  37. package/dist/components/icon-button/types.d.ts +15 -0
  38. package/dist/components/progress/index.d.ts +3 -0
  39. package/dist/components/progress/index.js +2 -0
  40. package/dist/components/progress/progress.d.ts +27 -0
  41. package/dist/components/progress/types.d.ts +24 -0
  42. package/dist/components/progress/useProgress.d.ts +28 -0
  43. package/dist/components/radio/types.d.ts +2 -1
  44. package/dist/components/radio/useRadio.d.ts +4 -0
  45. package/dist/components/slider/index.d.ts +3 -0
  46. package/dist/components/slider/index.js +2 -0
  47. package/dist/components/slider/slider.d.ts +35 -0
  48. package/dist/components/slider/types.d.ts +50 -0
  49. package/dist/components/slider/useSlider.d.ts +50 -0
  50. package/dist/components/switch/types.d.ts +2 -1
  51. package/dist/components/switch/useSwitch.d.ts +3 -0
  52. package/dist/components/textarea/index.d.ts +1 -1
  53. package/dist/components/textarea/types.d.ts +5 -0
  54. package/dist/components/textarea/useTextarea.d.ts +2 -0
  55. package/dist/components/tooltip/index.d.ts +2 -0
  56. package/dist/components/tooltip/index.js +2 -0
  57. package/dist/components/tooltip/tooltip.d.ts +27 -0
  58. package/dist/components/tooltip/types.d.ts +29 -0
  59. package/dist/components/tooltip/useTooltip.d.ts +17 -0
  60. package/dist/field.css +40 -0
  61. package/dist/field.js +128 -0
  62. package/dist/field.js.map +1 -0
  63. package/dist/icon-button.css +372 -0
  64. package/dist/icon-button.js +67 -0
  65. package/dist/icon-button.js.map +1 -0
  66. package/dist/index.d.ts +7 -0
  67. package/dist/index.js +9 -1
  68. package/dist/input.css +2 -2
  69. package/dist/progress.css +125 -0
  70. package/dist/progress.js +177 -0
  71. package/dist/progress.js.map +1 -0
  72. package/dist/radio.css +83 -83
  73. package/dist/radio.js +18 -6
  74. package/dist/radio.js.map +1 -1
  75. package/dist/select.css +16 -4
  76. package/dist/select.js +7 -0
  77. package/dist/select.js.map +1 -1
  78. package/dist/slider.css +438 -0
  79. package/dist/slider.js +412 -0
  80. package/dist/slider.js.map +1 -0
  81. package/dist/switch.css +79 -70
  82. package/dist/switch.js +15 -6
  83. package/dist/switch.js.map +1 -1
  84. package/dist/textarea.css +35 -28
  85. package/dist/textarea.js +106 -15
  86. package/dist/textarea.js.map +1 -1
  87. package/dist/tooltip.css +136 -0
  88. package/dist/tooltip.js +384 -0
  89. package/dist/tooltip.js.map +1 -0
  90. package/dist/useButtonColor.js +33 -0
  91. package/dist/useButtonColor.js.map +1 -0
  92. package/package.json +30 -2
  93. package/src/styles/_mixins.scss +17 -0
  94. package/src/styles/_tokens.scss +14 -13
  95. package/src/styles/_utilities.scss +13 -0
  96. package/src/styles/_variables.scss +2 -1
  97. package/src/styles/base.scss +1 -0
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "ropav",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "type": "module",
5
- "packageManager": "pnpm@11.9.0",
5
+ "packageManager": "pnpm@11.10.0",
6
6
  "engines": {
7
7
  "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
8
8
  },
@@ -25,14 +25,34 @@
25
25
  "types": "./dist/components/button/index.d.ts",
26
26
  "import": "./dist/components/button/index.js"
27
27
  },
28
+ "./button-group": {
29
+ "types": "./dist/components/button-group/index.d.ts",
30
+ "import": "./dist/components/button-group/index.js"
31
+ },
32
+ "./card": {
33
+ "types": "./dist/components/card/index.d.ts",
34
+ "import": "./dist/components/card/index.js"
35
+ },
28
36
  "./checkbox": {
29
37
  "types": "./dist/components/checkbox/index.d.ts",
30
38
  "import": "./dist/components/checkbox/index.js"
31
39
  },
40
+ "./field": {
41
+ "types": "./dist/components/field/index.d.ts",
42
+ "import": "./dist/components/field/index.js"
43
+ },
44
+ "./icon-button": {
45
+ "types": "./dist/components/icon-button/index.d.ts",
46
+ "import": "./dist/components/icon-button/index.js"
47
+ },
32
48
  "./input": {
33
49
  "types": "./dist/components/input/index.d.ts",
34
50
  "import": "./dist/components/input/index.js"
35
51
  },
52
+ "./progress": {
53
+ "types": "./dist/components/progress/index.d.ts",
54
+ "import": "./dist/components/progress/index.js"
55
+ },
36
56
  "./radio": {
37
57
  "types": "./dist/components/radio/index.d.ts",
38
58
  "import": "./dist/components/radio/index.js"
@@ -41,6 +61,10 @@
41
61
  "types": "./dist/components/select/index.d.ts",
42
62
  "import": "./dist/components/select/index.js"
43
63
  },
64
+ "./slider": {
65
+ "types": "./dist/components/slider/index.d.ts",
66
+ "import": "./dist/components/slider/index.js"
67
+ },
44
68
  "./switch": {
45
69
  "types": "./dist/components/switch/index.d.ts",
46
70
  "import": "./dist/components/switch/index.js"
@@ -49,6 +73,10 @@
49
73
  "types": "./dist/components/textarea/index.d.ts",
50
74
  "import": "./dist/components/textarea/index.js"
51
75
  },
76
+ "./tooltip": {
77
+ "types": "./dist/components/tooltip/index.d.ts",
78
+ "import": "./dist/components/tooltip/index.js"
79
+ },
52
80
  "./base.css": "./dist/base.css",
53
81
  "./scss/*": "./src/styles/*"
54
82
  },
package/src/styles/_mixins.scss CHANGED
@@ -103,6 +103,23 @@
103
103
  }
104
104
  }
105
105
 
106
+ @mixin spinner-icon($size: 1em, $display: block) {
107
+ display: $display;
108
+ width: $size;
109
+ height: $size;
110
+ flex-shrink: 0;
111
+ transform-origin: center;
112
+ animation: rp-spinner-spin 700ms linear infinite;
113
+ }
114
+
115
+ @mixin spinner-keyframes {
116
+ @keyframes rp-spinner-spin {
117
+ to {
118
+ transform: rotate(360deg);
119
+ }
120
+ }
121
+ }
122
+
106
123
  @mixin semantic-colors($var-name) {
107
124
  @each $name in primary, secondary, success, warning, danger, info, neutral {
108
125
  &--#{$name} {
package/src/styles/_tokens.scss CHANGED
@@ -20,19 +20,19 @@
20
20
  --rp-color-text-disabled : #{$color-text-disabled};
21
21
  --rp-color-text-inverted : #{$color-white};
22
22
  --rp-color-background : #{$color-background};
23
- --rp-color-surface : #{$color-white};
23
+ --rp-color-surface : #{$color-gray-1};
24
24
  --rp-color-surface-raised : #{$color-white};
25
25
  --rp-color-surface-muted : #{$color-gray-2};
26
26
  --rp-color-surface-hover : #{$color-gray-3};
27
- --rp-color-button-default-bg : #{$color-gray-2};
28
- --rp-color-button-default-bg-hover : #{$color-gray-3};
27
+ --rp-color-button-default-bg : var(--rp-color-surface);
28
+ --rp-color-button-default-bg-hover : var(--rp-color-surface-hover);
29
29
  --rp-color-button-default-bg-active : #{$color-gray-4};
30
30
  --rp-color-surface-inverted : #{$color-gray-12};
31
31
  --rp-color-overlay : rgba(17, 17, 17, 0.55);
32
32
  --rp-color-border : #{$color-border};
33
33
  --rp-color-border-hover : #{$color-border-hover};
34
34
  --rp-color-focus-ring : color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
35
- --rp-color-control-bg : #{$color-gray-2};
35
+ --rp-color-control-bg : var(--rp-color-surface);
36
36
  --rp-color-control-readonly-bg : var(--rp-color-surface-muted);
37
37
  --rp-color-control-fg : var(--rp-color-text);
38
38
  --rp-color-control-placeholder : var(--rp-color-text-secondary);
@@ -144,6 +144,7 @@
144
144
 
145
145
  // Border radius
146
146
  --rp-radius-none: #{$radius-none};
147
+ --rp-radius-xs : #{$radius-xs};
147
148
  --rp-radius-sm : #{$radius-sm};
148
149
  --rp-radius-md : #{$radius-md};
149
150
  --rp-radius-lg : #{$radius-lg};
@@ -181,20 +182,20 @@ html.dark {
181
182
  --rp-color-text-secondary : #b4b4b4;
182
183
  --rp-color-text-disabled : #6e6e6e;
183
184
  --rp-color-text-inverted : #{$color-gray-12};
184
- --rp-color-background : #111111;
185
- --rp-color-surface : #111111;
186
- --rp-color-surface-raised : #191919;
187
- --rp-color-surface-muted : #191919;
188
- --rp-color-surface-hover : #222222;
189
- --rp-color-button-default-bg : #191919;
190
- --rp-color-button-default-bg-hover : #222222;
191
- --rp-color-button-default-bg-active : #2a2a2a;
185
+ --rp-color-background : #191919;
186
+ --rp-color-surface : #222222;
187
+ --rp-color-surface-raised : #2a2a2a;
188
+ --rp-color-surface-muted : #222222;
189
+ --rp-color-surface-hover : #2a2a2a;
190
+ --rp-color-button-default-bg : var(--rp-color-surface);
191
+ --rp-color-button-default-bg-hover : var(--rp-color-surface-hover);
192
+ --rp-color-button-default-bg-active : #313131;
192
193
  --rp-color-surface-inverted : #{$color-gray-2};
193
194
  --rp-color-overlay : rgba(17, 17, 17, 0.75);
194
195
  --rp-color-border : #3a3a3a;
195
196
  --rp-color-border-hover : #606060;
196
197
  --rp-color-focus-ring : color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
197
- --rp-color-control-bg : #191919;
198
+ --rp-color-control-bg : var(--rp-color-surface);
198
199
  --rp-color-control-readonly-bg : var(--rp-color-surface-muted);
199
200
  --rp-color-control-fg : #eeeeee;
200
201
  --rp-color-control-placeholder : #6e6e6e;
package/src/styles/_utilities.scss ADDED
@@ -0,0 +1,13 @@
1
+ @use 'mixins' as *;
2
+
3
+ .rp-spinner {
4
+ @include spinner-icon($display: inline-block);
5
+ }
6
+
7
+ .rp-spinner > svg {
8
+ display: block;
9
+ width: 100%;
10
+ height: 100%;
11
+ }
12
+
13
+ @include spinner-keyframes;
package/src/styles/_variables.scss CHANGED
@@ -29,7 +29,7 @@ $color-gray-12 : #202020 !default;
29
29
  $color-text : $color-gray-12 !default;
30
30
  $color-text-secondary: $color-gray-11 !default;
31
31
  $color-text-disabled : $color-gray-9 !default;
32
- $color-background : $color-white !default;
32
+ $color-background : $color-gray-2 !default;
33
33
  $color-border : $color-gray-6 !default;
34
34
  $color-border-hover : $color-gray-8 !default;
35
35
  $color-on-primary : $color-white !default;
@@ -76,6 +76,7 @@ $spacing-12: 3rem !default;
76
76
 
77
77
  // Border radius
78
78
  $radius-none: 0 !default;
79
+ $radius-xs : 0.25rem !default;
79
80
  $radius-sm : 0.375rem !default;
80
81
  $radius-md : 0.75rem !default;
81
82
  $radius-lg : 1rem !default;
package/src/styles/base.scss CHANGED
@@ -1 +1,2 @@
1
1
  @use './tokens';
2
+ @use './utilities';