@koobiq/react-components 0.0.1-beta.8 → 0.0.1

package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.module.css.js

@@ -0,0 +1,17 @@
+const base = "kbq-dateinputsegment-996e10";
+const placeholder = "kbq-dateinputsegment-placeholder-be1df1";
+const literal = "kbq-dateinputsegment-literal-d722fc";
+const hasValue = "kbq-dateinputsegment-hasValue-886d0f";
+const s = {
+  base,
+  placeholder,
+  literal,
+  hasValue
+};
+export {
+  base,
+  s as default,
+  hasValue,
+  literal,
+  placeholder
+};

package/dist/components/DateInput/components/DateInputSegment/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaDateFieldProps, DateValue } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldInputGroupProps, FieldLabelProps } from '../FieldComponents';
+export declare const dateInputPropVariant: readonly ["filled", "transparent"];
+export type DateInputPropVariant = (typeof dateInputPropVariant)[number];
+export type DateInputProps<T extends DateValue> = {
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * The variant to use.
+     * @default 'filled'
+     */
+    variant?: DateInputPropVariant;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: FieldControlProps;
+        label?: FieldLabelProps;
+        group?: FieldInputGroupProps;
+        caption?: FieldCaptionProps;
+        inputDate?: FieldInputDateProps;
+        errorMessage?: FieldErrorProps;
+    };
+    /** Ref to the control */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+} & Omit<AriaDateFieldProps<T>, 'description' | 'validationBehavior' | 'validate' | 'validationState'>;
+export type DateInputComponent = <T extends DateValue>(props: DateInputProps<T>) => ReactElement | null;
+export type DateInputRef = ComponentRef<'div'>;

package/dist/components/DateInput/types.js

@@ -0,0 +1,4 @@
+const dateInputPropVariant = ["filled", "transparent"];
+export {
+  dateInputPropVariant
+};

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

@@ -0,0 +1,5 @@
+import type { Ref } from 'react';
+import { type DateValue } from '@koobiq/react-primitives';
+import type { DatePickerComponent, DatePickerProps, DatePickerRef } from './types';
+export declare function DatePickerRender<T extends DateValue>(props: DatePickerProps<T>, ref: Ref<DatePickerRef>): import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: DatePickerComponent;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { mergeProps } from "@koobiq/react-core";
+import { IconCalendarO16 } from "@koobiq/react-icons";
+import { useDatePickerState, removeDataAttributes, useDatePicker } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./DatePicker.module.css.js";
+import { DateInput } from "../DateInput/DateInput.js";
+import { Calendar } from "../Calendar/Calendar.js";
+import { IconButton } from "../IconButton/IconButton.js";
+function DatePickerRender(props, ref) {
+  const anchorRef = useRef(null);
+  const {
+    label,
+    style,
+    caption,
+    className,
+    slotProps,
+    fullWidth,
+    errorMessage,
+    startAddon,
+    endAddon,
+    "data-testid": testId
+  } = props;
+  const state = useDatePickerState(
+    removeDataAttributes({ ...props, description: caption })
+  );
+  const {
+    isInvalid,
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps: calendarPropsAria
+  } = useDatePicker(
+    removeDataAttributes({ ...props, description: caption }),
+    state,
+    anchorRef
+  );
+  const rootProps = mergeProps(
+    {
+      ref,
+      style,
+      label,
+      caption,
+      fullWidth,
+      className,
+      startAddon,
+      errorMessage,
+      "data-testid": testId,
+      slotProps: {
+        label: labelProps,
+        group: {
+          endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+            endAddon,
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: isInvalid ? "error" : "fade-contrast",
+                className: s.calendar,
+                ...buttonProps,
+                children: /* @__PURE__ */ jsx(IconCalendarO16, {})
+              }
+            )
+          ] }),
+          ...groupProps,
+          ref: anchorRef
+        }
+      }
+    },
+    slotProps?.root,
+    fieldProps
+  );
+  const popoverProps = mergeProps(
+    {
+      state,
+      anchorRef,
+      offset: 4,
+      size: "auto",
+      hideArrow: true,
+      hideCloseButton: true,
+      placement: "bottom start",
+      slotProps: {
+        dialog: dialogProps
+      }
+    },
+    slotProps?.popover
+  );
+  const calendarProps = mergeProps(calendarPropsAria, slotProps?.calendar);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DateInput, { ...rootProps }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(Calendar, { firstDayOfWeek: props.firstDayOfWeek, ...calendarProps }) })
+  ] });
+}
+const DatePicker = forwardRef(DatePickerRender);
+export {
+  DatePicker,
+  DatePickerRender
+};

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

@@ -0,0 +1,8 @@
+const calendar = "kbq-datepicker-calendar-25a0d7";
+const s = {
+  calendar
+};
+export {
+  calendar,
+  s as default
+};

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

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

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/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,27 @@ 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" | "isDisabled" | "isLoading" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
+    progress?: boolean;
+    disabled?: boolean;
+}> & {
+    children?: import("react").ReactNode;
+    variant?: import("../..").ButtonPropVariant;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    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,27 @@
+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/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
 };