@ropav/styles 0.6.0 → 0.7.0

package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts

@@ -1,52 +1,22 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const calendarYearPickerVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerHeading?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-            yearCell?: import("tailwind-variants").ClassValue;
-            yearGrid?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerHeading?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-            yearCell?: import("tailwind-variants").ClassValue;
-            yearGrid?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    trigger: string;
-    triggerHeading: string;
-    triggerIndicator: string;
-    yearCell: string;
-    yearGrid: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerHeading?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-            yearCell?: import("tailwind-variants").ClassValue;
-            yearGrid?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    trigger: string;
-    triggerHeading: string;
-    triggerIndicator: string;
-    yearCell: string;
-    yearGrid: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    trigger: string;
-    triggerHeading: string;
-    triggerIndicator: string;
-    yearCell: string;
-    yearGrid: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const calendarYearPickerVariants: (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) => {
+    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;
+    } & object) | undefined) => string;
+    triggerHeading: (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;
+    triggerIndicator: (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;
+    yearCell: (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;
+    yearGrid: (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 CalendarYearPickerVariants = VariantProps<typeof calendarYearPickerVariants>;
 //# sourceMappingURL=calendar-year-picker.styles.d.ts.map

package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts.map

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

package/dist/components/calendar-year-picker/calendar-year-picker.styles.js

@@ -1,11 +1,11 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/calendar-year-picker/calendar-year-picker.styles.ts
 const calendarYearPickerVariants = tv({ slots: {
-	trigger: "calendar-year-picker__trigger",
-	triggerHeading: "calendar-year-picker__trigger-heading",
-	triggerIndicator: "calendar-year-picker__trigger-indicator",
-	yearCell: "calendar-year-picker__year-cell",
-	yearGrid: "calendar-year-picker__year-grid"
+	trigger: "rp-calendar-year-picker__trigger",
+	triggerHeading: "rp-calendar-year-picker__trigger-heading",
+	triggerIndicator: "rp-calendar-year-picker__trigger-indicator",
+	yearCell: "rp-calendar-year-picker__year-cell",
+	yearGrid: "rp-calendar-year-picker__year-grid"
 } });
 //#endregion
 export { calendarYearPickerVariants };

package/dist/components/calendar-year-picker.css

@@ -2,7 +2,7 @@
  * Calendar Year Picker Component Styles
  *
  * Internal component used inside Calendar / RangeCalendar to provide a
- * toggleable year selector. Uses CSS :has() on the parent .calendar to
+ * toggleable year selector. Uses CSS :has() on the parent .rp-calendar to
  * drive crossfade transitions.
  *
  * The year grid is absolutely positioned and sized via JS to match the
@@ -15,8 +15,8 @@
 /* -----------------------------------------------------------------------------
  * Positioning Context
  * -------------------------------------------------------------------------- */
-.calendar:has(.calendar-year-picker__year-grid),
-.range-calendar:has(.calendar-year-picker__year-grid) {
+.rp-calendar:has(.rp-calendar-year-picker__year-grid),
+.rp-range-calendar:has(.rp-calendar-year-picker__year-grid) {
   position: relative;
 }
 
@@ -31,8 +31,8 @@
  * -------------------------------------------------------------------------- */
 
 /* Day grid – default visible */
-.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"],
-.range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] {
+.rp-calendar:has(.rp-calendar-year-picker__year-grid) > [data-slot="calendar-grid"],
+.rp-range-calendar:has(.rp-calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] {
   will-change: opacity;
   transition:
     opacity 150ms var(--ease-out),
@@ -41,8 +41,9 @@
 }
 
 /* Day grid – hidden when year picker is open (fade + blur out) */
-.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"],
-.range-calendar:has(.calendar-year-picker__year-grid[data-open="true"])
+.rp-calendar:has(.rp-calendar-year-picker__year-grid[data-open="true"])
+  > [data-slot="calendar-grid"],
+.rp-range-calendar:has(.rp-calendar-year-picker__year-grid[data-open="true"])
   > [data-slot="range-calendar-grid"] {
   @apply pointer-events-none opacity-0;
   visibility: hidden;
@@ -55,7 +56,7 @@
 /* -----------------------------------------------------------------------------
  * Trigger Button
  * -------------------------------------------------------------------------- */
-.calendar-year-picker__trigger {
+.rp-calendar-year-picker__trigger {
   @apply flex flex-1 items-center justify-start gap-1 rounded-lg outline-none;
 
   cursor: var(--cursor-interactive);
@@ -67,14 +68,14 @@
   }
 }
 
-.calendar-year-picker__trigger-heading {
+.rp-calendar-year-picker__trigger-heading {
   @apply text-sm font-medium;
 
   transition: color 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 }
 
-.calendar-year-picker__trigger-indicator {
+.rp-calendar-year-picker__trigger-indicator {
   @apply text-xs text-accent-soft-foreground rtl:[transform:rotate(180deg)];
 
   transition: transform 150ms var(--ease-out);
@@ -82,11 +83,11 @@
 }
 
 /* Rotate chevron when open */
-.calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-indicator {
+.rp-calendar-year-picker__trigger[data-open="true"] .rp-calendar-year-picker__trigger-indicator {
   transform: rotate(90deg);
 }
 
-.calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading {
+.rp-calendar-year-picker__trigger[data-open="true"] .rp-calendar-year-picker__trigger-heading {
   @apply text-accent-soft-foreground;
 }
 
@@ -96,7 +97,7 @@
  * Absolutely positioned over the day grid area. The exact `top` and `height`
  * are set via JS to match the sibling day grid element.
  * -------------------------------------------------------------------------- */
-.calendar-year-picker__year-grid {
+.rp-calendar-year-picker__year-grid {
   @apply pointer-events-none absolute start-0 end-0 grid scrollbar content-start gap-1 overflow-y-auto p-1 opacity-0;
   grid-template-columns: repeat(3, 1fr);
 
@@ -104,7 +105,7 @@
   will-change: opacity;
 }
 
-.calendar-year-picker__year-grid[data-open="true"] {
+.rp-calendar-year-picker__year-grid[data-open="true"] {
   @apply pointer-events-auto opacity-100;
 
   /* When opening: slight delay so the day grid starts fading out first */
@@ -115,7 +116,7 @@
 /* -----------------------------------------------------------------------------
  * Year Cell
  * -------------------------------------------------------------------------- */
-.calendar-year-picker__year-cell {
+.rp-calendar-year-picker__year-cell {
   @apply relative inline-flex h-8 items-center justify-center rounded-component px-2.5 text-sm font-medium outline-none select-none no-highlight;
   touch-action: manipulation;
 
@@ -131,7 +132,7 @@
   background-color: var(--calendar-year-picker-year-cell-bg);
   color: var(--calendar-year-picker-year-cell-fg);
 
-  /* Same as `.tag`. */
+  /* Same as `.rp-tag`. */
   transition:
     color 100ms var(--ease-smooth),
     scale 100ms var(--ease-smooth),
@@ -150,7 +151,7 @@
     }
   }
 
-  /* Selected state (current year) – same as .tag[data-selected] */
+  /* Selected state (current year) – same as .rp-tag[data-selected] */
   &[data-selected="true"],
   &[aria-selected="true"] {
     background-color: var(--calendar-year-picker-year-cell-bg-selected);

package/dist/components/calendar.css

@@ -8,23 +8,23 @@
 /* -----------------------------------------------------------------------------
  * Base Calendar Styles
  * -------------------------------------------------------------------------- */
-.calendar {
+.rp-calendar {
   @apply w-63 max-w-63;
 
   container-type: inline-size;
 }
 
 /* Week view – visibleDuration={{ weeks: n }} */
-.calendar--week-view {
-  .calendar__cell {
+.rp-calendar--week-view {
+  .rp-calendar__cell {
     /* Keep cells circular on the 7-column grid; only filled cells take space. */
     @apply aspect-square size-auto w-full place-self-center;
   }
 }
 
 /* Day view – visibleDuration={{ days: n }} */
-.calendar--day-view {
-  .calendar__cell {
+.rp-calendar--day-view {
+  .rp-calendar__cell {
     @apply aspect-square size-auto w-full place-self-center;
   }
 
@@ -32,12 +32,12 @@
    * Isolate header and body into separate 7-column grids. With display:contents
    * on the root grid, fewer than 7 weekday headers flow into the same row as dates.
    */
-  .calendar__grid {
+  .rp-calendar__grid {
     display: flex;
     flex-direction: column;
   }
 
-  .calendar__grid-header {
+  .rp-calendar__grid-header {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     @apply w-full;
@@ -47,7 +47,7 @@
     }
   }
 
-  .calendar__grid-body {
+  .rp-calendar__grid-body {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     @apply mt-1 w-full;
@@ -65,21 +65,21 @@
 /* -----------------------------------------------------------------------------
  * Calendar Header
  * -------------------------------------------------------------------------- */
-.calendar__header {
+.rp-calendar__header {
   @apply flex items-center justify-between px-0.5 pb-4;
 
-  &:has(.calendar-year-picker__trigger[data-open="true"]) {
-    .calendar__nav-button {
+  &:has(.rp-calendar-year-picker__trigger[data-open="true"]) {
+    .rp-calendar__nav-button {
       @apply pointer-events-none opacity-0;
     }
   }
 }
 
-.calendar__heading {
+.rp-calendar__heading {
   @apply flex-1 text-sm font-medium;
 }
 
-.calendar__nav-button {
+.rp-calendar__nav-button {
   @apply flex size-6 items-center justify-center text-accent-soft-foreground;
 
   border-radius: min(32px, var(--component-radius));
@@ -122,27 +122,27 @@
   }
 }
 
-.calendar__nav-button-icon {
+.rp-calendar__nav-button-icon {
   @apply size-4 rtl:rotate-180;
 }
 
 /* -----------------------------------------------------------------------------
  * Calendar Grid
  * -------------------------------------------------------------------------- */
-.calendar__grid {
+.rp-calendar__grid {
   /* Override table display with CSS Grid for easier customization */
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   @apply w-full;
 
   &[aria-readonly="true"] {
-    .calendar__cell {
+    .rp-calendar__cell {
       @apply pointer-events-none;
     }
   }
 }
 
-.calendar__grid-header {
+.rp-calendar__grid-header {
   /* Grid header (thead) styles */
   display: contents;
 
@@ -151,7 +151,7 @@
   }
 }
 
-.calendar__grid-body {
+.rp-calendar__grid-body {
   /* Grid body (tbody) styles */
   display: contents;
 
@@ -165,13 +165,13 @@
   }
 }
 
-.calendar__grid-row {
+.rp-calendar__grid-row {
   /* Use 'contents' so cells participate directly in grid */
   /* Note: This class can be used for custom row styling if needed */
   display: contents;
 }
 
-.calendar__header-cell {
+.rp-calendar__header-cell {
   /* Header cell (th - weekday names) styles */
   @apply flex items-center justify-center pb-2 text-xs font-medium text-muted;
 }
@@ -179,7 +179,7 @@
 /* -----------------------------------------------------------------------------
  * Calendar Cells
  * -------------------------------------------------------------------------- */
-.calendar__cell {
+.rp-calendar__cell {
   /* Cell (td) wrapper styles - margins now work with grid layout */
   @apply relative flex aspect-square size-full items-center justify-center text-center text-sm font-medium outline-none no-highlight;
 
@@ -291,7 +291,7 @@
 }
 
 /* Cell indicator - small dot at bottom center of cell */
-.calendar__cell-indicator {
+.rp-calendar__cell-indicator {
   @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs;
 
   --calendar-cell-indicator-bg: var(--muted);

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

@@ -1,71 +1,40 @@
-import type { VariantProps } from "tailwind-variants";
-declare const cardVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        tertiary: {
-            base: string;
-        };
-        transparent: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    footer: string;
-    header: string;
-    title: string;
-}, undefined, {
-    variant: {
-        default: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        tertiary: {
-            base: string;
-        };
-        transparent: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    footer: string;
-    header: string;
-    title: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        tertiary: {
-            base: string;
-        };
-        transparent: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    footer: string;
-    header: string;
-    title: string;
-}>>;
+import type { VariantProps } from "../../tv";
+declare const cardVariants: (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?: "default" | "secondary" | "tertiary" | "transparent" | 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;
+    } & {
+        variant?: "default" | "secondary" | "tertiary" | "transparent" | undefined;
+    }) | undefined) => string;
+    content: (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?: "default" | "secondary" | "tertiary" | "transparent" | undefined;
+    }) | undefined) => string;
+    description: (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?: "default" | "secondary" | "tertiary" | "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;
+    } & {
+        variant?: "default" | "secondary" | "tertiary" | "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;
+    } & {
+        variant?: "default" | "secondary" | "tertiary" | "transparent" | undefined;
+    }) | undefined) => string;
+    title: (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?: "default" | "secondary" | "tertiary" | "transparent" | undefined;
+    }) | undefined) => string;
+};
 export { cardVariants };
 export type CardVariants = VariantProps<typeof cardVariants>;
 //# sourceMappingURL=card.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,YAAY;;QAcZ,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;QAEN,QAAQ;YACN,IAAI;;QAEN,WAAW;YACT,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BhB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/card/card.styles.js

@@ -1,20 +1,20 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/card/card.styles.ts
 const cardVariants = tv({
 	defaultVariants: { variant: "default" },
 	slots: {
-		base: "card",
-		content: "card__content",
-		description: "card__description",
-		footer: "card__footer",
-		header: "card__header",
-		title: "card__title"
+		base: "rp-card",
+		content: "rp-card__content",
+		description: "rp-card__description",
+		footer: "rp-card__footer",
+		header: "rp-card__header",
+		title: "rp-card__title"
 	},
 	variants: { variant: {
-		default: { base: "card--default" },
-		secondary: { base: "card--secondary" },
-		tertiary: { base: "card--tertiary" },
-		transparent: { base: "card--transparent" }
+		default: { base: "rp-card--default" },
+		secondary: { base: "rp-card--secondary" },
+		tertiary: { base: "rp-card--tertiary" },
+		transparent: { base: "rp-card--transparent" }
 	} }
 });
 //#endregion

package/dist/components/card.css

@@ -1,44 +1,44 @@
 /* Card component styles */
 
 /* Block */
-.card {
+.rp-card {
   @apply relative flex flex-col gap-3 overflow-visible p-4;
   @apply shadow-surface;
   border-radius: min(32px, var(--component-radius));
 }
 
 /* Element - header */
-.card__header {
+.rp-card__header {
   @apply flex flex-col;
 }
 
 /* Element - title */
-.card__title {
+.rp-card__title {
   @apply text-sm leading-6 font-medium text-foreground;
 }
 
 /* Element - description */
-.card__description {
+.rp-card__description {
   @apply text-sm leading-5 text-muted;
 }
 
 /* Element - content */
-.card__content {
+.rp-card__content {
   @apply flex flex-1 flex-col gap-1;
 }
 
 /* Element - footer */
-.card__footer {
+.rp-card__footer {
   @apply flex flex-row items-center;
 }
 
 /* Modifier - variant */
 
-.card--transparent {
+.rp-card--transparent {
   @apply border-none bg-transparent shadow-none;
 }
 
-.card--default {
+.rp-card--default {
   @apply bg-surface;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
@@ -49,7 +49,7 @@
   }
 }
 
-.card--secondary {
+.rp-card--secondary {
   @apply bg-surface-secondary;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
@@ -60,7 +60,7 @@
   }
 }
 
-.card--tertiary {
+.rp-card--tertiary {
   @apply bg-surface-tertiary;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container