@ropav/styles 0.6.0 → 0.7.0

package/dist/components/menu-item/menu-item.styles.d.ts

@@ -1,43 +1,24 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const menuItemVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        danger: {
-            item: string;
-        };
-        default: {
-            item: string;
-        };
-    };
-}, {
-    indicator: string;
-    item: string;
-    submenuIndicator: string;
-}, undefined, {
-    variant: {
-        danger: {
-            item: string;
-        };
-        default: {
-            item: string;
-        };
-    };
-}, {
-    indicator: string;
-    item: string;
-    submenuIndicator: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        danger: {
-            item: string;
-        };
-        default: {
-            item: string;
-        };
-    };
-}, {
-    indicator: string;
-    item: string;
-    submenuIndicator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const menuItemVariants: (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;
+} & {
+    variant?: "danger" | "default" | undefined;
+}) | undefined) => {
+    indicator: (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;
+    } & {
+        variant?: "danger" | "default" | 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;
+    } & {
+        variant?: "danger" | "default" | undefined;
+    }) | undefined) => string;
+    submenuIndicator: (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;
+    } & {
+        variant?: "danger" | "default" | undefined;
+    }) | undefined) => string;
+};
 export type MenuItemVariants = VariantProps<typeof menuItemVariants>;
 //# sourceMappingURL=menu-item.styles.d.ts.map

package/dist/components/menu-item/menu-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;QAWvB,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/menu-item/menu-item.styles.js

@@ -1,15 +1,15 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/menu-item/menu-item.styles.ts
 const menuItemVariants = tv({
 	defaultVariants: { variant: "default" },
 	slots: {
-		indicator: "menu-item__indicator",
-		item: "menu-item",
-		submenuIndicator: "menu-item__indicator menu-item__indicator--submenu"
+		indicator: "rp-menu-item__indicator",
+		item: "rp-menu-item",
+		submenuIndicator: "rp-menu-item__indicator rp-menu-item__indicator--submenu"
 	},
 	variants: { variant: {
-		danger: { item: "menu-item--danger" },
-		default: { item: "menu-item--default" }
+		danger: { item: "rp-menu-item--danger" },
+		default: { item: "rp-menu-item--default" }
 	} }
 });
 //#endregion

package/dist/components/menu-item.css

@@ -2,7 +2,7 @@
    Base menu item styles
    ========================================================================== */
 
-.menu-item {
+.rp-menu-item {
   @apply relative flex min-h-9 w-full items-center justify-start gap-3 px-2 py-1.5 outline-none no-highlight;
 
   border-radius: min(32px, var(--component-radius));
@@ -29,12 +29,12 @@
   }
 
   /* Add inline-start padding when indicator is present */
-  &:has(.menu-item__indicator) {
+  &:has(.rp-menu-item__indicator) {
     @apply ps-7;
   }
 
   /* Add inline-end padding when indicator is present and has submenu */
-  &[data-has-submenu="true"]:has(.menu-item__indicator) {
+  &[data-has-submenu="true"]:has(.rp-menu-item__indicator) {
     @apply ps-2 pe-7;
   }
 
@@ -90,7 +90,7 @@
    Menu item indicator
    ========================================================================== */
 
-.menu-item__indicator {
+.rp-menu-item__indicator {
   @apply absolute start-2 top-1/2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-muted;
 
   /**
@@ -99,7 +99,7 @@
   @apply transition duration-250 motion-reduce:transition-none;
 
   /* Position on the inline-end when menu item has submenu */
-  .menu-item[data-has-submenu="true"] & {
+  .rp-menu-item[data-has-submenu="true"] & {
     @apply start-auto end-2;
   }
 
@@ -107,7 +107,7 @@
   [data-slot="menu-item-indicator--checkmark"] {
     @apply size-2.5;
 
-    .menu-item[data-selection-mode="multiple"] & {
+    .rp-menu-item[data-selection-mode="multiple"] & {
       /**
        * Transitions
        */
@@ -119,7 +119,7 @@
   [data-slot="menu-item-indicator--dot"] {
     @apply size-2;
 
-    .menu-item[data-selection-mode="multiple"] & {
+    .rp-menu-item[data-selection-mode="multiple"] & {
       /**
      * Transitions
      */
@@ -133,7 +133,7 @@
 }
 
 /* Submenu indicator (chevron-right) */
-.menu-item__indicator--submenu {
+.rp-menu-item__indicator--submenu {
   @apply text-muted;
 
   svg {
@@ -142,12 +142,12 @@
 }
 
 /* Default variant */
-.menu-item--default {
+.rp-menu-item--default {
 }
 
 /* Danger variant */
-.menu-item--danger {
-  .menu-item__indicator {
+.rp-menu-item--danger {
+  .rp-menu-item__indicator {
     @apply text-danger;
   }
 

package/dist/components/menu-section/menu-section.styles.d.ts

@@ -1,4 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const menuSectionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "menu-section", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const menuSectionVariants: (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) => string;
 export type MenuSectionVariants = VariantProps<typeof menuSectionVariants>;
 //# sourceMappingURL=menu-section.styles.d.ts.map

package/dist/components/menu-section/menu-section.styles.d.ts.map

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

package/dist/components/menu-section/menu-section.styles.js

@@ -1,5 +1,5 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/menu-section/menu-section.styles.ts
-const menuSectionVariants = tv({ base: "menu-section" });
+const menuSectionVariants = tv({ base: "rp-menu-section" });
 //#endregion
 export { menuSectionVariants };

package/dist/components/menu-section.css

@@ -2,6 +2,6 @@
    Base menu section styles
    ========================================================================== */
 
-.menu-section {
+.rp-menu-section {
   @apply flex flex-col items-start gap-0;
 }

package/dist/components/menu.css

@@ -4,11 +4,11 @@
 
 /**
  * Worn by both menus — the standalone one and the one inside a dropdown, which carries
- * `dropdown__menu` alongside it. The two used to define the same rules twice, differing only in
+ * `rp-dropdown__menu` alongside it. The two used to define the same rules twice, differing only in
  * `gap`; that difference now lives with the dropdown's other overrides in `dropdown.css`, nested
  * where it has the specificity to win, since this file is imported after that one.
  */
-.menu {
+.rp-menu {
   @apply relative flex w-full flex-col gap-1 overflow-clip p-1;
 
   /* This makes the separator take up 94% of the width and be centered */
@@ -22,13 +22,13 @@
    ========================================================================== */
 
 /* A row is as tall as a field of the same size, so a collection standing beside one lines up. */
-.menu--sm {
+.rp-menu--sm {
   [data-slot="menu-item"] {
     @apply min-h-8 py-1;
   }
 }
 
-.menu--lg {
+.rp-menu--lg {
   @apply text-base;
 
   [data-slot="menu-item"] {

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

@@ -1,106 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const meterVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    fill: string;
-    output: string;
-    track: string;
-}, undefined, {
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    fill: string;
-    output: string;
-    track: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    fill: string;
-    output: string;
-    track: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const meterVariants: (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;
+} & {
+    color?: "accent" | "danger" | "default" | "success" | "warning" | 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;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    fill: (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;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    output: (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;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    track: (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;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+};
 export type MeterVariants = VariantProps<typeof meterVariants>;
 //# sourceMappingURL=meter.styles.d.ts.map

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

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

package/dist/components/meter/meter.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/meter/meter.styles.ts
 const meterVariants = tv({
 	defaultVariants: {
@@ -6,23 +6,23 @@ const meterVariants = tv({
 		size: "md"
 	},
 	slots: {
-		base: "meter",
-		fill: "meter__fill",
-		output: "meter__output",
-		track: "meter__track"
+		base: "rp-meter",
+		fill: "rp-meter__fill",
+		output: "rp-meter__output",
+		track: "rp-meter__track"
 	},
 	variants: {
 		color: {
-			accent: { base: "meter--accent" },
-			danger: { base: "meter--danger" },
-			default: { base: "meter--default" },
-			success: { base: "meter--success" },
-			warning: { base: "meter--warning" }
+			accent: { base: "rp-meter--accent" },
+			danger: { base: "rp-meter--danger" },
+			default: { base: "rp-meter--default" },
+			success: { base: "rp-meter--success" },
+			warning: { base: "rp-meter--warning" }
 		},
 		size: {
-			lg: { base: "meter--lg" },
-			md: { base: "meter--md" },
-			sm: { base: "meter--sm" }
+			lg: { base: "rp-meter--lg" },
+			md: { base: "rp-meter--md" },
+			sm: { base: "rp-meter--sm" }
 		}
 	}
 });

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,13 +19,13 @@
     grid-area: label;
   }
 
-  .meter__output {
+  .rp-meter__output {
     @apply text-sm font-medium tabular-nums;
 
     grid-area: output;
   }
 
-  .meter__track {
+  .rp-meter__track {
     @apply relative overflow-hidden bg-default;
 
     border-radius: min(32px, var(--component-radius));
@@ -44,7 +44,7 @@
     }
   }
 
-  .meter__fill {
+  .rp-meter__fill {
     @apply absolute start-0 top-0 h-full;
 
     border-radius: min(32px, var(--component-radius));
@@ -75,18 +75,18 @@
    Size variants
    ========================================================================== */
 
-.meter--sm {
-  .meter__track {
+.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 {
+.rp-meter--lg {
+  .rp-meter__track {
     @apply h-3;
   }
 }
@@ -95,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);
 }