@rarui/components 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 `@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/113) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-05-28 `1.5.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.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.",
@@ -1072,6 +1324,79 @@
         }
       ]
     },
+    {
+      "name": "rarui-radio-button",
+      "description": "## Rarui Radio Button\n---\nRadio Button allows users to select one option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from a set of choices.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/radiobutton) for more details.",
+      "attributes": [
+        {
+          "name": "selected",
+          "description": "Sets radio state to activated or deactivated.",
+          "type": "boolean"
+        },
+        {
+          "name": "label",
+          "description": "Text to be rendered inside the component.",
+          "type": "string"
+        },
+        {
+          "name": "size",
+          "description": "Specifies the size of the radiobutton\n\n- large\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "error",
+          "description": "Specifies whether the radiobutton is in error state",
+          "type": "boolean"
+        },
+        {
+          "name": "id",
+          "description": "Defines a unique identifier (ID) which must be unique in the whole document.\nIts purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the radio button, disallowing user interaction.",
+          "type": "boolean"
+        }
+      ]
+    },
+    {
+      "name": "rarui-textarea",
+      "description": "## Rarui Radio Button\n---\nExpanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/textarea) for more details.",
+      "attributes": [
+        {
+          "name": "lines",
+          "description": "Number of lines to be rendered for the user to input text",
+          "type": "number"
+        },
+        {
+          "name": "appearance",
+          "description": "Determines the visual style of the textarea, affecting its border\n\n- error\n- success",
+          "type": "string",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the Textarea, disallowing user interaction.",
+          "type": "boolean"
+        }
+      ]
+    },
     {
       "name": "rarui-box",
       "description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/layout/box) for more details.",

package/dist/index.d.ts

@@ -16588,6 +16588,150 @@ 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<{
+        /**
+         * Specifies the size of the radiobutton
+         */
+        size: {
+            small: {
+                width: "1.25rem";
+                height: "1.25rem";
+                ":before": {
+                    width: "2rem";
+                    height: "2rem";
+                };
+                ":after": {
+                    width: ".5rem";
+                    height: ".5rem";
+                };
+            };
+            large: {
+                width: "1.5rem";
+                height: "1.5rem";
+                ":before": {
+                    width: "2.75rem";
+                    height: "2.75rem";
+                };
+                ":after": {
+                    width: ".75rem";
+                    height: ".75rem";
+                };
+            };
+        };
+        /**
+         * Specifies whether the radiobutton is in error state
+         */
+        error: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                selectors: {
+                    "&:has(input:disabled)": {
+                        opacity: "50%";
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:has(input:checked)": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:has(input:checked):after": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:hover:before": {
+                        opacity: number;
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:active:before": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        };
+    }>;
+    input: string;
+    container: string;
+};
+
+type RadioButtonVariants = NonNullable<RecipeVariants<typeof styles$3.radioButton>>;
+
+declare const textareaStyles: {
+    textarea: RuntimeFn<{
+        /**
+         * Determines the visual style of the textarea, affecting its border
+         */
+        appearance: {
+            success: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":disabled": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            error: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":disabled": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+};
+
+type TextareaVariants = NonNullable<RecipeVariants<typeof textareaStyles.textarea>>;
+
 declare const cardStyles: {
     card: RuntimeFn<{
         /**
@@ -16661,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.
@@ -16682,6 +16837,26 @@ interface CheckboxTyping {
 }
 type CheckboxProps = CheckboxTyping & CheckboxVariants;
 
+interface RadioButtonTyping {
+    /**
+     * Sets radio state to activated or deactivated.
+     */
+    selected?: boolean;
+    /**
+     * Text to be rendered inside the component.
+     */
+    label?: string;
+}
+type RadioButtonProps = RadioButtonTyping & RadioButtonVariants;
+
+interface TextareaProps extends TextareaVariants {
+    /**
+     * Number of lines to be rendered for the user to input text
+     * @default 2
+     */
+    lines?: number;
+}
+
 type CardProps = CardVariants & CardSprinkle;
 
 interface CardHeaderProps {
@@ -16809,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;
@@ -16858,6 +17076,74 @@ declare class RaruiCheckbox extends LitElement {
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-radio-button": RaruiRadioButton;
+    }
+}
+/**
+ * ## Rarui Radio Button
+ * ---
+ * Radio Button allows users to select one option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from a set of choices.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/radiobutton) for more details.
+ */
+type RadioButtonProperties = Partial<RadioButtonProps> & {
+    /**
+     * Defines a unique identifier (ID) which must be unique in the whole document.
+     * Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
+     */
+    id?: string;
+    /**
+     * Disables the radio button, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare class RaruiRadioButton extends LitElement {
+    id: string;
+    disabled: boolean;
+    name?: string;
+    label?: RadioButtonProperties["label"];
+    size?: RadioButtonProperties["size"];
+    error?: RadioButtonProperties["error"];
+    selected?: RadioButtonProperties["selected"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+    private _onChange;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-textarea": RaruiTextarea;
+    }
+}
+/**
+ * ## Rarui Radio Button
+ * ---
+ * Expanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/textarea) for more details.
+ */
+type TextareaProperties = Partial<TextareaProps> & {
+    /**
+     * Disables the Textarea, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare class RaruiTextarea extends LitElement {
+    disabled: boolean;
+    value?: string;
+    appearance?: TextareaProperties["appearance"];
+    lines?: TextareaProperties["lines"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+    private _onChange;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-card-header": RaruiCardHeader;