@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/menubar/menubar.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../lib/utils";
+const MenubarMenu = MenubarPrimitive.Menu;
+const MenubarGroup = MenubarPrimitive.Group;
+const MenubarPortal = MenubarPrimitive.Portal;
+const MenubarSub = MenubarPrimitive.Sub;
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+const Menubar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Root,
+  {
+    className: cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+const MenubarTrigger = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Trigger,
+  {
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+const MenubarSubTrigger = forwardRef(({ children, className, inset, ...props }, ref) => /* @__PURE__ */ jsxs(
+  MenubarPrimitive.SubTrigger,
+  {
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+const MenubarSubContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.SubContent,
+  {
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+const MenubarContent = forwardRef(
+  ({ align = "start", alignOffset = -4, className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    MenubarPrimitive.Content,
+    {
+      align,
+      alignOffset,
+      className: cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      ref,
+      sideOffset,
+      ...props
+    }
+  ) })
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+const MenubarItem = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Item,
+  {
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+const MenubarCheckboxItem = forwardRef(({ checked, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  MenubarPrimitive.CheckboxItem,
+  {
+    checked,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+const MenubarRadioItem = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  MenubarPrimitive.RadioItem,
+  {
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+const MenubarLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Label,
+  {
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+const MenubarSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Separator,
+  {
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ref,
+    ...props
+  }
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+const MenubarShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+MenubarShortcut.displayName = "MenubarShortcut";
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+};

package/dist/components/model-selector/index.js

@@ -0,0 +1,6 @@
+import {
+  ModelSelector
+} from "./model-selector";
+export {
+  ModelSelector
+};

package/dist/components/model-selector/model-selector.js

@@ -0,0 +1,374 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { ArrowUpDown, Filter } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList
+} from "../command";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../dropdown-menu";
+import { Input } from "../input";
+function getProvider(modelId) {
+  const parts = modelId.split("/");
+  return parts[0] || "unknown";
+}
+function getAveragePrice(model) {
+  if (!model.pricing) return Number.POSITIVE_INFINITY;
+  const inputPrice = model.pricing.input ?? 0;
+  const outputPrice = model.pricing.output ?? inputPrice;
+  return (inputPrice + outputPrice) / 2;
+}
+function formatPrice(price) {
+  if (!price) return "N/A";
+  return `$${price.toFixed(2)}/1M`;
+}
+function getProviders(models) {
+  const { providers } = models.reduce(
+    (accumulator, model) => {
+      const provider = getProvider(model.id);
+      if (!accumulator.seen.has(provider)) {
+        accumulator.seen.add(provider);
+        accumulator.providers.push(provider);
+      }
+      return accumulator;
+    },
+    { providers: [], seen: /* @__PURE__ */ new Set() }
+  );
+  return providers.sort();
+}
+function applyProviderFilter(models, providerFilter) {
+  if (providerFilter === "all") return models;
+  return models.filter((model) => getProvider(model.id) === providerFilter);
+}
+function applySearchFilter(models, modelSearchQuery) {
+  if (!modelSearchQuery.trim()) return models;
+  const query = modelSearchQuery.toLowerCase();
+  return models.filter(
+    (model) => model.name.toLowerCase().includes(query) || model.id.toLowerCase().includes(query) || model.description?.toLowerCase().includes(query) || getProvider(model.id).toLowerCase().includes(query)
+  );
+}
+function sortModelsBy(models, sortBy) {
+  const sorted = [...models];
+  return sorted.sort((a, b) => {
+    switch (sortBy) {
+      case "name":
+        return a.name.localeCompare(b.name);
+      case "price-low":
+        return getAveragePrice(a) - getAveragePrice(b);
+      case "price-high":
+        return getAveragePrice(b) - getAveragePrice(a);
+      case "provider": {
+        const providerA = getProvider(a.id);
+        const providerB = getProvider(b.id);
+        if (providerA !== providerB) return providerA.localeCompare(providerB);
+        return a.name.localeCompare(b.name);
+      }
+      default:
+        return 0;
+    }
+  });
+}
+function promoteSelected(models, selectedModelId) {
+  const sorted = [...models];
+  const selectedIndex = sorted.findIndex(
+    (model) => model.id === selectedModelId
+  );
+  if (selectedIndex > 0) {
+    const [selected] = sorted.splice(selectedIndex, 1);
+    if (selected) sorted.unshift(selected);
+  }
+  return sorted;
+}
+function resetFilters(setModelSearchQuery, setProviderFilter, setSortBy) {
+  setModelSearchQuery("");
+  setProviderFilter("all");
+  setSortBy("name");
+}
+function handleModelSelect({
+  handleClose,
+  id,
+  onSelectModel,
+  selectionGuardReference
+}) {
+  if (selectionGuardReference.current === id) return;
+  selectionGuardReference.current = id;
+  onSelectModel(id);
+  setTimeout(() => {
+    if (selectionGuardReference.current === id)
+      selectionGuardReference.current = null;
+  }, 0);
+  handleClose(false);
+}
+function filterAndSortModels({
+  models,
+  modelSearchQuery,
+  providerFilter,
+  selectedModelId,
+  sortBy
+}) {
+  const filtered = applySearchFilter(
+    applyProviderFilter(models, providerFilter),
+    modelSearchQuery
+  );
+  return promoteSelected(sortModelsBy(filtered, sortBy), selectedModelId);
+}
+function useFilteredModels(options) {
+  const { models, modelSearchQuery, providerFilter, selectedModelId, sortBy } = options;
+  return useMemo(
+    () => filterAndSortModels({
+      models,
+      modelSearchQuery,
+      providerFilter,
+      selectedModelId,
+      sortBy
+    }),
+    [models, modelSearchQuery, sortBy, providerFilter, selectedModelId]
+  );
+}
+function useModelSelectorState({
+  models,
+  onOpenChange,
+  onSelectModel,
+  selectedModelId
+}) {
+  const [modelSearchQuery, setModelSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState("name");
+  const [providerFilter, setProviderFilter] = useState("all");
+  const selectionGuardReference = useRef(null);
+  const providers = useMemo(() => getProviders(models), [models]);
+  const filteredAndSortedModels = useFilteredModels({
+    models,
+    modelSearchQuery,
+    providerFilter,
+    selectedModelId,
+    sortBy
+  });
+  const handleClose = (nextOpen) => {
+    onOpenChange(nextOpen);
+    if (!nextOpen) {
+      resetFilters(setModelSearchQuery, setProviderFilter, setSortBy);
+    }
+  };
+  const handleSelect = (id) => {
+    handleModelSelect({
+      handleClose,
+      id,
+      onSelectModel,
+      selectionGuardReference
+    });
+  };
+  return {
+    filteredAndSortedModels,
+    handleClose,
+    handleSelect,
+    modelSearchQuery,
+    providerFilter,
+    providers,
+    setModelSearchQuery,
+    setProviderFilter,
+    setSortBy,
+    sortBy
+  };
+}
+function ProviderFilterMenu({
+  onChange,
+  providerFilter,
+  providers
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { className: "h-9 gap-2", size: "sm", variant: "outline", children: [
+      /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+      providerFilter === "all" ? "All Providers" : providerFilter
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Filter by Provider" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, { onValueChange: onChange, value: providerFilter, children: [
+        /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "all", children: "All Providers" }),
+        providers.map((provider) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: provider, children: provider }, provider))
+      ] })
+    ] })
+  ] });
+}
+function SortMenu({ onChange, sortBy }) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { className: "h-9 gap-2", size: "sm", variant: "outline", children: [
+      /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }),
+      "Sort"
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Sort by" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuRadioGroup,
+        {
+          onValueChange: (value) => {
+            onChange(value);
+          },
+          value: sortBy,
+          children: [
+            /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "name", children: "Name" }),
+            /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "provider", children: "Provider" }),
+            /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "price-low", children: "Price: Low to High" }),
+            /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "price-high", children: "Price: High to Low" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function ModelSelectorFilters({
+  modelSearchQuery,
+  onProviderChange,
+  onSearchChange,
+  onSortChange,
+  providerFilter,
+  providers,
+  sortBy
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 pb-2 border-b", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        className: "h-9",
+        onChange: (event) => {
+          onSearchChange(event.target.value);
+        },
+        placeholder: "Search models or providers...",
+        value: modelSearchQuery
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ProviderFilterMenu,
+      {
+        onChange: onProviderChange,
+        providerFilter,
+        providers
+      }
+    ),
+    /* @__PURE__ */ jsx(SortMenu, { onChange: onSortChange, sortBy })
+  ] });
+}
+function ModelList({ models, onSelect, selectedModelId }) {
+  return /* @__PURE__ */ jsx(Command, { className: "flex-1", shouldFilter: false, children: /* @__PURE__ */ jsxs(CommandList, { className: "max-h-[60vh]", children: [
+    /* @__PURE__ */ jsx(CommandEmpty, { children: "No models found." }),
+    /* @__PURE__ */ jsx(CommandGroup, { children: models.map((model) => /* @__PURE__ */ jsx(
+      ModelListItem,
+      {
+        model,
+        onSelect,
+        selectedModelId
+      },
+      model.id
+    )) })
+  ] }) });
+}
+function ModelPricing({ pricing }) {
+  if (!pricing) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground pointer-events-none", children: [
+    pricing.input ? /* @__PURE__ */ jsxs("span", { children: [
+      "In: ",
+      formatPrice(pricing.input)
+    ] }) : null,
+    pricing.output ? /* @__PURE__ */ jsxs("span", { children: [
+      "Out: ",
+      formatPrice(pricing.output)
+    ] }) : null
+  ] });
+}
+function ModelListItem({
+  model,
+  onSelect,
+  selectedModelId
+}) {
+  const isSelected = selectedModelId === model.id;
+  const provider = getProvider(model.id);
+  return /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      className: cn(
+        "flex flex-col items-start py-3",
+        isSelected && "bg-accent"
+      ),
+      disabled: isSelected,
+      onSelect: () => {
+        onSelect(model.id);
+      },
+      value: model.id,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full pointer-events-none", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: model.name }),
+            isSelected ? /* @__PURE__ */ jsx(Badge, { className: "text-xs pointer-events-none", variant: "secondary", children: "Selected" }) : null,
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                className: "text-xs font-mono pointer-events-none",
+                variant: "outline",
+                children: provider
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ModelPricing, { pricing: model.pricing })
+        ] }),
+        model.description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-1 pointer-events-none", children: model.description }) : null,
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-1 font-mono pointer-events-none", children: model.id })
+      ]
+    }
+  );
+}
+function ModelSelector(props) {
+  const {
+    filteredAndSortedModels,
+    handleClose,
+    handleSelect,
+    modelSearchQuery,
+    providerFilter,
+    providers,
+    setModelSearchQuery,
+    setProviderFilter,
+    setSortBy,
+    sortBy
+  } = useModelSelectorState(props);
+  return /* @__PURE__ */ jsx(Dialog, { onOpenChange: handleClose, open: props.open, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Select Model" }) }),
+    /* @__PURE__ */ jsx(
+      ModelSelectorFilters,
+      {
+        modelSearchQuery,
+        onProviderChange: setProviderFilter,
+        onSearchChange: setModelSearchQuery,
+        onSortChange: setSortBy,
+        providerFilter,
+        providers,
+        sortBy
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ModelList,
+      {
+        models: filteredAndSortedModels,
+        onSelect: handleSelect,
+        selectedModelId: props.selectedModelId
+      }
+    )
+  ] }) });
+}
+export {
+  ModelSelector
+};

package/dist/components/navbar-saas/index.js

@@ -0,0 +1,6 @@
+import { NavbarSaas } from "./navbar-saas";
+import { useMobile } from "./use-mobile";
+export {
+  NavbarSaas,
+  useMobile
+};

package/dist/components/navbar-saas/navbar-saas.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu, X } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { useSidebar } from "../sidebar-provider";
+import { ThemeToggle } from "../theme-toggle";
+import { useMobile } from "./use-mobile";
+function NavbarSaas({
+  brand,
+  navItems = [],
+  rightSlot,
+  showMobileMenu = true
+}) {
+  const pathname = usePathname();
+  const { open, setOpen } = useSidebar();
+  const isMobile = useMobile();
+  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 items-center justify-between px-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      showMobileMenu && isMobile ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "lg:hidden",
+          onClick: () => {
+            setOpen(!open);
+          },
+          size: "icon",
+          variant: "ghost",
+          children: open ? /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Menu, { className: "h-4 w-4" })
+        }
+      ) : null,
+      brand ? typeof brand === "string" ? /* @__PURE__ */ jsx(Link, { className: "text-xl font-bold truncate", href: "/", children: brand }) : brand : null,
+      navItems.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden md:flex gap-6", children: navItems.map((item) => /* @__PURE__ */ jsx(
+        Link,
+        {
+          className: cn(
+            "text-sm font-medium transition-colors hover:text-foreground/80",
+            pathname === item.href ? "text-foreground" : "text-foreground/60"
+          ),
+          href: item.href,
+          children: item.title
+        },
+        item.href
+      )) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      rightSlot,
+      /* @__PURE__ */ jsx(
+        ThemeToggle,
+        {
+          dict: {
+            theme: {
+              dark: "Dark",
+              light: "Light",
+              system: "System",
+              toggle_theme: "Toggle theme"
+            }
+          }
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  NavbarSaas
+};

package/dist/components/navbar-saas/use-mobile.js

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect, useState } from "react";
+function useMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+  return isMobile;
+}
+export {
+  useMobile
+};

package/dist/components/navigation-menu/index.js

@@ -0,0 +1,22 @@
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuViewport
+} from "./navigation-menu";
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle
+};