@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/components/Checkbox/Checkbox.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
+import { mergeProps, clsx, isNotNil } from "@koobiq/react-core";
 import { IconCheckS16, IconMinusS16 } from "@koobiq/react-icons";
 import { Checkbox as Checkbox$1 } from "@koobiq/react-primitives";
 import s from "./Checkbox.module.css.js";
+import { AnimatedIcon } from "../AnimatedIcon/AnimatedIcon.js";
 const Checkbox = forwardRef(
   (props, ref) => {
     const {
@@ -47,13 +48,22 @@ const Checkbox = forwardRef(
         "data-indeterminate": indeterminate,
         ...commonProps,
         ref,
-        children: ({ checked, indeterminate: indeterminate2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("span", { ...boxProps, children: [
-            checked && !indeterminate2 && /* @__PURE__ */ jsx(IconCheckS16, {}),
-            indeterminate2 && /* @__PURE__ */ jsx(IconMinusS16, {})
-          ] }),
-          isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
-        ] })
+        children: ({ checked, indeterminate: indeterminate2 }) => {
+          const activeIndex = indeterminate2 ? 1 : Number(Boolean(checked)) - 1;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { ...boxProps, children: /* @__PURE__ */ jsx(
+              AnimatedIcon,
+              {
+                icons: [
+                  /* @__PURE__ */ jsx(IconCheckS16, {}, "checked"),
+                  /* @__PURE__ */ jsx(IconMinusS16, {}, "indeterminate")
+                ],
+                activeIndex
+              }
+            ) }),
+            isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
+          ] });
+        }
       }
     );
   }

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

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type DividerProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    children?: ReactNode;
+    key?: string | number;
+};
+export declare function Divider(_props: DividerProps): null;
+export declare namespace Divider {
+    var getCollectionNode: (props: DividerProps) => Generator<{
+        type: string;
+        textValue: string;
+        props: DividerProps;
+    }, void, unknown>;
+}

package/dist/components/Collections/Divider.js

@@ -0,0 +1,14 @@
+"use client";
+function Divider(_props) {
+  return null;
+}
+Divider.getCollectionNode = function* getCollectionNode(props) {
+  yield {
+    type: "divider",
+    textValue: "divider",
+    props
+  };
+};
+export {
+  Divider
+};

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

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type HeaderProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    children?: ReactNode;
+    key?: string | number;
+};
+export declare function Header(_props: HeaderProps): null;
+export declare namespace Header {
+    var getCollectionNode: (props: HeaderProps) => Generator<{
+        type: string;
+        textValue: string;
+        rendered: ReactNode;
+        props: HeaderProps;
+    }, void, unknown>;
+}

package/dist/components/Collections/Header.js

@@ -0,0 +1,16 @@
+"use client";
+function Header(_props) {
+  return null;
+}
+Header.getCollectionNode = function* getCollectionNode(props) {
+  const rendered = props.children;
+  yield {
+    type: "header",
+    textValue: "header",
+    rendered,
+    props
+  };
+};
+export {
+  Header
+};

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

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { ItemProps as AriaItemProps } from '@koobiq/react-primitives';
+export type ItemProps<T> = AriaItemProps<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: ItemProps<T>): null;
+export declare namespace Item {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Item.js

@@ -0,0 +1,10 @@
+"use client";
+import { Item as Item$1 } from "@koobiq/react-primitives";
+const ItemInner = Item$1;
+function Item(_props) {
+  return null;
+}
+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>): null;
+export declare namespace Section {
     var getCollectionNode: unknown;
 }

package/dist/components/Collections/Section.js

@@ -0,0 +1,10 @@
+"use client";
+import { Section as Section$1 } from "@koobiq/react-primitives";
+const SectionInner = Section$1;
+function Section(_props) {
+  return null;
+}
+Section.getCollectionNode = SectionInner.getCollectionNode;
+export {
+  Section
+};

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

@@ -0,0 +1,4 @@
+export * from './Section';
+export * from './Item';
+export * from './Divider';
+export * from './Header';

package/dist/components/Container/Container.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Container.module.css.js";
-import { normalizeMaxInlineSize, normalizePosition, normalizeMargins } from "./utils.js";
+import { normalizeMargins, normalizeMaxInlineSize, normalizePosition } from "./utils.js";
 import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
 import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
 const Container = polymorphicForwardRef(

package/dist/components/Container/utils.d.ts

@@ -1,4 +1,4 @@
 import type { ContainerMarginsProp, ContainerMaxInlineSizeProp, ContainerPositionProp } from './types';
 export declare const normalizeMargins: (value: ContainerMarginsProp | undefined) => string | 0 | undefined;
 export declare const normalizeMaxInlineSize: (value: ContainerMaxInlineSizeProp | undefined) => string | undefined;
-export declare const normalizePosition: (value: ContainerPositionProp | undefined) => "0 auto" | "auto 0" | "auto";
+export declare const normalizePosition: (value: ContainerPositionProp | undefined) => "auto" | "0 auto" | "auto 0";

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 { useMultiRef, clsx } 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

@@ -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("@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(({ onClick, ...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({ onClick: close }, { onClick }),
       "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/Dialog/intl.json.js

@@ -1,10 +1,6 @@
 const intlMessages = {
-  "ru-RU": {
-    close: "Закрыть"
-  },
-  "en-US": {
-    close: "Close"
-  }
+  "ru-RU": { "close": "Закрыть" },
+  "en-US": { "close": "Close" }
 };
 export {
   intlMessages as default

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/FieldInputGroup/FieldInputGroup.d.ts

@@ -1,11 +1,17 @@
 import { type ReactNode } from 'react';
 import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-export type FieldInputGroupBaseProps = ExtendableComponentPropsWithRef<{
+import { type FieldAddonProps } from '../FieldAddon';
+export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
     children?: ReactNode;
     startAddon?: ReactNode;
     endAddon?: ReactNode;
     disabled?: boolean;
     className?: string;
     error?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        start?: FieldAddonProps;
+        end?: FieldAddonProps;
+    };
 }, 'div'>;
-export declare const FieldInputGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupBaseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FieldInputGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;