@koobiq/react-components 0.21.1 → 0.23.0

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useLocalizedStringFormatter, today } from "@koobiq/react-core";
+import { useLocalizedStringFormatter, mergeProps, today } from "@koobiq/react-core";
 import { IconChevronLeft16, IconCircleXs16, IconChevronRight16 } from "@koobiq/react-icons";
 import intlMessages from "../../intl.json.js";
 import s from "./CalendarHeader.module.css.js";
@@ -8,16 +8,21 @@ import { CalendarMonthDropdown } from "../CalendarMonthDropdown/CalendarMonthDro
 import { CalendarYearDropdown } from "../CalendarYearDropdown/CalendarYearDropdown.js";
 import { Button } from "../../../Button/Button.js";
 const CalendarHeader = (props) => {
-  const { prevButtonProps, nextButtonProps, state } = props;
+  const { prevButtonProps, nextButtonProps, state, slotProps } = props;
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
-  return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
-    /* @__PURE__ */ jsx(CalendarMonthDropdown, { state }),
-    /* @__PURE__ */ jsx(CalendarYearDropdown, { state }),
-    /* @__PURE__ */ jsxs("div", { className: s.actions, children: [
+  const rootProps = mergeProps({ className: s.base }, slotProps?.root);
+  const actionsProps = mergeProps({ className: s.actions }, slotProps?.actions);
+  const monthDropdown = mergeProps({ state }, slotProps?.["month-picker"]);
+  const yearDropdown = mergeProps({ state }, slotProps?.["year-picker"]);
+  return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+    /* @__PURE__ */ jsx(CalendarMonthDropdown, { ...monthDropdown }),
+    /* @__PURE__ */ jsx(CalendarYearDropdown, { ...yearDropdown }),
+    /* @__PURE__ */ jsxs("div", { ...actionsProps, children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           ...prevButtonProps,
+          "data-slot": "prev-period",
           variant: "contrast-transparent",
           startIcon: /* @__PURE__ */ jsx(IconChevronLeft16, {}),
           onlyIcon: true
@@ -31,6 +36,7 @@ const CalendarHeader = (props) => {
             const date = today(state.timeZone);
             state.setFocusedDate(date);
           },
+          "data-slot": "today",
           isDisabled: state.isDisabled,
           variant: "contrast-transparent",
           startIcon: /* @__PURE__ */ jsx(IconCircleXs16, {}),
@@ -41,6 +47,7 @@ const CalendarHeader = (props) => {
         Button,
         {
           ...nextButtonProps,
+          "data-slot": "next-period",
           variant: "contrast-transparent",
           startIcon: /* @__PURE__ */ jsx(IconChevronRight16, {}),
           onlyIcon: true

package/dist/components/Calendar/components/CalendarHeader/index.d.ts

@@ -1 +1,2 @@
 export * from './CalendarHeader';
+export * from './types';

package/dist/components/Calendar/components/CalendarHeader/types.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { CalendarAria, CalendarState } from '@koobiq/react-primitives';
+import type { CalendarMonthDropdownProps } from '../CalendarMonthDropdown';
+import type { CalendarYearDropdownProps } from '../CalendarYearDropdown';
+export type CalendarHeaderProps = {
+    prevButtonProps: CalendarAria['prevButtonProps'];
+    nextButtonProps: CalendarAria['nextButtonProps'];
+    state: CalendarState;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        actions?: ComponentPropsWithRef<'div'>;
+        'month-picker'?: Partial<CalendarMonthDropdownProps>;
+        'year-picker'?: Partial<CalendarYearDropdownProps>;
+    };
+};

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.d.ts

@@ -1,6 +1,14 @@
+import { type ComponentPropsWithRef } from 'react';
 import { type CalendarState } from '@koobiq/react-primitives';
-type CalendarMonthDropdownProps = {
+import type { ItemProps } from '../../../Collections';
+import type { PopoverProps } from '../../../Popover';
+export type CalendarMonthDropdownProps = {
     state: CalendarState;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        item?: ItemProps<object>;
+        popover?: PopoverProps;
+        list?: ComponentPropsWithRef<'ul'>;
+    };
 };
-export declare function CalendarMonthDropdown({ state }: CalendarMonthDropdownProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function CalendarMonthDropdown({ state, slotProps, }: CalendarMonthDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.js

@@ -1,14 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { useBoolean, useDateFormatter, clsx } from "@koobiq/react-core";
+import { useBoolean, useDateFormatter, mergeProps, clsx } from "@koobiq/react-core";
 import { IconChevronDown16 } from "@koobiq/react-icons";
 import "@koobiq/react-primitives";
 import s from "../../Calendar.module.css.js";
 import { Menu } from "../../../Menu/Menu.js";
 import { capitalizeFirstLetter } from "../../../../utils/capitalizeFirstLetter/capitalizeFirstLetter.js";
 import { Button } from "../../../Button/Button.js";
-function CalendarMonthDropdown({ state }) {
+function CalendarMonthDropdown({
+  state,
+  slotProps
+}) {
   const months = [];
   const disabledKeys = /* @__PURE__ */ new Set();
   const [isOpen, { on, off }] = useBoolean();
@@ -54,6 +57,24 @@ function CalendarMonthDropdown({ state }) {
       name: longFormatter.format(date.toDate(state.timeZone))
     });
   }
+  const listProps = mergeProps(
+    {
+      ref: menuRef
+    },
+    slotProps?.list
+  );
+  const popoverProps = mergeProps(
+    {
+      maxBlockSize: 265,
+      slotProps: {
+        transition: {
+          onEnter: on,
+          onExited: off
+        }
+      }
+    },
+    slotProps?.popover
+  );
   return /* @__PURE__ */ jsx(
     Menu,
     {
@@ -70,18 +91,8 @@ function CalendarMonthDropdown({ state }) {
       ),
       className: s.popover,
       slotProps: {
-        list: {
-          ref: menuRef
-        },
-        popover: {
-          maxBlockSize: 265,
-          slotProps: {
-            transition: {
-              onEnter: on,
-              onExited: off
-            }
-          }
-        }
+        list: listProps,
+        popover: popoverProps
       },
       items: months,
       disabledKeys,
@@ -92,7 +103,7 @@ function CalendarMonthDropdown({ state }) {
         const date = state.focusedDate.set({ month: +value });
         state.setFocusedDate(date);
       },
-      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { children: capitalizeFirstLetter(item.name) })
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { ...slotProps?.item, children: capitalizeFirstLetter(item.name) })
     }
   );
 }

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.d.ts

@@ -1,6 +1,14 @@
+import { type ComponentPropsWithRef } from 'react';
 import { type CalendarState } from '@koobiq/react-primitives';
-type CalendarYearDropdownProps = {
+import type { ItemProps } from '../../../Collections';
+import type { PopoverProps } from '../../../Popover';
+export type CalendarYearDropdownProps = {
     state: CalendarState;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        item?: ItemProps<object>;
+        popover?: PopoverProps;
+        list?: ComponentPropsWithRef<'ul'>;
+    };
 };
-export declare function CalendarYearDropdown({ state }: CalendarYearDropdownProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function CalendarYearDropdown({ state, slotProps, }: CalendarYearDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { useBoolean, clsx } from "@koobiq/react-core";
+import { useBoolean, mergeProps, clsx } from "@koobiq/react-core";
 import { IconChevronDown16 } from "@koobiq/react-icons";
 import "@koobiq/react-primitives";
 import s from "../../Calendar.module.css.js";
 import { Menu } from "../../../Menu/Menu.js";
 import { Button } from "../../../Button/Button.js";
-function CalendarYearDropdown({ state }) {
+function CalendarYearDropdown({
+  state,
+  slotProps
+}) {
   const years = [];
   const [isOpen, { on, off }] = useBoolean();
   const menuRef = useRef(null);
@@ -30,22 +33,30 @@ function CalendarYearDropdown({ state }) {
     }
   }, [state.focusedDate.year, isOpen]);
   const selectedYearName = years.find(({ id }) => id === state.focusedDate.year)?.id ?? "";
+  const listProps = mergeProps(
+    {
+      ref: menuRef
+    },
+    slotProps?.list
+  );
+  const popoverProps = mergeProps(
+    {
+      maxBlockSize: 265,
+      slotProps: {
+        transition: {
+          onEnter: on,
+          onExited: off
+        }
+      }
+    },
+    slotProps?.popover
+  );
   return /* @__PURE__ */ jsx(
     Menu,
     {
       slotProps: {
-        list: {
-          ref: menuRef
-        },
-        popover: {
-          maxBlockSize: 265,
-          slotProps: {
-            transition: {
-              onEnter: on,
-              onExited: off
-            }
-          }
-        }
+        list: listProps,
+        popover: popoverProps
       },
       control: (props) => /* @__PURE__ */ jsx(
         Button,
@@ -67,7 +78,7 @@ function CalendarYearDropdown({ state }) {
         const date = state.focusedDate.set({ year: +value });
         state.setFocusedDate(date);
       },
-      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { textValue: String(item.id), children: item.id })
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { textValue: String(item.id), ...slotProps?.item, children: item.id })
     }
   );
 }

package/dist/components/Calendar/types.d.ts

@@ -1,6 +1,7 @@
-import type { ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaCalendarProps, DateValue } from '@koobiq/react-primitives';
+import type { CalendarGridProps, CalendarHeaderProps } from './components';
 export type CalendarProps<T extends DateValue> = ExtendableProps<{
     /** Ref to the root container. */
     ref?: Ref<HTMLDivElement>;
@@ -8,6 +9,12 @@ export type CalendarProps<T extends DateValue> = ExtendableProps<{
     className?: string;
     /** Inline styles. */
     style?: CSSProperties;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        grid?: Partial<CalendarGridProps>;
+        header?: Partial<CalendarHeaderProps>;
+    };
 }, Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>>;
 export type CalendarComponent = <T extends DateValue>(props: CalendarProps<T>) => ReactElement | null;
 export type CalendarRef = ComponentRef<'div'>;

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -104,8 +104,8 @@ const CheckboxGroup = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
     /* @__PURE__ */ jsxs("div", { className: s.body, children: [
       /* @__PURE__ */ jsx(CheckboxGroupContext$1.Provider, { value: state, children: /* @__PURE__ */ jsx("div", { ...checkboxGroupProps, children }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...descriptionProps }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorMessageProps }) })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorMessageProps }) }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...descriptionProps })
     ] })
   ] }) });
 });

package/dist/components/ContenPanel/ContentPanel.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithRef, type CSSProperties } from 'react';
+import { DialogBody, DialogFooter, DialogHeader, type DialogProps } from '../Dialog';
+declare const ContentPanelComponent: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    width?: import("./types").ContentPanelSize | null;
+    minWidth?: import("./types").ContentPanelSize | null;
+    maxWidth?: import("./types").ContentPanelSize | null;
+    defaultWidth?: import("./types").ContentPanelSize | null;
+    isResizable?: boolean;
+    onResize?: (width: number) => void;
+    onResizeStart?: (width: number) => void;
+    onResizeEnd?: (width: number) => void;
+    onResetResize?: (initialWidth: number) => number | null | undefined;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+    slotProps?: {
+        dialog?: DialogProps;
+        transition?: Partial<import("react-transition-group/Transition").TransitionProps<HTMLElement>>;
+        resizer?: ComponentPropsWithRef<"div"> & import("@koobiq/react-core").DataAttributeProps;
+    };
+    disableExitOnEscapeKeyDown?: boolean;
+} & Pick<DialogProps, "hideCloseButton"> & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof ContentPanelComponent & {
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+export declare const ContentPanel: CompoundedComponent;
+export {};

package/dist/components/ContenPanel/ContentPanel.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useContext } from "react";
+import { useDOMRef, isNumber, mergeProps, clsx } from "@koobiq/react-core";
+import { useContextProps, useOverlayTriggerState, useOverlay } from "@koobiq/react-primitives";
+import { createPortal } from "react-dom";
+import { Transition } from "react-transition-group";
+import { TRANSITION_TIMEOUT } from "./constants.js";
+import s from "./ContentPanel.module.css.js";
+import { ContentPanelContext } from "./ContentPanelContext.js";
+import { parseContentPanelSize } from "./utils/index.js";
+import { ContentPanelContainerContext } from "./components/ContentPanelContainer/ContentPanelContainerContext.js";
+import { useContentPanelResize } from "./hooks/useContentPanelResize/useContentPanelResize.js";
+import { Dialog } from "../Dialog/Dialog.js";
+import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
+import { DialogBody } from "../Dialog/components/DialogBody.js";
+import { DialogFooter } from "../Dialog/components/DialogFooter.js";
+const ContentPanelComponent = forwardRef(
+  (props, ref) => {
+    const domRef = useDOMRef(ref);
+    const overlayRef = useRef(null);
+    const [panelProps, panelRef] = useContextProps(
+      props,
+      domRef,
+      ContentPanelContext
+    );
+    const {
+      defaultWidth: defaultWidthProp,
+      minWidth: minWidthProp,
+      maxWidth: maxWidthProp,
+      disableExitOnEscapeKeyDown,
+      onResetResize,
+      isResizable = false,
+      width,
+      onResize,
+      onResizeEnd,
+      onResizeStart,
+      isOpen,
+      onOpenChange,
+      defaultOpen,
+      className,
+      style,
+      children,
+      slotProps,
+      hideCloseButton,
+      ...other
+    } = panelProps;
+    const {
+      portalContainer,
+      containerWidth,
+      state: containerState
+    } = useContext(ContentPanelContainerContext);
+    const componentState = useOverlayTriggerState({
+      isOpen,
+      onOpenChange,
+      defaultOpen
+    });
+    const state = containerState ?? componentState;
+    const { isOpen: isOpenState, close } = state;
+    const maxWidthPropPx = parseContentPanelSize(containerWidth, maxWidthProp);
+    const minWidthPropPx = parseContentPanelSize(containerWidth, minWidthProp);
+    const defaultWidthPx = parseContentPanelSize(
+      containerWidth,
+      defaultWidthProp
+    );
+    const maxWidth = Math.min(
+      isNumber(containerWidth) ? containerWidth : Number.POSITIVE_INFINITY,
+      isNumber(maxWidthPropPx) ? maxWidthPropPx : Number.POSITIVE_INFINITY
+    );
+    const minWidth = Math.max(
+      0,
+      isNumber(minWidthPropPx) ? minWidthPropPx : 200
+    );
+    const defaultWidth = defaultWidthPx ?? 400;
+    const widthPx = parseContentPanelSize(containerWidth, width);
+    const { width: panelWidth, resizerProps: moveProps } = useContentPanelResize({
+      width: widthPx,
+      isResizable,
+      minWidth,
+      maxWidth,
+      onResize,
+      onResizeEnd,
+      onResizeStart,
+      onResetResize,
+      defaultWidth
+    });
+    const { overlayProps } = useOverlay(
+      {
+        onClose: close,
+        isOpen: isOpenState,
+        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
+      },
+      overlayRef
+    );
+    const rootProps = mergeProps(
+      {
+        ref: panelRef,
+        className: clsx(s.base, isResizable && s.resizable, className),
+        style: {
+          inlineSize: panelWidth,
+          "--content-panel-transition-duration": `${TRANSITION_TIMEOUT}ms`,
+          ...style
+        }
+      },
+      other
+    );
+    const dialogProps = mergeProps(
+      {
+        onClose: close,
+        className: s.dialog,
+        hideCloseButton
+      },
+      slotProps?.dialog,
+      overlayProps
+    );
+    const resizerProps = mergeProps(
+      {
+        className: s.resizer
+      },
+      slotProps?.resizer,
+      moveProps
+    );
+    const transitionProps = mergeProps(
+      {
+        timeout: TRANSITION_TIMEOUT,
+        in: isOpenState,
+        nodeRef: panelRef,
+        unmountOnExit: true
+      },
+      slotProps?.transition
+    );
+    const panel = /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rootProps,
+        "data-transition": transition,
+        "data-resizable": isResizable || void 0,
+        children: /* @__PURE__ */ jsxs(Dialog, { ...dialogProps, ref: overlayRef, role: "dialog", children: [
+          isResizable && /* @__PURE__ */ jsx("div", { ...resizerProps }),
+          children
+        ] })
+      }
+    ) });
+    if (containerState && portalContainer) {
+      return createPortal(panel, portalContainer);
+    }
+    return panel;
+  }
+);
+ContentPanelComponent.displayName = "ContentPanel";
+const ContentPanel = ContentPanelComponent;
+ContentPanel.Header = DialogHeader;
+ContentPanel.Body = DialogBody;
+ContentPanel.Footer = DialogFooter;
+export {
+  ContentPanel
+};

package/dist/components/ContenPanel/ContentPanel.module.css.js

@@ -0,0 +1,17 @@
+const base = "kbq-contentpanel-3541ee";
+const resizable = "kbq-contentpanel-resizable-71e8a7";
+const dialog = "kbq-contentpanel-dialog-872768";
+const resizer = "kbq-contentpanel-resizer-a708c1";
+const s = {
+  base,
+  resizable,
+  dialog,
+  resizer
+};
+export {
+  base,
+  s as default,
+  dialog,
+  resizable,
+  resizer
+};

package/dist/components/ContenPanel/ContentPanelContext.d.ts

@@ -0,0 +1,3 @@
+import type { ContextValue } from '@koobiq/react-primitives';
+import type { ContentPanelProps } from './types';
+export declare const ContentPanelContext: import("react").Context<ContextValue<ContentPanelProps, HTMLDivElement>>;

package/dist/components/ContenPanel/ContentPanelContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from "react";
+const ContentPanelContext = createContext(null);
+export {
+  ContentPanelContext
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.d.ts

@@ -0,0 +1,2 @@
+import type { ContentPanelContainerProps } from './types';
+export declare const ContentPanelContainer: import("react").ForwardRefExoticComponent<Omit<ContentPanelContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo } from "react";
+import { useMultiRef, useResizeObserverRefs, mergeProps, clsx } from "@koobiq/react-core";
+import { useOverlayTriggerState, Provider, ButtonContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
+import { TRANSITION_TIMEOUT } from "../../constants.js";
+import { ContentPanelContext } from "../../ContentPanelContext.js";
+import { getInlineSize } from "../../utils/index.js";
+import s from "./ContentPanelContainer.module.css.js";
+import { ContentPanelContainerContext } from "./ContentPanelContainerContext.js";
+import { useContentPanelContainer } from "../../hooks/useContentPanelContainer/useContentPanelContainer.js";
+const ContentPanelContainer = forwardRef((props, ref) => {
+  const {
+    children,
+    isOpen,
+    onOpenChange,
+    disableExitOnEscapeKeyDown,
+    defaultOpen,
+    className,
+    slotProps,
+    ...other
+  } = props;
+  const state = useOverlayTriggerState({
+    isOpen,
+    onOpenChange,
+    defaultOpen
+  });
+  const [portalContainer, setPortalContainer] = useState(
+    null
+  );
+  const { triggerProps, containerProps } = useContentPanelContainer(
+    { isKeyboardDismissDisabled: !!disableExitOnEscapeKeyDown },
+    state
+  );
+  const containerRef = useRef(null);
+  const panelRef = useRef(null);
+  const domRef = useMultiRef([
+    ref,
+    containerRef,
+    setPortalContainer
+  ]);
+  const observedRefs = useMemo(
+    () => [containerRef, panelRef],
+    [panelRef.current, containerRef.current, state.isOpen]
+  );
+  const [containerWidth, panelWidth] = useResizeObserverRefs(
+    observedRefs,
+    (el) => {
+      if (el) return getInlineSize(el);
+      return 0;
+    }
+  );
+  const rootProps = mergeProps(
+    {
+      className: clsx(s.base, className),
+      ref: domRef,
+      ...other
+    },
+    containerProps
+  );
+  const bodyProps = {
+    ...slotProps?.body,
+    className: clsx(s.body, slotProps?.body?.className),
+    children: typeof children === "function" ? children(state) : children,
+    style: {
+      ...slotProps?.body?.style,
+      "--content-panel-inline-size": `${panelWidth}px`,
+      "--content-body-transition-duration": `${TRANSITION_TIMEOUT}ms`
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      values: [
+        [
+          ContentPanelContainerContext,
+          {
+            state,
+            containerWidth: containerWidth || void 0,
+            portalContainer
+          }
+        ],
+        [
+          ContentPanelContext,
+          {
+            ref: panelRef,
+            className: s.panel,
+            disableExitOnEscapeKeyDown
+          }
+        ],
+        [
+          ButtonContext,
+          {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              trigger: triggerProps
+            }
+          }
+        ]
+      ],
+      children: /* @__PURE__ */ jsx("div", { ...rootProps, children: /* @__PURE__ */ jsx("div", { ...bodyProps }) })
+    }
+  );
+});
+ContentPanelContainer.displayName = "ContentPanelContainer";
+export {
+  ContentPanelContainer
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.module.css.js

@@ -0,0 +1,14 @@
+const base = "kbq-contentpanelcontainer-476965";
+const body = "kbq-contentpanelcontainer-body-b7b172";
+const panel = "kbq-contentpanelcontainer-panel-03cf65";
+const s = {
+  base,
+  body,
+  panel
+};
+export {
+  base,
+  body,
+  s as default,
+  panel
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.d.ts

@@ -0,0 +1,7 @@
+import type { OverlayTriggerState } from '@react-stately/overlays';
+export type ContentPanelStateContextProps = {
+    portalContainer?: HTMLElement | null;
+    containerWidth?: number;
+    state: OverlayTriggerState;
+};
+export declare const ContentPanelContainerContext: import("react").Context<ContentPanelStateContextProps>;

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+const ContentPanelContainerContext = createContext(
+  {}
+);
+export {
+  ContentPanelContainerContext
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ContentPanelContainer';
+export * from './ContentPanelContainerContext';
+export * from './types';