@trops/dash-core 0.1.215 → 0.1.217

package/dist/index.esm.js

@@ -5961,13 +5961,13 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
             className: "text-sm font-semibold text-gray-300 flex items-center gap-2",
             children: ["Dashboards (", filteredDashboards.length, " result", filteredDashboards.length !== 1 ? "s" : "", ")"]
           }), /*#__PURE__*/jsx("div", {
-            className: "grid grid-cols-2 lg:grid-cols-3 gap-3",
+            className: "grid grid-cols-3 gap-3",
             children: filteredDashboards.map(function (dash) {
               var isSelected = state.selectedDashboard && state.selectedDashboard.name === dash.name;
               var widgetCount = (dash.widgets || []).length;
-              var providerNames = (dash.providers || []).map(function (p) {
+              var providerTags = (dash.providers || []).map(function (p) {
                 return p.name || p.type;
-              }).join(", ");
+              }).filter(Boolean);
               return /*#__PURE__*/jsxs(Card2, {
                 hover: true,
                 selected: isSelected,
@@ -5978,27 +5978,40 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
                   return handleSelectDashboard(dash);
                 },
                 children: [/*#__PURE__*/jsxs("div", {
-                  className: "flex items-center gap-2",
-                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-                    icon: resolveIcon(dash.icon || "grid-2"),
-                    fixedWidth: true,
-                    className: "text-gray-400"
+                  className: "flex flex-col items-center text-center gap-2",
+                  children: [/*#__PURE__*/jsxs("div", {
+                    className: "relative",
+                    children: [/*#__PURE__*/jsx("span", {
+                      className: "text-2xl",
+                      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                        icon: resolveIcon(dash.icon || "grid-2"),
+                        fixedWidth: true,
+                        className: "text-gray-400"
+                      })
+                    }), isSelected && /*#__PURE__*/jsx(FontAwesomeIcon, {
+                      icon: "circle-check",
+                      className: "absolute -top-1 -right-3 text-blue-400 text-xs"
+                    })]
                   }), /*#__PURE__*/jsx("span", {
-                    className: "text-sm font-medium text-gray-200",
+                    className: "text-sm font-semibold text-gray-200",
                     children: dash.displayName || dash.name
-                  }), isSelected && /*#__PURE__*/jsx(FontAwesomeIcon, {
-                    icon: "circle-check",
-                    className: "ml-auto text-blue-400"
                   })]
                 }), dash.description && /*#__PURE__*/jsx("p", {
-                  className: "text-xs text-gray-400 mt-1 line-clamp-2",
+                  className: "text-xs text-gray-400 mt-2 line-clamp-2 text-center",
                   children: dash.description
                 }), /*#__PURE__*/jsxs("div", {
-                  className: "flex items-center gap-3 mt-2 text-xs text-gray-500",
+                  className: "flex items-center justify-between mt-3 pt-2 border-t border-gray-700/50",
                   children: [/*#__PURE__*/jsxs("span", {
+                    className: "text-xs text-gray-500",
                     children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
-                  }), providerNames && /*#__PURE__*/jsx("span", {
-                    children: providerNames
+                  }), providerTags.length > 0 && /*#__PURE__*/jsx("div", {
+                    className: "flex flex-wrap gap-1 justify-end",
+                    children: providerTags.slice(0, 3).map(function (tag) {
+                      return /*#__PURE__*/jsx("span", {
+                        className: "text-xs px-1.5 py-0.5 rounded bg-gray-800 text-gray-400",
+                        children: tag
+                      }, tag);
+                    })
                   })]
                 })]
               }, dash.name);
@@ -6012,45 +6025,42 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
               text: "".concat(state.selectedWidgets.length, " selected")
             })]
           }), /*#__PURE__*/jsx("div", {
-            className: "grid grid-cols-2 lg:grid-cols-3 gap-3",
+            className: "grid grid-cols-3 gap-3",
             children: filteredWidgets.map(function (widget) {
               var checked = isWidgetSelected(widget);
-              return /*#__PURE__*/jsx(Card2, {
+              return /*#__PURE__*/jsxs(Card2, {
                 hover: true,
                 selected: checked,
-                padding: "p-5",
+                padding: "p-4",
                 rounded: "rounded-lg",
-                className: "hover:shadow-lg",
+                className: "hover:shadow-lg flex flex-col",
                 onClick: function onClick() {
                   return handleToggleWidget(widget);
                 },
-                children: /*#__PURE__*/jsxs("div", {
-                  className: "flex items-start gap-2",
-                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "flex items-start justify-between gap-2",
+                  children: [/*#__PURE__*/jsxs("div", {
+                    className: "flex items-center gap-1.5",
+                    children: [widget.icon && /*#__PURE__*/jsx(FontAwesomeIcon, {
+                      icon: resolveIcon(widget.icon),
+                      fixedWidth: true,
+                      className: "text-gray-400 text-sm"
+                    }), /*#__PURE__*/jsx("span", {
+                      className: "text-sm font-medium text-gray-200 truncate",
+                      children: widget.name
+                    })]
+                  }), /*#__PURE__*/jsx(FontAwesomeIcon, {
                     icon: checked ? "square-check" : "square",
                     fixedWidth: true,
-                    className: checked ? "text-blue-400 mt-0.5" : "text-gray-500 mt-0.5"
-                  }), /*#__PURE__*/jsxs("div", {
-                    className: "flex flex-col gap-0.5 min-w-0",
-                    children: [/*#__PURE__*/jsxs("div", {
-                      className: "flex items-center gap-1.5",
-                      children: [widget.icon && /*#__PURE__*/jsx(FontAwesomeIcon, {
-                        icon: resolveIcon(widget.icon),
-                        fixedWidth: true,
-                        className: "text-gray-400 text-xs"
-                      }), /*#__PURE__*/jsx("span", {
-                        className: "text-sm font-medium text-gray-200 truncate",
-                        children: widget.name
-                      })]
-                    }), widget.description && /*#__PURE__*/jsx("p", {
-                      className: "text-xs text-gray-400 line-clamp-2",
-                      children: widget.description
-                    }), widget.packageDisplayName && /*#__PURE__*/jsx("span", {
-                      className: "text-xs text-gray-500",
-                      children: widget.packageDisplayName
-                    })]
+                    className: checked ? "text-blue-400 flex-shrink-0" : "text-gray-500 flex-shrink-0"
                   })]
-                })
+                }), widget.description && /*#__PURE__*/jsx("p", {
+                  className: "text-xs text-gray-400 line-clamp-2 mt-1.5 flex-1",
+                  children: widget.description
+                }), widget.packageDisplayName && /*#__PURE__*/jsx("span", {
+                  className: "text-xs text-gray-500 mt-2 pt-1.5 border-t border-gray-700/50 truncate",
+                  children: widget.packageDisplayName
+                })]
               }, widget.key);
             })
           })]