@dyrected/admin 2.0.0 → 2.4.0

package/src/components/ui/sidebar.tsx

@@ -147,7 +147,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              "dy-group/sidebar-wrapper dy-flex dy-min-h-svh dy-w-full has-[[data-variant=inset]]:dy-bg-sidebar",
               className
             )}
             ref={ref}
@@ -187,7 +187,7 @@ const Sidebar = React.forwardRef<
       return (
         <div
           className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            "dy-flex dy-h-full dy-w-[--sidebar-width] dy-flex-col dy-bg-sidebar dy-text-sidebar-foreground",
             className
           )}
           ref={ref}
@@ -204,7 +204,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="dy-w-[--sidebar-width] dy-bg-sidebar dy-p-0 dy-text-sidebar-foreground [&>button]:dy-hidden"
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -212,11 +212,11 @@ const Sidebar = React.forwardRef<
             }
             side={side}
           >
-            <SheetHeader className="sr-only">
+            <SheetHeader className="dy-sr-only">
               <SheetTitle>Sidebar</SheetTitle>
               <SheetDescription>Displays the mobile sidebar.</SheetDescription>
             </SheetHeader>
-            <div className="flex h-full w-full flex-col">{children}</div>
+            <div className="dy-flex dy-h-full dy-w-full dy-flex-col">{children}</div>
           </SheetContent>
         </Sheet>
       )
@@ -225,7 +225,7 @@ const Sidebar = React.forwardRef<
     return (
       <div
         ref={ref}
-        className="group peer hidden text-sidebar-foreground md:block"
+        className="dy-group dy-peer dy-hidden dy-text-sidebar-foreground md:dy-block"
         data-state={state}
         data-collapsible={state === "collapsed" ? collapsible : ""}
         data-variant={variant}
@@ -234,9 +234,9 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
+            "dy-relative dy-w-[--sidebar-width] dy-bg-transparent dy-transition-[width] dy-duration-200 dy-ease-linear",
+            "dy-group-data-[collapsible=offcanvas]:dy-w-0",
+            "dy-group-data-[side=right]:dy-rotate-180",
             variant === "floating" || variant === "inset"
               ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
@@ -244,7 +244,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            "dy-fixed dy-inset-y-0 dy-z-10 dy-hidden dy-h-svh dy-w-[--sidebar-width] dy-transition-[left,right,width] dy-duration-200 dy-ease-linear md:dy-flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -258,7 +258,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="dy-flex dy-h-full dy-w-full dy-flex-col dy-bg-sidebar dy-group-data-[variant=floating]:dy-rounded-lg dy-group-data-[variant=floating]:dy-border dy-group-data-[variant=floating]:dy-border-sidebar-border dy-group-data-[variant=floating]:dy-shadow"
           >
             {children}
           </div>
@@ -281,7 +281,7 @@ const SidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="ghost"
       size="icon"
-      className={cn("h-7 w-7", className)}
+      className={cn("dy-h-7 dy-w-7", className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()
@@ -289,7 +289,7 @@ const SidebarTrigger = React.forwardRef<
       {...props}
     >
       <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
+      <span className="dy-sr-only">Toggle Sidebar</span>
     </Button>
   )
 })
@@ -310,12 +310,12 @@ const SidebarRail = React.forwardRef<
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        "dy-absolute dy-inset-y-0 dy-z-20 dy-hidden dy-w-4 dy--translate-x-1/2 dy-transition-all dy-ease-linear after:dy-absolute after:dy-inset-y-0 after:dy-left-1/2 after:dy-w-[2px] hover:after:dy-bg-sidebar-border dy-group-data-[side=left]:dy--right-4 dy-group-data-[side=right]:dy-left-0 sm:dy-flex",
+        "[[data-side=left]_&]:dy-cursor-w-resize [[data-side=right]_&]:dy-cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:dy-cursor-e-resize [[data-side=right][data-state=collapsed]_&]:dy-cursor-w-resize",
+        "dy-group-data-[collapsible=offcanvas]:dy-translate-x-0 dy-group-data-[collapsible=offcanvas]:after:dy-left-full dy-group-data-[collapsible=offcanvas]:hover:dy-bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:dy--right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:dy--left-2",
         className
       )}
       {...props}
@@ -332,8 +332,8 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "dy-relative dy-flex dy-w-full dy-flex-1 dy-flex-col dy-bg-background",
+        "md:dy-peer-data-[variant=inset]:dy-m-2 md:dy-peer-data-[state=collapsed]:dy-peer-data-[variant=inset]:dy-ml-2 md:dy-peer-data-[variant=inset]:dy-ml-0 md:dy-peer-data-[variant=inset]:dy-rounded-xl md:dy-peer-data-[variant=inset]:dy-shadow",
         className
       )}
       {...props}
@@ -351,7 +351,7 @@ const SidebarInput = React.forwardRef<
       ref={ref}
       data-sidebar="input"
       className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        "dy-h-8 dy-w-full dy-bg-background dy-shadow-none focus-visible:dy-ring-2 focus-visible:dy-ring-sidebar-ring",
         className
       )}
       {...props}
@@ -368,7 +368,7 @@ const SidebarHeader = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn("dy-flex dy-flex-col dy-gap-2 dy-p-2", className)}
       {...props}
     />
   )
@@ -383,7 +383,7 @@ const SidebarFooter = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn("dy-flex dy-flex-col dy-gap-2 dy-p-2", className)}
       {...props}
     />
   )
@@ -398,7 +398,7 @@ const SidebarSeparator = React.forwardRef<
     <Separator
       ref={ref}
       data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      className={cn("dy-mx-2 dy-w-auto dy-bg-sidebar-border", className)}
       {...props}
     />
   )
@@ -414,7 +414,7 @@ const SidebarContent = React.forwardRef<
       ref={ref}
       data-sidebar="content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "dy-flex dy-min-h-0 dy-flex-1 dy-flex-col dy-gap-2 dy-overflow-auto dy-group-data-[collapsible=icon]:dy-overflow-hidden",
         className
       )}
       {...props}
@@ -431,7 +431,7 @@ const SidebarGroup = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn("dy-relative dy-flex dy-w-full dy-min-w-0 dy-flex-col dy-p-2", className)}
       {...props}
     />
   )
@@ -449,8 +449,8 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        "dy-flex dy-h-8 dy-shrink-0 dy-items-center dy-rounded-md dy-px-2 dy-text-xs dy-font-medium dy-text-sidebar-foreground/70 dy-outline-none dy-ring-sidebar-ring dy-transition-[margin,opacity] dy-duration-200 dy-ease-linear focus-visible:dy-ring-2 [&>svg]:dy-size-4 [&>svg]:dy-shrink-0",
+        "dy-group-data-[collapsible=icon]:dy--mt-8 dy-group-data-[collapsible=icon]:dy-opacity-0",
         className
       )}
       {...props}
@@ -470,10 +470,10 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "dy-absolute dy-right-3 dy-top-3.5 dy-flex dy-aspect-square dy-w-5 dy-items-center dy-justify-center dy-rounded-md dy-p-0 dy-text-sidebar-foreground dy-outline-none dy-ring-sidebar-ring dy-transition-transform hover:dy-bg-sidebar-accent hover:dy-text-sidebar-accent-foreground focus-visible:dy-ring-2 [&>svg]:dy-size-4 [&>svg]:dy-shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
+        "after:dy-absolute after:dy--inset-2 after:md:dy-hidden",
+        "dy-group-data-[collapsible=icon]:dy-hidden",
         className
       )}
       {...props}
@@ -489,7 +489,7 @@ const SidebarGroupContent = React.forwardRef<
   <div
     ref={ref}
     data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
+    className={cn("dy-w-full dy-text-sm", className)}
     {...props}
   />
 ))
@@ -502,7 +502,7 @@ const SidebarMenu = React.forwardRef<
   <ul
     ref={ref}
     data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    className={cn("dy-flex dy-w-full dy-min-w-0 dy-flex-col dy-gap-1", className)}
     {...props}
   />
 ))
@@ -515,18 +515,18 @@ const SidebarMenuItem = React.forwardRef<
   <li
     ref={ref}
     data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
+    className={cn("dy-group/menu-item dy-relative", className)}
     {...props}
   />
 ))
 SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "dy-peer/menu-button dy-flex dy-w-full dy-items-center dy-gap-2 dy-overflow-hidden dy-rounded-md dy-p-2 dy-text-left dy-text-sm dy-outline-none dy-ring-sidebar-ring dy-transition-[width,height,padding] hover:dy-bg-sidebar-accent hover:dy-text-sidebar-accent-foreground focus-visible:dy-ring-2 active:dy-bg-sidebar-accent active:dy-text-sidebar-accent-foreground disabled:dy-pointer-events-none disabled:dy-opacity-50 dy-group-has-[[data-sidebar=menu-action]]/menu-item:dy-pr-8 aria-disabled:dy-pointer-events-none aria-disabled:dy-opacity-50 data-[active=true]:dy-bg-sidebar-accent data-[active=true]:dy-font-medium data-[active=true]:dy-text-sidebar-accent-foreground data-[state=open]:hover:dy-bg-sidebar-accent data-[state=open]:hover:dy-text-sidebar-accent-foreground dy-group-data-[collapsible=icon]:dy-!size-8 dy-group-data-[collapsible=icon]:dy-!p-2 [&>span:last-child]:dy-truncate [&>svg]:dy-size-4 [&>svg]:dy-shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: "hover:dy-bg-sidebar-accent hover:dy-text-sidebar-accent-foreground",
         outline:
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
@@ -616,15 +616,15 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "dy-absolute dy-right-1 dy-top-1.5 dy-flex dy-aspect-square dy-w-5 dy-items-center dy-justify-center dy-rounded-md dy-p-0 dy-text-sidebar-foreground dy-outline-none dy-ring-sidebar-ring dy-transition-transform hover:dy-bg-sidebar-accent hover:dy-text-sidebar-accent-foreground focus-visible:dy-ring-2 dy-peer-hover/menu-button:dy-text-sidebar-accent-foreground [&>svg]:dy-size-4 [&>svg]:dy-shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
+        "after:dy-absolute after:dy--inset-2 after:md:dy-hidden",
+        "dy-peer-data-[size=sm]/menu-button:dy-top-1",
+        "dy-peer-data-[size=default]/menu-button:dy-top-1.5",
+        "dy-peer-data-[size=lg]/menu-button:dy-top-2.5",
+        "dy-group-data-[collapsible=icon]:dy-hidden",
         showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+          "dy-group-focus-within/menu-item:dy-opacity-100 dy-group-hover/menu-item:dy-opacity-100 data-[state=open]:dy-opacity-100 dy-peer-data-[active=true]/menu-button:dy-text-sidebar-accent-foreground md:dy-opacity-0",
         className
       )}
       {...props}
@@ -641,12 +641,12 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
+      "dy-pointer-events-none dy-absolute dy-right-1 dy-flex dy-h-5 dy-min-w-5 dy-select-none dy-items-center dy-justify-center dy-rounded-md dy-px-1 dy-text-xs dy-font-medium dy-tabular-nums dy-text-sidebar-foreground",
+      "dy-peer-hover/menu-button:dy-text-sidebar-accent-foreground dy-peer-data-[active=true]/menu-button:dy-text-sidebar-accent-foreground",
+      "dy-peer-data-[size=sm]/menu-button:dy-top-1",
+      "dy-peer-data-[size=default]/menu-button:dy-top-1.5",
+      "dy-peer-data-[size=lg]/menu-button:dy-top-2.5",
+      "dy-group-data-[collapsible=icon]:dy-hidden",
       className
     )}
     {...props}
@@ -671,17 +671,17 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      className={cn("dy-flex dy-h-8 dy-items-center dy-gap-2 dy-rounded-md dy-px-2", className)}
       {...props}
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-md"
+          className="dy-size-4 dy-rounded-md"
           data-sidebar="menu-skeleton-icon"
         />
       )}
       <Skeleton
-        className="h-4 flex-1"
+        className="dy-h-4 dy-flex-1"
         data-sidebar="menu-skeleton-text"
         style={{ width }}
       />
@@ -698,8 +698,8 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
+      "dy-mx-3.5 dy-flex dy-min-w-0 dy-translate-x-px dy-flex-col dy-gap-1 dy-border-l dy-border-sidebar-border dy-px-2.5 dy-py-0.5",
+      "dy-group-data-[collapsible=icon]:dy-hidden",
       className
     )}
     {...props}
@@ -730,11 +730,11 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
+        "dy-flex dy-h-7 dy-min-w-0 dy--translate-x-px dy-items-center dy-gap-2 dy-overflow-hidden dy-rounded-md dy-px-2 dy-text-sidebar-foreground dy-outline-none dy-ring-sidebar-ring hover:dy-bg-sidebar-accent hover:dy-text-sidebar-accent-foreground focus-visible:dy-ring-2 active:dy-bg-sidebar-accent active:dy-text-sidebar-accent-foreground disabled:dy-pointer-events-none disabled:dy-opacity-50 aria-disabled:dy-pointer-events-none aria-disabled:dy-opacity-50 [&>span:last-child]:dy-truncate [&>svg]:dy-size-4 [&>svg]:dy-shrink-0 [&>svg]:dy-text-sidebar-accent-foreground",
+        "data-[active=true]:dy-bg-sidebar-accent data-[active=true]:dy-text-sidebar-accent-foreground",
+        size === "sm" && "dy-text-xs",
+        size === "md" && "dy-text-sm",
+        "dy-group-data-[collapsible=icon]:dy-hidden",
         className
       )}
       {...props}

package/src/components/ui/skeleton.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("dy-animate-pulse dy-rounded-md dy-bg-muted", className)}
       {...props}
     />
   )

package/src/components/ui/sonner.tsx

@@ -5,7 +5,7 @@ type ToasterProps = React.ComponentProps<typeof Sonner>
 const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
-      className="toaster group"
+      className="dy-toaster dy-group"
       toastOptions={{
         classNames: {
           toast:

package/src/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "dy-peer dy-inline-flex dy-h-6 dy-w-11 dy-shrink-0 dy-cursor-pointer dy-items-center dy-rounded-full dy-border-2 dy-border-transparent dy-transition-colors focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 focus-visible:dy-ring-offset-background disabled:dy-cursor-not-allowed disabled:dy-opacity-50 data-[state=checked]:dy-bg-primary data-[state=unchecked]:dy-bg-input",
       className
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "dy-pointer-events-none dy-block dy-h-5 dy-w-5 dy-rounded-full dy-bg-background dy-shadow-lg dy-ring-0 dy-transition-transform data-[state=checked]:dy-translate-x-5 data-[state=unchecked]:dy-translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>

package/src/components/ui/table.tsx

@@ -6,10 +6,10 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className="dy-relative dy-w-full dy-overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("dy-w-full dy-caption-bottom dy-text-sm", className)}
       {...props}
     />
   </div>
@@ -20,7 +20,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("[&_tr]:dy-border-b", className)} {...props} />
 ))
 TableHeader.displayName = "TableHeader"
 
@@ -30,7 +30,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn("[&_tr:last-child]:dy-border-0", className)}
     {...props}
   />
 ))
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "dy-border-t dy-bg-muted/50 dy-font-medium [&>tr]:last:dy-border-b-0",
       className
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b border-border/30 transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted",
+      "dy-border-b dy-border-border/30 dy-transition-colors hover:dy-bg-muted/30 data-[state=selected]:dy-bg-muted",
       className
     )}
     {...props}
@@ -99,7 +99,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn("dy-mt-4 dy-text-sm dy-text-muted-foreground", className)}
     {...props}
   />
 ))

package/src/components/ui/tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "dy-inline-flex dy-h-10 dy-items-center dy-justify-center dy-rounded-md dy-bg-muted dy-p-1 dy-text-muted-foreground",
       className
     )}
     {...props}
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "dy-inline-flex dy-items-center dy-justify-center dy-whitespace-nowrap dy-rounded-sm dy-px-3 dy-py-1.5 dy-text-sm dy-font-medium dy-ring-offset-background dy-transition-all focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 disabled:dy-pointer-events-none disabled:dy-opacity-50 data-[state=active]:dy-bg-background data-[state=active]:dy-text-foreground data-[state=active]:dy-shadow-sm",
       className
     )}
     {...props}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "dy-mt-2 dy-ring-offset-background focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2",
       className
     )}
     {...props}

package/src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "dy-flex dy-min-h-[80px] dy-w-full dy-rounded-md dy-border dy-border-input dy-bg-background dy-px-3 dy-py-2 dy-text-base dy-ring-offset-background placeholder:dy-text-muted-foreground focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 disabled:dy-cursor-not-allowed disabled:dy-opacity-50 md:dy-text-sm",
         className
       )}
       ref={ref}

package/src/components/ui/toggle.tsx

@@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  "dy-inline-flex dy-items-center dy-justify-center dy-rounded-md dy-text-sm dy-font-medium dy-ring-offset-background dy-transition-colors hover:dy-bg-muted hover:dy-text-muted-foreground focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 disabled:dy-pointer-events-none disabled:dy-opacity-50 data-[state=on]:dy-bg-accent data-[state=on]:dy-text-accent-foreground [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0 dy-gap-2",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: "dy-bg-transparent",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+          "dy-border dy-border-input dy-bg-transparent hover:dy-bg-accent hover:dy-text-accent-foreground",
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11",
+        default: "dy-h-10 dy-px-3 dy-min-w-10",
+        sm: "dy-h-9 dy-px-2.5 dy-min-w-9",
+        lg: "dy-h-11 dy-px-5 dy-min-w-11",
       },
     },
     defaultVariants: {

package/src/components/ui/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      "dy-z-50 dy-overflow-hidden dy-rounded-md dy-border dy-bg-popover dy-px-3 dy-py-1.5 dy-text-sm dy-text-popover-foreground dy-shadow-md dy-animate-in dy-fade-in-0 dy-zoom-in-95 data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=closed]:dy-zoom-out-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-slide-in-from-left-2 data-[side=top]:dy-slide-in-from-bottom-2 dy-origin-[--radix-tooltip-content-transform-origin]",
       className
     )}
     {...props}

package/src/index.css

@@ -59,53 +59,53 @@
     --sidebar-ring: 38 92% 50%;
   }
 
-  .admin-ui {
+  .dy-admin-ui {
     color-scheme: light;
-    @apply font-sans;
+    @apply dy-font-sans;
   }
 
-  .admin-ui h1,
-  .admin-ui h2,
-  .admin-ui h3,
-  .admin-ui h4,
-  .admin-ui h5,
-  .admin-ui h6 {
-    @apply font-serif;
+  .dy-admin-ui h1,
+  .dy-admin-ui h2,
+  .dy-admin-ui h3,
+  .dy-admin-ui h4,
+  .dy-admin-ui h5,
+  .dy-admin-ui h6 {
+    @apply dy-font-serif;
   }
 }
 
 @layer utilities {
-  .admin-ui .left-accent {
-    @apply border-l-2 border-primary/10 px-4 -mx-8 py-4  transition-all duration-200 bg-transparent;
+  .dy-admin-ui .left-accent {
+    @apply dy-border-l-2 dy-border-primary/10 dy-px-4 dy--mx-8 dy-py-4 dy-transition-all dy-duration-200 dy-bg-transparent;
   }
 
-  .admin-ui .left-accent:hover {
-    @apply border-l-primary bg-primary/[0.04];
+  .dy-admin-ui .left-accent:hover {
+    @apply dy-border-l-primary dy-bg-primary/[0.04];
   }
 
-  .admin-ui .left-accent .left-accent {
-    @apply px-4 -mx-4;
+  .dy-admin-ui .left-accent .left-accent {
+    @apply dy-px-4 dy--mx-4;
   }
 
-  .admin-ui .left-accent .left-accent .left-accent{
-    @apply px-4 mx-0;
+  .dy-admin-ui .left-accent .left-accent .left-accent{
+    @apply dy-px-4 dy-mx-0;
   }
 
-  .admin-ui .flat-container {
-    @apply bg-transparent border-none shadow-none p-0;
+  .dy-admin-ui .flat-container {
+    @apply dy-bg-transparent dy-border-none dy-shadow-none dy-p-0;
   }
 }
 
 @layer components {
-  .admin-ui input,
-  .admin-ui select,
-  .admin-ui textarea {
-    @apply focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none focus:outline-none border-border/60 bg-transparent transition-all;
+  .dy-admin-ui input,
+  .dy-admin-ui select,
+  .dy-admin-ui textarea {
+    @apply focus-visible:dy-ring-0 focus-visible:dy-ring-offset-0 focus-visible:dy-outline-none focus:dy-outline-none dy-border-border/60 dy-bg-transparent dy-transition-all;
   }
 
-  .admin-ui input:focus,
-  .admin-ui select:focus,
-  .admin-ui textarea:focus {
-    @apply border-primary/50;
+  .dy-admin-ui input:focus,
+  .dy-admin-ui select:focus,
+  .dy-admin-ui textarea:focus {
+    @apply dy-border-primary/50;
   }
 }

package/src/index.tsx

@@ -133,14 +133,14 @@ export function AdminUI({
 
   if (!mounted) {
     return (
-      <div className="flex-1 flex items-center justify-center p-12 bg-muted/5 animate-pulse">
-        <div className="text-muted-foreground/40 text-sm font-medium">Loading Dashboard...</div>
+      <div className="dy-flex-1 dy-flex dy-items-center dy-justify-center dy-p-12 dy-bg-muted/5 dy-animate-pulse">
+        <div className="dy-text-muted-foreground/40 dy-text-sm dy-font-medium">Loading Dashboard...</div>
       </div>
     );
   }
 
   return (
-    <div className="admin-ui h-full">
+    <div className="dy-admin-ui dy-h-full">
       <ErrorBoundary>
         <DyrectedProvider apiKey={apiKey} baseUrl={baseUrl} siteId={siteId}>
           <QueryProvider>
@@ -179,7 +179,7 @@ export interface AdminStandaloneProps {
 
 export function AdminStandalone({ apiKey, baseUrl, siteId }: AdminStandaloneProps) {
   return (
-    <div className="admin-ui h-full">
+    <div className="dy-admin-ui dy-h-full">
       <DyrectedProvider apiKey={apiKey} baseUrl={baseUrl} siteId={siteId}>
         <QueryProvider>
           <MemoryRouter>

package/src/lib/utils.ts

@@ -1,8 +1,12 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx"
+import { extendTailwindMerge } from "tailwind-merge"
+
+const customTwMerge = extendTailwindMerge({
+  prefix: "dy-",
+})
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return customTwMerge(clsx(inputs))
 }
 
 export function getMediaUrl(val: string | any, baseUrl: string) {