@rarui/components 1.2.0 → 1.4.0

package/dist/index.d.ts

@@ -12474,6 +12474,109 @@ type RuntimeFn<Variants extends VariantGroups> = ((options?: Resolve<VariantSele
 };
 type RecipeVariants<RecipeFn extends RuntimeFn<VariantGroups>> = Resolve<Parameters<RecipeFn>[0]>;
 
+interface Conditions<T> {
+    xs?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+}
+type AddDollar<T extends string> = `$${T}`;
+declare const borderColorProperties: {
+    transparent: string;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    divider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    subdued: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+declare const dividerBorderWidthProperties: {
+    "1": string;
+    "2": string;
+};
+
+type DividerBorderStyle = "solid" | "dashed";
+interface DividerSprinkle {
+    /**
+     * The **`size`** CSS property sets an element's area.
+     * @default 100%
+     */
+    size?: string | Conditions<string>;
+    /**
+     * The **`type`** shorthand CSS property sets the line style for all four sides of an element's.
+     */
+    type?: AddDollar<DividerBorderStyle> | Conditions<AddDollar<DividerBorderStyle>>;
+    /**
+     * The **`thickness`** shorthand CSS property sets the width of an element's.
+     */
+    thickness?: AddDollar<keyof typeof dividerBorderWidthProperties> | Conditions<AddDollar<keyof typeof dividerBorderWidthProperties>>;
+    /**
+     * The **`color`** CSS property sets an element's color.
+     */
+    color?: AddDollar<keyof typeof borderColorProperties> | Conditions<AddDollar<keyof typeof borderColorProperties>>;
+}
+
+declare const avatarStyles: {
+    container: string;
+    avatar: RuntimeFn<{
+        /**
+         * Specifies the size of the Avatar component.
+         * @default medium
+         */
+        size: {
+            small: {
+                width: "20px";
+                height: "20px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                width: "30px";
+                height: "30px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            large: {
+                width: "40px";
+                height: "40px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            xLarge: {
+                width: "60px";
+                height: "60px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    badge: RuntimeFn<{
+        size: {
+            small: {
+                left: "18px";
+            };
+            medium: {
+                left: "24px";
+            };
+            large: {
+                top: "-4px";
+                left: "30px";
+            };
+            xLarge: {
+                left: "44px";
+            };
+        };
+    }>;
+};
+
+type AvatarVariants = NonNullable<RecipeVariants<typeof avatarStyles.avatar>>;
+
 declare const badgeStyles: {
     badge: RuntimeFn<{
         /**
@@ -12564,6 +12667,42 @@ type BadgeVariants = NonNullable<RecipeVariants<typeof badgeStyles.badge>>;
 
 type BadgeProps = BadgeVariants;
 
+interface AvatarTypings {
+    /**
+     * Renders a Badge component along with the Avatar. The badge prop accepts an object of type Badge, representing the Badge component.
+     * @TJS-type Badge
+     */
+    badge?: BadgeProps;
+}
+type AvatarProps = AvatarTypings & AvatarVariants;
+
+interface DividerProps extends DividerSprinkle {
+    /**
+     * The direction of the Divider.
+     */
+    direction?: "vertical" | "horizontal";
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-avatar": RaruiAvatar;
+    }
+}
+/**
+ * ## Rarui Avatar
+ * ---
+ * 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.
+ */
+type AvatarProperties = Pick<AvatarProps, "size">;
+
+declare class RaruiAvatar extends LitElement {
+    size?: AvatarProperties["size"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-badge": RaruiBagde;
@@ -12576,7 +12715,7 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.
  */
-type BadgeProperties = BadgeProps;
+type BadgeProperties = Partial<BadgeProps>;
 
 declare class RaruiBagde extends LitElement {
     variant?: BadgeProperties["variant"];
@@ -12585,3 +12724,28 @@ declare class RaruiBagde extends LitElement {
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-divider": RaruiDivider;
+    }
+}
+/**
+ * ## Rarui Divider
+ * ---
+ * 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.
+ */
+type DividerProperties = Partial<DividerProps>;
+
+declare class RaruiDivider extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    direction?: DividerProperties["direction"];
+    type?: DividerProperties["type"];
+    thickness?: DividerProperties["thickness"];
+    color?: DividerProperties["color"];
+    size?: DividerProperties["size"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}