@rarui/components 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 `@rarui/components` components is a component library built with [Stencil](https://stenciljs.com/docs/introduction).
 
+## 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))
+
 ## 2025-05-28 `1.5.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "1.5.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -1072,6 +1072,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,109 @@ declare const checkboxStyles: {
 
 type CheckboxVariants = NonNullable<RecipeVariants<typeof checkboxStyles.checkbox>>;
 
+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<{
         /**
@@ -16682,6 +16785,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 {
@@ -16858,6 +16981,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;