@rarui/components 1.15.0 → 1.17.0

package/dist/index.d.ts

@@ -16141,6 +16141,17 @@ declare const fontWeightProperties: {
     semiBold: `var(--${string})` | `var(--${string}, ${string})`;
     bold: `var(--${string})` | `var(--${string}, ${string})`;
 };
+declare const zIndexProperties: {
+    "100": `var(--${string})` | `var(--${string}, ${string})`;
+    "200": `var(--${string})` | `var(--${string}, ${string})`;
+    "300": `var(--${string})` | `var(--${string}, ${string})`;
+    "400": `var(--${string})` | `var(--${string}, ${string})`;
+    "500": `var(--${string})` | `var(--${string}, ${string})`;
+    "600": `var(--${string})` | `var(--${string}, ${string})`;
+    "700": `var(--${string})` | `var(--${string}, ${string})`;
+    "800": `var(--${string})` | `var(--${string}, ${string})`;
+    "900": `var(--${string})` | `var(--${string}, ${string})`;
+};
 declare const colorProperties: {
     currentColor: string;
     brand: `var(--${string})` | `var(--${string}, ${string})`;
@@ -16967,6 +16978,48 @@ declare const styles$3: {
 
 type RadioButtonVariants = NonNullable<RecipeVariants<typeof styles$3.radioButton>>;
 
+declare const dropdownStyles: {
+    dropdown: RuntimeFn<{
+        /**
+         * Specifies the padding inside the dropdown menu. This prop accepts one of the following values: "base" or "none".
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    item: RuntimeFn<{
+        /**
+         * Indicates if the item is selected.
+         * This affects the visual style, such as highlight or marking.
+         *
+         * @default false
+         */
+        selected: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    }>;
+};
+
+type DropdownVariants = NonNullable<RecipeVariants<typeof dropdownStyles.dropdown> & RecipeVariants<typeof dropdownStyles.item>>;
+type DropdownDynamicProperties = Pick<StandardLonghandProperties, "width" | "maxWidth">;
+interface DropdownSprinkle extends DropdownDynamicProperties {
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
 declare const statusStyles: {
     status: RuntimeFn<{
         /**
@@ -17324,6 +17377,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: {
@@ -17621,6 +17701,58 @@ interface ChipTyping extends ChipSprinkle {
 }
 type ChipProps = ChipTyping & ChipVariants;
 
+interface DropdownTyping {
+    /**
+     * 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 listeners that dismiss (close) the floating element.
+     * @default true
+     */
+    enabledDismiss?: boolean;
+    /**
+     * Adds click event listeners that change the open state.
+     * @default true
+     */
+    enabledClick?: boolean;
+    /**
+     * Determines whether the dropdown should enable flipping the options' dropdown when there is not enough space to display it in its default direction.
+     * This can help ensure the dropdown is always visible on the screen.
+     * @default true
+     */
+    enabledFlip?: 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 dropdown should be rendered.
+     * This can be useful for rendering the dropdown 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 dropdown opening and closing.
+     * @TJS-type (visible: boolean) => void;
+     */
+    onVisibility?: (visible: boolean) => void;
+}
+type DropdownProps = DropdownTyping & DropdownSprinkle & Pick<DropdownVariants, "padding">;
+
+interface DropdownItemTyping {
+    /**
+     * The name of the dropdown item. This is typically the text that is displayed for the item.
+     */
+    name?: string;
+}
+type DropdownItemProps = DropdownItemTyping & Pick<DropdownVariants, "selected">;
+
 interface IconButtonTyping {
     /**
      * Disables the button, disallowing user interaction.
@@ -17696,6 +17828,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 {
@@ -17969,7 +18131,7 @@ declare global {
  */
 type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" | "portalId">> & {
     /**
-     * Position of the popover.
+     * Position of the tooltip.
      * @default bottom
      */
     position?: Placement;
@@ -18181,6 +18343,91 @@ declare class RaruiChip extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-dropdown": RaruiDropdown;
+    }
+}
+/**
+ * ## Rarui Dropdown
+ * ---
+ * An suspended menu displays a list of options on a temporary surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.
+ */
+type DropdownProperties = Omit<Partial<DropdownProps>, "onVisibility" | "portalId"> & {
+    /**
+     * Position of the dropdown.
+     * @default bottom-start
+     */
+    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 RaruiDropdown extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    offset: DropdownProperties["offset"];
+    padding: DropdownProperties["padding"];
+    position: DropdownProperties["position"];
+    strategy: DropdownProperties["strategy"];
+    matchReferenceWidth?: DropdownProperties["matchReferenceWidth"];
+    enabledFlip?: DropdownProperties["enabledFlip"];
+    enabledClick: DropdownProperties["enabledClick"];
+    enabledDismiss: DropdownProperties["enabledDismiss"];
+    open: boolean;
+    set visible(value: boolean | undefined);
+    get visible(): boolean | undefined;
+    private _visible?;
+    reference: HTMLElement;
+    floating: HTMLElement;
+    static styles: CSSResult;
+    cleanupAutoUpdate?: () => void;
+    private updatePositionDebounceId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, any>): void;
+    private scheduleUpdatePosition;
+    private handleClickOutside;
+    private handleClick;
+    updatePosition(): Promise<void>;
+    private getMiddleware;
+    computePosition(): Promise<void>;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-dropdown-item": RaruiDropdownItem;
+    }
+}
+/**
+ * ## Rarui Dropdown Item
+ * ---
+ * An suspended menu displays a list of options on a temporary surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/dropdown) for more details.
+ */
+type DropdownItemProperties = Omit<DropdownItemProps, "icon">;
+
+declare class RaruiDropdownItem extends LitElement {
+    name: DropdownItemProperties["name"];
+    selected: DropdownItemProperties["selected"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-icon-button": RaruiIconButton;
@@ -18461,3 +18708,57 @@ 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>;
+}