@rarui/components 1.17.0 → 1.19.0

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<{
         /**
@@ -17452,6 +17576,81 @@ declare const paginationStyles: {
 
 type PaginationVariants = Omit<NonNullable<RecipeVariants<typeof paginationStyles.item>>, "selected">;
 
+declare const sideNavigationStyles: {
+    sideNavigation: RuntimeFn<{
+        active: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                ":after": {
+                    content: "";
+                    position: "absolute";
+                    left: number;
+                    right: number;
+                    top: number;
+                    bottom: number;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":disabled": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    cursor: "not-allowed";
+                };
+            };
+        };
+    }>;
+    item: RuntimeFn<{
+        /**
+         * Determines the level of nesting for the item.
+         */
+        level: {
+            0: {
+                paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            1: {
+                paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            2: {
+                paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    name: RuntimeFn<{
+        active: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        disabled: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    description: RuntimeFn<{
+        disabled: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    content: RuntimeFn<{
+        open: {
+            true: {
+                overflow: "visible";
+                maxHeight: "unset";
+                marginTop: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+};
+
+type SideNavigationVariants = NonNullable<RecipeVariants<typeof sideNavigationStyles.sideNavigation> & RecipeVariants<typeof sideNavigationStyles.item>>;
+
 declare const stepperStyles: {
     stepper: RuntimeFn<{
         /**
@@ -17701,6 +17900,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.
@@ -17887,6 +18088,26 @@ interface PaginationTyping {
 }
 type PaginationProps = PaginationTyping & PaginationVariants;
 
+interface SideNavigationTyping {
+    /**
+     * Title of the sideNavigation
+     */
+    name: string;
+    /**
+     * Description of the sideNavigation.
+     */
+    description?: string;
+}
+type SideNavigationProps = SideNavigationTyping & SideNavigationVariants;
+
+interface SideNavigationItemTypings {
+    /**
+     * Determines if the item is active or not.
+     */
+    active?: boolean;
+}
+type SideNavigationItemProps = SideNavigationItemTypings & Pick<SideNavigationVariants, "level">;
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-avatar": RaruiAvatar;
@@ -18452,6 +18673,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;
@@ -18635,6 +18901,88 @@ declare class RaruiPagination extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-side-navigation": RaruiSideNavigation;
+    }
+}
+/**
+ * ## Rarui SideNavigation
+ * ---
+ * A navigation component that supports collapsible content with nested items.
+ *
+ * ### Slots
+ * - **Default slot**: Content for nested navigation items
+ * - **leading-start**: Content to display at the start (e.g., icons)
+ * - **leading-end**: Content to display at the end (e.g., custom icons)
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.
+ */
+type SideNavigationProperties = Partial<SideNavigationProps> & {
+    /**
+     * Whether the navigation item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the navigation item is in active state.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * The HTML element type to render.
+     * @default "button"
+     */
+    as?: "button" | "a";
+};
+
+declare class RaruiSideNavigation extends LitElement {
+    name: SideNavigationProperties["name"];
+    description: SideNavigationProperties["description"];
+    active: SideNavigationProperties["active"];
+    disabled: SideNavigationProperties["disabled"];
+    as: SideNavigationProperties["as"];
+    private _open;
+    private _buttonRef;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    private _handleToggle;
+    private _hasChildItems;
+    private _renderLeadingEnd;
+    private _renderContent;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-side-navigation-item": RaruiSideNavigationItem;
+    }
+}
+/**
+ * ## Rarui SideNavigationItem
+ * ---
+ * A navigation item component for use within SideNavigation.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.
+ */
+type SideNavigationItemProperties = Partial<SideNavigationItemProps> & {
+    /**
+     * The HTML element type to render.
+     * @default "button"
+     */
+    as?: "button" | "a";
+};
+
+declare class RaruiSideNavigationItem extends LitElement {
+    active: SideNavigationItemProperties["active"];
+    level: SideNavigationItemProperties["level"];
+    as: SideNavigationItemProperties["as"];
+    private _itemRef;
+    static styles: CSSResult;
+    private _handleClick;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-banner": RaruiBanner;
@@ -18762,3 +19110,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>;
+}