@trops/dash-core 0.1.577 → 0.1.579

package/dist/index.js

@@ -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,35 +37863,38 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref8) {
         })
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-xs opacity-50",
-        children: "Base Color"
-      }), /*#__PURE__*/jsxRuntime.jsx(InlineHexPicker, {
-        selectedHex: DashReact.isHexColor(selectedColor) ? selectedColor : null,
-        onPick: function onPick(hex) {
-          return setSelectedColor(hex);
+      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 min-h-0",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs opacity-50 shrink-0",
+          children: "Base Color"
+        }), /*#__PURE__*/jsxRuntime.jsx(InlineHexPicker, {
+          selectedHex: DashReact.isHexColor(selectedColor) ? selectedColor : null,
+          onPick: function onPick(hex) {
+            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.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",
+      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-row gap-2",
+        className: "flex flex-row gap-2 h-20",
         children: [/*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
           value: previewTheme.primary,
           label: "Primary"
@@ -38070,29 +38077,29 @@ 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.jsx(HslNudgePanel, {
-      dH: dH,
-      dS: dS,
-      dL: dL,
-      onChange: function onChange(_ref10) {
-        var h = _ref10.dH,
-          s = _ref10.dS,
-          l = _ref10.dL;
-        setDH(h);
-        setDS(s);
-        setDL(l);
-      }
+    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,
+        onChange: function onChange(_ref10) {
+          var h = _ref10.dH,
+            s = _ref10.dS,
+            l = _ref10.dL;
+          setDH(h);
+          setDS(s);
+          setDL(l);
+        }
+      })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-2",
+      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",
+        className: "flex flex-row gap-2 h-20",
         children: [/*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
           value: previewTheme.primary,
           label: "Primary"
@@ -38144,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", {