@saas-ui/react 3.0.0-alpha.7 → 3.0.0-alpha.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.9
+
+### Minor Changes
+
+- f0f5ab0: Improve Navbar composition
+
+## 3.0.0-alpha.8
+
+### Patch Changes
+
+- 64e680e: Update default button colorPalette to gray
+- 64e680e: Export Menu.Context
+
 ## 3.0.0-alpha.7
 
 ### Major Changes

package/dist/chunk-7VSTNV2B.js

@@ -0,0 +1,53 @@
+'use client'
+import {
+  Spinner
+} from "./chunk-32JGENDB.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/loading-overlay/loading-overlay.tsx
+var loading_overlay_exports = {};
+__export(loading_overlay_exports, {
+  Root: () => LoadingOverlayRoot,
+  Spinner: () => LoadingOverlaySpinner,
+  Text: () => LoadingOverlayText
+});
+import {
+  Presence,
+  splitPresenceProps
+} from "@ark-ui/react/presence";
+import { chakra } from "@chakra-ui/react";
+
+// src/components/loading-overlay/loading-overlay.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  useStyles: useLoadingOverlayStyles,
+  withContext,
+  withProvider
+} = createSlotRecipeContext({
+  key: "suiLoadingOverlay"
+});
+
+// src/components/loading-overlay/loading-overlay.tsx
+import { jsx } from "react/jsx-runtime";
+var LoadingOverlay = (props) => {
+  const { children, loading = true, ...rest } = props;
+  const [presenceProps, rootProps] = splitPresenceProps(rest);
+  return /* @__PURE__ */ jsx(Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ jsx(chakra.div, { ...rootProps, children }) });
+};
+var LoadingOverlayRoot = withProvider(
+  LoadingOverlay,
+  "root"
+);
+LoadingOverlayRoot.displayName = "LoadingOverlay";
+var LoadingOverlaySpinner = Spinner;
+var LoadingOverlayText = withContext(
+  "p",
+  "text"
+);
+
+export {
+  useLoadingOverlayStyles,
+  loading_overlay_exports
+};

package/dist/{chunk-ZWSZQZ5G.js → chunk-CB52LBJK.js}

@@ -1,7 +1,4 @@
 'use client'
-import {
-  DialogContext
-} from "./chunk-VBIVLREP.js";
 import {
   CloseButton
 } from "./chunk-FZW2DYK3.js";
@@ -29,6 +26,7 @@ __export(namespace_exports, {
 // src/components/dialog/dialog.tsx
 import { forwardRef } from "react";
 import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react";
+import { DialogContext } from "@ark-ui/react/dialog";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DialogContent = forwardRef(
   function DialogContent2(props, ref) {

package/dist/{chunk-GEPWRHHH.js → chunk-H6TFEHY4.js}

@@ -1,7 +1,4 @@
 'use client'
-import {
-  DialogContext
-} from "./chunk-VBIVLREP.js";
 import {
   CloseButton
 } from "./chunk-FZW2DYK3.js";
@@ -28,6 +25,7 @@ __export(namespace_exports, {
 
 // src/components/drawer/drawer.tsx
 import { forwardRef } from "react";
+import { DialogContext } from "@ark-ui/react/dialog";
 import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react";
 import { jsx } from "react/jsx-runtime";
 var DrawerContent = forwardRef(

package/dist/{chunk-5T7S5OAM.js → chunk-JGHXJ3PI.js}

@@ -17,6 +17,7 @@ __export(menu_exports, {
   Button: () => MenuButton,
   CheckboxItem: () => MenuCheckboxItem,
   Content: () => MenuContent,
+  Context: () => MenuContext,
   ContextTrigger: () => MenuContextTrigger,
   Item: () => MenuItem,
   ItemCommand: () => MenuItemCommand,
@@ -90,6 +91,7 @@ var MenuRadioItemGroup = ChakraMenu.RadioItemGroup;
 var MenuContextTrigger = ChakraMenu.ContextTrigger;
 var MenuRoot = ChakraMenu.Root;
 var MenuSeparator = ChakraMenu.Separator;
+var MenuContext = ChakraMenu.Context;
 var MenuItem = ChakraMenu.Item;
 var MenuItemText = ChakraMenu.ItemText;
 var MenuItemCommand = ChakraMenu.ItemCommand;

package/dist/{chunk-BFA5FCA2.js → chunk-O2WVT2BP.js}

@@ -1,9 +1,5 @@
 'use client'
 
-// src/components/link/link.tsx
-import React2 from "react";
-import { Link as ChakraLink } from "@chakra-ui/react";
-
 // src/provider/sui-provider.tsx
 import * as React from "react";
 import { ChakraProvider } from "@chakra-ui/react";
@@ -31,20 +27,9 @@ function useLink() {
   return chakra.a;
 }
 
-// src/components/link/link.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Link = React2.forwardRef(
-  (props, ref) => {
-    const LinkComponent = useLink();
-    return /* @__PURE__ */ jsx2(ChakraLink, { asChild: true, children: /* @__PURE__ */ jsx2(LinkComponent, { ref, ...props }) });
-  }
-);
-Link.displayName = "Link";
-
 export {
   SuiContext,
   SuiProvider,
   useSui,
-  useLink,
-  Link
+  useLink
 };

package/dist/{chunk-3Z2C27LI.js → chunk-Q6SNJJO2.js}

@@ -1,4 +1,7 @@
 'use client'
+import {
+  useLink
+} from "./chunk-O2WVT2BP.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";
@@ -12,6 +15,7 @@ __export(navbar_exports, {
   Link: () => NavbarLink,
   Root: () => NavbarRoot
 });
+import { forwardRef } from "react";
 import { Navbar } from "@saas-ui/core/navbar";
 
 // src/components/navbar/navbar.context.ts
@@ -25,6 +29,7 @@ var {
 });
 
 // src/components/navbar/navbar.tsx
+import { jsx } from "react/jsx-runtime";
 var NavbarRoot = withProvider(
   Navbar.Root,
   "root"
@@ -42,8 +47,15 @@ var NavbarItem = withContext(
   "item"
 );
 var NavbarLink = withContext(
-  Navbar.Link,
-  "link"
+  forwardRef((props, ref) => {
+    const Link = useLink();
+    const { active, ...rest } = props;
+    return /* @__PURE__ */ jsx(Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ jsx(Link, { "data-active": active ? "" : void 0, ...props }) });
+  }),
+  "link",
+  {
+    forwardAsChild: true
+  }
 );
 
 export {

package/dist/chunk-TZBAM4AD.js

@@ -0,0 +1,20 @@
+'use client'
+import {
+  useLink
+} from "./chunk-O2WVT2BP.js";
+
+// src/components/link/link.tsx
+import React from "react";
+import { Link as ChakraLink } from "@chakra-ui/react";
+import { jsx } from "react/jsx-runtime";
+var Link = React.forwardRef(
+  (props, ref) => {
+    const LinkComponent = useLink();
+    return /* @__PURE__ */ jsx(ChakraLink, { asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { ref, ...props }) });
+  }
+);
+Link.displayName = "Link";
+
+export {
+  Link
+};

package/dist/components/dialog/index.cjs

@@ -33,7 +33,7 @@ __export(namespace_exports, {
   Body: () => DialogBody,
   CloseTrigger: () => DialogCloseTrigger,
   Content: () => DialogContent,
-  Context: () => DialogContext,
+  Context: () => import_dialog.DialogContext,
   Description: () => DialogDescription,
   Footer: () => DialogFooter,
   Header: () => DialogHeader,
@@ -43,8 +43,8 @@ __export(namespace_exports, {
 });
 
 // src/components/dialog/dialog.tsx
-var import_react5 = require("react");
-var import_react6 = require("@chakra-ui/react");
+var import_react4 = require("react");
+var import_react5 = require("@chakra-ui/react");
 
 // src/components/close-button/close-button.tsx
 var import_react2 = require("react");
@@ -158,49 +158,10 @@ var CloseButton = (0, import_react2.forwardRef)(
   }
 );
 
-// ../../node_modules/@ark-ui/react/dist/utils/create-context.js
-var import_react4 = require("react");
-function getErrorMessage(hook, provider) {
-  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
-}
-function createContext(options = {}) {
-  const {
-    name,
-    strict = true,
-    hookName = "useContext",
-    providerName = "Provider",
-    errorMessage,
-    defaultValue
-  } = options;
-  const Context = (0, import_react4.createContext)(defaultValue);
-  Context.displayName = name;
-  function useContext$1() {
-    var _a;
-    const context = (0, import_react4.useContext)(Context);
-    if (!context && strict) {
-      const error = new Error(errorMessage != null ? errorMessage : getErrorMessage(hookName, providerName));
-      error.name = "ContextError";
-      (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext$1);
-      throw error;
-    }
-    return context;
-  }
-  return [Context.Provider, useContext$1, Context];
-}
-
-// ../../node_modules/@ark-ui/react/dist/components/dialog/use-dialog-context.js
-var [DialogProvider, useDialogContext] = createContext({
-  name: "DialogContext",
-  hookName: "useDialogContext",
-  providerName: "<DialogProvider />"
-});
-
-// ../../node_modules/@ark-ui/react/dist/components/dialog/dialog-context.js
-var DialogContext = (props) => props.children(useDialogContext());
-
 // src/components/dialog/dialog.tsx
+var import_dialog = require("@ark-ui/react/dialog");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var DialogContent = (0, import_react5.forwardRef)(
+var DialogContent = (0, import_react4.forwardRef)(
   function DialogContent2(props, ref) {
     const {
       children,
@@ -209,15 +170,15 @@ var DialogContent = (0, import_react5.forwardRef)(
       backdrop = true,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Portal, { disabled: !portalled, container: portalRef, children: [
-      backdrop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Dialog.Backdrop, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Dialog.Content, { ref, ...rest, asChild: false, children }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Portal, { disabled: !portalled, container: portalRef, children: [
+      backdrop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Dialog.Backdrop, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Dialog.Content, { ref, ...rest, asChild: false, children }) })
     ] });
   }
 );
-var DialogCloseTrigger = (0, import_react5.forwardRef)(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = (0, import_react4.forwardRef)(function DialogCloseTrigger2(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react6.Dialog.CloseTrigger,
+    import_react5.Dialog.CloseTrigger,
     {
       position: "absolute",
       top: "2",
@@ -228,15 +189,15 @@ var DialogCloseTrigger = (0, import_react5.forwardRef)(function DialogCloseTrigg
     }
   );
 });
-var DialogRoot = import_react6.Dialog.Root;
-var DialogFooter = import_react6.Dialog.Footer;
-var DialogHeader = import_react6.Dialog.Header;
-var DialogBody = import_react6.Dialog.Body;
-var DialogBackdrop = import_react6.Dialog.Backdrop;
-var DialogTitle = import_react6.Dialog.Title;
-var DialogDescription = import_react6.Dialog.Description;
-var DialogTrigger = import_react6.Dialog.Trigger;
-var DialogActionTrigger = import_react6.Dialog.ActionTrigger;
+var DialogRoot = import_react5.Dialog.Root;
+var DialogFooter = import_react5.Dialog.Footer;
+var DialogHeader = import_react5.Dialog.Header;
+var DialogBody = import_react5.Dialog.Body;
+var DialogBackdrop = import_react5.Dialog.Backdrop;
+var DialogTitle = import_react5.Dialog.Title;
+var DialogDescription = import_react5.Dialog.Description;
+var DialogTrigger = import_react5.Dialog.Trigger;
+var DialogActionTrigger = import_react5.Dialog.ActionTrigger;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Dialog

package/dist/components/dialog/index.js

@@ -1,8 +1,7 @@
 'use client'
 import {
   namespace_exports
-} from "../../chunk-ZWSZQZ5G.js";
-import "../../chunk-VBIVLREP.js";
+} from "../../chunk-CB52LBJK.js";
 import "../../chunk-FZW2DYK3.js";
 import "../../chunk-VDXTEASE.js";
 import "../../chunk-RTMS5TJN.js";

package/dist/components/drawer/index.cjs

@@ -43,59 +43,18 @@ __export(namespace_exports, {
 });
 
 // src/components/drawer/drawer.tsx
-var import_react5 = require("react");
-
-// ../../node_modules/@ark-ui/react/dist/utils/create-context.js
-var import_react = require("react");
-function getErrorMessage(hook, provider) {
-  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
-}
-function createContext(options = {}) {
-  const {
-    name,
-    strict = true,
-    hookName = "useContext",
-    providerName = "Provider",
-    errorMessage,
-    defaultValue
-  } = options;
-  const Context = (0, import_react.createContext)(defaultValue);
-  Context.displayName = name;
-  function useContext$1() {
-    var _a;
-    const context = (0, import_react.useContext)(Context);
-    if (!context && strict) {
-      const error = new Error(errorMessage != null ? errorMessage : getErrorMessage(hookName, providerName));
-      error.name = "ContextError";
-      (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext$1);
-      throw error;
-    }
-    return context;
-  }
-  return [Context.Provider, useContext$1, Context];
-}
-
-// ../../node_modules/@ark-ui/react/dist/components/dialog/use-dialog-context.js
-var [DialogProvider, useDialogContext] = createContext({
-  name: "DialogContext",
-  hookName: "useDialogContext",
-  providerName: "<DialogProvider />"
-});
-
-// ../../node_modules/@ark-ui/react/dist/components/dialog/dialog-context.js
-var DialogContext = (props) => props.children(useDialogContext());
-
-// src/components/drawer/drawer.tsx
-var import_react6 = require("@chakra-ui/react");
+var import_react4 = require("react");
+var import_dialog = require("@ark-ui/react/dialog");
+var import_react5 = require("@chakra-ui/react");
 
 // src/components/close-button/close-button.tsx
-var import_react3 = require("react");
-var import_react4 = require("@chakra-ui/react");
+var import_react2 = require("react");
+var import_react3 = require("@chakra-ui/react");
 
 // src/components/icons/create-icon.tsx
-var import_react2 = require("@chakra-ui/react");
+var import_react = require("@chakra-ui/react");
 var createIcon = (props) => {
-  return (0, import_react2.createIcon)({
+  return (0, import_react.createIcon)({
     viewBox: "0 0 24 24",
     defaultProps: {
       fill: "none",
@@ -193,24 +152,24 @@ var CheckIcon = createIcon({
 
 // src/components/close-button/close-button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var CloseButton = (0, import_react3.forwardRef)(
+var CloseButton = (0, import_react2.forwardRef)(
   function CloseButton2(props, ref) {
     var _a;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {}) });
   }
 );
 
 // src/components/drawer/drawer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var DrawerContent = (0, import_react5.forwardRef)(
+var DrawerContent = (0, import_react4.forwardRef)(
   function DrawerContent2(props, ref) {
     const { children, portalled = true, portalRef, offset, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Drawer.Positioner, { padding: offset, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Drawer.Content, { ref, ...rest, asChild: false, children }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Drawer.Positioner, { padding: offset, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Drawer.Content, { ref, ...rest, asChild: false, children }) }) });
   }
 );
-var DrawerCloseTrigger = (0, import_react5.forwardRef)(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = (0, import_react4.forwardRef)(function DrawerCloseTrigger2(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react6.Drawer.CloseTrigger,
+    import_react5.Drawer.CloseTrigger,
     {
       position: "absolute",
       top: "2",
@@ -221,16 +180,16 @@ var DrawerCloseTrigger = (0, import_react5.forwardRef)(function DrawerCloseTrigg
     }
   );
 });
-var DrawerTrigger = import_react6.Drawer.Trigger;
-var DrawerRoot = import_react6.Drawer.Root;
-var DrawerFooter = import_react6.Drawer.Footer;
-var DrawerHeader = import_react6.Drawer.Header;
-var DrawerBody = import_react6.Drawer.Body;
-var DrawerBackdrop = import_react6.Drawer.Backdrop;
-var DrawerDescription = import_react6.Drawer.Description;
-var DrawerTitle = import_react6.Drawer.Title;
-var DrawerActionTrigger = import_react6.Drawer.ActionTrigger;
-var DrawerContext = DialogContext;
+var DrawerTrigger = import_react5.Drawer.Trigger;
+var DrawerRoot = import_react5.Drawer.Root;
+var DrawerFooter = import_react5.Drawer.Footer;
+var DrawerHeader = import_react5.Drawer.Header;
+var DrawerBody = import_react5.Drawer.Body;
+var DrawerBackdrop = import_react5.Drawer.Backdrop;
+var DrawerDescription = import_react5.Drawer.Description;
+var DrawerTitle = import_react5.Drawer.Title;
+var DrawerActionTrigger = import_react5.Drawer.ActionTrigger;
+var DrawerContext = import_dialog.DialogContext;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Drawer

package/dist/components/drawer/index.js

@@ -1,8 +1,7 @@
 'use client'
 import {
   namespace_exports
-} from "../../chunk-GEPWRHHH.js";
-import "../../chunk-VBIVLREP.js";
+} from "../../chunk-H6TFEHY4.js";
 import "../../chunk-FZW2DYK3.js";
 import "../../chunk-VDXTEASE.js";
 import "../../chunk-RTMS5TJN.js";

package/dist/components/link/index.js

@@ -1,7 +1,8 @@
 'use client'
 import {
   Link
-} from "../../chunk-BFA5FCA2.js";
+} from "../../chunk-TZBAM4AD.js";
+import "../../chunk-O2WVT2BP.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   Link