@ropav/styles 0.6.0 → 0.7.0

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

@@ -1,169 +1,81 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const modalVariants: import("tailwind-variants").TVReturnType<{
-    scroll: {
-        inside: {
-            body: string;
-            dialog: string;
-        };
-        outside: {
-            body: string;
-            container: string;
-            dialog: string;
-        };
-    };
-    size: {
-        cover: {
-            dialog: string;
-        };
-        full: {
-            container: string;
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        xs: {
-            dialog: string;
-        };
-    };
-    variant: {
-        blur: {
-            backdrop: string;
-        };
-        opaque: {
-            backdrop: string;
-        };
-        transparent: {
-            backdrop: string;
-        };
-    };
-}, {
-    backdrop: string;
-    body: string;
-    closeTrigger: string;
-    container: string;
-    dialog: string;
-    footer: string;
-    header: string;
-    heading: string;
-    icon: string;
-    trigger: string;
-}, undefined, {
-    scroll: {
-        inside: {
-            body: string;
-            dialog: string;
-        };
-        outside: {
-            body: string;
-            container: string;
-            dialog: string;
-        };
-    };
-    size: {
-        cover: {
-            dialog: string;
-        };
-        full: {
-            container: string;
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        xs: {
-            dialog: string;
-        };
-    };
-    variant: {
-        blur: {
-            backdrop: string;
-        };
-        opaque: {
-            backdrop: string;
-        };
-        transparent: {
-            backdrop: string;
-        };
-    };
-}, {
-    backdrop: string;
-    body: string;
-    closeTrigger: string;
-    container: string;
-    dialog: string;
-    footer: string;
-    header: string;
-    heading: string;
-    icon: string;
-    trigger: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    scroll: {
-        inside: {
-            body: string;
-            dialog: string;
-        };
-        outside: {
-            body: string;
-            container: string;
-            dialog: string;
-        };
-    };
-    size: {
-        cover: {
-            dialog: string;
-        };
-        full: {
-            container: string;
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        xs: {
-            dialog: string;
-        };
-    };
-    variant: {
-        blur: {
-            backdrop: string;
-        };
-        opaque: {
-            backdrop: string;
-        };
-        transparent: {
-            backdrop: string;
-        };
-    };
-}, {
-    backdrop: string;
-    body: string;
-    closeTrigger: string;
-    container: string;
-    dialog: string;
-    footer: string;
-    header: string;
-    heading: string;
-    icon: string;
-    trigger: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const modalVariants: (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;
+} & {
+    scroll?: "inside" | "outside" | undefined;
+    size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+    variant?: "blur" | "opaque" | "transparent" | undefined;
+}) | undefined) => {
+    backdrop: (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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    body: (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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    closeTrigger: (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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    container: (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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | 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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    footer: (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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    header: (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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | 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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | 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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | 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;
+    } & {
+        scroll?: "inside" | "outside" | undefined;
+        size?: "cover" | "full" | "lg" | "md" | "sm" | "xs" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+};
 export type ModalVariants = VariantProps<typeof modalVariants>;
 //# sourceMappingURL=modal.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;QAoBpB,MAAM;YACJ,IAAI;YACJ,MAAM;;QAER,OAAO;YACL,IAAI;YACJ,SAAS;YACT,MAAM;;;;QAIR,KAAK;YACH,MAAM;;QAER,IAAI;YACF,SAAS;YACT,MAAM;;QAER,EAAE;YACA,MAAM;;QAER,EAAE;YACA,MAAM;;QAER,EAAE;YACA,MAAM;;QAER,EAAE;YACA,MAAM;;;;QAIR,IAAI;YACF,QAAQ;;QAEV,MAAM;YACJ,QAAQ;;QAEV,WAAW;YACT,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAId,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/modal/modal.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/modal/modal.styles.ts
 const modalVariants = tv({
 	defaultVariants: {
@@ -7,44 +7,44 @@ const modalVariants = tv({
 		variant: "opaque"
 	},
 	slots: {
-		backdrop: "modal__backdrop",
-		body: "modal__body",
-		closeTrigger: "modal__close-trigger",
-		container: "modal__container",
-		dialog: "modal__dialog",
-		footer: "modal__footer",
-		header: "modal__header",
-		heading: "modal__heading",
-		icon: "modal__icon",
-		trigger: "modal__trigger"
+		backdrop: "rp-modal__backdrop",
+		body: "rp-modal__body",
+		closeTrigger: "rp-modal__close-trigger",
+		container: "rp-modal__container",
+		dialog: "rp-modal__dialog",
+		footer: "rp-modal__footer",
+		header: "rp-modal__header",
+		heading: "rp-modal__heading",
+		icon: "rp-modal__icon",
+		trigger: "rp-modal__trigger"
 	},
 	variants: {
 		scroll: {
 			inside: {
-				body: "modal__body--scroll-inside",
-				dialog: "modal__dialog--scroll-inside"
+				body: "rp-modal__body--scroll-inside",
+				dialog: "rp-modal__dialog--scroll-inside"
 			},
 			outside: {
-				body: "modal__body--scroll-outside",
-				container: "modal__container--scroll-outside",
-				dialog: "modal__dialog--scroll-outside"
+				body: "rp-modal__body--scroll-outside",
+				container: "rp-modal__container--scroll-outside",
+				dialog: "rp-modal__dialog--scroll-outside"
 			}
 		},
 		size: {
-			cover: { dialog: "modal__dialog--cover" },
+			cover: { dialog: "rp-modal__dialog--cover" },
 			full: {
-				container: "modal__container--full",
-				dialog: "modal__dialog--full"
+				container: "rp-modal__container--full",
+				dialog: "rp-modal__dialog--full"
 			},
-			lg: { dialog: "modal__dialog--lg" },
-			md: { dialog: "modal__dialog--md" },
-			sm: { dialog: "modal__dialog--sm" },
-			xs: { dialog: "modal__dialog--xs" }
+			lg: { dialog: "rp-modal__dialog--lg" },
+			md: { dialog: "rp-modal__dialog--md" },
+			sm: { dialog: "rp-modal__dialog--sm" },
+			xs: { dialog: "rp-modal__dialog--xs" }
 		},
 		variant: {
-			blur: { backdrop: "modal__backdrop--blur" },
-			opaque: { backdrop: "modal__backdrop--opaque" },
-			transparent: { backdrop: "modal__backdrop--transparent" }
+			blur: { backdrop: "rp-modal__backdrop--blur" },
+			opaque: { backdrop: "rp-modal__backdrop--opaque" },
+			transparent: { backdrop: "rp-modal__backdrop--transparent" }
 		}
 	}
 });

package/dist/components/modal.css

@@ -6,7 +6,7 @@
 /**
  * Element: trigger - the element that opens the modal
  */
-.modal__trigger {
+.rp-modal__trigger {
   @apply inline-block cursor-(--cursor-interactive);
 
   transition:
@@ -37,7 +37,7 @@
 /**
  * Element: backdrop - the overlay behind the dialog
  */
-.modal__backdrop {
+.rp-modal__backdrop {
   @apply fixed inset-0 z-50;
   @apply flex flex-row items-center justify-center;
   @apply h-(--visual-viewport-height) w-full;
@@ -62,28 +62,28 @@
 /**
  * Modifier: backdrop--transparent
  */
-.modal__backdrop--transparent {
+.rp-modal__backdrop--transparent {
   @apply bg-transparent;
 }
 
 /**
  * Modifier: backdrop--opaque
  */
-.modal__backdrop--opaque {
+.rp-modal__backdrop--opaque {
   @apply bg-backdrop;
 }
 
 /**
  * Modifier: backdrop--blur
  */
-.modal__backdrop--blur {
+.rp-modal__backdrop--blur {
   @apply bg-backdrop backdrop-blur-md;
 }
 
 /**
  * Element: container - the positioning wrapper for the modal
  */
-.modal__container {
+.rp-modal__container {
   @apply flex flex-col items-center;
   @apply h-(--visual-viewport-height) w-full min-w-0 flex-1;
   @apply p-4;
@@ -131,11 +131,11 @@
  * otherwise clicks around the dialog count as inside the modal and never dismiss it.
  * The backdrop owns the scrolling instead.
  */
-.modal__container--scroll-outside {
+.rp-modal__container--scroll-outside {
   @apply h-auto min-h-(--visual-viewport-height) overflow-y-visible;
 }
 
-.modal__backdrop:has(.modal__container--scroll-outside) {
+.rp-modal__backdrop:has(.rp-modal__container--scroll-outside) {
   @apply scrollbar items-start overflow-y-auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -143,7 +143,7 @@
 /**
  * Modifier: container--full
  */
-.modal__container--full {
+.rp-modal__container--full {
   @apply p-0 sm:p-0;
 
   /* Entering animation */
@@ -161,7 +161,7 @@
 /**
  * Element: dialog - the content container for the modal
  */
-.modal__dialog {
+.rp-modal__dialog {
   @apply relative;
   @apply flex w-full flex-col;
   @apply bg-overlay shadow-overlay outline-none;
@@ -190,14 +190,14 @@
 /**
  * Modifier: dialog--scroll-inside
  */
-.modal__dialog--scroll-inside {
+.rp-modal__dialog--scroll-inside {
   @apply max-h-full min-h-0 overflow-clip;
 }
 
 /**
  * Modifier: dialog--scroll-outside
  */
-.modal__dialog--scroll-outside {
+.rp-modal__dialog--scroll-outside {
   @apply h-auto;
   @apply min-h-0 shrink-0;
 }
@@ -205,42 +205,42 @@
 /**
  * Modifier: dialog--xs
  */
-.modal__dialog--xs {
+.rp-modal__dialog--xs {
   @apply max-w-xs;
 }
 
 /**
  * Modifier: dialog--sm
  */
-.modal__dialog--sm {
+.rp-modal__dialog--sm {
   @apply max-w-sm;
 }
 
 /**
  * Modifier: dialog--md
  */
-.modal__dialog--md {
+.rp-modal__dialog--md {
   @apply max-w-md;
 }
 
 /**
  * Modifier: dialog--lg
  */
-.modal__dialog--lg {
+.rp-modal__dialog--lg {
   @apply max-w-lg;
 }
 
 /**
  * Modifier: dialog--cover
  */
-.modal__dialog--cover {
+.rp-modal__dialog--cover {
   @apply h-full min-h-full w-full;
 }
 
 /**
  * Modifier: dialog--full
  */
-.modal__dialog--full {
+.rp-modal__dialog--full {
   @apply h-full min-h-full w-full;
   @apply rounded-none shadow-none;
 }
@@ -248,12 +248,12 @@
 /**
  * Element: header - the top section with the title
  */
-.modal__header {
+.rp-modal__header {
   @apply flex flex-col gap-3;
   @apply mb-0;
 
   /* When header contains icon, use flex-col layout with gap */
-  & > .modal__icon {
+  & > .rp-modal__icon {
     @apply mb-0;
   }
 }
@@ -261,7 +261,7 @@
 /**
  * Element: heading - the main title text
  */
-.modal__heading {
+.rp-modal__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
 }
@@ -269,7 +269,7 @@
 /**
  * Element: icon - the optional icon indicator
  */
-.modal__icon {
+.rp-modal__icon {
   @apply flex items-center justify-center;
   @apply size-10 shrink-0;
   @apply rounded-3xl select-none;
@@ -278,7 +278,7 @@
 /**
  * Element: body - the main content area
  */
-.modal__body {
+.rp-modal__body {
   @apply min-h-0 flex-1;
   @apply text-sm leading-[1.43] text-muted;
   @apply -m-[3px] my-0 overflow-visible p-[3px];
@@ -287,7 +287,7 @@
 /**
  * Modifier: body--scroll-inside
  */
-.modal__body--scroll-inside {
+.rp-modal__body--scroll-inside {
   @apply scrollbar overflow-y-auto overscroll-contain;
   -webkit-overflow-scrolling: touch;
 }
@@ -295,14 +295,14 @@
 /**
  * Modifier: body--scroll-outside
  */
-.modal__body--scroll-outside {
+.rp-modal__body--scroll-outside {
   @apply overflow-y-visible;
 }
 
 /**
  * Element: footer - the bottom action section
  */
-.modal__footer {
+.rp-modal__footer {
   @apply flex flex-row items-center justify-end gap-2;
   @apply mt-0;
 }
@@ -310,21 +310,21 @@
 /**
  * Element: close-trigger - the optional x icon button to close the modal
  */
-.modal__close-trigger {
+.rp-modal__close-trigger {
   @apply absolute end-4 top-4;
 }
 
 /**
  * Elements Spacing
  */
-.modal__header + .modal__body {
+.rp-modal__header + .rp-modal__body {
   @apply mt-2;
 }
 
-.modal__header + .modal__footer {
+.rp-modal__header + .rp-modal__footer {
   @apply mt-5;
 }
 
-.modal__body + .modal__footer {
+.rp-modal__body + .rp-modal__footer {
   @apply mt-5;
 }