@rarui/components 1.9.0 → 1.11.0

package/dist/index.d.ts

@@ -16137,6 +16137,91 @@ declare const borderColorProperties: {
     warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 
+declare const chipStyles: {
+    chip: RuntimeFn<{
+        /**
+         * Specifies whether the chip will be displayed in the pill shape
+         * @default false
+         */
+        pill: {
+            true: {
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies whether the chip is selected
+         * @default false
+         */
+        selected: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the chip
+         * @default medium
+         */
+        size: {
+            medium: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                height: "2rem";
+            };
+            small: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                height: "1.5rem";
+            };
+        };
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         * @default false
+         */
+        textOverflow: {
+            true: {
+                minWidth: "auto";
+                width: "100%";
+            };
+        };
+    }>;
+    content: RuntimeFn<{
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         */
+        textOverflow: {
+            true: {
+                textOverflow: "ellipsis";
+                whiteSpace: "nowrap";
+                width: "100%";
+                display: "block";
+                overflow: "hidden";
+            };
+        };
+    }>;
+    close: string;
+    overlay: string;
+};
+declare const paddingProperties: {
+    medium: string;
+    small: string;
+};
+
+type ChipVariants = NonNullable<RecipeVariants<typeof chipStyles.chip>>;
+type ChipDynamicProperties = Pick<StandardLonghandProperties, "textTransform">;
+interface ChipSprinkle extends ChipDynamicProperties {
+    /**
+     * The padding properties are used to generate space around an chip's content area.
+     */
+    padding?: AddDollar<keyof typeof paddingProperties> | Conditions<AddDollar<keyof typeof paddingProperties>>;
+}
+
 declare const dividerBorderWidthProperties: {
     "1": string;
     "2": string;
@@ -16888,6 +16973,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 {
@@ -16909,6 +17082,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.
@@ -16977,6 +17152,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.
@@ -17009,6 +17196,15 @@ interface CheckboxTyping {
 }
 type CheckboxProps = CheckboxTyping & CheckboxVariants;
 
+interface ChipTyping extends ChipSprinkle {
+    /**
+     * Displays a delete icon and adds user interaction.
+     * @default false
+     */
+    closeable?: boolean;
+}
+type ChipProps = ChipTyping & ChipVariants;
+
 interface IconButtonTyping {
     /**
      * Disables the button, disallowing user interaction.
@@ -17154,6 +17350,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;
@@ -17378,6 +17621,42 @@ declare class RaruiCheckbox extends LitElement {
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-chip": RaruiChip;
+    }
+}
+/**
+ * ## Rarui Chip
+ * ---
+ * 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.
+ */
+type ChipProperties = Partial<ChipProps> & {
+    /**
+     * Disables the chip, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare class RaruiChip extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    padding: ChipProperties["padding"];
+    size?: ChipProperties["size"];
+    closeable: ChipProperties["closeable"];
+    pill: ChipProperties["pill"];
+    textTransform?: ChipProperties["textTransform"];
+    textOverflow?: ChipProperties["textOverflow"];
+    selected?: ChipProperties["selected"];
+    disabled?: ChipProperties["disabled"];
+    static styles: CSSResult;
+    private handleClick;
+    private handleCloseClick;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-icon-button": RaruiIconButton;