@ropav/styles 0.5.0 → 0.7.0

package/dist/components/splitter.css

@@ -3,8 +3,8 @@
 /*
  * Orientation is a modifier class rather than a `[data-orientation]` descendant selector, and
  * that is not a style preference. A splitter nests — a vertical group inside a panel of a
- * horizontal one is the ordinary case — so `.splitter[data-orientation="horizontal"]
- * .splitter__handle` would reach the inner group's handle as well as its own and lay it out on
+ * horizontal one is the ordinary case — so `.rp-splitter[data-orientation="horizontal"]
+ * .rp-splitter__handle` would reach the inner group's handle as well as its own and lay it out on
  * the wrong axis. Every rule below therefore sits on the part it styles.
  *
  * The modifier also buys the Storybook forced-colors sweep, which collects `[class*='--']` and a
@@ -12,15 +12,15 @@
  * anything — the handle and its grip — would never be audited.
  */
 
-.splitter {
+.rp-splitter {
   @apply isolate flex h-full w-full;
 }
 
-.splitter--horizontal {
+.rp-splitter--horizontal {
   @apply flex-row;
 }
 
-.splitter--vertical {
+.rp-splitter--vertical {
   @apply flex-col;
 }
 
@@ -31,14 +31,14 @@
  * `flex-1` is the unmanaged fallback only. The component writes the whole `flex` shorthand inline;
  * an inline `flex-basis` alone would leave this `flex-grow: 1` in place and the panel would grow
  * straight back past the size it was given. */
-.splitter__panel {
+.rp-splitter__panel {
   @apply relative min-h-0 min-w-0 flex-1 overflow-hidden;
 }
 
 /* The flex item is the gutter and paints nothing itself. The line you see is `::after`, absolutely
  * positioned, which is what lets it thicken on hover without the gutter changing width and
- * reflowing both panels by a pixel. `.slider__thumb::after` carries its knob the same way. */
-.splitter__handle {
+ * reflowing both panels by a pixel. `.rp-slider__thumb::after` carries its knob the same way. */
+.rp-splitter__handle {
   /* The gutter is the line, with nothing either side of it. Dead space inside the gutter shows up
    * as a gap wherever a nested group's divider meets this one — the panel between them clips its own
    * contents, so the inner line cannot reach across to close it. `1px` rather than a spacing step,
@@ -64,6 +64,14 @@
    * every crossing reads as a twitch rather than an invitation. Waiting means only an approach that
    * settles counts. */
   --splitter-highlight-delay: 500ms;
+  /* What the line and the grip are painted with, at rest and lit. Separate properties so a caller
+   * can retune one state without flattening the rest onto a single colour. */
+  --splitter-line: var(--separator);
+  --splitter-line-hover: var(--accent);
+  --splitter-line-dragging: var(--splitter-line-hover);
+  --splitter-grip-bg: var(--separator);
+  --splitter-grip-bg-hover: var(--accent);
+  --splitter-grip-bg-dragging: var(--splitter-grip-bg-hover);
 
   @apply relative z-10 flex shrink-0 grow-0 items-center justify-center self-stretch;
   @apply bg-transparent outline-none select-none no-highlight;
@@ -71,8 +79,14 @@
   /* The gesture is ours; the browser must not also pan or scroll from a drag on this. */
   @apply touch-none;
 
+  /* On the host, not in `::after` where the transition lives: the variant reaches a pseudo-element
+   * from its originating element, and appending its condition after `::after` matches nothing. */
+  @apply motion-reduce:transition-none;
+
   &::after {
-    @apply pointer-events-none absolute rounded-sm bg-separator content-[''];
+    @apply pointer-events-none absolute rounded-sm content-[''];
+
+    background-color: var(--splitter-line);
 
     /* Flattened to `Canvas` the divider stops existing rather than weakening — the whole part
      * *is* its background, which is why `separator.css` restates its colour the same way. */
@@ -80,58 +94,54 @@
       background-color: CanvasText;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition:
       background-color 150ms var(--ease-out),
       inline-size 150ms var(--ease-out),
       block-size 150ms var(--ease-out);
-    @apply motion-reduce:transition-none;
   }
 
+  /* Delayed on the way in and immediate on the way out: the delay lives here rather than in the
+   * base rule, so leaving drops the highlight at once and a pointer that only passes through never
+   * starts the transition at all. It covers the thickening too — both are the same flare. */
   &:hover::after,
-  &[data-hovered="true"]::after,
-  &[data-dragging="true"]::after {
-    @apply bg-accent;
-
-    /* `bg-separator` and `bg-accent` both flatten to `Canvas`, so without this the resting and
-     * active states are byte-identical under the mode and grabbing the handle shows nothing. */
-    @media (forced-colors: active) {
-      background-color: Highlight;
-    }
+  &[data-hovered="true"]::after {
+    background-color: var(--splitter-line-hover);
+    transition-delay: var(--splitter-highlight-delay);
   }
 
   /* The grip answers to the same states as the line, and is reached as a direct child so a nested
    * group's own grip is left alone. */
-  &:hover > .splitter__handle-grip,
-  &[data-hovered="true"] > .splitter__handle-grip,
-  &[data-dragging="true"] > .splitter__handle-grip {
-    @apply bg-accent;
-
-    @media (forced-colors: active) {
-      background-color: Highlight;
-    }
-  }
-
-  /* Delayed on the way in and immediate on the way out: the delay lives here rather than in the
-   * base rule, so leaving drops the highlight at once and a pointer that only passes through never
-   * starts the transition at all. It covers the thickening too — both are the same flare. */
-  &:hover::after,
-  &[data-hovered="true"]::after,
-  &:hover > .splitter__handle-grip,
-  &[data-hovered="true"] > .splitter__handle-grip {
+  &:hover > .rp-splitter__handle-grip,
+  &[data-hovered="true"] > .rp-splitter__handle-grip {
+    background-color: var(--splitter-grip-bg-hover);
     transition-delay: var(--splitter-highlight-delay);
   }
 
   /* Once a drag is under way the intent is not in question, so it skips the wait. Last, because a
    * drag usually starts from a hover and has to win. */
-  &[data-dragging="true"]::after,
-  &[data-dragging="true"] > .splitter__handle-grip {
+  &[data-dragging="true"]::after {
+    background-color: var(--splitter-line-dragging);
     transition-delay: 0ms;
   }
 
+  &[data-dragging="true"] > .rp-splitter__handle-grip {
+    background-color: var(--splitter-grip-bg-dragging);
+    transition-delay: 0ms;
+  }
+
+  /* Every lit colour flattens to the same `Canvas` as the resting one, so without this grabbing
+   * the handle shows nothing. One block for both parts, after the colours it overrides. */
+  @media (forced-colors: active) {
+    &:hover::after,
+    &[data-hovered="true"]::after,
+    &[data-dragging="true"]::after,
+    &:hover > .rp-splitter__handle-grip,
+    &[data-hovered="true"] > .rp-splitter__handle-grip,
+    &[data-dragging="true"] > .rp-splitter__handle-grip {
+      background-color: Highlight;
+    }
+  }
+
   &:focus-visible,
   &[data-focus-visible="true"] {
     @apply status-focused;
@@ -143,7 +153,7 @@
     /* `status-disabled` reaches `color` and `border-color`, and neither the line nor the grip is
      * either of those. */
     &::after,
-    & > .splitter__handle-grip {
+    & > .rp-splitter__handle-grip {
       @media (forced-colors: active) {
         background-color: GrayText;
       }
@@ -156,7 +166,7 @@
  * border: forced colors turns a transparent *border-color* opaque — the trap `slider.css` documents
  * at both ends of its track — and a bordered target would render as two solid blocks flanking every
  * divider. `inset` has no such behaviour, so this needs no forced-colors rule of its own. */
-.splitter__handle-target {
+.rp-splitter__handle-target {
   @apply absolute inset-0 bg-transparent;
 }
 
@@ -167,8 +177,10 @@
  *
  * Sized from custom properties rather than utilities so a theme can retune the pill without
  * restating both axes in both orientations. */
-.splitter__handle-grip {
-  @apply pointer-events-none absolute rounded-full bg-separator;
+.rp-splitter__handle-grip {
+  @apply pointer-events-none absolute rounded-full;
+
+  background-color: var(--splitter-grip-bg);
 
   /* The whole part *is* its background, so the mode flattening it onto the page removes the grip
    * rather than weakening it — the same reason the line restates its colour. */
@@ -176,26 +188,22 @@
     background-color: CanvasText;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: background-color 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 }
 
-.splitter__handle-grip--horizontal {
+.rp-splitter__handle-grip--horizontal {
   inline-size: var(--splitter-grip-thickness);
   block-size: var(--splitter-grip-length);
 }
 
-.splitter__handle-grip--vertical {
+.rp-splitter__handle-grip--vertical {
   inline-size: var(--splitter-grip-length);
   block-size: var(--splitter-grip-thickness);
 }
 
 /* A horizontal group puts its panels side by side, so the divider is a vertical line. */
-.splitter__handle--horizontal {
+.rp-splitter__handle--horizontal {
   @apply cursor-col-resize;
 
   inline-size: var(--splitter-gutter);
@@ -212,13 +220,13 @@
     inline-size: calc(var(--splitter-gutter) * 2);
   }
 
-  & > .splitter__handle-target {
+  & > .rp-splitter__handle-target {
     inset-inline: calc((var(--splitter-target) - var(--splitter-gutter)) / -2);
   }
 }
 
 /* A vertical group stacks its panels, so the divider is a horizontal line. */
-.splitter__handle--vertical {
+.rp-splitter__handle--vertical {
   @apply cursor-row-resize;
 
   block-size: var(--splitter-gutter);
@@ -235,7 +243,7 @@
     block-size: calc(var(--splitter-gutter) * 2);
   }
 
-  & > .splitter__handle-target {
+  & > .rp-splitter__handle-target {
     inset-block: calc((var(--splitter-target) - var(--splitter-gutter)) / -2);
   }
 }

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

@@ -1,25 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const surfaceVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "surface--default";
-        secondary: "surface--secondary";
-        tertiary: "surface--tertiary";
-        transparent: "surface--transparent";
-    };
-}, undefined, "surface", {
-    variant: {
-        default: "surface--default";
-        secondary: "surface--secondary";
-        tertiary: "surface--tertiary";
-        transparent: "surface--transparent";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "surface--default";
-        secondary: "surface--secondary";
-        tertiary: "surface--tertiary";
-        transparent: "surface--transparent";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const surfaceVariants: (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) => string;
 export type SurfaceVariants = VariantProps<typeof surfaceVariants>;
 //# sourceMappingURL=surface.styles.d.ts.map

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

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

package/dist/components/surface/surface.styles.js

@@ -1,13 +1,13 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/surface/surface.styles.ts
 const surfaceVariants = tv({
-	base: "surface",
+	base: "rp-surface",
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
-		default: "surface--default",
-		secondary: "surface--secondary",
-		tertiary: "surface--tertiary",
-		transparent: "surface--transparent"
+		default: "rp-surface--default",
+		secondary: "rp-surface--secondary",
+		tertiary: "rp-surface--tertiary",
+		transparent: "rp-surface--transparent"
 	} }
 });
 //#endregion

package/dist/components/surface.css

@@ -1,16 +1,16 @@
 /* Surface component styles */
 
 /* Block */
-.surface {
+.rp-surface {
   @apply relative text-foreground;
 }
 
 /* Modifier - variant */
-.surface--transparent {
+.rp-surface--transparent {
   @apply bg-transparent;
 }
 
-.surface--default {
+.rp-surface--default {
   @apply bg-surface text-surface-foreground;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
@@ -22,7 +22,7 @@
   }
 }
 
-.surface--secondary {
+.rp-surface--secondary {
   @apply bg-surface-secondary text-surface-secondary-foreground;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
@@ -34,7 +34,7 @@
   }
 }
 
-.surface--tertiary {
+.rp-surface--tertiary {
   @apply bg-surface-tertiary text-surface-tertiary-foreground;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container

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

@@ -1,58 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const switchVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    icon: string;
-    thumb: string;
-}, undefined, {
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    icon: string;
-    thumb: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    icon: string;
-    thumb: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const switchVariants: (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;
+} & {
+    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;
+    } & {
+        size?: "lg" | "md" | "sm" | 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;
+    } & {
+        size?: "lg" | "md" | "sm" | 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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    icon: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    thumb: (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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+};
 export type SwitchVariants = VariantProps<typeof switchVariants>;
 //# sourceMappingURL=switch.styles.d.ts.map

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

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

package/dist/components/switch/switch.styles.js

@@ -1,18 +1,18 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/switch/switch.styles.ts
 const switchVariants = tv({
 	defaultVariants: { size: "md" },
 	slots: {
-		base: "switch",
-		content: "switch__content",
-		control: "switch__control",
-		icon: "switch__icon",
-		thumb: "switch__thumb"
+		base: "rp-switch",
+		content: "rp-switch__content",
+		control: "rp-switch__control",
+		icon: "rp-switch__icon",
+		thumb: "rp-switch__thumb"
 	},
 	variants: { size: {
-		lg: { base: "switch--lg" },
-		md: { base: "switch--md" },
-		sm: { base: "switch--sm" }
+		lg: { base: "rp-switch--lg" },
+		md: { base: "rp-switch--md" },
+		sm: { base: "rp-switch--sm" }
 	} }
 });
 //#endregion

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

@@ -1,40 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const switchGroupVariants: import("tailwind-variants").TVReturnType<{
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    items: string;
-}, undefined, {
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    items: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    items: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const switchGroupVariants: (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;
+} & {
+    orientation?: "horizontal" | "vertical" | 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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+    items: (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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+};
 export type SwitchGroupVariants = VariantProps<typeof switchGroupVariants>;
 //# sourceMappingURL=switch-group.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/switch-group/switch-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAU1B,UAAU;YACR,IAAI;;QAEN,QAAQ;YACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"switch-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/switch-group/switch-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;CAkB9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

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

@@ -1,14 +1,14 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/switch-group/switch-group.styles.ts
 const switchGroupVariants = tv({
 	defaultVariants: { orientation: "vertical" },
 	slots: {
-		base: "switch-group",
-		items: "switch-group__items"
+		base: "rp-switch-group",
+		items: "rp-switch-group__items"
 	},
 	variants: { orientation: {
-		horizontal: { base: "switch-group--horizontal" },
-		vertical: { base: "switch-group--vertical" }
+		horizontal: { base: "rp-switch-group--horizontal" },
+		vertical: { base: "rp-switch-group--vertical" }
 	} }
 });
 //#endregion

package/dist/components/switch-group.css

@@ -1,17 +1,17 @@
 /* Switch Group styles */
-.switch-group {
+.rp-switch-group {
   @apply flex flex-col gap-6;
 }
 
-.switch-group__items {
+.rp-switch-group__items {
   @apply flex gap-4;
 }
 
 /* Orientation modifiers */
-.switch-group--horizontal .switch-group__items {
+.rp-switch-group--horizontal .rp-switch-group__items {
   @apply flex-row;
 }
 
-.switch-group--vertical .switch-group__items {
+.rp-switch-group--vertical .rp-switch-group__items {
   @apply flex-col;
 }