@ropav/styles 0.5.0 → 0.7.0

package/dist/components/meter.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base styles */
-.meter {
+.rp-meter {
   @apply grid w-full gap-1;
   grid-template-areas:
     "label output"
@@ -19,14 +19,16 @@
     grid-area: label;
   }
 
-  .meter__output {
+  .rp-meter__output {
     @apply text-sm font-medium tabular-nums;
 
     grid-area: output;
   }
 
-  .meter__track {
-    @apply relative overflow-hidden rounded-sm bg-default;
+  .rp-meter__track {
+    @apply relative overflow-hidden bg-default;
+
+    border-radius: min(32px, var(--component-radius));
 
     grid-area: track;
 
@@ -42,8 +44,10 @@
     }
   }
 
-  .meter__fill {
-    @apply absolute start-0 top-0 h-full rounded-sm;
+  .rp-meter__fill {
+    @apply absolute start-0 top-0 h-full;
+
+    border-radius: min(32px, var(--component-radius));
 
     background-color: var(--meter-fill);
 
@@ -51,10 +55,6 @@
       background-color: Highlight;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: width 300ms var(--ease-out);
     @apply motion-reduce:transition-none;
   }
@@ -75,27 +75,19 @@
    Size variants
    ========================================================================== */
 
-.meter--sm {
-  .meter__track {
-    @apply h-1 rounded-xs;
-  }
-
-  .meter__fill {
-    @apply rounded-xs;
+.rp-meter--sm {
+  .rp-meter__track {
+    @apply h-1;
   }
 }
 
-.meter--md {
+.rp-meter--md {
   /* No styles as this is the default size */
 }
 
-.meter--lg {
-  .meter__track {
-    @apply h-3 rounded-md;
-  }
-
-  .meter__fill {
-    @apply rounded-md;
+.rp-meter--lg {
+  .rp-meter__track {
+    @apply h-3;
   }
 }
 
@@ -103,22 +95,22 @@
    Color variants
    ========================================================================== */
 
-.meter--default {
+.rp-meter--default {
   --meter-fill: var(--default-foreground);
 }
 
-.meter--accent {
+.rp-meter--accent {
   --meter-fill: var(--accent);
 }
 
-.meter--success {
+.rp-meter--success {
   --meter-fill: var(--success);
 }
 
-.meter--warning {
+.rp-meter--warning {
   --meter-fill: var(--warning);
 }
 
-.meter--danger {
+.rp-meter--danger {
   --meter-fill: var(--danger);
 }

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" }
 		}
 	}
 });