@rarui/components 1.13.0 → 1.15.0

package/dist/index.d.ts

@@ -16793,6 +16793,29 @@ declare const iconButtonStyles: {
 
 type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
 
+declare const styles$5: {
+    label: RuntimeFn<{
+        /**
+         * Specifies whether the label is hidden or not
+         * @default false
+         */
+        hidden: {
+            true: {
+                border: "0";
+                clip: "rect(0 0 0 0)";
+                height: "1px";
+                margin: "-1px";
+                overflow: "hidden";
+                padding: "0";
+                position: "absolute";
+                width: "1px";
+            };
+        };
+    }>;
+};
+
+type LabelVariants = RecipeVariants<typeof styles$5.label>;
+
 declare const styles$4: {
     link: RuntimeFn<{
         /**
@@ -17111,6 +17134,117 @@ declare const textareaStyles: {
 
 type TextareaVariants = NonNullable<RecipeVariants<typeof textareaStyles.textarea>>;
 
+declare const styles$1: {
+    toggle: RuntimeFn<{
+        /**
+         * Specifies the size of the toggle, controlling its dimensions.
+         * @default large
+         */
+        size: {
+            large: {
+                ":before": {
+                    width: "1.5rem";
+                    height: "1.5rem";
+                };
+                ":after": {
+                    top: "-.3125rem";
+                    left: "-.3125rem";
+                    height: "2.75rem";
+                    width: "2.75rem";
+                };
+            };
+            small: {
+                ":before": {
+                    width: "1rem";
+                    height: "1rem";
+                };
+                ":after": {
+                    top: "-.4375rem";
+                    left: "-.5rem";
+                    height: "2.5rem";
+                    width: "2.5rem";
+                };
+            };
+        };
+        /**
+         * Specifies whether the radiobutton is in error state
+         * @default false
+         */
+        error: {
+            true: {
+                ":before": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                selectors: {
+                    "&:has(input:checked):before": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    };
+                };
+            };
+        };
+    }>;
+    input: string;
+    slider: RuntimeFn<{
+        size: {
+            large: {
+                width: "3.25rem";
+                height: "2rem";
+                ":after": {
+                    content: "";
+                };
+            };
+            small: {
+                width: "2.75rem";
+                height: "1.5rem";
+            };
+        };
+        error: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                "&[aria-disabled='true']": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    }>;
+    unchecked: RuntimeFn<{
+        size: {
+            large: {
+                left: "1rem";
+                height: "1.5rem";
+                width: "1.5rem";
+                borderRadius: "0.75rem";
+            };
+            small: {
+                left: "0.75rem";
+                width: "1rem";
+                height: "1rem";
+                borderRadius: "0.5rem";
+            };
+        };
+    }>;
+    checked: RuntimeFn<{
+        size: {
+            large: {
+                left: "2.25rem";
+                height: "1.5rem";
+                width: "1.5rem";
+                borderRadius: "0.75rem";
+            };
+            small: {
+                left: "2rem";
+                width: "1rem";
+                height: "1rem";
+                borderRadius: "0.5rem";
+            };
+        };
+    }>;
+};
+
+type ToggleVariants = RecipeVariants<typeof styles$1.toggle>;
+
 declare const styles: {
     tooltip: RuntimeFn<{
         /**
@@ -17190,6 +17324,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<{
         /**
@@ -17321,6 +17503,14 @@ interface TextProps extends TextSprinkle {
     lineClamp?: number;
 }
 
+interface LabelTyping {
+    /**
+     * The for attribute specifies which form element a label is bound to.
+     */
+    htmlFor?: string;
+}
+type LabelProps = LabelTyping & LabelVariants;
+
 interface TooltipTyping {
     /**
      * Conditional for displaying the popover arrow.
@@ -17460,6 +17650,22 @@ interface TextareaProps extends TextareaVariants {
     lines?: number;
 }
 
+interface ToggleTyping {
+    /**
+     * The name of the input element.
+     */
+    name: string;
+    /**
+     * Sets toggle state to activated or deactivated.
+     */
+    selected?: boolean;
+    /**
+     * Text to be rendered inside the component
+     */
+    label?: string;
+}
+type ToggleProps = ToggleTyping & ToggleVariants;
+
 interface BannerTyping {
     /**
      * A function to be called when the user closes the banner. This function is typically used to handle the closing action.
@@ -17492,6 +17698,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;
@@ -17502,7 +17735,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">;
 
@@ -17522,7 +17755,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>;
 
@@ -17544,7 +17777,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>;
 
@@ -17571,7 +17804,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 & {
@@ -17595,6 +17828,27 @@ declare class RaruiIcon extends LitElement {
     render(): TemplateResult<1> | null;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-label": RaruiLabel;
+    }
+}
+/**
+ * ## Rarui Label
+ * ---
+ * The label component allows us to name elements within a form.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.
+ */
+type LabelProperties = Partial<LabelProps>;
+
+declare class RaruiLabel extends LitElement {
+    htmlFor: LabelProperties["htmlFor"];
+    hidden: boolean;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-stepper-step": RaruiStepperStep;
@@ -17605,7 +17859,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>;
 
@@ -17629,7 +17883,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>;
 
@@ -17652,7 +17906,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">;
 
@@ -17676,7 +17930,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>;
 
@@ -17711,7 +17965,7 @@ 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">> & {
     /**
@@ -17776,7 +18030,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>;
 
@@ -17798,7 +18052,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>;
 
@@ -17820,7 +18074,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>;
 
@@ -17844,7 +18098,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> & {
     /**
@@ -17876,7 +18130,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>;
 
@@ -17901,7 +18155,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> & {
     /**
@@ -17937,7 +18191,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>;
 
@@ -17961,7 +18215,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> & {
     /**
@@ -17999,7 +18253,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> & {
     /**
@@ -18019,6 +18273,44 @@ declare class RaruiTextarea extends LitElement {
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-toggle": RaruiToggle;
+    }
+}
+/**
+ * ## Rarui Toggle
+ * ---
+ * Toggle switches activate or deactivate the state of a single item.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/toggle) for more details.
+ */
+type ToggleProperties = Partial<ToggleProps> & {
+    /**
+     * Defines if Toggle is disabled.
+     * When `true`, the component cannot be interacted.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Single ID associated with Toggle Input.If not provided,
+     * The name will be used as Fallback to `id`.
+     */
+    id?: string;
+};
+
+declare class RaruiToggle extends LitElement {
+    name: ToggleProperties["name"];
+    label: ToggleProperties["label"];
+    size?: ToggleProperties["size"];
+    error: ToggleProperties["error"];
+    selected?: ToggleProperties["selected"];
+    disabled?: ToggleProperties["disabled"];
+    static styles: CSSResult;
+    private handleChange;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-link": RaruiLink;
@@ -18029,7 +18321,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> & {
     /**
@@ -18071,6 +18363,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;
@@ -18081,7 +18398,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">> & {
     /**
@@ -18112,7 +18429,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>;
 
@@ -18133,7 +18450,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>;