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

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

@@ -1,36 +1,52 @@
-import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+import type { CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { ButtonBaseProps as ButtonBasePrimitiveProps } from '@koobiq/react-primitives';
 export declare const iconButtonPropVariant: readonly ["theme", "theme-contrast", "fade-contrast", "error", "success", "warning"];
 export type IconButtonPropVariant = (typeof iconButtonPropVariant)[number];
 export declare const iconButtonPropSize: readonly ["l", "xl"];
 export type IconButtonPropSize = (typeof iconButtonPropSize)[number];
-export type IconButtonBaseProps = {
+type IconButtonBaseDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, reduce the size of the component canvas.
+     * @default false
+     * @deprecated
+     * The "compact" prop is deprecated. Use "isCompact" prop to replace it.
+     */
+    compact?: boolean;
+};
+export type IconButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
      * The variant to use.
-     * @default theme
-     * */
+     * @default 'theme'
+     */
     variant?: IconButtonPropVariant;
     /**
      * If `true`, the component is disabled.
      * @default false
-     * */
-    disabled?: boolean;
+     */
+    isDisabled?: boolean;
     /**
      * Size of the component
-     * @default xl
-     * */
+     * @default 'xl'
+     */
     size?: IconButtonPropSize;
     /**
      * If `true`, reduce the size of the component canvas.
      * @default false
-     * */
-    compact?: boolean;
+     */
+    isCompact?: boolean;
     /** Additional CSS-classes. */
     className?: string;
-    /** Handler that is called when a hover interaction starts. */
-    onHoverStart?: (e: HoverEvent) => void;
-    /** Handler that is called when a hover interaction ends. */
-    onClick?: ButtonOptions['onPress'];
-};
+    /** Inline styles. */
+    style?: CSSProperties;
+} & IconButtonBaseDeprecatedProps, Omit<ButtonBasePrimitiveProps, 'slot'>>;
+export {};

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

@@ -1,23 +1,43 @@
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseTextFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "disabled" | "required" | "error" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "hiddenLabel"> & {
+import { TextField } from '@koobiq/react-primitives';
+import { type FieldLabelProps, type FieldInputGroupProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldControlProps } from '../FieldComponents';
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "value" | "caption" | "label" | "style" | "className" | "defaultValue" | "onChange" | "placeholder" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
+}> & {
     label?: import("react").ReactNode;
     className?: string;
+    placeholder?: import("@koobiq/react-primitives").TextFieldProps["placeholder"];
+    value?: import("@koobiq/react-primitives").TextFieldProps["value"];
+    defaultValue?: import("@koobiq/react-primitives").TextFieldProps["defaultValue"];
+    onChange?: import("@koobiq/react-primitives").TextFieldProps["onChange"];
     startAddon?: import("react").ReactNode;
     endAddon?: import("react").ReactNode;
     variant?: import("./types").InputPropVariant;
-    error?: boolean;
-    errorMessage?: string | number;
+    isInvalid?: boolean;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
-    disabled?: boolean;
-    hiddenLabel?: boolean;
-    caption?: string | number;
-    required?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isLabelHidden?: boolean;
+    caption?: import("react").ReactNode;
+    isRequired?: boolean;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        label?: import("../FieldComponents").FieldLabelProps;
-        input?: import("../FieldComponents").FieldInputProps;
-        caption?: import("../FieldComponents").FieldCaptionProps;
-        group?: import("../FieldComponents").FieldInputGroupProps;
-        errorMessage?: import("../FieldComponents").FieldErrorProps;
+        root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
+        label?: FieldLabelProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
+        input?: FieldInputProps<"input">;
     };
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
+import { TextField } from "@koobiq/react-primitives";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
 import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
@@ -12,7 +14,16 @@ const Input = forwardRef((props, ref) => {
   const {
     variant = "filled",
     fullWidth = false,
-    hiddenLabel = false,
+    hiddenLabel,
+    isLabelHidden: isLabelHiddenProp,
+    disabled,
+    isDisabled: isDisabledProp,
+    error,
+    isInvalid: isInvalidProp,
+    required,
+    isRequired: isRequiredProp,
+    readonly,
+    isReadOnly: isReadOnlyProp,
     label,
     startAddon,
     endAddon,
@@ -21,46 +32,82 @@ const Input = forwardRef((props, ref) => {
     caption,
     ...other
   } = props;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isRequired = isRequiredProp ?? required ?? false;
+  const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+  const isInvalid = isInvalidProp ?? error ?? false;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Input: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "required" in props) {
+    deprecate(
+      'Input: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "error" in props) {
+    deprecate(
+      'Input: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+    deprecate(
+      'Input: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+    deprecate(
+      'Input: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+    );
+  }
   const inputRef = useDOMRef(ref);
   const rootProps = mergeProps(
     {
       label,
       fullWidth,
+      isDisabled,
+      isRequired,
+      isReadOnly,
+      isInvalid,
       errorMessage,
       "data-variant": variant,
-      "data-fullwidth": fullWidth
+      "data-fullwidth": fullWidth,
+      ...other
     },
-    other
+    slotProps?.root
   );
-  return /* @__PURE__ */ jsx(FieldControl, { ...rootProps, children: ({ error, required, disabled }) => {
+  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
     const labelProps = mergeProps(
-      { hidden: hiddenLabel, required },
+      { isHidden: isLabelHidden, isRequired: isRequired2, children: label },
       slotProps?.label
     );
     const inputProps = mergeProps(
       {
-        error,
         variant,
-        disabled,
+        isInvalid: isInvalid2,
+        isDisabled: isDisabled2,
         ref: inputRef
       },
       slotProps?.input
     );
     const groupProps = mergeProps(
       {
-        error,
         endAddon,
+        isInvalid: isInvalid2,
+        isDisabled: isDisabled2,
         startAddon
       },
       slotProps?.group
     );
-    const captionProps = slotProps?.caption;
-    const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+    const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+    const errorProps = mergeProps({ isInvalid: isInvalid2, children: errorMessage }, slotProps?.errorMessage);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps?.children || label }),
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
       /* @__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 })
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
     ] });
   } });
 });

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

@@ -1,63 +1,115 @@
 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, FieldInputGroupProps } from '../FieldComponents';
+import type { TextField, TextFieldProps } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps, FieldInputGroupProps, FieldControlProps } from '../FieldComponents';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
 export type InputPropVariant = (typeof inputPropVariant)[number];
+type InputDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     * @deprecated
+     * The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * @deprecated
+     * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
+     */
+    hiddenLabel?: boolean;
+};
 export type InputProps = ExtendableProps<{
     /** The content to display as the label. */
     label?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
+    /** Temporary text that occupies the text input when it is empty. */
+    placeholder?: TextFieldProps['placeholder'];
+    /** The current value (controlled). */
+    value?: TextFieldProps['value'];
+    /** The default value (uncontrolled). */
+    defaultValue?: TextFieldProps['defaultValue'];
+    /** Handler that is called when the value changes. */
+    onChange?: TextFieldProps['onChange'];
     /** Addon placed before the children. */
     startAddon?: ReactNode;
     /** Addon placed after the children. */
     endAddon?: ReactNode;
     /**
      * The variant to use.
-     * @default filled
-     * */
+     * @default 'filled'
+     */
     variant?: InputPropVariant;
     /**
      * If `true`, the input will indicate an error.
      * @default false
-     * */
-    error?: boolean;
+     */
+    isInvalid?: boolean;
     /** Message for the error state */
-    errorMessage?: string | number;
+    errorMessage?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
      * @default false
-     * */
+     */
     fullWidth?: boolean;
     /**
      * If `true`, the component is disabled.
      * @default false
-     * */
-    disabled?: boolean;
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     */
+    isReadOnly?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
-     * */
-    hiddenLabel?: boolean;
+     */
+    isLabelHidden?: boolean;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * If `true`, the label is displayed as required and the input element is required.
      * @default false
-     * */
-    required?: boolean;
+     */
+    isRequired?: boolean;
     /** Inline styles. */
     style?: CSSProperties;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
+        root?: FieldControlProps<typeof TextField<HTMLInputElement>>;
         label?: FieldLabelProps;
-        input?: FieldInputProps;
         caption?: FieldCaptionProps;
         group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
+        input?: FieldInputProps<'input'>;
     };
-}, Omit<UseTextFieldProps, 'inputElementType'>>;
+} & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'inputElementType'>>;
 export type InputRef = ComponentRef<'input'>;
+export {};

package/dist/components/InputNumber/InputNumber.d.ts

@@ -1,22 +1,38 @@
-export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "disabled" | "required" | "error" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "hiddenLabel"> & {
+import { NumberField } from '@koobiq/react-primitives';
+import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputGroupProps, type FieldInputProps } from '../FieldComponents';
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/numberfield").AriaNumberFieldProps, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "style" | "className" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
+}> & {
     label?: import("react").ReactNode;
     className?: string;
     startAddon?: import("react").ReactNode;
     endAddon?: import("react").ReactNode;
     variant?: import("./types").InputNumberPropVariant;
-    error?: boolean;
-    errorMessage?: string | number;
+    isInvalid?: boolean;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
-    disabled?: boolean;
-    hiddenLabel?: boolean;
-    caption?: string | number;
-    required?: boolean;
+    isDisabled?: boolean;
+    isLabelHidden?: boolean;
+    caption?: import("react").ReactNode;
+    isRequired?: boolean;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        label?: import("../FieldComponents").FieldLabelProps;
-        input?: import("../FieldComponents").FieldInputProps;
-        caption?: import("../FieldComponents").FieldCaptionProps;
-        errorMessage?: import("../FieldComponents").FieldErrorProps;
+        root?: FieldControlProps<typeof NumberField>;
+        label?: FieldLabelProps;
+        input?: FieldInputProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
     };
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/InputNumber/InputNumber.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
-import { FieldNumberControl } from "../FieldComponents/FieldNumberControl/FieldNumberControl.js";
+import { NumberField } from "@koobiq/react-primitives";
 import { InputNumberCounterControls } from "./components/InputNumberCounterControls.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
 import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
 import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
@@ -14,7 +16,16 @@ const InputNumber = forwardRef(
     const {
       variant = "filled",
       fullWidth = false,
-      hiddenLabel = false,
+      hiddenLabel,
+      isLabelHidden: isLabelHiddenProp,
+      disabled,
+      isDisabled: isDisabledProp,
+      error,
+      isInvalid: isInvalidProp,
+      required,
+      isRequired: isRequiredProp,
+      readonly,
+      isReadOnly: isReadOnlyProp,
       label,
       startAddon,
       endAddon,
@@ -23,45 +34,85 @@ const InputNumber = forwardRef(
       caption,
       ...other
     } = props;
-    const domRef = useDOMRef(ref);
+    const inputRef = useDOMRef(ref);
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isRequired = isRequiredProp ?? required ?? false;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    const isInvalid = isInvalidProp ?? error ?? false;
+    const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'InputNumber: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "required" in props) {
+      deprecate(
+        'InputNumber: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "error" in props) {
+      deprecate(
+        'InputNumber: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+      deprecate(
+        'InputNumber: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+      deprecate(
+        'InputNumber: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+      );
+    }
     const rootProps = mergeProps(
       {
         label,
         fullWidth,
+        isDisabled,
+        isRequired,
+        isReadOnly,
+        isInvalid,
         errorMessage,
         "data-variant": variant,
-        "data-fullwidth": fullWidth
+        "data-fullwidth": fullWidth,
+        ...other
       },
-      other
+      slotProps?.root
     );
-    return /* @__PURE__ */ jsx(FieldNumberControl, { ...rootProps, children: ({ error, required, disabled }) => {
+    return /* @__PURE__ */ jsx(FieldControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
       const labelProps = mergeProps(
-        { hidden: hiddenLabel, required },
+        { isHidden: isLabelHidden, children: label, isRequired: isRequired2 },
         slotProps?.label
       );
       const inputProps = mergeProps(
-        { error, variant, disabled, ref: domRef },
+        {
+          variant,
+          isInvalid: isInvalid2,
+          isDisabled: isDisabled2,
+          ref: inputRef
+        },
         slotProps?.input
       );
-      const captionProps = slotProps?.caption;
-      const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+      const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+      const errorProps = mergeProps({ isInvalid: isInvalid2, children: errorMessage }, slotProps?.errorMessage);
+      const groupProps = mergeProps(
+        {
+          endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+            endAddon,
+            /* @__PURE__ */ jsx(InputNumberCounterControls, {})
+          ] }),
+          isInvalid: isInvalid2,
+          startAddon,
+          isDisabled: isDisabled2
+        },
+        slotProps?.group
+      );
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps?.children || label }),
-        /* @__PURE__ */ jsx(
-          FieldInputGroup,
-          {
-            error,
-            disabled,
-            startAddon,
-            endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
-              endAddon,
-              /* @__PURE__ */ jsx(InputNumberCounterControls, {})
-            ] }),
-            children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps })
-          }
-        ),
-        /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-        /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+        /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
+        /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
+        /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+        /* @__PURE__ */ jsx(FieldError, { ...errorProps })
       ] });
     } });
   }

package/dist/components/InputNumber/components/InputNumberCounterControls.js

@@ -1,33 +1,33 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "@koobiq/react-core";
-import { IconChevronUp16, IconChevronDown16 } from "@koobiq/react-icons";
+import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import s from "./InputNumberCounterControls.module.css.js";
 import { useFieldInputGroup } from "../../FieldComponents/FieldInputGroup/FieldInputGroupContext.js";
 import { IconButton } from "../../IconButton/IconButton.js";
 const InputNumberCounterControls = () => {
-  const { hovered, hasValue, focusWithin } = useFieldInputGroup();
-  const visible = (hovered || focusWithin) && hasValue;
-  return /* @__PURE__ */ jsxs("div", { className: clsx(s.base, visible && s.visible), children: [
+  const { isInvalid } = useFieldInputGroup();
+  const variant = isInvalid ? "error" : "fade-contrast";
+  return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        className: s.counter,
+        className: clsx(s.counter, s.increment),
         slot: "increment",
-        variant: "fade-contrast",
+        variant,
         size: "l",
-        compact: true,
-        children: /* @__PURE__ */ jsx(IconChevronUp16, {})
+        isCompact: true,
+        children: /* @__PURE__ */ jsx(IconChevronUpS16, {})
       }
     ),
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        className: s.counter,
+        className: clsx(s.counter, s.decrement),
         slot: "decrement",
-        variant: "fade-contrast",
+        variant,
         size: "l",
-        compact: true,
-        children: /* @__PURE__ */ jsx(IconChevronDown16, {})
+        isCompact: true,
+        children: /* @__PURE__ */ jsx(IconChevronDownS16, {})
       }
     )
   ] });

package/dist/components/InputNumber/components/InputNumberCounterControls.module.css.js

@@ -1,14 +1,17 @@
 const base = "kbq-inputnumbercountercontrols-77ed13";
-const visible = "kbq-inputnumbercountercontrols-visible-5885f8";
 const counter = "kbq-inputnumbercountercontrols-counter-1126db";
+const increment = "kbq-inputnumbercountercontrols-increment-d89a95";
+const decrement = "kbq-inputnumbercountercontrols-decrement-fbd37a";
 const s = {
   base,
-  visible,
-  counter
+  counter,
+  increment,
+  decrement
 };
 export {
   base,
   counter,
+  decrement,
   s as default,
-  visible
+  increment
 };