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

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

@@ -5,6 +5,47 @@ import type { ListPropItems, ListPropChildren, ListPropDisabledKeys } from '../L
 import type { PopoverProps } from '../Popover';
 export type SelectKey = string | number;
 export type SelectPropOnSelectionChange = (selected: SelectKey) => void;
+type SelectDeprecatedProps = {
+    /**
+     * 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;
+    /**
+     * Sets the open state of the menu.
+     *
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: 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 SelectProps<T extends object> = {
     /** Additional CSS-classes. */
     className?: string;
@@ -26,16 +67,16 @@ export type SelectProps<T extends object> = {
      * 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 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 input will take up the full width of its container.
      * @default false
@@ -45,12 +86,12 @@ export type SelectProps<T extends object> = {
      * If `true`, the component is disabled.
      * @default false
      */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * If `true`, the label is displayed as required and the input element is required.
      * @default false
      */
-    required?: boolean;
+    isRequired?: boolean;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** Ref to the control */
@@ -64,7 +105,7 @@ export type SelectProps<T extends object> = {
     /** Handler that is called when the selection changes. */
     onSelectionChange?: SelectPropOnSelectionChange;
     /** Sets the open state of the menu. */
-    open?: boolean;
+    isOpen?: boolean;
     /** Sets the default open state of the menu. */
     defaultOpen?: boolean;
     /** Method that is called when the open state of the menu changes. */
@@ -82,6 +123,7 @@ export type SelectProps<T extends object> = {
         group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
     };
-};
+} & SelectDeprecatedProps;
 export type SelectComponentProp = <T extends object>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'button'>;
+export {};

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

@@ -1,21 +1,29 @@
-export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseTextFieldProps, "inputElementType">, "caption" | "label" | "className" | "disabled" | "required" | "cols" | "rows" | "error" | "variant" | "slotProps" | "fullWidth" | "errorMessage" | "hiddenLabel" | "expand"> & {
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    hiddenLabel?: boolean;
+    readonly?: boolean;
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "className" | "cols" | "rows" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "isLabelHidden" | "expand"> & {
     label?: import("react").ReactNode;
     className?: string;
     variant?: import("./types").TextareaPropVariant;
-    error?: boolean;
-    errorMessage?: string | number;
+    isInvalid?: boolean;
+    isReadOnly?: 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;
     rows?: number;
     cols?: number;
     expand?: import("./types").TextareaPropExpand;
+    'data-testid'?: string | number;
     slotProps?: {
         label?: import("../FieldComponents").FieldLabelProps;
         caption?: import("../FieldComponents").FieldCaptionProps;
-        textarea?: import("../FieldComponents").FieldInputProps;
+        textarea?: import("../FieldComponents").FieldInputProps<"textarea">;
         errorMessage?: import("../FieldComponents").FieldErrorProps;
     };
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps } from "@koobiq/react-core";
 import { TextField } from "@koobiq/react-primitives";
 import { TextareaContextConsumer } from "./components/TextareaContextConsumer/TextareaContextConsumer.js";
@@ -9,7 +10,16 @@ const Textarea = 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,
     rows,
     cols,
     expand,
@@ -19,10 +29,44 @@ const Textarea = forwardRef((props, ref) => {
     label,
     ...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(
+      'Textarea: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "required" in props) {
+    deprecate(
+      'Textarea: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "error" in props) {
+    deprecate(
+      'Textarea: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+    deprecate(
+      'Textarea: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+    deprecate(
+      'Textarea: 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
@@ -40,7 +84,7 @@ const Textarea = forwardRef((props, ref) => {
       variant,
       caption,
       slotProps,
-      hiddenLabel,
+      isLabelHidden,
       errorMessage,
       ref
     }

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

@@ -1,6 +1,6 @@
 import type { TextareaProps } from '../../types';
 export declare const TextareaContextConsumer: import("react").ForwardRefExoticComponent<{
-    required?: boolean;
-    error?: boolean;
-    disabled?: boolean;
-} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "errorMessage" | "hiddenLabel" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -13,14 +13,14 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     rows,
     cols,
     label,
-    error,
+    isInvalid,
     expand,
     caption,
     variant,
-    disabled,
-    required,
+    isDisabled,
+    isRequired,
     slotProps,
-    hiddenLabel,
+    isLabelHidden,
     errorMessage
   } = props;
   const { value } = useTextareaContext();
@@ -28,28 +28,31 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
   useTextareaAutosize(domRef, value, expand === "auto-size");
   const textareaProps = mergeProps(
     {
-      error,
+      isInvalid,
       rows,
       cols,
       variant,
       value,
-      disabled,
+      isDisabled,
       ...expand && { className: s[expand] },
       ref: domRef
     },
     slotProps?.textarea
   );
-  const captionProps = slotProps?.caption;
-  const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage
+  );
   const labelProps = mergeProps(
-    { hidden: hiddenLabel, required },
+    { 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

@@ -1,11 +1,53 @@
 import type { ComponentRef, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
-import type { UseTextFieldProps } from '@koobiq/react-primitives';
+import type { TextFieldProps } from '@koobiq/react-primitives';
 import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
 export declare const textareaPropVariant: readonly ["filled", "transparent"];
 export type TextareaPropVariant = (typeof textareaPropVariant)[number];
 export declare const textareaPropExpand: readonly ["auto-size", "vertical-resize"];
 export type TextareaPropExpand = (typeof textareaPropExpand)[number];
+type TextareaDeprecatedProps = {
+    /**
+     * 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 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;
+    /**
+     * 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;
+};
 export type TextareaProps = ExtendableProps<{
     /** The content to display as the label. */
     label?: ReactNode;
@@ -20,9 +62,14 @@ export type TextareaProps = ExtendableProps<{
      * If `true`, the input will indicate an error.
      * @default false
      */
-    error?: boolean;
+    isInvalid?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     */
+    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
@@ -32,19 +79,19 @@ export type TextareaProps = ExtendableProps<{
      * If `true`, the component is disabled.
      * @default false
      */
-    disabled?: boolean;
+    isDisabled?: 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;
     /** The rows property specifies the visible height of a text area, in lines. */
     rows?: number;
     /** The cols property specifies the visible width of a text area. */
@@ -56,12 +103,15 @@ export type TextareaProps = ExtendableProps<{
      * `verticalResize` — the ability to stretch the field vertically.
      */
     expand?: TextareaPropExpand;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
         label?: FieldLabelProps;
         caption?: FieldCaptionProps;
-        textarea?: FieldInputProps;
+        textarea?: FieldInputProps<'textarea'>;
         errorMessage?: FieldErrorProps;
     };
-}, Omit<UseTextFieldProps, 'inputElementType'>>;
+}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
 export type TextareaRef = ComponentRef<'textarea'>;
+export {};

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

@@ -1,2 +1,2 @@
 import { type MutableRefObject } from 'react';
-export declare function useTextareaAutosize(ref: MutableRefObject<HTMLTextAreaElement | null>, value: string | readonly string[] | number | undefined, active?: boolean): void;
+export declare function useTextareaAutosize(ref: MutableRefObject<HTMLTextAreaElement | null>, value: string | readonly string[] | number | undefined, isActive?: boolean): void;

package/dist/components/Textarea/utils/useTextareaAutosize.js

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
-function useTextareaAutosize(ref, value, active) {
+function useTextareaAutosize(ref, value, isActive) {
   useEffect(() => {
-    if (!active) return;
+    if (!isActive) return;
     if (ref.current) {
       const textareaEl = ref.current;
       textareaEl.style.blockSize = "0px";

package/dist/style.css

@@ -1998,7 +1998,7 @@
   inset-inline-end: 0;
 }
 
-.kbq-fieldaddon-error-278697 {
+.kbq-fieldaddon-invalid-08b1fe {
   color: var(--kbq-icon-error);
 }
 .kbq-fieldinput-77b90b {
@@ -2068,7 +2068,7 @@
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
 }
 
-.kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-error-00c0a4) {
+.kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-invalid-2af82b) {
   --field-input-color: var(--kbq-foreground-error);
   --field-input-border-color: var(--kbq-line-error);
   --field-input-outline-color: var(--kbq-states-line-focus-error);
@@ -2076,7 +2076,7 @@
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
-.kbq-fieldinput-transparent-ed7263:where(.kbq-fieldinput-error-00c0a4) {
+.kbq-fieldinput-transparent-ed7263:where(.kbq-fieldinput-invalid-2af82b) {
   --field-input-color: var(--kbq-foreground-error);
   --field-input-border-color: transparent;
   --field-input-outline-color: transparent;
@@ -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);
 }
@@ -3104,7 +3106,7 @@
   overflow: hidden;
 }
 
-.kbq-fieldselect-error-0cac4a {
+.kbq-fieldselect-invalid-db8152 {
   --field-input-color: var(--kbq-foreground-error);
   --field-input-border-color: var(--kbq-line-error);
   --field-input-outline-color: var(--kbq-states-line-focus-error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.30",
+  "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.30",
-    "@koobiq/react-core": "0.0.1-beta.30",
-    "@koobiq/react-primitives": "0.0.1-beta.30",
-    "@koobiq/react-icons": "0.0.1-beta.30"
+    "@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",