@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

package/dist/components/menu/menu-group.js

@@ -1,27 +1,28 @@
-import { jsxs as p, Fragment as j, jsx as e } from "react/jsx-runtime";
-import { HStack as z, MenuItem as E, Box as h } from "@chakra-ui/react";
-import F, { useRef as w } from "react";
-import { setMenuItemElementType as H } from "./helper.js";
-import { IconButton as N } from "../icon-button/icon-button.js";
-import { Icons as S } from "../icon/types.js";
-import { Flex as K } from "../flex/flex.js";
-import { Icon as I } from "../icon/icon.js";
-import { ThemeColorVariable as g, ThemeSpaceVariable as a } from "../../theme/theme-types.js";
-const Y = ({
+import { jsxs as a, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { HStack as E, Menu as w, Box as F } from "@chakra-ui/react";
+import H, { useRef as I } from "react";
+import { setMenuItemElementType as N } from "./helper.js";
+import { IconButton as K } from "../icon-button/icon-button.js";
+import { Flex as O } from "../flex/flex.js";
+import { ThemeColorVariable as g, ThemeSpaceVariable as p, ThemeIconSizeVariable as S } from "../../theme/theme-types.js";
+import { TreeViewCollapseIcon as W } from "../icon/icons/tree-view-collapse-icon.js";
+import { TreeViewExpandIcon as X } from "../icon/icons/tree-view-expand-icon.js";
+const ne = ({
   text: i,
-  children: $,
-  onClick: C,
-  as: v,
-  isDisabled: L = !1,
-  itemType: M = "button",
-  leftIcon: d,
-  rightIcon: f,
-  rightElement: k,
-  ...y
+  children: C,
+  onClick: $,
+  as: M,
+  isDisabled: v = !1,
+  command: d,
+  itemType: L = "button",
+  leftIcon: T,
+  rightIcon: k,
+  rightElement: y,
+  ...z
 }) => {
-  const [n, T] = F.useState(!1), r = w(null), o = w(null), B = () => {
-    T(!n);
-  }, _ = v ?? H(M), R = d ? /* @__PURE__ */ e(I, { icon: d, w: "24px", h: "24px" }) : void 0, s = (t) => ({
+  const [n, B] = H.useState(!1), r = I(null), o = I(null), R = () => {
+    B(!n);
+  }, V = M ?? N(L), f = T, b = k, s = (t) => ({
     content: '""',
     position: "absolute",
     top: 0,
@@ -30,34 +31,34 @@ const Y = ({
     height: "100%",
     backgroundColor: g.OnSurfaceBorder,
     zIndex: 1
-  }), u = 64, x = 36, c = 22, m = 28, b = 20, A = {
-    ".menu-item": {
+  }), u = 64, h = 36, c = 22, m = 28, x = 20, _ = {
+    "& .menu-item": {
       paddingLeft: `${u}px`
     },
-    ".menugroup-item": {
-      paddingLeft: `${x}px`
+    "& .menugroup-item": {
+      paddingLeft: `${h}px`
     },
-    ".menugroup-wrapper > .menugroup-item": {
-      paddingLeft: `${x + c}px`
+    "& .menugroup-wrapper > .menugroup-item": {
+      paddingLeft: `${h + c}px`
     },
-    ".menugroup-wrapper > .menu-item": {
+    "& .menugroup-wrapper > .menu-item": {
       paddingLeft: `${u + c}px`
     },
     // Max level of nesting is currently three levels deep
-    ".menugroup-wrapper > .menugroup-wrapper > .menu-item": {
+    "& .menugroup-wrapper > .menugroup-wrapper > .menu-item": {
       paddingLeft: `${u + 2 * c}px`
     },
     // Line indicating the hierarchy of the menu items
     position: "relative",
-    "::before": s(`${m}px`),
-    ".menugroup-wrapper": {
-      "::before": s(`${m + b}px`)
+    "&::before": s(`${m}px`),
+    "& .menugroup-wrapper": {
+      "&::before": s(`${m + x}px`)
     },
-    ".menugroup-wrapper > .menugroup-wrapper": {
-      "::before": s(`${m + 2 * b}px`)
+    "& .menugroup-wrapper > .menugroup-wrapper": {
+      "&::before": s(`${m + 2 * x}px`)
     }
     // ...Add more selectors as needed to support more levels
-  }, P = "24px", V = (t) => {
+  }, A = "24px", P = (t) => {
     switch (t.stopPropagation(), t.key) {
       case "ArrowLeft": {
         const l = o.current?.previousSibling;
@@ -71,63 +72,71 @@ const Y = ({
       }
     }
   };
-  return /* @__PURE__ */ p(j, { children: [
-    /* @__PURE__ */ p(
-      z,
+  return /* @__PURE__ */ a(j, { children: [
+    /* @__PURE__ */ a(
+      E,
       {
         w: "100%",
-        pl: a.Medium,
-        spacing: a.XSmall,
-        className: "menugroup-item",
+        pl: p.Medium,
+        gap: p.XSmall,
+        className: "group menugroup-item",
         _hover: {
           bg: g.AccentHoverAlpha,
           transitionProperty: "background",
-          transitionDuration: "ultra-fast",
+          transitionDuration: "200ms",
           transitionTimingFunction: "ease-in"
         },
         role: "group",
-        onKeyUp: V,
+        onKeyUp: P,
         children: [
           /* @__PURE__ */ e(
-            N,
+            K,
             {
               ref: r,
-              onClick: B,
+              onClick: R,
               variant: "ghost",
               tabIndex: 0,
-              icon: n ? S.TreeViewCollapse : S.TreeViewExpand,
+              icon: n ? W : X,
               "aria-label": n ? `Collapse ${i}` : `Expand ${i}`,
               size: "xs"
             }
           ),
-          /* @__PURE__ */ e(
-            E,
+          /* @__PURE__ */ a(
+            w.Item,
             {
               pl: 0,
-              _groupHover: { bg: "unset" },
-              as: _,
-              isDisabled: L,
-              onClick: C,
+              _groupHover: { bg: "transparent" },
+              _hover: { bg: "transparent" },
+              as: V,
+              disabled: v,
+              onClick: $,
               minWidth: "unset",
-              w: `calc(100% - ${P} - ${a.XSmall})`,
-              icon: R,
+              w: `calc(100% - ${A} - ${p.XSmall})`,
               ref: o,
-              ...y,
-              children: /* @__PURE__ */ p(K, { justifyContent: "space-between", alignItems: "center", gap: a.Small, w: "100%", children: [
-                i,
-                /* @__PURE__ */ p(h, { children: [
-                  k,
-                  f && /* @__PURE__ */ e(I, { icon: f, color: g.OnSurfaceBorder, w: "20px", h: "20px" })
+              ...z,
+              children: [
+                f && /* @__PURE__ */ e(f, { size: S.Medium }),
+                /* @__PURE__ */ a(O, { justifyContent: "space-between", alignItems: "center", gap: p.Small, w: "100%", children: [
+                  i,
+                  y,
+                  b && /* @__PURE__ */ e(
+                    b,
+                    {
+                      color: g.OnSurfaceBorder,
+                      size: S.Small
+                    }
+                  ),
+                  d && /* @__PURE__ */ e(w.ItemCommand, { children: d })
                 ] })
-              ] })
+              ]
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ e(h, { className: "menugroup-wrapper", __css: A, children: n && $ })
+    /* @__PURE__ */ e(F, { className: "menugroup-wrapper", css: _, children: n && C })
   ] });
 };
 export {
-  Y as MenuGroup
+  ne as MenuGroup
 };

package/dist/components/menu/menu-icon-button.d.ts

@@ -3,5 +3,5 @@ import { IconButtonProps } from '../icon-button/index.js';
  * An IconButton that acts as a trigger for Menu
  * @see Docs https://caspeco.github.io/casper-ui-library/components/menu/
  */
-export declare const MenuIconButton: (iconButtonProps: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuIconButton: (props: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=menu-icon-button.d.ts.map

package/dist/components/menu/menu-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-icon-button.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,iBAAiB,eAAe,4CAE9D,CAAC"}
+{"version":3,"file":"menu-icon-button.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAG5E;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,eAAe,4CAMpD,CAAC"}

package/dist/components/menu/menu-icon-button.js

@@ -1,7 +1,7 @@
-import { jsx as t } from "react/jsx-runtime";
-import { MenuButton as n } from "@chakra-ui/react";
-import { IconButton as r } from "../icon-button/icon-button.js";
-const p = (o) => /* @__PURE__ */ t(n, { as: r, ...o });
+import { jsx as r } from "react/jsx-runtime";
+import { MenuTrigger as t } from "@chakra-ui/react";
+import { IconButton as n } from "../icon-button/icon-button.js";
+const u = (o) => /* @__PURE__ */ r(t, { asChild: !0, children: /* @__PURE__ */ r(n, { ...o }) });
 export {
-  p as MenuIconButton
+  u as MenuIconButton
 };

package/dist/components/menu/menu-item.d.ts

@@ -1,7 +1,7 @@
-import { Icons } from '../icon/index.js';
+import { CasperIconComponent } from '../icon/index.js';
 import { MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
-import { MenuItemType } from './types.js';
 import { ElementType } from 'react';
+import { MenuItemType } from './types.js';
 type CustomMenuItemProps = {
     /**
      * Type based on what element is used within the MenuItem.
@@ -12,11 +12,11 @@ type CustomMenuItemProps = {
     /**
      * Icon to render to the left of the MenuItem contents.
      */
-    leftIcon?: Icons;
+    leftIcon?: CasperIconComponent;
     /**
      * Icon to render to the right of the MenuItem contents.
      */
-    rightIcon?: Icons;
+    rightIcon?: CasperIconComponent;
     /**
      * Link destination to use with itemType 'link'.
      */
@@ -31,8 +31,12 @@ type CustomMenuItemProps = {
      * For usage with routing libraries. If the MenuItem is a custom Link component, this prop can be used to specify the route.
      */
     to?: string;
+    /** If `true`, the MenuItem will be disabled. */
+    isDisabled?: boolean;
+    /** Right-aligned label text content, useful for displaying hotkeys */
+    command?: string;
 };
-export type MenuItemProps = Pick<ChakraMenuItemProps, "children" | "isDisabled" | "onClick" | "command"> & CustomMenuItemProps;
-export declare const MenuItem: ({ children, onClick, as, isDisabled, itemType, leftIcon, rightIcon, ...props }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export type MenuItemProps = Pick<ChakraMenuItemProps, "children" | "onClick" | "value"> & CustomMenuItemProps;
+export declare const MenuItem: ({ children, onClick, as, isDisabled, itemType, command, leftIcon, rightIcon, ...props }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=menu-item.d.ts.map

package/dist/components/menu/menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAA8B,KAAK,aAAa,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEzG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,KAAK,mBAAmB,GAAG;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,GACvG,mBAAmB,CAAC;AAErB,eAAO,MAAM,QAAQ,GAAI,gFAStB,aAAa,4CAsBf,CAAC"}
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAsB,KAAK,aAAa,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACjG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,mBAAmB,GAAG;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAGZ,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG,mBAAmB,CAAC;AAE9G,eAAO,MAAM,QAAQ,GAAI,yFAUtB,aAAa,4CAwBf,CAAC"}

package/dist/components/menu/menu-item.js

@@ -1,36 +1,35 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { MenuItem as u } from "@chakra-ui/react";
-import { setMenuItemElementType as f } from "./helper.js";
-import { Flex as x } from "../flex/flex.js";
-import { Icon as n } from "../icon/icon.js";
-import { ThemeSpaceVariable as d, ThemeColorVariable as I } from "../../theme/theme-types.js";
-const y = ({
-  children: r,
-  onClick: m,
-  as: i,
-  isDisabled: a = !1,
-  itemType: c = "button",
-  leftIcon: o,
-  rightIcon: t,
-  ...p
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { Menu as r } from "@chakra-ui/react";
+import { setMenuItemElementType as h } from "./helper.js";
+import { Flex as S } from "../flex/flex.js";
+import { ThemeIconSizeVariable as i, ThemeSpaceVariable as C, ThemeColorVariable as x } from "../../theme/theme-types.js";
+const V = ({
+  children: l,
+  onClick: s,
+  as: a,
+  isDisabled: c = !1,
+  itemType: p = "button",
+  command: t,
+  leftIcon: u,
+  rightIcon: f,
+  ...d
 }) => {
-  const s = i ?? f(c);
-  return /* @__PURE__ */ e(
-    u,
-    {
-      as: s,
-      className: "menu-item",
-      isDisabled: a,
-      onClick: m,
-      icon: o ? /* @__PURE__ */ e(n, { icon: o, w: "24px", h: "24px" }) : void 0,
-      ...p,
-      children: /* @__PURE__ */ l(x, { justifyContent: "space-between", alignItems: "center", gap: d.XSmall, w: "100%", children: [
-        r,
-        t && /* @__PURE__ */ e(n, { icon: t, color: I.OnSurfaceSubdued, w: "20px", h: "20px" })
-      ] })
-    }
-  );
+  const I = a ?? h(p), n = u, o = f, b = n && /* @__PURE__ */ e(n, { size: i.Medium });
+  return /* @__PURE__ */ m(r.Item, { as: I, className: "menu-item", disabled: c, onClick: s, ...d, children: [
+    b,
+    /* @__PURE__ */ m(S, { justifyContent: "space-between", alignItems: "center", gap: C.XSmall, w: "100%", children: [
+      l,
+      o && /* @__PURE__ */ e(
+        o,
+        {
+          color: x.OnSurfaceSubdued,
+          size: i.Small
+        }
+      ),
+      t && /* @__PURE__ */ e(r.ItemCommand, { children: t })
+    ] })
+  ] });
 };
 export {
-  y as MenuItem
+  V as MenuItem
 };

package/dist/components/menu/menu-list.d.ts

@@ -1,5 +1,5 @@
 import { ThemeStyleProps } from '../../theme/index.js';
-import { MenuListProps as ChakraMenuListProps } from '@chakra-ui/react';
-export type MenuListProps = ThemeStyleProps & Pick<ChakraMenuListProps, "children">;
+import { Menu as ChakraMenu } from '@chakra-ui/react';
+export type MenuListProps = ThemeStyleProps & Pick<ChakraMenu.ContentProps, "children">;
 export declare const MenuList: ({ children, ...props }: MenuListProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=menu-list.d.ts.map

package/dist/components/menu/menu-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAA8B,KAAK,aAAa,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEzG,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AAEpF,eAAO,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAE7D,CAAC"}
+{"version":3,"file":"menu-list.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAExF,eAAO,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAM7D,CAAC"}

package/dist/components/menu/menu-list.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { MenuList as s } from "@chakra-ui/react";
-const n = ({ children: t, ...r }) => /* @__PURE__ */ o(s, { ...r, children: t });
+import { Menu as r } from "@chakra-ui/react";
+const m = ({ children: t, ...n }) => /* @__PURE__ */ o(r.Positioner, { children: /* @__PURE__ */ o(r.Content, { ...n, children: t }) });
 export {
-  n as MenuList
+  m as MenuList
 };

package/dist/components/menu/menu-recipe.d.ts

@@ -0,0 +1,3 @@
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+export declare const menuRecipe: SlotRecipeDefinition;
+//# sourceMappingURL=menu-recipe.d.ts.map

package/dist/components/menu/menu-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-recipe.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,oBAAoB,EAA4C,MAAM,kBAAkB,CAAC;AAuDvG,eAAO,MAAM,UAAU,EAAE,oBAyBvB,CAAC"}

package/dist/components/menu/menu-recipe.js

@@ -0,0 +1,78 @@
+import { ThemeSpaceVariable as e, ThemeColorVariable as o, ThemeFontSizeVariable as a, ThemeShadowVariable as t } from "../../theme/theme-types.js";
+import { defineSlotRecipe as r } from "@chakra-ui/react";
+import { menuAnatomy as i } from "../../node_modules/@chakra-ui/react/dist/esm/anatomy.js";
+const n = {
+  minW: "280px",
+  alignItems: "center",
+  color: o.OnSurface,
+  backgroundColor: o.Surface,
+  borderRadius: "none",
+  cursor: "pointer",
+  gap: e.XSmall,
+  py: e.Small,
+  px: e.Medium,
+  _hover: {
+    backgroundColor: o.AccentHoverAlpha,
+    textDecoration: "underline",
+    _disabled: {
+      textDecoration: "none",
+      backgroundColor: "transparent"
+    }
+  },
+  _highlighted: {
+    background: o.AccentHoverAlpha,
+    textDecoration: "underline",
+    _disabled: {
+      textDecoration: "none",
+      background: "transparent"
+    }
+  },
+  // Seems to be the only way to override the default margin of the icon (left)
+  "& .chakra-menu__icon-wrapper": {
+    mr: e.XSmall
+  }
+}, l = {
+  boxShadow: t.Medium,
+  bg: o.Surface,
+  border: "none",
+  borderRadius: e.Small,
+  // We don't use focus inside menus, it is handled by highlight state by Chakra.
+  "& *": {
+    _focus: { outline: "none !important" },
+    _focusVisible: { outline: "none !important" }
+  }
+}, m = {
+  opacity: 1,
+  color: o.OnSurfaceSubdued,
+  fontSize: a.Small,
+  mx: e.XSmall,
+  letterSpacing: "unset"
+}, d = r({
+  className: "menu",
+  slots: i.keys(),
+  base: {
+    item: n,
+    content: l,
+    itemCommand: m
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: n
+      }
+    },
+    size: {
+      md: {
+        content: {
+          py: e.Small,
+          px: 0,
+          minW: "14rem"
+        },
+        item: n
+      }
+    }
+  }
+});
+export {
+  d as menuRecipe
+};

package/dist/components/menu/menu.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu.composition.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,SAAS,+CAgBrB,CAAC;AAQF,eAAO,MAAM,UAAU,+CAoEtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAoB/B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAqBpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAgB7B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAmBpB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAyBtB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAoBzB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAkBvB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAgBrB,CAAC"}
+{"version":3,"file":"menu.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu.composition.tsx"],"names":[],"mappings":"AAiCA,eAAO,MAAM,SAAS,+CAgBrB,CAAC;AAQF,eAAO,MAAM,UAAU,+CAoEtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAoB/B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAqBpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAgB7B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAmBpB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAyBtB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAoBzB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAkBvB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAgBrB,CAAC"}

package/dist/components/menu/menu.d.ts

@@ -1,9 +1,28 @@
-import { MenuProps as ChakraMenuProps } from '@chakra-ui/react';
-type ChakraMenuProperties = Pick<ChakraMenuProps, "children" | "closeOnBlur" | "closeOnSelect" | "matchWidth" | "placement" | "offset" | "isLazy" | "lazyBehavior">;
-export type MenuProps = Partial<ChakraMenuProperties>;
+import { Menu as ChakraMenu } from '@chakra-ui/react';
+type ChakraMenuProperties = Pick<ChakraMenu.RootProps, "onSelect" | "closeOnSelect">;
+type Positioning = NonNullable<ChakraMenu.RootProps["positioning"]>;
+export type MenuProps = Partial<ChakraMenuProperties> & {
+    children: React.ReactNode | ((props: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+    placement?: Positioning["placement"];
+    matchWidth?: boolean;
+    offset?: [number, number];
+    isLazy?: boolean;
+    lazyBehavior?: "unmount" | "keepMounted";
+};
 /**
  * @see Docs https://caspeco.github.io/casper-ui-library/components/menu/
  */
-export declare function Menu({ children, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare const Menu: import('react').ForwardRefExoticComponent<Partial<ChakraMenuProperties> & {
+    children: React.ReactNode | ((props: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+    placement?: Positioning["placement"];
+    matchWidth?: boolean;
+    offset?: [number, number];
+    isLazy?: boolean;
+    lazyBehavior?: "unmount" | "keepMounted";
+} & import('react').RefAttributes<HTMLElement>>;
 export {};
 //# sourceMappingURL=menu.d.ts.map

package/dist/components/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEzF,KAAK,oBAAoB,GAAG,IAAI,CAC/B,eAAe,EACb,UAAU,GACV,aAAa,GACb,eAAe,GACf,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,cAAc,CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAEtD;;GAEG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAMrD"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGtD,KAAK,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,UAAU,GAAG,eAAe,CAAC,CAAC;AAErF,KAAK,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpE,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,oBAAoB,CAAC,GAAG;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAG9E,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI;cAbN,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;gBAGjE,WAAW,CAAC,WAAW,CAAC;iBACvB,OAAO;aACX,CAAC,MAAM,EAAE,MAAM,CAAC;aAChB,OAAO;mBACD,SAAS,GAAG,aAAa;+CAsCvC,CAAC"}

package/dist/components/menu/menu.js

@@ -1,8 +1,25 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Menu as o } from "@chakra-ui/react";
-function f({ children: e, ...t }) {
-  return /* @__PURE__ */ r(o, { autoSelect: !1, gutter: 0, ...t, children: e });
-}
+import { jsx as t } from "react/jsx-runtime";
+import { Menu as e } from "@chakra-ui/react";
+import { forwardRef as d } from "react";
+const v = d(function({
+  children: o,
+  placement: i = "bottom-start",
+  matchWidth: r,
+  offset: n,
+  isLazy: s = !1,
+  lazyBehavior: u = "unmount",
+  ...m
+}, l) {
+  const f = {
+    placement: i,
+    sameWidth: r,
+    offset: n ? { mainAxis: n[0], crossAxis: n[1] } : void 0,
+    gutter: 0,
+    flip: !1,
+    overflowPadding: 0
+  }, p = u === "unmount", a = typeof o == "function";
+  return /* @__PURE__ */ t(e.Root, { lazyMount: s, unmountOnExit: p, positioning: f, ...m, children: a ? /* @__PURE__ */ t(e.Context, { children: (c) => o({ isOpen: c.open }) }) : o });
+});
 export {
-  f as Menu
+  v as Menu
 };

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

@@ -8,5 +8,4 @@ export { ModalFooter } from './modal-footer.js';
 export type { ModalFooterProps } from './modal-footer.js';
 export { ModalHeader } from './modal-header.js';
 export type { ModalHeaderProps } from './modal-header.js';
-export { useDisclosure } from '@chakra-ui/react';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/modal/modal-body-context.d.ts

@@ -0,0 +1,8 @@
+type ModalBodyContextValue = {
+    bodyElement: HTMLDivElement | null;
+    setBodyElement: (el: HTMLDivElement | null) => void;
+};
+export declare const ModalBodyContext: import('react').Context<ModalBodyContextValue | null>;
+export declare function useModalBodyContext(): ModalBodyContextValue | null;
+export {};
+//# sourceMappingURL=modal-body-context.d.ts.map

package/dist/components/modal/modal-body-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-body-context.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-body-context.tsx"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC5B,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,uDAAoD,CAAC;AAElF,wBAAgB,mBAAmB,iCAElC"}

package/dist/components/modal/modal-body-context.js

@@ -0,0 +1,9 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(null);
+function r() {
+  return o(e);
+}
+export {
+  e as ModalBodyContext,
+  r as useModalBodyContext
+};

package/dist/components/modal/modal-body.d.ts

@@ -1,6 +1,6 @@
 import { ThemeStyleProps } from '../../theme/index.js';
-import { ModalBodyProps as ChakraModalBodyProps } from '@chakra-ui/react';
-export type ModalBodyProps = Pick<ChakraModalBodyProps, "children"> & ThemeStyleProps;
+import { Dialog as ChakraDialog } from '@chakra-ui/react';
+export type ModalBodyProps = Pick<ChakraDialog.BodyProps, "children"> & ThemeStyleProps;
 /**
  * React component that houses the main content of the modal.
  *

package/dist/components/modal/modal-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-body.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAgC,KAAK,cAAc,IAAI,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7G,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC;AAEtF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAE/D"}
+{"version":3,"file":"modal-body.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC;AAExF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAO/D"}

package/dist/components/modal/modal-body.js

@@ -1,8 +1,10 @@
-import { jsx as d } from "react/jsx-runtime";
-import { ModalBody as t } from "@chakra-ui/react";
-function f({ children: o, ...r }) {
-  return /* @__PURE__ */ d(t, { ...r, children: o });
+import { jsx as e } from "react/jsx-runtime";
+import { Dialog as m } from "@chakra-ui/react";
+import { useModalBodyContext as n } from "./modal-body-context.js";
+function l({ children: o, ...t }) {
+  const r = n();
+  return /* @__PURE__ */ e(m.Body, { ref: r?.setBodyElement, ...t, children: o });
 }
 export {
-  f as ModalBody
+  l as ModalBody
 };