@koobiq/react-components 0.0.1-beta.9 → 0.1.0

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

@@ -0,0 +1,34 @@
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
+import type { CalendarProps } from '../Calendar';
+import type { DateInputProps, DateInputRef } from '../DateInput';
+import type { PopoverProps } from '../Popover';
+export type DatePickerProps<T extends DateValue> = {
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the DateInput. */
+    ref?: Ref<DateInputRef>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: DateInputProps<T>;
+        popover?: PopoverProps;
+        calendar?: CalendarProps<T>;
+    };
+} & Omit<AriaDatePickerProps<T>, 'description' | 'validate' | 'validationBehavior' | 'validationState'>;
+export type DatePickerComponent = <T extends DateValue>(props: DatePickerProps<T>) => ReactElement | null;
+export type DatePickerRef = DateInputRef;

package/dist/components/DateSegment/DateSegment.d.ts

@@ -0,0 +1,7 @@
+import type { DateSegment, DateFieldState } from '@koobiq/react-primitives';
+type DateSegmentProps = {
+    segment: DateSegment;
+    state: DateFieldState;
+};
+export declare function DateSegment({ segment, state }: DateSegmentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateSegment/DateSegment.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useLocale, useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import { useDateSegment } from "@koobiq/react-primitives";
+/* empty css               */
+import s from "./DateSegment.module.css.js";
+import intlMessages from "./intl.json.js";
+import { isTime } from "./utils.js";
+function DateSegment({ segment, state }) {
+  const ref = useRef(null);
+  const { locale } = useLocale();
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const { text, type, isPlaceholder } = segment;
+  const hasValue = state.value !== null;
+  const content = isTime(type) && isPlaceholder && locale in intlMessages ? stringFormatter.format(type) : text;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...segmentProps,
+      ref,
+      className: clsx(
+        s.base,
+        s[type],
+        hasValue && s.hasValue,
+        isPlaceholder && s.placeholder
+      ),
+      children: content
+    }
+  );
+}
+export {
+  DateSegment
+};

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

@@ -0,0 +1,17 @@
+const base = "kbq-datesegment-3b7153";
+const placeholder = "kbq-datesegment-placeholder-b233e5";
+const literal = "kbq-datesegment-literal-a4b534";
+const hasValue = "kbq-datesegment-hasValue-800714";
+const s = {
+  base,
+  placeholder,
+  literal,
+  hasValue
+};
+export {
+  base,
+  s as default,
+  hasValue,
+  literal,
+  placeholder
+};

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

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

package/dist/components/DateSegment/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "hour": "чч", "minute": "мм", "second": "сс" },
+  "en-US": { "hour": "hh", "minute": "mm", "second": "ss" }
+};
+export {
+  intlMessages as default
+};

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

@@ -0,0 +1,3 @@
+type TimeType = 'hour' | 'minute' | 'second';
+export declare function isTime(t: string): t is TimeType;
+export {};

package/dist/components/DateSegment/utils.js

@@ -0,0 +1,6 @@
+function isTime(t) {
+  return t === "hour" || t === "minute" || t === "second";
+}
+export {
+  isTime
+};

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

@@ -4,6 +4,25 @@ 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" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
+    progress?: boolean;
+    disabled?: boolean;
+}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | 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>>;

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 { useLocalizedStringFormatter } 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/types.d.ts

@@ -14,7 +14,7 @@ export type DialogBaseProps = {
     /**
      * If `true`, the close button isn't shown.
      * @default false
-     * */
+     */
     hideCloseButton?: boolean;
     /** The props used for each slot inside. */
     slotProps?: {

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,47 @@
+"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,
+      {
+        "data-flex-item": flexItem,
+        "data-orientation": orientation,
+        "data-disable-paddings": disablePaddings,
+        ...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,22 @@
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { SeparatorProps } from '@koobiq/react-primitives';
+export declare const dividerPropDisplay: readonly ["block", "inline", "inlineBlock"];
+export type DividerPropDisplay = (typeof dividerPropDisplay)[number];
+export type DividerBaseProps = ExtendableProps<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** 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;
+}, Omit<SeparatorProps, 'elementType'>>;

package/dist/components/Divider/types.js

@@ -0,0 +1,4 @@
+const dividerPropDisplay = ["block", "inline", "inlineBlock"];
+export {
+  dividerPropDisplay
+};

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

@@ -3,7 +3,8 @@ import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
 export declare const fieldAddonPropPlacement: readonly ["start", "end"];
 export type FieldAddonPlacement = (typeof fieldAddonPropPlacement)[number];
 export type FieldAddonProps = ExtendableComponentPropsWithRef<{
-    error?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
     children?: ReactNode;
     placement?: FieldAddonPlacement;
 }, 'div'>;

package/dist/components/FieldComponents/FieldAddon/FieldAddon.js

@@ -3,10 +3,27 @@ import { forwardRef } from "react";
 import { isNotNil, clsx } from "@koobiq/react-core";
 import s from "./FieldAddon.module.css.js";
 const FieldAddon = forwardRef(
-  ({ placement = "start", error = false, className, children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
+  ({
+    placement = "start",
+    isInvalid = false,
+    isDisabled = false,
+    className,
+    children,
+    ...other
+  }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(s.base, s[placement], error && s.error, className),
+      className: clsx(
+        s.base,
+        s[placement],
+        isInvalid && s.invalid,
+        isDisabled && s.disabled,
+        className
+      ),
+      "data-placement": placement,
+      "data-invalid": isInvalid,
+      "data-disabled": isDisabled,
+      "data-testid": `field-addon-${placement}`,
       ...other,
       ref,
       children

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

@@ -1,17 +1,20 @@
 const base = "kbq-fieldaddon-3388d3";
 const start = "kbq-fieldaddon-start-83aa84";
 const end = "kbq-fieldaddon-end-f314bf";
-const error = "kbq-fieldaddon-error-278697";
+const invalid = "kbq-fieldaddon-invalid-08b1fe";
+const disabled = "kbq-fieldaddon-disabled-c170bf";
 const s = {
   base,
   start,
   end,
-  error
+  invalid,
+  disabled
 };
 export {
   base,
   s as default,
+  disabled,
   end,
-  error,
+  invalid,
   start
 };

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

@@ -1,10 +1,8 @@
-import type { TextFieldProps, TextFieldRef } from '@koobiq/react-primitives';
-export type FieldControlProps = TextFieldProps & {
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import { type DataAttributeProps } from '@koobiq/react-core';
+export type FieldControlBaseProps = {
     fullWidth?: boolean;
     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> & {
-    fullWidth?: boolean;
-    className?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & DataAttributeProps;
+export declare const FieldControl: import("@koobiq/react-core").PolyForwardComponent<"div", FieldControlBaseProps, ElementType>;
+export type FieldControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldControl<As>>;

package/dist/components/FieldComponents/FieldControl/FieldControl.js

@@ -1,16 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "@koobiq/react-core";
-import { TextField } from "@koobiq/react-primitives";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./FieldControl.module.css.js";
-const FieldControl = forwardRef(
-  ({ fullWidth = false, children, className, ...other }, ref) => /* @__PURE__ */ jsx(
-    TextField,
+const FieldControl = polymorphicForwardRef(
+  ({ fullWidth = false, className, as: Tag = "div", ...other }, ref) => /* @__PURE__ */ jsx(
+    Tag,
     {
       className: clsx(s.base, fullWidth && s.fullWidth, className),
       ...other,
-      ref,
-      children
+      ref
     }
   )
 );

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

@@ -1,6 +1,6 @@
 import { type TextProps, type TextRef } from '@koobiq/react-primitives';
 export type FieldErrorProps = TextProps & {
-    error?: boolean;
+    isInvalid?: boolean;
 };
 export type FieldErrorRef = TextRef;
 export declare const FieldError: import("react").ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/FieldComponents/FieldError/FieldError.js

@@ -4,7 +4,7 @@ import { isNotNil, clsx } from "@koobiq/react-core";
 import { Text } from "@koobiq/react-primitives";
 import s from "./FieldError.module.css.js";
 const FieldError = forwardRef(
-  ({ children, className, error = false, ...other }, ref) => isNotNil(children) && error ? /* @__PURE__ */ jsx(
+  ({ children, className, isInvalid = false, ...other }, ref) => isNotNil(children) && isInvalid ? /* @__PURE__ */ jsx(
     Text,
     {
       className: clsx(s.base, className),

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

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef } from 'react';
-import type { InputPropVariant } from '../../Input/types';
+import type { InputPropVariant } from '../../Input';
 export type FieldInputBaseProps = {
-    error?: boolean;
-    disabled?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
     className?: string;
     'data-testid'?: string;
     as?: 'input' | 'textarea';

package/dist/components/FieldComponents/FieldInput/FieldInput.js

@@ -4,9 +4,9 @@ import { Input, Textarea } from "@koobiq/react-primitives";
 import s from "./FieldInput.module.css.js";
 const FieldInput = polymorphicForwardRef(
   ({
-    error = false,
+    isInvalid = false,
     as = "input",
-    disabled = false,
+    isDisabled = false,
     variant = "filled",
     className,
     ...other
@@ -19,8 +19,8 @@ const FieldInput = polymorphicForwardRef(
         className: clsx(
           s.base,
           s[variant],
-          error && s.error,
-          disabled && s.disabled,
+          isInvalid && s.invalid,
+          isDisabled && s.disabled,
           className
         ),
         ref