@ropav/styles 0.6.0 → 0.7.0

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

@@ -1,226 +1,224 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
-    collapsible: {
-        icon: {
-            panel: string;
-        };
-        none: {
-            panel: string;
-        };
-        offcanvas: {
-            panel: string;
-        };
-    };
-    inDrawer: {
-        true: {
-            panel: string;
-        };
-    };
-    isCollapsible: {
-        true: {
-            subMenu: string;
-        };
-    };
-    isResizable: {
-        true: {
-            rail: string;
-        };
-    };
-    isSub: {
-        true: {
-            item: string;
-        };
-    };
-    side: {
-        left: {
-            base: string;
-            panel: string;
-        };
-        right: {
-            base: string;
-            panel: string;
-        };
-    };
-    variant: {
-        floating: {
-            panel: string;
-            rail: string;
-        };
-        inset: {
-            inset: string;
-            panel: string;
-            rail: string;
-        };
-        sidebar: {};
-    };
-}, {
-    base: string;
-    content: string;
-    footer: string;
-    group: string;
-    groupLabel: string;
-    header: string;
-    inset: string;
-    item: string;
-    itemIcon: string;
-    itemIndicator: string;
-    itemLabel: string;
-    itemTooltip: string;
-    itemTrailing: string;
-    panel: string;
-    rail: string;
-    railTarget: string;
-    separator: string;
-    subMenu: string;
-    trigger: string;
-}, undefined, {
-    collapsible: {
-        icon: {
-            panel: string;
-        };
-        none: {
-            panel: string;
-        };
-        offcanvas: {
-            panel: string;
-        };
-    };
-    inDrawer: {
-        true: {
-            panel: string;
-        };
-    };
-    isCollapsible: {
-        true: {
-            subMenu: string;
-        };
-    };
-    isResizable: {
-        true: {
-            rail: string;
-        };
-    };
-    isSub: {
-        true: {
-            item: string;
-        };
-    };
-    side: {
-        left: {
-            base: string;
-            panel: string;
-        };
-        right: {
-            base: string;
-            panel: string;
-        };
-    };
-    variant: {
-        floating: {
-            panel: string;
-            rail: string;
-        };
-        inset: {
-            inset: string;
-            panel: string;
-            rail: string;
-        };
-        sidebar: {};
-    };
-}, {
-    base: string;
-    content: string;
-    footer: string;
-    group: string;
-    groupLabel: string;
-    header: string;
-    inset: string;
-    item: string;
-    itemIcon: string;
-    itemIndicator: string;
-    itemLabel: string;
-    itemTooltip: string;
-    itemTrailing: string;
-    panel: string;
-    rail: string;
-    railTarget: string;
-    separator: string;
-    subMenu: string;
-    trigger: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    collapsible: {
-        icon: {
-            panel: string;
-        };
-        none: {
-            panel: string;
-        };
-        offcanvas: {
-            panel: string;
-        };
-    };
-    inDrawer: {
-        true: {
-            panel: string;
-        };
-    };
-    isCollapsible: {
-        true: {
-            subMenu: string;
-        };
-    };
-    isResizable: {
-        true: {
-            rail: string;
-        };
-    };
-    isSub: {
-        true: {
-            item: string;
-        };
-    };
-    side: {
-        left: {
-            base: string;
-            panel: string;
-        };
-        right: {
-            base: string;
-            panel: string;
-        };
-    };
-    variant: {
-        floating: {
-            panel: string;
-            rail: string;
-        };
-        inset: {
-            inset: string;
-            panel: string;
-            rail: string;
-        };
-        sidebar: {};
-    };
-}, {
-    base: string;
-    content: string;
-    footer: string;
-    group: string;
-    groupLabel: string;
-    header: string;
-    inset: string;
-    item: string;
-    itemIcon: string;
-    itemIndicator: string;
-    itemLabel: string;
-    itemTooltip: string;
-    itemTrailing: string;
-    panel: string;
-    rail: string;
-    railTarget: string;
-    separator: string;
-    subMenu: string;
-    trigger: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const sidebarVariants: (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;
+} & {
+    collapsible?: "icon" | "none" | "offcanvas" | undefined;
+    inDrawer?: boolean | undefined;
+    isCollapsible?: boolean | undefined;
+    isResizable?: boolean | undefined;
+    isSub?: boolean | undefined;
+    side?: "left" | "right" | undefined;
+    variant?: "floating" | "inset" | "sidebar" | 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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | 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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | 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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    group: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    groupLabel: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | 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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    inset: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    item: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    itemIcon: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    itemIndicator: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    itemLabel: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    itemTooltip: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    itemTrailing: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | 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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    rail: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    railTarget: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    separator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    subMenu: (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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+    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;
+    } & {
+        collapsible?: "icon" | "none" | "offcanvas" | undefined;
+        inDrawer?: boolean | undefined;
+        isCollapsible?: boolean | undefined;
+        isResizable?: boolean | undefined;
+        isSub?: boolean | undefined;
+        side?: "left" | "right" | undefined;
+        variant?: "floating" | "inset" | "sidebar" | undefined;
+    }) | undefined) => string;
+};
 export type SidebarVariants = VariantProps<typeof sidebarVariants>;
 //# sourceMappingURL=sidebar.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,eAAO,MAAM,eAAe;;QA6BtB,IAAI;YACF,KAAK;;QAEP,IAAI;YACF,KAAK;;QAEP,SAAS;YACP,KAAK;;;;QAMP,IAAI;YACF,KAAK;;;;QAMP,IAAI;YACF,OAAO;;;;QAMT,IAAI;YACF,IAAI;;;;QAMN,IAAI;YACF,IAAI;;;;QAIN,IAAI;YACF,IAAI;YACJ,KAAK;;QAEP,KAAK;YACH,IAAI;YACJ,KAAK;;;;QAcP,QAAQ;YACN,KAAK;YACL,IAAI;;QAEN,KAAK;YACH,KAAK;YACL,KAAK;YACL,IAAI;;QAEN,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGX,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAc7C,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/sidebar/sidebar.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/sidebar/sidebar.styles.ts
 const sidebarVariants = tv({
 	defaultVariants: {
@@ -7,55 +7,55 @@ const sidebarVariants = tv({
 		variant: "sidebar"
 	},
 	slots: {
-		base: "sidebar",
-		content: "sidebar__content",
-		footer: "sidebar__footer",
-		group: "sidebar__group",
-		groupLabel: "sidebar__group-label",
-		header: "sidebar__header",
-		inset: "sidebar__inset",
-		item: "sidebar__item",
-		itemIcon: "sidebar__item-icon",
-		itemIndicator: "sidebar__item-indicator",
-		itemLabel: "sidebar__item-label",
-		itemTooltip: "sidebar__item-tooltip",
-		itemTrailing: "sidebar__item-trailing",
-		panel: "sidebar__panel",
-		rail: "sidebar__rail",
-		railTarget: "sidebar__rail-target",
-		separator: "sidebar__separator",
-		subMenu: "sidebar__sub-menu",
-		trigger: "sidebar__trigger"
+		base: "rp-sidebar",
+		content: "rp-sidebar__content",
+		footer: "rp-sidebar__footer",
+		group: "rp-sidebar__group",
+		groupLabel: "rp-sidebar__group-label",
+		header: "rp-sidebar__header",
+		inset: "rp-sidebar__inset",
+		item: "rp-sidebar__item",
+		itemIcon: "rp-sidebar__item-icon",
+		itemIndicator: "rp-sidebar__item-indicator",
+		itemLabel: "rp-sidebar__item-label",
+		itemTooltip: "rp-sidebar__item-tooltip",
+		itemTrailing: "rp-sidebar__item-trailing",
+		panel: "rp-sidebar__panel",
+		rail: "rp-sidebar__rail",
+		railTarget: "rp-sidebar__rail-target",
+		separator: "rp-sidebar__separator",
+		subMenu: "rp-sidebar__sub-menu",
+		trigger: "rp-sidebar__trigger"
 	},
 	variants: {
 		collapsible: {
-			icon: { panel: "sidebar__panel--icon" },
-			none: { panel: "sidebar__panel--none" },
-			offcanvas: { panel: "sidebar__panel--offcanvas" }
+			icon: { panel: "rp-sidebar__panel--icon" },
+			none: { panel: "rp-sidebar__panel--none" },
+			offcanvas: { panel: "rp-sidebar__panel--offcanvas" }
 		},
-		inDrawer: { true: { panel: "sidebar__panel--drawer" } },
-		isCollapsible: { true: { subMenu: "sidebar__sub-menu--collapsible" } },
-		isResizable: { true: { rail: "sidebar__rail--resizable" } },
-		isSub: { true: { item: "sidebar__item--sub" } },
+		inDrawer: { true: { panel: "rp-sidebar__panel--drawer" } },
+		isCollapsible: { true: { subMenu: "rp-sidebar__sub-menu--collapsible" } },
+		isResizable: { true: { rail: "rp-sidebar__rail--resizable" } },
+		isSub: { true: { item: "rp-sidebar__item--sub" } },
 		side: {
 			left: {
-				base: "sidebar--left",
-				panel: "sidebar__panel--left"
+				base: "rp-sidebar--left",
+				panel: "rp-sidebar__panel--left"
 			},
 			right: {
-				base: "sidebar--right",
-				panel: "sidebar__panel--right"
+				base: "rp-sidebar--right",
+				panel: "rp-sidebar__panel--right"
 			}
 		},
 		variant: {
 			floating: {
-				panel: "sidebar__panel--floating",
-				rail: "sidebar__rail--quiet"
+				panel: "rp-sidebar__panel--floating",
+				rail: "rp-sidebar__rail--quiet"
 			},
 			inset: {
-				inset: "sidebar__inset--card",
-				panel: "sidebar__panel--bare",
-				rail: "sidebar__rail--quiet"
+				inset: "rp-sidebar__inset--card",
+				panel: "rp-sidebar__panel--bare",
+				rail: "rp-sidebar__rail--quiet"
 			},
 			sidebar: {}
 		}