@saas-ui/react 3.0.0-alpha.21 → 3.0.0-alpha.23

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.23
+
+### Patch Changes
+
+- 8ac704a: Improved tag recipe and support status component.
+
+## 3.0.0-alpha.22
+
+### Minor Changes
+
+- Added Status component
+- Added Badge and Tag components
+
+### Patch Changes
+
+- Fixed GridList prop forwarding
+- Changed default Button variant to surface
+- Fixed issue where Button colorPalette could not be changed using the recipe
+- Rename Drawer and Dialog CloseTrigger to CloseButton
+- Improved Button glass variant hover color
+- Improved semantic grays and shadows balance
+
 ## 3.0.0-alpha.21
 
 ### Patch Changes

package/dist/{chunk-72LEGXHY.js → chunk-EQ7Q6HRE.js}

@@ -12,7 +12,8 @@ __export(namespace_exports, {
   ActionTrigger: () => DialogActionTrigger,
   Backdrop: () => DialogBackdrop,
   Body: () => DialogBody,
-  CloseTrigger: () => DialogCloseTrigger,
+  CloseButton: () => DialogCloseButton,
+  CloseTrigger: () => DialogCloseTrigger2,
   Content: () => DialogContent,
   Context: () => DialogContext,
   Description: () => DialogDescription,
@@ -43,19 +44,10 @@ var DialogContent = forwardRef(
     ] });
   }
 );
-var DialogCloseTrigger = forwardRef(function DialogCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsx(
-    ChakraDialog.CloseTrigger,
-    {
-      position: "absolute",
-      top: "2",
-      insetEnd: "2",
-      ...props,
-      asChild: true,
-      children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children: props.children })
-    }
-  );
+var DialogCloseButton = forwardRef(function DialogCloseTrigger(props, ref) {
+  return /* @__PURE__ */ jsx(ChakraDialog.CloseTrigger, { position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children: props.children }) });
 });
+var DialogCloseTrigger2 = ChakraDialog.CloseTrigger;
 var DialogRoot = ChakraDialog.Root;
 var DialogFooter = ChakraDialog.Footer;
 var DialogHeader = ChakraDialog.Header;

package/dist/{chunk-4VH4IGVF.js → chunk-GWC5GCMW.js}

@@ -1,4 +1,7 @@
 'use client'
+import {
+  Avatar
+} from "./chunk-JO4WJVYO.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,9 +103,10 @@ var Persona = React2.forwardRef(
       onError,
       src,
       srcSet,
+      fallback,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(
       PersonaRoot,
       {
         ref,
@@ -135,10 +126,11 @@ var Persona = React2.forwardRef(
               onError,
               src,
               srcSet,
+              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-IEWHAXXU.js

@@ -0,0 +1,28 @@
+'use client'
+
+// src/components/tag/tag.tsx
+import { forwardRef } from "react";
+import { Tag as ChakraTag } from "@chakra-ui/react";
+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-INV6RT5B.js

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

package/dist/{chunk-C7B3ELC4.js → chunk-KFXNVUEZ.js}

@@ -1,11 +1,11 @@
 'use client'
-import {
-  Button
-} from "./chunk-BCNPBZZK.js";
 import {
   CheckIcon,
   ChevronRightIcon
 } from "./chunk-4TPVIHNO.js";
+import {
+  Button
+} from "./chunk-NGSHWY7E.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";

package/dist/chunk-MS2ELLDY.js

@@ -0,0 +1,26 @@
+'use client'
+import {
+  Button
+} from "./chunk-NGSHWY7E.js";
+
+// src/components/icon-button/icon-button.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var IconButton = forwardRef(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        px: "0",
+        py: "0",
+        _icon: { fontSize: "1.2em" },
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+export {
+  IconButton
+};

package/dist/chunk-NGSHWY7E.js

@@ -0,0 +1,27 @@
+'use client'
+
+// src/components/button/button.tsx
+import { forwardRef } from "react";
+import {
+  AbsoluteCenter,
+  Button as ButtonPrimitive,
+  Span,
+  Spinner
+} from "@chakra-ui/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(
+  function Button2(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(ButtonPrimitive, { disabled: loading || disabled, ref, ...rest, children: loading && !loadingText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AbsoluteCenter, { display: "inline-flex", children: /* @__PURE__ */ jsx(Spinner, { size: "inherit", color: "inherit" }) }),
+      /* @__PURE__ */ jsx(Span, { opacity: 0, children })
+    ] }) : loading && loadingText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "inherit", color: "inherit" }),
+      loadingText
+    ] }) : children });
+  }
+);
+
+export {
+  Button
+};

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

@@ -30,11 +30,7 @@ var GridListRoot = withProvider(
 );
 var GridListItem = withContext(
   GridList.Item,
-  "item",
-  {
-    forwardProps: ["role"],
-    forwardAsChild: false
-  }
+  "item"
 );
 var GridListHeader = withContext(
   GridList.Header,

package/dist/{chunk-WS5XGFSL.js → chunk-VJ4NCA6R.js}

@@ -12,7 +12,8 @@ __export(namespace_exports, {
   ActionTrigger: () => DrawerActionTrigger,
   Backdrop: () => DrawerBackdrop,
   Body: () => DrawerBody,
-  CloseTrigger: () => DrawerCloseTrigger,
+  CloseButton: () => DrawerCloseButton,
+  CloseTrigger: () => DrawerCloseTrigger2,
   Content: () => DrawerContent,
   Context: () => DrawerContext,
   Description: () => DrawerDescription,
@@ -34,19 +35,11 @@ var DrawerContent = forwardRef(
     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 DrawerCloseTrigger = forwardRef(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsx(
-    ChakraDrawer.CloseTrigger,
-    {
-      position: "absolute",
-      top: "2",
-      insetEnd: "2",
-      ...props,
-      asChild: true,
-      children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref })
-    }
-  );
+var DrawerCloseButton = forwardRef(function DrawerCloseTrigger(props, ref) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(ChakraDrawer.CloseTrigger, { position: "absolute", ...rest, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children }) });
 });
+var DrawerCloseTrigger2 = ChakraDrawer.CloseTrigger;
 var DrawerTrigger = ChakraDrawer.Trigger;
 var DrawerRoot = ChakraDrawer.Root;
 var DrawerFooter = ChakraDrawer.Footer;

package/dist/chunk-YHQ5JGCC.js

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

package/dist/chunk-YKSY7UOM.js

@@ -0,0 +1,20 @@
+'use client'
+
+// src/components/status/status.tsx
+import { forwardRef } from "react";
+import { Status as ChakraStatus } from "@chakra-ui/react";
+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/components/avatar/index.js

@@ -1,8 +1,9 @@
 'use client'
+import "../../chunk-YHQ5JGCC.js";
 import {
   Avatar,
   AvatarGroup
-} from "../../chunk-UCQ3LZIE.js";
+} from "../../chunk-JO4WJVYO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   Avatar,

package/dist/components/badge/index.cjs

@@ -0,0 +1,31 @@
+'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/badge/index.ts
+var badge_exports = {};
+__export(badge_exports, {
+  Badge: () => import_react.Badge
+});
+module.exports = __toCommonJS(badge_exports);
+var import_react = require("@chakra-ui/react");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge
+});

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

@@ -0,0 +1 @@
+export { Badge, BadgeProps } from '@chakra-ui/react';

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

@@ -0,0 +1 @@
+export { Badge, BadgeProps } from '@chakra-ui/react';

package/dist/components/badge/index.js

@@ -0,0 +1,8 @@
+'use client'
+import {
+  Badge
+} from "../../chunk-INV6RT5B.js";
+import "../../chunk-RTMS5TJN.js";
+export {
+  Badge
+};

package/dist/components/button/index.cjs

@@ -31,32 +31,14 @@ 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,
-      variant = "glass",
-      colorPalette = variant === "glass" ? "accent" : "gray",
-      ...rest
-    } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react2.Button,
-      {
-        colorPalette,
-        disabled: loading || disabled,
-        variant,
-        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
-      }
-    );
+    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 });
   }
 );
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/button/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   Button
-} from "../../chunk-BCNPBZZK.js";
+} from "../../chunk-NGSHWY7E.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   Button

package/dist/components/dialog/index.cjs

@@ -31,7 +31,8 @@ __export(namespace_exports, {
   ActionTrigger: () => DialogActionTrigger,
   Backdrop: () => DialogBackdrop,
   Body: () => DialogBody,
-  CloseTrigger: () => DialogCloseTrigger,
+  CloseButton: () => DialogCloseButton,
+  CloseTrigger: () => DialogCloseTrigger2,
   Content: () => DialogContent,
   Context: () => import_dialog.DialogContext,
   Description: () => DialogDescription,
@@ -184,19 +185,10 @@ var DialogContent = (0, import_react4.forwardRef)(
     ] });
   }
 );
-var DialogCloseTrigger = (0, import_react4.forwardRef)(function DialogCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react5.Dialog.CloseTrigger,
-    {
-      position: "absolute",
-      top: "2",
-      insetEnd: "2",
-      ...props,
-      asChild: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref, children: props.children })
-    }
-  );
+var DialogCloseButton = (0, import_react4.forwardRef)(function DialogCloseTrigger(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Dialog.CloseTrigger, { position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref, children: props.children }) });
 });
+var DialogCloseTrigger2 = import_react5.Dialog.CloseTrigger;
 var DialogRoot = import_react5.Dialog.Root;
 var DialogFooter = import_react5.Dialog.Footer;
 var DialogHeader = import_react5.Dialog.Header;

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

@@ -8,6 +8,7 @@ interface DialogContentProps extends Dialog.ContentProps {
     backdrop?: boolean;
 }
 declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DialogCloseButton: react.ForwardRefExoticComponent<Dialog.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogCloseTrigger: react.ForwardRefExoticComponent<Dialog.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 type DialogRootProps = Dialog.RootProps;
 declare const DialogRoot: react.FC<Dialog.RootProps>;
@@ -21,7 +22,7 @@ declare const DialogTrigger: react.ForwardRefExoticComponent<Dialog.TriggerProps
 declare const DialogActionTrigger: react.ForwardRefExoticComponent<Dialog.ActionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare namespace namespace {
-  export { DialogActionTrigger as ActionTrigger, DialogBackdrop as Backdrop, DialogBody as Body, DialogCloseTrigger as CloseTrigger, DialogContent as Content, type DialogContentProps as ContentProps, DialogContext as Context, DialogDescription as Description, DialogFooter as Footer, DialogHeader as Header, DialogRoot as Root, type DialogRootProps as RootProps, DialogTitle as Title, DialogTrigger as Trigger };
+  export { DialogActionTrigger as ActionTrigger, DialogBackdrop as Backdrop, DialogBody as Body, DialogCloseButton as CloseButton, DialogCloseTrigger as CloseTrigger, DialogContent as Content, type DialogContentProps as ContentProps, DialogContext as Context, DialogDescription as Description, DialogFooter as Footer, DialogHeader as Header, DialogRoot as Root, type DialogRootProps as RootProps, DialogTitle as Title, DialogTrigger as Trigger };
 }
 
 export { namespace as Dialog };

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

@@ -8,6 +8,7 @@ interface DialogContentProps extends Dialog.ContentProps {
     backdrop?: boolean;
 }
 declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DialogCloseButton: react.ForwardRefExoticComponent<Dialog.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogCloseTrigger: react.ForwardRefExoticComponent<Dialog.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 type DialogRootProps = Dialog.RootProps;
 declare const DialogRoot: react.FC<Dialog.RootProps>;
@@ -21,7 +22,7 @@ declare const DialogTrigger: react.ForwardRefExoticComponent<Dialog.TriggerProps
 declare const DialogActionTrigger: react.ForwardRefExoticComponent<Dialog.ActionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare namespace namespace {
-  export { DialogActionTrigger as ActionTrigger, DialogBackdrop as Backdrop, DialogBody as Body, DialogCloseTrigger as CloseTrigger, DialogContent as Content, type DialogContentProps as ContentProps, DialogContext as Context, DialogDescription as Description, DialogFooter as Footer, DialogHeader as Header, DialogRoot as Root, type DialogRootProps as RootProps, DialogTitle as Title, DialogTrigger as Trigger };
+  export { DialogActionTrigger as ActionTrigger, DialogBackdrop as Backdrop, DialogBody as Body, DialogCloseButton as CloseButton, DialogCloseTrigger as CloseTrigger, DialogContent as Content, type DialogContentProps as ContentProps, DialogContext as Context, DialogDescription as Description, DialogFooter as Footer, DialogHeader as Header, DialogRoot as Root, type DialogRootProps as RootProps, DialogTitle as Title, DialogTrigger as Trigger };
 }
 
 export { namespace as Dialog };

package/dist/components/dialog/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   namespace_exports
-} from "../../chunk-72LEGXHY.js";
+} from "../../chunk-EQ7Q6HRE.js";
 import "../../chunk-BKYGKH3L.js";
 import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";

package/dist/components/drawer/index.cjs

@@ -31,7 +31,8 @@ __export(namespace_exports, {
   ActionTrigger: () => DrawerActionTrigger,
   Backdrop: () => DrawerBackdrop,
   Body: () => DrawerBody,
-  CloseTrigger: () => DrawerCloseTrigger,
+  CloseButton: () => DrawerCloseButton,
+  CloseTrigger: () => DrawerCloseTrigger2,
   Content: () => DrawerContent,
   Context: () => DrawerContext,
   Description: () => DrawerDescription,
@@ -175,19 +176,11 @@ var DrawerContent = (0, import_react4.forwardRef)(
     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_react4.forwardRef)(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react5.Drawer.CloseTrigger,
-    {
-      position: "absolute",
-      top: "2",
-      insetEnd: "2",
-      ...props,
-      asChild: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref })
-    }
-  );
+var DrawerCloseButton = (0, import_react4.forwardRef)(function DrawerCloseTrigger(props, ref) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Drawer.CloseTrigger, { position: "absolute", ...rest, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref, children }) });
 });
+var DrawerCloseTrigger2 = import_react5.Drawer.CloseTrigger;
 var DrawerTrigger = import_react5.Drawer.Trigger;
 var DrawerRoot = import_react5.Drawer.Root;
 var DrawerFooter = import_react5.Drawer.Footer;

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

@@ -8,6 +8,7 @@ interface DrawerContentProps extends Drawer.ContentProps {
     offset?: Drawer.ContentProps['padding'];
 }
 declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerCloseButton: react.ForwardRefExoticComponent<Drawer.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DrawerCloseTrigger: react.ForwardRefExoticComponent<Drawer.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DrawerTrigger: react.ForwardRefExoticComponent<Drawer.TriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DrawerRoot: react.FC<Drawer.RootProps>;
@@ -22,7 +23,7 @@ declare const DrawerContext: (props: _ark_ui_react.DialogContextProps) => react.
 type DrawerRootProps = Drawer.RootProps;
 
 declare namespace namespace {
-  export { DrawerActionTrigger as ActionTrigger, DrawerBackdrop as Backdrop, DrawerBody as Body, DrawerCloseTrigger as CloseTrigger, DrawerContent as Content, type DrawerContentProps as ContentProps, DrawerContext as Context, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerRoot as Root, type DrawerRootProps as RootProps, DrawerTitle as Title, DrawerTrigger as Trigger };
+  export { DrawerActionTrigger as ActionTrigger, DrawerBackdrop as Backdrop, DrawerBody as Body, DrawerCloseButton as CloseButton, DrawerCloseTrigger as CloseTrigger, DrawerContent as Content, type DrawerContentProps as ContentProps, DrawerContext as Context, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerRoot as Root, type DrawerRootProps as RootProps, DrawerTitle as Title, DrawerTrigger as Trigger };
 }
 
 export { namespace as Drawer };

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

@@ -8,6 +8,7 @@ interface DrawerContentProps extends Drawer.ContentProps {
     offset?: Drawer.ContentProps['padding'];
 }
 declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerCloseButton: react.ForwardRefExoticComponent<Drawer.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DrawerCloseTrigger: react.ForwardRefExoticComponent<Drawer.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DrawerTrigger: react.ForwardRefExoticComponent<Drawer.TriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DrawerRoot: react.FC<Drawer.RootProps>;
@@ -22,7 +23,7 @@ declare const DrawerContext: (props: _ark_ui_react.DialogContextProps) => react.
 type DrawerRootProps = Drawer.RootProps;
 
 declare namespace namespace {
-  export { DrawerActionTrigger as ActionTrigger, DrawerBackdrop as Backdrop, DrawerBody as Body, DrawerCloseTrigger as CloseTrigger, DrawerContent as Content, type DrawerContentProps as ContentProps, DrawerContext as Context, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerRoot as Root, type DrawerRootProps as RootProps, DrawerTitle as Title, DrawerTrigger as Trigger };
+  export { DrawerActionTrigger as ActionTrigger, DrawerBackdrop as Backdrop, DrawerBody as Body, DrawerCloseButton as CloseButton, DrawerCloseTrigger as CloseTrigger, DrawerContent as Content, type DrawerContentProps as ContentProps, DrawerContext as Context, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerRoot as Root, type DrawerRootProps as RootProps, DrawerTitle as Title, DrawerTrigger as Trigger };
 }
 
 export { namespace as Drawer };

package/dist/components/drawer/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   namespace_exports
-} from "../../chunk-WS5XGFSL.js";
+} from "../../chunk-VJ4NCA6R.js";
 import "../../chunk-BKYGKH3L.js";
 import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";

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

@@ -52,11 +52,7 @@ var GridListRoot = withProvider(
 );
 var GridListItem = withContext(
   import_grid_list.GridList.Item,
-  "item",
-  {
-    forwardProps: ["role"],
-    forwardAsChild: false
-  }
+  "item"
 );
 var GridListHeader = withContext(
   import_grid_list.GridList.Header,

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

@@ -4,7 +4,7 @@ import { RecipeVariantProps, HTMLChakraProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
 import { S as SlotRecipeProps } from '../../types-DnFoUudY.cjs';
 
-declare const gridListSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "root" | "item" | "header", {
+declare const gridListSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "root" | "header" | "item", {
     interactive: {
         true: {
             item: {

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

@@ -4,7 +4,7 @@ import { RecipeVariantProps, HTMLChakraProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
 import { S as SlotRecipeProps } from '../../types-DnFoUudY.js';
 
-declare const gridListSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "root" | "item" | "header", {
+declare const gridListSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "root" | "header" | "item", {
     interactive: {
         true: {
             item: {

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

@@ -1,7 +1,7 @@
 'use client'
 import {
   grid_list_exports
-} from "../../chunk-MZ75UMS3.js";
+} from "../../chunk-NSD5HRIP.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   grid_list_exports as GridList