@ropav/styles 0.6.0 → 0.7.0

package/dist/components/chip.css

@@ -1,5 +1,5 @@
 /* Base styles */
-.chip {
+.rp-chip {
   @apply inline-flex w-fit shrink-0 items-center gap-0.5 px-2 py-0.5 text-xs leading-5 font-medium;
 
   border-radius: min(32px, var(--component-radius));
@@ -18,40 +18,40 @@
    * What cannot come back is the status. The mode has no keyword for success or warning, so
    * every colour collapses onto one appearance and the label is what has to carry the
    * meaning - which is the same reason a chip should not lean on colour alone in the first
-   * place. Only the emphasis split survives, on `.chip--primary` below. */
+   * place. Only the emphasis split survives, on `.rp-chip--primary` below. */
   @media (forced-colors: active) {
     outline: 1px solid CanvasText;
     outline-offset: -1px;
   }
 }
 
-.chip__label {
+.rp-chip__label {
   @apply px-0.5;
 }
 
 /* Color variants - set foreground color */
-.chip--accent {
+.rp-chip--accent {
   --chip-fg: var(--accent-soft-foreground);
 }
 
-.chip--danger {
+.rp-chip--danger {
   --chip-fg: var(--danger-soft-foreground);
 }
 
-.chip--default {
+.rp-chip--default {
   --chip-fg: var(--default-foreground);
 }
 
-.chip--success {
+.rp-chip--success {
   --chip-fg: var(--success-soft-foreground);
 }
 
-.chip--warning {
+.rp-chip--warning {
   --chip-fg: var(--warning-soft-foreground);
 }
 
 /* Variant styles */
-.chip--primary {
+.rp-chip--primary {
   /* The one distinction worth keeping: solid against outlined. `forced-color-adjust` is what
    * makes it readable - without it Chromium paints a `Canvas` backplate over this fill and the
    * label goes with it. */
@@ -62,24 +62,24 @@
   }
 }
 
-.chip--secondary {
+.rp-chip--secondary {
   /* No additional styles for secondary variant */
 }
 
-.chip--tertiary {
+.rp-chip--tertiary {
   --chip-bg: transparent;
 }
 
 /* Size variants */
-.chip--sm {
+.rp-chip--sm {
   @apply px-1 py-0 text-xs;
 }
 
-.chip--md {
+.rp-chip--md {
   @apply text-xs;
 }
 
-.chip--lg {
+.rp-chip--lg {
   @apply px-3 py-1 text-sm font-medium;
 }
 
@@ -88,48 +88,48 @@
 /* ====================== */
 
 /* Primary variants - solid backgrounds */
-.chip--primary.chip--accent {
+.rp-chip--primary.rp-chip--accent {
   --chip-bg: var(--accent);
   --chip-fg: var(--accent-foreground);
 }
 
-.chip--primary.chip--success {
+.rp-chip--primary.rp-chip--success {
   --chip-bg: var(--success);
   --chip-fg: var(--success-foreground);
 }
 
-.chip--primary.chip--warning {
+.rp-chip--primary.rp-chip--warning {
   --chip-bg: var(--warning);
   --chip-fg: var(--warning-foreground);
 }
 
-.chip--primary.chip--danger {
+.rp-chip--primary.rp-chip--danger {
   --chip-bg: var(--danger);
   --chip-fg: var(--danger-foreground);
 }
 
 /* Soft variants - muted backgrounds */
-.chip--accent.chip--soft {
+.rp-chip--accent.rp-chip--soft {
   --chip-bg: var(--accent-soft);
   --chip-fg: var(--accent-soft-foreground);
 }
 
-.chip--success.chip--soft {
+.rp-chip--success.rp-chip--soft {
   --chip-bg: var(--success-soft);
   --chip-fg: var(--success-soft-foreground);
 }
 
-.chip--warning.chip--soft {
+.rp-chip--warning.rp-chip--soft {
   --chip-bg: var(--warning-soft);
   --chip-fg: var(--warning-soft-foreground);
 }
 
-.chip--danger.chip--soft {
+.rp-chip--danger.rp-chip--soft {
   --chip-bg: var(--danger-soft);
   --chip-fg: var(--danger-soft-foreground);
 }
 
-.chip--default.chip--soft {
+.rp-chip--default.rp-chip--soft {
   --chip-bg: var(--default-soft);
   --chip-fg: var(--default-soft-foreground);
 }

package/dist/components/close-button/close-button.styles.d.ts

@@ -1,16 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "close-button--default";
-    };
-}, undefined, "close-button", {
-    variant: {
-        default: "close-button--default";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "close-button--default";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const closeButtonVariants: (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;
+} & {
+    variant?: "default" | undefined;
+}) | undefined) => string;
 export type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;
 //# sourceMappingURL=close-button.styles.d.ts.map

package/dist/components/close-button/close-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/close-button/close-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;;;;;;;;;;;cAU9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"close-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/close-button/close-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,mBAAmB;;;;yBAU9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/close-button/close-button.styles.js

@@ -1,9 +1,9 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/close-button/close-button.styles.ts
 const closeButtonVariants = tv({
-	base: "close-button",
+	base: "rp-close-button",
 	defaultVariants: { variant: "default" },
-	variants: { variant: { default: "close-button--default" } }
+	variants: { variant: { default: "rp-close-button--default" } }
 });
 //#endregion
 export { closeButtonVariants };

package/dist/components/close-button.css

@@ -1,7 +1,7 @@
 /* Close Button component styles */
 
 /* Base close button styles */
-.close-button {
+.rp-close-button {
   @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 select-none no-highlight;
 
   /* Cursor */
@@ -40,7 +40,7 @@
 }
 
 /* Variants */
-.close-button--default {
+.rp-close-button--default {
   @apply text-muted;
 
   --close-button-bg: var(--default);

package/dist/components/color-area/color-area.styles.d.ts

@@ -1,34 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const colorAreaVariants: import("tailwind-variants").TVReturnType<{
-    showDots: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    thumb: string;
-}, undefined, {
-    showDots: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    thumb: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    showDots: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    thumb: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const colorAreaVariants: (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;
+} & {
+    showDots?: boolean | 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;
+    } & {
+        showDots?: boolean | undefined;
+    }) | undefined) => string;
+    thumb: (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;
+    } & {
+        showDots?: boolean | undefined;
+    }) | undefined) => string;
+};
 export type ColorAreaVariants = VariantProps<typeof colorAreaVariants>;
 //# sourceMappingURL=color-area.styles.d.ts.map

package/dist/components/color-area/color-area.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-area.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-area/color-area.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB;;QAUxB,KAAK;QACL,IAAI;YACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"color-area.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-area/color-area.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;CAgB5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/color-area/color-area.styles.js

@@ -1,14 +1,14 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/color-area/color-area.styles.ts
 const colorAreaVariants = tv({
 	defaultVariants: { showDots: false },
 	slots: {
-		base: "color-area",
-		thumb: "color-area__thumb"
+		base: "rp-color-area",
+		thumb: "rp-color-area__thumb"
 	},
 	variants: { showDots: {
 		false: {},
-		true: { base: "color-area--show-dots" }
+		true: { base: "rp-color-area--show-dots" }
 	} }
 });
 //#endregion

package/dist/components/color-area.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base styles */
-.color-area {
+.rp-color-area {
   @apply relative w-full max-w-56 shrink-0 no-highlight;
 
   border-radius: min(32px, var(--component-radius));
@@ -27,7 +27,7 @@
    Dots overlay variant
    ========================================================================== */
 
-.color-area--show-dots {
+.rp-color-area--show-dots {
   /* Dot pattern overlay using radial gradient */
   &::after {
     content: "";
@@ -42,7 +42,7 @@
    Thumb element
    ========================================================================== */
 
-.color-area__thumb {
+.rp-color-area__thumb {
   @apply size-4 will-change-[width,height];
 
   border-radius: min(32px, var(--component-radius));

package/dist/components/color-field/color-field.styles.d.ts

@@ -1,19 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const colorFieldVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: "";
-        true: "color-field--full-width";
-    };
-}, undefined, "color-field", {
-    fullWidth: {
-        false: "";
-        true: "color-field--full-width";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: "";
-        true: "color-field--full-width";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const colorFieldVariants: (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;
+}) | undefined) => string;
 export type ColorFieldVariants = VariantProps<typeof colorFieldVariants>;
 //# sourceMappingURL=color-field.styles.d.ts.map

package/dist/components/color-field/color-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-field/color-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;cAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"color-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-field/color-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,kBAAkB;;;;yBAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/color-field/color-field.styles.js

@@ -1,11 +1,11 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/color-field/color-field.styles.ts
 const colorFieldVariants = tv({
-	base: "color-field",
+	base: "rp-color-field",
 	defaultVariants: { fullWidth: false },
 	variants: { fullWidth: {
 		false: "",
-		true: "color-field--full-width"
+		true: "rp-color-field--full-width"
 	} }
 });
 //#endregion

package/dist/components/color-field.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base styles */
-.color-field {
+.rp-color-field {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -19,6 +19,6 @@
 }
 
 /* Full width modifier */
-.color-field--full-width {
+.rp-color-field--full-width {
   @apply w-full;
 }

package/dist/components/color-input-group/color-input-group.styles.d.ts

@@ -1,91 +1,39 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const colorInputGroupVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    prefix: string;
-    suffix: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    prefix: string;
-    suffix: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    prefix: string;
-    suffix: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const colorInputGroupVariants: (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;
+    input: (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;
+    prefix: (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;
+    suffix: (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 ColorInputGroupVariants = VariantProps<typeof colorInputGroupVariants>;
 //# sourceMappingURL=color-input-group.styles.d.ts.map

package/dist/components/color-input-group/color-input-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-input-group/color-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,uBAAuB;;QAc9B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;QACF,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"color-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-input-group/color-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/components/color-input-group/color-input-group.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/color-input-group/color-input-group.styles.ts
 const colorInputGroupVariants = tv({
 	defaultVariants: {
@@ -7,24 +7,24 @@ const colorInputGroupVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "color-input-group",
-		input: "color-input-group__input",
-		prefix: "color-input-group__prefix",
-		suffix: "color-input-group__suffix"
+		base: "rp-color-input-group",
+		input: "rp-color-input-group__input",
+		prefix: "rp-color-input-group__prefix",
+		suffix: "rp-color-input-group__suffix"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
-			true: { base: "color-input-group--full-width" }
+			true: { base: "rp-color-input-group--full-width" }
 		},
 		size: {
-			lg: { base: "color-input-group--lg" },
+			lg: { base: "rp-color-input-group--lg" },
 			md: {},
-			sm: { base: "color-input-group--sm" }
+			sm: { base: "rp-color-input-group--sm" }
 		},
 		variant: {
-			primary: { base: "color-input-group--primary" },
-			secondary: { base: "color-input-group--secondary" }
+			primary: { base: "rp-color-input-group--primary" },
+			secondary: { base: "rp-color-input-group--secondary" }
 		}
 	}
 });

package/dist/components/color-input-group.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base styles */
-.color-input-group {
+.rp-color-input-group {
   @apply inline-flex h-9 items-center overflow-hidden rounded-field border text-sm text-field-foreground shadow-field outline-none;
 
   /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
@@ -63,7 +63,7 @@
    Elements
    ========================================================================== */
 
-.color-input-group__input {
+.rp-color-input-group__input {
   @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Placeholder styling */
@@ -72,12 +72,12 @@
   }
 
   /* Remove border radius on left side when prefix is present */
-  .color-input-group:has([data-slot="color-input-group-prefix"]) & {
+  .rp-color-input-group:has([data-slot="color-input-group-prefix"]) & {
     @apply rounded-s-none ps-2;
   }
 
   /* Remove border radius on right side when suffix is present */
-  .color-input-group:has([data-slot="color-input-group-suffix"]) & {
+  .rp-color-input-group:has([data-slot="color-input-group-suffix"]) & {
     @apply rounded-e-none pe-2;
   }
 
@@ -88,12 +88,12 @@
   }
 }
 
-.color-input-group__prefix {
+.rp-color-input-group__prefix {
   @apply shrink-0 text-field-placeholder;
   @apply ms-3 me-0 flex items-center;
 }
 
-.color-input-group__suffix {
+.rp-color-input-group__suffix {
   @apply shrink-0 text-field-placeholder;
   @apply me-3 flex items-center;
 }
@@ -102,11 +102,11 @@
    Variant modifiers
    ========================================================================== */
 
-.color-input-group--primary {
+.rp-color-input-group--primary {
   /* Default styles - primary variant uses the base field styling */
 }
 
-.color-input-group--secondary {
+.rp-color-input-group--secondary {
   @apply shadow-none;
 
   --color-input-group-bg: var(--default);
@@ -122,7 +122,7 @@
    Full width modifier
    ========================================================================== */
 
-.color-input-group--full-width {
+.rp-color-input-group--full-width {
   @apply w-full;
 }
 
@@ -130,18 +130,18 @@
    Size variants
    ========================================================================== */
 
-.color-input-group--sm {
+.rp-color-input-group--sm {
   @apply h-8;
 
-  .color-input-group__input {
+  .rp-color-input-group__input {
     @apply field-line-sm;
   }
 }
 
-.color-input-group--lg {
+.rp-color-input-group--lg {
   @apply h-10;
 
-  .color-input-group__input {
+  .rp-color-input-group__input {
     @apply field-line-lg;
   }
 }