fix(ui): add orphan class names to the theme

Author: SutuSebastian

packages/ui/src/components/Avatar/Avatar.tsx

@@ -26,6 +26,7 @@ export interface AvatarTheme {
 
 export interface AvatarRootTheme {
   base: string;
+  inner: string;
   bordered: string;
   color: AvatarColors;
   img: AvatarImageTheme;
@@ -124,7 +125,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
 
   return (
     <div ref={ref} className={twMerge(theme.root.base, className)} data-testid="flowbite-avatar" {...restProps}>
-      <div className="relative">
+      <div className={theme.root.inner}>
         {img ? (
           typeof img === "string" ? (
             <img alt={alt} src={img} {...imgProps} />

packages/ui/src/components/Avatar/theme.ts

@@ -4,6 +4,7 @@ import type { AvatarTheme } from "./Avatar";
 export const avatarTheme = createTheme<AvatarTheme>({
   root: {
     base: "flex items-center justify-center space-x-4 rounded",
+    inner: "relative",
     bordered: "p-1 ring-2",
     rounded: "rounded-full",
     color: {

packages/ui/src/components/Drawer/DrawerHeader.tsx

@@ -18,6 +18,7 @@ export interface DrawerHeaderTheme {
     titleText: string;
     closeButton: string;
     closeIcon: string;
+    titleCloseIcon: string;
   };
   collapsed: FlowbiteBoolean;
 }
@@ -64,7 +65,7 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>((props
       </h5>
       <button onClick={onClose} data-testid="close-drawer" className={theme.inner.closeButton}>
         <CloseIcon aria-hidden className={theme.inner.closeIcon} />
-        <span className="sr-only">Close menu</span>
+        <span className={theme.inner.titleCloseIcon}>Close menu</span>
       </button>
       <span className={theme.collapsed[isOpen ? "on" : "off"]} id={`flowbite-drawer-header-${id}`}>
         {children}

packages/ui/src/components/Drawer/theme.ts

@@ -30,6 +30,7 @@ export const drawerTheme = createTheme<DrawerTheme>({
       closeButton:
         "absolute end-2.5 top-2.5 flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
       closeIcon: "h-4 w-4",
+      titleCloseIcon: "sr-only",
       titleIcon: "me-2.5 h-4 w-4",
       titleText: "mb-4 inline-flex items-center text-base font-semibold text-gray-500 dark:text-gray-400",
     },

packages/ui/src/components/Navbar/NavbarToggle.tsx

@@ -14,6 +14,7 @@ import { navbarTheme } from "./theme";
 export interface NavbarToggleThem {
   base: string;
   icon: string;
+  title: string;
 }
 
 export interface NavbarToggleProps extends ComponentProps<"button">, ThemingProps<NavbarToggleThem> {
@@ -50,7 +51,7 @@ export const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>((pr
       className={twMerge(theme.base, className)}
       {...restProps}
     >
-      <span className="sr-only">Open main menu</span>
+      <span className={theme.title}>Open main menu</span>
       <BarIcon aria-hidden className={theme.icon} />
     </button>
   );

packages/ui/src/components/Navbar/theme.ts

@@ -45,5 +45,6 @@ export const navbarTheme = createTheme<NavbarTheme>({
   toggle: {
     base: "inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
     icon: "h-6 w-6 shrink-0",
+    title: "sr-only",
   },
 });

packages/ui/src/components/Popover/Popover.tsx

@@ -15,9 +15,10 @@ import { getArrowPlacement } from "../Floating/helpers";
 import { popoverTheme } from "./theme";
 
 export interface PopoverTheme {
-  arrow: Omit<FloatingArrowTheme, "style">;
   base: string;
+  inner: string;
   content: string;
+  arrow: Omit<FloatingArrowTheme, "style">;
 }
 
 export interface PopoverProps extends Omit<ComponentProps<"div">, "content" | "style">, ThemingProps<PopoverTheme> {
@@ -108,7 +109,7 @@ export function Popover(props: PopoverProps) {
             style={floatingStyles}
             {...getFloatingProps()}
           >
-            <div className="relative">
+            <div className={theme.inner}>
               {arrow && (
                 <div
                   className={theme.arrow.base}

packages/ui/src/components/Popover/theme.ts

@@ -3,6 +3,7 @@ import type { PopoverTheme } from "./Popover";
 
 export const popoverTheme = createTheme<PopoverTheme>({
   base: "absolute z-20 inline-block w-max max-w-[100vw] rounded-lg border border-gray-200 bg-white shadow-sm outline-none dark:border-gray-600 dark:bg-gray-800",
+  inner: "relative",
   content: "z-10 overflow-hidden rounded-[7px]",
   arrow: {
     base: "absolute z-0 h-2 w-2 rotate-45 border border-gray-200 bg-white mix-blend-lighten dark:border-gray-600 dark:bg-gray-800 dark:mix-blend-color",

packages/ui/src/components/Sidebar/SidebarCollapse.tsx

@@ -23,6 +23,7 @@ export interface SidebarCollapseTheme {
   };
   label: {
     base: string;
+    title: string;
     icon: {
       base: string;
       open: FlowbiteBoolean;
@@ -98,7 +99,7 @@ export const SidebarCollapse = forwardRef<HTMLLIElement, SidebarCollapseProps>((
             />
           )}
           {isCollapsed ? (
-            <span className="sr-only">{label}</span>
+            <span className={theme.label.title}>{label}</span>
           ) : (
             <>
               <span data-testid="flowbite-sidebar-collapse-label" className={theme.label.base}>

packages/ui/src/components/Sidebar/theme.ts

@@ -22,6 +22,7 @@ export const sidebarTheme = createTheme<SidebarTheme>({
     },
     label: {
       base: "ml-3 flex-1 whitespace-nowrap text-left",
+      title: "sr-only",
       icon: {
         base: "h-6 w-6 transition delay-0 ease-in-out",
         open: {