@ropav/styles 0.6.0 → 0.7.0

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,5 +1,5 @@
 /* Base label styles */
-.label {
+.rp-label {
   /* Base styling */
   @apply text-sm font-medium;
 
@@ -14,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 {
+.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,5 +1,5 @@
 /* Base link styles */
-.link {
+.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);
@@ -26,7 +26,7 @@
 
       text-decoration-color: var(--link-decoration-hover);
 
-      .link__icon {
+      .rp-link__icon {
         @apply opacity-100;
       }
     }
@@ -39,7 +39,7 @@
 
     text-decoration-color: var(--link-decoration-pressed);
 
-    .link__icon {
+    .rp-link__icon {
       @apply opacity-100;
     }
   }
@@ -49,7 +49,7 @@
   &[data-focus-visible="true"] {
     @apply status-focused;
 
-    .link__icon {
+    .rp-link__icon {
       @apply opacity-100;
     }
   }
@@ -59,7 +59,7 @@
     @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;
 
     transition: opacity 150ms var(--ease-out);
@@ -70,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,7 +2,7 @@
    Base list-box item styles
    ========================================================================== */
 
-.list-box-item {
+.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));
@@ -26,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;
   }
 
@@ -71,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;
 
   /**
@@ -89,20 +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"] {
+  .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;
 }

package/dist/components/list-box.css

@@ -2,7 +2,7 @@
    Base list-box styles
    ========================================================================== */
 
-.list-box {
+.rp-list-box {
   @apply relative w-full overflow-clip p-1;
 
   /**
@@ -24,18 +24,68 @@
   }
 }
 
+/* ==========================================================================
+   Drop indicator — the gap between two options a drop would land in.
+   Styled here rather than left to the caller because a windowed list box
+   renders its own, one per option it has laid out, which markup in the item
+   slot cannot reach.
+   ========================================================================== */
+
+.rp-list-box__drop-indicator {
+  --list-box-drop-indicator-size: 2px;
+  --list-box-drop-indicator-bg: var(--accent);
+}
+
+/* Windowed: the parent is the layout's own wrapper, which has already placed a band straddling
+   the boundary and outside the flow, so the indicator only has to fill it. */
+:not(.rp-list-box) > .rp-list-box__drop-indicator {
+  height: var(--list-box-drop-indicator-size);
+
+  &[data-drop-target="true"] {
+    background-color: var(--list-box-drop-indicator-bg);
+  }
+}
+
+/* In flow, as a direct child of the list, the gap has to cost nothing: an option that steps down
+   when the line arrives and back up when it moves on makes the whole list walk under the drag.
+   So it takes no height, and it stands *in* the spacing the list already leaves rather than
+   adding more — the option after it gives up the margin this one just took. */
+.rp-list-box > .rp-list-box__drop-indicator {
+  position: relative;
+  height: 0;
+
+  /* On the edge of the option it stands before, which is where the windowed layout puts it. */
+  &[data-drop-target="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    top: calc(var(--list-box-drop-indicator-size) / -2);
+    height: var(--list-box-drop-indicator-size);
+    background-color: var(--list-box-drop-indicator-bg);
+  }
+
+  /* Nothing follows the last one, so there is no spacing for it to stand in. */
+  &:last-child {
+    margin-top: 0;
+  }
+}
+
+.rp-list-box > .rp-list-box__drop-indicator + * {
+  margin-top: 0;
+}
+
 /* ==========================================================================
    Size variants
    ========================================================================== */
 
 /* A row is as tall as a field of the same size, so a collection standing beside one lines up. */
-.list-box--sm {
+.rp-list-box--sm {
   [data-slot="list-box-item"] {
     @apply min-h-8 py-1;
   }
 }
 
-.list-box--lg {
+.rp-list-box--lg {
   @apply text-base;
 
   [data-slot="list-box-item"] {

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

@@ -1,22 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const menuVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: "menu--lg";
-        md: "";
-        sm: "menu--sm";
-    };
-}, undefined, "menu", {
-    size: {
-        lg: "menu--lg";
-        md: "";
-        sm: "menu--sm";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        lg: "menu--lg";
-        md: "";
-        sm: "menu--sm";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const menuVariants: (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;
+}) | undefined) => string;
 export type MenuVariants = VariantProps<typeof menuVariants>;
 //# sourceMappingURL=menu.styles.d.ts.map

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

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

package/dist/components/menu/menu.styles.js

@@ -1,12 +1,12 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/menu/menu.styles.ts
 const menuVariants = tv({
-	base: "menu",
+	base: "rp-menu",
 	defaultVariants: { size: "md" },
 	variants: { size: {
-		lg: "menu--lg",
+		lg: "rp-menu--lg",
 		md: "",
-		sm: "menu--sm"
+		sm: "rp-menu--sm"
 	} }
 });
 //#endregion