From e9857802a6c7630b745b857b59d0a72bd124d5d5 Mon Sep 17 00:00:00 2001
From: Andrew Boyd <andrew@formkit.com>
Date: Mon, 11 Dec 2023 13:59:34 -0500
Subject: [PATCH] feat: Adds styles to support new drag and drop implementation

---
 src/inputs/pro/autocomplete.ts | 12 ++++++++++++
 src/inputs/pro/dropdown.ts     | 10 ++++++++++
 src/inputs/pro/taglist.ts      | 10 ++++++++++
 src/inputs/pro/transferlist.ts | 19 +++++++++++++++++++
 4 files changed, 51 insertions(+)

diff --git a/src/inputs/pro/autocomplete.ts b/src/inputs/pro/autocomplete.ts
index 4fc3c4c..a8b76b0 100644
--- a/src/inputs/pro/autocomplete.ts
+++ b/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
diff --git a/src/inputs/pro/dropdown.ts b/src/inputs/pro/dropdown.ts
index 917ab37..b018e71 100644
--- a/src/inputs/pro/dropdown.ts
+++ b/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
diff --git a/src/inputs/pro/taglist.ts b/src/inputs/pro/taglist.ts
index add4b7b..fb58d3c 100644
--- a/src/inputs/pro/taglist.ts
+++ b/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%]
diff --git a/src/inputs/pro/transferlist.ts b/src/inputs/pro/transferlist.ts
index 832bcc0..2f2b0e0 100644
--- a/src/inputs/pro/transferlist.ts
+++ b/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,*)