@saas-ui/react 3.0.0-alpha.0 → 3.0.0-alpha.10

package/dist/chunk-BCNPBZZK.js

@@ -0,0 +1,45 @@
+'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,
+      variant = "glass",
+      colorPalette = variant === "glass" ? "accent" : "gray",
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsx(
+      ButtonPrimitive,
+      {
+        colorPalette,
+        disabled: loading || disabled,
+        variant,
+        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-CB52LBJK.js

@@ -0,0 +1,71 @@
+'use client'
+import {
+  CloseButton
+} from "./chunk-FZW2DYK3.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/dialog/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  ActionTrigger: () => DialogActionTrigger,
+  Backdrop: () => DialogBackdrop,
+  Body: () => DialogBody,
+  CloseTrigger: () => DialogCloseTrigger,
+  Content: () => DialogContent,
+  Context: () => DialogContext,
+  Description: () => DialogDescription,
+  Footer: () => DialogFooter,
+  Header: () => DialogHeader,
+  Root: () => DialogRoot,
+  Title: () => DialogTitle,
+  Trigger: () => DialogTrigger
+});
+
+// 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) {
+    const {
+      children,
+      portalled = true,
+      portalRef,
+      backdrop = true,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(Portal, { disabled: !portalled, container: portalRef, children: [
+      backdrop && /* @__PURE__ */ jsx(ChakraDialog.Backdrop, {}),
+      /* @__PURE__ */ jsx(ChakraDialog.Positioner, { children: /* @__PURE__ */ jsx(ChakraDialog.Content, { ref, ...rest, asChild: false, children }) })
+    ] });
+  }
+);
+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 DialogRoot = ChakraDialog.Root;
+var DialogFooter = ChakraDialog.Footer;
+var DialogHeader = ChakraDialog.Header;
+var DialogBody = ChakraDialog.Body;
+var DialogBackdrop = ChakraDialog.Backdrop;
+var DialogTitle = ChakraDialog.Title;
+var DialogDescription = ChakraDialog.Description;
+var DialogTrigger = ChakraDialog.Trigger;
+var DialogActionTrigger = ChakraDialog.ActionTrigger;
+
+export {
+  namespace_exports
+};

package/dist/chunk-CD2JUFI2.js

@@ -0,0 +1,231 @@
+'use client'
+import {
+  InputGroup
+} from "./chunk-PKI6YH2V.js";
+
+// src/components/password-input/password-input.tsx
+import { forwardRef, useRef } from "react";
+import {
+  IconButton,
+  Input,
+  mergeRefs,
+  useControllableState
+} from "@chakra-ui/react";
+
+// ../../node_modules/react-icons/lib/iconBase.mjs
+import React2 from "react";
+
+// ../../node_modules/react-icons/lib/iconContext.mjs
+import React from "react";
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React.createContext && /* @__PURE__ */ React.createContext(DefaultContext);
+
+// ../../node_modules/react-icons/lib/iconBase.mjs
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /* @__PURE__ */ React2.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return (props) => /* @__PURE__ */ React2.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = (conf) => {
+    var {
+      attr,
+      size,
+      title
+    } = props, svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /* @__PURE__ */ React2.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /* @__PURE__ */ React2.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? /* @__PURE__ */ React2.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+}
+
+// ../../node_modules/react-icons/lu/index.mjs
+function LuEyeOff(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M9.88 9.88a3 3 0 1 0 4.24 4.24" }, "child": [] }, { "tag": "path", "attr": { "d": "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, "child": [] }, { "tag": "path", "attr": { "d": "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, "child": [] }, { "tag": "line", "attr": { "x1": "2", "x2": "22", "y1": "2", "y2": "22" }, "child": [] }] })(props);
+}
+function LuEye(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
+}
+
+// src/components/password-input/password-input.tsx
+import { jsx } from "react/jsx-runtime";
+var PasswordInput = forwardRef(
+  function PasswordInput2(props, ref) {
+    const {
+      rootProps,
+      defaultVisible,
+      visible: visibleProp,
+      onVisibleChange,
+      visibilityIcon = { on: /* @__PURE__ */ jsx(LuEye, {}), off: /* @__PURE__ */ jsx(LuEyeOff, {}) },
+      ...rest
+    } = props;
+    const [visible, setVisible] = useControllableState({
+      value: visibleProp,
+      defaultValue: defaultVisible || false,
+      onChange: onVisibleChange
+    });
+    const inputRef = useRef(null);
+    return /* @__PURE__ */ jsx(
+      InputGroup,
+      {
+        width: "full",
+        endElement: /* @__PURE__ */ jsx(
+          VisibilityTrigger,
+          {
+            disabled: rest.disabled,
+            onPointerDown: (e) => {
+              if (rest.disabled) return;
+              if (e.button !== 0) return;
+              e.preventDefault();
+              setVisible(!visible);
+            },
+            children: visible ? visibilityIcon.off : visibilityIcon.on
+          }
+        ),
+        ...rootProps,
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...rest,
+            ref: mergeRefs(ref, inputRef),
+            type: visible ? "text" : "password"
+          }
+        )
+      }
+    );
+  }
+);
+var VisibilityTrigger = forwardRef(
+  function VisibilityTrigger2(props, ref) {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        tabIndex: -1,
+        ref,
+        me: "-2",
+        aspectRatio: "square",
+        size: "sm",
+        variant: "ghost",
+        colorPalette: "gray",
+        height: "calc(100% - {spacing.2})",
+        "aria-label": "Toggle password visibility",
+        ...props
+      }
+    );
+  }
+);
+
+export {
+  PasswordInput
+};

package/dist/chunk-FJFNGSPL.js

@@ -0,0 +1,23 @@
+'use client'
+
+// 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/chunk-FZW2DYK3.js

@@ -0,0 +1,19 @@
+'use client'
+import {
+  CloseIcon
+} from "./chunk-VDXTEASE.js";
+
+// src/components/close-button/close-button.tsx
+import { forwardRef } from "react";
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import { jsx } from "react/jsx-runtime";
+var CloseButton = forwardRef(
+  function CloseButton2(props, ref) {
+    var _a;
+    return /* @__PURE__ */ jsx(ChakraIconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(CloseIcon, {}) });
+  }
+);
+
+export {
+  CloseButton
+};

package/dist/chunk-GGAKUS66.js

@@ -0,0 +1,141 @@
+'use client'
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/sidebar/sidebar.tsx
+var sidebar_exports = {};
+__export(sidebar_exports, {
+  Backdrop: () => SidebarBackdrop,
+  Body: () => SidebarBody,
+  FlyoutTrigger: () => SidebarFlyoutTrigger,
+  Footer: () => SidebarFooter,
+  Group: () => SidebarGroup,
+  GroupContent: () => SidebarGroupContent,
+  GroupEndElement: () => SidebarGroupEndElement,
+  GroupHeader: () => SidebarGroupHeader,
+  GroupTitle: () => SidebarGroupTitle,
+  Header: () => SidebarHeader,
+  NavButton: () => SidebarNavButton,
+  NavButtonEndElement: () => SidebarNavButtonEndElement,
+  NavItem: () => SidebarNavItem,
+  Provider: () => SidebarProvider,
+  Root: () => SidebarRoot,
+  Track: () => SidebarTrack,
+  Trigger: () => SidebarTrigger
+});
+import { Sidebar, useSidebar } from "@saas-ui/core/sidebar";
+
+// src/components/sidebar/sidebar.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  withContext,
+  useRecipeResult,
+  StylesProvider,
+  ClassNamesProvider,
+  useStyles: useSidebarStyles
+} = createSlotRecipeContext({
+  key: "suiSidebar"
+});
+var {
+  withProvider: withItemProvider,
+  withContext: withItemContext,
+  useStyles: useSidebarItemStyles
+} = createSlotRecipeContext({
+  key: "suiSidebarNavItem"
+});
+
+// src/components/sidebar/sidebar.tsx
+import { jsx } from "react/jsx-runtime";
+var SidebarProvider = function SidebarProvider2(props) {
+  return /* @__PURE__ */ jsx(Sidebar.Provider, { ...props, children: /* @__PURE__ */ jsx(RecipeProvider, { ...props, children: props.children }) });
+};
+function RecipeProvider(props) {
+  const { mode } = useSidebar();
+  const { styles, classNames } = useRecipeResult({
+    ...props,
+    mode
+  });
+  return /* @__PURE__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: props.children }) });
+}
+var SidebarRoot = withContext(
+  Sidebar.Root,
+  "root"
+);
+var SidebarTrigger = withContext(
+  Sidebar.Trigger,
+  "trigger",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarFlyoutTrigger = withContext(Sidebar.FlyoutTrigger, "flyoutTrigger", {
+  forwardAsChild: true
+});
+var SidebarBackdrop = withContext(
+  Sidebar.Backdrop,
+  "backdrop",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarHeader = withContext(
+  Sidebar.Header,
+  "header"
+);
+var SidebarBody = withContext(
+  Sidebar.Body,
+  "body"
+);
+var SidebarFooter = withContext(
+  Sidebar.Footer,
+  "footer"
+);
+var SidebarTrack = withContext(
+  Sidebar.Track,
+  "track",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarGroup = withContext(
+  Sidebar.Group,
+  "group",
+  {
+    defaultProps: {
+      role: "group"
+    }
+  }
+);
+var SidebarGroupHeader = withContext(
+  Sidebar.GroupHeader,
+  "groupHeader"
+);
+var SidebarGroupTitle = withContext(Sidebar.GroupTitle, "groupTitle");
+var SidebarGroupEndElement = withContext(Sidebar.GroupEndElement, "groupEndElement");
+var SidebarGroupContent = withContext(
+  Sidebar.GroupContent,
+  "groupContent"
+);
+var SidebarNavItem = withItemProvider(
+  Sidebar.NavItem,
+  "item"
+);
+var SidebarNavButton = withItemContext(Sidebar.NavButton, "button", {
+  forwardAsChild: true
+});
+var SidebarNavButtonEndElement = withItemContext(Sidebar.NavItemEndElement, "endElement", {
+  defaultProps: {
+    "data-slot": "endElement"
+  }
+});
+
+// src/components/sidebar/index.ts
+import { useSidebar as useSidebar2 } from "@saas-ui/core/sidebar";
+
+export {
+  useSidebarStyles,
+  useSidebarItemStyles,
+  sidebar_exports,
+  useSidebar2 as useSidebar
+};

package/dist/chunk-H6TFEHY4.js

@@ -0,0 +1,63 @@
+'use client'
+import {
+  CloseButton
+} from "./chunk-FZW2DYK3.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/drawer/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  ActionTrigger: () => DrawerActionTrigger,
+  Backdrop: () => DrawerBackdrop,
+  Body: () => DrawerBody,
+  CloseTrigger: () => DrawerCloseTrigger,
+  Content: () => DrawerContent,
+  Context: () => DrawerContext,
+  Description: () => DrawerDescription,
+  Footer: () => DrawerFooter,
+  Header: () => DrawerHeader,
+  Root: () => DrawerRoot,
+  Title: () => DrawerTitle,
+  Trigger: () => DrawerTrigger
+});
+
+// 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(
+  function DrawerContent2(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 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 DrawerTrigger = ChakraDrawer.Trigger;
+var DrawerRoot = ChakraDrawer.Root;
+var DrawerFooter = ChakraDrawer.Footer;
+var DrawerHeader = ChakraDrawer.Header;
+var DrawerBody = ChakraDrawer.Body;
+var DrawerBackdrop = ChakraDrawer.Backdrop;
+var DrawerDescription = ChakraDrawer.Description;
+var DrawerTitle = ChakraDrawer.Title;
+var DrawerActionTrigger = ChakraDrawer.ActionTrigger;
+var DrawerContext = DialogContext;
+
+export {
+  namespace_exports
+};

package/dist/chunk-HELHPHIQ.js

@@ -0,0 +1,35 @@
+'use client'
+
+// src/components/toaster/toaster.tsx
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster
+} from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toast = createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true
+});
+var Toaster = () => {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ChakraToaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
+    var _a;
+    return /* @__PURE__ */ jsxs(Toast.Root, { width: { md: "sm" }, children: [
+      toast2.type === "loading" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ jsx(Toast.Indicator, {}),
+      /* @__PURE__ */ jsxs(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
+        toast2.title && /* @__PURE__ */ jsx(Toast.Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ jsx(Toast.Description, { children: toast2.description })
+      ] }),
+      toast2.action && /* @__PURE__ */ jsx(Toast.ActionTrigger, { children: toast2.action.label }),
+      ((_a = toast2.meta) == null ? void 0 : _a.closable) && /* @__PURE__ */ jsx(Toast.CloseTrigger, {})
+    ] });
+  } }) });
+};
+
+export {
+  toast,
+  Toaster
+};

package/dist/chunk-I2RXEKTB.js

@@ -0,0 +1,38 @@
+'use client'
+
+// src/components/icon-badge/icon-badge.tsx
+import * as React from "react";
+import { cloneElement, isValidElement } from "react";
+import {
+  chakra,
+  useRecipe
+} from "@chakra-ui/react";
+import { cx } from "@saas-ui/core/utils";
+import { jsx } from "react/jsx-runtime";
+var IconBadge = React.forwardRef(
+  (props, ref) => {
+    const { icon, children, ...rest } = props;
+    const recipe = useRecipe({ key: "suiIconBadge", recipe: props.recipe });
+    const [variantProps, localProps] = recipe.splitVariantProps(rest);
+    const styles = recipe(variantProps);
+    const element = icon || children;
+    const _children = isValidElement(element) ? cloneElement(element, {
+      "aria-hidden": true,
+      focusable: false
+    }) : null;
+    return /* @__PURE__ */ jsx(
+      chakra.div,
+      {
+        ref,
+        ...localProps,
+        css: [styles, props.css],
+        className: cx(recipe.className, props.className),
+        children: _children
+      }
+    );
+  }
+);
+
+export {
+  IconBadge
+};