@rarui/components 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-06-26 `1.14.0`
+
+#### 🎉 New features
+
+- Added new exhibition `Label` component. ([#122](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/122) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new input `Toggle` component. ([#122](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/122) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-06-23 `1.13.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.12.0",
+  "version": "1.13.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -1355,6 +1355,23 @@
         }
       ]
     },
+    {
+      "name": "rarui-label",
+      "description": "## Rarui Label\n---\nThe label component allows us to name elements within a form.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/label) for more details.",
+      "attributes": [
+        {
+          "name": "html-for",
+          "description": "The for attribute specifies which form element a label is bound to.",
+          "type": "string"
+        },
+        {
+          "name": "hidden",
+          "default": false,
+          "description": "Specifies whether the label is hidden or not",
+          "type": "boolean"
+        }
+      ]
+    },
     {
       "name": "rarui-stepper",
       "description": "## Rarui Stepper\n---\nStepper transmit progress through steps.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.",
@@ -2832,6 +2849,59 @@
         }
       ]
     },
+    {
+      "name": "rarui-toggle",
+      "description": "## Rarui Toggle\n---\nToggle switches activate or deactivate the state of a single item.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/toggle) for more details.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the input element.",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "Sets toggle state to activated or deactivated.",
+          "type": "boolean"
+        },
+        {
+          "name": "label",
+          "description": "Text to be rendered inside the component",
+          "type": "string"
+        },
+        {
+          "name": "size",
+          "default": "large",
+          "description": "Specifies the size of the toggle, controlling its dimensions.\n\n- large\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "error",
+          "default": false,
+          "description": "Specifies whether the radiobutton is in error state",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Defines if Toggle is disabled.\nWhen `true`, the component cannot be interacted.",
+          "type": "boolean"
+        },
+        {
+          "name": "id",
+          "description": "Single ID associated with Toggle Input.If not provided,\nThe name will be used as Fallback to `id`.",
+          "type": "string"
+        }
+      ]
+    },
     {
       "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

@@ -16793,6 +16793,29 @@ declare const iconButtonStyles: {
 
 type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
 
+declare const styles$5: {
+    label: RuntimeFn<{
+        /**
+         * Specifies whether the label is hidden or not
+         * @default false
+         */
+        hidden: {
+            true: {
+                border: "0";
+                clip: "rect(0 0 0 0)";
+                height: "1px";
+                margin: "-1px";
+                overflow: "hidden";
+                padding: "0";
+                position: "absolute";
+                width: "1px";
+            };
+        };
+    }>;
+};
+
+type LabelVariants = RecipeVariants<typeof styles$5.label>;
+
 declare const styles$4: {
     link: RuntimeFn<{
         /**
@@ -17111,6 +17134,117 @@ declare const textareaStyles: {
 
 type TextareaVariants = NonNullable<RecipeVariants<typeof textareaStyles.textarea>>;
 
+declare const styles$1: {
+    toggle: RuntimeFn<{
+        /**
+         * Specifies the size of the toggle, controlling its dimensions.
+         * @default large
+         */
+        size: {
+            large: {
+                ":before": {
+                    width: "1.5rem";
+                    height: "1.5rem";
+                };
+                ":after": {
+                    top: "-.3125rem";
+                    left: "-.3125rem";
+                    height: "2.75rem";
+                    width: "2.75rem";
+                };
+            };
+            small: {
+                ":before": {
+                    width: "1rem";
+                    height: "1rem";
+                };
+                ":after": {
+                    top: "-.4375rem";
+                    left: "-.5rem";
+                    height: "2.5rem";
+                    width: "2.5rem";
+                };
+            };
+        };
+        /**
+         * Specifies whether the radiobutton is in error state
+         * @default false
+         */
+        error: {
+            true: {
+                ":before": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                selectors: {
+                    "&:has(input:checked):before": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    };
+                };
+            };
+        };
+    }>;
+    input: string;
+    slider: RuntimeFn<{
+        size: {
+            large: {
+                width: "3.25rem";
+                height: "2rem";
+                ":after": {
+                    content: "";
+                };
+            };
+            small: {
+                width: "2.75rem";
+                height: "1.5rem";
+            };
+        };
+        error: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                "&[aria-disabled='true']": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    }>;
+    unchecked: RuntimeFn<{
+        size: {
+            large: {
+                left: "1rem";
+                height: "1.5rem";
+                width: "1.5rem";
+                borderRadius: "0.75rem";
+            };
+            small: {
+                left: "0.75rem";
+                width: "1rem";
+                height: "1rem";
+                borderRadius: "0.5rem";
+            };
+        };
+    }>;
+    checked: RuntimeFn<{
+        size: {
+            large: {
+                left: "2.25rem";
+                height: "1.5rem";
+                width: "1.5rem";
+                borderRadius: "0.75rem";
+            };
+            small: {
+                left: "2rem";
+                width: "1rem";
+                height: "1rem";
+                borderRadius: "0.5rem";
+            };
+        };
+    }>;
+};
+
+type ToggleVariants = RecipeVariants<typeof styles$1.toggle>;
+
 declare const styles: {
     tooltip: RuntimeFn<{
         /**
@@ -17321,6 +17455,14 @@ interface TextProps extends TextSprinkle {
     lineClamp?: number;
 }
 
+interface LabelTyping {
+    /**
+     * The for attribute specifies which form element a label is bound to.
+     */
+    htmlFor?: string;
+}
+type LabelProps = LabelTyping & LabelVariants;
+
 interface TooltipTyping {
     /**
      * Conditional for displaying the popover arrow.
@@ -17460,6 +17602,22 @@ interface TextareaProps extends TextareaVariants {
     lines?: number;
 }
 
+interface ToggleTyping {
+    /**
+     * The name of the input element.
+     */
+    name: string;
+    /**
+     * Sets toggle state to activated or deactivated.
+     */
+    selected?: boolean;
+    /**
+     * Text to be rendered inside the component
+     */
+    label?: string;
+}
+type ToggleProps = ToggleTyping & ToggleVariants;
+
 interface BannerTyping {
     /**
      * A function to be called when the user closes the banner. This function is typically used to handle the closing action.
@@ -17595,6 +17753,27 @@ declare class RaruiIcon extends LitElement {
     render(): TemplateResult<1> | null;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-label": RaruiLabel;
+    }
+}
+/**
+ * ## Rarui Label
+ * ---
+ * The label component allows us to name elements within a form.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/label) for more details.
+ */
+type LabelProperties = Partial<LabelProps>;
+
+declare class RaruiLabel extends LitElement {
+    htmlFor: LabelProperties["htmlFor"];
+    hidden: boolean;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-stepper-step": RaruiStepperStep;
@@ -18019,6 +18198,44 @@ declare class RaruiTextarea extends LitElement {
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-toggle": RaruiToggle;
+    }
+}
+/**
+ * ## Rarui Toggle
+ * ---
+ * Toggle switches activate or deactivate the state of a single item.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/toggle) for more details.
+ */
+type ToggleProperties = Partial<ToggleProps> & {
+    /**
+     * Defines if Toggle is disabled.
+     * When `true`, the component cannot be interacted.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Single ID associated with Toggle Input.If not provided,
+     * The name will be used as Fallback to `id`.
+     */
+    id?: string;
+};
+
+declare class RaruiToggle extends LitElement {
+    name: ToggleProperties["name"];
+    label: ToggleProperties["label"];
+    size?: ToggleProperties["size"];
+    error: ToggleProperties["error"];
+    selected?: ToggleProperties["selected"];
+    disabled?: ToggleProperties["disabled"];
+    static styles: CSSResult;
+    private handleChange;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-link": RaruiLink;