@dynamic-labs-sdk/droplet 0.27.1 → 0.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs-sdk/droplet",
-  "version": "0.27.1",
+  "version": "0.27.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -23,6 +23,9 @@
     "dist",
     "src/styles"
   ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "@hugeicons/core-free-icons": "4.1.1",
     "@hugeicons/react": "1.1.6",
@@ -76,7 +79,13 @@
   "peerDependencies": {
     "next": ">=14",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "rm -rf dist && tsdown && pnpm exec tsc --emitDeclarationOnly -p ./tsconfig.lib.json",

package/src/styles/globals.css

@@ -227,6 +227,12 @@
   --shadow-field-hover: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.18), 0px 0px 1px 0px oklch(0.278 0.03 256.85 / 0.10);
   --shadow-elevated: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.10), 0px 5px 15px 0px oklch(0.278 0.03 256.85 / 0.08), 0px 15px 35px -5px oklch(0.278 0.03 256.85 / 0.20);
   --shadow-card-content: 0px 0px 2px 0px oklch(0.278 0.03 256.85 / 0.08), 0px 1px 2px 0px oklch(0.278 0.03 256.85 / 0.06);
+
+  /* ——— Component-specific overlays (themeable) ——— */
+  --selection-bg: oklch(0.574 0.207 257.4 / 0.15);
+  --checkbox-hover-fill: oklch(0.278 0.03 256.85 / 0.08);
+  --radio-hover-fill: oklch(0.278 0.03 256.85 / 0.12);
+  --button-highlight: oklch(1 0 0);
 }
 
 /* ═══════════════════════════════════════════════════════════
@@ -354,6 +360,12 @@
   --shadow-field-hover: 0 0 0 1px oklch(1 0 0 / 0.18), 0px 0px 1px 0px oklch(0 0 0 / 0.10);
   --shadow-elevated: 0 0 0 1px oklch(1 0 0 / 0.06), 0px 5px 15px 0px oklch(0 0 0 / 0.25), 0px 15px 35px -5px oklch(0 0 0 / 0.45);
   --shadow-card-content: 0px 0px 2px 0px oklch(0 0 0 / 0.08), 0px 1px 2px 0px oklch(0 0 0 / 0.06);
+
+  /* ——— Component-specific overlays (themeable) ——— */
+  --selection-bg: oklch(0.510 0.205 257 / 0.18);
+  --checkbox-hover-fill: oklch(1 0 0 / 0.10);
+  --radio-hover-fill: oklch(1 0 0 / 0.15);
+  --button-highlight: oklch(1 0 0);
 }
 
 @layer base {
@@ -384,7 +396,7 @@
   }
   /* Branded text selection */
   ::selection {
-    background-color: oklch(0.574 0.207 257.4 / 0.15);
+    background-color: var(--selection-bg);
     color: inherit;
   }
   /* Slashed zero + tabular nums for monospace contexts */
@@ -448,16 +460,12 @@
   position: absolute;
   inset: 2px;
   border-radius: 2px;
-  background: oklch(0.278 0.03 256.85 / 0.08);
+  background: var(--checkbox-hover-fill);
   opacity: 0;
   transition: opacity 150ms ease-out;
   pointer-events: none;
 }
 
-.dark [data-slot='checkbox'][data-state='unchecked']::before {
-  background: oklch(1 0 0 / 0.10);
-}
-
 [data-slot='checkbox'][data-state='unchecked']:not(:disabled):hover::before {
   opacity: 1;
 }
@@ -477,16 +485,12 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: oklch(0.278 0.03 256.85 / 0.12);
+  background: var(--radio-hover-fill);
   opacity: 0;
   transition: opacity 150ms ease-out;
   pointer-events: none;
 }
 
-.dark [data-slot='radio-group-item'][data-state='unchecked']::before {
-  background: oklch(1 0 0 / 0.15);
-}
-
 [data-slot='radio-group-item'][data-state='unchecked']:not(:disabled):hover::before {
   opacity: 1;
 }
@@ -524,7 +528,7 @@
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background: linear-gradient(180deg, oklch(1 0 0 / 1), oklch(1 0 0 / 0));
+  background: linear-gradient(180deg, var(--button-highlight), transparent);
   opacity: 0.1;
   transition: opacity 0.5s;
   pointer-events: none;