From 2118a0fa820f4d826222dedd18ec6dcbd310f34c Mon Sep 17 00:00:00 2001
From: xandemon <dev01.sandesh@gmail.com>
Date: Thu, 5 Dec 2024 20:39:36 +0545
Subject: [PATCH 1/3] docs: :package: package: add popover, tooltip shadcn
 compz

---
 docs/package-lock.json             | 246 +++++++++++++++++++++++++++++
 docs/package.json                  |   2 +
 docs/src/components/ui/popover.tsx |  29 ++++
 docs/src/components/ui/tooltip.tsx |  28 ++++
 4 files changed, 305 insertions(+)
 create mode 100644 docs/src/components/ui/popover.tsx
 create mode 100644 docs/src/components/ui/tooltip.tsx

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 4fd5094..b3a5bc1 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -14,7 +14,9 @@
         "@astrojs/tailwind": "^5.1.0",
         "@fontsource-variable/noto-sans": "^5.0.5",
         "@radix-ui/react-alert-dialog": "^1.1.2",
+        "@radix-ui/react-popover": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-tooltip": "^1.1.4",
         "@types/react": "^18.3.2",
         "@types/react-dom": "^18.3.0",
         "astro": "^4.8.2",
@@ -994,6 +996,44 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
     "node_modules/@fontsource-variable/noto-sans": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans/-/noto-sans-5.0.5.tgz",
@@ -1592,6 +1632,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -1743,6 +1806,90 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.2.tgz",
+      "integrity": "sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
@@ -1832,6 +1979,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.4.tgz",
+      "integrity": "sha512-QpObUH/ZlpaO4YgHSaYzrLO2VuO+ZBFFgGzjMUPwtiYnAzzNNDPJeEGRrT7qNOrWm/Jr08M1vlp+vTHtnSQ0Uw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1898,6 +2079,71 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
+      "license": "MIT"
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
diff --git a/docs/package.json b/docs/package.json
index 5a82d72..0c3c3a6 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,7 +17,9 @@
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/noto-sans": "^5.0.5",
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.8.2",
diff --git a/docs/src/components/ui/popover.tsx b/docs/src/components/ui/popover.tsx
new file mode 100644
index 0000000..adc2871
--- /dev/null
+++ b/docs/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 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 dark:border-zinc-900 dark:bg-zinc-950 dark:text-zinc-300",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/docs/src/components/ui/tooltip.tsx b/docs/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..1faff55
--- /dev/null
+++ b/docs/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-950 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 dark:border-zinc-900 dark:bg-zinc-950 dark:text-zinc-300",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

From 2c8843a30e69594a33c752b83dfcac19f569106e Mon Sep 17 00:00:00 2001
From: xandemon <dev01.sandesh@gmail.com>
Date: Thu, 5 Dec 2024 20:42:09 +0545
Subject: [PATCH 2/3] docs: :zap: improvement: set default theme to dark

---
 docs/src/components/ui/badge.tsx  |  8 ++++----
 docs/src/components/ui/button.tsx | 12 ++++++------
 docs/src/layouts/DocsLayout.astro |  4 ++--
 docs/src/layouts/Layout.astro     |  2 +-
 docs/tailwind.config.mjs          |  2 +-
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/src/components/ui/badge.tsx b/docs/src/components/ui/badge.tsx
index 4b0876a..d26090f 100644
--- a/docs/src/components/ui/badge.tsx
+++ b/docs/src/components/ui/badge.tsx
@@ -9,12 +9,12 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-zinc-800 text-zinc-300 hover:bg-zinc-800/80 dark:bg-zinc-300 dark:text-zinc-800 dark:hover:bg-zinc-300/80 pl-3 pr-5",
+          "border-transparent bg-zinc-300 text-zinc-800 hover:bg-zinc-300/80 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-800/80 pl-3 pr-5",
         secondary:
-          "border-zinc-800 bg-zinc-800 bg-opacity-25 text-zinc-400 hover:bg-zinc-800/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
+          "border-zinc-800 bg-zinc-800 bg-opacity-25 text-zinc-50 hover:bg-zinc-800/80 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800/80",
         destructive:
-          "border-transparent bg-red-500 text-zinc-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/80",
-        outline: "text-zinc-950 dark:text-zinc-50",
+          "border-transparent bg-red-900 text-zinc-50 hover:bg-red-900/80 dark:bg-red-500 dark:text-zinc-50 dark:hover:bg-red-500/80",
+        outline: "text-zinc-50 dark:text-zinc-950",
       },
     },
     defaultVariants: {
diff --git a/docs/src/components/ui/button.tsx b/docs/src/components/ui/button.tsx
index 46f4ca7..945818c 100644
--- a/docs/src/components/ui/button.tsx
+++ b/docs/src/components/ui/button.tsx
@@ -10,16 +10,16 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-sky-500 text-zinc-100 hover:bg-sky-500/90 dark:bg-zinc-200 dark:text-sky-500 dark:hover:bg-zinc-200/90",
+          "bg-zinc-200 text-sky-500 hover:bg-zinc-200/90 dark:bg-sky-500 dark:text-zinc-100 dark:hover:bg-sky-500/90",
         destructive:
-          "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+          "bg-red-900 text-zinc-50 hover:bg-red-900/90 dark:bg-red-500 dark:text-zinc-50 dark:hover:bg-red-500/90",
         outline:
-          "border border-zinc-800 text-sky-400 bg-transparent hover:bg-zinc-800 hover:text-sky-400 dark:border-zinc-200 dark:bg-transparent dark:hover:bg-zinc-200 dark:hover:text-zinc-50",
+          "border border-zinc-200 text-zinc-50 bg-transparent hover:bg-zinc-200 hover:text-zinc-50 dark:border-zinc-800 dark:bg-transparent dark:hover:bg-zinc-800 dark:hover:text-zinc-400",
         secondary:
-          "bg-zinc-700 text-zinc-200 hover:bg-zinc-700/80 dark:bg-zinc-200 dark:text-zinc-200 dark:hover:bg-zinc-200/80",
+          "bg-zinc-200 text-zinc-200 hover:bg-zinc-200/80 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80",
         ghost:
-          "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
-        link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50",
+          "hover:bg-zinc-800 hover:text-zinc-50 dark:hover:bg-zinc-100 dark:hover:text-zinc-900",
+        link: "text-zinc-50 underline-offset-4 hover:underline dark:text-zinc-900",
       },
       size: {
         default: "h-10 px-5 py-2",
diff --git a/docs/src/layouts/DocsLayout.astro b/docs/src/layouts/DocsLayout.astro
index f9f6e55..84cee54 100644
--- a/docs/src/layouts/DocsLayout.astro
+++ b/docs/src/layouts/DocsLayout.astro
@@ -29,7 +29,7 @@ flattenedDocs.sort((a, b) => a.frontmatter.order - b.frontmatter.order);
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <title>{props.frontmatter.title}</title>
@@ -75,7 +75,7 @@ flattenedDocs.sort((a, b) => a.frontmatter.order - b.frontmatter.order);
                 className={cn(
                   `w-full rounded-lg px-4 py-2 cursor-pointer justify-start`,
                   {
-                    "bg-transparent text-zinc-400 hover:bg-zinc-800":
+                    "dark:bg-transparent dark:text-zinc-400 dark:hover:bg-zinc-800":
                       props.frontmatter.title !== doc.frontmatter.title,
                   }
                 )}
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
index 058c08c..bf3f793 100644
--- a/docs/src/layouts/Layout.astro
+++ b/docs/src/layouts/Layout.astro
@@ -14,7 +14,7 @@ const measurementId = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <title>{title}</title>
diff --git a/docs/tailwind.config.mjs b/docs/tailwind.config.mjs
index ac63cf9..c7ee847 100644
--- a/docs/tailwind.config.mjs
+++ b/docs/tailwind.config.mjs
@@ -2,7 +2,7 @@ import defaultTheme from "tailwindcss/defaultTheme";
 /** @type {import('tailwindcss').Config} */
 
 export default {
-  darkMode: ["class"],
+  darkMode: 'selector',
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   prefix: "",
   theme: {

From b9ad2842503cdbaf0b8ba24ace4db31baf77a7e7 Mon Sep 17 00:00:00 2001
From: xandemon <dev01.sandesh@gmail.com>
Date: Thu, 5 Dec 2024 21:50:10 +0545
Subject: [PATCH 3/3] docs: :zap: improvement: action feedback in icons card

---
 docs/src/components/iconsList.tsx     |  13 ++-
 docs/src/components/ui/iconCard.tsx   | 142 +++++++++++++++++++++++---
 docs/src/layouts/Layout.astro         |  11 +-
 docs/src/pages/icons/[category].astro |   2 +-
 4 files changed, 141 insertions(+), 27 deletions(-)

diff --git a/docs/src/components/iconsList.tsx b/docs/src/components/iconsList.tsx
index 2dbd677..7ce011a 100644
--- a/docs/src/components/iconsList.tsx
+++ b/docs/src/components/iconsList.tsx
@@ -3,6 +3,7 @@ import { SearchIcon, X } from "lucide-react";
 import type { IconDataType } from "../../../lib/iconsData";
 import { IconCard } from "./ui/iconCard";
 import { useDebounce } from "@/lib/hooks";
+import { TooltipProvider } from "./ui/tooltip";
 
 export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => {
   const [searchQuery, setSearchQuery] = useState("");
@@ -43,11 +44,13 @@ export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => {
           )}
         </div>
       </div>
-      <div className="grid grid-cols-auto-fit gap-4 pr-1">
-        {filteredIcons.map((icon, index) => (
-          <IconCard key={index} icon={icon} />
-        ))}
-      </div>
+      <TooltipProvider>
+        <div className="grid grid-cols-auto-fit gap-4 pr-1">
+          {filteredIcons.map((icon, index) => (
+            <IconCard key={index} icon={icon} />
+          ))}
+        </div>
+      </TooltipProvider>
     </section>
   );
 };
diff --git a/docs/src/components/ui/iconCard.tsx b/docs/src/components/ui/iconCard.tsx
index 7a34e0a..0260a51 100644
--- a/docs/src/components/ui/iconCard.tsx
+++ b/docs/src/components/ui/iconCard.tsx
@@ -1,15 +1,21 @@
 import DI from "developer-icons";
-import { useState } from "react";
+import React, { useEffect, useState, type ReactNode } from "react";
 import { Copy, Copyright, Download } from "lucide-react";
 import type { IconDataType } from "../../../../lib/iconsData";
 import { generateIconCompName } from "../../../../lib/utils";
 import { Badge } from "./badge";
 import { Loader } from "./loader";
-import { downloader } from "@/lib/utils";
+import { cn, downloader } from "@/lib/utils";
 import { publicBaseUrl } from "@/config";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+type ActiveTooltipType = "copy" | "download" | "source" | undefined;
 
 export const IconCard = ({ icon }: { icon: IconDataType }) => {
   const [downloadLoading, setDownloadLoading] = useState(false);
+  const [showCopied, setShowCopied] = useState(false);
+  const [activeTooltip, setActiveTooltip] = useState<ActiveTooltipType>();
 
   const DynamicIcon = DI[generateIconCompName(icon.name)];
 
@@ -32,9 +38,26 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
     setDownloadLoading(false);
   };
 
+  useEffect(() => {
+    let copyTimeout: NodeJS.Timeout;
+    if (showCopied) {
+      copyTimeout = setTimeout(() => setShowCopied(false), 2000);
+      return () => copyTimeout && clearTimeout(copyTimeout);
+    }
+  }, [showCopied]);
+
+  useEffect(() => {
+    if (showCopied) {
+      !!activeTooltip && setShowCopied(false);
+    }
+  }, [activeTooltip, showCopied]);
+
   return (
-    <div className="w-full h-44 border border-zinc-800 rounded-xl flex flex-col items-center justify-center gap-2">
-      <DynamicIcon size={50} />
+    <div className="w-full h-44 border border-zinc-800 rounded-xl flex flex-col items-center justify-center gap-2 from-zinc-950/25 to-zinc-950/50 hover:bg-gradient-to-br group">
+      <DynamicIcon
+        size={50}
+        className="group-hover:drop-shadow-[0_4px_4px_rgba(256,256,256,0.1)]"
+      />
       <p className="font-semibold">{icon.name}</p>
       <div className="flex items-center gap-1 flex-wrap ">
         {icon.categories.map((category, index) => (
@@ -50,23 +73,108 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
           </a>
         ))}
       </div>
-      <div className="flex items-center justify-center gap-3 text-zinc-400">
-        <Copy
-          size={18}
-          className="hover:text-yellow-300 cursor-pointer"
-          onClick={() => copyComponent(icon.name)}
-        />
+      <div className="flex items-center justify-center gap-2 text-zinc-400">
+        <Popover
+          open={showCopied}
+          onOpenChange={(value) => setShowCopied(value)}
+        >
+          <ActionTooltip
+            trigger={
+              <PopoverTrigger asChild>
+                <span
+                  className="p-1 flex flex-center cursor-pointer hover:text-yellow-300"
+                  onClick={() => copyComponent(icon.name)}
+                >
+                  <Copy size={18} />
+                </span>
+              </PopoverTrigger>
+            }
+            content={"Copy Component"}
+            action={"copy"}
+            activeTooltip={activeTooltip}
+            setActiveTooltip={setActiveTooltip}
+          />
+          <PopoverContent className="max-w-fit rounded-full py-2 text-sm opacity-70">
+            <span className="flex items-center gap-1 w-full">
+              Copied{" "}
+              <strong className="text-sky-300">{`<${generateIconCompName(
+                icon.name
+              )} />`}</strong>
+              🎉
+            </span>
+          </PopoverContent>
+        </Popover>
         <Loader loading={downloadLoading} className="w-[18px] h-[18px]">
-          <Download
-            size={18}
-            className="hover:text-blue-300 cursor-pointer"
-            onClick={() => downloadIcon(icon.path)}
+          <ActionTooltip
+            trigger={
+              <span
+                className="p-1 flex flex-center cursor-pointer hover:text-blue-300"
+                onClick={() => downloadIcon(icon.name)}
+              >
+                <Download size={18} />
+              </span>
+            }
+            content={"Download SVG"}
+            action={"download"}
+            activeTooltip={activeTooltip}
+            setActiveTooltip={setActiveTooltip}
           />
         </Loader>
-        <a href={icon.url} target="_blank" rel="noreferrer">
-          <Copyright size={18} className="hover:text-rose-300 cursor-pointer" />
-        </a>
+        <ActionTooltip
+          trigger={
+            <a
+              href={icon.url}
+              target="_blank"
+              rel="noreferrer"
+              className={cn(
+                "p-1 flex flex-center cursor-pointer hover:text-rose-300",
+                { "pointer-events-none": showCopied }
+              )}
+            >
+              <Copyright size={18} />
+            </a>
+          }
+          content={"Visit Source"}
+          action={"source"}
+          activeTooltip={activeTooltip}
+          setActiveTooltip={setActiveTooltip}
+        />
       </div>
     </div>
   );
 };
+
+const ActionTooltip = ({
+  trigger,
+  content,
+  action,
+  activeTooltip,
+  setActiveTooltip,
+}: {
+  trigger: ReactNode;
+  content: string | ReactNode;
+  action: ActiveTooltipType;
+  activeTooltip: ActiveTooltipType;
+  setActiveTooltip: React.Dispatch<React.SetStateAction<ActiveTooltipType>>;
+}) => {
+  const closeTooltip = () => setActiveTooltip(undefined);
+
+  return (
+    <Tooltip open={activeTooltip === action}>
+      <TooltipTrigger
+        asChild
+        onClick={closeTooltip}
+        onMouseEnter={() => setActiveTooltip(action)}
+        onMouseLeave={closeTooltip}
+      >
+        {trigger}
+      </TooltipTrigger>
+      <TooltipContent
+        side="bottom"
+        className="max-w-fit rounded-full py-2 px-5 text-sm opacity-75"
+      >
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
index bf3f793..6d20ba6 100644
--- a/docs/src/layouts/Layout.astro
+++ b/docs/src/layouts/Layout.astro
@@ -4,6 +4,7 @@ import Navbar from "@/components/Navbar.astro";
 import { publicBaseUrl } from "@/config";
 import "@fontsource-variable/noto-sans";
 import "../styles/globals.css";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 interface Props {
   title: string;
@@ -46,9 +47,11 @@ const measurementId = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;
     </script>
   </head>
   <body class="text-zinc-300 bg-zinc-900">
-    <Navbar />
-    <Container className="items-start h-[calc(100vh-60px)]">
-      <slot />
-    </Container>
+    <TooltipProvider delayDuration={100}>
+      <Navbar />
+      <Container className="items-start h-[calc(100vh-60px)]">
+        <slot />
+      </Container>
+    </TooltipProvider>
   </body>
 </html>
diff --git a/docs/src/pages/icons/[category].astro b/docs/src/pages/icons/[category].astro
index 2c5574c..36db39d 100644
--- a/docs/src/pages/icons/[category].astro
+++ b/docs/src/pages/icons/[category].astro
@@ -46,7 +46,7 @@ const filteredIconsData =
               className={cn(
                 `w-full rounded-lg px-4 py-2 cursor-pointer justify-start`,
                 {
-                  "bg-transparent text-zinc-400 hover:bg-zinc-800":
+                  "dark:bg-transparent dark:text-zinc-400 dark:hover:bg-zinc-800":
                     item
                       .replace("DevOps & AI/ML", "DevOps")
                       .replaceAll(" ", "-") !== category,