@rarui/components 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 `@rarui/components` components is a component library built with [Stencil](https://stenciljs.com/docs/introduction).
 
+## 2025-06-18 `1.12.0`
+
+#### 🎉 New features
+
+- Added new feedback `Status` component. ([#119](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/119) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new navigation `Link` component. ([#119](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/119) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-06-17 `1.11.0`
+
+#### 🎉 New features
+
+- Added new exhibition `Stepper` component. ([#118](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/118) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-06-16 `1.10.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.9.0",
+  "version": "1.11.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -1355,6 +1355,55 @@
         }
       ]
     },
+    {
+      "name": "rarui-stepper",
+      "description": "## Rarui Stepper\n---\nStepper transmit progress through steps.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.",
+      "attributes": [
+        {
+          "name": "direction",
+          "default": "horizontal",
+          "description": "Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.\n\n- horizontal\n- vertical",
+          "type": "string",
+          "values": [
+            {
+              "name": "horizontal",
+              "description": "(default)"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-stepper-step",
+      "description": "## Rarui Stepper Step\n---\nStepper transmit progress through steps.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.",
+      "attributes": [
+        {
+          "name": "title",
+          "description": "The title of the step. This provides a brief summary of the step's purpose.",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "A more detailed description of the step. This can provide additional context or instructions.",
+          "type": "string"
+        },
+        {
+          "name": "active",
+          "default": false,
+          "description": "Indicates whether the step is currently active. An active step is typically highlighted to show that it is the current step.",
+          "type": "boolean"
+        },
+        {
+          "name": "done",
+          "default": false,
+          "description": "Indicates whether the step has been completed. A completed step is usually marked with a checkmark or other indicator.",
+          "type": "boolean"
+        }
+      ]
+    },
     {
       "name": "rarui-text",
       "description": "## Rarui Text\n---\nText 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.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.",
@@ -2320,6 +2369,84 @@
         }
       ]
     },
+    {
+      "name": "rarui-status",
+      "description": "## Rarui Status\n---\nVisual indicator that shows the current status or situation of an item or process.\nUseful for providing fast and understandable feedback to users.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/status) for more details.",
+      "attributes": [
+        {
+          "name": "dot",
+          "default": true,
+          "description": "Specifies whether to display a dot indicator alongside the status text. When true, a dot is shown to visually represent the status.",
+          "type": "boolean"
+        },
+        {
+          "name": "full",
+          "default": false,
+          "description": "Specifies whether the status should take up the full width of its container.\nThis variant is useful when you want to make a status span the entire width of its parent container.",
+          "type": "boolean"
+        },
+        {
+          "name": "appearance",
+          "default": "success",
+          "description": "Determines the visual style of the status, influencing its color scheme.\n\n- danger\n- info\n- inverted\n- neutral\n- success\n- warning",
+          "type": "string",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "inverted"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "success",
+              "description": "(default)"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "default": "normal",
+          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- normal\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "normal",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "default": "solid",
+          "description": "Specifies the variant of the status\n\n- solid\n- subdued\n- text",
+          "type": "string",
+          "values": [
+            {
+              "name": "solid",
+              "description": "(default)"
+            },
+            {
+              "name": "subdued"
+            },
+            {
+              "name": "text"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-button",
       "description": "## Rarui Button\n---\nButton allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.",
@@ -6495,6 +6622,87 @@
         }
       ]
     },
+    {
+      "name": "rarui-link",
+      "description": "## Rarui Link\n---\nA link (abbreviation of hyperlink) is an html object that allows you to jump to a new location when clicking or playing it\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/navigation/link) for more details.",
+      "attributes": [
+        {
+          "name": "appearance",
+          "default": "brand",
+          "description": "Determines the visual style of the link.\n\n- brand\n- inverted\n- neutral",
+          "type": "string",
+          "values": [
+            {
+              "name": "brand",
+              "description": "(default)"
+            },
+            {
+              "name": "inverted"
+            },
+            {
+              "name": "neutral"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "default": "large",
+          "description": "Specifies the size of the link.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large",
+              "description": "(default)"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Defines the native type of the button.\nIt can be `Button`, `submit` or `reset`.\n\n** IMPORTANT: ** should only be used when `as=\"button\"`.\n\n- button\n- reset\n- submit",
+          "type": "string",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disable the button, preventing user interactions.\n\n** IMPORTANT: ** should only be used when `as=\"button\"`.",
+          "type": "boolean"
+        },
+        {
+          "name": "as",
+          "description": "Define or rendered element type.\n\n- `a`: renders an element `<a>`, ideal for navigation.\n- `Button`: render an element `<Button>`, ideal for actions.\n\n- a\n- button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button"
+            }
+          ]
+        },
+        {
+          "name": "href",
+          "description": "Defines the destination URL of the link.\n\n** IMPORTANT: ** should only be used when `as=\"a\"`.",
+          "type": "string"
+        }
+      ]
+    },
     {
       "name": "rarui-tabs",
       "description": "## Rarui Tabs\n---\nThe Tabs are used to switch between different display modes or pages.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/navigation/tabs) for more details.",

package/dist/index.d.ts

@@ -16792,6 +16792,49 @@ declare const iconButtonStyles: {
 
 type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
 
+declare const styles$4: {
+    link: RuntimeFn<{
+        /**
+         * Determines the visual style of the link.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            inverted: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the link.
+         * @default large
+         */
+        size: {
+            large: {
+                fontSize: "1.125rem";
+                lineHeight: "1.75rem";
+                letterSpacing: ".0112rem";
+            };
+            small: {
+                fontSize: ".875rem";
+                lineHeight: "1.25rem";
+                letterSpacing: ".0088rem";
+            };
+            medium: {
+                fontSize: "1rem";
+                lineHeight: "1.5rem";
+                letterSpacing: ".01rem";
+            };
+        };
+    }>;
+};
+
+type LinkVariants = NonNullable<RecipeVariants<typeof styles$4.link>>;
+
 declare const progressStyles: {
     progress: string;
     bar: string;
@@ -16900,6 +16943,91 @@ declare const styles$3: {
 
 type RadioButtonVariants = NonNullable<RecipeVariants<typeof styles$3.radioButton>>;
 
+declare const statusStyles: {
+    status: RuntimeFn<{
+        /**
+         * Specifies whether the status should take up the full width of its container.
+         * This variant is useful when you want to make a status span the entire width of its parent container.
+         * @default false
+         *
+         */
+        full: {
+            true: {
+                width: "100%";
+            };
+        };
+        /**
+         * Determines the visual style of the status, influencing its color scheme.
+         * @default success
+         */
+        appearance: {
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            danger: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            inverted: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            info: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         * @default normal
+         */
+        size: {
+            normal: {
+                height: "1.75rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                height: "1.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the variant of the status
+         * @default solid
+         */
+        variant: {
+            solid: {};
+            text: {
+                backgroundColor: "transparent";
+            };
+            subdued: {};
+        };
+    }>;
+    dot: RuntimeFn<{
+        size: {
+            normal: {
+                height: ".5rem";
+                width: ".5rem";
+            };
+            small: {
+                height: ".25rem";
+                width: ".25rem";
+            };
+        };
+    }>;
+};
+
+type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
+
 declare const textareaStyles: {
     textarea: RuntimeFn<{
         /**
@@ -17015,6 +17143,94 @@ interface CardSprinkle {
     backgroundColor?: AddDollar<keyof typeof cardBackgroundColorProperties> | Conditions<AddDollar<keyof typeof cardBackgroundColorProperties>>;
 }
 
+declare const stepperStyles: {
+    stepper: RuntimeFn<{
+        /**
+         * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
+         * @default horizontal
+         */
+        direction: {
+            horizontal: {
+                width: "100%";
+                flexDirection: "row";
+            };
+            vertical: {
+                flexDirection: "column";
+                height: "100%";
+            };
+        };
+    }>;
+    step: RuntimeFn<{
+        direction: {
+            /**
+             * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
+             * @default horizontal
+             */
+            horizontal: {
+                flexDirection: "column";
+                ":after": {
+                    top: "20px";
+                    height: "1px";
+                    width: "calc(100% - 60px)";
+                    left: "calc(50% + 30px)";
+                };
+            };
+            vertical: {
+                ":after": {
+                    width: "1px";
+                    height: "calc(100% - 60px)";
+                    top: "calc(50% + 30px)";
+                    left: "18px";
+                };
+            };
+        };
+    }>;
+    circle: RuntimeFn<{
+        /**
+         * Indicates whether the step is currently active. An active step is typically highlighted to show that it is the current step.
+         * @default false
+         */
+        active: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Indicates whether the step has been completed. A completed step is usually marked with a checkmark or other indicator.
+         * @default false
+         */
+        done: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    separator: RuntimeFn<{
+        direction: {
+            /**
+             * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
+             * @default horizontal
+             */
+            horizontal: {
+                height: "1px";
+                marginLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                marginRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                marginTop: "20px";
+            };
+            vertical: {
+                width: "1px";
+                marginTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                marginBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                marginLeft: "18px";
+            };
+        };
+    }>;
+};
+
+type StepperVariants = NonNullable<RecipeVariants<typeof stepperStyles.stepper> & RecipeVariants<typeof stepperStyles.circle>>;
+
 type BadgeProps = BadgeVariants;
 
 interface AvatarTypings {
@@ -17036,6 +17252,8 @@ interface DividerProps extends DividerSprinkle {
 
 type IconProps = IconSprinkle;
 
+type StepperProps = Pick<StepperVariants, "direction">;
+
 interface TitleProps extends TitleSprinkle {
     /**
      * Type of html tag to create for the title.
@@ -17104,6 +17322,18 @@ interface TooltipTyping {
 }
 type TooltipProps = TooltipTyping & TooltipVariants;
 
+interface StepperStepTyping {
+    /**
+     * The title of the step. This provides a brief summary of the step's purpose.
+     */
+    title?: string;
+    /**
+     * A more detailed description of the step. This can provide additional context or instructions.
+     */
+    description?: string;
+}
+type StepperStepProps = StepperStepTyping & Pick<StepperVariants, "active" | "done">;
+
 interface ProgressTyping {
     /**
      * The progress percentage, represented as a number between 0 and 100.
@@ -17115,6 +17345,15 @@ type ProgressProps = ProgressTyping & ProgressSprinkle;
 
 type ProgressCircleProps = ProgressProps & ProgressVariants;
 
+interface StatusTyping {
+    /**
+     * Specifies whether to display a dot indicator alongside the status text. When true, a dot is shown to visually represent the status.
+     * @default true
+     */
+    dot?: boolean;
+}
+type StatusProps = StatusTyping & StatusVariants;
+
 interface ButtonTyping {
     /**
      * Disables the button, disallowing user interaction.
@@ -17187,6 +17426,8 @@ interface CardHeaderProps {
     description?: string;
 }
 
+type LinkProps = LinkVariants;
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-avatar": RaruiAvatar;
@@ -17290,6 +17531,53 @@ declare class RaruiIcon extends LitElement {
     render(): TemplateResult<1> | null;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-stepper-step": RaruiStepperStep;
+    }
+}
+/**
+ * ## Rarui Stepper Step
+ * ---
+ * Stepper transmit progress through steps.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.
+ */
+type StepperStepProperties = Partial<StepperStepProps>;
+
+declare class RaruiStepperStep extends LitElement {
+    description: StepperStepProperties["description"];
+    active: StepperStepProperties["active"];
+    done: StepperStepProperties["done"];
+    private direction;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-stepper": RaruiStepper;
+    }
+}
+/**
+ * ## Rarui Stepper
+ * ---
+ * Stepper transmit progress through steps.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.
+ */
+type StepperProperties = Partial<StepperProps>;
+
+declare class RaruiStepper extends LitElement {
+    direction: StepperProperties["direction"];
+    private assignedSteps;
+    private steps;
+    static styles: CSSResult;
+    firstUpdated(): void;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-text": RaruiText;
@@ -17457,6 +17745,31 @@ declare class RaruiProgress extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-status": RaruiStatus;
+    }
+}
+/**
+ * ## Rarui Status
+ * ---
+ * 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.
+ */
+type StatusProperties = Partial<StatusProps>;
+
+declare class RaruiStatus extends LitElement {
+    appearance?: StatusProperties["appearance"];
+    size?: StatusProperties["size"];
+    variant?: StatusProperties["variant"];
+    full?: StatusProperties["full"];
+    dot: StatusProperties["dot"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-button": RaruiButton;
@@ -17642,6 +17955,58 @@ declare class RaruiTextarea extends LitElement {
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-link": RaruiLink;
+    }
+}
+/**
+ * ## Rarui Link
+ * ---
+ * 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.
+ */
+type LinkProperties = Partial<LinkProps> & {
+    /**
+     * Defines the native type of the button.
+     * It can be `Button`, `submit` or `reset`.
+     *
+     * ** IMPORTANT: ** should only be used when `as="button"`.
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Disable the button, preventing user interactions.
+     *
+     * ** IMPORTANT: ** should only be used when `as="button"`.
+     */
+    disabled?: boolean;
+    /**
+     * Define or rendered element type.
+     *
+     * - `a`: renders an element `<a>`, ideal for navigation.
+     * - `Button`: render an element `<Button>`, ideal for actions.
+     */
+    as?: "a" | "button";
+    /**
+     * Defines the destination URL of the link.
+     *
+     * ** IMPORTANT: ** should only be used when `as="a"`.
+     */
+    href?: string;
+};
+
+declare class RaruiLink extends LitElement {
+    type: LinkProperties["type"];
+    as: LinkProperties["as"];
+    appearance?: LinkProperties["appearance"];
+    size?: LinkProperties["size"];
+    href?: LinkProperties["href"];
+    disabled: LinkProperties["disabled"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-card-header": RaruiCardHeader;