@rarui/components 1.6.0 → 1.7.0

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.6.0",
   "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,76 @@
         }
       ]
     },
+    {
+      "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.",

package/dist/index.d.ts

@@ -16588,6 +16588,47 @@ declare const checkboxStyles: {
 
 type CheckboxVariants = NonNullable<RecipeVariants<typeof checkboxStyles.checkbox>>;
 
+declare const progressStyles: {
+    progress: string;
+    bar: string;
+    circle: RuntimeFn<{
+        /**
+         * Specifies the size of the progress indicator.
+         * This prop accepts one of the following values: "large" or "small".
+         * @default large
+         */
+        size: {
+            large: {
+                width: "8.75rem";
+                height: "8.75rem";
+            };
+            small: {
+                width: "5rem";
+                height: "5rem";
+            };
+        };
+    }>;
+    circleBase: string;
+    circleProgress: string;
+    circleText: string;
+};
+declare const progressColorProperties: {
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+type ProgressVariants = NonNullable<RecipeVariants<typeof progressStyles.circle>>;
+interface ProgressSprinkle {
+    /**
+     * Specifies the color of the progress.
+     * This prop accepts one of the following values: "$info", "$success" or "$brand"
+     * @default $info
+     * @examples ["$brand", { xs: "$brand", md: "$info" }]
+     */
+    color?: AddDollar<keyof typeof progressColorProperties>;
+}
+
 declare const styles$3: {
     radioButton: RuntimeFn<{
         /**
@@ -16764,6 +16805,17 @@ interface TextProps extends TextSprinkle {
     lineClamp?: number;
 }
 
+interface ProgressTyping {
+    /**
+     * The progress percentage, represented as a number between 0 and 100.
+     * This indicates the completion level of the process.
+     */
+    percentage: number;
+}
+type ProgressProps = ProgressTyping & ProgressSprinkle;
+
+type ProgressCircleProps = ProgressProps & ProgressVariants;
+
 interface ButtonTyping {
     /**
      * Disables the button, disallowing user interaction.
@@ -16932,6 +16984,49 @@ declare class RaruiTitle extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-progress-circle": RaruiProgressCircle;
+    }
+}
+/**
+ * ## Rarui Card Body
+ * ---
+ * The Card component contains textual content, images, and actions about a topic.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/card) for more details.
+ */
+type ProgressCircleProperties = Partial<ProgressCircleProps>;
+
+declare class RaruiProgressCircle extends LitElement {
+    size?: ProgressCircleProperties["size"];
+    percentage?: ProgressCircleProperties["percentage"];
+    color?: ProgressCircleProperties["color"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-progress": RaruiProgress;
+    }
+}
+/**
+ * ## Rarui Progress
+ * ---
+ * The Badge components are only used to transmit dynamic information, such as a connection or status.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.
+ */
+type ProgressProperties = Partial<ProgressProps>;
+
+declare class RaruiProgress extends LitElement {
+    percentage?: ProgressProperties["percentage"];
+    color?: ProgressProperties["color"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-button": RaruiButton;