@rarui/components 1.7.0 → 1.8.0

package/dist/index.d.ts

@@ -16193,14 +16193,17 @@ interface DividerSprinkle {
     size?: string | Conditions<string>;
     /**
      * The **`type`** shorthand CSS property sets the line style for all four sides of an element's.
+     * @default solid
      */
     type?: AddDollar<DividerBorderStyle> | Conditions<AddDollar<DividerBorderStyle>>;
     /**
      * The **`thickness`** shorthand CSS property sets the width of an element's.
+     * @default $1
      */
     thickness?: AddDollar<keyof typeof dividerBorderWidthProperties> | Conditions<AddDollar<keyof typeof dividerBorderWidthProperties>>;
     /**
      * The **`color`** CSS property sets an element's color.
+     * @default $divider
      */
     color?: AddDollar<keyof typeof borderColorProperties> | Conditions<AddDollar<keyof typeof borderColorProperties>>;
 }
@@ -16379,7 +16382,7 @@ declare const badgeStyles: {
         };
         /**
          * Specifies the size of the badge, controlling its dimensions.
-         * @defaiult medium
+         * @default medium
          */
         size: {
             large: {
@@ -16407,7 +16410,7 @@ declare const badgeStyles: {
         };
         /**
          * Defines the visual variant of the badge, affecting its background style.
-         * @defaiult solid
+         * @default solid
          */
         variant: {
             solid: {};
@@ -16437,6 +16440,7 @@ declare const buttonStyles: {
         /**
          * Defines the appearance variants for the button component.
          * Each appearance variant corresponds to a specific background color, border color, and text color.
+         * @default brand
          */
         appearance: {
             brand: {
@@ -16472,7 +16476,7 @@ declare const buttonStyles: {
         };
         /**
          * Defines the size of the button component.
-         * @default "large"
+         * @default large
          */
         size: {
             large: {
@@ -16496,6 +16500,7 @@ declare const buttonStyles: {
         };
         /**
          * Defines the visual variant of the badge, affecting its background style, border and text.
+         * @default solid
          */
         variant: {
             solid: {
@@ -16732,6 +16737,50 @@ declare const textareaStyles: {
 
 type TextareaVariants = NonNullable<RecipeVariants<typeof textareaStyles.textarea>>;
 
+declare const styles: {
+    tooltip: RuntimeFn<{
+        /**
+         * Specifies whether the color scheme should be inverted
+         * @default false
+         */
+        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
+         * @default base
+         */
+        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<{
         /**
@@ -16781,6 +16830,7 @@ type AvatarProps = AvatarTypings & AvatarVariants;
 interface DividerProps extends DividerSprinkle {
     /**
      * The direction of the Divider.
+     * @default horizontal
      */
     direction?: "vertical" | "horizontal";
 }
@@ -16805,6 +16855,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 +17082,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 Tootip
+ * ---
+ * Tooltips are informative, specific, and action-oriented text labels that provide contextual support
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/tooltip) for more details.
+ */
+type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" | "portalId">> & {
+    /**
+     * 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 {
+    arrow: TooltipProperties["arrow"];
+    padding: TooltipProperties["padding"];
+    offset: TooltipProperties["offset"];
+    inverted: TooltipProperties["inverted"];
+    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 +17214,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"];
+    type: ButtonProperties["type"];
     size: ButtonProperties["size"];
     variant: ButtonProperties["variant"];
+    appearance: ButtonProperties["appearance"];
+    disabled: ButtonProperties["disabled"];
     full: ButtonProperties["full"];
-    disabled: boolean;
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }