@saas-ui/react 3.0.0-alpha.3 → 3.0.0-alpha.31

package/dist/components/menu/index.cjs

@@ -0,0 +1,239 @@
+'use client'
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/menu/index.ts
+var menu_exports2 = {};
+__export(menu_exports2, {
+  Menu: () => menu_exports
+});
+module.exports = __toCommonJS(menu_exports2);
+
+// src/components/menu/menu.tsx
+var menu_exports = {};
+__export(menu_exports, {
+  Arrow: () => MenuArrow,
+  Button: () => MenuButton,
+  CheckboxItem: () => MenuCheckboxItem,
+  Content: () => MenuContent,
+  Context: () => MenuContext,
+  ContextTrigger: () => MenuContextTrigger,
+  Item: () => MenuItem,
+  ItemCommand: () => MenuItemCommand,
+  ItemGroup: () => MenuItemGroup,
+  ItemText: () => MenuItemText,
+  RadioItem: () => MenuRadioItem,
+  RadioItemGroup: () => MenuRadioItemGroup,
+  Root: () => MenuRoot,
+  Separator: () => MenuSeparator,
+  Trigger: () => MenuTrigger,
+  TriggerItem: () => MenuTriggerItem
+});
+var import_react4 = require("react");
+var import_react5 = require("@chakra-ui/react");
+
+// src/components/button/button.tsx
+var import_react = require("react");
+var import_react2 = require("@chakra-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(
+  function Button2(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Button, { disabled: loading || disabled, ref, ...rest, children: loading && !loadingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AbsoluteCenter, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Spinner, { size: "inherit", color: "inherit" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Span, { opacity: 0, children })
+    ] }) : loading && loadingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Spinner, { size: "inherit", color: "inherit" }),
+      loadingText
+    ] }) : children });
+  }
+);
+
+// src/components/icons/create-icon.tsx
+var import_react3 = require("@chakra-ui/react");
+var createIcon = (props) => {
+  return (0, import_react3.createIcon)({
+    viewBox: "0 0 24 24",
+    defaultProps: {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    ...props
+  });
+};
+
+// src/components/icons/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChevronUpIcon = createIcon({
+  displayName: "ChevronUpIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "18 15 12 9 6 15" })
+});
+var ChevronDownIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "6 9 12 15 18 9" })
+});
+var ChevronLeftIcon = createIcon({
+  displayName: "ChevronLeftIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "15 18 9 12 15 6" })
+});
+var ChevronRightIcon = createIcon({
+  displayName: "ChevronRightIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "9 18 15 12 9 6" })
+});
+var HamburgerIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+  ] })
+});
+var CloseIcon = createIcon({
+  displayName: "CloseIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] })
+});
+var FilterIcon = createIcon({
+  displayName: "FilterIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
+});
+var CalendarIcon = createIcon({
+  displayName: "CalendarIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+  ] })
+});
+var PlusIcon = createIcon({
+  displayName: "PlusIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] })
+});
+var MinusIcon = createIcon({
+  displayName: "MinusIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
+});
+var ViewOffIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] })
+});
+var ViewIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+  ] })
+});
+var SearchIcon = createIcon({
+  displayName: "SearchIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] })
+});
+var CheckIcon = createIcon({
+  displayName: "CheckIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
+});
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
+
+// src/components/menu/menu.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MenuContent = (0, import_react4.forwardRef)(
+  function MenuContent2(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.Content, { ref, ...rest }) }) });
+  }
+);
+var MenuArrow = (0, import_react4.forwardRef)(
+  function MenuArrow2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.ArrowTip, {}) });
+  }
+);
+var MenuCheckboxItem = (0, import_react4.forwardRef)(function MenuCheckboxItem2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Menu.CheckboxItem, { ref, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }),
+    props.children
+  ] });
+});
+var MenuRadioItem = (0, import_react4.forwardRef)(
+  function MenuRadioItem2(props, ref) {
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.ItemText, { children })
+    ] });
+  }
+);
+var MenuItemGroup = (0, import_react4.forwardRef)(
+  function MenuItemGroup2(props, ref) {
+    const { title, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Menu.ItemGroup, { ref, ...rest, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Menu.ItemGroupLabel, { userSelect: "none", children: title }),
+      children
+    ] });
+  }
+);
+var MenuTriggerItem = (0, import_react4.forwardRef)(
+  function MenuTriggerItem2(props, ref) {
+    const { startIcon, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Menu.TriggerItem, { ref, ...rest, children: [
+      startIcon,
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRightIcon, {})
+    ] });
+  }
+);
+var MenuButton = (0, import_react4.forwardRef)(
+  function MenuButton2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...props }) });
+  }
+);
+var MenuRadioItemGroup = import_react5.Menu.RadioItemGroup;
+var MenuContextTrigger = import_react5.Menu.ContextTrigger;
+var MenuRoot = import_react5.Menu.Root;
+var MenuSeparator = import_react5.Menu.Separator;
+var MenuContext = import_react5.Menu.Context;
+var MenuItem = import_react5.Menu.Item;
+var MenuItemText = import_react5.Menu.ItemText;
+var MenuItemCommand = import_react5.Menu.ItemCommand;
+var MenuTrigger = import_react5.Menu.Trigger;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Menu
+});

package/dist/components/menu/index.d.cts

@@ -0,0 +1,39 @@
+import * as _ark_ui_react from '@ark-ui/react';
+import * as react from 'react';
+import { Menu, ButtonProps } from '@chakra-ui/react';
+
+interface MenuContentProps extends Menu.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+}
+declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuArrow: react.ForwardRefExoticComponent<Menu.ArrowProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Menu.CheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioItem: react.ForwardRefExoticComponent<Menu.RadioItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemGroup: react.ForwardRefExoticComponent<Menu.ItemGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface MenuTriggerItemProps extends Menu.ItemProps {
+    startIcon?: React.ReactNode;
+}
+declare const MenuTriggerItem: react.ForwardRefExoticComponent<MenuTriggerItemProps & react.RefAttributes<HTMLDivElement>>;
+interface MenuButtonProps extends ButtonProps, Menu.TriggerProps {
+}
+declare const MenuButton: react.ForwardRefExoticComponent<MenuButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const MenuRadioItemGroup: react.ForwardRefExoticComponent<Menu.RadioItemGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuContextTrigger: react.ForwardRefExoticComponent<Menu.ContextTriggerProps & react.RefAttributes<HTMLElement>>;
+declare const MenuRoot: react.FC<Menu.RootProps>;
+declare const MenuSeparator: react.ForwardRefExoticComponent<Menu.SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuContext: (props: _ark_ui_react.MenuContextProps) => react.ReactNode;
+declare const MenuItem: react.ForwardRefExoticComponent<Menu.ItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemText: react.ForwardRefExoticComponent<Menu.ItemTextProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCommand: react.ForwardRefExoticComponent<Menu.CommandProps & react.RefAttributes<HTMLElement>>;
+declare const MenuTrigger: react.ForwardRefExoticComponent<Menu.TriggerProps & react.RefAttributes<HTMLButtonElement>>;
+
+type MenuRootProps = Menu.RootProps;
+type MenuTriggerProps = Menu.TriggerProps;
+type MenuItemProps = Menu.ItemProps;
+
+declare namespace menu {
+  export { MenuArrow as Arrow, MenuButton as Button, type MenuButtonProps as ButtonProps, MenuCheckboxItem as CheckboxItem, MenuContent as Content, type MenuContentProps as ContentProps, MenuContext as Context, MenuContextTrigger as ContextTrigger, MenuItem as Item, MenuItemCommand as ItemCommand, MenuItemGroup as ItemGroup, type MenuItemProps as ItemProps, MenuItemText as ItemText, MenuRadioItem as RadioItem, MenuRadioItemGroup as RadioItemGroup, MenuRoot as Root, type MenuRootProps as RootProps, MenuSeparator as Separator, MenuTrigger as Trigger, MenuTriggerItem as TriggerItem, type MenuTriggerItemProps as TriggerItemProps, type MenuTriggerProps as TriggerProps };
+}
+
+export { menu as Menu };

package/dist/components/menu/index.d.ts

@@ -0,0 +1,39 @@
+import * as _ark_ui_react from '@ark-ui/react';
+import * as react from 'react';
+import { Menu, ButtonProps } from '@chakra-ui/react';
+
+interface MenuContentProps extends Menu.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+}
+declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuArrow: react.ForwardRefExoticComponent<Menu.ArrowProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Menu.CheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioItem: react.ForwardRefExoticComponent<Menu.RadioItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemGroup: react.ForwardRefExoticComponent<Menu.ItemGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface MenuTriggerItemProps extends Menu.ItemProps {
+    startIcon?: React.ReactNode;
+}
+declare const MenuTriggerItem: react.ForwardRefExoticComponent<MenuTriggerItemProps & react.RefAttributes<HTMLDivElement>>;
+interface MenuButtonProps extends ButtonProps, Menu.TriggerProps {
+}
+declare const MenuButton: react.ForwardRefExoticComponent<MenuButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const MenuRadioItemGroup: react.ForwardRefExoticComponent<Menu.RadioItemGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuContextTrigger: react.ForwardRefExoticComponent<Menu.ContextTriggerProps & react.RefAttributes<HTMLElement>>;
+declare const MenuRoot: react.FC<Menu.RootProps>;
+declare const MenuSeparator: react.ForwardRefExoticComponent<Menu.SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuContext: (props: _ark_ui_react.MenuContextProps) => react.ReactNode;
+declare const MenuItem: react.ForwardRefExoticComponent<Menu.ItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemText: react.ForwardRefExoticComponent<Menu.ItemTextProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCommand: react.ForwardRefExoticComponent<Menu.CommandProps & react.RefAttributes<HTMLElement>>;
+declare const MenuTrigger: react.ForwardRefExoticComponent<Menu.TriggerProps & react.RefAttributes<HTMLButtonElement>>;
+
+type MenuRootProps = Menu.RootProps;
+type MenuTriggerProps = Menu.TriggerProps;
+type MenuItemProps = Menu.ItemProps;
+
+declare namespace menu {
+  export { MenuArrow as Arrow, MenuButton as Button, type MenuButtonProps as ButtonProps, MenuCheckboxItem as CheckboxItem, MenuContent as Content, type MenuContentProps as ContentProps, MenuContext as Context, MenuContextTrigger as ContextTrigger, MenuItem as Item, MenuItemCommand as ItemCommand, MenuItemGroup as ItemGroup, type MenuItemProps as ItemProps, MenuItemText as ItemText, MenuRadioItem as RadioItem, MenuRadioItemGroup as RadioItemGroup, MenuRoot as Root, type MenuRootProps as RootProps, MenuSeparator as Separator, MenuTrigger as Trigger, MenuTriggerItem as TriggerItem, type MenuTriggerItemProps as TriggerItemProps, type MenuTriggerProps as TriggerProps };
+}
+
+export { menu as Menu };

package/dist/components/menu/index.js

@@ -0,0 +1,11 @@
+'use client'
+import {
+  menu_exports
+} from "../../chunk-KFXNVUEZ.js";
+import "../../chunk-KTLWEUNW.js";
+import "../../chunk-4TPVIHNO.js";
+import "../../chunk-NGSHWY7E.js";
+import "../../chunk-RTMS5TJN.js";
+export {
+  menu_exports as Menu
+};

package/dist/components/navbar/index.cjs

@@ -1,8 +1,10 @@
 'use client'
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,48 +18,92 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/navbar/index.ts
-var navbar_exports = {};
-__export(navbar_exports, {
-  Navbar: () => namespace_exports
+var navbar_exports2 = {};
+__export(navbar_exports2, {
+  Navbar: () => navbar_exports
 });
-module.exports = __toCommonJS(navbar_exports);
+module.exports = __toCommonJS(navbar_exports2);
 
-// src/components/navbar/namespace.ts
-var namespace_exports = {};
-__export(namespace_exports, {
+// src/components/navbar/navbar.tsx
+var navbar_exports = {};
+__export(navbar_exports, {
   Brand: () => NavbarBrand,
   Content: () => NavbarContent,
   Item: () => NavbarItem,
   Link: () => NavbarLink,
   Root: () => NavbarRoot
 });
+var import_react4 = require("react");
+var import_navbar = require("@saas-ui/core/navbar");
 
-// src/components/navbar/navbar.tsx
+// src/provider/use-link.tsx
+var import_react2 = require("@chakra-ui/react");
+
+// src/provider/sui-provider.tsx
+var React = __toESM(require("react"), 1);
 var import_react = require("@chakra-ui/react");
-var import_navbar = require("@saas-ui/core/navbar");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SuiContext = React.createContext({});
+var useSui = () => React.useContext(SuiContext);
+
+// src/provider/use-link.tsx
+function useLink() {
+  const context = useSui();
+  if (context == null ? void 0 : context.linkComponent) {
+    return context.linkComponent;
+  }
+  return import_react2.chakra.a;
+}
+
+// src/components/navbar/navbar.context.ts
+var import_react3 = require("@chakra-ui/react");
 var {
   withProvider,
   withContext,
   useStyles: useNavbarStyles
-} = (0, import_react.createSlotRecipeContext)({
-  key: "navbar"
+} = (0, import_react3.createSlotRecipeContext)({
+  key: "suiNavbar"
 });
+
+// src/components/navbar/navbar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var NavbarRoot = withProvider(
   import_navbar.Navbar.Root,
   "root"
 );
-var NavbarBrand = withContext(import_navbar.Navbar.Brand, "brand");
-var NavbarContent = withContext(import_navbar.Navbar.Content, "content");
+var NavbarBrand = withContext(
+  import_navbar.Navbar.Brand,
+  "brand"
+);
+var NavbarContent = withContext(
+  import_navbar.Navbar.Content,
+  "content"
+);
 var NavbarItem = withContext(
   import_navbar.Navbar.Item,
   "item"
 );
 var NavbarLink = withContext(
-  import_navbar.Navbar.Link,
-  "link"
+  (0, import_react4.forwardRef)((props, ref) => {
+    const Link = useLink();
+    const { active, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_navbar.Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Link, { "data-active": active ? "" : void 0, ...props }) });
+  }),
+  "link",
+  {
+    forwardAsChild: true
+  }
 );
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {