ropav 0.1.4 → 0.1.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 (138) hide show
  1. package/README.md +20 -0
  2. package/dist/accordion.js +11 -8
  3. package/dist/alert.css +18 -18
  4. package/dist/alert.js +27 -21
  5. package/dist/avatar.css +19 -19
  6. package/dist/avatar.js +16 -11
  7. package/dist/badge.css +16 -16
  8. package/dist/badge.js +14 -9
  9. package/dist/base.css +214 -69
  10. package/dist/button-group.js +1 -1
  11. package/dist/button-link.js +16 -14
  12. package/dist/button.css +37 -28
  13. package/dist/button.js +16 -14
  14. package/dist/{useButtonColor.js → button.scss_vue_type_style_index_0_src_true_lang.js} +8 -4
  15. package/dist/card.js +1 -1
  16. package/dist/checkbox.css +32 -32
  17. package/dist/checkbox.js +19 -11
  18. package/dist/chevron-right.js +12 -0
  19. package/dist/collapse.css +6 -6
  20. package/dist/collapse.js +4 -4
  21. package/dist/collectionNavigation.js +120 -0
  22. package/dist/color-input.css +19 -19
  23. package/dist/color-input.js +6 -5
  24. package/dist/color-picker.css +7 -7
  25. package/dist/color-picker.js +4 -5
  26. package/dist/color-swatch.js +1 -1
  27. package/dist/componentColors.js +135 -23
  28. package/dist/components/alert/types.d.ts +1 -0
  29. package/dist/components/alert/useAlertColor.d.ts +1 -1
  30. package/dist/components/avatar/types.d.ts +1 -0
  31. package/dist/components/avatar/useAvatarColor.d.ts +1 -1
  32. package/dist/components/badge/types.d.ts +1 -0
  33. package/dist/components/badge/useBadgeColor.d.ts +1 -1
  34. package/dist/components/button/types.d.ts +1 -0
  35. package/dist/components/button/useButtonColor.d.ts +1 -1
  36. package/dist/components/button-link/types.d.ts +1 -0
  37. package/dist/components/checkbox/types.d.ts +1 -0
  38. package/dist/components/checkbox/useCheckbox.d.ts +1 -1
  39. package/dist/components/color-input/color-input.d.ts +2 -2
  40. package/dist/components/color-input/useColorInput.d.ts +1 -1
  41. package/dist/components/dialog/dialog-core.d.ts +1 -1
  42. package/dist/components/dropdown-menu/dropdown-menu-content.d.ts +2 -2
  43. package/dist/components/dropdown-menu/dropdown-menu-primitive-core.d.ts +2 -1
  44. package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts +2 -2
  45. package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +0 -2
  46. package/dist/components/dropdown-menu/dropdown-menu.d.ts +3 -3
  47. package/dist/components/dropdown-menu/index.d.ts +1 -0
  48. package/dist/components/dropdown-menu/types.d.ts +4 -0
  49. package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +3 -4
  50. package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +2 -1
  51. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -0
  52. package/dist/components/icon-button/types.d.ts +1 -0
  53. package/dist/components/input/useInput.d.ts +1 -1
  54. package/dist/components/number-input/useNumberInput.d.ts +1 -1
  55. package/dist/components/pagination/index.d.ts +4 -0
  56. package/dist/components/pagination/index.js +2 -0
  57. package/dist/components/pagination/pagination.d.ts +49 -0
  58. package/dist/components/pagination/types.d.ts +54 -0
  59. package/dist/components/pagination/usePagination.d.ts +19 -0
  60. package/dist/components/progress/useProgress.d.ts +1 -1
  61. package/dist/components/radio/types.d.ts +3 -0
  62. package/dist/components/radio/useRadio.d.ts +2 -2
  63. package/dist/components/scroll-area/scrollAreaCore.d.ts +5 -0
  64. package/dist/components/scroll-area/types.d.ts +4 -0
  65. package/dist/components/scroll-area/useScrollArea.d.ts +1 -0
  66. package/dist/components/scroll-area/useScrollAreaMetrics.d.ts +3 -0
  67. package/dist/components/scroll-area/useScrollAreaPresentation.d.ts +3 -0
  68. package/dist/components/select/useSelect.d.ts +3 -2
  69. package/dist/components/select/useSelectNativeValue.d.ts +1 -7
  70. package/dist/components/slider/range-slider-tooltip.d.ts +2 -0
  71. package/dist/components/slider/sliderCore.d.ts +2 -1
  72. package/dist/components/slider/types.d.ts +1 -1
  73. package/dist/components/slider/useRangeSlider.d.ts +3 -1
  74. package/dist/components/slider/useSlider.d.ts +3 -1
  75. package/dist/components/switch/useSwitch.d.ts +1 -1
  76. package/dist/components/textarea/useTextarea.d.ts +1 -1
  77. package/dist/components/toast/types.d.ts +2 -0
  78. package/dist/components/toast/useToastColor.d.ts +1 -1
  79. package/dist/components/tooltip/types.d.ts +1 -0
  80. package/dist/components/tooltip/useTooltip.d.ts +1 -1
  81. package/dist/composables/index.d.ts +2 -0
  82. package/dist/composables/index.js +2 -0
  83. package/dist/composables/useControllableValue.d.ts +14 -0
  84. package/dist/dialog.js +8 -5
  85. package/dist/dropdown-menu.js +98 -59
  86. package/dist/field.js +1 -1
  87. package/dist/floating.js +19 -7
  88. package/dist/icon-button.css +12 -169
  89. package/dist/icon-button.js +11 -7
  90. package/dist/index.d.ts +6 -4
  91. package/dist/index.js +8 -5
  92. package/dist/input.css +24 -24
  93. package/dist/input.js +6 -5
  94. package/dist/modal.js +11 -7
  95. package/dist/number-input.css +18 -18
  96. package/dist/number-input.js +8 -7
  97. package/dist/overlay.js +1 -1
  98. package/dist/pagination.css +140 -0
  99. package/dist/pagination.js +442 -0
  100. package/dist/popover.js +9 -6
  101. package/dist/progress.css +29 -21
  102. package/dist/progress.js +17 -10
  103. package/dist/radio.js +17 -7
  104. package/dist/scroll-area.css +10 -1
  105. package/dist/scroll-area.js +82 -25
  106. package/dist/select.css +45 -45
  107. package/dist/select.js +111 -70
  108. package/dist/slider.css +191 -191
  109. package/dist/slider.js +58 -46
  110. package/dist/switch.css +17 -17
  111. package/dist/switch.js +7 -6
  112. package/dist/tabs.css +3 -3
  113. package/dist/tabs.js +25 -15
  114. package/dist/textarea.css +26 -26
  115. package/dist/textarea.js +5 -4
  116. package/dist/toast.css +26 -26
  117. package/dist/toast.js +35 -23
  118. package/dist/tooltip.css +12 -12
  119. package/dist/tooltip.js +24 -16
  120. package/dist/unplugin-icons.js +38 -25
  121. package/dist/useCollapse.js +12 -7
  122. package/dist/useControlState.js +1 -1
  123. package/dist/useControllableValue.js +33 -0
  124. package/dist/useFloatingPosition.js +4 -1140
  125. package/dist/useFormControl.js +5 -29
  126. package/dist/useOverlayZIndex.js +1 -1
  127. package/dist/useRequiredInject.js +1 -1
  128. package/dist/utils/componentColors.d.ts +14 -1
  129. package/docs/public-composables-api.md +52 -0
  130. package/docs/public-styles-api.md +1 -1
  131. package/docs/public-tokens.md +648 -508
  132. package/package.json +49 -36
  133. package/src/styles/_mixins.scss +4 -0
  134. package/src/styles/_tokens.scss +460 -320
  135. package/src/styles/_variables.scss +1 -1
  136. package/src/styles/styles-manifest.json +1122 -2
  137. package/dist/button-link.css +0 -163
  138. /package/dist/{composables → internal/composables}/useOverlayLayer.d.ts +0 -0
package/dist/button-link.css DELETED
@@ -1,163 +0,0 @@
1
- @layer ropav.components {
2
- .rp-button[data-v-107a8d80] {
3
- --_rp-button-bg: var(--rp-color-default);
4
- --_rp-button-bg-hover: var(--rp-color-default-hover);
5
- --_rp-button-bg-active: var(--rp-color-disabled);
6
- --_rp-button-border: var(--rp-color-default-border);
7
- --_rp-button-border-hover: var(--_rp-button-border);
8
- --_rp-button-border-active: var(--_rp-button-border-hover);
9
- --_rp-button-fg: var(--rp-color-default-color);
10
- --_rp-button-height: var(--rp-size-control-md);
11
- --_rp-button-padding-x: 22px;
12
- --_rp-button-font-size: var(--rp-font-size-md);
13
- --_rp-button-radius: var(--rp-radius-sm);
14
- --_rp-button-shadow: var(--rp-shadow-sm);
15
- --_rp-button-shadow-hover: var(--rp-shadow-base);
16
- --_rp-button-shadow-active: var(--rp-shadow-sm);
17
- display: inline-flex;
18
- align-items: center;
19
- justify-content: center;
20
- position: relative;
21
- box-sizing: border-box;
22
- font-family: var(--rp-font-family);
23
- font-weight: var(--rp-font-weight-medium);
24
- line-height: 1;
25
- appearance: none;
26
- background-color: var(--_rp-button-bg);
27
- border: var(--rp-border-width-thin) solid var(--_rp-button-border);
28
- box-shadow: var(--_rp-button-shadow);
29
- color: var(--_rp-button-fg);
30
- cursor: pointer;
31
- text-decoration: none;
32
- transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
33
- white-space: nowrap;
34
- user-select: none;
35
- height: var(--_rp-button-height);
36
- padding: 0 var(--_rp-button-padding-x);
37
- font-size: var(--_rp-button-font-size);
38
- border-radius: var(--_rp-button-radius);
39
- }
40
- .rp-button[data-v-107a8d80]:hover:not(:disabled):not(.rp-button--disabled) {
41
- background-color: var(--_rp-button-bg-hover);
42
- border-color: var(--_rp-button-border-hover);
43
- box-shadow: var(--_rp-button-shadow-hover);
44
- }
45
- .rp-button[data-v-107a8d80]:active:not(:disabled):not(.rp-button--disabled) {
46
- background-color: var(--_rp-button-bg-active);
47
- border-color: var(--_rp-button-border-active);
48
- box-shadow: var(--_rp-button-shadow-active);
49
- transform: translateY(1px);
50
- }
51
- .rp-button--size-xs[data-v-107a8d80] {
52
- --_rp-button-height: var(--rp-size-control-xs);
53
- --_rp-button-padding-x: 14px;
54
- --_rp-button-font-size: var(--rp-font-size-xs);
55
- }
56
- .rp-button--size-sm[data-v-107a8d80] {
57
- --_rp-button-height: var(--rp-size-control-sm);
58
- --_rp-button-padding-x: 18px;
59
- --_rp-button-font-size: var(--rp-font-size-sm);
60
- }
61
- .rp-button--size-md[data-v-107a8d80] {
62
- --_rp-button-height: var(--rp-size-control-md);
63
- --_rp-button-padding-x: 22px;
64
- --_rp-button-font-size: var(--rp-font-size-md);
65
- }
66
- .rp-button--size-lg[data-v-107a8d80] {
67
- --_rp-button-height: var(--rp-size-control-lg);
68
- --_rp-button-padding-x: 26px;
69
- --_rp-button-font-size: var(--rp-font-size-lg);
70
- }
71
- .rp-button--size-xl[data-v-107a8d80] {
72
- --_rp-button-height: var(--rp-size-control-xl);
73
- --_rp-button-padding-x: 32px;
74
- --_rp-button-font-size: var(--rp-font-size-xl);
75
- }
76
- .rp-button--radius-xs[data-v-107a8d80] {
77
- --_rp-button-radius: var(--rp-radius-xs);
78
- }
79
- .rp-button--radius-sm[data-v-107a8d80] {
80
- --_rp-button-radius: var(--rp-radius-sm);
81
- }
82
- .rp-button--radius-md[data-v-107a8d80] {
83
- --_rp-button-radius: var(--rp-radius-md);
84
- }
85
- .rp-button--radius-lg[data-v-107a8d80] {
86
- --_rp-button-radius: var(--rp-radius-lg);
87
- }
88
- .rp-button--radius-xl[data-v-107a8d80] {
89
- --_rp-button-radius: var(--rp-radius-xl);
90
- }
91
- .rp-button--subtle[data-v-107a8d80] {
92
- --_rp-button-shadow: none;
93
- --_rp-button-shadow-hover: none;
94
- --_rp-button-shadow-active: none;
95
- }
96
- .rp-button--surface[data-v-107a8d80] {
97
- --_rp-button-shadow: none;
98
- --_rp-button-shadow-hover: none;
99
- --_rp-button-shadow-active: none;
100
- }
101
- .rp-button--outline[data-v-107a8d80] {
102
- --_rp-button-shadow: none;
103
- --_rp-button-shadow-hover: none;
104
- --_rp-button-shadow-active: none;
105
- }
106
- .rp-button--ghost[data-v-107a8d80] {
107
- --_rp-button-shadow: none;
108
- --_rp-button-shadow-hover: none;
109
- --_rp-button-shadow-active: none;
110
- }
111
- .rp-button--plain[data-v-107a8d80] {
112
- --_rp-button-shadow: none;
113
- --_rp-button-shadow-hover: none;
114
- --_rp-button-shadow-active: none;
115
- }
116
- .rp-button[data-v-107a8d80]:disabled, .rp-button--disabled[data-v-107a8d80] {
117
- opacity: var(--rp-opacity-disabled);
118
- cursor: not-allowed;
119
- box-shadow: none;
120
- transform: none;
121
- }
122
- .rp-button[data-v-107a8d80]:focus-visible {
123
- outline: none;
124
- border-color: var(--rp-color-control-border-focus);
125
- box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
126
- }
127
- .rp-button--loading .rp-button__content[data-v-107a8d80] {
128
- opacity: 0;
129
- }
130
- .rp-button__content[data-v-107a8d80] {
131
- display: inline-flex;
132
- align-items: center;
133
- justify-content: center;
134
- gap: var(--rp-spacing-2);
135
- }
136
- .rp-button__left[data-v-107a8d80], .rp-button__right[data-v-107a8d80] {
137
- display: inline-flex;
138
- align-items: center;
139
- flex-shrink: 0;
140
- }
141
- .rp-button__loading[data-v-107a8d80] {
142
- display: inline-flex;
143
- align-items: center;
144
- justify-content: center;
145
- position: absolute;
146
- top: 50%;
147
- left: 50%;
148
- translate: -50% -50%;
149
- }
150
- .rp-button__spinner[data-v-107a8d80] {
151
- display: block;
152
- width: 1em;
153
- height: 1em;
154
- flex-shrink: 0;
155
- transform-origin: center;
156
- animation: rp-spinner-spin-107a8d80 700ms linear infinite;
157
- }
158
- @keyframes rp-spinner-spin-107a8d80 {
159
- to {
160
- transform: rotate(360deg);
161
- }
162
- }
163
- }