@dyrected/admin 2.0.1 → 2.4.0

package/src/components/ui/form.tsx

@@ -80,7 +80,7 @@ const FormItem = React.forwardRef<
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div ref={ref} className={cn("dy-space-y-2", className)} {...props} />
     </FormItemContext.Provider>
   )
 })
@@ -95,7 +95,7 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(error && "dy-text-destructive", className)}
       htmlFor={formItemId}
       {...props}
     />
@@ -135,7 +135,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("dy-text-sm dy-text-muted-foreground", className)}
       {...props}
     />
   )
@@ -157,7 +157,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("dy-text-sm dy-font-medium dy-text-destructive", className)}
       {...props}
     >
       {body}

package/src/components/ui/input.tsx

@@ -8,9 +8,9 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-12 w-full rounded-xl border border-border/40 bg-white/50 px-4 py-2 text-base transition-all",
-          "placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:border-primary/30 focus-visible:bg-white focus-visible:shadow-md",
-          "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm shadow-sm",
+          "dy-flex dy-h-12 dy-w-full dy-rounded-xl dy-border dy-border-border/40 dy-bg-white/50 dy-px-4 dy-py-2 dy-text-base dy-transition-all",
+          "placeholder:dy-text-muted-foreground/60 focus-visible:dy-outline-none focus-visible:dy-border-primary/30 focus-visible:dy-bg-white focus-visible:dy-shadow-md",
+          "disabled:dy-cursor-not-allowed disabled:dy-opacity-50 md:dy-text-sm dy-shadow-sm",
           className
         )}
         ref={ref}

package/src/components/ui/label.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "dy-text-sm dy-font-medium dy-leading-none dy-peer-disabled:dy-cursor-not-allowed dy-peer-disabled:dy-opacity-70"
 )
 
 const Label = React.forwardRef<

package/src/components/ui/page-header.tsx

@@ -10,19 +10,19 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description, icon: Icon, children }: PageHeaderProps) {
   return (
-    <div className="flex items-end justify-between mb-8">
+    <div className="dy-flex dy-items-end dy-justify-between dy-mb-8">
       <div>
-        <div className="flex items-center gap-3 mb-1">
-          {Icon && <Icon className="h-4 w-4 text-primary/60" />}
-          <h1 className="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+        <div className="dy-flex dy-items-center dy-gap-3 dy-mb-1">
+          {Icon && <Icon className="dy-h-4 dy-w-4 dy-text-primary/60" />}
+          <h1 className="dy-text-2xl dy-font-bold dy-tracking-tight dy-text-foreground">{title}</h1>
         </div>
         {description && (
-          <p className="text-[11px] text-muted-foreground/60 font-medium">
+          <p className="dy-text-[11px] dy-text-muted-foreground/60 dy-font-medium">
             {description}
           </p>
         )}
       </div>
-      <div className="flex items-center gap-3">
+      <div className="dy-flex dy-items-center dy-gap-3">
         {children}
       </div>
     </div>

package/src/components/ui/pagination.tsx

@@ -24,32 +24,32 @@ export function Pagination({
 
   return (
     <div className={`flex items-center justify-between px-4 py-4 border-t border-border/40 ${className}`}>
-      <p className="text-xs text-muted-foreground">
+      <p className="dy-text-xs dy-text-muted-foreground">
         Showing page <strong>{page}</strong> of <strong>{totalPages}</strong>
         {total != null && (
           <> &mdash; {total} total entries</>
         )}
       </p>
-      <div className="flex items-center gap-2">
+      <div className="dy-flex dy-items-center dy-gap-2">
         <Button
           variant="outline"
           size="sm"
-          className="h-8 w-8 p-0"
+          className="dy-h-8 dy-w-8 dy-p-0"
           disabled={!hasPrevPage}
           onClick={() => onPageChange(Math.max(1, page - 1))}
           title="Previous page"
         >
-          <ChevronLeft className="h-4 w-4" />
+          <ChevronLeft className="dy-h-4 dy-w-4" />
         </Button>
         <Button
           variant="outline"
           size="sm"
-          className="h-8 w-8 p-0"
+          className="dy-h-8 dy-w-8 dy-p-0"
           disabled={!hasNextPage}
           onClick={() => onPageChange(page + 1)}
           title="Next page"
         >
-          <ChevronRight className="h-4 w-4" />
+          <ChevronRight className="dy-h-4 dy-w-4" />
         </Button>
       </div>
     </div>

package/src/components/ui/popover.tsx

@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-[100] w-72 rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-popover-content-transform-origin]",
+        "dy-z-[100] dy-w-72 dy-rounded-md dy-border dy-bg-white dy-p-4 dy-text-popover-foreground dy-shadow-md dy-outline-none data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-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-popover-content-transform-origin]",
         className
       )}
       {...props}

package/src/components/ui/progress.tsx

@@ -10,13 +10,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      "dy-relative dy-h-4 dy-w-full dy-overflow-hidden dy-rounded-full dy-bg-secondary",
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="dy-h-full dy-w-full dy-flex-1 dy-bg-primary dy-transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

package/src/components/ui/radio-group.tsx

@@ -10,7 +10,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn("dy-grid dy-gap-2", className)}
       {...props}
       ref={ref}
     />
@@ -26,13 +26,13 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-5 w-5 rounded-full border border-primary/20 bg-white/50 text-primary shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all hover:border-primary/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary/5",
+        "dy-aspect-square dy-h-5 dy-w-5 dy-rounded-full dy-border dy-border-primary/20 dy-bg-white/50 dy-text-primary dy-shadow-sm focus:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring disabled:dy-cursor-not-allowed disabled:dy-opacity-50 dy-transition-all hover:dy-border-primary/40 data-[state=checked]:dy-border-primary data-[state=checked]:dy-bg-primary/5",
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-primary" />
+      <RadioGroupPrimitive.Indicator className="dy-flex dy-items-center dy-justify-center">
+        <Circle className="dy-h-2.5 dy-w-2.5 dy-fill-current dy-text-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

package/src/components/ui/render-cell.tsx

@@ -10,7 +10,7 @@ interface RenderCellProps {
 }
 
 export function RenderCell({ value, field, client, schemas }: RenderCellProps) {
-  if (value === null || value === undefined) return <span className="text-muted-foreground">-</span>
+  if (value === null || value === undefined) return <span className="dy-text-muted-foreground">-</span>
 
   // Handle Boolean
   if (field.type === "boolean" || typeof value === "boolean") {
@@ -21,9 +21,9 @@ export function RenderCell({ value, field, client, schemas }: RenderCellProps) {
   if (field.type === "date") {
     const date = new Date(value)
     return (
-      <div className="flex items-center gap-1.5 text-muted-foreground">
-        <Calendar className="h-3 w-3" />
-        <span className="text-xs">{date.toLocaleDateString()}</span>
+      <div className="dy-flex dy-items-center dy-gap-1.5 dy-text-muted-foreground">
+        <Calendar className="dy-h-3 dy-w-3" />
+        <span className="dy-text-xs">{date.toLocaleDateString()}</span>
       </div>
     )
   }
@@ -32,15 +32,15 @@ export function RenderCell({ value, field, client, schemas }: RenderCellProps) {
   const relationTo = field.relationTo || field.collection
   if (field.type === "image" || (field.type === "relationship" && isUploadCollection(relationTo, schemas))) {
     const media = value
-    if (!media) return <span className="text-muted-foreground">-</span>
+    if (!media) return <span className="dy-text-muted-foreground">-</span>
 
     const url = getMediaUrl(value, client?.getBaseUrl() || "")
     
-    if (!url) return <span className="text-muted-foreground">-</span>
+    if (!url) return <span className="dy-text-muted-foreground">-</span>
 
     return (
-      <div className="h-8 w-8 rounded overflow-hidden border bg-muted shadow-sm">
-        <img src={url} className="h-full w-full object-cover" alt="" />
+      <div className="dy-h-8 dy-w-8 dy-rounded dy-overflow-hidden dy-border dy-bg-muted dy-shadow-sm">
+        <img src={url} className="dy-h-full dy-w-full dy-object-cover" alt="" />
       </div>
     )
   }
@@ -53,8 +53,8 @@ export function RenderCell({ value, field, client, schemas }: RenderCellProps) {
     const displayValue = value[displayField] || value.name || value.id || "Unknown"
 
     return (
-      <div className="flex items-center gap-2">
-        <Badge variant="outline" className="font-normal border-primary/20 bg-primary/5 text-primary">
+      <div className="dy-flex dy-items-center dy-gap-2">
+        <Badge variant="outline" className="dy-font-normal dy-border-primary/20 dy-bg-primary/5 dy-text-primary">
           {String(displayValue)}
         </Badge>
       </div>
@@ -64,14 +64,14 @@ export function RenderCell({ value, field, client, schemas }: RenderCellProps) {
   // Handle Array of strings or IDs
   if (Array.isArray(value)) {
     return (
-      <div className="flex flex-wrap gap-1">
+      <div className="dy-flex dy-flex-wrap dy-gap-1">
         {value.slice(0, 2).map((item, i) => (
-          <Badge key={i} variant="outline" className="text-[10px] px-1.5 h-5">
+          <Badge key={i} variant="outline" className="dy-text-[10px] dy-px-1.5 dy-h-5">
             {typeof item === 'object' ? (item.title || item.name || item.id) : String(item)}
           </Badge>
         ))}
         {value.length > 2 && (
-          <span className="text-[10px] text-muted-foreground">+{value.length - 2} more</span>
+          <span className="dy-text-[10px] dy-text-muted-foreground">+{value.length - 2} more</span>
         )}
       </div>
     )
@@ -85,7 +85,7 @@ export function RenderCell({ value, field, client, schemas }: RenderCellProps) {
     
     if (entries.length > 0) {
       return (
-        <span className="text-[11px] text-muted-foreground font-medium leading-tight">
+        <span className="dy-text-[11px] dy-text-muted-foreground dy-font-medium dy-leading-tight">
           {entries.map(([k, v]) => `${k}: ${String(v)}`).join(", ")}
           {Object.keys(value).length > 3 ? "..." : ""}
         </span>
@@ -93,14 +93,14 @@ export function RenderCell({ value, field, client, schemas }: RenderCellProps) {
     }
 
     return (
-      <span className="text-[11px] text-muted-foreground font-mono bg-muted/30 px-1 rounded">
+      <span className="dy-text-[11px] dy-text-muted-foreground dy-font-mono dy-bg-muted/30 dy-px-1 dy-rounded">
         {JSON.stringify(value).slice(0, 30)}
         {JSON.stringify(value).length > 30 ? "..." : ""}
       </span>
     )
   }
 
-  return <span className="text-sm font-medium">{typeof value === 'object' ? JSON.stringify(value).slice(0, 50) : String(value)}</span>
+  return <span className="dy-text-sm dy-font-medium">{typeof value === 'object' ? JSON.stringify(value).slice(0, 50) : String(value)}</span>
 }
 
 function isUploadCollection(slug: string | undefined, schemas: any) {

package/src/components/ui/scroll-area.tsx

@@ -9,10 +9,10 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn("dy-relative dy-overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="dy-h-full dy-w-full dy-rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
@@ -29,16 +29,16 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
+      "dy-flex dy-touch-none dy-select-none dy-transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "dy-h-full dy-w-2.5 dy-border-l dy-border-l-transparent dy-p-[1px]",
       orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        "dy-h-2.5 dy-flex-col dy-border-t dy-border-t-transparent dy-p-[1px]",
       className
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="dy-relative dy-flex-1 dy-rounded-full dy-bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

package/src/components/ui/select.tsx

@@ -19,14 +19,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "dy-flex dy-h-10 dy-w-full dy-items-center dy-justify-between dy-rounded-md dy-border dy-border-input dy-bg-background dy-px-3 dy-py-2 dy-text-sm dy-ring-offset-background data-[placeholder]:dy-text-muted-foreground focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-cursor-not-allowed disabled:dy-opacity-50 [&>span]:dy-line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="dy-h-4 dy-w-4 dy-opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -39,12 +39,12 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "dy-flex dy-cursor-default dy-items-center dy-justify-center dy-py-1",
       className
     )}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className="dy-h-4 dy-w-4" />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -56,12 +56,12 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "dy-flex dy-cursor-default dy-items-center dy-justify-center dy-py-1",
       className
     )}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className="dy-h-4 dy-w-4" />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -75,9 +75,9 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-[100] max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 origin-[--radix-select-content-transform-origin]",
+        "dy-relative dy-z-[100] dy-max-h-[--radix-select-content-available-height] dy-min-w-[8rem] dy-overflow-y-auto dy-overflow-x-hidden dy-rounded-md dy-border dy-bg-white dy-text-popover-foreground dy-shadow-md data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-translate-x-1 data-[side=top]:dy--translate-y-1 dy-origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "data-[side=bottom]:dy-translate-y-1 data-[side=left]:dy--translate-x-1 data-[side=right]:dy-translate-x-1 data-[side=top]:dy--translate-y-1",
         className
       )}
       position={position}
@@ -86,7 +86,7 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
+          "dy-p-1",
           position === "popper" &&
             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
@@ -105,7 +105,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("dy-py-1.5 dy-pl-8 dy-pr-2 dy-text-sm dy-font-semibold", className)}
     {...props}
   />
 ))
@@ -118,14 +118,14 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "dy-relative dy-flex dy-w-full dy-cursor-default dy-select-none dy-items-center dy-rounded-sm dy-py-1.5 dy-pl-8 dy-pr-2 dy-text-sm dy-outline-none focus:dy-bg-accent focus:dy-text-accent-foreground data-[disabled]:dy-pointer-events-none data-[disabled]:dy-opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="dy-absolute dy-left-2 dy-flex dy-h-3.5 dy-w-3.5 dy-items-center dy-justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="dy-h-4 dy-w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 
@@ -140,7 +140,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("dy--mx-1 dy-my-1 dy-h-px dy-bg-muted", className)}
     {...props}
   />
 ))

package/src/components/ui/separator.tsx

@@ -16,8 +16,8 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        "dy-shrink-0 dy-bg-border",
+        orientation === "horizontal" ? "dy-h-[1px] dy-w-full" : "dy-h-full dy-w-[1px]",
         className
       )}
       {...props}

package/src/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "dy-fixed dy-inset-0 dy-z-50 dy-bg-black/40 dy-backdrop-blur-[2px] data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0",
       className
     )}
     {...props}
@@ -31,16 +31,16 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-white p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "dy-fixed dy-z-50 dy-gap-4 dy-bg-white dy-p-6 dy-shadow-2xl dy-transition dy-ease-in-out data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-duration-300 data-[state=open]:dy-duration-500",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: "dy-inset-x-0 dy-top-0 dy-border-b data-[state=closed]:dy-slide-out-to-top data-[state=open]:dy-slide-in-from-top",
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          "dy-inset-x-0 dy-bottom-0 dy-border-t data-[state=closed]:dy-slide-out-to-bottom data-[state=open]:dy-slide-in-from-bottom",
+        left: "dy-inset-y-0 dy-left-0 dy-h-full dy-w-3/4 dy-border-r data-[state=closed]:dy-slide-out-to-left data-[state=open]:dy-slide-in-from-left sm:dy-max-w-sm",
         right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          "dy-inset-y-0 dy-right-0 dy-h-full dy-w-3/4 dy-border-l data-[state=closed]:dy-slide-out-to-right data-[state=open]:dy-slide-in-from-right sm:dy-max-w-sm",
       },
     },
     defaultVariants: {
@@ -65,9 +65,9 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+      <SheetPrimitive.Close className="dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-secondary">
+        <X className="dy-h-4 dy-w-4" />
+        <span className="dy-sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
@@ -80,7 +80,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "dy-flex dy-flex-col dy-space-y-2 dy-text-center sm:dy-text-left",
       className
     )}
     {...props}
@@ -94,7 +94,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "dy-flex dy-flex-col-reverse sm:dy-flex-row sm:dy-justify-end sm:dy-space-x-2",
       className
     )}
     {...props}
@@ -108,7 +108,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn("dy-text-lg dy-font-semibold dy-text-foreground", className)}
     {...props}
   />
 ))
@@ -120,7 +120,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("dy-text-sm dy-text-muted-foreground", className)}
     {...props}
   />
 ))