@koobiq/react-components 0.0.1-beta.36 → 0.0.1-beta.37

package/dist/components/DateInput/DateInput.js

@@ -67,6 +67,7 @@ function DateInputRender(props, ref) {
     {
       endAddon,
       isInvalid,
+      isDisabled,
       startAddon
     },
     slotProps?.group

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

@@ -11,7 +11,7 @@ export type DateInputProps<T extends DateValue> = {
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * The variant to use.
      * @default filled

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

@@ -4,6 +4,7 @@ export declare const fieldAddonPropPlacement: readonly ["start", "end"];
 export type FieldAddonPlacement = (typeof fieldAddonPropPlacement)[number];
 export type FieldAddonProps = ExtendableComponentPropsWithRef<{
     isInvalid?: boolean;
+    isDisabled?: boolean;
     children?: ReactNode;
     placement?: FieldAddonPlacement;
 }, 'div'>;

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

@@ -3,15 +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", isInvalid = 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],
         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

@@ -2,15 +2,18 @@ const base = "kbq-fieldaddon-3388d3";
 const start = "kbq-fieldaddon-start-83aa84";
 const end = "kbq-fieldaddon-end-f314bf";
 const invalid = "kbq-fieldaddon-invalid-08b1fe";
+const disabled = "kbq-fieldaddon-disabled-c170bf";
 const s = {
   base,
   start,
   end,
-  invalid
+  invalid,
+  disabled
 };
 export {
   base,
   s as default,
+  disabled,
   end,
   invalid,
   start

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

@@ -5,62 +5,60 @@ 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,
-    isInvalid,
-    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: ({ isHovered, isFocusWithin, isDisabled }) => /* @__PURE__ */ jsxs(
-          FieldInputGroupContext.Provider,
-          {
-            value: { isDisabled, isHovered, hasValue, isFocusWithin },
-            children: [
-              /* @__PURE__ */ jsx(
-                FieldAddon,
-                {
-                  placement: "start",
-                  isInvalid,
-                  ...slotProps?.start,
-                  children: startAddon
-                }
-              ),
-              children,
-              /* @__PURE__ */ jsx(
-                FieldAddon,
-                {
-                  placement: "end",
-                  isInvalid,
-                  ...slotProps?.end,
-                  children: endAddon
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon, 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: ({ isHovered, isFocusWithin, isDisabled, isInvalid }) => /* @__PURE__ */ jsxs(
+        FieldInputGroupContext.Provider,
+        {
+          value: {
+            isDisabled,
+            isHovered,
+            hasValue,
+            isFocusWithin,
+            isInvalid
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "start",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.start,
+                children: startAddon
+              }
+            ),
+            children,
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "end",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.end,
+                children: endAddon
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 FieldInputGroup.displayName = "FieldInputGroup";
 export {
   FieldInputGroup

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroupContext.d.ts

@@ -3,6 +3,7 @@ export type FieldInputGroupContextProps = {
     hasValue?: boolean;
     isHovered?: boolean;
     isFocusWithin?: boolean;
+    isInvalid?: boolean;
 };
 export declare const FieldInputGroupContext: import("react").Context<FieldInputGroupContextProps>;
 export declare const useFieldInputGroup: () => FieldInputGroupContextProps;

package/dist/components/Input/Input.js

@@ -96,6 +96,7 @@ const Input = forwardRef((props, ref) => {
       {
         endAddon,
         isInvalid: isInvalid2,
+        isDisabled: isDisabled2,
         startAddon
       },
       slotProps?.group

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 { isHovered, hasValue, isFocusWithin } = useFieldInputGroup();
-  const visible = (isHovered || isFocusWithin) && 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",
         isCompact: true,
-        children: /* @__PURE__ */ jsx(IconChevronUp16, {})
+        children: /* @__PURE__ */ jsx(IconChevronUpS16, {})
       }
     ),
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        className: s.counter,
+        className: clsx(s.counter, s.decrement),
         slot: "decrement",
-        variant: "fade-contrast",
+        variant,
         size: "l",
         isCompact: true,
-        children: /* @__PURE__ */ jsx(IconChevronDown16, {})
+        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
 };

package/dist/components/RadioGroup/components/Radio/Radio.d.ts

@@ -1,7 +1,6 @@
 export declare const Radio: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/radio").AriaRadioProps, "isDisabled">, "disabled"> & {
     disabled?: boolean;
 } & {
-    caption?: string;
     size?: import("./types").RadioPropSize;
     labelPlacement?: import("./types").RadioPropLabelPlacement;
     className?: string;

package/dist/components/RadioGroup/components/Radio/types.d.ts

@@ -5,8 +5,6 @@ export type RadioPropSize = (typeof radioPropSize)[number];
 export declare const radioPropLabelPlacement: readonly ["start", "end"];
 export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
 export type RadioProps = UseRadioProps & {
-    /** The helper text content. */
-    caption?: string;
     /**
      * Size.
      * @default normal

package/dist/components/Select/Select.js

@@ -131,6 +131,7 @@ function SelectRender(props, ref) {
         /* @__PURE__ */ jsx(IconChevronDownS16, {})
       ] }),
       isInvalid,
+      isDisabled,
       ref: containerRef
     },
     slotProps?.group

package/dist/style.css

@@ -1979,9 +1979,10 @@
   --field-control-end-addon-inline-size: 36px;
 }
 .kbq-fieldaddon-3388d3 {
+  --field-addon-color: var(--kbq-icon-contrast-fade);
   z-index: 1;
   block-size: 100%;
-  color: var(--kbq-icon-contrast-fade);
+  color: var(--field-addon-color);
   transition: color var(--kbq-transition-default);
   justify-content: center;
   align-items: center;
@@ -1999,7 +2000,11 @@
 }
 
 .kbq-fieldaddon-invalid-08b1fe {
-  color: var(--kbq-icon-error);
+  --field-addon-color: var(--kbq-icon-error);
+}
+
+.kbq-fieldaddon-disabled-c170bf {
+  --field-addon-color: var(--kbq-states-icon-disabled);
 }
 .kbq-fieldinput-77b90b {
   --field-input-color: ;
@@ -2138,22 +2143,22 @@
   overflow: auto;
 }
 .kbq-inputnumbercountercontrols-77ed13 {
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--kbq-transition-default);
   flex-direction: column;
-  margin-inline-end: -8px;
+  margin-inline-end: calc(-1 * var(--kbq-size-s));
   display: flex;
 }
 
-.kbq-inputnumbercountercontrols-visible-5885f8 {
-  visibility: visible;
-  opacity: 1;
-}
-
 .kbq-inputnumbercountercontrols-counter-1126db {
   inline-size: var(--kbq-size-3xl);
 }
+
+.kbq-inputnumbercountercontrols-increment-d89a95 > svg {
+  margin-block-end: calc(-1 * var(--kbq-size-3xs));
+}
+
+.kbq-inputnumbercountercontrols-decrement-fbd37a > svg {
+  margin-block-start: calc(-1 * var(--kbq-size-3xs));
+}
 .kbq-radio-c3ed31 {
   --radio-size: ;
   --radio-opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.36",
+  "version": "0.0.1-beta.37",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.36",
-    "@koobiq/react-core": "0.0.1-beta.36",
-    "@koobiq/react-primitives": "0.0.1-beta.36",
-    "@koobiq/react-icons": "0.0.1-beta.36"
+    "@koobiq/logger": "0.0.1-beta.37",
+    "@koobiq/react-core": "0.0.1-beta.37",
+    "@koobiq/react-primitives": "0.0.1-beta.37",
+    "@koobiq/react-icons": "0.0.1-beta.37"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",