@ropav/styles 0.5.0 → 0.7.0

package/dist/components/toast.css

@@ -1,7 +1,7 @@
 /* Toast component styles */
 
 /* Toast Region - Container for all toasts */
-.toast-region {
+.rp-toast-region {
   @apply pointer-events-none fixed z-50 outline-none;
   @apply w-[calc(100vw-2rem)] sm:w-auto sm:min-w-(--toast-width);
 
@@ -9,39 +9,39 @@
 }
 
 /* Placement variants - Bottom */
-.toast-region--bottom {
+.rp-toast-region--bottom {
   /* left-1/2 + -translate-x-1/2 centers in both LTR and RTL (translate is physical) */
   @apply bottom-4 left-1/2 -translate-x-1/2;
 }
 
-.toast-region--bottom-start {
+.rp-toast-region--bottom-start {
   @apply start-4 bottom-4;
 }
 
-.toast-region--bottom-end {
+.rp-toast-region--bottom-end {
   @apply end-4 bottom-4;
 }
 
 /* Placement variants - Top */
-.toast-region--top {
+.rp-toast-region--top {
   /* left-1/2 + -translate-x-1/2 centers in both LTR and RTL (translate is physical) */
   @apply top-4 left-1/2 -translate-x-1/2;
 }
 
-.toast-region--top-start {
+.rp-toast-region--top-start {
   @apply start-4 top-4;
 }
 
-.toast-region--top-end {
+.rp-toast-region--top-end {
   @apply end-4 top-4;
 }
 
-.toast-region:focus-visible {
+.rp-toast-region:focus-visible {
   @apply outline-2 outline-offset-2 outline-focus;
 }
 
 /* Base toast styles */
-.toast {
+.rp-toast {
   position: absolute;
   inset-inline-start: 0;
   inset-inline-end: 0;
@@ -50,58 +50,58 @@
   border-radius: min(32px, var(--component-radius));
 }
 
-.toast--bottom,
-.toast--bottom-start,
-.toast--bottom-end {
+.rp-toast--bottom,
+.rp-toast--bottom-start,
+.rp-toast--bottom-end {
   bottom: 0;
 }
 
-.toast--top,
-.toast--top-start,
-.toast--top-end {
+.rp-toast--top,
+.rp-toast--top-start,
+.rp-toast--top-end {
   top: 0;
 }
 
-.toast:not([data-frontmost="true"]) {
+.rp-toast:not([data-frontmost="true"]) {
   @apply pointer-events-none;
 
   height: var(--front-height);
   overflow: hidden;
 
-  .toast__close-button {
+  .rp-toast__close-button {
     @apply pointer-events-none opacity-0;
     outline: none;
   }
 }
 
-.toast[data-hidden="true"] {
+.rp-toast[data-hidden="true"] {
   @apply pointer-events-none flex opacity-0;
 }
 
-.toast:focus-visible {
+.rp-toast:focus-visible {
   @apply outline-2 outline-offset-2 outline-focus;
 }
 
 /* Toast placements + view transitions */
-.toast--bottom,
-.toast--bottom-start,
-.toast--bottom-end {
-  view-transition-class: toast-bottom;
+.rp-toast--bottom,
+.rp-toast--bottom-start,
+.rp-toast--bottom-end {
+  view-transition-class: rp-toast-bottom;
 }
 
-.toast--top,
-.toast--top-start,
-.toast--top-end {
-  view-transition-class: toast-top;
+.rp-toast--top,
+.rp-toast--top-start,
+.rp-toast--top-end {
+  view-transition-class: rp-toast-top;
 }
 
 /* Toast content */
-.toast__content {
+.rp-toast__content {
   @apply flex h-full grow flex-col items-start self-center;
 }
 
 /* Toast indicator */
-.toast__indicator {
+.rp-toast__indicator {
   @apply flex shrink-0 items-center justify-center p-1 text-overlay-foreground select-none;
 
   [data-slot="toast-default-icon"] {
@@ -119,18 +119,20 @@
 }
 
 /* Toast title */
-.toast__title {
+.rp-toast__title {
   @apply text-sm leading-5 font-medium text-overlay-foreground;
 }
 
 /* Toast description */
-.toast__description {
+.rp-toast__description {
   @apply text-sm text-muted;
 }
 
 /* Toast close button */
-.toast__close-button {
+.rp-toast__close-button {
   @apply pointer-events-none absolute -end-1 -top-1 size-5 border-border bg-default opacity-0 sm:border sm:bg-overlay;
+
+  --toast-close-button-bg-hover: var(--default);
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
   /* Overrides close button default icon size from 16px to 12px */
@@ -142,53 +144,53 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      background-color: var(--toast-close-button-bg-hover);
     }
   }
 }
 
 /* Only show close button on hover for frontmost toast */
-.toast[data-frontmost="true"]:hover .toast__close-button {
+.rp-toast[data-frontmost="true"]:hover .rp-toast__close-button {
   @apply pointer-events-auto opacity-100;
 }
 
 /* Toast action button */
-.toast__action {
+.rp-toast__action {
   @apply mt-2 sm:mt-0;
 }
 
 /* Variant modifiers */
-.toast--accent .toast__title {
+.rp-toast--accent .rp-toast__title {
   @apply text-accent-soft-foreground;
 }
 
-.toast--success .toast__title {
+.rp-toast--success .rp-toast__title {
   @apply text-success-soft-foreground;
 }
 
-.toast--success .toast__indicator {
+.rp-toast--success .rp-toast__indicator {
   @apply text-success-soft-foreground;
 }
 
-.toast--warning .toast__title {
+.rp-toast--warning .rp-toast__title {
   @apply text-warning-soft-foreground;
 }
 
-.toast--warning .toast__indicator {
+.rp-toast--warning .rp-toast__indicator {
   @apply text-warning-soft-foreground;
 }
 
-.toast--danger .toast__title {
+.rp-toast--danger .rp-toast__title {
   @apply text-danger-soft-foreground;
 }
 
-.toast--danger .toast__indicator {
+.rp-toast--danger .rp-toast__indicator {
   @apply text-danger-soft-foreground;
 }
 
 /* View transition animations */
-::view-transition-group(.toast-bottom),
-::view-transition-group(.toast-top) {
+::view-transition-group(.rp-toast-bottom),
+::view-transition-group(.rp-toast-top) {
 }
 
 ::view-transition-old(*),
@@ -197,36 +199,36 @@
 }
 
 /* Bottom */
-::view-transition-new(.toast-bottom):only-child {
-  animation: toast-slide-bottom-in 350ms;
+::view-transition-new(.rp-toast-bottom):only-child {
+  animation: rp-toast-slide-bottom-in 350ms;
 }
 
-::view-transition-old(.toast-bottom):only-child {
-  animation: toast-slide-bottom-out 350ms;
+::view-transition-old(.rp-toast-bottom):only-child {
+  animation: rp-toast-slide-bottom-out 350ms;
   animation-fill-mode: forwards;
 }
 
 /* Top */
-::view-transition-new(.toast-top):only-child {
-  animation: toast-slide-top-in 350ms;
+::view-transition-new(.rp-toast-top):only-child {
+  animation: rp-toast-slide-top-in 350ms;
 }
 
-::view-transition-old(.toast-top):only-child {
-  animation: toast-slide-top-out 350ms;
+::view-transition-old(.rp-toast-top):only-child {
+  animation: rp-toast-slide-top-out 350ms;
   animation-fill-mode: forwards;
 }
 
 /* Keyframes */
 
 /* Bottom */
-@keyframes toast-slide-bottom-in {
+@keyframes rp-toast-slide-bottom-in {
   from {
     translate: 0 100%;
     opacity: 0;
   }
 }
 
-@keyframes toast-slide-bottom-out {
+@keyframes rp-toast-slide-bottom-out {
   to {
     translate: 0 100%;
     opacity: 0;
@@ -234,14 +236,14 @@
 }
 
 /* Top */
-@keyframes toast-slide-top-in {
+@keyframes rp-toast-slide-top-in {
   from {
     translate: 0 -100%;
     opacity: 0;
   }
 }
 
-@keyframes toast-slide-top-out {
+@keyframes rp-toast-slide-top-out {
   to {
     translate: 0 -100%;
     opacity: 0;

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

@@ -1,43 +1,10 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const toggleButtonVariants: import("tailwind-variants").TVReturnType<{
-    isIconOnly: {
-        true: "toggle-button--icon-only";
-    };
-    size: {
-        lg: "toggle-button--lg";
-        md: "toggle-button--md";
-        sm: "toggle-button--sm";
-    };
-    variant: {
-        default: "toggle-button--default";
-        ghost: "toggle-button--ghost";
-    };
-}, undefined, "toggle-button", {
-    isIconOnly: {
-        true: "toggle-button--icon-only";
-    };
-    size: {
-        lg: "toggle-button--lg";
-        md: "toggle-button--md";
-        sm: "toggle-button--sm";
-    };
-    variant: {
-        default: "toggle-button--default";
-        ghost: "toggle-button--ghost";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    isIconOnly: {
-        true: "toggle-button--icon-only";
-    };
-    size: {
-        lg: "toggle-button--lg";
-        md: "toggle-button--md";
-        sm: "toggle-button--sm";
-    };
-    variant: {
-        default: "toggle-button--default";
-        ghost: "toggle-button--ghost";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const toggleButtonVariants: (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;
+} & {
+    isIconOnly?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "default" | "ghost" | undefined;
+}) | undefined) => string;
 export type ToggleButtonVariants = VariantProps<typeof toggleButtonVariants>;
 //# sourceMappingURL=toggle-button.styles.d.ts.map

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

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

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

@@ -1,22 +1,22 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/toggle-button/toggle-button.styles.ts
 const toggleButtonVariants = tv({
-	base: "toggle-button",
+	base: "rp-toggle-button",
 	defaultVariants: {
 		isIconOnly: false,
 		size: "md",
 		variant: "default"
 	},
 	variants: {
-		isIconOnly: { true: "toggle-button--icon-only" },
+		isIconOnly: { true: "rp-toggle-button--icon-only" },
 		size: {
-			lg: "toggle-button--lg",
-			md: "toggle-button--md",
-			sm: "toggle-button--sm"
+			lg: "rp-toggle-button--lg",
+			md: "rp-toggle-button--md",
+			sm: "rp-toggle-button--sm"
 		},
 		variant: {
-			default: "toggle-button--default",
-			ghost: "toggle-button--ghost"
+			default: "rp-toggle-button--default",
+			ghost: "rp-toggle-button--ghost"
 		}
 	}
 });

package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts

@@ -1,76 +1,25 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const toggleButtonGroupVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    isDetached: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    separator: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    isDetached: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    separator: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    isDetached: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    separator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const toggleButtonGroupVariants: (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;
+    isDetached?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | 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;
+        isDetached?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+    separator: (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;
+        isDetached?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+};
 export type ToggleButtonGroupVariants = VariantProps<typeof toggleButtonGroupVariants>;
 //# sourceMappingURL=toggle-button-group.styles.d.ts.map

package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,yBAAyB;;QAYhC,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,UAAU;YACR,IAAI;;QAEN,QAAQ;YACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"toggle-button-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;CAgCpC,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC"}

package/dist/components/toggle-button-group/toggle-button-group.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/toggle-button-group/toggle-button-group.styles.ts
 const toggleButtonGroupVariants = tv({
 	defaultVariants: {
@@ -7,21 +7,21 @@ const toggleButtonGroupVariants = tv({
 		orientation: "horizontal"
 	},
 	slots: {
-		base: "toggle-button-group",
-		separator: "toggle-button-group__separator"
+		base: "rp-toggle-button-group",
+		separator: "rp-toggle-button-group__separator"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
-			true: { base: "toggle-button-group--full-width" }
+			true: { base: "rp-toggle-button-group--full-width" }
 		},
 		isDetached: {
 			false: {},
-			true: { base: "toggle-button-group--detached" }
+			true: { base: "rp-toggle-button-group--detached" }
 		},
 		orientation: {
-			horizontal: { base: "toggle-button-group--horizontal" },
-			vertical: { base: "toggle-button-group--vertical" }
+			horizontal: { base: "rp-toggle-button-group--horizontal" },
+			vertical: { base: "rp-toggle-button-group--vertical" }
 		}
 	}
 });

package/dist/components/toggle-button-group.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base styles */
-.toggle-button-group {
+.rp-toggle-button-group {
   @apply inline-flex h-auto w-fit items-center justify-center gap-0;
 }
 
@@ -11,11 +11,11 @@
    Orientation variants
    ========================================================================== */
 
-.toggle-button-group--horizontal {
+.rp-toggle-button-group--horizontal {
   @apply flex-row;
 }
 
-.toggle-button-group--vertical {
+.rp-toggle-button-group--vertical {
   @apply flex-col;
 }
 
@@ -23,7 +23,7 @@
    Full width modifier
    ========================================================================== */
 
-.toggle-button-group--full-width {
+.rp-toggle-button-group--full-width {
   @apply w-full;
 }
 
@@ -32,55 +32,55 @@
    ========================================================================== */
 
 /* Remove border radius from all toggle buttons in attached group */
-.toggle-button-group .toggle-button {
+.rp-toggle-button-group .rp-toggle-button {
   @apply rounded-none;
 }
 
 /* Apply border radius to first button (start edge) */
-.toggle-button-group--horizontal .toggle-button:first-child {
+.rp-toggle-button-group--horizontal .rp-toggle-button:first-child {
   @apply rounded-s-component;
 }
 
 /* Apply border radius to last button (end edge) */
-.toggle-button-group--horizontal .toggle-button:last-child {
+.rp-toggle-button-group--horizontal .rp-toggle-button:last-child {
   @apply rounded-e-component;
 }
 
 /* If only one button, apply both rounded edges */
-.toggle-button-group--horizontal .toggle-button:first-child:last-child {
+.rp-toggle-button-group--horizontal .rp-toggle-button:first-child:last-child {
   @apply rounded-component;
 }
 
 /* Apply border radius to first button (top edge) in vertical */
-.toggle-button-group--vertical .toggle-button:first-child {
+.rp-toggle-button-group--vertical .rp-toggle-button:first-child {
   @apply rounded-t-component;
 }
 
 /* Apply border radius to last button (bottom edge) in vertical */
-.toggle-button-group--vertical .toggle-button:last-child {
+.rp-toggle-button-group--vertical .rp-toggle-button:last-child {
   @apply rounded-b-component;
 }
 
 /* If only one button in vertical, apply all rounded edges */
-.toggle-button-group--vertical .toggle-button:first-child:last-child {
+.rp-toggle-button-group--vertical .rp-toggle-button:first-child:last-child {
   @apply rounded-component;
 }
 
 /* Remove scale transform on active/pressed state for buttons in group */
-.toggle-button-group .toggle-button:active,
-.toggle-button-group .toggle-button[data-pressed="true"] {
+.rp-toggle-button-group .rp-toggle-button:active,
+.rp-toggle-button-group .rp-toggle-button[data-pressed="true"] {
   transform: none;
 }
 
 /* Override focus ring to use inset style so it stays within button bounds */
-.toggle-button-group .toggle-button:focus-visible:not(:focus),
-.toggle-button-group .toggle-button[data-focus-visible="true"] {
+.rp-toggle-button-group .rp-toggle-button:focus-visible:not(:focus),
+.rp-toggle-button-group .rp-toggle-button[data-focus-visible="true"] {
   --tw-ring-offset-width: 0px;
   @apply ring-inset;
 }
 
 /* Full width: stretch each toggle button */
-.toggle-button-group--full-width .toggle-button {
+.rp-toggle-button-group--full-width .rp-toggle-button {
   @apply flex-1;
 }
 
@@ -88,20 +88,16 @@
    Separator (compound component)
    ========================================================================== */
 
-.toggle-button-group__separator {
+.rp-toggle-button-group__separator {
   @apply rounded-sm bg-current opacity-15;
   position: absolute;
   pointer-events: none;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 
   /* Horizontal orientation - vertical divider */
-  .toggle-button-group--horizontal & {
+  .rp-toggle-button-group--horizontal & {
     inset-inline-start: -1px;
     top: 25%;
     width: 1px;
@@ -109,7 +105,7 @@
   }
 
   /* Vertical orientation - horizontal divider */
-  .toggle-button-group--vertical & {
+  .rp-toggle-button-group--vertical & {
     inset-inline-start: 25%;
     top: -1px;
     width: 50%;
@@ -121,16 +117,16 @@
    Detached mode - buttons separated with gaps
    ========================================================================== */
 
-.toggle-button-group--detached {
+.rp-toggle-button-group--detached {
   @apply gap-1;
 }
 
 /* Restore border radius in detached mode */
-.toggle-button-group--detached .toggle-button {
+.rp-toggle-button-group--detached .rp-toggle-button {
   @apply rounded-component;
 }
 
 /* Hide separators in detached mode */
-.toggle-button-group--detached .toggle-button-group__separator {
+.rp-toggle-button-group--detached .rp-toggle-button-group__separator {
   display: none;
 }