@ropav/styles 0.5.0 → 0.7.0

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,29 +65,27 @@
 /* -----------------------------------------------------------------------------
  * 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 {
-  @apply flex size-6 items-center justify-center rounded-2xl text-accent-soft-foreground;
+.rp-calendar__nav-button {
+  @apply flex size-6 items-center justify-center text-accent-soft-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   will-change: scale;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out),
     background-color 100ms var(--ease-out),
@@ -101,7 +99,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default text-accent-soft-foreground;
+      @apply bg-state-layer;
     }
   }
 
@@ -124,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;
 
@@ -153,7 +151,7 @@
   }
 }
 
-.calendar__grid-body {
+.rp-calendar__grid-body {
   /* Grid body (tbody) styles */
   display: contents;
 
@@ -167,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;
 }
@@ -181,15 +179,32 @@
 /* -----------------------------------------------------------------------------
  * 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 rounded-3xl text-center text-sm font-medium outline-none no-highlight;
+  @apply relative flex aspect-square size-full items-center justify-center text-center text-sm font-medium outline-none no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
+
+  /* Eight states repaint a day, several of them in pairs — today and hovered, selected and
+   * pressed, selected and outside the month. One declaration cannot tell them apart, so each
+   * reads its own. */
+  --calendar-cell-bg: transparent;
+  --calendar-cell-bg-hover: var(--state-layer);
+  --calendar-cell-bg-pressed: var(--calendar-cell-bg-hover);
+  --calendar-cell-bg-today: var(--accent-soft);
+  --calendar-cell-bg-today-hover: var(--accent-soft-hover);
+  --calendar-cell-bg-selected: var(--accent);
+  --calendar-cell-bg-selected-pressed: var(--accent-hover);
+  --calendar-cell-bg-selected-outside-month: var(--state-layer);
+  --calendar-cell-fg: currentcolor;
+  --calendar-cell-fg-today: var(--accent-soft-foreground);
+  --calendar-cell-fg-selected: var(--accent-foreground);
+  --calendar-cell-fg-outside-month: var(--muted);
+
+  background-color: var(--calendar-cell-bg);
+  color: var(--calendar-cell-fg);
 
   will-change: scale;
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out),
     box-shadow 100ms var(--ease-out);
@@ -205,7 +220,8 @@
 
   /* Today indicator */
   &[data-today="true"] {
-    @apply bg-accent-soft text-accent-soft-foreground;
+    background-color: var(--calendar-cell-bg-today);
+    color: var(--calendar-cell-fg-today);
 
     /* A tinted background is all that marks today, and forced colors flattens it onto the page.
      * An edge rather than a fill, so today still reads as itself once it is also selected. */
@@ -217,25 +233,27 @@
     @media (hover: hover) {
       &:hover:not([data-selected="true"]),
       &[data-hovered="true"]:not([data-selected="true"]) {
-        @apply bg-accent-soft-hover;
+        background-color: var(--calendar-cell-bg-today-hover);
       }
     }
   }
 
   /* Selected state */
   &[data-selected="true"] {
-    @apply bg-accent text-accent-foreground;
+    background-color: var(--calendar-cell-bg-selected);
+    color: var(--calendar-cell-fg-selected);
+
     @apply forced-selected;
   }
 
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply bg-default;
+    background-color: var(--calendar-cell-bg-pressed);
     transform: scale(0.95);
 
     &[data-selected="true"] {
-      @apply bg-accent-hover;
+      background-color: var(--calendar-cell-bg-selected-pressed);
     }
   }
 
@@ -243,17 +261,19 @@
   @media (hover: hover) {
     &:hover:not([data-selected="true"]),
     &[data-hovered="true"]:not([data-selected="true"]) {
-      @apply bg-default;
+      background-color: var(--calendar-cell-bg-hover);
     }
   }
 
   /* Outside month (previous/next month days) */
   &[data-outside-month="true"] {
-    @apply text-muted opacity-50;
+    @apply opacity-50;
+
+    color: var(--calendar-cell-fg-outside-month);
   }
 
   &[data-selected="true"][data-outside-month="true"] {
-    @apply bg-default;
+    background-color: var(--calendar-cell-bg-selected-outside-month);
   }
 
   /* Unavailable dates */
@@ -271,11 +291,16 @@
 }
 
 /* Cell indicator - small dot at bottom center of cell */
-.calendar__cell-indicator {
-  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs bg-muted;
+.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);
+  --calendar-cell-indicator-bg-selected: var(--accent-foreground);
+
+  background-color: var(--calendar-cell-indicator-bg);
 
   /* Indicator color changes when cell is selected */
   [data-selected="true"] > & {
-    @apply bg-accent-foreground;
+    background-color: var(--calendar-cell-indicator-bg-selected);
   }
 }

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

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

@@ -1,46 +1,29 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const checkboxVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    indicator: string;
-}, undefined, {
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    indicator: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    indicator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const checkboxVariants: (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?: "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;
+    } & {
+        variant?: "primary" | "secondary" | 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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    control: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 export type CheckboxVariants = VariantProps<typeof checkboxVariants>;
 //# sourceMappingURL=checkbox.styles.d.ts.map

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

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

package/dist/components/checkbox/checkbox.styles.js

@@ -1,16 +1,16 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/checkbox/checkbox.styles.ts
 const checkboxVariants = tv({
 	defaultVariants: { variant: "primary" },
 	slots: {
-		base: "checkbox",
-		content: "checkbox__content",
-		control: "checkbox__control",
-		indicator: "checkbox__indicator"
+		base: "rp-checkbox",
+		content: "rp-checkbox__content",
+		control: "rp-checkbox__control",
+		indicator: "rp-checkbox__indicator"
 	},
 	variants: { variant: {
-		primary: { base: "checkbox--primary" },
-		secondary: { base: "checkbox--secondary" }
+		primary: { base: "rp-checkbox--primary" },
+		secondary: { base: "rp-checkbox--secondary" }
 	} }
 });
 //#endregion

package/dist/components/checkbox-group/checkbox-group.styles.d.ts

@@ -1,19 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const checkboxGroupVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: "checkbox-group--primary";
-        secondary: "checkbox-group--secondary";
-    };
-}, undefined, "checkbox-group", {
-    variant: {
-        primary: "checkbox-group--primary";
-        secondary: "checkbox-group--secondary";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: "checkbox-group--primary";
-        secondary: "checkbox-group--secondary";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const checkboxGroupVariants: (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?: "primary" | "secondary" | undefined;
+}) | undefined) => string;
 export type CheckboxGroupVariants = VariantProps<typeof checkboxGroupVariants>;
 //# sourceMappingURL=checkbox-group.styles.d.ts.map

package/dist/components/checkbox-group/checkbox-group.styles.d.ts.map

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

package/dist/components/checkbox-group/checkbox-group.styles.js

@@ -1,11 +1,11 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/checkbox-group/checkbox-group.styles.ts
 const checkboxGroupVariants = tv({
-	base: "checkbox-group",
+	base: "rp-checkbox-group",
 	defaultVariants: { variant: "primary" },
 	variants: { variant: {
-		primary: "checkbox-group--primary",
-		secondary: "checkbox-group--secondary"
+		primary: "rp-checkbox-group--primary",
+		secondary: "rp-checkbox-group--secondary"
 	} }
 });
 //#endregion

package/dist/components/checkbox-group.css

@@ -1,4 +1,4 @@
-.checkbox-group {
+.rp-checkbox-group {
   @apply flex flex-col;
 
   [data-slot="checkbox"] {