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

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
-import type { ItemProps } from '@koobiq/react-primitives';
-export type ListItemProps<T> = ItemProps<T> & {
+import type { ItemProps as AriaItemProps } from '@koobiq/react-primitives';
+export type ItemProps<T> = AriaItemProps<T> & {
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles. */
@@ -8,7 +8,7 @@ export type ListItemProps<T> = ItemProps<T> & {
     /** 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 function Item<T>(_props: ItemProps<T>): null;
 export declare namespace Item {
     var getCollectionNode: unknown;
 }

package/dist/components/Collections/Item.js

@@ -1,9 +1,8 @@
 "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 });
+function Item(_props) {
+  return null;
 }
 Item.getCollectionNode = ItemInner.getCollectionNode;
 export {

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

@@ -10,7 +10,7 @@ export type SectionProps<T> = {
     /** Item objects in the section. */
     items?: AriaSectionProps<T>['items'];
 };
-export declare function Section<T>(props: SectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Section<T>(_props: SectionProps<T>): null;
 export declare namespace Section {
     var getCollectionNode: unknown;
 }

package/dist/components/Collections/Section.js

@@ -1,9 +1,8 @@
 "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 });
+function Section(_props) {
+  return null;
 }
 Section.getCollectionNode = SectionInner.getCollectionNode;
 export {

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

@@ -1,2 +1,10 @@
+import { DialogBody, DialogFooter, DialogHeader } from './components';
 import type { DialogProps } from './types';
-export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const DialogComponent: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type CompoundedComponent = typeof DialogComponent & {
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+export declare const Dialog: CompoundedComponent;
+export {};

package/dist/components/Dialog/Dialog.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from "react";
-import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener, useMultiRef } from "@koobiq/react-core";
-import { useDialog } from "@koobiq/react-primitives";
+import { forwardRef, useEffect } from "react";
+import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener } from "@koobiq/react-core";
+import { useDialog, Provider, ButtonContext } from "@koobiq/react-primitives";
 import { utilClasses } from "../../styles/utility.js";
 import s from "./Dialog.module.css.js";
-import { DialogContext } from "./DialogContext.js";
+import { DialogBodyContext, DialogBody } from "./components/DialogBody.js";
 import { DialogCloseButton } from "./components/DialogCloseButton.js";
-const Dialog = forwardRef(
+import { DialogHeader } from "./components/DialoglHeader.js";
+import { DialogFooter } from "./components/DialogFooter.js";
+const DialogComponent = forwardRef(
   ({ onClose, children, slotProps, hideCloseButton, ...other }, ref) => {
     const [topOverflow, { set: setTopOverflow }] = useBoolean();
     const [bottomOverflow, { set: setBottomOverflow }] = useBoolean();
-    const contentRef = useRef(null);
     const domRef = useDOMRef(ref);
     const { dialogProps } = useDialog(other, domRef);
     const showCloseButton = !hideCloseButton;
@@ -35,24 +36,33 @@ const Dialog = forwardRef(
         element.scrollTop + element.clientHeight < element.scrollHeight
       );
     };
-    const { ref: innerRef, height } = useElementSize();
+    const { ref: bodyRef, height } = useElementSize();
     useEffect(() => {
-      if (contentRef.current) updateOverflow(contentRef.current);
-    }, [contentRef.current, height]);
+      if (bodyRef.current) updateOverflow(bodyRef.current);
+    }, [bodyRef.current, height]);
     useEventListener({
-      element: contentRef,
+      element: bodyRef,
       eventName: "scroll",
       handler: () => {
-        updateOverflow(contentRef.current);
+        updateOverflow(bodyRef.current);
       }
     });
     return /* @__PURE__ */ jsx(
-      DialogContext.Provider,
+      Provider,
       {
-        value: {
-          close: onClose,
-          slots: { content: { ref: useMultiRef([contentRef, innerRef]) } }
-        },
+        values: [
+          [DialogBodyContext, { ref: bodyRef }],
+          [
+            ButtonContext,
+            {
+              slots: {
+                close: {
+                  onPress: onClose
+                }
+              }
+            }
+          ]
+        ],
         children: /* @__PURE__ */ jsxs("section", { ...rootProps, ref: domRef, children: [
           showCloseButton && /* @__PURE__ */ jsx(DialogCloseButton, { ...slotProps?.["close-button"] }),
           /* @__PURE__ */ jsx("div", { ...containerProps, children })
@@ -61,7 +71,11 @@ const Dialog = forwardRef(
     );
   }
 );
-Dialog.displayName = "Dialog";
+DialogComponent.displayName = "Dialog";
+const Dialog = DialogComponent;
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
 export {
   Dialog
 };

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

@@ -0,0 +1,13 @@
+import type { ReactNode, ComponentRef } from 'react';
+import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type DialogBodyRef = ComponentRef<'div'>;
+export type DialogBodyProps = ExtendableComponentPropsWithRef<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string;
+}, 'div'>;
+export declare const DialogBodyContext: import("react").Context<DialogBodyProps>;
+export declare const DialogBody: import("react").ForwardRefExoticComponent<Omit<DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/components/{DialogContent.js → DialogBody.js}

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx, useMultiRef } from "@koobiq/react-core";
+import { createContext, forwardRef, useContext } from "react";
+import { mergeProps, clsx, useMultiRef } from "@koobiq/react-core";
 import { utilClasses } from "../../../styles/utility.js";
 import s from "../Dialog.module.css.js";
-import { useDialogProvider } from "../DialogContext.js";
-const DialogContent = forwardRef(
+const DialogBodyContext = createContext({});
+const DialogBody = forwardRef(
   ({ children, className, ...other }, ref) => {
-    const { slots } = useDialogProvider();
-    const { content: { ref: contextRef } = {} } = slots || {};
+    const defaultProps = useContext(DialogBodyContext);
+    const { ref: contextRef } = mergeProps(defaultProps, other);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -24,7 +24,8 @@ const DialogContent = forwardRef(
     );
   }
 );
-DialogContent.displayName = "DialogContent";
+DialogBody.displayName = "DialogBody";
 export {
-  DialogContent
+  DialogBody,
+  DialogBodyContext
 };

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

@@ -15,8 +15,8 @@ export declare const DialogCloseButton: import("react").ForwardRefExoticComponen
     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;
+    onHoverStart?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
+    onHoverEnd?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
 } & {
     as?: "button" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,25 +1,22 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { mergeProps } from "@koobiq/react-core";
 import { IconXmark16 } from "@koobiq/react-icons";
 import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
 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(({ onPress, ...other }, ref) => {
-  const { close } = useDialogProvider();
+const DialogCloseButton = forwardRef((props, ref) => {
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   return /* @__PURE__ */ jsx("div", { className: s.closeButton, children: /* @__PURE__ */ jsx(
     Button,
     {
-      ...mergeProps({ onPress: close }, { onPress }),
       "aria-label": stringFormatter.format("close"),
       startIcon: /* @__PURE__ */ jsx(IconXmark16, {}),
       variant: "contrast-transparent",
+      slot: "close",
       onlyIcon: true,
-      ...other,
+      ...props,
       ref
     }
   ) });

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

@@ -1,4 +1,4 @@
 export * from './DialoglHeader';
-export * from './DialogContent';
+export * from './DialogBody';
 export * from './DialogFooter';
 export * from './DialogCloseButton';

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

@@ -1,4 +1,3 @@
 export * from './types';
 export * from './Dialog';
 export * from './components';
-export * from './DialogContext';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { DividerBaseProps } from './index';
+export declare const Divider: import("@koobiq/react-core").PolyForwardComponent<"div", DividerBaseProps, ElementType>;
+export type DividerProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Divider<As>>;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { useSeparator } from "@koobiq/react-primitives";
+import s from "./Divider.module.css.js";
+const Divider = polymorphicForwardRef(
+  (props, ref) => {
+    const {
+      as: Tag = "div",
+      orientation = "horizontal",
+      disablePaddings = false,
+      flexItem = false,
+      display,
+      className,
+      ...other
+    } = props;
+    const { separatorProps } = useSeparator({
+      ...other,
+      orientation,
+      elementType: Tag
+    });
+    const hasPaddings = !disablePaddings;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...separatorProps,
+        className: clsx(
+          s.base,
+          s[orientation],
+          display && s[display],
+          hasPaddings && s.hasPaddings,
+          flexItem && s.flexItem,
+          className
+        ),
+        ref,
+        ...other
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+export {
+  Divider
+};

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

@@ -0,0 +1,29 @@
+const base = "kbq-divider-16da20";
+const block = "kbq-divider-block-72e3e3";
+const inlineBlock = "kbq-divider-inlineBlock-0f06d1";
+const inline = "kbq-divider-inline-2d4752";
+const vertical = "kbq-divider-vertical-a4e613";
+const horizontal = "kbq-divider-horizontal-22c78d";
+const hasPaddings = "kbq-divider-hasPaddings-d8f601";
+const flexItem = "kbq-divider-flexItem-af9975";
+const s = {
+  base,
+  block,
+  inlineBlock,
+  inline,
+  vertical,
+  horizontal,
+  hasPaddings,
+  flexItem
+};
+export {
+  base,
+  block,
+  s as default,
+  flexItem,
+  hasPaddings,
+  horizontal,
+  inline,
+  inlineBlock,
+  vertical
+};

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

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

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

@@ -0,0 +1,26 @@
+export declare const dividerPropDisplay: readonly ["block", "inline", "inlineBlock"];
+export declare const dividerPropOrientation: readonly ["horizontal", "vertical"];
+export type DividerPropOrientation = (typeof dividerPropOrientation)[number];
+export type DividerPropDisplay = (typeof dividerPropDisplay)[number];
+export type DividerBaseProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * The orientation of the separator.
+     * @default 'horizontal'
+     */
+    orientation?: DividerPropOrientation;
+    /** Set the display for the component. */
+    display?: DividerPropDisplay;
+    /**
+     * Indicates if the divider is a child of a flex container.
+     * Mainly used for vertical layout.
+     * Used when the block does not have a fixed height.
+     * @default false
+     */
+    flexItem?: boolean;
+    /** If `true`, it disables the default paddings.
+     * @default false
+     */
+    disablePaddings?: boolean;
+};

package/dist/components/Divider/types.js

@@ -0,0 +1,6 @@
+const dividerPropDisplay = ["block", "inline", "inlineBlock"];
+const dividerPropOrientation = ["horizontal", "vertical"];
+export {
+  dividerPropDisplay,
+  dividerPropOrientation
+};

package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts

@@ -4,7 +4,7 @@ export type FieldControlProps = TextFieldProps & {
     className?: string;
 };
 export type FieldControlRef = TextFieldRef;
-export declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseTextFieldProps, keyof import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps>> & import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps> & {
+export declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseTextFieldProps, keyof import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps>> & import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps> & {
     fullWidth?: boolean;
     className?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldNumberControl/FieldNumberControl.d.ts

@@ -4,7 +4,7 @@ export type FieldNumberControlProps = NumberFieldProps & {
     className?: string;
 };
 export type FieldNumberControlRef = NumberFieldRef;
-export declare const FieldNumberControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, keyof import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps>> & import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps> & {
+export declare const FieldNumberControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, keyof import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps>> & import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps> & {
     fullWidth?: boolean;
     className?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/Modal/Modal.js

@@ -7,9 +7,6 @@ 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";
-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",
@@ -121,9 +118,9 @@ const ModalComponent = forwardRef((props, ref) => {
 });
 ModalComponent.displayName = "Modal";
 const Modal = ModalComponent;
-Modal.Header = DialogHeader;
-Modal.Body = DialogContent;
-Modal.Footer = DialogFooter;
+Modal.Header = Dialog.Header;
+Modal.Body = Dialog.Body;
+Modal.Footer = Dialog.Footer;
 export {
   Modal
 };

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

@@ -9,7 +9,7 @@ export declare const ModalHeader: import("react").ForwardRefExoticComponent<Omit
  * @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>>;
+export declare const ModalContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @deprecated
  * This component has been deprecated, please use `Modal.Footer` instead.

package/dist/components/Modal/index.js

@@ -1,9 +1,7 @@
-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;
+import { Dialog } from "../Dialog/Dialog.js";
+const ModalHeader = Dialog.Header;
+const ModalContent = Dialog.Body;
+const ModalFooter = Dialog.Footer;
 export {
   ModalContent,
   ModalFooter,

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

@@ -1,12 +1,12 @@
 import type { FC } from 'react';
-import { DialogContent, DialogFooter, DialogHeader } from '../Dialog';
+import { Dialog } from '../Dialog';
 import type { PopoverInnerProps } from './types';
 export declare const PopoverInner: FC<PopoverInnerProps>;
 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;
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
 };
 export declare const Popover: CompoundedComponent;
 export {};

package/dist/components/Popover/Popover.js

@@ -7,9 +7,6 @@ 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,
@@ -156,9 +153,9 @@ const PopoverComponent = forwardRef(
 );
 PopoverComponent.displayName = "Popover";
 const Popover = PopoverComponent;
-Popover.Header = DialogHeader;
-Popover.Body = DialogContent;
-Popover.Footer = DialogFooter;
+Popover.Header = Dialog.Header;
+Popover.Body = Dialog.Body;
+Popover.Footer = Dialog.Footer;
 export {
   Popover,
   PopoverInner

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

@@ -9,7 +9,7 @@ export declare const PopoverHeader: import("react").ForwardRefExoticComponent<Om
  * @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>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @deprecated
  * This component has been deprecated, please use `Popover.Footer` instead.

package/dist/components/Popover/index.js

@@ -1,9 +1,7 @@
-import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
-import { DialogContent } from "../Dialog/components/DialogContent.js";
-import { DialogFooter } from "../Dialog/components/DialogFooter.js";
-const PopoverHeader = DialogHeader;
-const PopoverContent = DialogContent;
-const PopoverFooter = DialogFooter;
+import { Dialog } from "../Dialog/Dialog.js";
+const PopoverHeader = Dialog.Header;
+const PopoverContent = Dialog.Body;
+const PopoverFooter = Dialog.Footer;
 export {
   PopoverContent,
   PopoverFooter,

package/dist/components/SidePanel/SidePanel.d.ts

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

package/dist/components/SidePanel/SidePanel.js

@@ -7,9 +7,6 @@ import { Transition } from "react-transition-group";
 import s from "./SidePanel.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.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 SidePanelComponent = forwardRef(
   (props, ref) => {
     const {
@@ -125,9 +122,9 @@ const SidePanelComponent = forwardRef(
 );
 SidePanelComponent.displayName = "SidePanel";
 const SidePanel = SidePanelComponent;
-SidePanel.Header = DialogHeader;
-SidePanel.Body = DialogContent;
-SidePanel.Footer = DialogFooter;
+SidePanel.Header = Dialog.Header;
+SidePanel.Body = Dialog.Body;
+SidePanel.Footer = Dialog.Footer;
 export {
   SidePanel
 };

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

@@ -9,7 +9,7 @@ export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<
  * @deprecated
  * This component has been deprecated, please use `SidePanel.Body` instead.
  */
-export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @deprecated
  * This component has been deprecated, please use `SidePanel.Footer` instead.

package/dist/components/SidePanel/index.js

@@ -1,9 +1,7 @@
-import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
-import { DialogContent } from "../Dialog/components/DialogContent.js";
-import { DialogFooter } from "../Dialog/components/DialogFooter.js";
-const SidePanelHeader = DialogHeader;
-const SidePanelContent = DialogContent;
-const SidePanelFooter = DialogFooter;
+import { Dialog } from "../Dialog/Dialog.js";
+const SidePanelHeader = Dialog.Header;
+const SidePanelContent = Dialog.Body;
+const SidePanelFooter = Dialog.Footer;
 export {
   SidePanelContent,
   SidePanelFooter,

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

@@ -2,7 +2,12 @@ import type { ReactNode } from 'react';
 export declare const typographyPropVariant: readonly ["display-big", "display-normal", "display-compact", "display-big-strong", "display-normal-strong", "display-compact-strong", "headline", "title", "subheading", "text-big", "text-big-strong", "text-big-medium", "text-normal", "text-normal-strong", "text-normal-medium", "text-compact", "text-compact-strong", "text-compact-medium", "caps-big", "caps-big-strong", "caps-normal", "caps-normal-strong", "caps-compact", "caps-compact-strong", "mono-big", "mono-big-strong", "mono-normal", "mono-normal-strong", "mono-compact", "mono-compact-strong", "mono-codeblock", "tabular-big", "tabular-big-strong", "tabular-normal", "tabular-normal-strong", "tabular-compact", "tabular-compact-strong", "italic-big", "italic-big-strong", "italic-normal", "italic-normal-strong", "italic-compact", "italic-compact-strong", "inherit"];
 export type TypographyPropVariant = (typeof typographyPropVariant)[number];
 export declare const typographyPropDisplay: readonly ["block", "inline", "inline-block"];
+/**
+ * @deprecated
+ * This type has been deprecated, please use `TypographyPropDisplay` instead.
+ */
 export type TypographyDisplayVariant = (typeof typographyPropDisplay)[number];
+export type TypographyPropDisplay = (typeof typographyPropDisplay)[number];
 export declare const typographyPropAlign: readonly ["start", "center", "end", "initial", "inherit"];
 export type TypographyPropAlign = (typeof typographyPropAlign)[number];
 export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited", "inherit"];
@@ -14,7 +19,7 @@ export type TypographyBaseProps = {
      * */
     variant?: TypographyPropVariant;
     /** Set the display for the component. */
-    display?: TypographyDisplayVariant;
+    display?: TypographyPropDisplay;
     /** Set the text-align on the component. */
     align?: TypographyPropAlign;
     /** Hidden overflow content will be replaced by an ellipsis. */

package/dist/components/index.d.ts

@@ -25,4 +25,5 @@ export * from './Tooltip';
 export * from './List';
 export * from './AnimatedIcon';
 export * from './Select';
+export * from './Divider';
 export * from './layout';

package/dist/index.js

@@ -61,6 +61,8 @@ import { ListItemText } from "./components/List/components/ListItemText/ListItem
 import { listPropSelectionMode } from "./components/List/types.js";
 import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
 import { Select } from "./components/Select/Select.js";
+import { Divider } from "./components/Divider/Divider.js";
+import { dividerPropDisplay, dividerPropOrientation } from "./components/Divider/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -72,6 +74,7 @@ export {
   Button,
   Checkbox,
   Container,
+  Divider,
   FlexBox,
   Grid,
   GridItem,
@@ -122,6 +125,8 @@ export {
   containerMarginsProp,
   containerPositionProp,
   defaultBreakpoints,
+  dividerPropDisplay,
+  dividerPropOrientation,
   flex,
   flexPropAlignItems,
   flexPropDirection,

package/dist/style.css

@@ -1435,6 +1435,7 @@
   color: var(--checkbox-color);
   align-items: flex-start;
   display: inline-flex;
+  position: relative;
 }
 
 .kbq-checkbox-checkbox-dbb3d9 {
@@ -2188,6 +2189,7 @@
   color: var(--radio-color);
   align-items: flex-start;
   display: inline-flex;
+  position: relative;
 }
 
 .kbq-radio-circle-a0903b {
@@ -2332,6 +2334,7 @@
   gap: var(--kbq-size-s);
   align-items: flex-start;
   display: inline-flex;
+  position: relative;
 }
 
 .kbq-toggle-track-03a806 {
@@ -3121,6 +3124,47 @@
 .kbq-fieldselect-hasPlaceholder-7b7518 {
   --field-input-color: var(--field-input-placeholder-color);
 }
+.kbq-divider-16da20 {
+  border-style: solid;
+  border-color: var(--kbq-line-contrast-less);
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.kbq-divider-block-72e3e3 {
+  display: block;
+}
+
+.kbq-divider-inlineBlock-0f06d1 {
+  display: inline-block;
+}
+
+.kbq-divider-inline-2d4752 {
+  display: inline;
+}
+
+.kbq-divider-vertical-a4e613 {
+  --divider-paddings: 0 var(--kbq-size-xxs);
+  border-width: 0 1px 0 0;
+  block-size: 100%;
+  inline-size: 0;
+}
+
+.kbq-divider-horizontal-22c78d {
+  --divider-paddings: var(--kbq-size-xxs) 0;
+  border-width: 0 0 1px;
+  block-size: 0;
+  inline-size: 100%;
+}
+
+.kbq-divider-hasPaddings-d8f601 {
+  margin: var(--divider-paddings);
+}
+
+.kbq-divider-flexItem-af9975 {
+  align-self: stretch;
+  block-size: auto;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.13",
+  "version": "0.0.1-beta.15",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.13",
-    "@koobiq/react-core": "0.0.1-beta.13",
-    "@koobiq/react-icons": "0.0.1-beta.13",
-    "@koobiq/react-primitives": "0.0.1-beta.13"
+    "@koobiq/logger": "0.0.1-beta.15",
+    "@koobiq/react-core": "0.0.1-beta.15",
+    "@koobiq/react-icons": "0.0.1-beta.15",
+    "@koobiq/react-primitives": "0.0.1-beta.15"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",

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

@@ -1,9 +0,0 @@
-import type { DialogContentProps } from './components';
-export type DialogContextProps = {
-    close?(): void;
-    slots?: {
-        content?: DialogContentProps;
-    };
-};
-export declare const DialogContext: import("react").Context<DialogContextProps>;
-export declare function useDialogProvider(): DialogContextProps;

package/dist/components/Dialog/DialogContext.js

@@ -1,12 +0,0 @@
-"use client";
-import { createContext, useContext } from "react";
-const DialogContext = createContext(
-  {}
-);
-function useDialogProvider() {
-  return useContext(DialogContext);
-}
-export {
-  DialogContext,
-  useDialogProvider
-};

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

@@ -1,12 +0,0 @@
-import type { ReactNode, ComponentRef } from 'react';
-import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-export type DialogContentRef = ComponentRef<'div'>;
-export type DialogContentProps = ExtendableComponentPropsWithRef<{
-    /** Additional CSS-classes. */
-    className?: string;
-    /** The content of the component. */
-    children?: ReactNode;
-    /** Unique identifier for testing purposes. */
-    'data-testid'?: string;
-}, 'div'>;
-export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;