@koobiq/react-components 0.0.1-beta.1 → 0.0.1-beta.10

package/README.md

@@ -1,43 +1,26 @@
 # @koobiq/react-components
 
-## Getting Started
+Koobiq React is an open-source design system for designers and developers, focused on designing products related to information security.
 
-Install the component library with the following command:
+## Installation
 
-```bash
-pnpm add @koobiq/design-tokens @koobiq/react-components
-```
-
-### Usage
+Depending on your preference, run one of the following in your terminal:
 
-```tsx
-import '@koobiq/design-tokens/web/css-tokens.css';
-import '@koobiq/design-tokens/web/css-tokens-light.css';
-import '@koobiq/design-tokens/web/css-tokens-dark.css';
-import '@koobiq/react-components/style.css';
+```sh
+# With npm
+npm install @koobiq/react-components
 
-import { Typography } from '@koobiq/react-components';
+# With yarn
+yarn add @koobiq/react-components
 
-export default function App() {
-  return <Typography>Hello, Koobiq React!</Typography>;
-}
+# With pnpm
+yarn add @koobiq/react-components
 ```
 
-## Browser Support
-
-[Check compatible browsers](https://browsersl.ist/#q=defaults+and+supports+es6-module%2C%0A++++chrome+%3E+88%2C%0A++++safari+%3E+14%2C%0A++++firefox+%3E+78%2C%0A++++opera+%3E+75%2C%0A++++edge+%3E+88)
+## Usage
 
-## Development
+To get started with the library, read [the documentation](https://react.koobiq.io/).
 
-Follow these steps to start the development mode:
-
-- Clone the repository and navigate to the created directory.
-- Run the command `pnpm dev` in the terminal.
-
-Documentation will be available at [http://localhost:6006](http://localhost:6006).
-All development is conducted there. For convenience, you can go directly to the page of the component you are working on.
-
-### Prerequisites
+## Browser Support
 
-- Node.js v20
-- pnpm v9
+[Check compatible browsers](https://browsersl.ist/#q=defaults+and+supports+es6-module%2C%0A++++chrome+%3E+105%2C%0A++++safari+%3E+15.4%2C%0A++++firefox+%3E+121%2C%0A++++opera+%3E+91%2C%0A++++edge+%3E+105)

package/dist/components/Alert/Alert.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { polymorphicForwardRef, mergeProps, isNotNil, clsx } from "@koobiq/react-core";
 import { IconXmark16 } from "@koobiq/react-icons";
 import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
 import s from "./Alert.module.css.js";

package/dist/components/Alert/components/AlertIcon/utils.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { IconInfoCircle16, IconCheck16, IconExclamationTriangle16, IconCheckCircle16 } from "@koobiq/react-icons";
+import { IconExclamationTriangle16, IconCheckCircle16, IconInfoCircle16, IconCheck16 } from "@koobiq/react-icons";
 const iconProps = {
   focusable: false,
   "aria-hidden": true

package/dist/components/Alert/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/AnimatedIcon/AnimatedIcon.d.ts

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

package/dist/components/AnimatedIcon/AnimatedIcon.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, useRefs, clsx } from "@koobiq/react-core";
+import { Transition } from "react-transition-group";
+import s from "./AnimatedIcon.module.css.js";
+const AnimatedIcon = polymorphicForwardRef((props, ref) => {
+  const {
+    transition = 300,
+    as: Tag = "span",
+    activeIndex = 0,
+    directions,
+    className,
+    icons = [],
+    style: styleProp,
+    ...other
+  } = props;
+  const refs = useRefs(icons.length);
+  const singleIcon = icons?.[0];
+  const innerRender = icons.length === 1 ? singleIcon : icons.map((icon, index) => /* @__PURE__ */ jsx(
+    Transition,
+    {
+      in: activeIndex === index,
+      timeout: transition,
+      nodeRef: refs[index],
+      unmountOnExit: true,
+      children: (transition2) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: s.icon,
+          "data-index": index,
+          ref: refs[index],
+          "data-transition": transition2,
+          children: icon
+        }
+      )
+    },
+    index
+  ));
+  const style = {
+    ...styleProp,
+    "--animated-icon-transition": `${transition}ms`,
+    ...typeof directions?.[activeIndex] === "number" && {
+      "--animated-icon-direction": `rotate(${directions[activeIndex]}deg)`
+    }
+  };
+  return /* @__PURE__ */ jsx(Tag, { ...other, className: clsx(s.base, className), style, ref, children: innerRender });
+});
+export {
+  AnimatedIcon
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-animatedicon-61fd86";
+const icon = "kbq-animatedicon-icon-2feff8";
+const s = {
+  base,
+  icon
+};
+export {
+  base,
+  s as default,
+  icon
+};

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

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

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

@@ -0,0 +1,19 @@
+import type { ComponentRef, CSSProperties, ReactNode } from 'react';
+export type AnimatedIconBaseProps = {
+    /** A list of icons. */
+    icons?: ReactNode[];
+    /** A list of directions for the icons. */
+    directions?: number[];
+    /**
+     * Animation duration in milliseconds.
+     * @default 300
+     * */
+    transition?: number;
+    /** Index of the active icon. */
+    activeIndex?: number;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};
+export type AnimatedIconRef = ComponentRef<'span'>;

package/dist/components/Button/Button.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import { Button as Button$1 } from "@koobiq/react-primitives";
 import s from "./Button.module.css.js";

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

@@ -1,8 +1,8 @@
 const base = "kbq-button-d95067";
 const hovered = "kbq-button-hovered-037da3";
+const progress = "kbq-button-progress-f454f0";
 const pressed = "kbq-button-pressed-508d5d";
 const focusVisible = "kbq-button-focusVisible-e63c2b";
-const progress = "kbq-button-progress-f454f0";
 const disabled = "kbq-button-disabled-1df5f6";
 const fullWidth = "kbq-button-fullWidth-c149b8";
 const onlyIcon = "kbq-button-onlyIcon-e1268c";
@@ -12,9 +12,9 @@ const label = "kbq-button-label-9f6f6b";
 const s = {
   base,
   hovered,
+  progress,
   pressed,
   focusVisible,
-  progress,
   disabled,
   fullWidth,
   onlyIcon,

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/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/DialogContext.js

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

package/dist/components/Dialog/components/DialogContent.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useMultiRef, clsx } from "@koobiq/react-core";
+import { clsx, useMultiRef } from "@koobiq/react-core";
 import { utilClasses } from "../../../styles/utility.js";
 import s from "../Dialog.module.css.js";
 import { useDialogProvider } from "../DialogContext.js";

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

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.js

@@ -5,36 +5,38 @@ import { useInputContext, Group } from "@koobiq/react-primitives";
 import s from "./FieldInputGroup.module.css.js";
 import { FieldInputGroupContext } from "./FieldInputGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
-const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon, error, ...other }, ref) => {
-  const { value } = useInputContext();
-  const hasStartAddon = !!startAddon;
-  const hasEndAddon = !!endAddon;
-  const hasValue = isNotNil(value);
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      className: clsx(
-        s.base,
-        hasStartAddon && s.hasStartAddon,
-        hasEndAddon && s.hasEndAddon,
-        className
-      ),
-      ...other,
-      ref,
-      children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
-        FieldInputGroupContext.Provider,
-        {
-          value: { disabled, hovered, hasValue, focusWithin },
-          children: [
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, children: startAddon }),
-            children,
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, children: endAddon })
-          ]
-        }
-      )
-    }
-  );
-});
+const FieldInputGroup = forwardRef(
+  ({ children, className, startAddon, endAddon, error, slotProps, ...other }, ref) => {
+    const { value } = useInputContext();
+    const hasStartAddon = !!startAddon;
+    const hasEndAddon = !!endAddon;
+    const hasValue = isNotNil(value);
+    return /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: clsx(
+          s.base,
+          hasStartAddon && s.hasStartAddon,
+          hasEndAddon && s.hasEndAddon,
+          className
+        ),
+        ...other,
+        ref,
+        children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
+          FieldInputGroupContext.Provider,
+          {
+            value: { disabled, hovered, hasValue, focusWithin },
+            children: [
+              /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, ...slotProps?.start, children: startAddon }),
+              children,
+              /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, ...slotProps?.end, children: endAddon })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 FieldInputGroup.displayName = "FieldInputGroup";
 export {
   FieldInputGroup

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

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { InputPropVariant } from '../../Input';
+export type FieldSelectProps = {
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+    variant?: InputPropVariant;
+    placeholder?: string | number;
+};
+export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx, isNotNil } from "@koobiq/react-core";
+import { Button } from "@koobiq/react-primitives";
+import s from "./FieldSelect.module.css.js";
+const FieldSelect = forwardRef(
+  ({
+    error = false,
+    disabled = false,
+    variant = "filled",
+    placeholder,
+    children,
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...other,
+      disabled,
+      "data-slot": "select-value",
+      className: clsx(
+        s.base,
+        s[variant],
+        error && s.error,
+        disabled && s.disabled,
+        !isNotNil(children) && s.hasPlaceholder,
+        className
+      ),
+      ref,
+      children: /* @__PURE__ */ jsx("span", { className: s.content, children: children ?? placeholder })
+    }
+  )
+);
+FieldSelect.displayName = "FieldSelect";
+export {
+  FieldSelect
+};

package/dist/components/FieldComponents/FieldSelect/FieldSelect.module.css.js

@@ -0,0 +1,20 @@
+const base = "kbq-fieldselect-0f0f5e";
+const content = "kbq-fieldselect-content-c36142";
+const error = "kbq-fieldselect-error-0cac4a";
+const disabled = "kbq-fieldselect-disabled-f0efd4";
+const hasPlaceholder = "kbq-fieldselect-hasPlaceholder-7b7518";
+const s = {
+  base,
+  content,
+  error,
+  disabled,
+  hasPlaceholder
+};
+export {
+  base,
+  content,
+  s as default,
+  disabled,
+  error,
+  hasPlaceholder
+};

package/dist/components/FieldComponents/FieldSelect/index.d.ts

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

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

@@ -1,6 +1,7 @@
 export * from './FieldControl';
 export * from './FieldNumberControl';
 export * from './FieldInput';
+export * from './FieldSelect';
 export * from './FieldLabel';
 export * from './FieldAddon';
 export * from './FieldCaption';

package/dist/components/FlexBox/FlexBox.d.ts

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

package/dist/components/FlexBox/FlexBox.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
+import { flex } from "../layout/flex/flex.js";
+const FlexBox = polymorphicForwardRef(
+  ({
+    as: Tag = "div",
+    gap: gapProp,
+    wrap: wrapProp,
+    flex: flexProp,
+    colGap: colGapProp,
+    rowGap: rowGapProp,
+    direction: directionProp,
+    alignItems: alignItemsProp,
+    justifyContent: justifyContentProp,
+    children,
+    className,
+    ...other
+  }, ref) => {
+    const breakpoints = useMatchedBreakpoints();
+    const flex$1 = getResponsiveValue(flexProp, breakpoints);
+    const gap = getResponsiveValue(gapProp, breakpoints);
+    const colGap = getResponsiveValue(colGapProp, breakpoints);
+    const rowGap = getResponsiveValue(rowGapProp, breakpoints);
+    const wrap = getResponsiveValue(wrapProp, breakpoints);
+    const alignItems = getResponsiveValue(alignItemsProp, breakpoints);
+    const direction = getResponsiveValue(directionProp, breakpoints);
+    const justifyContent = getResponsiveValue(justifyContentProp, breakpoints);
+    const flexCn = flex({
+      gap,
+      flex: flex$1,
+      wrap,
+      colGap,
+      rowGap,
+      direction,
+      alignItems,
+      justifyContent
+    });
+    return /* @__PURE__ */ jsx(Tag, { className: clsx(flexCn, className), ...other, ref, children });
+  }
+);
+FlexBox.displayName = "FlexBox";
+export {
+  FlexBox
+};

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

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

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

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../utils';
+import type { FlexPropGap, FlexPropWrap, FlexPropFlex, FlexPropDirection, FlexPropAlignItems, FlexPropJustifyContent } from '../layout';
+export type FlexBoxBaseProps = {
+    /** Defines the `display` property with `flex` or `inline-flex` value. */
+    flex?: FlexPropFlex | ResponsiveValue<FlexPropFlex>;
+    /** Defines the `flex-wrap` property. */
+    wrap?: FlexPropWrap | ResponsiveValue<FlexPropWrap>;
+    /** Defines the `flex-direction` property. */
+    direction?: FlexPropDirection | ResponsiveValue<FlexPropDirection>;
+    /** Defines the `gap` property. */
+    gap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `column-gap` property. */
+    colGap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `row-gap` property. */
+    rowGap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `justify-content` property. */
+    justifyContent?: FlexPropJustifyContent | ResponsiveValue<FlexPropJustifyContent>;
+    /** Defines the `align-items` property. */
+    alignItems?: FlexPropAlignItems | ResponsiveValue<FlexPropAlignItems>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

package/dist/components/Input/Input.d.ts

@@ -17,6 +17,7 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
         label?: import("../FieldComponents").FieldLabelProps;
         input?: import("../FieldComponents").FieldInputProps;
         caption?: import("../FieldComponents").FieldCaptionProps;
+        group?: import("../FieldComponents").FieldInputGroupProps;
         errorMessage?: import("../FieldComponents").FieldErrorProps;
     };
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -21,7 +21,7 @@ const Input = forwardRef((props, ref) => {
     caption,
     ...other
   } = props;
-  const domRef = useDOMRef(ref);
+  const inputRef = useDOMRef(ref);
   const rootProps = mergeProps(
     {
       label,
@@ -42,23 +42,23 @@ const Input = forwardRef((props, ref) => {
         error,
         variant,
         disabled,
-        ref: domRef
+        ref: inputRef
       },
       slotProps?.input
     );
+    const groupProps = mergeProps(
+      {
+        error,
+        endAddon,
+        startAddon
+      },
+      slotProps?.group
+    );
     const captionProps = slotProps?.caption;
     const errorProps = mergeProps({ error }, slotProps?.errorMessage);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps?.children || label }),
-      /* @__PURE__ */ jsx(
-        FieldInputGroup,
-        {
-          error,
-          endAddon,
-          startAddon,
-          children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps })
-        }
-      ),
+      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
       /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
       /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
     ] });

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

@@ -1,7 +1,7 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { UseTextFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldInputGroupProps } from '../FieldComponents';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
 export type InputPropVariant = (typeof inputPropVariant)[number];
 export type InputProps = ExtendableProps<{
@@ -56,6 +56,7 @@ export type InputProps = ExtendableProps<{
         label?: FieldLabelProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
     };
 }, Omit<UseTextFieldProps, 'inputElementType'>>;