@rarui/components 1.14.0 → 1.16.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,54 @@ interface CardSprinkle {
     backgroundColor?: AddDollar<keyof typeof cardBackgroundColorProperties> | Conditions<AddDollar<keyof typeof cardBackgroundColorProperties>>;
 }
 
+declare const paginationStyles: {
+    container: RuntimeFn<{
+        size: {
+            dot: {
+                gap: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {};
+            large: {};
+        };
+    }>;
+    item: RuntimeFn<{
+        selected: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the Pagination component.
+         * @default large
+         */
+        size: {
+            dot: {
+                width: "0.75rem";
+                height: "0.75rem";
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {
+                minWidth: "2.5rem";
+                height: "2.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            large: {
+                minWidth: "2.75rem";
+                height: "2.75rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+};
+
+type PaginationVariants = Omit<NonNullable<RecipeVariants<typeof paginationStyles.item>>, "selected">;
+
 declare const stepperStyles: {
     stepper: RuntimeFn<{
         /**
@@ -17573,6 +17674,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.
@@ -17650,6 +17803,33 @@ interface CardHeaderProps {
 
 type LinkProps = LinkVariants;
 
+interface PaginationTyping {
+    /**
+     * The currently selected page.
+     */
+    activePage: number;
+    /**
+     * The total number of pages.
+     */
+    pageCount: number;
+    /**
+     * Determines whether page numbers should be shown.
+     * @default true
+     */
+    showNumbers?: boolean;
+    /**
+     * Determines whether page arrows should be shown.
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Called with event and page number when a page is clicked.
+     * @TJS-type (page: number) => void;
+     */
+    onPageChange: (page: number) => void;
+}
+type PaginationProps = PaginationTyping & PaginationVariants;
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-avatar": RaruiAvatar;
@@ -17660,7 +17840,7 @@ declare global {
  * ---
  * The Avatar component is normally used to display circular photos of the user's profile.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/avatar) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/avatar) for more details.
  */
 type AvatarProperties = Pick<AvatarProps, "size">;
 
@@ -17680,7 +17860,7 @@ declare global {
  * ---
  * 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.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
 type BadgeProperties = Partial<BadgeProps>;
 
@@ -17702,7 +17882,7 @@ declare global {
  * ---
  * 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.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/divider) for more details.
  */
 type DividerProperties = Partial<DividerProps>;
 
@@ -17729,7 +17909,7 @@ declare global {
  * ---
  * Iconography used in the system based on Google's Material Design.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/icon) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/icon) for more details.
  */
 type Sizes = "small" | "medium" | "large";
 type IconProperties = IconProps & {
@@ -17763,7 +17943,7 @@ declare global {
  * ---
  * The label component allows us to name elements within a form.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/label) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.
  */
 type LabelProperties = Partial<LabelProps>;
 
@@ -17784,7 +17964,7 @@ declare global {
  * ---
  * Stepper transmit progress through steps.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/stepper) for more details.
  */
 type StepperStepProperties = Partial<StepperStepProps>;
 
@@ -17808,7 +17988,7 @@ declare global {
  * ---
  * Stepper transmit progress through steps.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/stepper) for more details.
  */
 type StepperProperties = Partial<StepperProps>;
 
@@ -17831,7 +18011,7 @@ declare global {
  * ---
  * Text is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
 type TextProperties = Omit<TextProps, "as">;
 
@@ -17855,7 +18035,7 @@ declare global {
  * ---
  * Tilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
 type TitleProperties = Partial<TitleProps>;
 
@@ -17890,11 +18070,11 @@ declare global {
  * ---
  * 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.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/tooltip) for more details.
  */
 type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" | "portalId">> & {
     /**
-     * Position of the popover.
+     * Position of the tooltip.
      * @default bottom
      */
     position?: Placement;
@@ -17955,7 +18135,7 @@ declare global {
  * ---
  * 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.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
 type ProgressCircleProperties = Partial<ProgressCircleProps>;
 
@@ -17977,7 +18157,7 @@ declare global {
  * ---
  * 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.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
 type ProgressProperties = Partial<ProgressProps>;
 
@@ -17999,7 +18179,7 @@ declare global {
  * Visual indicator that shows the current status or situation of an item or process.
  * Useful for providing fast and understandable feedback to users.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/status) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/status) for more details.
  */
 type StatusProperties = Partial<StatusProps>;
 
@@ -18023,7 +18203,7 @@ declare global {
  * ---
  * Button allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
 type ButtonProperties = Partial<ButtonProps> & {
     /**
@@ -18055,7 +18235,7 @@ declare global {
  * ---
  * The Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/checkbox) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.
  */
 type CheckboxProperties = Partial<CheckboxProps>;
 
@@ -18080,7 +18260,7 @@ declare global {
  * ---
  * Chip component helps people enter information, make selections, filter content or trigger actions.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
 type ChipProperties = Partial<ChipProps> & {
     /**
@@ -18106,6 +18286,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;
@@ -18116,7 +18381,7 @@ declare global {
  * ---
  * Button allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
 type IconButtonProperties = Partial<IconButtonProps>;
 
@@ -18140,7 +18405,7 @@ declare global {
  * ---
  * Radio Button allows users to select one option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from a set of choices.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/radiobutton) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/radiobutton) for more details.
  */
 type RadioButtonProperties = Partial<RadioButtonProps> & {
     /**
@@ -18178,7 +18443,7 @@ declare global {
  * ---
  * Expanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/textarea) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/textarea) for more details.
  */
 type TextareaProperties = Partial<TextareaProps> & {
     /**
@@ -18208,7 +18473,7 @@ declare global {
  * ---
  * Toggle switches activate or deactivate the state of a single item.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/toggle) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/toggle) for more details.
  */
 type ToggleProperties = Partial<ToggleProps> & {
     /**
@@ -18246,7 +18511,7 @@ declare global {
  * ---
  * A link (abbreviation of hyperlink) is an html object that allows you to jump to a new location when clicking or playing it
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/navigation/link) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/link) for more details.
  */
 type LinkProperties = Partial<LinkProps> & {
     /**
@@ -18288,6 +18553,31 @@ declare class RaruiLink extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-pagination": RaruiPagination;
+    }
+}
+/**
+ * ## Rarui Pagination
+ * ---
+ * The pagination component allows the user to select a specific page in a page range.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/pagination) for more details.
+ */
+type PaginationProperties = Partial<Omit<PaginationProps, "onPageChange">>;
+
+declare class RaruiPagination extends LitElement {
+    activePage: PaginationProperties["activePage"];
+    pageCount: PaginationProperties["pageCount"];
+    size?: PaginationProperties["size"];
+    showNumbers: PaginationProperties["showNumbers"];
+    showArrows: PaginationProperties["showArrows"];
+    static styles: CSSResult;
+    private handlePageChange;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-banner": RaruiBanner;
@@ -18298,7 +18588,7 @@ declare global {
  * ---
  * Banner messages are displayed to the user at the top of the window/screen.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/banner) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/banner) for more details.
  */
 type BannerProperties = Partial<Pick<BannerProps, "appearance" | "floating">> & {
     /**
@@ -18329,7 +18619,7 @@ declare global {
  * ---
  * 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.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
 type CardHeaderProperties = Partial<CardHeaderProps>;
 
@@ -18350,7 +18640,7 @@ declare global {
  * ---
  * 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.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
 type CardProperties = Partial<CardProps>;