@trops/dash-core 0.1.578 → 0.1.580

package/dist/index.js

@@ -34899,7 +34899,7 @@ var CustomHexColorPane = function CustomHexColorPane(_ref) {
     }
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-2 p-3 border-t border-gray-700",
+    className: "flex flex-col gap-2 py-3 border-t border-gray-700",
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
       className: "text-xs uppercase font-bold tracking-wider text-gray-400",
       children: label
@@ -37601,16 +37601,17 @@ var PresetGallery = function PresetGallery(_ref3) {
 /**
  * Render a swatch for a generated palette channel. Hex values render
  * inline; named Tailwind families fall back to `bg-{name}-500` which
- * is in the safelist.
+ * is in the safelist. Height is set by the parent flex/grid so the
+ * generated-palette row can grow to fill available space.
  */
 var PaletteSwatch = function PaletteSwatch(_ref4) {
   var value = _ref4.value,
     label = _ref4.label;
   var isHex = DashReact.isHexColor(value);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col items-center gap-1 flex-1",
+    className: "flex flex-col items-center gap-1 flex-1 min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "h-10 w-full rounded ".concat(isHex ? "" : "bg-".concat(value, "-500")),
+      className: "flex-1 min-h-0 w-full rounded ".concat(isHex ? "" : "bg-".concat(value, "-500")),
       style: isHex ? {
         backgroundColor: value
       } : undefined
@@ -37637,9 +37638,9 @@ var InlineHexPicker = function InlineHexPicker(_ref5) {
     setActiveFamily = _useState2[1];
   var swatches = DashReact.getCuratedColorGrid(activeFamily);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-2",
+    className: "flex flex-col gap-2 flex-1 min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex flex-row gap-2 flex-wrap",
+      className: "flex flex-row gap-2 flex-wrap shrink-0",
       children: families.map(function (family) {
         var isActive = activeFamily === family;
         return /*#__PURE__*/jsxRuntime.jsx("button", {
@@ -37652,7 +37653,10 @@ var InlineHexPicker = function InlineHexPicker(_ref5) {
         }, family);
       })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "grid grid-cols-12 gap-1",
+      className: "grid grid-cols-12 gap-1 flex-1 min-h-0",
+      style: {
+        gridAutoRows: "1fr"
+      },
       children: swatches.map(function (hex) {
         var isSelected = selectedHex && hex.toLowerCase() === selectedHex.toLowerCase();
         return /*#__PURE__*/jsxRuntime.jsx("button", {
@@ -37663,14 +37667,17 @@ var InlineHexPicker = function InlineHexPicker(_ref5) {
           style: {
             backgroundColor: hex
           },
-          className: "h-6 rounded transition-transform hover:scale-110 ".concat(isSelected ? "border-2 border-yellow-400 scale-110" : ""),
+          className: "w-full h-full rounded transition-transform hover:scale-110 ".concat(isSelected ? "border-2 border-yellow-400 scale-110" : ""),
           "aria-label": "Pick ".concat(hex),
           title: hex
         }, hex);
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(CustomHexColorPane, {
-      onApply: onPick,
-      label: "Or paste a hex value"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "shrink-0",
+      children: /*#__PURE__*/jsxRuntime.jsx(CustomHexColorPane, {
+        onApply: onPick,
+        label: "Or paste a hex value"
+      })
     })]
   });
 };
@@ -37834,12 +37841,9 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref8) {
   }
   var previewTheme = buildTheme();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: inline ? "flex flex-col gap-4" : "flex flex-col gap-4 p-6 overflow-y-auto flex-1 min-h-0",
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-sm font-semibold opacity-50",
-      children: "Generate from Color"
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-2",
+    className: inline ? "flex flex-col gap-4 flex-1 min-h-0" : "flex flex-col gap-4 p-6 flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2 shrink-0",
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-xs opacity-50",
         children: "Harmony"
@@ -37859,11 +37863,11 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref8) {
         })
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+      className: "grid grid-cols-1 lg:grid-cols-2 gap-6 flex-1 min-h-0",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-2",
+        className: "flex flex-col gap-2 min-h-0",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs opacity-50",
+          className: "text-xs opacity-50 shrink-0",
           children: "Base Color"
         }), /*#__PURE__*/jsxRuntime.jsx(InlineHexPicker, {
           selectedHex: DashReact.isHexColor(selectedColor) ? selectedColor : null,
@@ -37871,41 +37875,38 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref8) {
             return setSelectedColor(hex);
           }
         })]
+      }), /*#__PURE__*/jsxRuntime.jsx(HslNudgePanel, {
+        dH: dH,
+        dS: dS,
+        dL: dL,
+        onChange: function onChange(_ref9) {
+          var h = _ref9.dH,
+            s = _ref9.dS,
+            l = _ref9.dL;
+          setDH(h);
+          setDS(s);
+          setDL(l);
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2 shrink-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-50",
+        children: "Generated Palette"
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-4",
-        children: [/*#__PURE__*/jsxRuntime.jsx(HslNudgePanel, {
-          dH: dH,
-          dS: dS,
-          dL: dL,
-          onChange: function onChange(_ref9) {
-            var h = _ref9.dH,
-              s = _ref9.dS,
-              l = _ref9.dL;
-            setDH(h);
-            setDS(s);
-            setDL(l);
-          }
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-xs opacity-50",
-            children: "Generated Palette"
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-row gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-              value: previewTheme.primary,
-              label: "Primary"
-            }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-              value: previewTheme.secondary,
-              label: "Secondary"
-            }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-              value: previewTheme.tertiary,
-              label: "Tertiary"
-            }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-              value: previewTheme.neutral,
-              label: "Neutral"
-            })]
-          })]
+        className: "flex flex-row gap-2 h-20",
+        children: [/*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.primary,
+          label: "Primary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.secondary,
+          label: "Secondary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.tertiary,
+          label: "Tertiary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.neutral,
+          label: "Neutral"
         })]
       })]
     }), !inline && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
@@ -38076,13 +38077,10 @@ var RandomPreview = function RandomPreview(_ref1) {
     setSeed(generateRandomHexTheme());
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-4",
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-sm font-semibold opacity-50",
-      children: "Random Theme"
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-      children: [/*#__PURE__*/jsxRuntime.jsx(HslNudgePanel, {
+    className: "flex flex-col gap-4 flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-1 min-h-0",
+      children: /*#__PURE__*/jsxRuntime.jsx(HslNudgePanel, {
         dH: dH,
         dS: dS,
         dL: dL,
@@ -38094,26 +38092,26 @@ var RandomPreview = function RandomPreview(_ref1) {
           setDS(s);
           setDL(l);
         }
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs opacity-50",
-          children: "Generated Palette"
-        }), previewTheme && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-row gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-            value: previewTheme.primary,
-            label: "Primary"
-          }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-            value: previewTheme.secondary,
-            label: "Secondary"
-          }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-            value: previewTheme.tertiary,
-            label: "Tertiary"
-          }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
-            value: previewTheme.neutral,
-            label: "Neutral"
-          })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2 shrink-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-50",
+        children: "Generated Palette"
+      }), previewTheme && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2 h-20",
+        children: [/*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.primary,
+          label: "Primary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.secondary,
+          label: "Secondary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.tertiary,
+          label: "Tertiary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.neutral,
+          label: "Neutral"
         })]
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
@@ -38153,19 +38151,13 @@ var ThemeQuickCreate = function ThemeQuickCreate(_ref11) {
     setWizardTheme(null);
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-6 p-6 overflow-y-auto flex-1 min-h-0",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-sm font-semibold opacity-50",
-        children: "Name Your Theme"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-        value: wizardName,
-        onChange: function onChange(val) {
-          return setWizardName(val);
-        },
-        placeholder: "Theme name..."
-      })]
+    className: "flex flex-col gap-4 p-6 flex-1 min-h-0 overflow-hidden",
+    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+      value: wizardName,
+      onChange: function onChange(val) {
+        return setWizardName(val);
+      },
+      placeholder: "Theme name..."
     }), showMethodPicker && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {