@dyrected/admin 2.0.1 → 2.4.0

package/src/components/forms/fields/multi-select.tsx

@@ -61,8 +61,8 @@ export function MultiSelect({
   }
 
   return (
-    <div className="flex flex-col gap-2">
-      {label && <label className="text-sm font-medium leading-none">{label}</label>}
+    <div className="dy-flex dy-flex-col dy-gap-2">
+      {label && <label className="dy-text-sm dy-font-medium dy-leading-none">{label}</label>}
       <Popover open={disabled ? false : open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
@@ -70,11 +70,11 @@ export function MultiSelect({
             role="combobox"
             aria-expanded={open}
             disabled={disabled}
-            className="w-full justify-between h-auto min-h-10 font-normal"
+            className="dy-w-full dy-justify-between dy-h-auto dy-min-h-10 dy-font-normal"
           >
-            <div className="flex flex-wrap gap-1 items-center">
+            <div className="dy-flex dy-flex-wrap dy-gap-1 dy-items-center">
               {value.length === 0 && (
-                <span className="text-muted-foreground">{placeholder}</span>
+                <span className="dy-text-muted-foreground">{placeholder}</span>
               )}
               {value.map((val) => {
                 const option = options.find((opt) => opt.value === val)
@@ -82,14 +82,14 @@ export function MultiSelect({
                   <Badge
                     key={val}
                     variant="secondary"
-                    className="mr-1 mb-1 items-center gap-1"
+                    className="dy-mr-1 dy-mb-1 dy-items-center dy-gap-1"
                   >
                     {option?.label || val}
                     {!disabled && (
                       <div
                         role="button"
                         tabIndex={0}
-                        className="ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        className="dy-ring-offset-background dy-rounded-full dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2"
                         onKeyDown={(e) => {
                           if (e.key === "Enter") {
                             handleRemove(val)
@@ -101,17 +101,17 @@ export function MultiSelect({
                         }}
                         onClick={() => handleRemove(val)}
                       >
-                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                        <X className="dy-h-3 dy-w-3 dy-text-muted-foreground hover:dy-text-foreground" />
                       </div>
                     )}
                   </Badge>
                 )
               })}
             </div>
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="dy-ml-2 dy-h-4 dy-w-4 dy-shrink-0 dy-opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-[400px] p-0" align="start">
+        <PopoverContent className="dy-w-[400px] dy-p-0" align="start">
           <Command>
             <CommandInput placeholder="Search options..." />
             <CommandList>
@@ -127,8 +127,8 @@ export function MultiSelect({
                     >
                       <Check
                         className={cn(
-                          "mr-2 h-4 w-4",
-                          isSelected ? "opacity-100" : "opacity-0"
+                          "dy-mr-2 dy-h-4 dy-w-4",
+                          isSelected ? "dy-opacity-100" : "dy-opacity-0"
                         )}
                       />
                       {option.label}

package/src/components/forms/fields/radio-field.tsx

@@ -20,26 +20,26 @@ export function RadioField({ schema, field, disabled }: RadioFieldProps) {
       defaultValue={field.value}
       disabled={disabled}
       className={cn(
-        "gap-4",
-        isHorizontal ? "flex flex-wrap items-center" : "flex flex-col"
+        "dy-gap-4",
+        isHorizontal ? "dy-flex dy-flex-wrap dy-items-center" : "dy-flex dy-flex-col"
       )}
     >
       {options.map((opt) => (
         <div key={opt.value} className={cn(
-          "relative flex items-center",
-          isHorizontal ? "min-w-[120px]" : "w-full"
+          "dy-relative dy-flex dy-items-center",
+          isHorizontal ? "dy-min-w-[120px]" : "dy-w-full"
         )}>
           <RadioGroupItem
             value={opt.value}
             id={`${field.name}-${opt.value}`}
-            className="peer absolute left-4 z-10"
+            className="dy-peer dy-absolute dy-left-4 dy-z-10"
           />
           <Label
             htmlFor={`${field.name}-${opt.value}`}
             className={cn(
-              "flex flex-1 items-center pl-12 pr-4 py-3 rounded-xl border border-border/40 bg-white/50 cursor-pointer transition-all hover:bg-white/80 hover:shadow-sm",
-              "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 peer-data-[state=checked]:shadow-md peer-data-[state=checked]:ring-1 peer-data-[state=checked]:ring-primary/20",
-              "text-sm font-medium text-foreground/70 peer-data-[state=checked]:text-primary"
+              "dy-flex dy-flex-1 dy-items-center dy-pl-12 dy-pr-4 dy-py-3 dy-rounded-xl dy-border dy-border-border/40 dy-bg-white/50 dy-cursor-pointer dy-transition-all hover:dy-bg-white/80 hover:dy-shadow-sm",
+              "dy-peer-data-[state=checked]:dy-border-primary dy-peer-data-[state=checked]:dy-bg-primary/5 dy-peer-data-[state=checked]:dy-shadow-md dy-peer-data-[state=checked]:dy-ring-1 dy-peer-data-[state=checked]:dy-ring-primary/20",
+              "dy-text-sm dy-font-medium dy-text-foreground/70 dy-peer-data-[state=checked]:dy-text-primary"
             )}
           >
             {opt.label}

package/src/components/forms/fields/relationship-picker.tsx

@@ -61,8 +61,8 @@ export function RelationshipPicker({ value, onChange, label, relationTo, multipl
   const selectedItems = values.map(v => data?.find((item: any) => item.id === v)).filter(Boolean)
 
   return (
-    <div className="flex flex-col gap-2">
-      {label && <label className="text-sm font-medium leading-none">{label}</label>}
+    <div className="dy-flex dy-flex-col dy-gap-2">
+      {label && <label className="dy-text-sm dy-font-medium dy-leading-none">{label}</label>}
       <Popover open={disabled ? false : open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
@@ -70,25 +70,25 @@ export function RelationshipPicker({ value, onChange, label, relationTo, multipl
             role="combobox"
             aria-expanded={open}
             disabled={disabled}
-            className="w-full justify-between font-normal"
+            className="dy-w-full dy-justify-between dy-font-normal"
           >
             {isLoading ? (
               "Loading..."
             ) : selectedItems.length > 0 ? (
-              <div className="flex flex-wrap gap-1">
+              <div className="dy-flex dy-flex-wrap dy-gap-1">
                 {selectedItems.map((item: any) => (
-                  <Badge key={item.id} variant="secondary" className="text-[10px] h-5 px-1.5">
+                  <Badge key={item.id} variant="secondary" className="dy-text-[10px] dy-h-5 dy-px-1.5">
                     {getDisplayLabel(item)}
                   </Badge>
                 ))}
               </div>
             ) : (
-              <span className="text-muted-foreground">Select {relationTo}...</span>
+              <span className="dy-text-muted-foreground">Select {relationTo}...</span>
             )}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="dy-ml-2 dy-h-4 dy-w-4 dy-shrink-0 dy-opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-[400px] p-0" align="start">
+        <PopoverContent className="dy-w-[400px] dy-p-0" align="start">
           <Command>
             <CommandInput 
               placeholder={`Search ${relationTo}...`} 
@@ -113,20 +113,20 @@ export function RelationshipPicker({ value, onChange, label, relationTo, multipl
                       }
                     }}
                   >
-                    <div className="flex items-center gap-3 flex-1">
+                    <div className="dy-flex dy-items-center dy-gap-3 dy-flex-1">
                       {isUpload && (
-                        <div className="h-6 w-6 rounded border bg-muted overflow-hidden flex-shrink-0">
+                        <div className="dy-h-6 dy-w-6 dy-rounded dy-border dy-bg-muted dy-overflow-hidden dy-flex-shrink-0">
                           <img 
                             src={getMediaUrl(item, client?.getBaseUrl() || "")} 
-                            className="h-full w-full object-cover" 
+                            className="dy-h-full dy-w-full dy-object-cover" 
                             alt="" 
                           />
                         </div>
                       )}
-                      <span className="flex-1">{getDisplayLabel(item)}</span>
+                      <span className="dy-flex-1">{getDisplayLabel(item)}</span>
                       <Check
                         className={cn(
-                          "h-4 w-4",
+                          "dy-h-4 dy-w-4",
                           values.includes(item.id) ? "opacity-100" : "opacity-0"
                         )}
                       />

package/src/components/forms/fields/rich-text-editor.tsx

@@ -45,109 +45,109 @@ const MenuBar = ({ editor, collection = "media" }: { editor: Editor | null, coll
   }
 
   return (
-    <div className="border border-input rounded-t-md p-1 flex flex-wrap gap-1 items-center bg-muted/50">
+    <div className="dy-border dy-border-input dy-rounded-t-md dy-p-1 dy-flex dy-flex-wrap dy-gap-1 dy-items-center dy-bg-muted/50">
       <Toggle
         size="sm"
         pressed={editor.isActive("bold")}
         onPressedChange={() => editor.chain().focus().toggleBold().run()}
       >
-        <Bold className="h-4 w-4" />
+        <Bold className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive("italic")}
         onPressedChange={() => editor.chain().focus().toggleItalic().run()}
       >
-        <Italic className="h-4 w-4" />
+        <Italic className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive("underline")}
         onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
       >
-        <UnderlineIcon className="h-4 w-4" />
+        <UnderlineIcon className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive("strike")}
         onPressedChange={() => editor.chain().focus().toggleStrike().run()}
       >
-        <Strikethrough className="h-4 w-4" />
+        <Strikethrough className="dy-h-4 dy-w-4" />
       </Toggle>
 
-      <div className="w-[1px] h-6 bg-border mx-1" />
+      <div className="dy-w-[1px] dy-h-6 dy-bg-border dy-mx-1" />
 
       <Toggle
         size="sm"
         pressed={editor.isActive("heading", { level: 1 })}
         onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
       >
-        <Heading1 className="h-4 w-4" />
+        <Heading1 className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive("heading", { level: 2 })}
         onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
       >
-        <Heading2 className="h-4 w-4" />
+        <Heading2 className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive("bulletList")}
         onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
       >
-        <List className="h-4 w-4" />
+        <List className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive("orderedList")}
         onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
       >
-        <ListOrdered className="h-4 w-4" />
+        <ListOrdered className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive("blockquote")}
         onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
       >
-        <Quote className="h-4 w-4" />
+        <Quote className="dy-h-4 dy-w-4" />
       </Toggle>
 
-      <div className="w-[1px] h-6 bg-border mx-1" />
+      <div className="dy-w-[1px] dy-h-6 dy-bg-border dy-mx-1" />
 
       <Toggle
         size="sm"
         pressed={editor.isActive({ textAlign: "left" })}
         onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
       >
-        <AlignLeft className="h-4 w-4" />
+        <AlignLeft className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive({ textAlign: "center" })}
         onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
       >
-        <AlignCenter className="h-4 w-4" />
+        <AlignCenter className="dy-h-4 dy-w-4" />
       </Toggle>
       <Toggle
         size="sm"
         pressed={editor.isActive({ textAlign: "right" })}
         onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
       >
-        <AlignRight className="h-4 w-4" />
+        <AlignRight className="dy-h-4 dy-w-4" />
       </Toggle>
 
-      <div className="w-[1px] h-6 bg-border mx-1" />
+      <div className="dy-w-[1px] dy-h-6 dy-bg-border dy-mx-1" />
 
       <Toggle
         size="sm"
         pressed={editor.isActive("link")}
         onPressedChange={addLink}
       >
-        <LinkIcon className="h-4 w-4" />
+        <LinkIcon className="dy-h-4 dy-w-4" />
       </Toggle>
       
-      <div className="ml-auto">
+      <div className="dy-ml-auto">
         <MediaPicker
           collection={collection}
           variant="icon"
@@ -213,11 +213,11 @@ export function RichTextEditor({ value, onChange, label, disabled, collection =
   }, [value, editor])
 
   return (
-    <div className="space-y-2">
-      {label && <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{label}</label>}
-      <div className="flex flex-col w-full">
+    <div className="dy-space-y-2">
+      {label && <label className="dy-text-sm dy-font-medium dy-leading-none dy-peer-disabled:dy-cursor-not-allowed dy-peer-disabled:dy-opacity-70">{label}</label>}
+      <div className="dy-flex dy-flex-col dy-w-full">
         {!disabled && <MenuBar editor={editor} collection={collection} />}
-        <EditorContent editor={editor} className={cn(disabled && "opacity-80")} />
+        <EditorContent editor={editor} className={cn(disabled && "dy-opacity-80")} />
       </div>
     </div>
   )

package/src/components/forms/fields/select-field.tsx

@@ -20,12 +20,12 @@ export function SelectField({ schema, field, disabled }: SelectFieldProps) {
 
   return (
     <Select onValueChange={field.onChange} defaultValue={field.value} disabled={disabled}>
-      <SelectTrigger className="h-12 rounded-xl border-border/40 bg-white/50 focus:ring-0 focus:ring-offset-0 focus:bg-white shadow-sm transition-all hover:shadow-md">
+      <SelectTrigger className="dy-h-12 dy-rounded-xl dy-border-border/40 dy-bg-white/50 focus:dy-ring-0 focus:dy-ring-offset-0 focus:dy-bg-white dy-shadow-sm dy-transition-all hover:dy-shadow-md">
         <SelectValue placeholder={schema.admin?.placeholder || `Select ${label.toLowerCase()}`} />
       </SelectTrigger>
-      <SelectContent className="rounded-xl border-border/40 shadow-xl animate-in fade-in zoom-in-95">
+      <SelectContent className="dy-rounded-xl dy-border-border/40 dy-shadow-xl dy-animate-in dy-fade-in dy-zoom-in-95">
         {options.map((opt) => (
-          <SelectItem key={opt.value} value={opt.value} className="rounded-lg focus:bg-primary/5 focus:text-primary transition-colors">
+          <SelectItem key={opt.value} value={opt.value} className="dy-rounded-lg focus:dy-bg-primary/5 focus:dy-text-primary dy-transition-colors">
             {opt.label}
           </SelectItem>
         ))}

package/src/components/forms/form-engine.tsx

@@ -62,8 +62,8 @@ export function FormEngine({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <div className="grid gap-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="dy-space-y-8">
+        <div className="dy-grid dy-gap-6">
           {fields.filter(f => !f.admin?.hidden).map((field) => (
             <FormFieldRenderer
               key={field.name}
@@ -74,7 +74,7 @@ export function FormEngine({
             />
           ))}
         </div>
-        <div className="flex justify-end gap-4">
+        <div className="dy-flex dy-justify-end dy-gap-4">
           {!readOnly && (
             <Button type="submit" disabled={isLoading}>
               {isLoading ? "Saving..." : submitLabel}

package/src/components/forms/form-field-renderer.tsx

@@ -80,14 +80,14 @@ export function FormFieldRenderer({ schema, basePath, control, collection }: For
 
   if (schema.type === "object") {
     return (
-      <div className="left-accent space-y-6">
-        <div className="flex items-center gap-2 mb-2">
-          <h4 className="font-bold text-sm text-foreground/80 tracking-tight">{schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)}</h4>
+      <div className="dy-left-accent dy-space-y-6">
+        <div className="dy-flex dy-items-center dy-gap-2 dy-mb-2">
+          <h4 className="dy-font-bold dy-text-sm dy-text-foreground/80 dy-tracking-tight">{schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)}</h4>
           {schema.admin?.description && (
-            <p className="text-[10px] text-muted-foreground/50 italic">{schema.admin.description}</p>
+            <p className="dy-text-[10px] dy-text-muted-foreground/50 dy-italic">{schema.admin.description}</p>
           )}
         </div>
-        <div className="space-y-6">
+        <div className="dy-space-y-6">
           {schema.fields?.map(subField => (
             <FormFieldRenderer key={subField.name} schema={subField} basePath={fullPath} control={control} collection={collection} />
           ))}
@@ -113,24 +113,24 @@ export function FormFieldRenderer({ schema, basePath, control, collection }: For
       render={({ field: formField }: { field: any }) => (
         <FormItem className={cn(
           isBoolean
-            ? "flex flex-row items-center justify-between rounded-xl border border-border/40 p-4 bg-white/50 shadow-sm space-y-0"
-            : "space-y-3"
+            ? "dy-flex dy-flex-row dy-items-center dy-justify-between dy-rounded-xl dy-border dy-border-border/40 dy-p-4 dy-bg-white/50 dy-shadow-sm dy-space-y-0"
+            : "dy-space-y-3"
         )}>
-          <div className={cn(isBoolean ? "space-y-1" : "flex items-center gap-2 mb-1")}>
-            <FormLabel className="text-sm font-semibold text-foreground/80 cursor-pointer">
+          <div className={cn(isBoolean ? "dy-space-y-1" : "dy-flex dy-items-center dy-gap-2 dy-mb-1")}>
+            <FormLabel className="dy-text-sm dy-font-semibold dy-text-foreground/80 dy-cursor-pointer">
               {schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)}
-              {schema.required && <span className="text-destructive ml-1">*</span>}
+              {schema.required && <span className="dy-text-destructive dy-ml-1">*</span>}
             </FormLabel>
             {schema.admin?.description && (
               <p className={cn(
-                "text-muted-foreground/60 italic",
-                isBoolean ? "text-[11px] leading-tight" : "text-[11px] leading-relaxed"
+                "dy-text-muted-foreground/60 dy-italic",
+                isBoolean ? "dy-text-[11px] dy-leading-tight" : "dy-text-[11px] dy-leading-relaxed"
               )}>
                 {schema.admin.description}
               </p>
             )}
             {!isBoolean && schema.unique && (
-              <span className="inline-flex items-center rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary ring-1 ring-inset ring-primary/10">
+              <span className="dy-inline-flex dy-items-center dy-rounded-full dy-bg-primary/10 dy-px-1.5 dy-py-0.5 dy-text-[10px] dy-font-medium dy-text-primary dy-ring-1 dy-ring-inset dy-ring-primary/10">
                 Unique
               </span>
             )}
@@ -139,9 +139,9 @@ export function FormFieldRenderer({ schema, basePath, control, collection }: For
             <FieldRenderer schema={schema} field={formField} collection={collection} context={{ user, schemas, siblingData: conditionData }} />
           </FormControl>
           {!isBoolean && schema.admin?.description && (
-            <p className="text-[11px] text-muted-foreground/70 leading-relaxed italic">{schema.admin.description}</p>
+            <p className="dy-text-[11px] dy-text-muted-foreground/70 dy-leading-relaxed dy-italic">{schema.admin.description}</p>
           )}
-          <FormMessage className="text-xs font-medium" />
+          <FormMessage className="dy-text-xs dy-font-medium" />
         </FormItem>
       )}
     />
@@ -179,45 +179,45 @@ function ArrayFieldRenderer({ schema, basePath, control, collection }: { schema:
   }
 
   return (
-    <div className="space-y-6 transition-all py-6">
-      <div className="flex justify-between items-end pb-2">
-        <div className="space-y-1">
-          <div className="flex items-center gap-2">
-            <Layers className="h-4 w-4 text-primary" />
-            <h4 className="font-serif font-bold text-base text-foreground tracking-tight">{schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)}</h4>
+    <div className="dy-space-y-6 dy-transition-all dy-py-6">
+      <div className="dy-flex dy-justify-between dy-items-end dy-pb-2">
+        <div className="dy-space-y-1">
+          <div className="dy-flex dy-items-center dy-gap-2">
+            <Layers className="dy-h-4 dy-w-4 dy-text-primary" />
+            <h4 className="dy-font-serif dy-font-bold dy-text-base dy-text-foreground dy-tracking-tight">{schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)}</h4>
           </div>
           {schema.admin?.description && (
-            <p className="text-[11px] text-muted-foreground/60 italic leading-relaxed">{schema.admin.description}</p>
+            <p className="dy-text-[11px] dy-text-muted-foreground/60 dy-italic dy-leading-relaxed">{schema.admin.description}</p>
           )}
         </div>
-        <div className="flex items-center gap-2">
+        <div className="dy-flex dy-items-center dy-gap-2">
           <Button
             type="button"
             variant="outline"
             size="sm"
-            className="h-9 text-[11px] font-bold rounded-xl border-primary/20 hover:bg-primary/5 hover:text-primary transition-all shadow-sm"
+            className="dy-h-9 dy-text-[11px] dy-font-bold dy-rounded-xl dy-border-primary/20 hover:dy-bg-primary/5 hover:dy-text-primary dy-transition-all dy-shadow-sm"
             onClick={() => append(buildDefaultValues(schema.fields || [], {}))}
           >
-            <Plus className="w-3.5 h-3.5 mr-1.5" />
+            <Plus className="dy-w-3.5 dy-h-3.5 dy-mr-1.5" />
             Add Item
           </Button>
         </div>
       </div>
 
-      <div className="space-y-8 pl-0 border-l border-muted/30">
+      <div className="dy-space-y-8 dy-pl-0 dy-border-l dy-border-muted/30">
         {fields.map((item, index) => (
-          <div key={item.id} className="relative group animate-in slide-in-from-left-2 duration-300">
-            <div className="bg-muted/5 left-accent transition-all relative">
+          <div key={item.id} className="dy-relative dy-group dy-animate-in dy-slide-in-from-left-2 dy-duration-300">
+            <div className="dy-bg-muted/5 dy-left-accent dy-transition-all dy-relative">
               <Button
                 type="button"
                 variant="ghost"
                 size="icon"
-                className="absolute top-4 right-4 h-8 w-8 text-muted-foreground/20 hover:text-destructive hover:bg-destructive/10 rounded-xl opacity-0 group-hover:opacity-100 transition-all"
+                className="dy-absolute dy-top-4 dy-right-4 dy-h-8 dy-w-8 dy-text-muted-foreground/20 hover:dy-text-destructive hover:dy-bg-destructive/10 dy-rounded-xl dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-all"
                 onClick={() => remove(index)}
               >
-                <Trash2 className="w-4 h-4" />
+                <Trash2 className="dy-w-4 dy-h-4" />
               </Button>
-              <div className="space-y-6">
+              <div className="dy-space-y-6">
                 {schema.fields?.map(subField => (
                   <FormFieldRenderer
                     key={subField.name}
@@ -233,11 +233,11 @@ function ArrayFieldRenderer({ schema, basePath, control, collection }: { schema:
         ))}
 
         {fields.length === 0 && (
-          <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-3xl bg-muted/5 space-y-3">
-            <div className="p-3 bg-muted rounded-full">
-              <Layers className="h-6 w-6 text-muted-foreground/40" />
+          <div className="dy-flex dy-flex-col dy-items-center dy-justify-center dy-py-12 dy-border-2 dy-border-dashed dy-border-muted dy-rounded-3xl dy-bg-muted/5 dy-space-y-3">
+            <div className="dy-p-3 dy-bg-muted dy-rounded-full">
+              <Layers className="dy-h-6 dy-w-6 dy-text-muted-foreground/40" />
             </div>
-            <p className="text-xs font-medium text-muted-foreground/50">No items added yet</p>
+            <p className="dy-text-xs dy-font-medium dy-text-muted-foreground/50">No items added yet</p>
           </div>
         )}
 
@@ -245,10 +245,10 @@ function ArrayFieldRenderer({ schema, basePath, control, collection }: { schema:
           type="button"
           variant="outline"
           size="sm"
-          className="w-full h-10 text-xs font-bold rounded-2xl border-dashed border-primary/20 hover:bg-primary/5 hover:text-primary transition-all shadow-sm"
+          className="dy-w-full dy-h-10 dy-text-xs dy-font-bold dy-rounded-2xl dy-border-dashed dy-border-primary/20 hover:dy-bg-primary/5 hover:dy-text-primary dy-transition-all dy-shadow-sm"
           onClick={() => append(buildDefaultValues(schema.fields || [], {}))}
         >
-          <Plus className="w-4 h-4 mr-2" />
+          <Plus className="dy-w-4 dy-h-4 dy-mr-2" />
           Add Item
         </Button>
       </div>