@trops/dash-core 0.1.571 → 0.1.573

package/dist/index.esm.js

@@ -35284,24 +35284,20 @@ var ColorTile = function ColorTile(_ref) {
     level: colorLevelName
   }, rest));
 
-  // console.log("Color Model Tile ", c);
-
-  // const stringColor = colorFromTheme === null ? `bg-${colorName}${shade !== null ? `-${shade}` : ''}` : colorFromTheme;
-  // const parts = colorFromTheme !== null ? colorFromTheme.split('-') : null;
-
-  // const derivedShade = parts !== null ? parts[parts.length -1] : null;
-  // const derivedColorName = parts !== null ? parts[parts.length - 2] : null;
-
-  // const stringThemeColorName = '';
-  // const objToSend = {
-  //     colorName: colorName !== null ? colorName : colorFromTheme !== null && derivedColorName,
-  //     shade: shade !== null ? shade : colorFromTheme !== null && derivedShade,
-  //     stringColor,
-  //     ...rest
-  // };
-
+  // If the channel value is a hex (custom-color theme — PRD
+  // arbitrary-color-themes.md), `c.class` becomes `bg-#xxx-500`
+  // which isn't a valid Tailwind class and renders as nothing
+  // (the dark page background bleeds through, looking black).
+  // Use inline style for hex backgrounds; named colors continue
+  // through the className path so existing themes are unchanged.
+  var colorIsHex = isHexColor(colorName);
+  var inlineStyle = colorIsHex ? {
+    backgroundColor: colorName
+  } : undefined;
+  var bgClass = colorIsHex ? "" : c["class"];
   return /*#__PURE__*/jsx("div", {
-    className: "flex flex-col rounded-lg cursor-pointer items-center justify-center border-2 text-xs ".concat(selected === true ? "border-yellow-500" : "border-gray-800", " hover:border-yellow-500 border-gray-800 ").concat(c["class"], " ").concat(width, " ").concat(height),
+    className: "flex flex-col rounded-lg cursor-pointer items-center justify-center border-2 text-xs ".concat(selected === true ? "border-yellow-500" : "border-gray-800", " hover:border-yellow-500 border-gray-800 ").concat(bgClass, " ").concat(width, " ").concat(height),
+    style: inlineStyle,
     onClick: function onClick() {
       return _onClick !== null ? _onClick(_objectSpread$F(_objectSpread$F({}, c), rest)) : null;
     },
@@ -36933,13 +36929,26 @@ var CustomHexColorPane = function CustomHexColorPane(_ref) {
 var CategorizedColorGrid = function CategorizedColorGrid(_ref) {
   var onSelect = _ref.onSelect,
     _ref$selectedHex = _ref.selectedHex,
-    selectedHex = _ref$selectedHex === void 0 ? null : _ref$selectedHex;
+    selectedHex = _ref$selectedHex === void 0 ? null : _ref$selectedHex,
+    _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 6 : _ref$cols;
   var families = getColorFamilies();
   var _useState = useState(families[0]),
     _useState2 = _slicedToArray(_useState, 2),
     activeFamily = _useState2[0],
     setActiveFamily = _useState2[1];
   var colors = getCuratedColorGrid(activeFamily);
+
+  // Map the `cols` prop to a Tailwind class. The pattern set is in
+  // the dash-electron safelist already (grid-cols-1..12).
+  var gridColsClass = {
+    4: "grid-cols-4",
+    6: "grid-cols-6",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    12: "grid-cols-12"
+  }[cols] || "grid-cols-6";
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-col gap-3 p-3",
     children: [/*#__PURE__*/jsx("div", {
@@ -36956,7 +36965,7 @@ var CategorizedColorGrid = function CategorizedColorGrid(_ref) {
         }, family);
       })
     }), /*#__PURE__*/jsx("div", {
-      className: "grid grid-cols-6 gap-1",
+      className: "grid ".concat(gridColsClass, " gap-1"),
       children: colors.map(function (hex) {
         var isSelected = selectedHex && hex.toLowerCase() === selectedHex.toLowerCase();
         return /*#__PURE__*/jsx("button", {
@@ -37036,24 +37045,33 @@ var AvailableColorsGridPane = function AvailableColorsGridPane(_ref) {
       });
     });
   }
-  return (
-    /*#__PURE__*/
-    // <LayoutContainer
-    //     direction="col"
-    //     scrollable={false}
-    //     className="space-y-1"
-    //     height={"h-full"}
-    // >
-    jsxs(DashPanel, {
+
+  // The picker renders inside a modal so it has room for the full
+  // categorized grid without the user having to scroll within a
+  // cramped left-column. Mount/unmount of this component is driven
+  // by the parent (ThemeMenuPane) based on `selectedColor` state —
+  // so `isOpen` is effectively always `true` while mounted, and
+  // closing the modal triggers `onCancel` to unmount.
+  var isMain = shade !== null;
+  var title = isMain ? "Pick ".concat(capitalizeFirstLetter(colorType || "color"), " color") : "Available Colors";
+  return /*#__PURE__*/jsx(Modal, {
+    isOpen: true,
+    setIsOpen: function setIsOpen() {
+      return handleCancel();
+    },
+    width: "w-3/4",
+    height: "h-3/4",
+    children: /*#__PURE__*/jsxs(DashPanel, {
       height: "h-full",
       scrollable: true,
       children: [/*#__PURE__*/jsx(DashPanel.Header, {
-        title: "AvailableColors"
+        title: title
       }), /*#__PURE__*/jsx(DashPanel.Body, {
         scrollable: true,
         space: true,
-        children: shade !== null ? /*#__PURE__*/jsxs(Fragment, {
+        children: isMain ? /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(CategorizedColorGrid, {
+            cols: 12,
             onSelect: function onSelect(hex) {
               return handleChooseColor({
                 colorName: hex,
@@ -37085,8 +37103,7 @@ var AvailableColorsGridPane = function AvailableColorsGridPane(_ref) {
         })
       })]
     })
-    // </LayoutContainer>
-  );
+  });
 };
 
 var ThemeMenuPane = function ThemeMenuPane(_ref) {