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

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

@@ -3,7 +3,27 @@ import react__default from 'react';
 import { HTMLChakraProps, SlotRecipeProps, AvatarRootProps, ImageProps } from '@chakra-ui/react';
 
 type Presence = 'online' | 'offline' | 'busy' | 'dnd' | 'away';
-interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'persona'> {
+interface PresenceConfig {
+    label: string;
+    color: string;
+}
+type PresenceOptions<P extends string = Presence> = Record<P, PresenceConfig>;
+/**
+ * The presence configuration object.
+ *
+ * Default presence values: online, offline, busy, dnd, away
+ *
+ * You can overwrite colors in the theme semantic tokens.
+ * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
+ *
+ * Or add a custom presence value
+ * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+declare const defaultPresenceOptions: PresenceOptions;
+
+interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'> {
     /**
      * Indicates that a person is out of office. Changes the presence badge style.
      */
@@ -78,7 +98,7 @@ interface PersonaOptions {
      */
     hideDetails?: boolean;
 }
-interface PersonaProps extends PersonaOptions, Omit<PersonaAvatarProps$1, 'size'>, PersonaRootProps {
+interface PersonaProps extends PersonaOptions, PersonaAvatarProps$1, PersonaRootProps {
 }
 /**
  * The wrapper component that handles default composition.
@@ -90,4 +110,4 @@ interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label'
 }
 declare const PersonaAvatar: react.ForwardRefExoticComponent<PersonaAvatarProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Persona, PersonaAvatar, type PersonaAvatarProps, type PersonaProps };
+export { Persona, PersonaAvatar, type PersonaAvatarProps, type PersonaProps, type Presence, type PresenceConfig, defaultPresenceOptions };

package/dist/components/persona/index.js

@@ -8,18 +8,22 @@ import * as React2 from "react";
 import { forwardRef } from "react";
 import {
   Avatar,
-  chakra,
-  createSlotRecipeContext
+  chakra
 } from "@chakra-ui/react";
 import { dataAttr } from "@saas-ui/core/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/persona/persona.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
 var {
   useStyles: usePersonaStyles,
   withProvider,
   withContext
 } = createSlotRecipeContext({
-  key: "persona"
+  key: "suiPersona"
 });
+
+// src/components/persona/persona-primitive.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var PersonaRoot = withProvider(
   forwardRef((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
@@ -79,8 +83,14 @@ var PersonaLabel = withContext(
   "label"
 );
 PersonaLabel.displayName = "PersonaLabel";
-var PersonaSecondaryLabel = withContext("span", "secondaryLabel");
-var PersonaTertiaryLabel = withContext("span", "tertiaryLabel");
+var PersonaSecondaryLabel = withContext(
+  "span",
+  "secondaryLabel"
+);
+var PersonaTertiaryLabel = withContext(
+  "span",
+  "tertiaryLabel"
+);
 
 // src/components/persona/persona.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -143,7 +153,32 @@ Persona.displayName = "Persona";
 var PersonaAvatar2 = React2.forwardRef(function PersonaAvatar3(props, ref) {
   return /* @__PURE__ */ jsx2(Persona, { ref, ...props, hideDetails: true });
 });
+
+// src/components/persona/presence.ts
+var defaultPresenceOptions = {
+  online: {
+    label: "Online",
+    color: "presence.online"
+  },
+  offline: {
+    label: "Offline",
+    color: "presence.offline"
+  },
+  busy: {
+    label: "Busy",
+    color: "presence.busy"
+  },
+  dnd: {
+    label: "Do-not-disturb",
+    color: "presence.dnd"
+  },
+  away: {
+    label: "Away",
+    color: "presence.away"
+  }
+};
 export {
   Persona,
-  PersonaAvatar2 as PersonaAvatar
+  PersonaAvatar2 as PersonaAvatar,
+  defaultPresenceOptions
 };

package/dist/components/sidebar/index.cjs

@@ -19,18 +19,18 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/sidebar/index.ts
-var sidebar_exports = {};
-__export(sidebar_exports, {
-  Sidebar: () => namespace_exports,
-  useSidebar: () => import_sidebar.useSidebar,
+var sidebar_exports2 = {};
+__export(sidebar_exports2, {
+  Sidebar: () => sidebar_exports,
+  useSidebar: () => import_sidebar2.useSidebar,
   useSidebarItemStyles: () => useSidebarItemStyles,
   useSidebarStyles: () => useSidebarStyles
 });
-module.exports = __toCommonJS(sidebar_exports);
+module.exports = __toCommonJS(sidebar_exports2);
 
-// src/components/sidebar/namespace.ts
-var namespace_exports = {};
-__export(namespace_exports, {
+// src/components/sidebar/sidebar.tsx
+var sidebar_exports = {};
+__export(sidebar_exports, {
   Backdrop: () => SidebarBackdrop,
   Body: () => SidebarBody,
   FlyoutTrigger: () => SidebarFlyoutTrigger,
@@ -49,11 +49,10 @@ __export(namespace_exports, {
   Track: () => SidebarTrack,
   Trigger: () => SidebarTrigger
 });
+var import_sidebar = require("@saas-ui/core/sidebar");
 
-// src/components/sidebar/sidebar.tsx
+// src/components/sidebar/sidebar.context.ts
 var import_react = require("@chakra-ui/react");
-var import_sidebar = require("@saas-ui/core/sidebar");
-var import_jsx_runtime = require("react/jsx-runtime");
 var {
   withContext,
   useRecipeResult,
@@ -61,8 +60,18 @@ var {
   ClassNamesProvider,
   useStyles: useSidebarStyles
 } = (0, import_react.createSlotRecipeContext)({
-  key: "sidebar"
+  key: "suiSidebar"
+});
+var {
+  withProvider: withItemProvider,
+  withContext: withItemContext,
+  useStyles: useSidebarItemStyles
+} = (0, import_react.createSlotRecipeContext)({
+  key: "suiSidebarNavItem"
 });
+
+// src/components/sidebar/sidebar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var SidebarProvider = function SidebarProvider2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.Sidebar.Provider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RecipeProvider, { ...props, children: props.children }) });
 };
@@ -78,21 +87,35 @@ var SidebarRoot = withContext(
   import_sidebar.Sidebar.Root,
   "root"
 );
-var SidebarTrigger = withContext(import_sidebar.Sidebar.Trigger, "trigger", {
-  forwardAsChild: true
-});
+var SidebarTrigger = withContext(
+  import_sidebar.Sidebar.Trigger,
+  "trigger",
+  {
+    forwardAsChild: true
+  }
+);
 var SidebarFlyoutTrigger = withContext(import_sidebar.Sidebar.FlyoutTrigger, "flyoutTrigger", {
   forwardAsChild: true
 });
-var SidebarBackdrop = withContext(import_sidebar.Sidebar.Backdrop, "backdrop", {
-  forwardAsChild: true
-});
-var SidebarHeader = withContext(import_sidebar.Sidebar.Header, "header");
+var SidebarBackdrop = withContext(
+  import_sidebar.Sidebar.Backdrop,
+  "backdrop",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarHeader = withContext(
+  import_sidebar.Sidebar.Header,
+  "header"
+);
 var SidebarBody = withContext(
   import_sidebar.Sidebar.Body,
   "body"
 );
-var SidebarFooter = withContext(import_sidebar.Sidebar.Footer, "footer");
+var SidebarFooter = withContext(
+  import_sidebar.Sidebar.Footer,
+  "footer"
+);
 var SidebarTrack = withContext(
   import_sidebar.Sidebar.Track,
   "track",
@@ -109,22 +132,27 @@ var SidebarGroup = withContext(
     }
   }
 );
-var SidebarGroupHeader = withContext(import_sidebar.Sidebar.GroupHeader, "groupHeader");
+var SidebarGroupHeader = withContext(
+  import_sidebar.Sidebar.GroupHeader,
+  "groupHeader"
+);
 var SidebarGroupTitle = withContext(import_sidebar.Sidebar.GroupTitle, "groupTitle");
 var SidebarGroupEndElement = withContext(import_sidebar.Sidebar.GroupEndElement, "groupEndElement");
-var SidebarGroupContent = withContext(import_sidebar.Sidebar.GroupContent, "groupContent");
-var {
-  withProvider: withItemProvider,
-  withContext: withItemContext,
-  useStyles: useSidebarItemStyles
-} = (0, import_react.createSlotRecipeContext)({
-  key: "sidebarNavItem"
-});
-var SidebarNavItem = withItemProvider(import_sidebar.Sidebar.NavItem, "item");
+var SidebarGroupContent = withContext(
+  import_sidebar.Sidebar.GroupContent,
+  "groupContent"
+);
+var SidebarNavItem = withItemProvider(
+  import_sidebar.Sidebar.NavItem,
+  "item"
+);
 var SidebarNavButton = withItemContext(import_sidebar.Sidebar.NavButton, "button", {
   forwardAsChild: true
 });
 var SidebarNavItemEndElement = withItemContext(import_sidebar.Sidebar.NavItemEndElement, "endElement");
+
+// src/components/sidebar/index.ts
+var import_sidebar2 = require("@saas-ui/core/sidebar");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Sidebar,