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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.4
+
+### Patch Changes
+
+- 7808a76: Restructure slot components and add ui namespaces to recipes
+
 ## 3.0.0-alpha.3
 
 ### Patch Changes

package/dist/components/app-shell/index.cjs

@@ -34,7 +34,7 @@ var {
   withContext,
   useStyles: useAppShellStyles
 } = (0, import_react2.createSlotRecipeContext)({
-  key: "appShell"
+  key: "suiAppShell"
 });
 var AppShellRoot = withProvider(
   "div",

package/dist/components/app-shell/index.d.cts

@@ -23,7 +23,7 @@ interface AppShellProps extends HTMLChakraProps<'div'> {
      */
     children: React.ReactNode;
 }
-interface AppShellRootProps extends Omit<AppShellProps, 'position'>, SlotRecipeProps<'appShell'> {
+interface AppShellRootProps extends Omit<AppShellProps, 'position'>, SlotRecipeProps<'suiAppShell'> {
 }
 declare const AppShell: react.ForwardRefExoticComponent<AppShellRootProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/components/app-shell/index.d.ts

@@ -23,7 +23,7 @@ interface AppShellProps extends HTMLChakraProps<'div'> {
      */
     children: React.ReactNode;
 }
-interface AppShellRootProps extends Omit<AppShellProps, 'position'>, SlotRecipeProps<'appShell'> {
+interface AppShellRootProps extends Omit<AppShellProps, 'position'>, SlotRecipeProps<'suiAppShell'> {
 }
 declare const AppShell: react.ForwardRefExoticComponent<AppShellRootProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/components/app-shell/index.js

@@ -12,7 +12,7 @@ var {
   withContext,
   useStyles: useAppShellStyles
 } = createSlotRecipeContext({
-  key: "appShell"
+  key: "suiAppShell"
 });
 var AppShellRoot = withProvider(
   "div",

package/dist/components/command/index.cjs

@@ -30,7 +30,7 @@ var import_react = require("@chakra-ui/react");
 var import_react2 = require("@chakra-ui/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var { withContext } = (0, import_react2.createRecipeContext)({
-  key: "command"
+  key: "suiCommand"
 });
 var Key = ({ children }) => {
   if (typeof children !== "string") {

package/dist/components/command/index.js

@@ -8,7 +8,7 @@ import {
 } from "@chakra-ui/react";
 import { Fragment, jsx } from "react/jsx-runtime";
 var { withContext } = createRecipeContext({
-  key: "command"
+  key: "suiCommand"
 });
 var Key = ({ children }) => {
   if (typeof children !== "string") {

package/dist/components/empty-state/index.cjs

@@ -0,0 +1,48 @@
+'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/empty-state/index.ts
+var empty_state_exports = {};
+__export(empty_state_exports, {
+  EmptyState: () => EmptyState
+});
+module.exports = __toCommonJS(empty_state_exports);
+
+// src/components/empty-state/empty-state.tsx
+var import_react = require("@chakra-ui/react");
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EmptyState = (0, import_react2.forwardRef)(
+  function EmptyState2(props, ref) {
+    const { title, description, icon, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EmptyState.Root, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.EmptyState.Content, { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EmptyState.Indicator, { children: icon }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.VStack, { textAlign: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EmptyState.Title, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EmptyState.Description, { children: description })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EmptyState.Title, { children: title }),
+      children
+    ] }) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmptyState
+});

package/dist/components/empty-state/index.d.cts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { EmptyState as EmptyState$1 } from '@chakra-ui/react';
+
+interface EmptyStateProps extends EmptyState$1.RootProps {
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+export { EmptyState, type EmptyStateProps };

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { EmptyState as EmptyState$1 } from '@chakra-ui/react';
+
+interface EmptyStateProps extends EmptyState$1.RootProps {
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+export { EmptyState, type EmptyStateProps };

package/dist/components/empty-state/index.js

@@ -0,0 +1,23 @@
+'use client'
+import "../../chunk-RTMS5TJN.js";
+
+// src/components/empty-state/empty-state.tsx
+import { EmptyState as ChakraEmptyState, VStack } from "@chakra-ui/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EmptyState = forwardRef(
+  function EmptyState2(props, ref) {
+    const { title, description, icon, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(ChakraEmptyState.Root, { ref, ...rest, children: /* @__PURE__ */ jsxs(ChakraEmptyState.Content, { children: [
+      icon && /* @__PURE__ */ jsx(ChakraEmptyState.Indicator, { children: icon }),
+      description ? /* @__PURE__ */ jsxs(VStack, { textAlign: "center", children: [
+        /* @__PURE__ */ jsx(ChakraEmptyState.Title, { children: title }),
+        /* @__PURE__ */ jsx(ChakraEmptyState.Description, { children: description })
+      ] }) : /* @__PURE__ */ jsx(ChakraEmptyState.Title, { children: title }),
+      children
+    ] }) });
+  }
+);
+export {
+  EmptyState
+};

package/dist/components/grid-list/index.cjs

@@ -0,0 +1,68 @@
+'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/grid-list/index.ts
+var grid_list_exports2 = {};
+__export(grid_list_exports2, {
+  GridList: () => grid_list_exports
+});
+module.exports = __toCommonJS(grid_list_exports2);
+
+// src/components/grid-list/grid-list.tsx
+var grid_list_exports = {};
+__export(grid_list_exports, {
+  Cell: () => GridListCell,
+  Header: () => GridListHeader,
+  Item: () => GridListItem,
+  Root: () => GridListRoot
+});
+var import_grid_list = require("@saas-ui/core/grid-list");
+
+// src/components/grid-list/grid-list.context.ts
+var import_react = require("@chakra-ui/react");
+var {
+  withProvider,
+  withContext,
+  useStyles: useGridListStyles
+} = (0, import_react.createSlotRecipeContext)({
+  key: "suiGridList"
+});
+
+// src/components/grid-list/grid-list.tsx
+var GridListRoot = withProvider(
+  import_grid_list.GridList.Root,
+  "root"
+);
+var GridListItem = withContext(
+  import_grid_list.GridList.Item,
+  "item"
+);
+var GridListHeader = withContext(
+  import_grid_list.GridList.Header,
+  "header"
+);
+var GridListCell = withContext(
+  import_grid_list.GridList.Cell,
+  "cell"
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridList
+});

package/dist/components/grid-list/index.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+import { GridList } from '@saas-ui/core/grid-list';
+
+interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+}
+declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends HTMLChakraProps<'div'> {
+}
+declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+}
+declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {
+}
+declare const GridListCell: react.ForwardRefExoticComponent<GridListCellProps & react.RefAttributes<HTMLDivElement>>;
+
+declare namespace gridList {
+  export { GridListCell as Cell, type GridListCellProps as CellProps, GridListHeader as Header, type GridListHeaderProps as HeaderProps, GridListItem as Item, type GridListItemProps as ItemProps, GridListRoot as Root, type GridListRootProps as RootProps };
+}
+
+export { gridList as GridList };

package/dist/components/grid-list/index.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+import { GridList } from '@saas-ui/core/grid-list';
+
+interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+}
+declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends HTMLChakraProps<'div'> {
+}
+declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+}
+declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {
+}
+declare const GridListCell: react.ForwardRefExoticComponent<GridListCellProps & react.RefAttributes<HTMLDivElement>>;
+
+declare namespace gridList {
+  export { GridListCell as Cell, type GridListCellProps as CellProps, GridListHeader as Header, type GridListHeaderProps as HeaderProps, GridListItem as Item, type GridListItemProps as ItemProps, GridListRoot as Root, type GridListRootProps as RootProps };
+}
+
+export { gridList as GridList };

package/dist/components/grid-list/index.js

@@ -0,0 +1,45 @@
+'use client'
+import {
+  __export
+} from "../../chunk-RTMS5TJN.js";
+
+// src/components/grid-list/grid-list.tsx
+var grid_list_exports = {};
+__export(grid_list_exports, {
+  Cell: () => GridListCell,
+  Header: () => GridListHeader,
+  Item: () => GridListItem,
+  Root: () => GridListRoot
+});
+import { GridList } from "@saas-ui/core/grid-list";
+
+// src/components/grid-list/grid-list.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  withProvider,
+  withContext,
+  useStyles: useGridListStyles
+} = createSlotRecipeContext({
+  key: "suiGridList"
+});
+
+// src/components/grid-list/grid-list.tsx
+var GridListRoot = withProvider(
+  GridList.Root,
+  "root"
+);
+var GridListItem = withContext(
+  GridList.Item,
+  "item"
+);
+var GridListHeader = withContext(
+  GridList.Header,
+  "header"
+);
+var GridListCell = withContext(
+  GridList.Cell,
+  "cell"
+);
+export {
+  grid_list_exports as GridList
+};

package/dist/components/icon-badge/index.cjs

@@ -44,7 +44,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var IconBadge = React.forwardRef(
   (props, ref) => {
     const { icon, children, ...rest } = props;
-    const recipe = (0, import_react2.useRecipe)({ key: "iconBadge", recipe: props.recipe });
+    const recipe = (0, import_react2.useRecipe)({ key: "suiIconBadge", recipe: props.recipe });
     const [variantProps, localProps] = recipe.splitVariantProps(rest);
     const styles = recipe(variantProps);
     const element = icon || children;

package/dist/components/icon-badge/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react';
 
-interface IconBadgeProps extends HTMLChakraProps<'div'>, RecipeProps<'iconBadge'> {
+interface IconBadgeProps extends HTMLChakraProps<'div'>, RecipeProps<'suiIconBadge'> {
     /**
      * The icon to display
      */

package/dist/components/icon-badge/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react';
 
-interface IconBadgeProps extends HTMLChakraProps<'div'>, RecipeProps<'iconBadge'> {
+interface IconBadgeProps extends HTMLChakraProps<'div'>, RecipeProps<'suiIconBadge'> {
     /**
      * The icon to display
      */

package/dist/components/icon-badge/index.js

@@ -13,7 +13,7 @@ import { jsx } from "react/jsx-runtime";
 var IconBadge = React.forwardRef(
   (props, ref) => {
     const { icon, children, ...rest } = props;
-    const recipe = useRecipe({ key: "iconBadge", recipe: props.recipe });
+    const recipe = useRecipe({ key: "suiIconBadge", recipe: props.recipe });
     const [variantProps, localProps] = recipe.splitVariantProps(rest);
     const styles = recipe(variantProps);
     const element = icon || children;

package/dist/components/loading-overlay/index.cjs

@@ -29,15 +29,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/loading-overlay/index.ts
-var loading_overlay_exports = {};
-__export(loading_overlay_exports, {
-  LoadingOverlay: () => namespace_exports
+var loading_overlay_exports2 = {};
+__export(loading_overlay_exports2, {
+  LoadingOverlay: () => loading_overlay_exports,
+  useLoadingOverlayStyles: () => useLoadingOverlayStyles
 });
-module.exports = __toCommonJS(loading_overlay_exports);
+module.exports = __toCommonJS(loading_overlay_exports2);
 
-// src/components/loading-overlay/namespace.ts
-var namespace_exports = {};
-__export(namespace_exports, {
+// src/components/loading-overlay/loading-overlay.tsx
+var loading_overlay_exports = {};
+__export(loading_overlay_exports, {
   Root: () => LoadingOverlayRoot,
   Spinner: () => LoadingOverlaySpinner,
   Text: () => LoadingOverlayText
@@ -1885,7 +1886,7 @@ var Presence = (0, import_react6.forwardRef)((props2, ref2) => {
 Presence.displayName = "Presence";
 
 // src/components/loading-overlay/loading-overlay.tsx
-var import_react9 = require("@chakra-ui/react");
+var import_react10 = require("@chakra-ui/react");
 
 // src/components/spinner/spinner.tsx
 var import_react7 = require("react");
@@ -1901,21 +1902,35 @@ var Spinner = (0, import_react7.forwardRef)(
   }
 );
 
+// src/components/loading-overlay/loading-overlay.context.ts
+var import_react9 = require("@chakra-ui/react");
+var {
+  useStyles: useLoadingOverlayStyles,
+  withContext,
+  withProvider
+} = (0, import_react9.createSlotRecipeContext)({
+  key: "suiLoadingOverlay"
+});
+
 // src/components/loading-overlay/loading-overlay.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var { useStyles, withContext, withProvider } = (0, import_react9.createSlotRecipeContext)({
-  key: "loadingOverlay"
-});
 var LoadingOverlay = (props2) => {
   const { children, loading = true, ...rest } = props2;
   const [presenceProps, rootProps] = splitPresenceProps(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.chakra.div, { ...rootProps, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.chakra.div, { ...rootProps, children }) });
 };
-var LoadingOverlayRoot = withProvider(LoadingOverlay, "root");
+var LoadingOverlayRoot = withProvider(
+  LoadingOverlay,
+  "root"
+);
 LoadingOverlayRoot.displayName = "LoadingOverlay";
 var LoadingOverlaySpinner = Spinner;
-var LoadingOverlayText = withContext("p", "text");
+var LoadingOverlayText = withContext(
+  "p",
+  "text"
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LoadingOverlay
+  LoadingOverlay,
+  useLoadingOverlayStyles
 });

package/dist/components/loading-overlay/index.d.cts

@@ -1,13 +1,26 @@
 import { SpinnerProps } from '../spinner/index.cjs';
 import react__default from 'react';
-import '@chakra-ui/react';
+import { PresenceBaseProps } from '@ark-ui/react/presence';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
 
-declare const LoadingOverlayRoot: react__default.ForwardRefExoticComponent<react__default.RefAttributes<unknown>>;
+interface LoadingOverlayProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiLoadingOverlay'>, PresenceBaseProps {
+    /**
+     * Show or hide the LoadingOverlay.
+     * @default true
+     */
+    loading?: boolean;
+}
+declare const LoadingOverlayRoot: react__default.ForwardRefExoticComponent<LoadingOverlayProps & react__default.RefAttributes<HTMLDivElement>>;
 declare const LoadingOverlaySpinner: react__default.ForwardRefExoticComponent<SpinnerProps & react__default.RefAttributes<HTMLDivElement>>;
-declare const LoadingOverlayText: react__default.ForwardRefExoticComponent<react__default.RefAttributes<unknown>>;
+interface LoadingTextProps extends HTMLChakraProps<'p'> {
+}
+declare const LoadingOverlayText: react__default.ForwardRefExoticComponent<LoadingTextProps & react__default.RefAttributes<HTMLParagraphElement>>;
 
-declare namespace namespace {
-  export { LoadingOverlayRoot as Root, LoadingOverlaySpinner as Spinner, LoadingOverlayText as Text };
+declare namespace loadingOverlay {
+  export { LoadingOverlayRoot as Root, type LoadingOverlayProps as RootProps, LoadingOverlaySpinner as Spinner, LoadingOverlayText as Text, type LoadingTextProps as TextProps };
 }
 
-export { namespace as LoadingOverlay };
+declare const useLoadingOverlayStyles: () => Record<string, _chakra_ui_react.SystemStyleObject>;
+
+export { loadingOverlay as LoadingOverlay, useLoadingOverlayStyles };

package/dist/components/loading-overlay/index.d.ts

@@ -1,13 +1,26 @@
 import { SpinnerProps } from '../spinner/index.js';
 import react__default from 'react';
-import '@chakra-ui/react';
+import { PresenceBaseProps } from '@ark-ui/react/presence';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
 
-declare const LoadingOverlayRoot: react__default.ForwardRefExoticComponent<react__default.RefAttributes<unknown>>;
+interface LoadingOverlayProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiLoadingOverlay'>, PresenceBaseProps {
+    /**
+     * Show or hide the LoadingOverlay.
+     * @default true
+     */
+    loading?: boolean;
+}
+declare const LoadingOverlayRoot: react__default.ForwardRefExoticComponent<LoadingOverlayProps & react__default.RefAttributes<HTMLDivElement>>;
 declare const LoadingOverlaySpinner: react__default.ForwardRefExoticComponent<SpinnerProps & react__default.RefAttributes<HTMLDivElement>>;
-declare const LoadingOverlayText: react__default.ForwardRefExoticComponent<react__default.RefAttributes<unknown>>;
+interface LoadingTextProps extends HTMLChakraProps<'p'> {
+}
+declare const LoadingOverlayText: react__default.ForwardRefExoticComponent<LoadingTextProps & react__default.RefAttributes<HTMLParagraphElement>>;
 
-declare namespace namespace {
-  export { LoadingOverlayRoot as Root, LoadingOverlaySpinner as Spinner, LoadingOverlayText as Text };
+declare namespace loadingOverlay {
+  export { LoadingOverlayRoot as Root, type LoadingOverlayProps as RootProps, LoadingOverlaySpinner as Spinner, LoadingOverlayText as Text, type LoadingTextProps as TextProps };
 }
 
-export { namespace as LoadingOverlay };
+declare const useLoadingOverlayStyles: () => Record<string, _chakra_ui_react.SystemStyleObject>;
+
+export { loadingOverlay as LoadingOverlay, useLoadingOverlayStyles };

package/dist/components/loading-overlay/index.js

@@ -6,9 +6,9 @@ import {
   __export
 } from "../../chunk-RTMS5TJN.js";
 
-// src/components/loading-overlay/namespace.ts
-var namespace_exports = {};
-__export(namespace_exports, {
+// src/components/loading-overlay/loading-overlay.tsx
+var loading_overlay_exports = {};
+__export(loading_overlay_exports, {
   Root: () => LoadingOverlayRoot,
   Spinner: () => LoadingOverlaySpinner,
   Text: () => LoadingOverlayText
@@ -1856,23 +1856,36 @@ var Presence = forwardRef2((props2, ref2) => {
 Presence.displayName = "Presence";
 
 // src/components/loading-overlay/loading-overlay.tsx
-import {
-  chakra,
-  createSlotRecipeContext
-} from "@chakra-ui/react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var { useStyles, withContext, withProvider } = createSlotRecipeContext({
-  key: "loadingOverlay"
+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 as jsx3 } from "react/jsx-runtime";
 var LoadingOverlay = (props2) => {
   const { children, loading = true, ...rest } = props2;
   const [presenceProps, rootProps] = splitPresenceProps(rest);
   return /* @__PURE__ */ jsx3(Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ jsx3(chakra.div, { ...rootProps, children }) });
 };
-var LoadingOverlayRoot = withProvider(LoadingOverlay, "root");
+var LoadingOverlayRoot = withProvider(
+  LoadingOverlay,
+  "root"
+);
 LoadingOverlayRoot.displayName = "LoadingOverlay";
 var LoadingOverlaySpinner = Spinner;
-var LoadingOverlayText = withContext("p", "text");
+var LoadingOverlayText = withContext(
+  "p",
+  "text"
+);
 export {
-  namespace_exports as LoadingOverlay
+  loading_overlay_exports as LoadingOverlay,
+  useLoadingOverlayStyles
 };

package/dist/components/navbar/index.cjs

@@ -19,38 +19,46 @@ var __copyProps = (to, from, except, desc) => {
 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_navbar = require("@saas-ui/core/navbar");
 
-// src/components/navbar/navbar.tsx
+// src/components/navbar/navbar.context.ts
 var import_react = require("@chakra-ui/react");
-var import_navbar = require("@saas-ui/core/navbar");
 var {
   withProvider,
   withContext,
   useStyles: useNavbarStyles
 } = (0, import_react.createSlotRecipeContext)({
-  key: "navbar"
+  key: "suiNavbar"
 });
+
+// src/components/navbar/navbar.tsx
 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"