@invana/ui 0.0.4 → 0.0.5

package/dist/index.cjs

@@ -2983,6 +2983,124 @@ function PanelContent({
     footerContent ? /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: footerClassName, children: footerContent }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
   ] }) });
 }
+function OptionRow({ option }) {
+  const Icon = option.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+      Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16, className: "shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label }),
+      option.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-2", children: option.badge })
+    ] }),
+    option.description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+  ] });
+}
+function RichSelect({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  label,
+  placeholder,
+  renderOption,
+  renderValue,
+  align = "start",
+  tooltip,
+  tooltipSide = "top",
+  disabled,
+  triggerClassName,
+  contentClassName,
+  className
+}) {
+  const selectedValues = Array.isArray(value) ? value : value ? [value] : [];
+  const selectedOptions = selectedValues.map((v) => options.find((o) => o.value === v)).filter((o) => o != null);
+  const toggle = (optionValue) => {
+    const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
+    onChange(next);
+  };
+  const triggerLabel = (() => {
+    if (renderValue) return renderValue(selectedOptions);
+    if (selectedOptions.length === 0) {
+      return placeholder ?? label ?? "Select\u2026";
+    }
+    if (selectedOptions.length === 1) {
+      const only = selectedOptions[0];
+      const Icon = only.icon;
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16, className: "shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: only.label })
+      ] });
+    }
+    return `${label ?? "Selected"}: ${selectedOptions.length}`;
+  })();
+  const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      disabled,
+      className: cn(
+        "ring-offset-background justify-between gap-2",
+        triggerClassName,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 items-center gap-2", children: triggerLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 opacity-60" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    tooltip != null ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { delayDuration: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: trigger }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: tooltipSide, children: tooltip })
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuContent,
+      {
+        align,
+        className: cn("min-w-[14rem] bg-popover", contentClassName),
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
+          ] }),
+          multiple ? options.map((option) => {
+            const selected = selectedValues.includes(option.value);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuCheckboxItem,
+              {
+                checked: selected,
+                disabled: option.disabled,
+                onSelect: (e) => e.preventDefault(),
+                onCheckedChange: () => toggle(option.value),
+                children: renderOption ? renderOption(option, { selected }) : /* @__PURE__ */ jsxRuntime.jsx(OptionRow, { option })
+              },
+              option.value
+            );
+          }) : /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenuRadioGroup,
+            {
+              value: selectedValues[0],
+              onValueChange: (v) => onChange(v),
+              children: options.map((option) => {
+                const selected = selectedValues.includes(option.value);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownMenuRadioItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: renderOption ? renderOption(option, { selected }) : /* @__PURE__ */ jsxRuntime.jsx(OptionRow, { option })
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 function TabbedPanel({
   tabs,
   defaultTab,
@@ -3785,6 +3903,7 @@ exports.Progress = Progress;
 exports.ResizableHandle = ResizableHandle;
 exports.ResizablePanel = ResizablePanel;
 exports.ResizablePanelGroup = ResizablePanelGroup;
+exports.RichSelect = RichSelect;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
 exports.SearchInput = SearchInput;