@ropav/styles 0.5.0 → 0.7.0

package/dist/components/kbd/kbd.styles.js

@@ -1,15 +1,15 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/kbd/kbd.styles.ts
 const kbdVariants = tv({
 	defaultVariants: {},
 	slots: {
-		abbr: "kbd__abbr",
-		base: "kbd",
-		content: "kbd__content"
+		abbr: "rp-kbd__abbr",
+		base: "rp-kbd",
+		content: "rp-kbd__content"
 	},
 	variants: { variant: {
-		default: "kbd--default",
-		light: "kbd--light"
+		default: "rp-kbd--default",
+		light: "rp-kbd--light"
 	} }
 });
 //#endregion

package/dist/components/kbd.css

@@ -1,11 +1,13 @@
 /* Base styles */
-.kbd {
-  @apply inline-flex h-6 items-center space-x-0.5 rounded-lg bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse;
+.rp-kbd {
+  @apply inline-flex h-6 items-center space-x-0.5 bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse;
+
+  border-radius: min(32px, var(--component-radius));
   word-spacing: -0.25rem;
 }
 
 /* Key abbreviation styles */
-.kbd__abbr {
+.rp-kbd__abbr {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -15,13 +17,13 @@
 }
 
 /* Content wrapper */
-.kbd__content {
+.rp-kbd__content {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 /* Variant styles */
-.kbd--light {
+.rp-kbd--light {
   @apply bg-transparent;
 }

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

@@ -1,34 +1,10 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const labelVariants: import("tailwind-variants").TVReturnType<{
-    isDisabled: {
-        true: "label--disabled";
-    };
-    isInvalid: {
-        true: "label--invalid";
-    };
-    isRequired: {
-        true: "label--required";
-    };
-}, undefined, "label", {
-    isDisabled: {
-        true: "label--disabled";
-    };
-    isInvalid: {
-        true: "label--invalid";
-    };
-    isRequired: {
-        true: "label--required";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    isDisabled: {
-        true: "label--disabled";
-    };
-    isInvalid: {
-        true: "label--invalid";
-    };
-    isRequired: {
-        true: "label--required";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const labelVariants: (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;
+} & {
+    isDisabled?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    isRequired?: boolean | undefined;
+}) | undefined) => string;
 export type LabelVariants = VariantProps<typeof labelVariants>;
 //# sourceMappingURL=label.styles.d.ts.map

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

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

package/dist/components/label/label.styles.js

@@ -1,16 +1,16 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/label/label.styles.ts
 const labelVariants = tv({
-	base: "label",
+	base: "rp-label",
 	defaultVariants: {
 		isDisabled: false,
 		isInvalid: false,
 		isRequired: false
 	},
 	variants: {
-		isDisabled: { true: "label--disabled" },
-		isInvalid: { true: "label--invalid" },
-		isRequired: { true: "label--required" }
+		isDisabled: { true: "rp-label--disabled" },
+		isInvalid: { true: "rp-label--invalid" },
+		isRequired: { true: "rp-label--required" }
 	}
 });
 //#endregion

package/dist/components/label.css

@@ -1,7 +1,12 @@
 /* Base label styles */
-.label {
+.rp-label {
   /* Base styling */
-  @apply text-sm font-medium text-foreground;
+  @apply text-sm font-medium;
+
+  --label-fg: var(--foreground);
+  --label-fg-invalid: var(--danger);
+
+  color: var(--label-fg);
 }
 
 /*
@@ -9,20 +14,20 @@
  * to ensure asterisks only appear on atomic form field labels and group labels,
  * not on individual options within those groups
  */
-.label--required,
+.rp-label--required,
 [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"])
-  > .label,
-[data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label {
+  > .rp-label,
+[data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .rp-label {
   @apply after:ms-0.5 after:text-danger after:content-['*'];
 }
 
-.label--disabled,
-[data-disabled="true"] .label {
+.rp-label--disabled,
+[data-disabled="true"] .rp-label {
   @apply status-disabled;
 }
 
-.label--invalid,
-[data-invalid="true"] .label,
-[aria-invalid="true"] .label {
-  @apply text-danger;
+.rp-label--invalid,
+[data-invalid="true"] .rp-label,
+[aria-invalid="true"] .rp-label {
+  color: var(--label-fg-invalid);
 }

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

@@ -1,35 +1,14 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const linkVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    icon: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    icon: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    icon: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const linkVariants: (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;
+} & object) | 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;
+    } & object) | undefined) => string;
+    icon: (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;
+    } & object) | undefined) => string;
+};
 type LinkRenderPropsKeys = "isCurrent" | "isHovered" | "isPressed" | "isFocused" | "isFocusVisible" | "isDisabled";
 export type LinkVariants = Omit<VariantProps<typeof linkVariants>, LinkRenderPropsKeys>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKvB,CAAC;AAGH,KAAK,mBAAmB,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,gBAAgB,GAChB,YAAY,CAAC;AAEjB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,YAAY;;;;;;;;;CAKvB,CAAC;AAGH,KAAK,mBAAmB,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,gBAAgB,GAChB,YAAY,CAAC;AAEjB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,mBAAmB,CAAC,CAAC"}

package/dist/components/link/link.styles.js

@@ -1,8 +1,8 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/link/link.styles.ts
 const linkVariants = tv({ slots: {
-	base: "link",
-	icon: "link__icon"
+	base: "rp-link",
+	icon: "rp-link__icon"
 } });
 //#endregion
 export { linkVariants };

package/dist/components/link.css

@@ -1,11 +1,13 @@
 /* Base link styles */
-.link {
-  @apply relative inline-flex h-fit w-fit items-center rounded-xl font-medium text-link no-underline decoration-separator-tertiary decoration-[1.5px] underline-offset-4 no-highlight;
+.rp-link {
+  @apply relative inline-flex h-fit w-fit items-center rounded-xl font-medium text-link no-underline decoration-[1.5px] underline-offset-4 no-highlight;
+
+  --link-decoration: var(--separator-tertiary);
+  --link-decoration-hover: color-mix(in oklab, var(--muted) 50%, transparent);
+  --link-decoration-pressed: var(--muted);
+
+  text-decoration-color: var(--link-decoration);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 100ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),
@@ -20,9 +22,11 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply underline decoration-muted/50;
+      @apply underline;
 
-      .link__icon {
+      text-decoration-color: var(--link-decoration-hover);
+
+      .rp-link__icon {
         @apply opacity-100;
       }
     }
@@ -31,9 +35,11 @@
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply underline decoration-muted;
+    @apply underline;
+
+    text-decoration-color: var(--link-decoration-pressed);
 
-    .link__icon {
+    .rp-link__icon {
       @apply opacity-100;
     }
   }
@@ -43,7 +49,7 @@
   &[data-focus-visible="true"] {
     @apply status-focused;
 
-    .link__icon {
+    .rp-link__icon {
       @apply opacity-100;
     }
   }
@@ -53,13 +59,9 @@
     @apply status-disabled;
   }
 
-  .link__icon {
+  .rp-link__icon {
     @apply pointer-events-none inline-flex size-[0.75em] shrink-0 items-center justify-center text-current opacity-60;
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: opacity 150ms var(--ease-out);
     @apply motion-reduce:transition-none;
 
@@ -68,12 +70,12 @@
     }
   }
 
-  .link__icon[data-default-icon="true"] {
+  .rp-link__icon[data-default-icon="true"] {
     @apply ms-1 pb-1.5;
   }
 
   /* Handle Link with Button Variants */
-  &.button {
+  &.rp-button {
     @apply gap-0 no-underline;
   }
 }

package/dist/components/list-box/list-box.styles.d.ts

@@ -1,34 +1,9 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const listboxVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: "list-box--lg";
-        md: "";
-        sm: "list-box--sm";
-    };
-    variant: {
-        danger: "list-box--danger";
-        default: "list-box--default";
-    };
-}, undefined, "list-box", {
-    size: {
-        lg: "list-box--lg";
-        md: "";
-        sm: "list-box--sm";
-    };
-    variant: {
-        danger: "list-box--danger";
-        default: "list-box--default";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        lg: "list-box--lg";
-        md: "";
-        sm: "list-box--sm";
-    };
-    variant: {
-        danger: "list-box--danger";
-        default: "list-box--default";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const listboxVariants: (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;
+} & {
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "danger" | "default" | undefined;
+}) | undefined) => string;
 export type ListBoxVariants = VariantProps<typeof listboxVariants>;
 //# sourceMappingURL=list-box.styles.d.ts.map

package/dist/components/list-box/list-box.styles.d.ts.map

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

package/dist/components/list-box/list-box.styles.js

@@ -1,20 +1,20 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/list-box/list-box.styles.ts
 const listboxVariants = tv({
-	base: "list-box",
+	base: "rp-list-box",
 	defaultVariants: {
 		size: "md",
 		variant: "default"
 	},
 	variants: {
 		size: {
-			lg: "list-box--lg",
+			lg: "rp-list-box--lg",
 			md: "",
-			sm: "list-box--sm"
+			sm: "rp-list-box--sm"
 		},
 		variant: {
-			danger: "list-box--danger",
-			default: "list-box--default"
+			danger: "rp-list-box--danger",
+			default: "rp-list-box--default"
 		}
 	}
 });

package/dist/components/list-box-item/list-box-item.styles.d.ts

@@ -1,40 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const listboxItemVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        danger: {
-            item: string;
-        };
-        default: {
-            item: string;
-        };
-    };
-}, {
-    indicator: string;
-    item: string;
-}, undefined, {
-    variant: {
-        danger: {
-            item: string;
-        };
-        default: {
-            item: string;
-        };
-    };
-}, {
-    indicator: string;
-    item: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        danger: {
-            item: string;
-        };
-        default: {
-            item: string;
-        };
-    };
-}, {
-    indicator: string;
-    item: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const listboxItemVariants: (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?: "danger" | "default" | undefined;
+}) | undefined) => {
+    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;
+    } & {
+        variant?: "danger" | "default" | undefined;
+    }) | undefined) => string;
+    item: (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;
+    } & {
+        variant?: "danger" | "default" | undefined;
+    }) | undefined) => string;
+};
 export type ListBoxItemVariants = VariantProps<typeof listboxItemVariants>;
 //# sourceMappingURL=list-box-item.styles.d.ts.map

package/dist/components/list-box-item/list-box-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-box-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box-item/list-box-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAU1B,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"list-box-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box-item/list-box-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;CAkB9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/list-box-item/list-box-item.styles.js

@@ -1,14 +1,14 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/list-box-item/list-box-item.styles.ts
 const listboxItemVariants = tv({
 	defaultVariants: { variant: "default" },
 	slots: {
-		indicator: "list-box-item__indicator",
-		item: "list-box-item"
+		indicator: "rp-list-box-item__indicator",
+		item: "rp-list-box-item"
 	},
 	variants: { variant: {
-		danger: { item: "list-box-item--danger" },
-		default: { item: "list-box-item--default" }
+		danger: { item: "rp-list-box-item--danger" },
+		default: { item: "rp-list-box-item--default" }
 	} }
 });
 //#endregion

package/dist/components/list-box-item.css

@@ -2,13 +2,11 @@
    Base list-box item styles
    ========================================================================== */
 
-.list-box-item {
-  @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;
+.rp-list-box-item {
+  @apply relative flex min-h-9 w-full items-center justify-start gap-3 px-2 py-1.5 outline-none no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     box-shadow 150ms var(--ease-out);
@@ -28,8 +26,8 @@
 
   /* Room for the checkmark, only while it is drawn. The repeated attribute is what outranks the
    * `px` the picker popovers reset on this same item. */
-  &[data-slot="list-box-item"][aria-selected="true"]:has(.list-box-item__indicator),
-  &[data-slot="list-box-item"][data-selected="true"]:has(.list-box-item__indicator) {
+  &[data-slot="list-box-item"][aria-selected="true"]:has(.rp-list-box-item__indicator),
+  &[data-slot="list-box-item"][data-selected="true"]:has(.rp-list-box-item__indicator) {
     @apply pe-7;
   }
 
@@ -54,7 +52,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      @apply bg-state-layer;
     }
   }
 
@@ -73,7 +71,7 @@
    List-box item indicator
    ========================================================================== */
 
-.list-box-item__indicator {
+.rp-list-box-item__indicator {
   @apply absolute end-2 top-1/2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-default-foreground;
 
   /**
@@ -91,24 +89,20 @@
     @apply transition-all duration-300 motion-reduce:transition-none;
   }
 
-  .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"],
-  .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] {
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
+  .rp-list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"],
+  .rp-list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] {
     transition: stroke-dashoffset 250ms linear;
     @apply motion-reduce:transition-none;
   }
 }
 
 /* Default variant */
-.list-box-item--default {
+.rp-list-box-item--default {
 }
 
 /* Danger variant */
-.list-box-item--danger {
-  .list-box-item__indicator {
+.rp-list-box-item--danger {
+  .rp-list-box-item__indicator {
     @apply text-danger;
   }
 

package/dist/components/list-box-section/list-box-section.styles.d.ts

@@ -1,4 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const listboxSectionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "list-box-section", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const listboxSectionVariants: (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;
+} & object) | undefined) => string;
 export type ListBoxSectionVariants = VariantProps<typeof listboxSectionVariants>;
 //# sourceMappingURL=list-box-section.styles.d.ts.map

package/dist/components/list-box-section/list-box-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-box-section.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box-section/list-box-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,sBAAsB,6KAEjC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"list-box-section.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box-section/list-box-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,sBAAsB;;kCAEjC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/components/list-box-section/list-box-section.styles.js

@@ -1,5 +1,5 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/list-box-section/list-box-section.styles.ts
-const listboxSectionVariants = tv({ base: "list-box-section" });
+const listboxSectionVariants = tv({ base: "rp-list-box-section" });
 //#endregion
 export { listboxSectionVariants };

package/dist/components/list-box-section.css

@@ -2,6 +2,6 @@
    Base list-box section styles
    ========================================================================== */
 
-.list-box-section {
+.rp-list-box-section {
   @apply flex flex-col items-start gap-0;
 }