@saas-ui/react 3.0.0-alpha.9 → 3.0.0-next.0

package/dist/chunk-TWTXZ7PR.js

@@ -0,0 +1,100 @@
+'use client'
+import {
+  IconButton
+} from "./chunk-OJZPPAT6.js";
+import {
+  Button
+} from "./chunk-5HVAMQYO.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  EllipsisIcon
+} from "./chunk-4XB7B73X.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/pagination/pagination.tsx
+var pagination_exports = {};
+__export(pagination_exports, {
+  Context: () => Context,
+  Ellipsis: () => Ellipsis,
+  Item: () => Item,
+  Items: () => Items,
+  NextButton: () => NextButton,
+  NextTrigger: () => NextTrigger,
+  PageText: () => PageText,
+  PrevButton: () => PrevButton,
+  PrevTrigger: () => PrevTrigger,
+  Root: () => Root
+});
+import { forwardRef, useMemo } from "react";
+import {
+  Pagination as ChakraPagination,
+  usePaginationContext
+} from "@chakra-ui/react/pagination";
+import { Text } from "@chakra-ui/react/typography";
+import { createContext } from "@saas-ui/core/utils";
+import { jsx } from "react/jsx-runtime";
+var [RootPropsProvider, useRootProps] = createContext({
+  name: "RootPropsProvider"
+});
+var variantMap = {
+  outline: { default: "ghost", ellipsis: "plain", current: "outline" },
+  solid: { default: "outline", ellipsis: "outline", current: "solid" },
+  subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }
+};
+var Root = forwardRef(
+  function PaginationRoot(props, ref) {
+    const { size = "sm", variant = "outline", ...rest } = props;
+    return /* @__PURE__ */ jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ jsx(ChakraPagination.Root, { ref, type: "button", ...rest }) });
+  }
+);
+var Ellipsis = forwardRef(function PaginationEllipsis(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ jsx(ChakraPagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(EllipsisIcon, {}) }) });
+});
+var Item = forwardRef(
+  function PaginationItem(props, ref) {
+    const { page } = usePaginationContext();
+    const { size, variantMap: variantMap2 } = useRootProps();
+    const current = page === props.value;
+    const variant = current ? variantMap2.current : variantMap2.default;
+    return /* @__PURE__ */ jsx(ChakraPagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Button, { variant, size, children: props.value }) });
+  }
+);
+var PrevButton = forwardRef(function PaginationPrevTrigger(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ jsx(ChakraPagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }) });
+});
+var NextButton = forwardRef(function PaginationNextTrigger(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ jsx(ChakraPagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(ChevronRightIcon, {}) }) });
+});
+var Items = (props) => {
+  return /* @__PURE__ */ jsx(ChakraPagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+    return page.type === "ellipsis" ? /* @__PURE__ */ jsx(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ jsx(Item, { type: "page", value: page.value, ...props }, index);
+  }) });
+};
+var PageText = forwardRef(
+  function PaginationPageText(props, ref) {
+    const { format = "compact", ...rest } = props;
+    const { page, pages, pageRange, count } = usePaginationContext();
+    const content = useMemo(() => {
+      if (format === "short") return `${page} / ${pages.length}`;
+      if (format === "compact") return `${page} of ${pages.length}`;
+      return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
+    }, [format, page, pages.length, pageRange, count]);
+    return /* @__PURE__ */ jsx(Text, { fontWeight: "medium", ref, ...rest, children: content });
+  }
+);
+var PrevTrigger = ChakraPagination.PrevTrigger;
+var NextTrigger = ChakraPagination.NextTrigger;
+var Context = ChakraPagination.Context;
+
+export {
+  pagination_exports
+};

package/dist/{chunk-DPMEXCSG.js → chunk-U23VDAWJ.js}

@@ -8,6 +8,7 @@ var sidebar_exports = {};
 __export(sidebar_exports, {
   Backdrop: () => SidebarBackdrop,
   Body: () => SidebarBody,
+  Context: () => SidebarContext,
   FlyoutTrigger: () => SidebarFlyoutTrigger,
   Footer: () => SidebarFooter,
   Group: () => SidebarGroup,
@@ -17,8 +18,8 @@ __export(sidebar_exports, {
   GroupTitle: () => SidebarGroupTitle,
   Header: () => SidebarHeader,
   NavButton: () => SidebarNavButton,
+  NavButtonEndElement: () => SidebarNavButtonEndElement,
   NavItem: () => SidebarNavItem,
-  NavItemEndElement: () => SidebarNavItemEndElement,
   Provider: () => SidebarProvider,
   Root: () => SidebarRoot,
   Track: () => SidebarTrack,
@@ -124,7 +125,12 @@ var SidebarNavItem = withItemProvider(
 var SidebarNavButton = withItemContext(Sidebar.NavButton, "button", {
   forwardAsChild: true
 });
-var SidebarNavItemEndElement = withItemContext(Sidebar.NavItemEndElement, "endElement");
+var SidebarNavButtonEndElement = withItemContext(Sidebar.NavItemEndElement, "endElement", {
+  defaultProps: {
+    "data-slot": "endElement"
+  }
+});
+var SidebarContext = Sidebar.Context;
 
 // src/components/sidebar/index.ts
 import { useSidebar as useSidebar2 } from "@saas-ui/core/sidebar";

package/dist/chunk-U3EPRSD3.js

@@ -0,0 +1,20 @@
+'use client'
+
+// src/components/status/status.tsx
+import { forwardRef } from "react";
+import { Status as ChakraStatus } from "@chakra-ui/react/status";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Status = forwardRef(
+  function Status2(props, ref) {
+    const { children, value, ...rest } = props;
+    const color = value ? `status.${value}` : void 0;
+    return /* @__PURE__ */ jsxs(ChakraStatus.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ jsx(ChakraStatus.Indicator, { bg: color }),
+      children
+    ] });
+  }
+);
+
+export {
+  Status
+};

package/dist/chunk-UEXUCHDD.js

@@ -0,0 +1,34 @@
+'use client'
+
+// src/components/skeleton/skeleton.tsx
+import { forwardRef } from "react";
+import { Circle } from "@chakra-ui/react/box";
+import { Skeleton as ChakraSkeleton } from "@chakra-ui/react/skeleton";
+import { Stack } from "@chakra-ui/react/stack";
+import { jsx } from "react/jsx-runtime";
+var SkeletonCircle = (props) => {
+  const { size, ...rest } = props;
+  return /* @__PURE__ */ jsx(Circle, { size, asChild: true, children: /* @__PURE__ */ jsx(ChakraSkeleton, { ...rest }) });
+};
+var SkeletonText = forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, gap, ...rest } = props;
+    return /* @__PURE__ */ jsx(Stack, { gap, width: "full", ref, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      ChakraSkeleton,
+      {
+        height: "4",
+        ...props,
+        _last: { maxW: "80%" },
+        ...rest
+      },
+      index
+    )) });
+  }
+);
+var Skeleton = ChakraSkeleton;
+
+export {
+  SkeletonCircle,
+  SkeletonText,
+  Skeleton
+};

package/dist/chunk-UIP2CHMU.js

@@ -0,0 +1,8 @@
+'use client'
+
+// src/components/checkmark/index.ts
+import { Checkmark } from "@chakra-ui/react/checkmark";
+
+export {
+  Checkmark
+};

package/dist/{chunk-JGHXJ3PI.js → chunk-UNF77J24.js}

@@ -1,11 +1,11 @@
 'use client'
 import {
   Button
-} from "./chunk-BCNPBZZK.js";
+} from "./chunk-5HVAMQYO.js";
 import {
   CheckIcon,
   ChevronRightIcon
-} from "./chunk-VDXTEASE.js";
+} from "./chunk-4XB7B73X.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";
@@ -31,11 +31,9 @@ __export(menu_exports, {
   TriggerItem: () => MenuTriggerItem
 });
 import { forwardRef } from "react";
-import {
-  AbsoluteCenter,
-  Menu as ChakraMenu,
-  Portal
-} from "@chakra-ui/react";
+import { AbsoluteCenter } from "@chakra-ui/react/center";
+import { Menu as ChakraMenu } from "@chakra-ui/react/menu";
+import { Portal } from "@chakra-ui/react/portal";
 import { jsx, jsxs } from "react/jsx-runtime";
 var MenuContent = forwardRef(
   function MenuContent2(props, ref) {
@@ -84,7 +82,7 @@ var MenuTriggerItem = forwardRef(
 );
 var MenuButton = forwardRef(
   function MenuButton2(props, ref) {
-    return /* @__PURE__ */ jsx(MenuTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Button, {}) });
+    return /* @__PURE__ */ jsx(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ jsx(Button, { ...props }) });
   }
 );
 var MenuRadioItemGroup = ChakraMenu.RadioItemGroup;

package/dist/{chunk-M7FOBCOV.js → chunk-VJ4UOABT.js}

@@ -1,4 +1,7 @@
 'use client'
+import {
+  Avatar
+} from "./chunk-FN7TU5F5.js";
 
 // src/components/persona/persona.tsx
 import * as React2 from "react";
@@ -6,7 +9,6 @@ import * as React2 from "react";
 // src/components/persona/persona-primitive.tsx
 import { forwardRef } from "react";
 import {
-  Avatar,
   chakra
 } from "@chakra-ui/react";
 import { dataAttr } from "@saas-ui/core/utils";
@@ -22,7 +24,7 @@ var {
 });
 
 // src/components/persona/persona-primitive.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var PersonaRoot = withProvider(
   forwardRef((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
@@ -57,19 +59,7 @@ var PersonaAvatar = forwardRef(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsxs(Avatar.Root, { ref, ...rest, children: [
-      /* @__PURE__ */ jsx(Avatar.Fallback, { children: getInitials(name) }),
-      /* @__PURE__ */ jsx(
-        Avatar.Image,
-        {
-          src,
-          srcSet,
-          loading,
-          onError
-        }
-      ),
-      children
-    ] });
+    return /* @__PURE__ */ jsx(Avatar, { ref, ...rest, children });
   }
 );
 var PersonaPresenceBadge = withContext("span", "presence");
@@ -92,7 +82,7 @@ var PersonaTertiaryLabel = withContext(
 );
 
 // src/components/persona/persona.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Persona = React2.forwardRef(
   (props, ref) => {
     const {
@@ -113,14 +103,16 @@ var Persona = React2.forwardRef(
       onError,
       src,
       srcSet,
+      fallback,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(
       PersonaRoot,
       {
         ref,
         outOfOffice: isOutOfOffice,
         presence,
+        size,
         ...rest,
         children: [
           /* @__PURE__ */ jsx2(
@@ -134,10 +126,11 @@ var Persona = React2.forwardRef(
               onError,
               src,
               srcSet,
-              children: /* @__PURE__ */ jsx2(PersonaPresenceBadge, { children: presenceIcon })
+              fallback,
+              children: presence ? /* @__PURE__ */ jsx2(PersonaPresenceBadge, { children: presenceIcon }) : null
             }
           ),
-          !hideDetails && /* @__PURE__ */ jsxs2(PersonaDetails, { children: [
+          !hideDetails && /* @__PURE__ */ jsxs(PersonaDetails, { children: [
             /* @__PURE__ */ jsx2(PersonaLabel, { children: label || name }),
             secondaryLabel && /* @__PURE__ */ jsx2(PersonaSecondaryLabel, { children: secondaryLabel }),
             tertiaryLabel && /* @__PURE__ */ jsx2(PersonaTertiaryLabel, { children: tertiaryLabel }),

package/dist/chunk-WJZED26X.js

@@ -0,0 +1,28 @@
+'use client'
+
+// src/components/tag/tag.tsx
+import { forwardRef } from "react";
+import { Tag as ChakraTag } from "@chakra-ui/react/tag";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tag = forwardRef(
+  function Tag2(props, ref) {
+    const {
+      startElement,
+      endElement,
+      onClose,
+      closable = !!onClose,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(ChakraTag.Root, { ref, ...rest, children: [
+      startElement && /* @__PURE__ */ jsx(ChakraTag.StartElement, { children: startElement }),
+      /* @__PURE__ */ jsx(ChakraTag.Label, { children }),
+      endElement && /* @__PURE__ */ jsx(ChakraTag.EndElement, { children: endElement }),
+      closable && /* @__PURE__ */ jsx(ChakraTag.EndElement, { children: /* @__PURE__ */ jsx(ChakraTag.CloseTrigger, { onClick: onClose }) })
+    ] });
+  }
+);
+
+export {
+  Tag
+};

package/dist/chunk-XW747T2R.js

@@ -0,0 +1,43 @@
+'use client'
+import {
+  popover_exports
+} from "./chunk-JPY2QZLC.js";
+
+// src/components/toggle-tip/toggle-tip.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToggleTip = React.forwardRef(
+  function ToggleTip2(props, ref) {
+    const {
+      showArrow,
+      children,
+      portalled = true,
+      content,
+      portalRef,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(popover_exports.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [
+      /* @__PURE__ */ jsx(popover_exports.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsxs(
+        popover_exports.Content,
+        {
+          width: "auto",
+          px: "2",
+          py: "1",
+          textStyle: "xs",
+          rounded: "sm",
+          portalled,
+          ref,
+          children: [
+            showArrow && /* @__PURE__ */ jsx(popover_exports.Arrow, {}),
+            content
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+export {
+  ToggleTip
+};

package/dist/chunk-XX2OY7LK.js

@@ -0,0 +1,10 @@
+'use client'
+
+// src/components/field/index.ts
+import { Field, useFieldContext, useFieldStyles } from "@chakra-ui/react/field";
+
+export {
+  Field,
+  useFieldContext,
+  useFieldStyles
+};

package/dist/chunk-YHQ5JGCC.js

@@ -0,0 +1 @@
+'use client'

package/dist/chunk-YLZEO3RK.js

@@ -0,0 +1,24 @@
+'use client'
+import {
+  ToggleTip
+} from "./chunk-XW747T2R.js";
+import {
+  IconButton
+} from "./chunk-OJZPPAT6.js";
+import {
+  InfoIcon
+} from "./chunk-4XB7B73X.js";
+
+// src/components/info-tip/info-tip.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var InfoTip = React.forwardRef(
+  function InfoTip2(props, ref) {
+    const { children, icon, "aria-label": ariaLabel = "Info", ...rest } = props;
+    return /* @__PURE__ */ jsx(ToggleTip, { content: children, ...rest, ref, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": ariaLabel, size: "2xs", children: icon != null ? icon : /* @__PURE__ */ jsx(InfoIcon, {}) }) });
+  }
+);
+
+export {
+  InfoTip
+};

package/dist/chunk-YMCOU2N5.js

@@ -0,0 +1,8 @@
+'use client'
+
+// src/components/code/index.ts
+import { Code } from "@chakra-ui/react/code";
+
+export {
+  Code
+};

package/dist/{chunk-6ZNR6N2K.js → chunk-YTTZX7ZE.js}

@@ -4,7 +4,7 @@
 import { forwardRef } from "react";
 import {
   createSlotRecipeContext
-} from "@chakra-ui/react";
+} from "@chakra-ui/react/styled-system";
 import { jsx, jsxs } from "react/jsx-runtime";
 var {
   withProvider,

package/dist/chunk-Z37BQ5VU.js

@@ -0,0 +1,54 @@
+'use client'
+import {
+  CloseButton
+} from "./chunk-H7KPEI6P.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/drawer/drawer.tsx
+var drawer_exports = {};
+__export(drawer_exports, {
+  ActionTrigger: () => ActionTrigger,
+  Backdrop: () => Backdrop,
+  Body: () => Body,
+  CloseButton: () => CloseButton2,
+  CloseTrigger: () => CloseTrigger,
+  Content: () => Content,
+  Context: () => Context,
+  Description: () => Description,
+  Footer: () => Footer,
+  Header: () => Header,
+  Root: () => Root,
+  Title: () => Title,
+  Trigger: () => Trigger
+});
+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 Content = forwardRef(
+  function DrawerContent(props, ref) {
+    const { children, portalled = true, portalRef, offset, ...rest } = props;
+    return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(ChakraDrawer.Positioner, { padding: offset, children: /* @__PURE__ */ jsx(ChakraDrawer.Content, { ref, ...rest, asChild: false, children }) }) });
+  }
+);
+var CloseButton2 = forwardRef(function DrawerCloseTrigger(props, ref) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(ChakraDrawer.CloseTrigger, { ...rest, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children }) });
+});
+var CloseTrigger = ChakraDrawer.CloseTrigger;
+var Trigger = ChakraDrawer.Trigger;
+var Root = ChakraDrawer.Root;
+var Footer = ChakraDrawer.Footer;
+var Header = ChakraDrawer.Header;
+var Body = ChakraDrawer.Body;
+var Backdrop = ChakraDrawer.Backdrop;
+var Description = ChakraDrawer.Description;
+var Title = ChakraDrawer.Title;
+var ActionTrigger = ChakraDrawer.ActionTrigger;
+var Context = DialogContext;
+
+export {
+  drawer_exports
+};

package/dist/{chunk-L356FPLY.js → chunk-Z3SWPGPQ.js}

@@ -2,7 +2,7 @@
 
 // src/components/checkbox/checkbox.tsx
 import { forwardRef } from "react";
-import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react/checkbox";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Checkbox = forwardRef(
   function Checkbox2(props, ref) {

package/dist/{chunk-NSD5HRIP.js → chunk-ZUT5GZTD.js}

@@ -14,7 +14,7 @@ __export(grid_list_exports, {
 import { GridList } from "@saas-ui/core/grid-list";
 
 // src/components/grid-list/grid-list.context.ts
-import { createSlotRecipeContext } from "@chakra-ui/react";
+import { createSlotRecipeContext } from "@chakra-ui/react/styled-system";
 var {
   withProvider,
   withContext,