@andreagiugni/tailwind-dashboard-ui 0.5.9 → 0.5.10

package/README.md

@@ -168,7 +168,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `Avatar` | `src`, `alt`, `size` (xsmall…xxlarge), `status` (online/offline/busy/none), `statusColor?`, (+native img) |
 | `AvatarText` | `children`, `className`, (+native div) |
 | `Dropdown` | `isOpen`, `onClose`, `children`, (+native div) |
-| `DropdownItem` | `variant` (default/primary/outline, like Button), `bgColor`/`textColor`/`borderColor` overrides, `tag` (a/button), `href`, `onClick`, `onItemClick`, `baseClassName` (full override) |
+| `DropdownItem` | `variant` (default/primary/outline, like Button), `icon?`, `bgColor`/`textColor`/`borderColor` overrides, `tag` (a/button), `href`, `onClick`, `onItemClick`, `baseClassName` (full override) |
 | `Modal` | `isOpen`, `onClose`, `showCloseButton`, `isFullscreen`, `closeOnBackdrop?`, `closeOnEsc?`; **alert preset** → `variant` (`success`/`info`/`warning`/`danger`) + `title`, `description`, `actionText?`, `onAction?`; (+native div) |
 | `Table` (composable) | `TableHeader` / `TableBody` / `TableRow` / `TableCell` with `children`, `isHeader` (cell), (+native table elements; `onClick` / `onDoubleClick` on rows & cells) |
 | `Table` (data-driven) | pass `data` + `columns` (`key`, `header`, `sortable?`, `align?`, `render?`, `className?`) to get search + per-column sort + pagination: `rowsPerPage?` (max rows/page, default 10), `rowsPerPageOptions?`, `searchKeys?` (**search box shown only when provided**), `searchPlaceholder?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `paginationAlign?` (`left`/`center`/`right`/`full`, default `right`), `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
@@ -200,7 +200,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 |---|---|
 | `Input` | `type`, `value` / `defaultValue`, `onChange`, `success`, `error`, `hint`, `disabled`, (+native input) (+override) |
 | `Label` | `htmlFor`, `children`, (+native label) |
-| `Select` | `options`, `placeholder`, `defaultValue`, `onChange(value)`, `disabled` |
+| `Select` | `options` (`{ value, label, icon? }[]`), `placeholder`, `defaultValue`, `onChange(value)`, `disabled` |
 | `MultiSelect` | `options`, `selected` / `defaultSelected`, `onChange`, `placeholder`, `disabled` |
 | `Checkbox` | `label`, `checked`, `onChange(checked)`, `disabled`, `checkedColor?` |
 | `Radio` / `RadioSm` | `id`, `name`, `value`, `checked`, `label`, `onChange(value)`, `disabled` |

package/dist/index.cjs

@@ -462,6 +462,7 @@ var DropdownItem = ({
   onItemClick,
   variant = "default",
   baseClassName,
+  icon,
   className,
   bgColor,
   textColor,
@@ -477,10 +478,21 @@ var DropdownItem = ({
     if (onClick) onClick();
     if (onItemClick) onItemClick();
   };
+  const content = icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children })
+  ] }) : children;
   if (tag === "a" && href) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: combinedClasses, style, onClick: handleClick, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: combinedClasses, style, onClick: handleClick, children: content });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClick, className: combinedClasses, style, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClick, className: combinedClasses, style, children: content });
 };
 var Dropzone = ({
   onDrop,
@@ -2549,7 +2561,7 @@ var Select = ({
     onChange(value);
     setIsOpen(false);
   };
-  const selectedLabel = options.find((o) => o.value === selectedValue)?.label;
+  const selectedOption = options.find((option) => option.value === selectedValue);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: chunkYERNSNT4_cjs.cn("relative w-full", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -2562,10 +2574,20 @@ var Select = ({
         className: chunkYERNSNT4_cjs.cn(
           "flex h-11 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-left text-sm shadow-theme-xs transition focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-800",
           disabled && "cursor-not-allowed opacity-50",
-          selectedLabel ? "text-gray-800 dark:text-white/90" : "text-gray-400 dark:text-gray-400"
+          selectedOption ? "text-gray-800 dark:text-white/90" : "text-gray-400 dark:text-gray-400"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selectedLabel ?? placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            selectedOption?.icon && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+                children: selectedOption.icon
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selectedOption?.label ?? placeholder })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -2614,7 +2636,17 @@ var Select = ({
                 isSelected ? "bg-brand-50 font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  option.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+                      children: option.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+                ] }),
                 isSelected && /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {