@koobiq/react-components 0.22.0 → 0.23.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -204,8 +204,8 @@ function AutocompleteRender(props, ref) {
     /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
     /* @__PURE__ */ jsxs("div", { className: s.body, children: [
       /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
   ] });

package/dist/components/Button/Button.js

@@ -60,6 +60,7 @@ const Button = polymorphicForwardRef(
         isDisabled,
         className: classNameFn,
         "data-variant": variant,
+        "data-slot": "button",
         "data-loading": isLoading || void 0,
         "data-fullwidth": fullWidth || void 0,
         "data-onlyicon": !!iconOnly || void 0,

package/dist/components/Calendar/Calendar.js

@@ -9,7 +9,7 @@ import { CalendarHeader } from "./components/CalendarHeader/CalendarHeader.js";
 import { CalendarGrid } from "./components/CalendarGrid/CalendarGrid.js";
 const textNormal = utilClasses.typography["text-normal"];
 function CalendarRender(props, ref) {
-  const { style, className } = props;
+  const { style, className, slotProps } = props;
   const { locale } = useLocale();
   const state = useCalendarState({
     createCalendar,
@@ -22,18 +22,17 @@ function CalendarRender(props, ref) {
   );
   const rootProps = mergeProps(
     { className: clsx(s.base, textNormal, className), style, ref },
+    slotProps?.root,
     calendarProps
   );
+  const headerProps = mergeProps(
+    { state, prevButtonProps, nextButtonProps },
+    slotProps?.header
+  );
+  const gridProps = mergeProps({ state }, slotProps?.grid);
   return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
-    /* @__PURE__ */ jsx(
-      CalendarHeader,
-      {
-        state,
-        prevButtonProps,
-        nextButtonProps
-      }
-    ),
-    /* @__PURE__ */ jsx(CalendarGrid, { state })
+    /* @__PURE__ */ jsx(CalendarHeader, { ...headerProps }),
+    /* @__PURE__ */ jsx(CalendarGrid, { ...gridProps })
   ] });
 }
 const Calendar = forwardRef(CalendarRender);

package/dist/components/Calendar/components/CalendarCell/CalendarCell.js

@@ -23,12 +23,22 @@ function CalendarCell({ state, date }) {
   const { hoverProps, isHovered } = useHover({
     isDisabled: isDisabled || isUnavailable
   });
-  const { focusProps, isFocusVisible } = useFocusRing({});
+  const { focusProps, isFocusVisible, isFocused } = useFocusRing({});
   return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
     "div",
     {
       ...mergeProps(hoverProps, focusProps, buttonProps),
       ref,
+      "data-slot": "calendar-cell",
+      "data-today": isToday || void 0,
+      "data-focused": isFocused || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-unavailable": isUnavailable || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
       className: clsx(
         s.base,
         isToday && s.today,

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

@@ -1,6 +1,2 @@
-import { type CalendarState, type AriaCalendarGridProps } from '@koobiq/react-primitives';
-type CalendarGridProps = {
-    state: CalendarState;
-} & AriaCalendarGridProps;
-export declare function CalendarGrid({ state, ...props }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { CalendarGridProps } from './index';
+export declare function CalendarGrid({ state, slotProps, ...props }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Calendar/components/CalendarGrid/CalendarGrid.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useEffect, createRef } from "react";
-import { useLocale, getWeeksInMonth, clsx } from "@koobiq/react-core";
+import { useLocale, getWeeksInMonth, mergeProps, clsx } from "@koobiq/react-core";
 import { useCalendarGrid } from "@koobiq/react-primitives";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { utilClasses } from "../../../../styles/utility.js";
@@ -9,7 +9,11 @@ import s from "./CalendarGrid.module.css.js";
 import { monthIndex } from "./utils.js";
 import { CalendarCell } from "../CalendarCell/CalendarCell.js";
 const textNormal = utilClasses.typography["text-normal"];
-function CalendarGrid({ state, ...props }) {
+function CalendarGrid({
+  state,
+  slotProps,
+  ...props
+}) {
   const { locale } = useLocale();
   const { gridProps, headerProps, weekDays } = useCalendarGrid(
     { ...props, weekdayStyle: "short" },
@@ -40,7 +44,13 @@ function CalendarGrid({ state, ...props }) {
     nodeRefs.current.set(k, createRef());
   }
   const tbodyRef = nodeRefs.current.get(k);
-  return /* @__PURE__ */ jsx("div", { className: s.container, children: /* @__PURE__ */ jsxs("table", { ...gridProps, className: clsx(s.base, s[dir], textNormal), children: [
+  const rootProps = mergeProps({ className: s.container }, slotProps?.root);
+  const tableProps = mergeProps(
+    { className: clsx(s.base, s[dir], textNormal) },
+    slotProps?.table,
+    gridProps
+  );
+  return /* @__PURE__ */ jsx("div", { ...rootProps, children: /* @__PURE__ */ jsxs("table", { ...tableProps, children: [
     /* @__PURE__ */ jsxs("thead", { ...headerProps, children: [
       /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, i) => /* @__PURE__ */ jsx("th", { className: clsx(s.weekDay, textNormal), children: day }, i)) }),
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { colSpan: 7, className: s.divider }) })

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

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

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { AriaCalendarGridProps, CalendarState } from '@koobiq/react-primitives';
+export type CalendarGridProps = {
+    state: CalendarState;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        table?: ComponentPropsWithRef<'table'>;
+    };
+} & AriaCalendarGridProps;

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

@@ -1,8 +1,2 @@
-import type { CalendarState, CalendarAria } from '@koobiq/react-primitives';
-type CalendarHeaderProps = {
-    prevButtonProps: CalendarAria['prevButtonProps'];
-    nextButtonProps: CalendarAria['nextButtonProps'];
-    state: CalendarState;
-};
+import type { CalendarHeaderProps } from './types';
 export declare const CalendarHeader: (props: CalendarHeaderProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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>>;