@koobiq/react-components 0.19.0 → 0.21.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useCallback } from "react";
-import { useDOMRef, useFilter, useLocalizedStringFormatter, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
-import { IconCircleXmark16, IconChevronDownS16 } from "@koobiq/react-icons";
+import { useDOMRef, useFilter, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
 import { useComboBoxState, removeDataAttributes, useSlottedContext, FormContext, useComboBox, FieldErrorContext } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Autocomplete.module.css.js";
-import intlMessages from "./intl.json.js";
 import { ListInner, List } from "../List/List.js";
 import { useForm } from "../Form/FormContext.js";
+import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { FormField } from "../FormField/FormField.js";
 import { Item } from "../Collections/Item.js";
@@ -83,8 +83,7 @@ function AutocompleteRender(props, ref) {
     }),
     state
   );
-  const t = useLocalizedStringFormatter(intlMessages);
-  const hasClearButton = isClearable && !isReadOnly && !isDisabled && (allowsCustomValue ? !!state.inputValue : !!state.selectedItem);
+  const clearButtonIsHidden = isReadOnly || isDisabled || (allowsCustomValue ? !state.inputValue : !state.selectedItem);
   const handleClear = useCallback(() => {
     state.selectionManager.setSelectedKeys(/* @__PURE__ */ new Set());
     onClear?.();
@@ -147,10 +146,8 @@ function AutocompleteRender(props, ref) {
   const clearButtonProps = mergeProps(
     {
       onPress: handleClear,
-      className: s.clearButton,
-      preventFocusOnPress: true,
-      "aria-label": t.format("clear"),
-      variant: isInvalid ? "error" : "fade-contrast"
+      isHidden: clearButtonIsHidden,
+      isClearable
     },
     slotProps?.clearButton
   );
@@ -166,8 +163,8 @@ function AutocompleteRender(props, ref) {
         e.preventDefault();
         inputRef?.current?.focus();
       },
-      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
-        hasClearButton && /* @__PURE__ */ jsx(IconButton, { ...clearButtonProps, children: /* @__PURE__ */ jsx(IconCircleXmark16, {}) }),
+      endAddon: (isClearable || endAddon || !disableShowChevron || void 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FormFieldClearButton, { ...clearButtonProps }),
         endAddon,
         !disableShowChevron && /* @__PURE__ */ jsx(
           IconButton,

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

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

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, cloneElement } from "react";
+import { mergeProps, clsx } from "@koobiq/react-core";
+import { useBreadcrumbs } from "@koobiq/react-primitives";
+import s from "./Breadcrumbs.module.css.js";
+import { BreadcrumbsContext } from "./BreadcrumbsContext.js";
+import { BreadcrumbsWrap } from "./components/BreadcrumbsWrap/BreadcrumbsWrap.js";
+import { BreadcrumbsCollapse } from "./components/BreadcrumbsCollapse/BreadcrumbsCollapse.js";
+const Breadcrumbs = forwardRef(
+  (props, ref) => {
+    const {
+      separator = `/`,
+      overflowMode = "collapse",
+      renderEllipsis,
+      onAction,
+      ellipsisIndex,
+      children: childrenProp,
+      size = "normal",
+      className,
+      ...other
+    } = props;
+    const children = childrenProp?.map((child, i) => {
+      const itemKey = child?.key || i;
+      return cloneElement(child, {
+        key: itemKey,
+        onPress: (e) => {
+          child.props?.onPress?.(e);
+          onAction?.(itemKey);
+        }
+      });
+    });
+    const { navProps: navPropsAria } = useBreadcrumbs(other);
+    const navProps = mergeProps(
+      {
+        "data-size": size,
+        "data-overflow-mode": overflowMode,
+        className: clsx(s.base, s[size], s[overflowMode], className),
+        ...other
+      },
+      navPropsAria
+    );
+    return /* @__PURE__ */ jsx(BreadcrumbsContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx("nav", { ...navProps, ref, children: overflowMode === "wrap" ? /* @__PURE__ */ jsx(BreadcrumbsWrap, { ...other, separator, children }) : /* @__PURE__ */ jsx(
+      BreadcrumbsCollapse,
+      {
+        ...other,
+        onAction,
+        ellipsisIndex,
+        renderEllipsis,
+        separator,
+        children
+      }
+    ) }) });
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+export {
+  Breadcrumbs
+};

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

@@ -0,0 +1,32 @@
+const base = "kbq-breadcrumbs-922b6f";
+const wrap = "kbq-breadcrumbs-wrap-352442";
+const list = "kbq-breadcrumbs-list-ab1ac2";
+const compact = "kbq-breadcrumbs-compact-2a6f3a";
+const normal = "kbq-breadcrumbs-normal-47d2bc";
+const big = "kbq-breadcrumbs-big-b56335";
+const item = "kbq-breadcrumbs-item-bcbc6b";
+const ellipsis = "kbq-breadcrumbs-ellipsis-60de4d";
+const divider = "kbq-breadcrumbs-divider-31522f";
+const s = {
+  base,
+  wrap,
+  list,
+  compact,
+  normal,
+  big,
+  item,
+  ellipsis,
+  divider
+};
+export {
+  base,
+  big,
+  compact,
+  s as default,
+  divider,
+  ellipsis,
+  item,
+  list,
+  normal,
+  wrap
+};

package/dist/components/Breadcrumbs/BreadcrumbsContext.d.ts

@@ -0,0 +1,7 @@
+import type { BreadcrumbsPropSize } from './types';
+export type BreadcrumbsContextValue = {
+    /** Size. */
+    size: BreadcrumbsPropSize;
+};
+export declare const BreadcrumbsContext: import("react").Context<BreadcrumbsContextValue>;
+export declare const useBreadcrumbsContext: () => BreadcrumbsContextValue;

package/dist/components/Breadcrumbs/BreadcrumbsContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const BreadcrumbsContext = createContext({
+  size: "compact"
+});
+const useBreadcrumbsContext = () => useContext(BreadcrumbsContext);
+export {
+  BreadcrumbsContext,
+  useBreadcrumbsContext
+};

package/dist/components/Breadcrumbs/components/BreadcrumbItem/BreadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { BreadcrumbItemBaseProps } from './types';
+export declare const BreadcrumbItem: import("@koobiq/react-core").PolyForwardComponent<"span", BreadcrumbItemBaseProps, ElementType>;
+export type BreadcrumbItemProps<As extends ElementType = 'span'> = ComponentPropsWithRef<typeof BreadcrumbItem<As>>;

package/dist/components/Breadcrumbs/components/BreadcrumbItem/BreadcrumbItem.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsxs } from "react/jsx-runtime";
+import { polymorphicForwardRef, useDOMRef, useHover, useFocusRing, usePress, filterDOMProps, isNotNil, mergeProps, clsx } from "@koobiq/react-core";
+import { useBreadcrumbItem, removeDataAttributes } from "@koobiq/react-primitives";
+import { useBreadcrumbsContext } from "../../BreadcrumbsContext.js";
+import s from "./BreadcrumbItem.module.css.js";
+const BreadcrumbItem = polymorphicForwardRef((props, ref) => {
+  const domRef = useDOMRef(ref);
+  const {
+    as = "span",
+    children,
+    endAddon,
+    isCurrent,
+    startAddon,
+    isDisabled,
+    className,
+    style,
+    ...other
+  } = props;
+  let { itemProps } = useBreadcrumbItem(
+    {
+      ...removeDataAttributes(props),
+      children: props.children || null,
+      elementType: props.href ? "a" : `${as}`
+    },
+    domRef
+  );
+  const Tag = props.href ? "a" : as;
+  const { size } = useBreadcrumbsContext();
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { focusProps, isFocusVisible } = useFocusRing({});
+  const { isPressed, pressProps } = usePress({ isDisabled });
+  const DOMProps = filterDOMProps(props);
+  delete DOMProps.id;
+  if (as !== "a" && as !== "span") {
+    itemProps = other;
+  }
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: clsx(
+        s.base,
+        s[size],
+        isHovered && s.hovered,
+        isCurrent && s.current,
+        isPressed && s.pressed,
+        isDisabled && s.disabled,
+        isFocusVisible && s.focusVisible,
+        className
+      ),
+      "data-size": size,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-current": isCurrent || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      ...mergeProps(DOMProps, itemProps, hoverProps, focusProps, pressProps),
+      style,
+      ref: domRef,
+      children: [
+        isNotNil(startAddon) && startAddon,
+        children,
+        isNotNil(endAddon) && endAddon
+      ]
+    }
+  );
+});
+export {
+  BreadcrumbItem
+};

package/dist/components/Breadcrumbs/components/BreadcrumbItem/BreadcrumbItem.module.css.js

@@ -0,0 +1,32 @@
+const base = "kbq-breadcrumbitem-c1599d";
+const hovered = "kbq-breadcrumbitem-hovered-985b33";
+const pressed = "kbq-breadcrumbitem-pressed-80b3fe";
+const focusVisible = "kbq-breadcrumbitem-focusVisible-16d3f1";
+const disabled = "kbq-breadcrumbitem-disabled-a307b2";
+const current = "kbq-breadcrumbitem-current-f87edc";
+const compact = "kbq-breadcrumbitem-compact-71772d";
+const normal = "kbq-breadcrumbitem-normal-548b3c";
+const big = "kbq-breadcrumbitem-big-7dc306";
+const s = {
+  base,
+  hovered,
+  pressed,
+  focusVisible,
+  disabled,
+  current,
+  compact,
+  normal,
+  big
+};
+export {
+  base,
+  big,
+  compact,
+  current,
+  s as default,
+  disabled,
+  focusVisible,
+  hovered,
+  normal,
+  pressed
+};

package/dist/components/Breadcrumbs/components/BreadcrumbItem/index.d.ts

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

package/dist/components/Breadcrumbs/components/BreadcrumbItem/types.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { AriaBreadcrumbItemProps } from '@koobiq/react-primitives';
+export type BreadcrumbItemBaseProps = Omit<AriaBreadcrumbItemProps, 'children' | 'elementType'> & {
+    /** Icon placed before the children. */
+    startAddon?: ReactNode;
+    /** Icon placed after the children. */
+    endAddon?: ReactNode;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

package/dist/components/Breadcrumbs/components/BreadcrumbsCollapse/BreadcrumbsCollapse.d.ts

@@ -0,0 +1,2 @@
+import type { BreadcrumbsProps } from '../../types';
+export declare const BreadcrumbsCollapse: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumbs/components/BreadcrumbsCollapse/BreadcrumbsCollapse.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, cloneElement } from "react";
+import { useHideOverflowItems, mergeProps, isString, isNotNil } from "@koobiq/react-core";
+import { IconEllipsisHorizontal16 } from "@koobiq/react-icons";
+import { Button } from "@koobiq/react-primitives";
+import s from "../../Breadcrumbs.module.css.js";
+import { clampEllipsisIndex, getSlotIndex } from "./utils.js";
+import { BreadcrumbItem } from "../BreadcrumbItem/BreadcrumbItem.js";
+import { Menu } from "../../../Menu/Menu.js";
+const renderEllipsisDefault = ({
+  ellipsisIcon,
+  onAction,
+  items
+}) => {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      onAction,
+      control: (props) => /* @__PURE__ */ jsx(BreadcrumbItem, { ...props, as: Button, children: ellipsisIcon }),
+      children: items.map((item, index) => /* @__PURE__ */ jsx(
+        Menu.Item,
+        {
+          ...item.props,
+          textValue: isString(item.children) ? item.children : `${index}`,
+          children: /* @__PURE__ */ jsx(Menu.ItemText, { children: item.children })
+        },
+        item.key
+      ))
+    }
+  );
+};
+const BreadcrumbsCollapse = (props) => {
+  const {
+    renderEllipsis = renderEllipsisDefault,
+    ellipsisIndex = 2,
+    onAction,
+    separator,
+    slotProps,
+    children
+  } = props;
+  const ellipsisIcon = /* @__PURE__ */ jsx(IconEllipsisHorizontal16, {});
+  const elements = Children.toArray(children);
+  const { length } = elements;
+  const slotsLength = length + 1;
+  const items = elements.map((element, index) => ({
+    element,
+    index,
+    props: element.props,
+    key: element.key ?? null,
+    href: element.props.href,
+    children: element.props.children
+  }));
+  const moreIndex = clampEllipsisIndex(ellipsisIndex, length);
+  const { parentRef, visibleMap, itemsRefs } = useHideOverflowItems({
+    length: slotsLength,
+    pinnedIndex: length,
+    moreIndex
+  });
+  const listProps = mergeProps(
+    { className: s.list, ref: parentRef },
+    slotProps?.list
+  );
+  const separatorProps = mergeProps(
+    { "aria-hidden": "true", className: s.divider },
+    slotProps?.divider
+  );
+  const renderSeparator = (isLast) => !isLast && isNotNil(separator) ? /* @__PURE__ */ jsx("span", { ...separatorProps, children: separator }) : null;
+  const collapsedItems = items.filter(
+    ({ index }) => !visibleMap[getSlotIndex(index, moreIndex)]
+  );
+  return /* @__PURE__ */ jsx("ol", { ...listProps, children: Array.from({ length: slotsLength }).map((_, slotIndex) => {
+    const isEllipsis = slotIndex === moreIndex;
+    const isLast = slotIndex === length;
+    const separatorNode = renderSeparator(isLast);
+    if (isEllipsis) {
+      const defaultEllipsis = /* @__PURE__ */ jsx(BreadcrumbItem, { as: "span", children: ellipsisIcon });
+      const customEllipsis = renderEllipsis?.({
+        ellipsisIcon,
+        ellipsisIndex: slotIndex,
+        items: collapsedItems,
+        onAction
+      });
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: s.ellipsis,
+          ref: itemsRefs[slotIndex],
+          "aria-hidden": !visibleMap[slotIndex] || void 0,
+          children: [
+            customEllipsis ?? defaultEllipsis,
+            separatorNode
+          ]
+        },
+        `ellipsis-${moreIndex}`
+      );
+    }
+    const itemIndex = slotIndex < moreIndex ? slotIndex : slotIndex - 1;
+    const child = items[itemIndex]?.element;
+    if (!child) return null;
+    if (!isValidElement(child)) return child;
+    const isLastChild = itemIndex === length - 1;
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: s.item,
+        ref: itemsRefs[slotIndex],
+        "aria-hidden": !visibleMap[slotIndex] || void 0,
+        children: [
+          cloneElement(child, {
+            isCurrent: child.props.isCurrent ?? isLastChild
+          }),
+          separatorNode
+        ]
+      },
+      child.key ?? itemIndex
+    );
+  }) });
+};
+export {
+  BreadcrumbsCollapse
+};

package/dist/components/Breadcrumbs/components/BreadcrumbsCollapse/index.d.ts

@@ -0,0 +1 @@
+export * from './BreadcrumbsCollapse';

package/dist/components/Breadcrumbs/components/BreadcrumbsCollapse/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function clampEllipsisIndex(value: number, length: number): number;
+export declare function getSlotIndex(itemIndex: number, moreIndex: number): number;

package/dist/components/Breadcrumbs/components/BreadcrumbsCollapse/utils.js

@@ -0,0 +1,11 @@
+function clampEllipsisIndex(value, length) {
+  if (length <= 1) return 0;
+  return Math.max(0, Math.min(value, length - 1));
+}
+function getSlotIndex(itemIndex, moreIndex) {
+  return itemIndex < moreIndex ? itemIndex : itemIndex + 1;
+}
+export {
+  clampEllipsisIndex,
+  getSlotIndex
+};

package/dist/components/Breadcrumbs/components/BreadcrumbsWrap/BreadcrumbsWrap.d.ts

@@ -0,0 +1,2 @@
+import type { BreadcrumbsProps } from '../../types';
+export declare const BreadcrumbsWrap: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumbs/components/BreadcrumbsWrap/BreadcrumbsWrap.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement } from "react";
+import { mergeProps, isNotNil } from "@koobiq/react-core";
+import s from "../../Breadcrumbs.module.css.js";
+const BreadcrumbsWrap = (props) => {
+  const { separator, slotProps, children } = props;
+  const items = Children.toArray(children);
+  const listProps = mergeProps({ className: s.list }, slotProps?.list);
+  const separatorProps = mergeProps(
+    { "aria-hidden": "true", className: s.divider },
+    slotProps?.divider
+  );
+  return /* @__PURE__ */ jsx("ol", { ...listProps, children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    const separatorNode = !isLast && isNotNil(separator) ? /* @__PURE__ */ jsx("span", { ...separatorProps, children: separator }) : null;
+    return /* @__PURE__ */ jsxs("li", { className: s.item, children: [
+      cloneElement(item, {
+        isCurrent: item.props.isCurrent ?? isLast
+      }),
+      separatorNode
+    ] }, item.key ?? i);
+  }) });
+};
+export {
+  BreadcrumbsWrap
+};

package/dist/components/Breadcrumbs/components/BreadcrumbsWrap/index.d.ts

@@ -0,0 +1 @@
+export * from './BreadcrumbsWrap';

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

@@ -0,0 +1,3 @@
+export * from './BreadcrumbItem';
+export * from './BreadcrumbsCollapse';
+export * from './BreadcrumbsWrap';

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

@@ -0,0 +1,3 @@
+export * from './Breadcrumbs';
+export * from './types';
+export * from './components/BreadcrumbItem';

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

@@ -0,0 +1,69 @@
+import type { Key, ReactNode, ComponentRef, ReactElement, ComponentPropsWithRef } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { AriaBreadcrumbsProps } from '@koobiq/react-primitives';
+import type { BreadcrumbItemProps } from './components';
+export declare const breadcrumbsPropSize: readonly ["compact", "normal", "big"];
+export type BreadcrumbsPropSize = (typeof breadcrumbsPropSize)[number];
+export declare const breadcrumbsPropOverflowMode: readonly ["collapse", "wrap"];
+export type BreadcrumbsPropOverflowMode = (typeof breadcrumbsPropOverflowMode)[number];
+export type BreadcrumbRenderItem = {
+    /** React element. */
+    element: ReactElement<BreadcrumbItemProps>;
+    /** Index in the `children` list. */
+    index: number;
+    /** Key. */
+    key: string | number | null;
+    /** Convenient access to the element's children. */
+    children: ReactNode;
+    /** Optional link target extracted from props. */
+    href?: string;
+    /** Element props shortcut. */
+    props: BreadcrumbItemProps;
+};
+export type RenderEllipsisParams = {
+    /** The collapsed items. */
+    items: BreadcrumbRenderItem[];
+    /** The default ellipsis icon. */
+    ellipsisIcon: ReactElement;
+    /** Index of the ellipsis in the visual list. */
+    ellipsisIndex: number;
+    /** Handler called when any breadcrumb item is pressed. It returns the item key. */
+    onAction?: (key: Key) => void;
+};
+export type BreadcrumbsPropRenderEllipsis = (params: RenderEllipsisParams) => ReactNode;
+export type BreadcrumbsProps = ExtendableComponentPropsWithRef<AriaBreadcrumbsProps & {
+    /** The contents of the collection. */
+    children?: Array<ReactElement<BreadcrumbItemProps>>;
+    /**
+     * Size.
+     * @default 'normal'
+     */
+    size?: BreadcrumbsPropSize;
+    /**
+     * The separator between each breadcrumb.
+     * @default "/"
+     */
+    separator?: ReactNode;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        list?: ComponentPropsWithRef<'ol'>;
+        divider?: ComponentPropsWithRef<'span'>;
+    };
+    /**
+     * Position of the ellipsis item.
+     * @default 2
+     */
+    ellipsisIndex?: number;
+    /** Render-function for customizing the ellipsis item. */
+    renderEllipsis?: BreadcrumbsPropRenderEllipsis;
+    /**
+     * Controls how breadcrumbs behave when they run out of space — collapse items or wrap to a new line.
+     * @default 'collapse'
+     */
+    overflowMode?: BreadcrumbsPropOverflowMode;
+    /** Handler called when any breadcrumb item is pressed. It returns the item key. */
+    onAction?: (key: Key) => void;
+}, 'nav'>;
+export type BreadcrumbsRef = ComponentRef<'nav'>;

package/dist/components/Breadcrumbs/types.js

@@ -0,0 +1,6 @@
+const breadcrumbsPropSize = ["compact", "normal", "big"];
+const breadcrumbsPropOverflowMode = ["collapse", "wrap"];
+export {
+  breadcrumbsPropOverflowMode,
+  breadcrumbsPropSize
+};

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

@@ -1,5 +1,6 @@
 import type { ReactNode, ComponentRef } from 'react';
-import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ContextValue } from '@koobiq/react-primitives';
 export type DialogBodyRef = ComponentRef<'div'>;
 export type DialogBodyProps = ExtendableComponentPropsWithRef<{
     /** Additional CSS-classes. */
@@ -9,5 +10,5 @@ export type DialogBodyProps = ExtendableComponentPropsWithRef<{
     /** Unique identifier for testing purposes. */
     'data-testid'?: string;
 }, 'div'>;
-export declare const DialogBodyContext: import("react").Context<DialogBodyProps>;
+export declare const DialogBodyContext: import("react").Context<ContextValue<DialogBodyProps, HTMLDivElement>>;
 export declare const DialogBody: import("react").ForwardRefExoticComponent<Omit<DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/components/DialogBody.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext } from "react";
-import { mergeProps, clsx, useMultiRef } from "@koobiq/react-core";
+import { createContext, forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import { useContextProps } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../styles/utility.js";
 import s from "../Dialog.module.css.js";
-const DialogBodyContext = createContext({});
+const DialogBodyContext = createContext(null);
 const DialogBody = forwardRef(
   ({ children, className, ...other }, ref) => {
-    const defaultProps = useContext(DialogBodyContext);
-    const { ref: contextRef } = mergeProps(defaultProps, other);
+    const [, ctxRef] = useContextProps({}, ref, DialogBodyContext);
     return /* @__PURE__ */ jsx(
       "div",
       {
-        ref: useMultiRef([ref, contextRef]),
+        ref: ctxRef,
         className: clsx(
           s.content,
           utilClasses.typography["text-normal"],

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

@@ -2,27 +2,4 @@ import type { ComponentRef } from 'react';
 import { type ButtonProps } from '../../Button';
 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;
-}, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "data-testid" | "isDisabled" | "variant" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "fullWidth" | "onlyIcon" | "startIcon" | "endIcon" | keyof {
-    progress?: boolean;
-    disabled?: boolean;
-}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "data-testid" | "variant" | "fullWidth" | "onlyIcon" | "startIcon" | "endIcon" | keyof {
-    progress?: boolean;
-    disabled?: boolean;
-}> & {
-    children?: import("react").ReactNode;
-    variant?: import("../..").ButtonPropVariant;
-    onlyIcon?: boolean;
-    className?: string;
-    style?: import("react").CSSProperties;
-    fullWidth?: boolean;
-    startIcon?: import("react").ReactNode;
-    endIcon?: import("react").ReactNode;
-    'data-testid'?: string | number;
-} & {
-    progress?: boolean;
-    disabled?: boolean;
-} & {
-    as?: "button" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<DialogCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FormField/FormFieldCaption/FormFieldCaption.d.ts

@@ -1,8 +1,4 @@
 import { type TextProps, type TextRef } from '@koobiq/react-primitives';
 export type FormFieldCaptionProps = TextProps;
 export type FormFieldCaptionRef = TextRef;
-export declare const FormFieldCaption: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | 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<HTMLParagraphElement> | null | undefined;
-}, "as" | keyof import("@koobiq/react-primitives").TextBaseProps> & import("@koobiq/react-primitives").TextBaseProps & {
-    as?: "p" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const FormFieldCaption: import("react").ForwardRefExoticComponent<Omit<FormFieldCaptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;