@rarui/components 1.16.0 → 1.18.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<{
         /**
@@ -17377,6 +17501,33 @@ interface CardSprinkle {
     backgroundColor?: AddDollar<keyof typeof cardBackgroundColorProperties> | Conditions<AddDollar<keyof typeof cardBackgroundColorProperties>>;
 }
 
+declare const modalStyles: {
+    modal: RuntimeFn<{
+        /**
+         * Padding properties are used to generate space around the content area of an Accordion.Body..
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    overlay: string;
+};
+
+type ModalVariants = Omit<NonNullable<RecipeVariants<typeof modalStyles.modal>>, "selected">;
+type ModalDynamicProperties = Pick<StandardLonghandProperties, "maxWidth">;
+interface ModalSprinkle extends ModalDynamicProperties {
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
 declare const paginationStyles: {
     container: RuntimeFn<{
         size: {
@@ -17674,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.
@@ -17801,6 +17954,36 @@ interface CardHeaderProps {
     description?: string;
 }
 
+interface ModalTyping {
+    /**
+     * Whether the modal is open or not.
+     */
+    open: boolean;
+    /**
+     * Specifies the ID of the portal element where the modal should be rendered.
+     * This can be useful for rendering the modal in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     * @TJS-type (open: boolean) => void;
+     */
+    onDismiss: (open: boolean) => void;
+}
+type ModalProps = ModalTyping & ModalSprinkle & ModalVariants;
+
+interface ModalHeaderTypings {
+    /**
+     * The title to display in the Modal header.
+     */
+    title?: string;
+    /**
+     * The subtitle to display in the Modal header.
+     */
+    subtitle?: string;
+}
+type ModalHeaderProps = ModalHeaderTypings;
+
 type LinkProps = LinkVariants;
 
 interface PaginationTyping {
@@ -18395,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;
@@ -18651,3 +18879,76 @@ declare class RaruiCard extends LitElement {
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-modal": RaruiModal;
+    }
+}
+/**
+ * ## Rarui Modal
+ * ---
+ * The modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.
+ */
+type ModalProperties = Omit<Partial<ModalProps>, "onDismiss">;
+
+declare class RaruiModal extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    padding: ModalProperties["padding"];
+    portalId: ModalProperties["portalId"];
+    open: ModalProperties["open"];
+    maxWidth: ModalProperties["maxWidth"];
+    dialog: HTMLElement;
+    static styles: CSSResult;
+    cleanupAutoUpdate?: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, any>): void;
+    private getPortalRoot;
+    private handleKeyDown;
+    private dismiss;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-modal-header": RaruiModalHeader;
+    }
+}
+/**
+ * ## Rarui Modal Header
+ * ---
+ * The modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.
+ */
+type ModalHeaderProperties = ModalHeaderProps;
+
+declare class RaruiModalHeader extends LitElement {
+    title: string;
+    subtitle: ModalHeaderProperties["subtitle"];
+    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>;
+}