@rarui/components 1.6.0 → 1.8.0-rc.1

package/CHANGELOG.md

@@ -2,12 +2,19 @@
 
 `@rarui/components` components is a component library built with [Stencil](https://stenciljs.com/docs/introduction).
 
+## 2025-06-02 `1.7.0`
+
+#### 🎉 New features
+
+- Added new exhibition `Icon` component. ([#114](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/114) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new feedback `Progress` component. ([#114](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/114) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-05-29 `1.6.0`
 
 #### 🎉 New features
 
 - Added new input `RadioButton` component. ([#113](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/113) by [@junior](https://git.rarolabs.com.br/junior))
-- Added new input `Textarea` component. ([#113](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/112) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new input `Textarea` component. ([#113](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/113) by [@junior](https://git.rarolabs.com.br/junior))
 
 ## 2025-05-28 `1.5.0`
 

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.8.0-rc.1",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -190,6 +190,188 @@
         }
       ]
     },
+    {
+      "name": "rarui-icon",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color property sets the icon.\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\": \"$currentColor\",\n\"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
+          "values": [
+            {
+              "name": "$brand"
+            },
+            {
+              "name": "$brand-alt"
+            },
+            {
+              "name": "$currentColor"
+            },
+            {
+              "name": "$disabled"
+            },
+            {
+              "name": "$error"
+            },
+            {
+              "name": "$info"
+            },
+            {
+              "name": "$invert"
+            },
+            {
+              "name": "$invert-disabled"
+            },
+            {
+              "name": "$invert-secondary"
+            },
+            {
+              "name": "$on-brand"
+            },
+            {
+              "name": "$on-error"
+            },
+            {
+              "name": "$on-info"
+            },
+            {
+              "name": "$on-success"
+            },
+            {
+              "name": "$on-warning"
+            },
+            {
+              "name": "$primary"
+            },
+            {
+              "name": "$secondary"
+            },
+            {
+              "name": "$success"
+            },
+            {
+              "name": "$warning"
+            },
+            {
+              "name": "$warning-alt"
+            }
+          ]
+        },
+        {
+          "name": "cursor",
+          "description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"alias\",\n\"md\": \"all-scroll\",\n\"lg\": \"auto\",\n\"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
+          "values": [
+            {
+              "name": "alias"
+            },
+            {
+              "name": "all-scroll"
+            },
+            {
+              "name": "auto"
+            },
+            {
+              "name": "cell"
+            },
+            {
+              "name": "col-resize"
+            },
+            {
+              "name": "context-menu"
+            },
+            {
+              "name": "copy"
+            },
+            {
+              "name": "crosshair"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "e-resize"
+            },
+            {
+              "name": "ew-resize"
+            },
+            {
+              "name": "grab"
+            },
+            {
+              "name": "grabbing"
+            },
+            {
+              "name": "help"
+            },
+            {
+              "name": "move"
+            },
+            {
+              "name": "n-resize"
+            },
+            {
+              "name": "ne-resize"
+            },
+            {
+              "name": "nesw-resize"
+            },
+            {
+              "name": "no-drop"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "not-allowed"
+            },
+            {
+              "name": "ns-resize"
+            },
+            {
+              "name": "nw-resize"
+            },
+            {
+              "name": "nwse-resize"
+            },
+            {
+              "name": "pointer"
+            },
+            {
+              "name": "progress"
+            },
+            {
+              "name": "row-resize"
+            },
+            {
+              "name": "s-resize"
+            },
+            {
+              "name": "se-resize"
+            },
+            {
+              "name": "sw-resize"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "vertical-text"
+            },
+            {
+              "name": "w-resize"
+            },
+            {
+              "name": "wait"
+            },
+            {
+              "name": "zoom-in"
+            },
+            {
+              "name": "zoom-out"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-text",
       "description": "## Rarui Text\n---\nText is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.",
@@ -793,6 +975,203 @@
         }
       ]
     },
+    {
+      "name": "rarui-tooltip",
+      "description": "## Rarui Tooltip\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.",
+      "attributes": [
+        {
+          "name": "arrow",
+          "description": "Conditional for displaying the popover arrow.",
+          "type": "boolean"
+        },
+        {
+          "name": "match-reference-width",
+          "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-hover",
+          "description": "Adds hover event listeners that change the open state, like CSS :hover.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-click",
+          "description": "Adds click event listeners that change the open state.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-dismiss",
+          "description": "Adds listeners that dismiss (close) the floating element.",
+          "type": "boolean"
+        },
+        {
+          "name": "offset",
+          "description": "Offest displaces the floating element from its core placement along the specified axes.",
+          "type": "number"
+        },
+        {
+          "name": "portal-id",
+          "description": "Specifies the ID of the portal element where the tooltip should be rendered.\nThis can be useful for rendering the tooltip in a different part of the DOM, such as a modal or overlay.",
+          "type": "string"
+        },
+        {
+          "name": "visible",
+          "description": "If true, the component is shown.",
+          "type": "boolean"
+        },
+        {
+          "name": "on-visibility",
+          "description": "Function to control popover opening and closing.",
+          "type": "(visible: boolean) => void;"
+        },
+        {
+          "name": "inverted",
+          "description": "Specifies whether the color scheme should be inverted",
+          "type": "boolean"
+        },
+        {
+          "name": "padding",
+          "description": "Specifies the padding for the tooltip\n\n- base\n- none",
+          "type": "string",
+          "values": [
+            {
+              "name": "base"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "position",
+          "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",
+          "type": "string",
+          "values": [
+            {
+              "name": "bottom",
+              "description": "(default)"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "strategy",
+          "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",
+          "type": "string",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-progress",
+      "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.",
+      "attributes": [
+        {
+          "name": "percentage",
+          "description": "The progress percentage, represented as a number between 0 and 100.\nThis indicates the completion level of the process.",
+          "type": "number"
+        },
+        {
+          "name": "color",
+          "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",
+          "type": "string",
+          "values": [
+            {
+              "name": "$brand"
+            },
+            {
+              "name": "$info",
+              "description": "(default)"
+            },
+            {
+              "name": "$success"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-progress-circle",
+      "description": "## Rarui Card Body\n---\nThe Card component contains textual content, images, and actions about a topic.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/card) for more details.",
+      "attributes": [
+        {
+          "name": "percentage",
+          "description": "The progress percentage, represented as a number between 0 and 100.\nThis indicates the completion level of the process.",
+          "type": "number"
+        },
+        {
+          "name": "color",
+          "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",
+          "type": "string",
+          "values": [
+            {
+              "name": "$brand"
+            },
+            {
+              "name": "$info",
+              "description": "(default)"
+            },
+            {
+              "name": "$success"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Specifies the size of the progress indicator.\nThis prop accepts one of the following values: \"large\" or \"small\".\n\n- large\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-skeleton",
       "description": "## Rarui Divider\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.",
@@ -1030,6 +1409,22 @@
               "name": "tonal"
             }
           ]
+        },
+        {
+          "name": "type",
+          "description": "Defines the native button type.\nCan be 'button', 'submit', or 'reset'.\n\n- button\n- reset\n- submit",
+          "type": "string",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
         }
       ]
     },