@rarui/components 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2024-08-28 `1.18.0`
+
+#### 🎉 New features
+
+- Added new stylization `ThemeProvider` component. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new input `Input` component. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
+- Adding `verticalAlign` and `whiteSpace` property to the component `Box`.
+
+#### 🐛 Bug fixes
+
+- Fixed `Button` component width issue by adjusting host display styles. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-07-03 `1.17.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.16.0",
+  "version": "1.17.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -2990,6 +2990,199 @@
         }
       ]
     },
+    {
+      "name": "rarui-input",
+      "description": "## Rarui Input\n---\nInput component allows users to enter and edit text.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/input) for more details.",
+      "attributes": [
+        {
+          "name": "appearance",
+          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
+          "type": "string",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            }
+          ]
+        },
+        {
+          "name": "border",
+          "default": true,
+          "description": "Determines if the input have borders or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "size",
+          "default": "medium",
+          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "divider",
+          "default": true,
+          "description": "Places a divider between the input and the leading components",
+          "type": "boolean"
+        },
+        {
+          "name": "value",
+          "description": "The value of the input element.",
+          "type": "string"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text for the input element.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Whether the input is disabled.",
+          "type": "boolean"
+        }
+      ]
+    },
+    {
+      "name": "rarui-input-password",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value of the password input element.",
+          "type": "string"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text for the password input element.",
+          "type": "string"
+        },
+        {
+          "name": "appearance",
+          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
+          "type": "string",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            }
+          ]
+        },
+        {
+          "name": "border",
+          "default": true,
+          "description": "Determines if the input have borders or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "size",
+          "default": "medium",
+          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "divider",
+          "default": true,
+          "description": "Places a divider between the input and the leading components",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Whether the input is disabled.",
+          "type": "boolean"
+        }
+      ]
+    },
+    {
+      "name": "rarui-input-search",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value of the search input element.",
+          "type": "string"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text for the search input element.",
+          "type": "string"
+        },
+        {
+          "name": "appearance",
+          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
+          "type": "string",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            }
+          ]
+        },
+        {
+          "name": "border",
+          "default": true,
+          "description": "Determines if the input have borders or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "size",
+          "default": "medium",
+          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "divider",
+          "default": true,
+          "description": "Places a divider between the input and the leading components",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Whether the input is disabled.",
+          "type": "boolean"
+        }
+      ]
+    },
     {
       "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-web-components/input/radiobutton) for more details.",
@@ -5860,6 +6053,60 @@
           "description": "The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n\n**Initial value**: `1.0`",
           "values": []
         },
+        {
+          "name": "vertical-align",
+          "description": "The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.\n\n\n**Initial value**: `baseline`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"bottom\",\n  \"lg\": \"middle\",\n  \"xl\": \"sub\"\n}\n```\n\n- baseline\n- bottom\n- middle\n- sub\n- super\n- text-bottom\n- text-top\n- top",
+          "values": [
+            {
+              "name": "baseline"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "middle"
+            },
+            {
+              "name": "sub"
+            },
+            {
+              "name": "super"
+            },
+            {
+              "name": "text-bottom"
+            },
+            {
+              "name": "text-top"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "white-space",
+          "description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-spaces\",\n  \"md\": \"normal\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
+          "values": [
+            {
+              "name": "break-spaces"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "nowrap"
+            },
+            {
+              "name": "pre"
+            },
+            {
+              "name": "pre-line"
+            },
+            {
+              "name": "pre-wrap"
+            }
+          ]
+        },
         {
           "name": "border-width-x",
           "description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$1\",\n  \"md\": \"$2\",\n  \"lg\": \"$3\",\n  \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
@@ -7080,6 +7327,27 @@
         }
       ]
     },
+    {
+      "name": "rarui-theme-provider",
+      "description": "## Rarui ThemeProvider\n---\nThemeProvider component provides global theme management for the application.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/stylization/theme-provider) for more details.",
+      "attributes": [
+        {
+          "name": "theme",
+          "default": "base",
+          "description": "Theme to apply globally to the application.\n\n- base\n- dark",
+          "type": "string",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "dark"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-banner",
       "description": "## Rarui Banner\n---\nBanner messages are displayed to the user at the top of the window/screen.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/banner) for more details.",

package/dist/index.d.ts

@@ -16804,6 +16804,130 @@ declare const iconButtonStyles: {
 
 type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
 
+declare const styles$6: {
+    container: RuntimeFn<{
+        /**
+         * Determines the visual style of the input, affecting its border
+         */
+        appearance: {
+            success: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+            error: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        /**
+         * Determines if the input have borders or not.
+         * @default true
+         */
+        border: {
+            true: {
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            false: {
+                borderWidth: number;
+            };
+        };
+        size: {
+            large: {
+                height: "3rem";
+            };
+            medium: {
+                height: "2.5rem";
+            };
+            small: {
+                height: "2rem";
+            };
+        };
+    }>;
+    input: RuntimeFn<{
+        /**
+         * Places a divider between the input and the leading components
+         * @default true
+         */
+        divider: {
+            false: {};
+        };
+        /**
+         * Specifies the size of the input, controlling its dimensions.
+         * @default medium
+         */
+        size: {
+            large: {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            medium: {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    leading: RuntimeFn<{
+        position: {
+            start: {
+                borderRightWidth: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            end: {
+                borderLeftWidth: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        divider: {
+            true: {
+                borderStyle: "solid";
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            false: {
+                borderRightWidth: number;
+                borderLeftWidth: number;
+            };
+        };
+        appearance: {
+            success: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            error: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        size: {
+            large: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+            };
+            medium: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+            };
+            small: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+            };
+        };
+    }>;
+};
+
+type InputVariants = NonNullable<RecipeVariants<typeof styles$6.container> & RecipeVariants<typeof styles$6.input>>;
+
 declare const styles$5: {
     label: RuntimeFn<{
         /**
@@ -17701,6 +17825,8 @@ interface ChipTyping extends ChipSprinkle {
 }
 type ChipProps = ChipTyping & ChipVariants;
 
+type InputProps = InputVariants;
+
 interface DropdownTyping {
     /**
      * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
@@ -18452,6 +18578,51 @@ declare class RaruiIconButton extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-input": RaruiInput;
+    }
+}
+/**
+ * ## Rarui Input
+ * ---
+ * Input component allows users to enter and edit text.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/input) for more details.
+ */
+type InputProperties = Partial<InputProps> & {
+    /**
+     * The value of the input element.
+     */
+    value?: string;
+    /**
+     * Placeholder text for the input element.
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare class RaruiInput extends LitElement {
+    size: InputProperties["size"];
+    appearance?: InputProperties["appearance"];
+    border: InputProperties["border"];
+    divider: InputProperties["divider"];
+    disabled: InputProperties["disabled"];
+    value: string;
+    placeholder?: string;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+    private _focusInput;
+    private _onInput;
+    private _onChange;
+    private _onFocus;
+    private _onBlur;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-radio-button": RaruiRadioButton;
@@ -18762,3 +18933,22 @@ declare class RaruiModalHeader extends LitElement {
     private handleClose;
     render(): TemplateResult<1>;
 }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-theme-provider": RaruiThemeProvider;
+    }
+}
+type Theme = "dark" | "base";
+
+declare class RaruiThemeProvider extends LitElement {
+    theme: Theme;
+    private previousTheme?;
+    protected createRenderRoot(): this;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private applyTheme;
+    render(): TemplateResult<1>;
+}