@invana/ui 0.0.4 → 0.0.6

package/dist/index.js

@@ -2706,6 +2706,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__default.useState(null);
+  return /* @__PURE__ */ jsx(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__ */ jsx(
+      item.icon,
+      {
+        strokeWidth: item.iconStroke || 2,
+        className: item.iconClassName || iconClassName
+      }
+    );
+    const label = item.label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label });
+    return /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: item.href,
+            onClick: () => setActiveItem(item.name),
+            className: itemClass,
+            children: [
+              icon,
+              label
+            ]
+          }
+        ) : item.onClick ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              item.onClick?.();
+              setActiveItem(isActive ? null : item.name);
+            },
+            className: itemClass,
+            children: [
+              icon,
+              label
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: itemClass, children: [
+          icon,
+          label
+        ] }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: item.tooltipSide || tooltipSide, children: item.tooltip || item.name })
+      ] }),
+      item.showSeperator && /* @__PURE__ */ 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}`;
@@ -2719,75 +2788,7 @@ var NavBase = ({ className = "", orientation, sections }) => {
     sections.end?.content && /* @__PURE__ */ jsx("div", { className: `${sectionWrapperClass} ${isVertical ? "" : "ml-auto"} ${sections.end.className || ""}`, children: sections.end.content })
   ] });
 };
-var NavHorizontalItems = ({ items }) => {
-  const [activeItem, setActiveItem] = React23__default.useState(null);
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ 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__ */ jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) : item.onClick ? /* @__PURE__ */ 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__ */ jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) : /* @__PURE__ */ 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__ */ jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { side: item.tooltipSide || "bottom", children: item.tooltip || item.name })
-    ] }),
-    item.showSeperator && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" })
-  ] }, item.key || item.name)) });
-};
+var NavHorizontalItems = ({ items }) => /* @__PURE__ */ jsx(NavItems, { items, orientation: "horizontal" });
 var NavHorizontal = ({
   left,
   leftNavItems,
@@ -2826,48 +2827,7 @@ var NavHorizontal = ({
     }
   );
 };
-var NavVerticalItems = ({ items }) => {
-  const [activeItem, setActiveItem] = React23__default.useState(null);
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ 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__ */ jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) : item.onClick ? /* @__PURE__ */ 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__ */ jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) : /* @__PURE__ */ 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__ */ jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { side: item.tooltipSide ? item.tooltipSide : "right", children: item.tooltip || item.name })
-    ] }, item.name),
-    item.showSeperator && /* @__PURE__ */ jsx(Separator, {})
-  ] }, item.name)) });
-};
+var NavVerticalItems = ({ items }) => /* @__PURE__ */ jsx(NavItems, { items, orientation: "vertical" });
 var NavVertical = ({
   className = "",
   top,
@@ -2943,6 +2903,124 @@ function PanelContent({
     footerContent ? /* @__PURE__ */ jsx(CardFooter, { className: footerClassName, children: footerContent }) : /* @__PURE__ */ jsx(Fragment, {})
   ] }) });
 }
+function OptionRow({ option }) {
+  const Icon = option.icon;
+  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { size: 16, className: "shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+      option.badge != null && /* @__PURE__ */ jsx("span", { className: "ml-auto pl-2", children: option.badge })
+    ] }),
+    option.description != null && /* @__PURE__ */ 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__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { size: 16, className: "shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: only.label })
+      ] });
+    }
+    return `${label ?? "Selected"}: ${selectedOptions.length}`;
+  })();
+  const trigger = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      disabled,
+      className: cn(
+        "ring-offset-background justify-between gap-2",
+        triggerClassName,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 items-center gap-2", children: triggerLabel }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-60" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    tooltip != null ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: tooltipSide, children: tooltip })
+    ] }) }) : /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align,
+        className: cn("min-w-[14rem] bg-popover", contentClassName),
+        children: [
+          label && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+          ] }),
+          multiple ? options.map((option) => {
+            const selected = selectedValues.includes(option.value);
+            return /* @__PURE__ */ jsx(
+              DropdownMenuCheckboxItem,
+              {
+                checked: selected,
+                disabled: option.disabled,
+                onSelect: (e) => e.preventDefault(),
+                onCheckedChange: () => toggle(option.value),
+                children: renderOption ? renderOption(option, { selected }) : /* @__PURE__ */ jsx(OptionRow, { option })
+              },
+              option.value
+            );
+          }) : /* @__PURE__ */ jsx(
+            DropdownMenuRadioGroup,
+            {
+              value: selectedValues[0],
+              onValueChange: (v) => onChange(v),
+              children: options.map((option) => {
+                const selected = selectedValues.includes(option.value);
+                return /* @__PURE__ */ jsx(
+                  DropdownMenuRadioItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: renderOption ? renderOption(option, { selected }) : /* @__PURE__ */ jsx(OptionRow, { option })
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 function TabbedPanel({
   tabs,
   defaultTab,
@@ -3603,6 +3681,6 @@ var Typography = {
   Pre: TypographyPre
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonWithTooltip, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWithHeader, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorBoundary, HoverCard, HoverCardContent, HoverCardTrigger, Item3 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavBase, NavHorizontal, NavHorizontalItems, NavVertical, NavVerticalItems, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NestedMenu, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PanelContent, Popover, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, TabbedPanel, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TreeItem, TreeView, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyH5, TypographyH6, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographyPre, TypographySmall, UnderDevelopment, badgeVariants, buttonGroupVariants, buttonVariants, cn, navigationMenuTriggerStyle, toggleVariants, useSidebar, useTour };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonWithTooltip, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWithHeader, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorBoundary, HoverCard, HoverCardContent, HoverCardTrigger, Item3 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavBase, NavHorizontal, NavHorizontalItems, NavItems, NavVertical, NavVerticalItems, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NestedMenu, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PanelContent, Popover, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichSelect, ScrollArea, ScrollBar, SearchInput, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, TabbedPanel, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TreeItem, TreeView, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyH5, TypographyH6, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographyPre, TypographySmall, UnderDevelopment, badgeVariants, buttonGroupVariants, buttonVariants, cn, navigationMenuTriggerStyle, toggleVariants, useSidebar, useTour };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map