@koobiq/react-components 0.0.1-beta.12 → 0.0.1-beta.13

package/dist/components/Alert/Alert.js

@@ -42,7 +42,7 @@ const Alert = polymorphicForwardRef(
       {
         "aria-label": stringFormatter.format("close"),
         variant: "fade-contrast",
-        onClick: onClose,
+        onPress: onClose,
         className: s.closeIcon
       },
       slotProps?.closeIcon

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

@@ -34,7 +34,7 @@ export type AlertBaseProps = {
     /** Override default icon. */
     icon?: ReactNode;
     /** A callback function called when the user clicks the alert's close button. */
-    onClose?: IconButtonProps['onClick'];
+    onClose?: IconButtonProps['onPress'];
     slotProps?: {
         content?: ComponentPropsWithRef<'div'>;
         statusIcon?: ComponentPropsWithRef<'div'>;

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

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
 export declare const buttonPropVariant: readonly ["contrast-filled", "contrast-transparent", "fade-contrast-filled", "fade-contrast-outline", "fade-theme-outline", "theme-transparent"];
 export type ButtonPropVariant = (typeof buttonPropVariant)[number];
-export type ButtonPropOnClick = ButtonOptions['onPress'];
-export type ButtonBaseProps = {
+export type ButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
@@ -43,5 +43,4 @@ export type ButtonBaseProps = {
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
     onHoverEnd?: (e: HoverEvent) => void;
-    onClick?: ButtonPropOnClick;
-};
+}, UseButtonProps>;

package/dist/components/Collections/Item.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { ItemProps } from '@koobiq/react-primitives';
+export type ListItemProps<T> = ItemProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+};
+export declare function Item<T>(props: ListItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Item {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Item.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Item as Item$1 } from "@koobiq/react-primitives";
+const ItemInner = Item$1;
+function Item(props) {
+  return /* @__PURE__ */ jsx(Item, { ...props });
+}
+Item.getCollectionNode = ItemInner.getCollectionNode;
+export {
+  Item
+};

package/dist/components/{List/ListSection.d.ts → Collections/Section.d.ts}

@@ -1,16 +1,16 @@
 import type { ReactNode } from 'react';
-import type { SectionProps } from '@koobiq/react-primitives';
-export type ListSectionProps<T> = {
+import type { SectionProps as AriaSectionProps } from '@koobiq/react-primitives';
+export type SectionProps<T> = {
     /** Rendered contents of the section, e.g. a header. */
     title?: ReactNode;
     /** An accessibility label for the section. */
     'aria-label'?: string;
     /** Static child items or a function to render children. */
-    children: SectionProps<T>['children'];
+    children: AriaSectionProps<T>['children'];
     /** Item objects in the section. */
-    items?: SectionProps<T>['items'];
+    items?: AriaSectionProps<T>['items'];
 };
-export declare function ListSection<T>(props: ListSectionProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ListSection {
+export declare function Section<T>(props: SectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Section {
     var getCollectionNode: unknown;
 }

package/dist/components/Collections/Section.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Section as Section$1 } from "@koobiq/react-primitives";
+const SectionInner = Section$1;
+function Section(props) {
+  return /* @__PURE__ */ jsx(Section, { ...props });
+}
+Section.getCollectionNode = SectionInner.getCollectionNode;
+export {
+  Section
+};

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

@@ -0,0 +1,2 @@
+export * from './Section';
+export * from './Item';

package/dist/components/Dialog/DialogContext.js

@@ -1,5 +1,5 @@
 "use client";
-import { useContext, createContext } from "react";
+import { createContext, useContext } from "react";
 const DialogContext = createContext(
   {}
 );

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -4,6 +4,19 @@ export type DialogCloseButtonRef = ComponentRef<'button'>;
 export type DialogCloseButtonProps = ButtonProps;
 export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "as" | keyof import("../..").ButtonBaseProps> & import("../..").ButtonBaseProps & {
+}, "children" | "progress" | "as" | "className" | "autoFocus" | "id" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "target" | "type" | "href" | "disabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "elementType" | "preventFocusOnPress" | "excludeFromTabOrder" | "variant" | "onHoverStart" | "onHoverEnd" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid"> & Omit<import("@koobiq/react-primitives").ButtonOptions, "children" | "progress" | "className" | "disabled" | "variant" | "onHoverStart" | "onHoverEnd" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid"> & {
+    children?: import("react").ReactNode;
+    variant?: import("../..").ButtonPropVariant;
+    progress?: boolean;
+    disabled?: boolean;
+    onlyIcon?: boolean;
+    className?: string;
+    fullWidth?: boolean;
+    startIcon?: import("react").ReactNode;
+    endIcon?: import("react").ReactNode;
+    'data-testid'?: string | number;
+    onHoverStart?: (e: import("@react-types/shared").HoverEvent) => void;
+    onHoverEnd?: (e: import("@react-types/shared").HoverEvent) => void;
+} & {
     as?: "button" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Dialog/components/DialogCloseButton.js

@@ -8,13 +8,13 @@ import s from "../Dialog.module.css.js";
 import intlMessages from "../intl.json.js";
 import { useDialogProvider } from "../DialogContext.js";
 import { Button } from "../../Button/Button.js";
-const DialogCloseButton = forwardRef(({ onClick, ...other }, ref) => {
+const DialogCloseButton = forwardRef(({ onPress, ...other }, ref) => {
   const { close } = useDialogProvider();
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   return /* @__PURE__ */ jsx("div", { className: s.closeButton, children: /* @__PURE__ */ jsx(
     Button,
     {
-      ...mergeProps({ onClick: close }, { onClick }),
+      ...mergeProps({ onPress: close }, { onPress }),
       "aria-label": stringFormatter.format("close"),
       startIcon: /* @__PURE__ */ jsx(IconXmark16, {}),
       variant: "contrast-transparent",

package/dist/components/Grid/Grid.d.ts

@@ -1,4 +1,10 @@
 import type { ComponentPropsWithRef, ElementType } from 'react';
+import { GridItem } from './components';
 import type { GridBaseProps } from './types';
-export declare const Grid: import("@koobiq/react-core").PolyForwardComponent<"div", GridBaseProps, ElementType>;
-export type GridProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Grid<As>>;
+declare const GridComponent: import("@koobiq/react-core").PolyForwardComponent<"div", GridBaseProps, ElementType>;
+export type GridProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof GridComponent<As>>;
+type CompoundedComponent = typeof GridComponent & {
+    Item: typeof GridItem;
+};
+export declare const Grid: CompoundedComponent;
+export {};

package/dist/components/Grid/Grid.js

@@ -3,9 +3,10 @@ import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Grid.module.css.js";
 import { normalizeGap } from "./utils.js";
+import { GridItem } from "./components/GridItem/GridItem.js";
 import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
 import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
-const Grid = polymorphicForwardRef(
+const GridComponent = polymorphicForwardRef(
   ({
     as: Tag = "div",
     gap: gapProp,
@@ -46,7 +47,9 @@ const Grid = polymorphicForwardRef(
     );
   }
 );
-Grid.displayName = "Grid";
+GridComponent.displayName = "Grid";
+const Grid = GridComponent;
+Grid.Item = GridItem;
 export {
   Grid
 };

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

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
 export declare const iconButtonPropVariant: readonly ["theme", "theme-contrast", "fade-contrast", "error", "success", "warning"];
 export type IconButtonPropVariant = (typeof iconButtonPropVariant)[number];
 export declare const iconButtonPropSize: readonly ["l", "xl"];
 export type IconButtonPropSize = (typeof iconButtonPropSize)[number];
-export type IconButtonBaseProps = {
+export type IconButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
@@ -32,5 +33,5 @@ export type IconButtonBaseProps = {
     /** Handler that is called when a hover interaction starts. */
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
-    onClick?: ButtonOptions['onPress'];
-};
+    onHoverEnd?: (e: HoverEvent) => void;
+}, UseButtonProps>;

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

@@ -1,8 +1,9 @@
 import type { CSSProperties, ReactNode } from 'react';
-import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { UseLinkProps } from '@koobiq/react-primitives';
 import type { TypographyPropVariant } from '../Typography';
 export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 'text-normal' | 'text-big' | 'inherit'>;
-export type LinkBaseProps = {
+export type LinkBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /** The variant of the component. */
@@ -21,5 +22,4 @@ export type LinkBaseProps = {
     className?: string;
     /** Inline styles */
     style?: CSSProperties;
-    onClick?: ButtonOptions['onPress'];
-};
+}, UseLinkProps>;

package/dist/components/List/List.d.ts

@@ -1,9 +1,18 @@
 import type { Ref } from 'react';
 import { type ListState } from '@koobiq/react-primitives';
-import type { ListComponent, ListBaseProps } from './types';
+import { Item, Section } from '../Collections';
+import { ListItemText } from './components';
+import type { ListComponentProps, ListBaseProps } from './types';
 export type ListInnerProps<T extends object> = {
     state: ListState<T>;
     listRef?: Ref<HTMLUListElement>;
 } & Omit<ListBaseProps<T>, 'ref'>;
 export declare function ListInner<T extends object>(props: ListInnerProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const List: ListComponent;
+declare const ListComponent: ListComponentProps;
+type CompoundedComponent = typeof ListComponent & {
+    Item: typeof Item;
+    Section: typeof Section;
+    ItemText: typeof ListItemText;
+};
+export declare const List: CompoundedComponent;
+export {};

package/dist/components/List/List.js

@@ -1,12 +1,17 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
-import { useListState, useListBox } from "@koobiq/react-primitives";
+import { useListBox, useListState } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
 import s from "./List.module.css.js";
 import { ListSection } from "./components/ListSection/ListSection.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "./components/ListItemText/ListItemText.js";
 import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
+const { list } = utilClasses;
 function ListInner(props) {
   const { label, className, style, slotProps, state, listRef } = props;
   const domRef = useDOMRef(listRef);
@@ -23,7 +28,7 @@ function ListInner(props) {
     {
       style,
       ref: domRef,
-      className: clsx(s.base, className)
+      className: clsx(list, className)
     },
     slotProps?.list,
     listBoxProps
@@ -39,7 +44,11 @@ function ListRender(props, ref) {
   const state = useListState(props);
   return /* @__PURE__ */ jsx(ListInner, { listRef: ref, ...props, state });
 }
-const List = forwardRef(ListRender);
+const ListComponent = forwardRef(ListRender);
+const List = ListComponent;
+List.Item = Item;
+List.Section = Section;
+List.ItemText = ListItemText;
 export {
   List,
   ListInner

package/dist/components/List/List.module.css.js

@@ -1,11 +1,8 @@
-const base = "kbq-list-928929";
 const label = "kbq-list-label-e4431c";
 const s = {
-  base,
   label
 };
 export {
-  base,
   s as default,
   label
 };

package/dist/components/List/components/ListItemText/ListItemText.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNotNil, clsx } from "@koobiq/react-core";
+import s from "./ListItemText.module.css.js";
+import { Typography } from "../../../Typography/Typography.js";
+const ListItemText = forwardRef(
+  ({ className, children, caption, slotProps, ...other }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(s.base, className), ...other, ref, children: [
+    /* @__PURE__ */ jsx(Typography, { as: "span", ...slotProps?.text, children }),
+    isNotNil(caption) && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        color: "contrast-secondary",
+        className: s.caption,
+        variant: "text-compact",
+        ...slotProps?.caption,
+        children: caption
+      }
+    )
+  ] })
+);
+ListItemText.displayName = "ListItemText";
+export {
+  ListItemText
+};

package/dist/components/List/components/ListItemText/ListItemText.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-listitemtext-27bac6";
+const caption = "kbq-listitemtext-caption-ae96af";
+const s = {
+  base,
+  caption
+};
+export {
+  base,
+  caption,
+  s as default
+};

package/dist/components/List/components/ListOption/ListOption.d.ts

@@ -1,5 +1,6 @@
 import type { ListState, Node } from '@koobiq/react-primitives';
-export declare function ListOption<T>({ item, state, }: {
+export type ListOptionProps<T> = {
     item: Node<T>;
     state: ListState<T>;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ListOption<T>({ item, state }: ListOptionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/List/components/ListOption/ListOption.js

@@ -4,12 +4,10 @@ import { useRef } from "react";
 import { useHover, usePress, clsx, mergeProps } from "@koobiq/react-core";
 import { useOption } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
-import s from "./ListOption.module.css.js";
 const textVariant = utilClasses.typography;
-function ListOption({
-  item,
-  state
-}) {
+const { listItem } = utilClasses;
+function ListOption({ item, state }) {
+  const { href, className, style } = item.props;
   const ref = useRef(null);
   const {
     optionProps,
@@ -19,21 +17,18 @@ function ListOption({
   } = useOption({ key: item.key }, state, ref);
   const { hoverProps, isHovered: hovered } = useHover({ isDisabled: disabled });
   const { isPressed: pressed, pressProps } = usePress({ isDisabled: disabled });
-  const Tag = item.props.href ? "a" : "li";
+  const Tag = href ? "a" : "li";
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ...mergeProps(optionProps, hoverProps, pressProps),
-      className: clsx(
-        s.base,
-        hovered && s.hovered,
-        pressed && s.pressed,
-        selected && s.selected,
-        textVariant["text-normal"],
-        disabled && s.disabled,
-        focusVisible && s.focusVisible
-      ),
+      className: clsx(listItem, textVariant["text-normal"], className),
+      style,
       ref,
+      "data-hovered": hovered,
+      "data-pressed": pressed,
+      "data-disabled": disabled,
+      "data-selected": selected,
       "data-focus-visible": focusVisible,
       children: item.rendered
     }

package/dist/components/List/components/ListSection/ListSection.d.ts

@@ -1,5 +1,6 @@
 import type { ListState, Node } from '@koobiq/react-primitives';
-export declare function ListSection<T>({ section, state, }: {
+export type ListSectionProps<T> = {
     section: Node<T>;
     state: ListState<T>;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ListSection<T>({ section, state }: ListSectionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/List/components/ListSection/ListSection.js

@@ -4,10 +4,7 @@ import { useListBoxSection } from "@koobiq/react-primitives";
 import s from "./ListSection.module.css.js";
 import { ListOption } from "../ListOption/ListOption.js";
 import { Typography } from "../../../Typography/Typography.js";
-function ListSection({
-  section,
-  state
-}) {
+function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]

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

@@ -1,4 +1,4 @@
-export { List } from './List';
+export * from './List';
+export * from './components/ListItemText';
 export * from './types';
-export * from './ListItem';
-export * from './ListSection';
+export { Item as ListItem, Section as ListSection } from '../Collections';

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

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
-import type { AriaListBoxProps, ListState } from '@koobiq/react-primitives';
+import type { AriaListBoxProps } from '@koobiq/react-primitives';
 import type { TypographyProps } from '../Typography';
 export declare const listPropSelectionMode: readonly ["none", "single", "multiple"];
 export type ListPropSelectionMode = (typeof listPropSelectionMode)[number];
@@ -50,8 +50,4 @@ export type ListBaseProps<T extends object> = {
 };
 export type ListProps<T extends object> = ListBaseProps<T>;
 export type ListRef = ComponentRef<'ul'>;
-export type ListInnerProps<T extends object> = {
-    state: ListState<T>;
-    listRef?: Ref<HTMLUListElement>;
-} & Omit<ListBaseProps<T>, 'ref'>;
-export type ListComponent = <T extends object>(props: ListProps<T>) => ReactElement | null;
+export type ListComponentProps = <T extends object>(props: ListProps<T>) => ReactElement | null;

package/dist/components/Modal/Modal.d.ts

@@ -1,2 +1,10 @@
+import { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
 import type { ModalProps } from './types';
-export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ModalComponent: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof ModalComponent & {
+    Header: typeof DialogHeader;
+    Body: typeof DialogContent;
+    Footer: typeof DialogFooter;
+};
+export declare const Modal: CompoundedComponent;
+export {};

package/dist/components/Modal/Modal.js

@@ -7,7 +7,10 @@ import { Transition } from "react-transition-group";
 import s from "./Modal.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const Modal = forwardRef((props, ref) => {
+import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
+import { DialogContent } from "../Dialog/components/DialogContent.js";
+import { DialogFooter } from "../Dialog/components/DialogFooter.js";
+const ModalComponent = forwardRef((props, ref) => {
   const {
     size = "medium",
     hideCloseButton = false,
@@ -85,10 +88,9 @@ const Modal = forwardRef((props, ref) => {
     },
     slotProps?.modal
   );
-  const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
+  const { isDisabled, ...otherTriggerProps } = triggerProps;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
-      onClick: onPress,
       disabled: isDisabled,
       ...otherTriggerProps
     }),
@@ -117,7 +119,11 @@ const Modal = forwardRef((props, ref) => {
     )
   ] });
 });
-Modal.displayName = "Modal";
+ModalComponent.displayName = "Modal";
+const Modal = ModalComponent;
+Modal.Header = DialogHeader;
+Modal.Body = DialogContent;
+Modal.Footer = DialogFooter;
 export {
   Modal
 };

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

@@ -1,4 +1,17 @@
 export * from './Modal';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as ModalHeader, DialogContent as ModalContent, DialogFooter as ModalFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Header` instead.
+ */
+export declare const ModalHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Body` instead.
+ */
+export declare const ModalContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Footer` instead.
+ */
+export declare const ModalFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/index.js

@@ -0,0 +1,11 @@
+import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
+import { DialogContent } from "../Dialog/components/DialogContent.js";
+import { DialogFooter } from "../Dialog/components/DialogFooter.js";
+const ModalHeader = DialogHeader;
+const ModalContent = DialogContent;
+const ModalFooter = DialogFooter;
+export {
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+};

package/dist/components/Popover/Popover.d.ts

@@ -1,4 +1,12 @@
 import type { FC } from 'react';
+import { DialogContent, DialogFooter, DialogHeader } from '../Dialog';
 import type { PopoverInnerProps } from './types';
 export declare const PopoverInner: FC<PopoverInnerProps>;
-export declare const Popover: import("react").ForwardRefExoticComponent<import("./types").PopoverBaseProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverComponent: import("react").ForwardRefExoticComponent<import("./types").PopoverBaseProps & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof PopoverComponent & {
+    Header: typeof DialogHeader;
+    Body: typeof DialogContent;
+    Footer: typeof DialogFooter;
+};
+export declare const Popover: CompoundedComponent;
+export {};

package/dist/components/Popover/Popover.js

@@ -7,6 +7,9 @@ import { Transition } from "react-transition-group";
 import s from "./Popover.module.css.js";
 import { normalizeInlineSize } from "./utils.js";
 import { Dialog } from "../Dialog/Dialog.js";
+import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
+import { DialogContent } from "../Dialog/components/DialogContent.js";
+import { DialogFooter } from "../Dialog/components/DialogFooter.js";
 const PopoverInner = (props) => {
   const {
     offset = 0,
@@ -69,7 +72,7 @@ const PopoverInner = (props) => {
     if (isValidElement(children)) return cloneElement(children, overlayProps);
     return children;
   };
-  const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
+  const { isDisabled, ...otherTriggerProps } = triggerProps;
   const arrowProps = mergeProps(
     { className: s.arrow },
     arrowPropsCommon,
@@ -104,7 +107,6 @@ const PopoverInner = (props) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
       ref: controlRef,
-      onClick: onPress,
       disabled: isDisabled,
       ...otherTriggerProps
     }),
@@ -140,7 +142,7 @@ const PopoverInner = (props) => {
     ) })
   ] });
 };
-const Popover = forwardRef(
+const PopoverComponent = forwardRef(
   (props, ref) => {
     const { open, onOpenChange, defaultOpen, ...other } = props;
     const state = useOverlayTriggerState({
@@ -152,7 +154,11 @@ const Popover = forwardRef(
     return /* @__PURE__ */ jsx(PopoverInner, { popoverRef: ref, ...other, state });
   }
 );
-Popover.displayName = "Popover";
+PopoverComponent.displayName = "Popover";
+const Popover = PopoverComponent;
+Popover.Header = DialogHeader;
+Popover.Body = DialogContent;
+Popover.Footer = DialogFooter;
 export {
   Popover,
   PopoverInner

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

@@ -1,4 +1,17 @@
 export * from './Popover';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as PopoverHeader, DialogContent as PopoverContent, DialogFooter as PopoverFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Header` instead.
+ */
+export declare const PopoverHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Body` instead.
+ */
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Footer` instead.
+ */
+export declare const PopoverFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;