@ropav/styles 0.5.0 → 0.7.0

package/dist/components/avatar.css

@@ -1,5 +1,5 @@
 /* Base avatar styles */
-.avatar {
+.rp-avatar {
   @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-3xl bg-default;
 
   /* Forced Colors Mode flattens the fill onto the page, so a fallback avatar is initials sitting
@@ -13,12 +13,12 @@
 }
 
 /* Avatar fallback element */
-.avatar__fallback {
+.rp-avatar__fallback {
   @apply flex size-full items-center justify-center bg-default text-sm font-medium;
 }
 
 /* Avatar image element */
-.avatar__image {
+.rp-avatar__image {
   @apply absolute inset-0 aspect-square size-full;
 
   /**
@@ -28,64 +28,64 @@
 }
 
 /* Size modifiers */
-.avatar--sm {
+.rp-avatar--sm {
   @apply size-8 rounded-2xl;
 }
 
-.avatar--md {
+.rp-avatar--md {
   /* No styles as this is the default size */
 }
 
-.avatar--lg {
+.rp-avatar--lg {
   @apply size-12 rounded-3xl;
 
-  .avatar__fallback {
+  .rp-avatar__fallback {
     @apply text-base;
   }
 }
 
 /* Color modifiers for fallback */
-.avatar__fallback--accent {
+.rp-avatar__fallback--accent {
   @apply text-accent-soft-foreground;
 }
 
-.avatar__fallback--default {
+.rp-avatar__fallback--default {
   @apply text-default-soft-foreground;
 }
 
-.avatar__fallback--success {
+.rp-avatar__fallback--success {
   @apply text-success-soft-foreground;
 }
 
-.avatar__fallback--warning {
+.rp-avatar__fallback--warning {
   @apply text-warning-soft-foreground;
 }
 
-.avatar__fallback--danger {
+.rp-avatar__fallback--danger {
   @apply text-danger-soft-foreground;
 }
 
 /* Variant modifiers */
-.avatar--soft {
+.rp-avatar--soft {
   @apply bg-transparent;
 }
 
-.avatar--soft .avatar__fallback--accent {
+.rp-avatar--soft .rp-avatar__fallback--accent {
   @apply bg-accent-soft text-accent-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--success {
+.rp-avatar--soft .rp-avatar__fallback--success {
   @apply bg-success-soft text-success-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--warning {
+.rp-avatar--soft .rp-avatar__fallback--warning {
   @apply bg-warning-soft text-warning-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--default {
+.rp-avatar--soft .rp-avatar__fallback--default {
   @apply bg-default-soft text-default-soft-foreground;
 }
 
-.avatar--soft .avatar__fallback--danger {
+.rp-avatar--soft .rp-avatar__fallback--danger {
   @apply bg-danger-soft text-danger-soft-foreground;
 }

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

@@ -1,178 +1,36 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    placement: {
-        "bottom-left": {
-            base: string;
-        };
-        "bottom-right": {
-            base: string;
-        };
-        "top-left": {
-            base: string;
-        };
-        "top-right": {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        soft: {
-            base: string;
-        };
-    };
-}, {
-    anchor: string;
-    base: string;
-    label: string;
-}, undefined, {
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    placement: {
-        "bottom-left": {
-            base: string;
-        };
-        "bottom-right": {
-            base: string;
-        };
-        "top-left": {
-            base: string;
-        };
-        "top-right": {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        soft: {
-            base: string;
-        };
-    };
-}, {
-    anchor: string;
-    base: string;
-    label: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    placement: {
-        "bottom-left": {
-            base: string;
-        };
-        "bottom-right": {
-            base: string;
-        };
-        "top-left": {
-            base: string;
-        };
-        "top-right": {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        soft: {
-            base: string;
-        };
-    };
-}, {
-    anchor: string;
-    base: string;
-    label: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const badgeVariants: (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;
+    placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right" | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "primary" | "secondary" | "soft" | undefined;
+}) | undefined) => {
+    anchor: (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;
+        placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | "soft" | undefined;
+    }) | undefined) => string;
+    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;
+        placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | "soft" | undefined;
+    }) | undefined) => string;
+    label: (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;
+        placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | "soft" | undefined;
+    }) | undefined) => string;
+};
 export type BadgeVariants = VariantProps<typeof badgeVariants>;
 //# sourceMappingURL=badge.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;QAcpB,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,aAAa;YACX,IAAI;;QAEN,cAAc;YACZ,IAAI;;QAEN,UAAU;YACR,IAAI;;QAEN,WAAW;YACT,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;QAEN,IAAI;YACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmExB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/badge/badge.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/badge/badge.styles.ts
 const badgeVariants = tv({
 	defaultVariants: {
@@ -8,33 +8,33 @@ const badgeVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		anchor: "badge-anchor",
-		base: "badge",
-		label: "badge__label"
+		anchor: "rp-badge-anchor",
+		base: "rp-badge",
+		label: "rp-badge__label"
 	},
 	variants: {
 		color: {
-			accent: { base: "badge--accent" },
-			danger: { base: "badge--danger" },
-			default: { base: "badge--default" },
-			success: { base: "badge--success" },
-			warning: { base: "badge--warning" }
+			accent: { base: "rp-badge--accent" },
+			danger: { base: "rp-badge--danger" },
+			default: { base: "rp-badge--default" },
+			success: { base: "rp-badge--success" },
+			warning: { base: "rp-badge--warning" }
 		},
 		placement: {
-			"bottom-left": { base: "badge--bottom-left" },
-			"bottom-right": { base: "badge--bottom-right" },
-			"top-left": { base: "badge--top-left" },
-			"top-right": { base: "badge--top-right" }
+			"bottom-left": { base: "rp-badge--bottom-left" },
+			"bottom-right": { base: "rp-badge--bottom-right" },
+			"top-left": { base: "rp-badge--top-left" },
+			"top-right": { base: "rp-badge--top-right" }
 		},
 		size: {
-			lg: { base: "badge--lg" },
-			md: { base: "badge--md" },
-			sm: { base: "badge--sm" }
+			lg: { base: "rp-badge--lg" },
+			md: { base: "rp-badge--md" },
+			sm: { base: "rp-badge--sm" }
 		},
 		variant: {
-			primary: { base: "badge--primary" },
-			secondary: { base: "badge--secondary" },
-			soft: { base: "badge--soft" }
+			primary: { base: "rp-badge--primary" },
+			secondary: { base: "rp-badge--secondary" },
+			soft: { base: "rp-badge--soft" }
 		}
 	}
 });

package/dist/components/badge.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base styles */
-.badge {
+.rp-badge {
   @apply inline-flex shrink-0 items-center justify-center gap-0.5 font-medium;
 
   /* Default size (matches --md) */
@@ -27,11 +27,11 @@
   }
 }
 
-.badge__label {
+.rp-badge__label {
   @apply px-0.5;
 }
 
-.badge-anchor {
+.rp-badge-anchor {
   @apply relative inline-flex shrink-0;
 }
 
@@ -39,15 +39,15 @@
    Size variants
    ========================================================================== */
 
-.badge--lg {
+.rp-badge--lg {
   @apply min-h-8 min-w-8 rounded-2xl text-sm leading-[1.43];
 }
 
-.badge--md {
+.rp-badge--md {
   /* No styles as this is the default size */
 }
 
-.badge--sm {
+.rp-badge--sm {
   @apply min-h-4 min-w-4 rounded-xl text-[10px] leading-[1.34];
 }
 
@@ -55,23 +55,23 @@
    Color variants - set foreground color
    ========================================================================== */
 
-.badge--accent {
+.rp-badge--accent {
   --badge-fg: var(--accent-soft-foreground);
 }
 
-.badge--default {
+.rp-badge--default {
   --badge-fg: var(--default-foreground);
 }
 
-.badge--success {
+.rp-badge--success {
   --badge-fg: var(--success-soft-foreground);
 }
 
-.badge--warning {
+.rp-badge--warning {
   --badge-fg: var(--warning-soft-foreground);
 }
 
-.badge--danger {
+.rp-badge--danger {
   --badge-fg: var(--danger-soft-foreground);
 }
 
@@ -79,15 +79,15 @@
    Variant styles
    ========================================================================== */
 
-.badge--primary {
+.rp-badge--primary {
   /* Solid background - compound variants below handle bg/fg per color */
 }
 
-.badge--secondary {
+.rp-badge--secondary {
   /* Default background with colored text - base behavior */
 }
 
-.badge--soft {
+.rp-badge--soft {
   /* Soft/muted background - compound variants below handle bg/fg per color */
 }
 
@@ -95,22 +95,22 @@
    Placement variants
    ========================================================================== */
 
-.badge--top-right {
+.rp-badge--top-right {
   @apply absolute top-0 right-0;
   transform: translate(25%, -25%);
 }
 
-.badge--top-left {
+.rp-badge--top-left {
   @apply absolute top-0 left-0;
   transform: translate(-25%, -25%);
 }
 
-.badge--bottom-right {
+.rp-badge--bottom-right {
   @apply absolute right-0 bottom-0;
   transform: translate(25%, 25%);
 }
 
-.badge--bottom-left {
+.rp-badge--bottom-left {
   @apply absolute bottom-0 left-0;
   transform: translate(-25%, 25%);
 }
@@ -119,27 +119,27 @@
    Compound variants - Primary (solid background)
    ========================================================================== */
 
-.badge--primary.badge--accent {
+.rp-badge--primary.rp-badge--accent {
   --badge-bg: var(--accent);
   --badge-fg: var(--accent-foreground);
 }
 
-.badge--primary.badge--default {
+.rp-badge--primary.rp-badge--default {
   --badge-bg: var(--default);
   --badge-fg: var(--default-foreground);
 }
 
-.badge--primary.badge--success {
+.rp-badge--primary.rp-badge--success {
   --badge-bg: var(--success);
   --badge-fg: var(--success-foreground);
 }
 
-.badge--primary.badge--warning {
+.rp-badge--primary.rp-badge--warning {
   --badge-bg: var(--warning);
   --badge-fg: var(--warning-foreground);
 }
 
-.badge--primary.badge--danger {
+.rp-badge--primary.rp-badge--danger {
   --badge-bg: var(--danger);
   --badge-fg: var(--danger-foreground);
 }
@@ -148,27 +148,27 @@
    Compound variants - Soft (muted background)
    ========================================================================== */
 
-.badge--soft.badge--accent {
+.rp-badge--soft.rp-badge--accent {
   --badge-bg: var(--accent-soft);
   --badge-fg: var(--accent-soft-foreground);
 }
 
-.badge--soft.badge--default {
+.rp-badge--soft.rp-badge--default {
   --badge-bg: var(--default-soft);
   --badge-fg: var(--default-soft-foreground);
 }
 
-.badge--soft.badge--success {
+.rp-badge--soft.rp-badge--success {
   --badge-bg: var(--success-soft);
   --badge-fg: var(--success-soft-foreground);
 }
 
-.badge--soft.badge--warning {
+.rp-badge--soft.rp-badge--warning {
   --badge-bg: var(--warning-soft);
   --badge-fg: var(--warning-soft-foreground);
 }
 
-.badge--soft.badge--danger {
+.rp-badge--soft.rp-badge--danger {
   --badge-bg: var(--danger-soft);
   --badge-fg: var(--danger-soft-foreground);
 }

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

@@ -1,46 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const breadcrumbsVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    item: string;
-    link: string;
-    separator: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    item: string;
-    link: string;
-    separator: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    item: string;
-    link: string;
-    separator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const breadcrumbsVariants: (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) => {
+    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;
+    } & object) | 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;
+    } & object) | undefined) => string;
+    link: (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;
+    } & object) | 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;
+    } & object) | undefined) => string;
+};
 export type BreadcrumbsVariants = VariantProps<typeof breadcrumbsVariants>;
 //# sourceMappingURL=breadcrumbs.styles.d.ts.map

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

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

package/dist/components/breadcrumbs/breadcrumbs.styles.js

@@ -1,10 +1,10 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/breadcrumbs/breadcrumbs.styles.ts
 const breadcrumbsVariants = tv({ slots: {
-	base: "breadcrumbs",
-	item: "breadcrumbs__item",
-	link: "breadcrumbs__link",
-	separator: "breadcrumbs__separator"
+	base: "rp-breadcrumbs",
+	item: "rp-breadcrumbs__item",
+	link: "rp-breadcrumbs__link",
+	separator: "rp-breadcrumbs__separator"
 } });
 //#endregion
 export { breadcrumbsVariants };