@koobiq/react-components 0.0.1-beta.31 → 0.0.1-beta.32

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

@@ -1,6 +1,8 @@
 import { type TextProps, type TextRef } from '@koobiq/react-primitives';
-export type FieldCaptionProps = TextProps & {
-    isInvalid?: boolean;
-};
+export type FieldCaptionProps = TextProps;
 export type FieldCaptionRef = TextRef;
-export declare const FieldCaption: import("react").ForwardRefExoticComponent<Omit<FieldCaptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const FieldCaption: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | 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<HTMLParagraphElement> | null | undefined;
+}, "as" | keyof import("@koobiq/react-primitives").TextBaseProps> & import("@koobiq/react-primitives").TextBaseProps & {
+    as?: "p" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/FieldComponents/FieldCaption/FieldCaption.js

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

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

@@ -17,12 +17,12 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
     endAddon?: import("react").ReactNode;
     variant?: import("./types").InputPropVariant;
     isInvalid?: boolean;
-    errorMessage?: string | number;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
     isDisabled?: boolean;
     isReadOnly?: boolean;
     isLabelHidden?: boolean;
-    caption?: string | number;
+    caption?: import("react").ReactNode;
     isRequired?: boolean;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;

package/dist/components/Input/Input.js

@@ -79,7 +79,10 @@ const Input = forwardRef((props, ref) => {
     slotProps?.root
   );
   return /* @__PURE__ */ jsx(FieldControl, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
-    const labelProps = mergeProps({ isHidden: isLabelHidden, isRequired: isRequired2 }, slotProps?.label);
+    const labelProps = mergeProps(
+      { isHidden: isLabelHidden, isRequired: isRequired2, children: label },
+      slotProps?.label
+    );
     const inputProps = mergeProps(
       {
         variant,
@@ -97,16 +100,13 @@ const Input = forwardRef((props, ref) => {
       },
       slotProps?.group
     );
-    const captionProps = mergeProps(
-      { isInvalid: isInvalid2 },
-      slotProps?.caption
-    );
-    const errorProps = mergeProps({ isInvalid: isInvalid2 }, 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

@@ -74,7 +74,7 @@ export type InputProps = ExtendableProps<{
      */
     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
@@ -96,7 +96,7 @@ export type InputProps = ExtendableProps<{
      */
     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

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

@@ -13,11 +13,11 @@ export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit
     endAddon?: import("react").ReactNode;
     variant?: import("./types").InputNumberPropVariant;
     isInvalid?: boolean;
-    errorMessage?: string | number;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
     isDisabled?: boolean;
     isLabelHidden?: boolean;
-    caption?: string | number;
+    caption?: import("react").ReactNode;
     isRequired?: boolean;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;

package/dist/components/InputNumber/InputNumber.js

@@ -81,7 +81,10 @@ const InputNumber = forwardRef(
       slotProps?.root
     );
     return /* @__PURE__ */ jsx(FieldControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
-      const labelProps = mergeProps({ isHidden: isLabelHidden, isRequired: isRequired2 }, slotProps?.label);
+      const labelProps = mergeProps(
+        { isHidden: isLabelHidden, children: label, isRequired: isRequired2 },
+        slotProps?.label
+      );
       const inputProps = mergeProps(
         {
           variant,
@@ -91,11 +94,8 @@ const InputNumber = forwardRef(
         },
         slotProps?.input
       );
-      const captionProps = mergeProps(
-        { isInvalid: isInvalid2 },
-        slotProps?.caption
-      );
-      const errorProps = mergeProps({ isInvalid: isInvalid2 }, 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: [
@@ -109,10 +109,10 @@ const InputNumber = forwardRef(
         slotProps?.group
       );
       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/InputNumber/types.d.ts

@@ -66,7 +66,7 @@ export type InputNumberProps = ExtendableProps<{
      */
     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
@@ -83,7 +83,7 @@ export type InputNumberProps = ExtendableProps<{
      */
     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

package/dist/components/Select/Select.js

@@ -114,7 +114,11 @@ function SelectRender(props, ref) {
     slotProps?.list,
     menuProps
   );
-  const labelProps = mergeProps({ isHidden: isLabelHidden, isRequired }, slotProps?.label, labelPropsAria);
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    slotProps?.label,
+    labelPropsAria
+  );
   const groupProps = mergeProps(
     {
       slotProps: {
@@ -142,8 +146,12 @@ function SelectRender(props, ref) {
     valueProps,
     triggerProps
   );
-  const captionProps = mergeProps({ isInvalid }, slotProps?.caption, descriptionProps);
-  const errorProps = mergeProps({ isInvalid }, slotProps?.errorMessage, errorMessageProps);
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
   const popoverProps = mergeProps(
     {
       state,
@@ -167,7 +175,7 @@ function SelectRender(props, ref) {
   const renderValue = renderValueProp || renderDefaultValue;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: label }),
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
       /* @__PURE__ */ jsx(
         HiddenSelect,
         {
@@ -179,8 +187,8 @@ function SelectRender(props, ref) {
         }
       ),
       /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
   ] });

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

@@ -69,14 +69,14 @@ export type SelectProps<T extends object> = {
      */
     isInvalid?: boolean;
     /** Message for the error state */
-    errorMessage?: string | number;
+    errorMessage?: ReactNode;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
      */
     isLabelHidden?: boolean;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
      * @default false

package/dist/components/Textarea/Textarea.d.ts

@@ -10,11 +10,11 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     variant?: import("./types").TextareaPropVariant;
     isInvalid?: boolean;
     isReadOnly?: boolean;
-    errorMessage?: string | number;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
     isDisabled?: boolean;
     isLabelHidden?: boolean;
-    caption?: string | number;
+    caption?: import("react").ReactNode;
     isRequired?: boolean;
     rows?: number;
     cols?: number;

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -39,23 +39,20 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     },
     slotProps?.textarea
   );
-  const captionProps = mergeProps(
-    { isInvalid },
-    slotProps?.caption
-  );
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption);
   const errorProps = mergeProps(
-    { isInvalid },
+    { isInvalid, children: errorMessage },
     slotProps?.errorMessage
   );
   const labelProps = mergeProps(
-    { isHidden: isLabelHidden, isRequired },
+    { isHidden: isLabelHidden, children: label, isRequired },
     slotProps?.label
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps.children || label }),
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
     /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }),
-    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-    /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
   ] });
 });
 TextareaContextConsumer.displayName = "TextareaContextConsumer";

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

@@ -69,7 +69,7 @@ export type TextareaProps = ExtendableProps<{
      */
     isReadOnly?: 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
@@ -86,7 +86,7 @@ export type TextareaProps = ExtendableProps<{
      */
     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

package/dist/style.css

@@ -2109,6 +2109,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-contrast-secondary);
+  margin: 0;
   transition: color var(--kbq-transition-default);
   margin-block-start: var(--kbq-size-xxs);
 }
@@ -2124,6 +2125,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-error);
+  margin: 0;
   transition: color var(--kbq-transition-default);
   margin-block-start: var(--kbq-size-xxs);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.31",
+  "version": "0.0.1-beta.32",
   "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.31",
-    "@koobiq/react-core": "0.0.1-beta.31",
-    "@koobiq/react-icons": "0.0.1-beta.31",
-    "@koobiq/react-primitives": "0.0.1-beta.31"
+    "@koobiq/logger": "0.0.1-beta.32",
+    "@koobiq/react-core": "0.0.1-beta.32",
+    "@koobiq/react-primitives": "0.0.1-beta.32",
+    "@koobiq/react-icons": "0.0.1-beta.32"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",