@rarui/components 1.7.0 → 1.8.0

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/custom-elements.json +182 -8
  3. package/dist/index.d.ts +189 -6
  4. package/dist/index.js +129 -85
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  `@rarui/components` components is a component library built with [Stencil](https://stenciljs.com/docs/introduction).
4
4
 
5
+ ## 2025-06-10 `1.8.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Added new exhibition `Tooltip` component. ([#115](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/115) by [@junior](https://git.rarolabs.com.br/junior))
10
+
5
11
  ## 2025-06-02 `1.7.0`
6
12
 
7
13
  #### 🎉 New features
package/custom-elements.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.6.0",
2
+ "version": "1.8.0-rc.1",
3
3
  "tags": [
4
4
  {
5
5
  "name": "rarui-avatar",
@@ -7,6 +7,7 @@
7
7
  "attributes": [
8
8
  {
9
9
  "name": "size",
10
+ "default": "medium",
10
11
  "description": "Specifies the size of the Avatar component.\n\n- large\n- medium\n- small\n- xLarge",
11
12
  "type": "string",
12
13
  "values": [
@@ -33,6 +34,7 @@
33
34
  "attributes": [
34
35
  {
35
36
  "name": "appearance",
37
+ "default": "brand",
36
38
  "description": "Determines the visual style of the badge, influencing its color scheme and appearance.\n\n- brand\n- danger\n- info\n- inverted\n- neutral\n- success\n- warning",
37
39
  "type": "string",
38
40
  "values": [
@@ -62,6 +64,7 @@
62
64
  },
63
65
  {
64
66
  "name": "size",
67
+ "default": "medium",
65
68
  "description": "Specifies the size of the badge, controlling its dimensions.\n\n- dot\n- large\n- medium\n- small",
66
69
  "type": "string",
67
70
  "values": [
@@ -72,7 +75,8 @@
72
75
  "name": "large"
73
76
  },
74
77
  {
75
- "name": "medium"
78
+ "name": "medium",
79
+ "description": "(default)"
76
80
  },
77
81
  {
78
82
  "name": "small"
@@ -81,6 +85,7 @@
81
85
  },
82
86
  {
83
87
  "name": "variant",
88
+ "default": "solid",
84
89
  "description": "Defines the visual variant of the badge, affecting its background style.\n\n- outlined\n- solid",
85
90
  "type": "string",
86
91
  "values": [
@@ -88,7 +93,8 @@
88
93
  "name": "outlined"
89
94
  },
90
95
  {
91
- "name": "solid"
96
+ "name": "solid",
97
+ "description": "(default)"
92
98
  }
93
99
  ]
94
100
  }
@@ -100,11 +106,13 @@
100
106
  "attributes": [
101
107
  {
102
108
  "name": "direction",
109
+ "default": "horizontal",
103
110
  "description": "The direction of the Divider.\n\n- horizontal\n- vertical",
104
111
  "type": "string",
105
112
  "values": [
106
113
  {
107
- "name": "horizontal"
114
+ "name": "horizontal",
115
+ "description": "(default)"
108
116
  },
109
117
  {
110
118
  "name": "vertical"
@@ -113,11 +121,13 @@
113
121
  },
114
122
  {
115
123
  "name": "size",
124
+ "default": "100%",
116
125
  "description": "The **`size`** CSS property sets an element's area.",
117
126
  "values": []
118
127
  },
119
128
  {
120
129
  "name": "type",
130
+ "default": "solid",
121
131
  "description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$dashed\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$dashed\",\n\"md\": \"$solid\",\n\"lg\": \"$dashed\",\n\"xl\": \"$solid\"\n}\n```\n\n- $dashed\n- $solid",
122
132
  "values": [
123
133
  {
@@ -130,10 +140,12 @@
130
140
  },
131
141
  {
132
142
  "name": "thickness",
143
+ "default": "$1",
133
144
  "description": "The **`thickness`** shorthand CSS property sets the width of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$1\",\n\"xl\": \"$2\"\n}\n```\n\n- $1\n- $2",
134
145
  "values": [
135
146
  {
136
- "name": "$1"
147
+ "name": "$1",
148
+ "description": "(default)"
137
149
  },
138
150
  {
139
151
  "name": "$2"
@@ -142,6 +154,7 @@
142
154
  },
143
155
  {
144
156
  "name": "color",
157
+ "default": "$divider",
145
158
  "description": "The **`color`** CSS property sets an element's color.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$brand\",\n\"md\": \"$brand-alt\",\n\"lg\": \"$disabled\",\n\"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
146
159
  "values": [
147
160
  {
@@ -154,7 +167,8 @@
154
167
  "name": "$disabled"
155
168
  },
156
169
  {
157
- "name": "$divider"
170
+ "name": "$divider",
171
+ "description": "(default)"
158
172
  },
159
173
  {
160
174
  "name": "$error"
@@ -441,6 +455,7 @@
441
455
  },
442
456
  {
443
457
  "name": "font-weight",
458
+ "default": "$regular",
444
459
  "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bold\",\n\"md\": \"$medium\",\n\"lg\": \"$regular\",\n\"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
445
460
  "values": [
446
461
  {
@@ -720,6 +735,7 @@
720
735
  "attributes": [
721
736
  {
722
737
  "name": "as",
738
+ "default": "h1",
723
739
  "description": "Type of html tag to create for the title.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6",
724
740
  "type": "string",
725
741
  "values": [
@@ -809,6 +825,7 @@
809
825
  },
810
826
  {
811
827
  "name": "font-weight",
828
+ "default": "$regular",
812
829
  "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bold\",\n\"md\": \"$medium\",\n\"lg\": \"$regular\",\n\"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
813
830
  "values": [
814
831
  {
@@ -975,6 +992,129 @@
975
992
  }
976
993
  ]
977
994
  },
995
+ {
996
+ "name": "rarui-tooltip",
997
+ "description": "## Rarui Tootip\n---\nTooltips are informative, specific, and action-oriented text labels that provide contextual support\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/tooltip) for more details.",
998
+ "attributes": [
999
+ {
1000
+ "name": "inverted",
1001
+ "default": false,
1002
+ "description": "Specifies whether the color scheme should be inverted",
1003
+ "type": "boolean"
1004
+ },
1005
+ {
1006
+ "name": "padding",
1007
+ "default": "base",
1008
+ "description": "Specifies the padding for the tooltip\n\n- base\n- none",
1009
+ "type": "string",
1010
+ "values": [
1011
+ {
1012
+ "name": "base",
1013
+ "description": "(default)"
1014
+ },
1015
+ {
1016
+ "name": "none"
1017
+ }
1018
+ ]
1019
+ },
1020
+ {
1021
+ "name": "arrow",
1022
+ "default": true,
1023
+ "description": "Conditional for displaying the popover arrow.",
1024
+ "type": "boolean"
1025
+ },
1026
+ {
1027
+ "name": "match-reference-width",
1028
+ "default": false,
1029
+ "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
1030
+ "type": "boolean"
1031
+ },
1032
+ {
1033
+ "name": "enabled-hover",
1034
+ "default": false,
1035
+ "description": "Adds hover event listeners that change the open state, like CSS :hover.",
1036
+ "type": "boolean"
1037
+ },
1038
+ {
1039
+ "name": "enabled-click",
1040
+ "default": true,
1041
+ "description": "Adds click event listeners that change the open state.",
1042
+ "type": "boolean"
1043
+ },
1044
+ {
1045
+ "name": "enabled-dismiss",
1046
+ "default": true,
1047
+ "description": "Adds listeners that dismiss (close) the floating element.",
1048
+ "type": "boolean"
1049
+ },
1050
+ {
1051
+ "name": "offset",
1052
+ "default": 10,
1053
+ "description": "Offest displaces the floating element from its core placement along the specified axes.",
1054
+ "type": "number"
1055
+ },
1056
+ {
1057
+ "name": "position",
1058
+ "default": "bottom",
1059
+ "description": "Position of the popover.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
1060
+ "type": "string",
1061
+ "values": [
1062
+ {
1063
+ "name": "bottom",
1064
+ "description": "(default)"
1065
+ },
1066
+ {
1067
+ "name": "bottom-end"
1068
+ },
1069
+ {
1070
+ "name": "bottom-start"
1071
+ },
1072
+ {
1073
+ "name": "left"
1074
+ },
1075
+ {
1076
+ "name": "left-end"
1077
+ },
1078
+ {
1079
+ "name": "left-start"
1080
+ },
1081
+ {
1082
+ "name": "right"
1083
+ },
1084
+ {
1085
+ "name": "right-end"
1086
+ },
1087
+ {
1088
+ "name": "right-start"
1089
+ },
1090
+ {
1091
+ "name": "top"
1092
+ },
1093
+ {
1094
+ "name": "top-end"
1095
+ },
1096
+ {
1097
+ "name": "top-start"
1098
+ }
1099
+ ]
1100
+ },
1101
+ {
1102
+ "name": "strategy",
1103
+ "default": "fixed",
1104
+ "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed",
1105
+ "type": "string",
1106
+ "values": [
1107
+ {
1108
+ "name": "absolute"
1109
+ },
1110
+ {
1111
+ "name": "fixed",
1112
+ "description": "(default)"
1113
+ }
1114
+ ]
1115
+ }
1116
+ ]
1117
+ },
978
1118
  {
979
1119
  "name": "rarui-progress",
980
1120
  "description": "## Rarui Progress\n---\nThe Badge components are only used to transmit dynamic information, such as a connection or status.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.",
@@ -986,6 +1126,7 @@
986
1126
  },
987
1127
  {
988
1128
  "name": "color",
1129
+ "default": "$info",
989
1130
  "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success",
990
1131
  "type": "string",
991
1132
  "values": [
@@ -1014,6 +1155,7 @@
1014
1155
  },
1015
1156
  {
1016
1157
  "name": "color",
1158
+ "default": "$info",
1017
1159
  "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success",
1018
1160
  "type": "string",
1019
1161
  "values": [
@@ -1031,6 +1173,7 @@
1031
1173
  },
1032
1174
  {
1033
1175
  "name": "size",
1176
+ "default": "large",
1034
1177
  "description": "Specifies the size of the progress indicator.\nThis prop accepts one of the following values: \"large\" or \"small\".\n\n- large\n- small",
1035
1178
  "type": "string",
1036
1179
  "values": [
@@ -1214,6 +1357,7 @@
1214
1357
  "attributes": [
1215
1358
  {
1216
1359
  "name": "disabled",
1360
+ "default": false,
1217
1361
  "description": "Disables the button, disallowing user interaction.",
1218
1362
  "type": "boolean"
1219
1363
  },
@@ -1224,11 +1368,13 @@
1224
1368
  },
1225
1369
  {
1226
1370
  "name": "appearance",
1371
+ "default": "brand",
1227
1372
  "description": "Defines the appearance variants for the button component.\nEach appearance variant corresponds to a specific background color, border color, and text color.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning",
1228
1373
  "type": "string",
1229
1374
  "values": [
1230
1375
  {
1231
- "name": "brand"
1376
+ "name": "brand",
1377
+ "description": "(default)"
1232
1378
  },
1233
1379
  {
1234
1380
  "name": "danger"
@@ -1249,6 +1395,7 @@
1249
1395
  },
1250
1396
  {
1251
1397
  "name": "size",
1398
+ "default": "large",
1252
1399
  "description": "Defines the size of the button component.\n\n- large\n- medium\n- small",
1253
1400
  "type": "string",
1254
1401
  "values": [
@@ -1266,6 +1413,7 @@
1266
1413
  },
1267
1414
  {
1268
1415
  "name": "variant",
1416
+ "default": "solid",
1269
1417
  "description": "Defines the visual variant of the badge, affecting its background style, border and text.\n\n- outlined\n- solid\n- text\n- tonal",
1270
1418
  "type": "string",
1271
1419
  "values": [
@@ -1273,7 +1421,8 @@
1273
1421
  "name": "outlined"
1274
1422
  },
1275
1423
  {
1276
- "name": "solid"
1424
+ "name": "solid",
1425
+ "description": "(default)"
1277
1426
  },
1278
1427
  {
1279
1428
  "name": "text"
@@ -1282,6 +1431,24 @@
1282
1431
  "name": "tonal"
1283
1432
  }
1284
1433
  ]
1434
+ },
1435
+ {
1436
+ "name": "type",
1437
+ "default": "button",
1438
+ "description": "Defines the native button type.\nCan be 'button', 'submit', or 'reset'.\n\n- button\n- reset\n- submit",
1439
+ "type": "string",
1440
+ "values": [
1441
+ {
1442
+ "name": "button",
1443
+ "description": "(default)"
1444
+ },
1445
+ {
1446
+ "name": "reset"
1447
+ },
1448
+ {
1449
+ "name": "submit"
1450
+ }
1451
+ ]
1285
1452
  }
1286
1453
  ]
1287
1454
  },
@@ -1363,6 +1530,7 @@
1363
1530
  },
1364
1531
  {
1365
1532
  "name": "disabled",
1533
+ "default": false,
1366
1534
  "description": "Disables the radio button, disallowing user interaction.",
1367
1535
  "type": "boolean"
1368
1536
  }
@@ -1374,6 +1542,7 @@
1374
1542
  "attributes": [
1375
1543
  {
1376
1544
  "name": "lines",
1545
+ "default": 2,
1377
1546
  "description": "Number of lines to be rendered for the user to input text",
1378
1547
  "type": "number"
1379
1548
  },
@@ -1392,6 +1561,7 @@
1392
1561
  },
1393
1562
  {
1394
1563
  "name": "disabled",
1564
+ "default": false,
1395
1565
  "description": "Disables the Textarea, disallowing user interaction.",
1396
1566
  "type": "boolean"
1397
1567
  }
@@ -2777,6 +2947,7 @@
2777
2947
  },
2778
2948
  {
2779
2949
  "name": "line-height",
2950
+ "default": "base",
2780
2951
  "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$body-l\",\n\"md\": \"$body-m\",\n\"lg\": \"$body-s\",\n\"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
2781
2952
  "values": [
2782
2953
  {
@@ -5207,6 +5378,7 @@
5207
5378
  },
5208
5379
  {
5209
5380
  "name": "position",
5381
+ "default": "left",
5210
5382
  "description": "Controls where the tab buttons are displayed. This prop accepts one of the following values: \"left\", \"center\", or \"right\".\n\n- center\n- left\n- right",
5211
5383
  "type": "string",
5212
5384
  "values": [
@@ -5235,6 +5407,7 @@
5235
5407
  "attributes": [
5236
5408
  {
5237
5409
  "name": "padding",
5410
+ "default": "base",
5238
5411
  "description": "Specifies the padding inside the card.\nThis prop accepts one of the following values: \"none\" or \"base\".\n\n- base\n- none",
5239
5412
  "type": "string",
5240
5413
  "values": [
@@ -5249,6 +5422,7 @@
5249
5422
  },
5250
5423
  {
5251
5424
  "name": "background-color",
5425
+ "default": "$primary",
5252
5426
  "description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$background\",\n\"md\": \"$primary\",\n\"lg\": \"$secondary\",\n\"xl\": \"$transparent\"\n}\n```\n\n- $background\n- $primary\n- $secondary\n- $transparent",
5253
5427
  "values": [
5254
5428
  {