ropav 0.0.8 → 0.0.9

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 (146) hide show
  1. package/dist/accordion.css +10 -10
  2. package/dist/accordion.js +2 -2
  3. package/dist/alert.css +109 -0
  4. package/dist/alert.js +168 -0
  5. package/dist/aspect-ratio.css +17 -0
  6. package/dist/aspect-ratio.js +26 -0
  7. package/dist/avatar.css +97 -0
  8. package/dist/avatar.js +161 -0
  9. package/dist/badge.css +40 -115
  10. package/dist/badge.js +19 -16
  11. package/dist/base.css +609 -180
  12. package/dist/button-link.css +161 -0
  13. package/dist/button-link.js +108 -0
  14. package/dist/button.css +50 -229
  15. package/dist/button.js +7 -9
  16. package/dist/card.css +12 -12
  17. package/dist/check.js +12 -0
  18. package/dist/checkbox.css +16 -57
  19. package/dist/checkbox.js +14 -31
  20. package/dist/collapse.css +2 -2
  21. package/dist/collapse.js +1 -1
  22. package/dist/color-input.css +108 -0
  23. package/dist/color-input.js +344 -0
  24. package/dist/color-picker.css +304 -0
  25. package/dist/color-picker.js +717 -0
  26. package/dist/color-picker2.js +18 -0
  27. package/dist/color-swatch.css +50 -0
  28. package/dist/color-swatch.js +73 -0
  29. package/dist/color.js +190 -0
  30. package/dist/componentColors.js +206 -13
  31. package/dist/components/alert/alert.d.ts +30 -0
  32. package/dist/components/alert/index.d.ts +3 -0
  33. package/dist/components/alert/index.js +2 -0
  34. package/dist/components/alert/types.d.ts +20 -0
  35. package/dist/components/alert/useAlertColor.d.ts +3 -0
  36. package/dist/components/aspect-ratio/aspect-ratio.d.ts +21 -0
  37. package/dist/components/aspect-ratio/index.d.ts +2 -0
  38. package/dist/components/aspect-ratio/index.js +2 -0
  39. package/dist/components/aspect-ratio/types.d.ts +3 -0
  40. package/dist/components/avatar/avatar.d.ts +24 -0
  41. package/dist/components/avatar/index.d.ts +3 -0
  42. package/dist/components/avatar/index.js +2 -0
  43. package/dist/components/avatar/types.d.ts +20 -0
  44. package/dist/components/avatar/useAvatarColor.d.ts +3 -0
  45. package/dist/components/badge/types.d.ts +2 -1
  46. package/dist/components/badge/useBadgeColor.d.ts +3 -8
  47. package/dist/components/button/types.d.ts +1 -0
  48. package/dist/components/button/useButtonColor.d.ts +3 -13
  49. package/dist/components/button-link/button-link.d.ts +27 -0
  50. package/dist/components/button-link/index.d.ts +2 -0
  51. package/dist/components/button-link/index.js +2 -0
  52. package/dist/components/button-link/types.d.ts +20 -0
  53. package/dist/components/checkbox/types.d.ts +1 -0
  54. package/dist/components/checkbox/useCheckbox.d.ts +2 -4
  55. package/dist/components/color-input/color-input.d.ts +29 -0
  56. package/dist/components/color-input/index.d.ts +2 -0
  57. package/dist/components/color-input/index.js +2 -0
  58. package/dist/components/color-input/types.d.ts +34 -0
  59. package/dist/components/color-input/useColorInput.d.ts +27 -0
  60. package/dist/components/color-input/useColorInputEyeDropper.d.ts +13 -0
  61. package/dist/components/color-input/useColorInputPopover.d.ts +11 -0
  62. package/dist/components/color-input/useColorInputValue.d.ts +8 -0
  63. package/dist/components/color-picker/color-picker-saturation.d.ts +21 -0
  64. package/dist/components/color-picker/color-picker-slider.d.ts +21 -0
  65. package/dist/components/color-picker/color-picker-utils.d.ts +23 -0
  66. package/dist/components/color-picker/color-picker.d.ts +23 -0
  67. package/dist/components/color-picker/index.d.ts +3 -0
  68. package/dist/components/color-picker/index.js +3 -0
  69. package/dist/components/color-picker/types.d.ts +39 -0
  70. package/dist/components/color-picker/useColorPickerDrag.d.ts +11 -0
  71. package/dist/components/color-picker/useColorPickerSwatches.d.ts +21 -0
  72. package/dist/components/color-picker/useColorPickerValue.d.ts +15 -0
  73. package/dist/components/color-swatch/color-swatch.d.ts +21 -0
  74. package/dist/components/color-swatch/index.d.ts +2 -0
  75. package/dist/components/color-swatch/index.js +2 -0
  76. package/dist/components/color-swatch/types.d.ts +6 -0
  77. package/dist/components/color-swatch/useColorSwatchColor.d.ts +5 -0
  78. package/dist/components/dropdown-menu/dropdown-menu.d.ts +2 -2
  79. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +1 -1
  80. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -1
  81. package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +1 -1
  82. package/dist/components/field/types.d.ts +0 -2
  83. package/dist/components/field/useField.d.ts +0 -2
  84. package/dist/components/icon-button/types.d.ts +1 -0
  85. package/dist/components/input/types.d.ts +3 -0
  86. package/dist/components/number-input/index.d.ts +2 -0
  87. package/dist/components/number-input/index.js +2 -0
  88. package/dist/components/number-input/number-input.d.ts +29 -0
  89. package/dist/components/number-input/types.d.ts +34 -0
  90. package/dist/components/number-input/useNumberInput.d.ts +31 -0
  91. package/dist/components/popover/index.d.ts +1 -0
  92. package/dist/components/popover/index.js +2 -1
  93. package/dist/components/popover/types.d.ts +2 -1
  94. package/dist/components/progress/types.d.ts +1 -1
  95. package/dist/components/radio/types.d.ts +3 -0
  96. package/dist/components/radio/useRadio.d.ts +2 -4
  97. package/dist/components/select/index.d.ts +1 -1
  98. package/dist/components/select/types.d.ts +3 -0
  99. package/dist/components/slider/index.d.ts +2 -1
  100. package/dist/components/slider/index.js +2 -2
  101. package/dist/components/slider/range-slider.d.ts +45 -0
  102. package/dist/components/slider/types.d.ts +14 -2
  103. package/dist/components/slider/useRangeSlider.d.ts +59 -0
  104. package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +7 -0
  105. package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +4 -0
  106. package/dist/components/switch/useSwitch.d.ts +2 -3
  107. package/dist/components/tooltip/types.d.ts +1 -0
  108. package/dist/dropdown-menu.css +17 -17
  109. package/dist/field.css +15 -18
  110. package/dist/field.js +17 -35
  111. package/dist/icon-button.css +57 -236
  112. package/dist/icon-button.js +5 -6
  113. package/dist/index.d.ts +8 -0
  114. package/dist/index.js +16 -4
  115. package/dist/input.css +40 -46
  116. package/dist/input.js +39 -21
  117. package/dist/minus.js +12 -0
  118. package/dist/modal.css +9 -9
  119. package/dist/modal.js +1 -1
  120. package/dist/number-input.css +86 -0
  121. package/dist/number-input.js +350 -0
  122. package/dist/overlay.css +5 -5
  123. package/dist/overlay.js +3 -3
  124. package/dist/popover.css +54 -21
  125. package/dist/popover.js +8 -5
  126. package/dist/popover2.js +17 -0
  127. package/dist/progress.css +9 -30
  128. package/dist/progress.js +3 -6
  129. package/dist/radio.css +34 -62
  130. package/dist/radio.js +28 -16
  131. package/dist/select.css +105 -61
  132. package/dist/select.js +12 -8
  133. package/dist/slider.css +508 -41
  134. package/dist/slider.js +1122 -48
  135. package/dist/switch.css +19 -44
  136. package/dist/switch.js +4 -5
  137. package/dist/tabs.css +36 -36
  138. package/dist/tabs.js +1 -1
  139. package/dist/textarea.css +33 -25
  140. package/dist/tooltip.css +7 -35
  141. package/dist/tooltip.js +13 -8
  142. package/dist/useButtonColor.js +16 -14
  143. package/package.json +40 -8
  144. package/src/styles/_mixins.scss +25 -41
  145. package/src/styles/_tokens.scss +615 -182
  146. package/src/styles/_variables.scss +177 -49
@@ -0,0 +1,18 @@
1
+ //#region src/components/color-picker/types.ts
2
+ var colorPickerFormats = [
3
+ "hex",
4
+ "hexa",
5
+ "rgb",
6
+ "rgba",
7
+ "hsl",
8
+ "hsla"
9
+ ];
10
+ var colorPickerSizes = [
11
+ "xs",
12
+ "sm",
13
+ "md",
14
+ "lg",
15
+ "xl"
16
+ ];
17
+ //#endregion
18
+ export { colorPickerSizes as n, colorPickerFormats as t };
@@ -0,0 +1,50 @@
1
+ .rp-color-swatch[data-v-b0899989] {
2
+ --_rp-color-swatch-size: 24px;
3
+ --_rp-color-swatch-radius: var(--rp-radius-sm);
4
+ --_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-3);
5
+ --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-white);
6
+ --_rp-color-swatch-checkerboard: conic-gradient(
7
+ var(--_rp-color-swatch-checkerboard-tile) 25%,
8
+ var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
9
+ var(--_rp-color-swatch-checkerboard-tile) 0 75%,
10
+ var(--_rp-color-swatch-checkerboard-tile-alt) 0
11
+ );
12
+ --_rp-color-swatch-checkerboard-size: calc(var(--_rp-color-swatch-size) / 2)
13
+ calc(var(--_rp-color-swatch-size) / 2);
14
+ --_rp-color-swatch-overlay-stroke: rgb(0 0 0 / 10%);
15
+ --_rp-color-swatch-overlay-shadow: rgb(0 0 0 / 15%);
16
+ display: inline-flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ box-sizing: border-box;
20
+ width: var(--_rp-color-swatch-size);
21
+ height: var(--_rp-color-swatch-size);
22
+ flex-shrink: 0;
23
+ background: linear-gradient(var(--_rp-color-swatch-color), var(--_rp-color-swatch-color)), var(--_rp-color-swatch-checkerboard);
24
+ background-size: auto, var(--_rp-color-swatch-checkerboard-size);
25
+ border: 0;
26
+ border-radius: var(--_rp-color-swatch-radius);
27
+ box-shadow: var(--_rp-color-swatch-overlay-stroke) 0 0 0 0.0625rem inset, var(--_rp-color-swatch-overlay-shadow) 0 0 0.25rem inset;
28
+ color: var(--_rp-color-swatch-fg);
29
+ line-height: 1;
30
+ overflow: hidden;
31
+ vertical-align: middle;
32
+ }
33
+ html.dark .rp-color-swatch[data-v-b0899989], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-b0899989] {
34
+ --_rp-color-swatch-checkerboard-tile: var(--rp-color-dark-6);
35
+ --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-dark-4);
36
+ }
37
+ .rp-color-swatch__icon[data-v-b0899989] {
38
+ display: inline-flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ width: 70%;
42
+ height: 70%;
43
+ color: inherit;
44
+ pointer-events: none;
45
+ }
46
+ .rp-color-swatch__icon[data-v-b0899989] svg {
47
+ display: block;
48
+ width: 100%;
49
+ height: 100%;
50
+ }
@@ -0,0 +1,73 @@
1
+ import './color-swatch.css';
2
+ import { t as parseCssColor } from "./color.js";
3
+ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
4
+ import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref, useAttrs } from "vue";
5
+ //#region src/components/color-swatch/useColorSwatchColor.ts
6
+ function getColorSwatchForeground(color) {
7
+ const background = parseCssColor(color);
8
+ if (!background) return "var(--rp-color-white)";
9
+ return getPerceivedBrightness(background) >= 186 ? "var(--rp-color-black)" : "var(--rp-color-white)";
10
+ }
11
+ function getColorSwatchOverlay(color) {
12
+ const background = parseCssColor(color);
13
+ if (!background || getPerceivedBrightness(background) >= 80) return {
14
+ stroke: "rgb(0 0 0 / 10%)",
15
+ shadow: "rgb(0 0 0 / 15%)"
16
+ };
17
+ return {
18
+ stroke: "rgb(255 255 255 / 18%)",
19
+ shadow: "rgb(255 255 255 / 10%)"
20
+ };
21
+ }
22
+ function getPerceivedBrightness({ red, green, blue }) {
23
+ return (red * 299 + green * 587 + blue * 114) / 1e3;
24
+ }
25
+ //#endregion
26
+ //#region src/components/color-swatch/color-swatch.vue?vue&type=script&setup=true&vapor=true&lang.ts
27
+ var t0 = template("<span data-v-b0899989><span data-v-b0899989 class=rp-color-swatch__icon aria-hidden=true>", 1);
28
+ //#endregion
29
+ //#region src/components/color-swatch/color-swatch.vue
30
+ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
31
+ name: "RpColorSwatch",
32
+ inheritAttrs: false,
33
+ __name: "color-swatch",
34
+ props: {
35
+ color: {},
36
+ size: {},
37
+ ariaLabel: {}
38
+ },
39
+ setup(__props) {
40
+ const props = __props;
41
+ const attrs = useAttrs();
42
+ const isHidden = computed(() => attrs["aria-hidden"] === true || attrs["aria-hidden"] === "true");
43
+ const rootRole = computed(() => isHidden.value ? void 0 : "img");
44
+ const rootAriaLabel = computed(() => isHidden.value ? void 0 : props.ariaLabel || `Color swatch ${props.color}`);
45
+ const rootStyle = computed(() => {
46
+ const overlay = getColorSwatchOverlay(props.color);
47
+ const style = {
48
+ "--_rp-color-swatch-color": props.color,
49
+ "--_rp-color-swatch-fg": getColorSwatchForeground(props.color),
50
+ "--_rp-color-swatch-overlay-stroke": overlay.stroke,
51
+ "--_rp-color-swatch-overlay-shadow": overlay.shadow
52
+ };
53
+ if (props.size !== void 0) style["--_rp-color-swatch-size"] = normalizeSize(props.size);
54
+ return style;
55
+ });
56
+ function normalizeSize(size) {
57
+ return typeof size === "number" ? `${size}px` : size;
58
+ }
59
+ const n2 = t0();
60
+ const n1 = child(n2);
61
+ renderEffect(() => setDynamicProps(n2, [unref(attrs), {
62
+ class: "rp-color-swatch",
63
+ style: rootStyle.value,
64
+ role: rootRole.value,
65
+ "aria-label": rootAriaLabel.value
66
+ }]));
67
+ setInsertionState(n1, null, 0);
68
+ createSlot("default", null, null, 1);
69
+ return n2;
70
+ }
71
+ }), [["__scopeId", "data-v-b0899989"]]);
72
+ //#endregion
73
+ export { color_swatch_default as t };
package/dist/color.js ADDED
@@ -0,0 +1,190 @@
1
+ //#region src/utils/color.ts
2
+ var DEFAULT_OPACITY = 100;
3
+ var NUMBER_SOURCE = String.raw`[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?`;
4
+ var NUMBER_PATTERN = new RegExp(`^${NUMBER_SOURCE}$`, "i");
5
+ var HUE_PATTERN = new RegExp(`^(${NUMBER_SOURCE})(deg|grad|rad|turn)?$`, "i");
6
+ function parseCssColor(value) {
7
+ const color = value.trim().toLowerCase();
8
+ if (color === "black") return {
9
+ red: 0,
10
+ green: 0,
11
+ blue: 0,
12
+ opacity: DEFAULT_OPACITY
13
+ };
14
+ if (color === "white") return {
15
+ red: 255,
16
+ green: 255,
17
+ blue: 255,
18
+ opacity: DEFAULT_OPACITY
19
+ };
20
+ if (color === "transparent") return {
21
+ red: 0,
22
+ green: 0,
23
+ blue: 0,
24
+ opacity: 0
25
+ };
26
+ return parseHexColor(color) ?? parseRgbColor(color) ?? parseHslColor(color);
27
+ }
28
+ function parseHexColor(color) {
29
+ const hex = color.match(/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i)?.[1];
30
+ if (!hex) return void 0;
31
+ if (hex.length === 3 || hex.length === 4) return {
32
+ red: Number.parseInt(hex[0] + hex[0], 16),
33
+ green: Number.parseInt(hex[1] + hex[1], 16),
34
+ blue: Number.parseInt(hex[2] + hex[2], 16),
35
+ opacity: hex.length === 4 ? roundPercent(Number.parseInt(hex[3] + hex[3], 16) / 255 * 100) : DEFAULT_OPACITY
36
+ };
37
+ return {
38
+ red: Number.parseInt(hex.slice(0, 2), 16),
39
+ green: Number.parseInt(hex.slice(2, 4), 16),
40
+ blue: Number.parseInt(hex.slice(4, 6), 16),
41
+ opacity: hex.length === 8 ? roundPercent(Number.parseInt(hex.slice(6, 8), 16) / 255 * 100) : DEFAULT_OPACITY
42
+ };
43
+ }
44
+ function parseRgbColor(color) {
45
+ const body = color.match(/^rgba?\((.*)\)$/i)?.[1];
46
+ if (body == null) return void 0;
47
+ const parsed = parseFunctionChannels(body);
48
+ if (!parsed) return void 0;
49
+ if (parsed.legacy) {
50
+ const percentageChannels = parsed.channels.filter((channel) => channel.endsWith("%"));
51
+ if (percentageChannels.length !== 0 && percentageChannels.length !== parsed.channels.length) return;
52
+ }
53
+ const [red, green, blue] = parsed.channels.map(parseRgbChannel);
54
+ const opacity = parseAlpha(parsed.alpha);
55
+ if (red == null || green == null || blue == null || opacity == null) return void 0;
56
+ return {
57
+ red,
58
+ green,
59
+ blue,
60
+ opacity
61
+ };
62
+ }
63
+ function parseHslColor(color) {
64
+ const body = color.match(/^hsla?\((.*)\)$/i)?.[1];
65
+ if (body == null) return void 0;
66
+ const parsed = parseFunctionChannels(body);
67
+ if (!parsed) return void 0;
68
+ const hue = parseHue(parsed.channels[0]);
69
+ const saturation = parsePercentage(parsed.channels[1]);
70
+ const lightness = parsePercentage(parsed.channels[2]);
71
+ const opacity = parseAlpha(parsed.alpha);
72
+ if (hue == null || saturation == null || lightness == null || opacity == null) return;
73
+ return hslToRgb(hue, saturation, lightness, opacity);
74
+ }
75
+ function parseFunctionChannels(body) {
76
+ const value = body.trim();
77
+ if (!value) return void 0;
78
+ if (value.includes(",")) {
79
+ if (value.includes("/")) return void 0;
80
+ const parts = value.split(",").map((part) => part.trim());
81
+ if (parts.length !== 3 && parts.length !== 4 || parts.some((part) => !part)) return;
82
+ return {
83
+ channels: [
84
+ parts[0],
85
+ parts[1],
86
+ parts[2]
87
+ ],
88
+ alpha: parts[3],
89
+ legacy: true
90
+ };
91
+ }
92
+ const slashParts = value.split("/");
93
+ if (slashParts.length > 2) return void 0;
94
+ const channels = slashParts[0].trim().split(/\s+/).filter(Boolean);
95
+ const alpha = slashParts[1]?.trim();
96
+ if (channels.length !== 3 || slashParts.length === 2 && !alpha) return void 0;
97
+ return {
98
+ channels: [
99
+ channels[0],
100
+ channels[1],
101
+ channels[2]
102
+ ],
103
+ alpha,
104
+ legacy: false
105
+ };
106
+ }
107
+ function parseRgbChannel(channel) {
108
+ const percentage = parsePercentage(channel);
109
+ if (percentage != null) return clamp(Math.round(percentage / 100 * 255), 0, 255);
110
+ const number = parseNumber(channel);
111
+ return number == null ? void 0 : clamp(Math.round(number), 0, 255);
112
+ }
113
+ function parseHue(channel) {
114
+ const match = channel.trim().match(HUE_PATTERN);
115
+ if (!match) return void 0;
116
+ const value = Number(match[1]);
117
+ if (!Number.isFinite(value)) return void 0;
118
+ switch (match[2]) {
119
+ case "grad": return value * .9;
120
+ case "rad": return value * 180 / Math.PI;
121
+ case "turn": return value * 360;
122
+ default: return value;
123
+ }
124
+ }
125
+ function parsePercentage(channel) {
126
+ const value = channel.trim();
127
+ if (!value.endsWith("%")) return void 0;
128
+ const number = parseNumber(value.slice(0, -1));
129
+ return number == null ? void 0 : clamp(number, 0, 100);
130
+ }
131
+ function parseAlpha(alpha) {
132
+ if (alpha === void 0) return DEFAULT_OPACITY;
133
+ const percentage = parsePercentage(alpha);
134
+ if (percentage != null) return roundPercent(percentage);
135
+ const number = parseNumber(alpha);
136
+ return number == null ? void 0 : roundPercent(clamp(number, 0, 1) * 100);
137
+ }
138
+ function parseNumber(value) {
139
+ const token = value.trim();
140
+ if (!NUMBER_PATTERN.test(token)) return void 0;
141
+ const number = Number(token);
142
+ return Number.isFinite(number) ? number : void 0;
143
+ }
144
+ function hslToRgb(hue, saturation, lightness, opacity) {
145
+ const h = normalizeHue(hue);
146
+ const s = clamp(saturation, 0, 100) / 100;
147
+ const l = clamp(lightness, 0, 100) / 100;
148
+ const c = (1 - Math.abs(2 * l - 1)) * s;
149
+ const x = c * (1 - Math.abs(h / 60 % 2 - 1));
150
+ const m = l - c / 2;
151
+ let red = 0;
152
+ let green = 0;
153
+ let blue = 0;
154
+ if (h < 60) {
155
+ red = c;
156
+ green = x;
157
+ } else if (h < 120) {
158
+ red = x;
159
+ green = c;
160
+ } else if (h < 180) {
161
+ green = c;
162
+ blue = x;
163
+ } else if (h < 240) {
164
+ green = x;
165
+ blue = c;
166
+ } else if (h < 300) {
167
+ red = x;
168
+ blue = c;
169
+ } else {
170
+ red = c;
171
+ blue = x;
172
+ }
173
+ return {
174
+ red: Math.round((red + m) * 255),
175
+ green: Math.round((green + m) * 255),
176
+ blue: Math.round((blue + m) * 255),
177
+ opacity
178
+ };
179
+ }
180
+ function normalizeHue(value) {
181
+ return (value % 360 + 360) % 360;
182
+ }
183
+ function roundPercent(value) {
184
+ return Math.round(value * 100) / 100;
185
+ }
186
+ function clamp(value, min, max) {
187
+ return Math.min(max, Math.max(min, value));
188
+ }
189
+ //#endregion
190
+ export { parseCssColor as t };
@@ -1,20 +1,213 @@
1
+ import { t as parseCssColor } from "./color.js";
1
2
  //#region src/utils/componentColors.ts
2
3
  var componentColors = [
3
- "primary",
4
- "secondary",
5
- "success",
6
- "warning",
7
- "danger",
8
- "info",
9
- "neutral"
4
+ "dark",
5
+ "gray",
6
+ "red",
7
+ "pink",
8
+ "grape",
9
+ "violet",
10
+ "indigo",
11
+ "blue",
12
+ "cyan",
13
+ "teal",
14
+ "green",
15
+ "lime",
16
+ "yellow",
17
+ "orange"
18
+ ];
19
+ var componentColorShades = [
20
+ "0",
21
+ "1",
22
+ "2",
23
+ "3",
24
+ "4",
25
+ "5",
26
+ "6",
27
+ "7",
28
+ "8",
29
+ "9"
10
30
  ];
11
31
  var componentColorNames = new Set(componentColors);
12
- function isComponentPresetColor(color) {
13
- return Boolean(color && componentColorNames.has(color));
32
+ var componentColorShadeNames = new Set(componentColorShades);
33
+ function parseComponentColor(color) {
34
+ if (!color) return { kind: "empty" };
35
+ if (color === "primary") return { kind: "primary" };
36
+ if (componentColorNames.has(color)) return {
37
+ kind: "preset",
38
+ color
39
+ };
40
+ const shadeMatch = color.match(/^([a-z]+)\.(\d+)$/);
41
+ if (shadeMatch && componentColorNames.has(shadeMatch[1])) return componentColorShadeNames.has(shadeMatch[2]) ? {
42
+ kind: "shade",
43
+ color: shadeMatch[1],
44
+ shade: shadeMatch[2]
45
+ } : {
46
+ kind: "invalid",
47
+ value: color
48
+ };
49
+ return {
50
+ kind: "custom",
51
+ value: color
52
+ };
53
+ }
54
+ function getComponentColorValue(color) {
55
+ const parsed = parseComponentColor(color);
56
+ if (parsed.kind === "primary") return "var(--rp-primary-color-filled)";
57
+ if (parsed.kind === "preset") return `var(--rp-color-${parsed.color}-filled)`;
58
+ if (parsed.kind === "shade") return `var(--rp-color-${parsed.color}-${parsed.shade})`;
59
+ if (parsed.kind === "custom") return parsed.value;
60
+ }
61
+ function getComponentContrastColor(color, options = {}) {
62
+ if (!options.autoContrast) return "var(--rp-color-white)";
63
+ const parsed = parseComponentColor(color);
64
+ if (parsed.kind === "primary") return "var(--rp-primary-color-contrast)";
65
+ if (parsed.kind === "preset") return `var(--rp-color-${parsed.color}-contrast)`;
66
+ if (parsed.kind === "shade") return `var(--rp-color-${parsed.color}-${parsed.shade}-contrast)`;
67
+ if (parsed.kind === "custom") return getReadableColorVariable(parsed.value);
68
+ return "var(--rp-color-white)";
69
+ }
70
+ function getComponentColorRoles(color) {
71
+ const parsed = parseComponentColor(color);
72
+ if (parsed.kind === "empty" || parsed.kind === "invalid") return;
73
+ if (parsed.kind === "primary") return createComponentColorRoles("var(--rp-primary-color-filled)", {
74
+ hover: "var(--rp-primary-color-filled-hover)",
75
+ contrast: "var(--rp-primary-color-contrast)",
76
+ light: "var(--rp-primary-color-light)",
77
+ lightHover: "var(--rp-primary-color-light-hover)",
78
+ outline: "var(--rp-primary-color-outline)",
79
+ outlineHover: "color-mix(in srgb, var(--rp-primary-color-outline) 62%, transparent)",
80
+ foreground: "var(--rp-primary-color-light-color)"
81
+ });
82
+ if (parsed.kind === "preset") return createComponentColorRoles(`var(--rp-color-${parsed.color}-filled)`, {
83
+ hover: `var(--rp-color-${parsed.color}-filled-hover)`,
84
+ contrast: `var(--rp-color-${parsed.color}-contrast)`,
85
+ light: `var(--rp-color-${parsed.color}-light)`,
86
+ lightHover: `var(--rp-color-${parsed.color}-light-hover)`,
87
+ outline: `var(--rp-color-${parsed.color}-outline)`,
88
+ outlineHover: `color-mix(in srgb, var(--rp-color-${parsed.color}-outline) 62%, transparent)`,
89
+ foreground: `var(--rp-color-${parsed.color}-light-color)`
90
+ });
91
+ if (parsed.kind === "shade") {
92
+ const base = `var(--rp-color-${parsed.color}-${parsed.shade})`;
93
+ return createComponentColorRoles(base, {
94
+ hover: `var(--rp-color-${parsed.color}-${Math.min(Number(parsed.shade) + 1, 9)})`,
95
+ contrast: `var(--rp-color-${parsed.color}-${parsed.shade}-contrast)`,
96
+ foreground: base
97
+ });
98
+ }
99
+ return createComponentColorRoles(parsed.value, { contrast: getReadableColorVariable(parsed.value) });
100
+ }
101
+ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast }) {
102
+ const roles = getComponentColorRoles(color ?? defaultColor);
103
+ if (!roles) return void 0;
104
+ const contrast = getComponentContrastColor(color ?? defaultColor, { autoContrast });
105
+ if (variant === "solid") return {
106
+ background: roles.filled,
107
+ hover: roles.hover,
108
+ active: roles.active,
109
+ color: contrast,
110
+ border: roles.filled,
111
+ borderHover: roles.hover,
112
+ borderActive: roles.active
113
+ };
114
+ if (variant === "subtle") return {
115
+ background: roles.light,
116
+ hover: roles.lightHover,
117
+ active: roles.lightActive,
118
+ color: roles.foreground,
119
+ border: "transparent",
120
+ borderHover: "transparent",
121
+ borderActive: "transparent"
122
+ };
123
+ if (variant === "surface") return {
124
+ background: roles.light,
125
+ hover: roles.lightHover,
126
+ active: roles.lightActive,
127
+ color: roles.foreground,
128
+ border: roles.outline,
129
+ borderHover: roles.lightHover,
130
+ borderActive: roles.outlineHover
131
+ };
132
+ if (variant === "outline") return {
133
+ background: "transparent",
134
+ hover: roles.lightHover,
135
+ active: roles.lightActive,
136
+ color: roles.foreground,
137
+ border: roles.outline,
138
+ borderHover: roles.outlineHover,
139
+ borderActive: roles.outlineHover
140
+ };
141
+ if (variant === "ghost") return {
142
+ background: "transparent",
143
+ hover: roles.lightHover,
144
+ active: roles.lightActive,
145
+ color: roles.foreground,
146
+ border: "transparent",
147
+ borderHover: "transparent",
148
+ borderActive: "transparent"
149
+ };
150
+ if (variant === "plain") return {
151
+ background: "transparent",
152
+ hover: "transparent",
153
+ active: "transparent",
154
+ color: roles.foreground,
155
+ border: "transparent",
156
+ borderHover: "transparent",
157
+ borderActive: "transparent"
158
+ };
159
+ return {
160
+ background: "var(--rp-color-default)",
161
+ hover: roles.lightHover,
162
+ active: roles.lightActive,
163
+ color: roles.foreground,
164
+ border: roles.outline,
165
+ borderHover: roles.outlineHover,
166
+ borderActive: roles.outlineHover
167
+ };
168
+ }
169
+ function createComponentColorRoles(color, overrides = {}) {
170
+ return {
171
+ filled: color,
172
+ hover: `color-mix(in srgb, ${color} 90%, var(--rp-color-black))`,
173
+ active: `color-mix(in srgb, ${color} 80%, var(--rp-color-black))`,
174
+ contrast: "var(--rp-color-white)",
175
+ light: `color-mix(in srgb, ${color} 12%, transparent)`,
176
+ lightHover: `color-mix(in srgb, ${color} 18%, transparent)`,
177
+ lightActive: `color-mix(in srgb, ${color} 24%, transparent)`,
178
+ outline: color,
179
+ outlineHover: `color-mix(in srgb, ${color} 62%, transparent)`,
180
+ foreground: color,
181
+ ...overrides
182
+ };
183
+ }
184
+ function getReadableColorVariable(color) {
185
+ const parsed = parseCssColor(color);
186
+ if (!parsed) return "var(--rp-color-white)";
187
+ return contrastRatio({
188
+ red: 0,
189
+ green: 0,
190
+ blue: 0
191
+ }, parsed) >= contrastRatio({
192
+ red: 255,
193
+ green: 255,
194
+ blue: 255
195
+ }, parsed) ? "var(--rp-color-black)" : "var(--rp-color-white)";
196
+ }
197
+ function contrastRatio(foreground, background) {
198
+ const foregroundLuminance = relativeLuminance(foreground);
199
+ const backgroundLuminance = relativeLuminance(background);
200
+ const lighter = Math.max(foregroundLuminance, backgroundLuminance);
201
+ const darker = Math.min(foregroundLuminance, backgroundLuminance);
202
+ return (lighter + .05) / (darker + .05);
14
203
  }
15
- function getComponentCustomColor(color) {
16
- if (!color || isComponentPresetColor(color)) return void 0;
17
- return color;
204
+ function relativeLuminance(color) {
205
+ const [red, green, blue] = [
206
+ color.red,
207
+ color.green,
208
+ color.blue
209
+ ].map((channel) => channel / 255).map((channel) => channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4);
210
+ return .2126 * red + .7152 * green + .0722 * blue;
18
211
  }
19
212
  //#endregion
20
- export { getComponentCustomColor as n, isComponentPresetColor as r, componentColors as t };
213
+ export { getComponentVariantColorRoles as i, getComponentColorValue as n, getComponentContrastColor as r, componentColors as t };
@@ -0,0 +1,30 @@
1
+ import { AlertProps } from './types';
2
+ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
+ props: import('vue').PublicProps & __VLS_PrettifyLocal<AlertProps & {
4
+ "onUpdate:open"?: ((value: boolean) => any) | undefined;
5
+ onClose?: (() => any) | undefined;
6
+ }> & (typeof globalThis extends {
7
+ __VLS_PROPS_FALLBACK: infer P;
8
+ } ? P : {});
9
+ expose: (exposed: {}) => void;
10
+ attrs: any;
11
+ slots: {
12
+ icon?: (props: {}) => any;
13
+ } & {
14
+ title?: (props: {}) => any;
15
+ } & {
16
+ default?: (props: {}) => any;
17
+ } & {
18
+ action?: (props: {}) => any;
19
+ };
20
+ emit: ((evt: "update:open", value: boolean) => void) & ((evt: "close") => void);
21
+ }>) => import('vue').VNode & {
22
+ __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
23
+ };
24
+ declare const _default: typeof __VLS_export;
25
+ export default _default;
26
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
27
+ [K in keyof T]: T[K];
28
+ } : {
29
+ [K in keyof T as K]: T[K];
30
+ }) & {};
@@ -0,0 +1,3 @@
1
+ export { default as Alert } from './alert';
2
+ export { alertColors, alertRadiuses, alertVariants } from './types';
3
+ export type { AlertColor, AlertProps, AlertRadius, AlertRole, AlertVariant } from './types';
@@ -0,0 +1,2 @@
1
+ import { i as alert_default, n as alertRadiuses, r as alertVariants, t as alertColors } from "../../alert.js";
2
+ export { alert_default as Alert, alertColors, alertRadiuses, alertVariants };
@@ -0,0 +1,20 @@
1
+ import { ComponentColorValue } from '../../utils/componentColors';
2
+ export declare const alertColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
3
+ export declare const alertVariants: readonly ["subtle", "surface", "outline", "solid"];
4
+ export declare const alertRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl"];
5
+ export type AlertColor = ComponentColorValue;
6
+ export type AlertVariant = (typeof alertVariants)[number];
7
+ export type AlertRadius = (typeof alertRadiuses)[number];
8
+ export type AlertRole = 'alert' | 'status' | 'none';
9
+ export interface AlertProps {
10
+ open?: boolean;
11
+ title?: string;
12
+ description?: string;
13
+ variant?: AlertVariant;
14
+ color?: AlertColor;
15
+ autoContrast?: boolean;
16
+ radius?: AlertRadius;
17
+ role?: AlertRole;
18
+ closable?: boolean;
19
+ closeLabel?: string;
20
+ }
@@ -0,0 +1,3 @@
1
+ import { CSSProperties } from 'vue';
2
+ import { AlertColor, AlertVariant } from './types';
3
+ export declare function getAlertColorStyle(color: AlertColor | undefined, variant: AlertVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;
@@ -0,0 +1,21 @@
1
+ import { AspectRatioProps } from './types';
2
+ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
+ props: import('vue').PublicProps & __VLS_PrettifyLocal<AspectRatioProps> & (typeof globalThis extends {
4
+ __VLS_PROPS_FALLBACK: infer P;
5
+ } ? P : {});
6
+ expose: (exposed: {}) => void;
7
+ attrs: any;
8
+ slots: {
9
+ default?: (props: {}) => any;
10
+ };
11
+ emit: {};
12
+ }>) => import('vue').VNode & {
13
+ __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
14
+ };
15
+ declare const _default: typeof __VLS_export;
16
+ export default _default;
17
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
18
+ [K in keyof T]: T[K];
19
+ } : {
20
+ [K in keyof T as K]: T[K];
21
+ }) & {};
@@ -0,0 +1,2 @@
1
+ export { default as AspectRatio } from './aspect-ratio';
2
+ export type { AspectRatioProps } from './types';
@@ -0,0 +1,2 @@
1
+ import { t as aspect_ratio_default } from "../../aspect-ratio.js";
2
+ export { aspect_ratio_default as AspectRatio };
@@ -0,0 +1,3 @@
1
+ export interface AspectRatioProps {
2
+ ratio?: number;
3
+ }