@ropav/styles 0.5.0 → 0.7.0

package/dist/components/number-field.css

@@ -1,5 +1,5 @@
 /* Number field styles */
-.number-field {
+.rp-number-field {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -14,8 +14,15 @@
   }
 }
 
-.number-field__group {
-  @apply grid h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+.rp-number-field__group {
+  @apply grid 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. */
+  --number-field-group-bg: var(--field-background, var(--default));
+  --number-field-group-bg-hover: var(--field-hover);
+  --number-field-group-bg-focus: var(--field-focus);
+
+  background-color: var(--number-field-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -40,10 +47,6 @@
     grid-template-columns: 40px 1fr 40px;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -54,7 +57,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--number-field-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -64,13 +67,13 @@
   &:focus-within {
     @apply status-focused-field;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
   }
 
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -91,21 +94,21 @@
    */
   &:has([data-slot="number-field-input"]:-webkit-autofill),
   &:has([data-slot="number-field-input"]:autofill) {
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
     border-color: var(--field-border-focus);
   }
 }
 
-.number-field__input {
+.rp-number-field__input {
   @apply min-w-0 rounded-none border-0 bg-transparent px-3 field-line-md tabular-nums shadow-none outline-none;
 
   /* Remove border radius on left side when decrement button is present */
-  .number-field__group:has([slot="decrement"]) & {
+  .rp-number-field__group:has([slot="decrement"]) & {
     @apply rounded-s-none;
   }
 
   /* Remove border radius on right side when increment button is present */
-  .number-field__group:has([slot="increment"]) & {
+  .rp-number-field__group:has([slot="increment"]) & {
     @apply rounded-e-none;
   }
 
@@ -118,7 +121,7 @@
   /**
    * Neutralize the browser's per-input autofill paint so the inner <input>
    * doesn't draw a sharp-cornered yellow rectangle. The unified highlight
-   * is applied to `.number-field__group` above. Preserve the autofilled
+   * is applied to `.rp-number-field__group` above. Preserve the autofilled
    * text and caret colors, and pin the background-color transition so the
    * inset box-shadow trick doesn't flicker on state changes.
    */
@@ -135,17 +138,22 @@
   }
 }
 
-.number-field__increment-button,
-.number-field__decrement-button {
-  @apply flex h-full w-10 items-center justify-center rounded-none bg-transparent text-field-foreground outline-none;
+.rp-number-field__increment-button,
+.rp-number-field__decrement-button {
+  @apply flex h-full w-10 items-center justify-center rounded-none text-field-foreground outline-none;
+
+  --number-field-button-bg: transparent;
+  --number-field-button-bg-pressed: color-mix(
+    in oklab,
+    var(--field-foreground, var(--foreground)) 10%,
+    transparent
+  );
+
+  background-color: var(--number-field-button-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
   border-style: solid;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth);
@@ -167,7 +175,7 @@
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply bg-field-foreground/10;
+    background-color: var(--number-field-button-bg-pressed);
     transform: scale(0.97);
   }
 
@@ -185,57 +193,37 @@
   }
 }
 
-.number-field__increment-button {
+.rp-number-field__increment-button {
   @apply rounded-s-none rounded-e-field border-s border-field-placeholder/15;
 }
 
-.number-field__decrement-button {
+.rp-number-field__decrement-button {
   @apply rounded-s-field rounded-e-none border-e border-field-placeholder/15;
 }
 
 /* Variant property definitions */
-.number-field--primary {
+.rp-number-field--primary {
   /* Default styles */
 }
 
-.number-field--secondary .number-field__group {
+.rp-number-field--secondary .rp-number-field__group {
   @apply shadow-none;
-  background-color: var(--number-field-group-bg);
 
   --number-field-group-bg: var(--default);
   --number-field-group-bg-hover: var(--default-hover);
   --number-field-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--number-field-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--number-field-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--number-field-group-bg-focus);
-  }
-
   [data-slot="number-field-input"] {
     @apply bg-transparent;
   }
 }
 
 /* Full width modifier */
-.number-field--full-width {
+.rp-number-field--full-width {
   @apply w-full;
 }
 
-.number-field__group--full-width {
+.rp-number-field__group--full-width {
   @apply w-full;
 }
 
@@ -244,8 +232,8 @@
    ========================================================================== */
 
 /* The stepper column stays 4px wider than the field is tall, as it is at `md`. */
-.number-field--sm {
-  .number-field__group {
+.rp-number-field--sm {
+  .rp-number-field__group {
     @apply h-8;
 
     &:has([slot="decrement"]) {
@@ -261,18 +249,18 @@
     }
   }
 
-  .number-field__input {
+  .rp-number-field__input {
     @apply field-line-sm;
   }
 
-  .number-field__increment-button,
-  .number-field__decrement-button {
+  .rp-number-field__increment-button,
+  .rp-number-field__decrement-button {
     @apply w-9;
   }
 }
 
-.number-field--lg {
-  .number-field__group {
+.rp-number-field--lg {
+  .rp-number-field__group {
     @apply h-10;
 
     &:has([slot="decrement"]) {
@@ -288,12 +276,12 @@
     }
   }
 
-  .number-field__input {
+  .rp-number-field__input {
     @apply field-line-lg;
   }
 
-  .number-field__increment-button,
-  .number-field__decrement-button {
+  .rp-number-field__increment-button,
+  .rp-number-field__decrement-button {
     @apply w-11;
   }
 }

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

@@ -1,61 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const paginationVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    ellipsis: string;
-    item: string;
-    link: string;
-    summary: string;
-}, undefined, {
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    ellipsis: string;
-    item: string;
-    link: string;
-    summary: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    ellipsis: string;
-    item: string;
-    link: string;
-    summary: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const paginationVariants: (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;
+} & {
+    isNav?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | 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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    content: (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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    ellipsis: (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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | 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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    link: (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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    summary: (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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+};
 export type PaginationVariants = VariantProps<typeof paginationVariants>;
 //# sourceMappingURL=pagination.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB;;QAczB,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/pagination/pagination.styles.js

@@ -1,20 +1,27 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/pagination/pagination.styles.ts
 const paginationVariants = tv({
 	defaultVariants: { size: "md" },
 	slots: {
-		base: "pagination",
-		content: "pagination__content",
-		ellipsis: "pagination__ellipsis",
-		item: "pagination__item",
-		link: "pagination__link",
-		summary: "pagination__summary"
+		base: "rp-pagination",
+		content: "rp-pagination__content",
+		ellipsis: "rp-pagination__ellipsis",
+		item: "rp-pagination__item",
+		link: "rp-pagination__link",
+		summary: "rp-pagination__summary"
 	},
-	variants: { size: {
-		lg: { base: "pagination--lg" },
-		md: { base: "pagination--md" },
-		sm: { base: "pagination--sm" }
-	} }
+	variants: {
+		/** A previous/next control rather than a page number, which sizes and spaces differently. */
+		isNav: {
+			false: {},
+			true: { link: "rp-pagination__link--nav" }
+		},
+		size: {
+			lg: { base: "rp-pagination--lg" },
+			md: { base: "rp-pagination--md" },
+			sm: { base: "rp-pagination--sm" }
+		}
+	}
 });
 //#endregion
 export { paginationVariants };

package/dist/components/pagination.css

@@ -3,35 +3,31 @@
    ========================================================================== */
 
 /* Base styles */
-.pagination {
+.rp-pagination {
   @apply flex w-full flex-col items-center justify-between gap-4 sm:flex-row;
 }
 
 /* Summary - left side info container */
-.pagination__summary {
+.rp-pagination__summary {
   @apply flex items-center gap-2 self-start text-sm text-muted sm:self-center;
 }
 
 /* Content - container for pagination items */
-.pagination__content {
+.rp-pagination__content {
   @apply flex items-center gap-1 self-start sm:self-center;
 }
 
 /* Item - list item wrapper */
-.pagination__item {
+.rp-pagination__item {
   @apply inline-flex;
 }
 
 /* Link - page number button (ghost button style) */
-.pagination__link {
+.rp-pagination__link {
   @apply relative isolate inline-flex size-8 origin-center items-center justify-center rounded-component text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-smooth),
     background-color 100ms var(--ease-out),
@@ -87,12 +83,12 @@
 }
 
 /* Ellipsis */
-.pagination__ellipsis {
+.rp-pagination__ellipsis {
   @apply inline-flex size-8 items-center justify-center text-sm text-muted select-none;
 }
 
 /* Navigation buttons (Previous / Next) */
-.pagination__link--nav {
+.rp-pagination__link--nav {
   @apply w-auto gap-1.5 px-2.5;
 
   & [data-slot="pagination-previous-icon"],
@@ -105,8 +101,8 @@
    Size variants
    ========================================================================== */
 
-.pagination--sm {
-  .pagination__link {
+.rp-pagination--sm {
+  .rp-pagination__link {
     @apply size-7 text-xs;
 
     &:active,
@@ -115,25 +111,25 @@
     }
   }
 
-  .pagination__link--nav {
+  .rp-pagination__link--nav {
     @apply w-auto px-2;
   }
 
-  .pagination__ellipsis {
+  .rp-pagination__ellipsis {
     @apply size-7 text-xs;
   }
 
-  .pagination__summary {
+  .rp-pagination__summary {
     @apply text-xs;
   }
 }
 
-.pagination--md {
+.rp-pagination--md {
   /* No styles as this is the default size */
 }
 
-.pagination--lg {
-  .pagination__link {
+.rp-pagination--lg {
+  .rp-pagination__link {
     @apply size-9 text-base;
 
     &:active,
@@ -142,15 +138,15 @@
     }
   }
 
-  .pagination__link--nav {
+  .rp-pagination__link--nav {
     @apply w-auto px-3;
   }
 
-  .pagination__ellipsis {
+  .rp-pagination__ellipsis {
     @apply size-9 text-base;
   }
 
-  .pagination__summary {
+  .rp-pagination__summary {
     @apply text-base;
   }
 }

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

@@ -1,46 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            dialog?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            dialog?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    dialog: string;
-    heading: string;
-    trigger: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            dialog?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    dialog: string;
-    heading: string;
-    trigger: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    dialog: string;
-    heading: string;
-    trigger: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const popoverVariants: (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;
+    dialog: (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;
+    heading: (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;
+    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;
+    } & object) | undefined) => string;
+};
 export type PopoverVariants = VariantProps<typeof popoverVariants>;
 //# sourceMappingURL=popover.styles.d.ts.map

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

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

package/dist/components/popover/popover.styles.js

@@ -1,10 +1,10 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/popover/popover.styles.ts
 const popoverVariants = tv({ slots: {
-	base: "popover",
-	dialog: "popover__dialog",
-	heading: "popover__heading",
-	trigger: "popover__trigger"
+	base: "rp-popover",
+	dialog: "rp-popover__dialog",
+	heading: "rp-popover__heading",
+	trigger: "rp-popover__trigger"
 } });
 //#endregion
 export { popoverVariants };

package/dist/components/popover.css

@@ -1,7 +1,7 @@
 /* Popover component styles */
 
 /* Base popover styles */
-.popover {
+.rp-popover {
   @apply origin-(--trigger-anchor-point) bg-overlay p-0 text-sm;
   border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
@@ -72,23 +72,19 @@
 }
 
 /* Popover dialog */
-.popover__dialog {
+.rp-popover__dialog {
   @apply p-4 outline-none;
 }
 
 /* Popover heading */
-.popover__heading {
+.rp-popover__heading {
   @apply font-medium;
 }
 
 /* Popover trigger */
-.popover__trigger {
+.rp-popover__trigger {
   @apply inline-block;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),