@ropav/styles 0.6.0 → 0.7.0

package/dist/components/autocomplete/autocomplete.styles.d.ts

@@ -1,109 +1,60 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const autocompleteVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    clearButton: string;
-    filter: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    clearButton: string;
-    filter: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    clearButton: string;
-    filter: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const autocompleteVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {
+    fullWidth?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "primary" | "secondary" | undefined;
+}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    clearButton: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    filter: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    indicator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    popover: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    trigger: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    value: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 export type AutocompleteVariants = VariantProps<typeof autocompleteVariants>;
 //# sourceMappingURL=autocomplete.styles.d.ts.map

package/dist/components/autocomplete/autocomplete.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAiB3B,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,EAAE;YACA,IAAI;YACJ,OAAO;;QAET,EAAE;QACF,EAAE;YACA,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/autocomplete/autocomplete.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/autocomplete/autocomplete.styles.ts
 const autocompleteVariants = tv({
 	defaultVariants: {
@@ -7,36 +7,36 @@ const autocompleteVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "autocomplete",
-		clearButton: "autocomplete__clear-button",
-		filter: "autocomplete__filter",
-		indicator: "autocomplete__indicator",
-		popover: "autocomplete__popover",
-		trigger: "autocomplete__trigger",
-		value: "autocomplete__value"
+		base: "rp-autocomplete",
+		clearButton: "rp-autocomplete__clear-button",
+		filter: "rp-autocomplete__filter",
+		indicator: "rp-autocomplete__indicator",
+		popover: "rp-autocomplete__popover",
+		trigger: "rp-autocomplete__trigger",
+		value: "rp-autocomplete__value"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
 			true: {
-				base: "autocomplete--full-width",
-				trigger: "autocomplete__trigger--full-width"
+				base: "rp-autocomplete--full-width",
+				trigger: "rp-autocomplete__trigger--full-width"
 			}
 		},
 		size: {
 			lg: {
-				base: "autocomplete--lg",
-				popover: "autocomplete__popover--lg"
+				base: "rp-autocomplete--lg",
+				popover: "rp-autocomplete__popover--lg"
 			},
 			md: {},
 			sm: {
-				base: "autocomplete--sm",
-				popover: "autocomplete__popover--sm"
+				base: "rp-autocomplete--sm",
+				popover: "rp-autocomplete__popover--sm"
 			}
 		},
 		variant: {
-			primary: { base: "autocomplete--primary" },
-			secondary: { base: "autocomplete--secondary" }
+			primary: { base: "rp-autocomplete--primary" },
+			secondary: { base: "rp-autocomplete--secondary" }
 		}
 	}
 });

package/dist/components/autocomplete.css

@@ -1,9 +1,9 @@
 /* Autocomplete styles */
-.autocomplete {
+.rp-autocomplete {
   @apply flex flex-col gap-1;
 }
 
-.autocomplete__trigger {
+.rp-autocomplete__trigger {
   @apply relative isolate inline-flex min-h-9 rounded-field border px-3 field-line-md text-field-foreground shadow-field outline-none select-none no-highlight;
 
   /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
@@ -34,14 +34,14 @@
   border-color: var(--field-border);
 
   /* Add inline-end padding when indicator is present */
-  &:has(.autocomplete__indicator) {
+  &:has(.rp-autocomplete__indicator) {
     @apply pe-7;
   }
 
   /* Hover state - exclude when clear button is hovered to prevent double hover effect */
   @media (hover: hover) {
-    &:hover:not(:has(.autocomplete__clear-button:hover)),
-    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
+    &:hover:not(:has(.rp-autocomplete__clear-button:hover)),
+    &[data-hovered="true"]:not(:has(.rp-autocomplete__clear-button:hover)) {
       background-color: var(--autocomplete-trigger-bg-hover);
       border-color: var(--field-border-hover);
     }
@@ -61,8 +61,8 @@
   }
 
   /* Invalid state */
-  .autocomplete[data-invalid="true"] &,
-  .autocomplete[aria-invalid="true"] & {
+  .rp-autocomplete[data-invalid="true"] &,
+  .rp-autocomplete[aria-invalid="true"] & {
     @apply status-invalid-field;
     background-color: var(--autocomplete-trigger-bg-focus);
   }
@@ -76,11 +76,11 @@
 }
 
 /* Variant property definitions */
-.autocomplete--primary {
+.rp-autocomplete--primary {
   /* Default styles */
 }
 
-.autocomplete--secondary .autocomplete__trigger {
+.rp-autocomplete--secondary .rp-autocomplete__trigger {
   @apply shadow-none;
 
   --autocomplete-trigger-bg: var(--default);
@@ -88,7 +88,7 @@
   --autocomplete-trigger-bg-focus: var(--default);
 }
 
-.autocomplete__value {
+.rp-autocomplete__value {
   @apply flex-1 text-start wrap-break-word;
 
   --autocomplete-value-fg: currentcolor;
@@ -106,7 +106,7 @@
   }
 }
 
-.autocomplete__indicator {
+.rp-autocomplete__indicator {
   @apply absolute inset-y-0 end-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150;
 
   /* Cursor */
@@ -122,7 +122,7 @@
 }
 
 /* Similar to popover content styles */
-.autocomplete__popover {
+.rp-autocomplete__popover {
   @apply flex w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 flex-col overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none;
   border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
@@ -226,16 +226,16 @@
 }
 
 /* Full width modifier */
-.autocomplete--full-width {
+.rp-autocomplete--full-width {
   @apply w-full;
 }
 
-.autocomplete__trigger--full-width {
+.rp-autocomplete__trigger--full-width {
   @apply w-full;
 }
 
 /* Clear Button styles */
-.autocomplete__clear-button {
+.rp-autocomplete__clear-button {
   @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 text-muted select-none no-highlight;
   @apply me-0 size-5 shrink-0 self-center;
 
@@ -286,21 +286,21 @@
 
 /* The trigger's own metrics, and the option rows in a popover that is portalled out of this tree -
  * which is why the popover carries its own size class rather than being reached from the base. */
-.autocomplete--sm .autocomplete__trigger {
+.rp-autocomplete--sm .rp-autocomplete__trigger {
   @apply min-h-8 field-line-sm;
 }
 
-.autocomplete--lg .autocomplete__trigger {
+.rp-autocomplete--lg .rp-autocomplete__trigger {
   @apply min-h-10 field-line-lg;
 }
 
-.autocomplete__popover--sm {
+.rp-autocomplete__popover--sm {
   [data-slot="list-box-item"] {
     @apply min-h-8 py-1;
   }
 }
 
-.autocomplete__popover--lg {
+.rp-autocomplete__popover--lg {
   @apply text-base;
 
   [data-slot="list-box-item"] {

package/dist/components/avatar/avatar.styles.d.ts

@@ -1,121 +1,32 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        accent: {
-            fallback: string;
-        };
-        danger: {
-            fallback: string;
-        };
-        default: {
-            fallback: string;
-        };
-        success: {
-            fallback: string;
-        };
-        warning: {
-            fallback: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        default: {};
-        soft: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    fallback: string;
-    image: string;
-}, undefined, {
-    color: {
-        accent: {
-            fallback: string;
-        };
-        danger: {
-            fallback: string;
-        };
-        default: {
-            fallback: string;
-        };
-        success: {
-            fallback: string;
-        };
-        warning: {
-            fallback: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        default: {};
-        soft: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    fallback: string;
-    image: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    color: {
-        accent: {
-            fallback: string;
-        };
-        danger: {
-            fallback: string;
-        };
-        default: {
-            fallback: string;
-        };
-        success: {
-            fallback: string;
-        };
-        warning: {
-            fallback: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        default: {};
-        soft: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    fallback: string;
-    image: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const avatarVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {
+    color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "default" | "soft" | undefined;
+}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "default" | "soft" | undefined;
+    }) | undefined) => string;
+    fallback: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "default" | "soft" | undefined;
+    }) | undefined) => string;
+    image: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "default" | "soft" | undefined;
+    }) | undefined) => string;
+};
 export type AvatarVariants = VariantProps<typeof avatarVariants>;
 //# sourceMappingURL=avatar.styles.d.ts.map

package/dist/components/avatar/avatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,cAAc;;QAYrB,MAAM;YACJ,QAAQ;;QAEV,MAAM;YACJ,QAAQ;;QAEV,OAAO;YACL,QAAQ;;QAEV,OAAO;YACL,QAAQ;;QAEV,OAAO;YACL,QAAQ;;;;QAIV,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;QAIN,OAAO;QACP,IAAI;YACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/avatar/avatar.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/avatar/avatar.styles.ts
 const avatarVariants = tv({
 	defaultVariants: {
@@ -6,26 +6,26 @@ const avatarVariants = tv({
 		size: "md"
 	},
 	slots: {
-		base: "avatar",
-		fallback: "avatar__fallback",
-		image: "avatar__image"
+		base: "rp-avatar",
+		fallback: "rp-avatar__fallback",
+		image: "rp-avatar__image"
 	},
 	variants: {
 		color: {
-			accent: { fallback: "avatar__fallback--accent" },
-			danger: { fallback: "avatar__fallback--danger" },
-			default: { fallback: "avatar__fallback--default" },
-			success: { fallback: "avatar__fallback--success" },
-			warning: { fallback: "avatar__fallback--warning" }
+			accent: { fallback: "rp-avatar__fallback--accent" },
+			danger: { fallback: "rp-avatar__fallback--danger" },
+			default: { fallback: "rp-avatar__fallback--default" },
+			success: { fallback: "rp-avatar__fallback--success" },
+			warning: { fallback: "rp-avatar__fallback--warning" }
 		},
 		size: {
-			lg: { base: "avatar--lg" },
-			md: { base: "avatar--md" },
-			sm: { base: "avatar--sm" }
+			lg: { base: "rp-avatar--lg" },
+			md: { base: "rp-avatar--md" },
+			sm: { base: "rp-avatar--sm" }
 		},
 		variant: {
 			default: {},
-			soft: { base: "avatar--soft" }
+			soft: { base: "rp-avatar--soft" }
 		}
 	}
 });

package/dist/components/avatar.css

@@ -1,5 +1,5 @@
 /* Base avatar styles */
-.avatar {
+.rp-avatar {
   @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-3xl bg-default;
 
   /* Forced Colors Mode flattens the fill onto the page, so a fallback avatar is initials sitting
@@ -13,12 +13,12 @@
 }
 
 /* Avatar fallback element */
-.avatar__fallback {
+.rp-avatar__fallback {
   @apply flex size-full items-center justify-center bg-default text-sm font-medium;
 }
 
 /* Avatar image element */
-.avatar__image {
+.rp-avatar__image {
   @apply absolute inset-0 aspect-square size-full;
 
   /**
@@ -28,64 +28,64 @@
 }
 
 /* Size modifiers */
-.avatar--sm {
+.rp-avatar--sm {
   @apply size-8 rounded-2xl;
 }
 
-.avatar--md {
+.rp-avatar--md {
   /* No styles as this is the default size */
 }
 
-.avatar--lg {
+.rp-avatar--lg {
   @apply size-12 rounded-3xl;
 
-  .avatar__fallback {
+  .rp-avatar__fallback {
     @apply text-base;
   }
 }
 
 /* Color modifiers for fallback */
-.avatar__fallback--accent {
+.rp-avatar__fallback--accent {
   @apply text-accent-soft-foreground;
 }
 
-.avatar__fallback--default {
+.rp-avatar__fallback--default {
   @apply text-default-soft-foreground;
 }
 
-.avatar__fallback--success {
+.rp-avatar__fallback--success {
   @apply text-success-soft-foreground;
 }
 
-.avatar__fallback--warning {
+.rp-avatar__fallback--warning {
   @apply text-warning-soft-foreground;
 }
 
-.avatar__fallback--danger {
+.rp-avatar__fallback--danger {
   @apply text-danger-soft-foreground;
 }
 
 /* Variant modifiers */
-.avatar--soft {
+.rp-avatar--soft {
   @apply bg-transparent;
 }
 
-.avatar--soft .avatar__fallback--accent {
+.rp-avatar--soft .rp-avatar__fallback--accent {
   @apply bg-accent-soft text-accent-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--success {
+.rp-avatar--soft .rp-avatar__fallback--success {
   @apply bg-success-soft text-success-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--warning {
+.rp-avatar--soft .rp-avatar__fallback--warning {
   @apply bg-warning-soft text-warning-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--default {
+.rp-avatar--soft .rp-avatar__fallback--default {
   @apply bg-default-soft text-default-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--danger {
+.rp-avatar--soft .rp-avatar__fallback--danger {
   @apply bg-danger-soft text-danger-soft-foreground;
 }