@ropav/styles 0.5.0 → 0.7.0

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

@@ -1,58 +1,25 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const sliderVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            fill?: import("tailwind-variants").ClassValue;
-            marks?: import("tailwind-variants").ClassValue;
-            output?: import("tailwind-variants").ClassValue;
-            thumb?: import("tailwind-variants").ClassValue;
-            track?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            fill?: import("tailwind-variants").ClassValue;
-            marks?: import("tailwind-variants").ClassValue;
-            output?: import("tailwind-variants").ClassValue;
-            thumb?: import("tailwind-variants").ClassValue;
-            track?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    fill: string;
-    marks: string;
-    output: string;
-    thumb: string;
-    track: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            fill?: import("tailwind-variants").ClassValue;
-            marks?: import("tailwind-variants").ClassValue;
-            output?: import("tailwind-variants").ClassValue;
-            thumb?: import("tailwind-variants").ClassValue;
-            track?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    fill: string;
-    marks: string;
-    output: string;
-    thumb: string;
-    track: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    fill: string;
-    marks: string;
-    output: string;
-    thumb: string;
-    track: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const sliderVariants: (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;
+    fill: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    marks: (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;
+    output: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | 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;
+    } & object) | undefined) => string;
+    track: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+};
 export type SliderVariants = VariantProps<typeof sliderVariants>;
 //# sourceMappingURL=slider.styles.d.ts.map

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

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

package/dist/components/slider/slider.styles.js

@@ -1,12 +1,12 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/slider/slider.styles.ts
 const sliderVariants = tv({ slots: {
-	base: "slider",
-	fill: "slider__fill",
-	marks: "slider__marks",
-	output: "slider__output",
-	thumb: "slider__thumb",
-	track: "slider__track"
+	base: "rp-slider",
+	fill: "rp-slider__fill",
+	marks: "rp-slider__marks",
+	output: "rp-slider__output",
+	thumb: "rp-slider__thumb",
+	track: "rp-slider__track"
 } });
 //#endregion
 export { sliderVariants };

package/dist/components/slider.css

@@ -1,6 +1,6 @@
 /* Slider styles */
 
-.slider {
+.rp-slider {
   @apply grid w-full gap-1;
 
   grid-template-areas:
@@ -14,14 +14,16 @@
     grid-area: label;
   }
 
-  .slider__output {
+  .rp-slider__output {
     @apply text-sm font-medium tabular-nums;
 
     grid-area: output;
   }
 
-  .slider__track {
-    @apply relative rounded-xl bg-default;
+  .rp-slider__track {
+    @apply relative bg-default;
+
+    border-radius: min(32px, var(--component-radius));
 
     grid-area: track;
 
@@ -35,7 +37,7 @@
     }
   }
 
-  .slider__fill {
+  .rp-slider__fill {
     @apply pointer-events-none absolute bg-accent;
 
     /* The only thing showing how far along the value is */
@@ -44,9 +46,11 @@
     }
   }
 
-  .slider__thumb {
+  .rp-slider__thumb {
     /* Flex container for centering pseudo-elements */
-    @apply absolute flex cursor-grab items-center justify-center rounded-xl bg-accent no-highlight;
+    @apply absolute flex cursor-grab items-center justify-center bg-accent no-highlight;
+
+    border-radius: min(32px, var(--component-radius));
 
     /* The wrapper is the fill colour in ordinary use, which hides it against the fill. Flattened
      * to `Canvas` it would punch a hole through the fill instead, so it steps back and lets
@@ -55,10 +59,6 @@
       background-color: transparent;
     }
 
-    /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
     transition:
       background-color 250ms var(--ease-smooth),
       transform 250ms var(--ease-out),
@@ -67,9 +67,11 @@
 
     /* after: Visible thumb element */
     &::after {
-      @apply relative z-10 rounded-lg bg-accent-foreground text-black shadow-field;
+      @apply relative z-10 bg-accent-foreground text-black shadow-field;
       content: "";
 
+      border-radius: min(32px, var(--component-radius));
+
       /* Both the knob's fill and the shadow that separates it from the track are gone under
        * forced colors. `Canvas` inside a `CanvasText` ring reads against the bare track on one
        * side and the `Highlight` fill on the other, which no single flat colour manages. */
@@ -79,10 +81,7 @@
         outline-offset: -2px;
       }
 
-      /**
-       * Transitions
-       */
-      @apply origin-center transition-all motion-reduce:transition-none;
+      @apply origin-center transition-all;
     }
 
     /* Dragging state - cursor changes and thumb scales down */
@@ -120,7 +119,7 @@
   &[data-orientation="horizontal"] {
     flex-direction: column;
 
-    .slider__track {
+    .rp-slider__track {
       @apply h-5 w-full;
       /* Add transparent borders to provide space for thumb at edges */
       /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
@@ -152,12 +151,12 @@
       }
     }
 
-    .slider__fill,
-    .slider__thumb {
+    .rp-slider__fill,
+    .rp-slider__thumb {
       @apply h-full;
     }
 
-    .slider__thumb {
+    .rp-slider__thumb {
       @apply top-1/2;
 
       /* Thumb width + border width */
@@ -182,7 +181,7 @@
     grid-template-rows: auto 1fr auto;
     grid-template-columns: 1fr;
 
-    .slider__output {
+    .rp-slider__output {
       text-align: center;
     }
 
@@ -190,7 +189,7 @@
       text-align: center;
     }
 
-    .slider__track {
+    .rp-slider__track {
       @apply h-full w-5;
       /* Add transparent borders to provide space for thumb at edges */
       /* Thumb height is 1.5rem (24px), so half is 0.75rem (12px) */
@@ -220,12 +219,12 @@
       }
     }
 
-    .slider__fill,
-    .slider__thumb {
+    .rp-slider__fill,
+    .rp-slider__thumb {
       @apply w-full;
     }
 
-    .slider__thumb {
+    .rp-slider__thumb {
       /* Cross-axis centering; React Aria applies a physical translateX(-50%), so keep left-1/2 for RTL correctness */
       @apply left-1/2;
 

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

@@ -1,46 +1,9 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        accent: "spinner--accent";
-        current: "spinner--current";
-        danger: "spinner--danger";
-        success: "spinner--success";
-        warning: "spinner--warning";
-    };
-    size: {
-        lg: "spinner--lg";
-        md: "spinner--md";
-        sm: "spinner--sm";
-        xl: "spinner--xl";
-    };
-}, undefined, "spinner", {
-    color: {
-        accent: "spinner--accent";
-        current: "spinner--current";
-        danger: "spinner--danger";
-        success: "spinner--success";
-        warning: "spinner--warning";
-    };
-    size: {
-        lg: "spinner--lg";
-        md: "spinner--md";
-        sm: "spinner--sm";
-        xl: "spinner--xl";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    color: {
-        accent: "spinner--accent";
-        current: "spinner--current";
-        danger: "spinner--danger";
-        success: "spinner--success";
-        warning: "spinner--warning";
-    };
-    size: {
-        lg: "spinner--lg";
-        md: "spinner--md";
-        sm: "spinner--sm";
-        xl: "spinner--xl";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const spinnerVariants: (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" | "current" | "danger" | "success" | "warning" | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | undefined;
+}) | undefined) => string;
 export type SpinnerVariants = VariantProps<typeof spinnerVariants>;
 //# sourceMappingURL=spinner.styles.d.ts.map

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

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

package/dist/components/spinner/spinner.styles.js

@@ -1,24 +1,24 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/spinner/spinner.styles.ts
 const spinnerVariants = tv({
-	base: "spinner",
+	base: "rp-spinner",
 	defaultVariants: {
 		color: "accent",
 		size: "md"
 	},
 	variants: {
 		color: {
-			accent: "spinner--accent",
-			current: "spinner--current",
-			danger: "spinner--danger",
-			success: "spinner--success",
-			warning: "spinner--warning"
+			accent: "rp-spinner--accent",
+			current: "rp-spinner--current",
+			danger: "rp-spinner--danger",
+			success: "rp-spinner--success",
+			warning: "rp-spinner--warning"
 		},
 		size: {
-			lg: "spinner--lg",
-			md: "spinner--md",
-			sm: "spinner--sm",
-			xl: "spinner--xl"
+			lg: "rp-spinner--lg",
+			md: "rp-spinner--md",
+			sm: "rp-spinner--sm",
+			xl: "rp-spinner--xl"
 		}
 	}
 });

package/dist/components/spinner.css

@@ -1,42 +1,42 @@
 /* Base spinner styles */
-.spinner {
+.rp-spinner {
   @apply pointer-events-none inline-flex size-6 shrink-0 animate-spin-fast motion-reduce:animate-none;
 }
 
 /* Size variants */
-.spinner--sm {
+.rp-spinner--sm {
   @apply size-4;
 }
 
-.spinner--md {
+.rp-spinner--md {
   /* No styles as this is the default size */
 }
 
-.spinner--lg {
+.rp-spinner--lg {
   @apply size-8;
 }
 
-.spinner--xl {
+.rp-spinner--xl {
   @apply size-10;
 }
 
 /* Color variants */
-.spinner--current {
+.rp-spinner--current {
   color: inherit;
 }
 
-.spinner--accent {
+.rp-spinner--accent {
   color: var(--accent);
 }
 
-.spinner--danger {
+.rp-spinner--danger {
   color: var(--danger);
 }
 
-.spinner--success {
+.rp-spinner--success {
   color: var(--success);
 }
 
-.spinner--warning {
+.rp-spinner--warning {
   color: var(--warning);
 }

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

@@ -1,61 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const splitterVariants: import("tailwind-variants").TVReturnType<{
-    orientation: {
-        horizontal: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-        vertical: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-    handleGrip: string;
-    handleTarget: string;
-    panel: string;
-}, undefined, {
-    orientation: {
-        horizontal: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-        vertical: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-    handleGrip: string;
-    handleTarget: string;
-    panel: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    orientation: {
-        horizontal: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-        vertical: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-    handleGrip: string;
-    handleTarget: string;
-    panel: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const splitterVariants: (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;
+    handle: (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;
+    handleGrip: (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;
+    handleTarget: (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;
+    panel: (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 SplitterVariants = VariantProps<typeof splitterVariants>;
 //# sourceMappingURL=splitter.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"splitter.styles.d.ts","sourceRoot":"","sources":["../../../src/components/splitter/splitter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAgBtD,eAAO,MAAM,gBAAgB;;QAavB,UAAU;YACR,IAAI;YACJ,MAAM;YACN,UAAU;;QAEZ,QAAQ;YACN,IAAI;YACJ,MAAM;YACN,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIhB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"splitter.styles.d.ts","sourceRoot":"","sources":["../../../src/components/splitter/splitter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAgB7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/splitter/splitter.styles.js

@@ -1,24 +1,24 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/splitter/splitter.styles.ts
 const splitterVariants = tv({
 	defaultVariants: { orientation: "horizontal" },
 	slots: {
-		base: "splitter",
-		handle: "splitter__handle",
-		handleGrip: "splitter__handle-grip",
-		handleTarget: "splitter__handle-target",
-		panel: "splitter__panel"
+		base: "rp-splitter",
+		handle: "rp-splitter__handle",
+		handleGrip: "rp-splitter__handle-grip",
+		handleTarget: "rp-splitter__handle-target",
+		panel: "rp-splitter__panel"
 	},
 	variants: { orientation: {
 		horizontal: {
-			base: "splitter--horizontal",
-			handle: "splitter__handle--horizontal",
-			handleGrip: "splitter__handle-grip--horizontal"
+			base: "rp-splitter--horizontal",
+			handle: "rp-splitter__handle--horizontal",
+			handleGrip: "rp-splitter__handle-grip--horizontal"
 		},
 		vertical: {
-			base: "splitter--vertical",
-			handle: "splitter__handle--vertical",
-			handleGrip: "splitter__handle-grip--vertical"
+			base: "rp-splitter--vertical",
+			handle: "rp-splitter__handle--vertical",
+			handleGrip: "rp-splitter__handle-grip--vertical"
 		}
 	} }
 });