@ropav/styles 0.5.0 → 0.7.0

package/dist/components/modal.css

@@ -6,13 +6,9 @@
 /**
  * Element: trigger - the element that opens the modal
  */
-.modal__trigger {
+.rp-modal__trigger {
   @apply inline-block cursor-(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -41,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;
@@ -56,10 +52,6 @@
     @apply animate-out duration-100 ease-out fade-out-0;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity];
@@ -70,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;
@@ -125,10 +117,6 @@
     @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity,transform];
@@ -143,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;
 }
@@ -155,7 +143,7 @@
 /**
  * Modifier: container--full
  */
-.modal__container--full {
+.rp-modal__container--full {
   @apply p-0 sm:p-0;
 
   /* Entering animation */
@@ -173,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;
@@ -202,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;
 }
@@ -217,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;
 }
@@ -260,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;
   }
 }
@@ -273,7 +261,7 @@
 /**
  * Element: heading - the main title text
  */
-.modal__heading {
+.rp-modal__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
 }
@@ -281,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;
@@ -290,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];
@@ -299,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;
 }
@@ -307,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;
 }
@@ -322,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;
 }

package/dist/components/number-field/number-field.styles.d.ts

@@ -1,97 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const numberFieldVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            group: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    decrementButton: string;
-    group: string;
-    incrementButton: string;
-    input: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            group: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    decrementButton: string;
-    group: string;
-    incrementButton: string;
-    input: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            group: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    decrementButton: string;
-    group: string;
-    incrementButton: string;
-    input: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const numberFieldVariants: (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;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "primary" | "secondary" | 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;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    decrementButton: (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;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    group: (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;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    incrementButton: (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;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    input: (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;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 export type NumberFieldVariants = VariantProps<typeof numberFieldVariants>;
 //# sourceMappingURL=number-field.styles.d.ts.map

package/dist/components/number-field/number-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/number-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAe1B,KAAK;QACL,IAAI;YACF,IAAI;YACJ,KAAK;;;;QAIP,EAAE;YACA,IAAI;;QAEN,EAAE;QACF,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"number-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/number-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/number-field/number-field.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/number-field/number-field.styles.ts
 const numberFieldVariants = tv({
 	defaultVariants: {
@@ -7,28 +7,28 @@ const numberFieldVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "number-field",
-		decrementButton: "number-field__decrement-button",
-		group: "number-field__group",
-		incrementButton: "number-field__increment-button",
-		input: "number-field__input"
+		base: "rp-number-field",
+		decrementButton: "rp-number-field__decrement-button",
+		group: "rp-number-field__group",
+		incrementButton: "rp-number-field__increment-button",
+		input: "rp-number-field__input"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
 			true: {
-				base: "number-field--full-width",
-				group: "number-field__group--full-width"
+				base: "rp-number-field--full-width",
+				group: "rp-number-field__group--full-width"
 			}
 		},
 		size: {
-			lg: { base: "number-field--lg" },
+			lg: { base: "rp-number-field--lg" },
 			md: {},
-			sm: { base: "number-field--sm" }
+			sm: { base: "rp-number-field--sm" }
 		},
 		variant: {
-			primary: { base: "number-field--primary" },
-			secondary: { base: "number-field--secondary" }
+			primary: { base: "rp-number-field--primary" },
+			secondary: { base: "rp-number-field--secondary" }
 		}
 	}
 });