@rarui/components 1.6.0 → 1.8.0-rc.1

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
@@ -16588,6 +16546,47 @@ declare const checkboxStyles: {
 
 type CheckboxVariants = NonNullable<RecipeVariants<typeof checkboxStyles.checkbox>>;
 
+declare const progressStyles: {
+    progress: string;
+    bar: string;
+    circle: RuntimeFn<{
+        /**
+         * Specifies the size of the progress indicator.
+         * This prop accepts one of the following values: "large" or "small".
+         * @default large
+         */
+        size: {
+            large: {
+                width: "8.75rem";
+                height: "8.75rem";
+            };
+            small: {
+                width: "5rem";
+                height: "5rem";
+            };
+        };
+    }>;
+    circleBase: string;
+    circleProgress: string;
+    circleText: string;
+};
+declare const progressColorProperties: {
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+type ProgressVariants = NonNullable<RecipeVariants<typeof progressStyles.circle>>;
+interface ProgressSprinkle {
+    /**
+     * Specifies the color of the progress.
+     * This prop accepts one of the following values: "$info", "$success" or "$brand"
+     * @default $info
+     * @examples ["$brand", { xs: "$brand", md: "$info" }]
+     */
+    color?: AddDollar<keyof typeof progressColorProperties>;
+}
+
 declare const styles$3: {
     radioButton: RuntimeFn<{
         /**
@@ -16691,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<{
         /**
@@ -16764,6 +16805,65 @@ 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.
+     * This indicates the completion level of the process.
+     */
+    percentage: number;
+}
+type ProgressProps = ProgressTyping & ProgressSprinkle;
+
+type ProgressCircleProps = ProgressProps & ProgressVariants;
+
 interface ButtonTyping {
     /**
      * Disables the button, disallowing user interaction.
@@ -16932,6 +17032,126 @@ 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;
+    }
+}
+/**
+ * ## Rarui Card Body
+ * ---
+ * The Card component contains textual content, images, and actions about a topic.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/card) for more details.
+ */
+type ProgressCircleProperties = Partial<ProgressCircleProps>;
+
+declare class RaruiProgressCircle extends LitElement {
+    size?: ProgressCircleProperties["size"];
+    percentage?: ProgressCircleProperties["percentage"];
+    color?: ProgressCircleProperties["color"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-progress": RaruiProgress;
+    }
+}
+/**
+ * ## Rarui Progress
+ * ---
+ * The Badge components are only used to transmit dynamic information, such as a connection or status.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.
+ */
+type ProgressProperties = Partial<ProgressProps>;
+
+declare class RaruiProgress extends LitElement {
+    percentage?: ProgressProperties["percentage"];
+    color?: ProgressProperties["color"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-button": RaruiButton;
@@ -16944,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>;
 }