@rarui/components 1.7.0 → 1.8.0-rc.1

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.8.0-rc.1",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -975,6 +975,133 @@
         }
       ]
     },
+    {
+      "name": "rarui-tooltip",
+      "description": "## Rarui Tooltip\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.",
+      "attributes": [
+        {
+          "name": "arrow",
+          "description": "Conditional for displaying the popover arrow.",
+          "type": "boolean"
+        },
+        {
+          "name": "match-reference-width",
+          "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-hover",
+          "description": "Adds hover event listeners that change the open state, like CSS :hover.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-click",
+          "description": "Adds click event listeners that change the open state.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-dismiss",
+          "description": "Adds listeners that dismiss (close) the floating element.",
+          "type": "boolean"
+        },
+        {
+          "name": "offset",
+          "description": "Offest displaces the floating element from its core placement along the specified axes.",
+          "type": "number"
+        },
+        {
+          "name": "portal-id",
+          "description": "Specifies the ID of the portal element where the tooltip should be rendered.\nThis can be useful for rendering the tooltip in a different part of the DOM, such as a modal or overlay.",
+          "type": "string"
+        },
+        {
+          "name": "visible",
+          "description": "If true, the component is shown.",
+          "type": "boolean"
+        },
+        {
+          "name": "on-visibility",
+          "description": "Function to control popover opening and closing.",
+          "type": "(visible: boolean) => void;"
+        },
+        {
+          "name": "inverted",
+          "description": "Specifies whether the color scheme should be inverted",
+          "type": "boolean"
+        },
+        {
+          "name": "padding",
+          "description": "Specifies the padding for the tooltip\n\n- base\n- none",
+          "type": "string",
+          "values": [
+            {
+              "name": "base"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "position",
+          "description": "Position of the popover.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
+          "type": "string",
+          "values": [
+            {
+              "name": "bottom",
+              "description": "(default)"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "strategy",
+          "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed",
+          "type": "string",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-progress",
       "description": "## Rarui Progress\n---\nThe Badge components are only used to transmit dynamic information, such as a connection or status.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.",
@@ -1282,6 +1409,22 @@
               "name": "tonal"
             }
           ]
+        },
+        {
+          "name": "type",
+          "description": "Defines the native button type.\nCan be 'button', 'submit', or 'reset'.\n\n- button\n- reset\n- submit",
+          "type": "string",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
         }
       ]
     },

package/dist/index.d.ts

@@ -1,88 +1,3 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-/** TemplateResult types */
-declare const HTML_RESULT = 1;
-declare const SVG_RESULT = 2;
-declare const MATHML_RESULT = 3;
-type ResultType = typeof HTML_RESULT | typeof SVG_RESULT | typeof MATHML_RESULT;
-/**
- * The return type of the template tag functions, {@linkcode html} and
- * {@linkcode svg} when it hasn't been compiled by @lit-labs/compiler.
- *
- * A `TemplateResult` object holds all the information about a template
- * expression required to render it: the template strings, expression values,
- * and type of template (html or svg).
- *
- * `TemplateResult` objects do not create any DOM on their own. To create or
- * update DOM you need to render the `TemplateResult`. See
- * [Rendering](https://lit.dev/docs/components/rendering) for more information.
- *
- */
-type UncompiledTemplateResult<T extends ResultType = ResultType> = {
-    ['_$litType$']: T;
-    strings: TemplateStringsArray;
-    values: unknown[];
-};
-/**
- * The return type of the template tag functions, {@linkcode html} and
- * {@linkcode svg}.
- *
- * A `TemplateResult` object holds all the information about a template
- * expression required to render it: the template strings, expression values,
- * and type of template (html or svg).
- *
- * `TemplateResult` objects do not create any DOM on their own. To create or
- * update DOM you need to render the `TemplateResult`. See
- * [Rendering](https://lit.dev/docs/components/rendering) for more information.
- *
- * In Lit 4, this type will be an alias of
- * MaybeCompiledTemplateResult, so that code will get type errors if it assumes
- * that Lit templates are not compiled. When deliberately working with only
- * one, use either {@linkcode CompiledTemplateResult} or
- * {@linkcode UncompiledTemplateResult} explicitly.
- */
-type TemplateResult<T extends ResultType = ResultType> = UncompiledTemplateResult<T>;
-/**
- * Object specifying options for controlling lit-html rendering. Note that
- * while `render` may be called multiple times on the same `container` (and
- * `renderBefore` reference node) to efficiently update the rendered content,
- * only the options passed in during the first render are respected during
- * the lifetime of renders to that unique `container` + `renderBefore`
- * combination.
- */
-interface RenderOptions {
-    /**
-     * An object to use as the `this` value for event listeners. It's often
-     * useful to set this to the host component rendering a template.
-     */
-    host?: object;
-    /**
-     * A DOM node before which to render content in the container.
-     */
-    renderBefore?: ChildNode | null;
-    /**
-     * Node used for cloning the template (`importNode` will be called on this
-     * node). This controls the `ownerDocument` of the rendered DOM, along with
-     * any inherited context. Defaults to the global `document`.
-     */
-    creationScope?: {
-        importNode(node: Node, deep?: boolean): Node;
-    };
-    /**
-     * The initial connected state for the top-level part being rendered. If no
-     * `isConnected` option is set, `AsyncDirective`s will be connected by
-     * default. Set to `false` if the initial render occurs in a disconnected tree
-     * and `AsyncDirective`s should see `isConnected === false` for their initial
-     * render. The `part.setConnected()` method must be used subsequent to initial
-     * render to change the connected state of the part.
-     */
-    isConnected?: boolean;
-}
-
 /**
  * A CSSResult or native CSSStyleSheet.
  *
@@ -914,6 +829,49 @@ declare abstract class ReactiveElement extends HTMLElement implements ReactiveCo
     protected firstUpdated(_changedProperties: PropertyValues): void;
 }
 
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * Object specifying options for controlling lit-html rendering. Note that
+ * while `render` may be called multiple times on the same `container` (and
+ * `renderBefore` reference node) to efficiently update the rendered content,
+ * only the options passed in during the first render are respected during
+ * the lifetime of renders to that unique `container` + `renderBefore`
+ * combination.
+ */
+interface RenderOptions {
+    /**
+     * An object to use as the `this` value for event listeners. It's often
+     * useful to set this to the host component rendering a template.
+     */
+    host?: object;
+    /**
+     * A DOM node before which to render content in the container.
+     */
+    renderBefore?: ChildNode | null;
+    /**
+     * Node used for cloning the template (`importNode` will be called on this
+     * node). This controls the `ownerDocument` of the rendered DOM, along with
+     * any inherited context. Defaults to the global `document`.
+     */
+    creationScope?: {
+        importNode(node: Node, deep?: boolean): Node;
+    };
+    /**
+     * The initial connected state for the top-level part being rendered. If no
+     * `isConnected` option is set, `AsyncDirective`s will be connected by
+     * default. Set to `false` if the initial render occurs in a disconnected tree
+     * and `AsyncDirective`s should see `isConnected === false` for their initial
+     * render. The `part.setConnected()` method must be used subsequent to initial
+     * render to change the connected state of the part.
+     */
+    isConnected?: boolean;
+}
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -16732,6 +16690,48 @@ declare const textareaStyles: {
 
 type TextareaVariants = NonNullable<RecipeVariants<typeof textareaStyles.textarea>>;
 
+declare const styles: {
+    tooltip: RuntimeFn<{
+        /**
+         * Specifies whether the color scheme should be inverted
+         */
+        inverted: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            false: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the padding for the tooltip
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    header: RuntimeFn<{
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    container: string;
+};
+
+type TooltipVariants = NonNullable<RecipeVariants<typeof styles.tooltip>>;
+
 declare const cardStyles: {
     card: RuntimeFn<{
         /**
@@ -16805,6 +16805,54 @@ interface TextProps extends TextSprinkle {
     lineClamp?: number;
 }
 
+interface TooltipTyping {
+    /**
+     * Conditional for displaying the popover arrow.
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
+     * @default false
+     */
+    matchReferenceWidth?: boolean;
+    /**
+     * Adds hover event listeners that change the open state, like CSS :hover.
+     * @default false
+     */
+    enabledHover?: boolean;
+    /**
+     * Adds click event listeners that change the open state.
+     * @default true
+     */
+    enabledClick?: boolean;
+    /**
+     * Adds listeners that dismiss (close) the floating element.
+     * @default true
+     */
+    enabledDismiss?: boolean;
+    /**
+     * Offest displaces the floating element from its core placement along the specified axes.
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * Specifies the ID of the portal element where the tooltip should be rendered.
+     * This can be useful for rendering the tooltip in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * If true, the component is shown.
+     */
+    visible?: boolean;
+    /**
+     * Function to control popover opening and closing.
+     * @TJS-type (visible: boolean) => void;
+     */
+    onVisibility?: (visible: boolean) => void;
+}
+type TooltipProps = TooltipTyping & TooltipVariants;
+
 interface ProgressTyping {
     /**
      * The progress percentage, represented as a number between 0 and 100.
@@ -16984,6 +17032,83 @@ declare class RaruiTitle extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare type AlignedPlacement = `${Side}-${Alignment}`;
+
+declare type Alignment = 'start' | 'end';
+
+declare type Placement = Prettify<Side | AlignedPlacement>;
+
+declare type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type Side = 'top' | 'right' | 'bottom' | 'left';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-tooltip": RaruiTooltip;
+    }
+}
+/**
+ * ## Rarui Tooltip
+ * ---
+ * A Divider is a thin line used to separate or group content in lists and layouts.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.
+ */
+type TooltipProperties = Partial<TooltipProps> & {
+    /**
+     * Position of the popover.
+     * @default bottom
+     */
+    position?: Placement;
+    /**
+     * CSS positioning strategy used for the tooltip.
+     *
+     * - `"fixed"` (default) positions the tooltip relative to the viewport,
+     *   so it stays in the same place even when the page is scrolled.
+     * - `"absolute"` positions the tooltip relative to the nearest positioned ancestor,
+     *   which can be useful when you want the tooltip to move with page content.
+     *
+     * Use `"fixed"` for tooltips that should remain visible on scroll,
+     * and `"absolute"` when tooltips need to be positioned within scrollable containers.
+     * @default fixed
+     */
+    strategy?: "fixed" | "absolute";
+};
+
+declare class RaruiTooltip extends LitElement {
+    padding: TooltipProperties["padding"];
+    offset: TooltipProperties["offset"];
+    inverted: TooltipProperties["inverted"];
+    arrow: TooltipProperties["arrow"];
+    enabledDismiss: TooltipProperties["enabledDismiss"];
+    enabledClick: TooltipProperties["enabledClick"];
+    enabledHover: TooltipProperties["enabledHover"];
+    matchReferenceWidth: TooltipProperties["matchReferenceWidth"];
+    position: TooltipProperties["position"];
+    strategy: TooltipProperties["strategy"];
+    open: boolean;
+    reference: HTMLElement;
+    floating: HTMLElement;
+    arrowEl: HTMLElement;
+    cleanupAutoUpdate?: () => void;
+    static styles: CSSResult;
+    private updatePositionDebounceId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, any>): void;
+    private scheduleUpdatePosition;
+    private handleClickOutside;
+    private handleClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private getMiddleware;
+    updatePosition(): Promise<void>;
+    computePosition(): Promise<void>;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-progress-circle": RaruiProgressCircle;
@@ -17039,14 +17164,22 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.
  */
-type ButtonProperties = Partial<ButtonProps>;
+type ButtonProperties = Partial<ButtonProps> & {
+    /**
+     * Defines the native button type.
+     * Can be 'button', 'submit', or 'reset'.
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+};
 
 declare class RaruiButton extends LitElement {
-    appearance: ButtonProperties["appearance"];
+    full: ButtonProperties["full"];
     size: ButtonProperties["size"];
+    type: ButtonProperties["type"];
     variant: ButtonProperties["variant"];
-    full: ButtonProperties["full"];
-    disabled: boolean;
+    disabled: ButtonProperties["disabled"];
+    appearance: ButtonProperties["appearance"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }