@rarui/components 1.8.0 → 1.10.0

package/dist/index.d.ts

@@ -16179,6 +16179,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;
@@ -16208,6 +16293,14 @@ interface DividerSprinkle {
     color?: AddDollar<keyof typeof borderColorProperties> | Conditions<AddDollar<keyof typeof borderColorProperties>>;
 }
 
+type IconDynamicProperties = Pick<StandardLonghandProperties, "cursor">;
+interface IconSprinkle extends IconDynamicProperties {
+    /**
+     * The color property sets the icon.
+     */
+    color?: AddDollar<keyof typeof colorProperties> | Conditions<AddDollar<keyof typeof colorProperties>>;
+}
+
 declare const textLineHeightProperties: {
     xxs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -16593,6 +16686,112 @@ declare const checkboxStyles: {
 
 type CheckboxVariants = NonNullable<RecipeVariants<typeof checkboxStyles.checkbox>>;
 
+declare const iconButtonStyles: {
+    iconButton: RuntimeFn<{
+        /**
+         * Determines the visual style of the icon button, influencing its color scheme and appearance.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `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})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `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})`;
+                borderColor: `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})`;
+                borderColor: `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})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Defines the size of the icon button component.
+         * @default medium
+         */
+        size: {
+            large: {
+                height: "3rem";
+                width: "3rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                height: "2.5rem";
+                width: "2.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                height: "2rem";
+                width: "2rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        variant: {
+            /**
+             * Defines the visual variant of the icon button, affecting its background style, border and text.
+             * @default solid
+             */
+            solid: {
+                selectors: {
+                    "&:hover:after": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:active:after": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            outlined: {
+                backgroundColor: "transparent";
+            };
+            ghost: {
+                backgroundColor: "transparent";
+                borderColor: "transparent";
+            };
+            tonal: {
+                borderColor: "transparent";
+            };
+        };
+        /**
+         * Defines if the button should have rounded edges.
+         *
+         * - `true`: The button will be rendered with completely rounded edges, useful for circular -shaped icons.
+         * - `false` (default): The button will have standard edges or defined by the component style.
+         * @default false
+         */
+        rounded: {
+            true: {
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":after": {
+                    borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+};
+
+type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
+
 declare const progressStyles: {
     progress: string;
     bar: string;
@@ -16835,6 +17034,8 @@ interface DividerProps extends DividerSprinkle {
     direction?: "vertical" | "horizontal";
 }
 
+type IconProps = IconSprinkle;
+
 interface TitleProps extends TitleSprinkle {
     /**
      * Type of html tag to create for the title.
@@ -16935,6 +17136,24 @@ 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.
+     * @default false
+     */
+    disabled?: boolean;
+}
+type IconButtonProps = IconButtonTyping & IconButtonVariants;
+
 interface RadioButtonTyping {
     /**
      * Sets radio state to activated or deactivated.
@@ -17035,6 +17254,42 @@ declare class RaruiDivider extends LitElement {
     render(): TemplateResult<1>;
 }
 
+type IconName = "phone-call-outlined" | "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-icon": RaruiIcon;
+    }
+}
+/**
+ * ## Rarui Icon
+ * ---
+ * 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.
+ */
+type Sizes = "small" | "medium" | "large";
+type IconProperties = IconProps & {
+    /**
+     * Name of the icon to be rendered (must be in the @rarui/icons package).
+     */
+    name: IconName;
+    /**
+     * Icon size, can be 'small' |'medium' |'large' or a number.
+     * @default medium
+     */
+    size?: Sizes | number;
+};
+
+declare class RaruiIcon extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    name: IconProperties["name"];
+    size: Sizes | string;
+    static styles: CSSResult;
+    private getSvgWithSize;
+    render(): TemplateResult<1> | null;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-text": RaruiText;
@@ -17259,6 +17514,66 @@ 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;
+    }
+}
+/**
+ * ## Rarui Icon Button
+ * ---
+ * 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.
+ */
+type IconButtonProperties = Partial<IconButtonProps>;
+
+declare class RaruiIconButton extends LitElement {
+    size: IconButtonProperties["size"];
+    variant: IconButtonProperties["variant"];
+    appearance: IconButtonProperties["appearance"];
+    disabled: IconButtonProperties["disabled"];
+    rounded: IconButtonProperties["rounded"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-radio-button": RaruiRadioButton;