@invana/ui 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -2746,6 +2746,75 @@ var MenuItem = ({
     )
   ] });
 };
+var NavItems = ({
+  items,
+  orientation = "horizontal",
+  tooltipSide = orientation === "vertical" ? "right" : "bottom",
+  iconClassName = orientation === "vertical" ? "w-5 h-5" : "w-4 h-4 flex-shrink-0"
+}) => {
+  const isVertical = orientation === "vertical";
+  const [activeItem, setActiveItem] = React23__namespace.default.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => {
+    const isActive = activeItem === item.name;
+    const padding = item.label ? "px-3 py-1.5" : "px-2 py-2";
+    const itemClass = `inline-flex border-0 items-center justify-center gap-2
+          whitespace-nowrap rounded-md cursor-pointer transition-colors
+          ring-1 ring-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+          ${padding}
+          hover:bg-primary/10 hover:text-primary hover:ring-primary/25
+          ${isActive ? `bg-primary/15 text-primary ring-primary/25 ${item.activeClass || ""}` : ""}
+          ${item.className || ""}`;
+    const icon = /* @__PURE__ */ jsxRuntime.jsx(
+      item.icon,
+      {
+        strokeWidth: item.iconStroke || 2,
+        className: item.iconClassName || iconClassName
+      }
+    );
+    const label = item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label });
+    return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: item.href,
+            onClick: () => setActiveItem(item.name),
+            className: itemClass,
+            children: [
+              icon,
+              label
+            ]
+          }
+        ) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              item.onClick?.();
+              setActiveItem(isActive ? null : item.name);
+            },
+            className: itemClass,
+            children: [
+              icon,
+              label
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemClass, children: [
+          icon,
+          label
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: item.tooltipSide || tooltipSide, children: item.tooltip || item.name })
+      ] }),
+      item.showSeperator && /* @__PURE__ */ jsxRuntime.jsx(
+        Separator,
+        {
+          orientation: isVertical ? "horizontal" : "vertical",
+          className: isVertical ? "" : "h-4"
+        }
+      )
+    ] }, item.key || item.name);
+  }) });
+};
 var NavBase = ({ className = "", orientation, sections }) => {
   const isVertical = orientation === "vertical";
   const containerClass = isVertical ? `flex flex-col items-center h-full ${className}` : `flex items-center   w-full ${className}`;
@@ -2759,75 +2828,7 @@ var NavBase = ({ className = "", orientation, sections }) => {
     sections.end?.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${sectionWrapperClass} ${isVertical ? "" : "ml-auto"} ${sections.end.className || ""}`, children: sections.end.content })
   ] });
 };
-var NavHorizontalItems = ({ items }) => {
-  const [activeItem, setActiveItem] = React23__namespace.default.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
-        {
-          href: item.href,
-          onClick: () => setActiveItem(item.name),
-          className: `flex border-0 items-center justify-center gap-2
-                    transition-colors rounded-md h-full whitespace-nowrap
-                    hover:bg-muted hover:text-foreground ${item.label ? "px-3" : "px-2"} ${item.className || ""}
-                    ${activeItem === item.name ? "bg-primary/15 text-primary ring-1 ring-primary/25" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          size: item.label ? "sm" : "icon",
-          variant: "ghost",
-          onClick: () => {
-            if (item.onClick) item.onClick();
-            setActiveItem(item.name === activeItem ? null : item.name);
-          },
-          className: `h-full gap-2 whitespace-nowrap ${item.label ? "w-auto px-3" : ""} ${item.className || ""}
-                    ${activeItem === item.name ? ` ${item?.activeClass || ""}` : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `flex border-0 items-center justify-center gap-2 h-full whitespace-nowrap
-                    transition-colors rounded-md  ${item.label ? "px-3" : "px-2"} ${item.className || ""}
-                    ${activeItem === item.name ? "bg-primary/15 text-primary ring-1 ring-primary/25" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: item.tooltipSide || "bottom", children: item.tooltip || item.name })
-    ] }),
-    item.showSeperator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" })
-  ] }, item.key || item.name)) });
-};
+var NavHorizontalItems = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { items, orientation: "horizontal" });
 var NavHorizontal = ({
   left,
   leftNavItems,
@@ -2866,48 +2867,7 @@ var NavHorizontal = ({
     }
   );
 };
-var NavVerticalItems = ({ items }) => {
-  const [activeItem, setActiveItem] = React23__namespace.default.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: item.href,
-          onClick: () => setActiveItem(item.name),
-          className: ` flex border-0 items-center justify-center 
-              transition-colors rounded-md
-              hover:text-primary/80 px-2 py-2 ${item.className || ""}
-              ${activeItem === item.name ? "bg-accent text-accent-foreground" : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          size: "nav-icon",
-          variant: "ghost",
-          onClick: () => {
-            if (item.onClick) item.onClick();
-            setActiveItem(item.name === activeItem ? null : item.name);
-          },
-          className: `${item.className || ""}
-          ${activeItem === item.name ? ` ${item?.activeClass || ""}` : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: ` flex border-0  items-center justify-center 
-          transition-colors  rounded-md  px-2 py-2 ${item.className || ""}
-          ${activeItem === item.name ? "bg-accent text-accent-foreground" : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: item.tooltipSide ? item.tooltipSide : "right", children: item.tooltip || item.name })
-    ] }, item.name),
-    item.showSeperator && /* @__PURE__ */ jsxRuntime.jsx(Separator, {})
-  ] }, item.name)) });
-};
+var NavVerticalItems = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { items, orientation: "vertical" });
 var NavVertical = ({
   className = "",
   top,
@@ -2983,6 +2943,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,
@@ -3759,6 +3837,7 @@ exports.MenubarTrigger = MenubarTrigger;
 exports.NavBase = NavBase;
 exports.NavHorizontal = NavHorizontal;
 exports.NavHorizontalItems = NavHorizontalItems;
+exports.NavItems = NavItems;
 exports.NavVertical = NavVertical;
 exports.NavVerticalItems = NavVerticalItems;
 exports.NavigationMenu = NavigationMenu;
@@ -3785,6 +3864,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;