feat: Adds styles to support new drag and drop implementation

Author: andrew-boyd

src/inputs/pro/autocomplete.ts

@@ -19,6 +19,18 @@ export default {
     data-[active-selection=true]:ring-$accentColor-$baseColorShade(-1,*)
     dark:bg-$colorTemperature-600
     dark:group-data-[multiple]:border-$colorTemperature-$borderShadeDarkMode(0,300,700)
+
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - touchDropZone
+      - touchDragging
+      - longTouch .*/
+    }
+    [&.formkit-dropZone]:opacity-25
+    [&.formkit-touchDropZone]:opacity-25
+    [&.formkit-touchDragging]:!flex
+    [&.formkit-longTouch]:opacity-25
   `,
   selection: `
     $radius

src/inputs/pro/dropdown.ts

@@ -43,6 +43,16 @@ export default {
     whitespace-nowrap
     mr-1
   `,
+  tagWrapper: `
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - touchDropZone
+      .*/
+    }
+    [&.formkit-dropZone_.formkit-tag]:opacity-25
+    [&.formkit-touchDropZone_.formkit-tag]:opacity-25
+  `,
   truncationCount: `
     flex
     items-center

src/inputs/pro/taglist.ts

@@ -8,6 +8,16 @@ export default {
   tags: `
     pl-$spacing(2,2,4)
   `,
+  tagWrapper: `
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - touchDropZone
+      .*/
+    }
+    [&.formkit-dropZone_.formkit-tag]:opacity-25
+    [&.formkit-touchDropZone_.formkit-tag]:opacity-25
+  `,
   input: `
     !p-0
     !w-[0%]

src/inputs/pro/transferlist.ts

@@ -103,6 +103,25 @@ export default {
     dark:ring-$colorTemperature-$borderShadeDarkMode(2,400,700) 
     dark:data-[is-active=true]:ring-$accentColor-$borderShadeDarkMode(2,300,600) 
     dark:aria-selected:ring-$accentColor-$borderShadeDarkMode(2,300,600)
+
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - selectionDropZone
+      - touchDropZone
+      - touchSelectionDropZone
+      - longTouch .*/
+    }
+    [&.formkit-dropZone]:bg-$accentColor-100
+    [&.formkit-selectionDropZone]:bg-$accentColor-100
+    [&.formkit-touchDropZone]:bg-$accentColor-100
+    [&.formkit-touchSelectionDropZone]:bg-$accentColor-100
+    [&.formkit-longTouch]:bg-$accentColor-100
+    dark:[&.formkit-dropZone]:bg-$accentColor-900
+    dark:[&.formkit-selectionDropZone]:bg-$accentColor-900
+    dark:[&.formkit-touchDropZone]:bg-$accentColor-900
+    dark:[&.formkit-touchSelectionDropZone]:bg-$accentColor-900
+    dark:[&.formkit-longTouch]:bg-$accentColor-900
   `,
   transferlistOption: `
     text-$scale(-1,*)