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

package/dist/components/Table/components/TableRow/TableRow.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, useHover, mergeProps, clsx } from "@koobiq/react-core";
+import { useTableRow } from "@koobiq/react-primitives";
+import s from "./TableRow.module.css.js";
+function TableRow({ item, children, state }) {
+  const ref = useRef(null);
+  const isSelected = state.selectionManager.isSelected(item.key);
+  const { rowProps, isPressed, isDisabled } = useTableRow(
+    {
+      node: item
+    },
+    state,
+    ref
+  );
+  const { style, className } = item.props;
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled });
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: clsx(
+        s.base,
+        isHovered && s.hovered,
+        isPressed && s.pressed,
+        isSelected && s.selected,
+        isDisabled && s.disabled,
+        isFocusVisible && s.focusVisible,
+        className
+      ),
+      "data-hovered": isHovered,
+      "data-disabled": isDisabled,
+      "data-selected": isSelected,
+      "data-pressed": isPressed,
+      "data-focus-visible": isFocusVisible,
+      ...mergeProps(rowProps, hoverProps, focusProps),
+      style,
+      ref,
+      children
+    }
+  );
+}
+export {
+  TableRow
+};

package/dist/components/Table/components/TableRow/TableRow.module.css.js

@@ -0,0 +1,23 @@
+const base = "kbq-tablerow-4a268c";
+const hovered = "kbq-tablerow-hovered-f3a986";
+const pressed = "kbq-tablerow-pressed-932599";
+const selected = "kbq-tablerow-selected-ced903";
+const disabled = "kbq-tablerow-disabled-27e4c6";
+const focusVisible = "kbq-tablerow-focusVisible-3a3109";
+const s = {
+  base,
+  hovered,
+  pressed,
+  selected,
+  disabled,
+  focusVisible
+};
+export {
+  base,
+  s as default,
+  disabled,
+  focusVisible,
+  hovered,
+  pressed,
+  selected
+};

package/dist/components/Table/components/TableRow/index.d.ts

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

package/dist/components/Table/components/TableRowGroup/TableRowGroup.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export type TableRowGroupProps = {
+    children: ReactNode;
+    type: 'thead' | 'tbody';
+};
+export declare const TableRowGroup: import("react").ForwardRefExoticComponent<TableRowGroupProps & import("react").RefAttributes<any>>;

package/dist/components/Table/components/TableRowGroup/TableRowGroup.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTableRowGroup } from "@koobiq/react-primitives";
+const TableRowGroup = forwardRef(
+  ({ type = "thead", children }, ref) => {
+    const Element = type;
+    const { rowGroupProps } = useTableRowGroup();
+    return /* @__PURE__ */ jsx(Element, { ...rowGroupProps, ref, children });
+  }
+);
+TableRowGroup.displayName = "TableRowGroup";
+export {
+  TableRowGroup
+};

package/dist/components/Table/components/TableRowGroup/index.d.ts

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

package/dist/components/Table/components/TableSelectAllCell/TableSelectAllCell.d.ts

@@ -0,0 +1,7 @@
+import { type AriaTableColumnHeaderProps, type TableState } from '@koobiq/react-primitives';
+type TableSelectAllCellProps<T> = {
+    column: AriaTableColumnHeaderProps<T>['node'];
+    state: TableState<T>;
+};
+export declare function TableSelectAllCell<T>({ column, state, }: TableSelectAllCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableSelectAllCell/TableSelectAllCell.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableColumnHeader, useTableSelectAllCheckbox, VisuallyHidden } from "@koobiq/react-primitives";
+import s from "../TableColumnHeader/TableColumnHeader.module.css.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+function TableSelectAllCell({
+  column,
+  state
+}) {
+  const ref = useRef(null);
+  const { columnHeaderProps } = useTableColumnHeader(
+    { node: column },
+    state,
+    ref
+  );
+  const { checkboxProps } = useTableSelectAllCheckbox(state);
+  return /* @__PURE__ */ jsx("th", { className: s.base, ...columnHeaderProps, ref, children: state.selectionManager.selectionMode === "single" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: checkboxProps["aria-label"] }) : /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }) });
+}
+export {
+  TableSelectAllCell
+};

package/dist/components/Table/components/TableSelectAllCell/index.d.ts

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

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

@@ -0,0 +1,7 @@
+export * from './TableRowGroup';
+export * from './TableHeaderRow';
+export * from './TableColumnHeader';
+export * from './TableRow';
+export * from './TableCell';
+export * from './TableSelectAllCell';
+export * from './TableCheckboxCell';

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

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

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

@@ -0,0 +1,71 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TableStateProps } from '@koobiq/react-primitives';
+import type { Key } from '@react-types/shared';
+export declare const tablePropDivider: readonly ["none", "row"];
+export type TablePropDivider = (typeof tablePropDivider)[number];
+export type TablePropChildren<T> = TableStateProps<T>['children'];
+export type TablePropSelectionMode<T> = TableStateProps<T>['selectionMode'];
+export type TablePropSelectionBehavior<T> = TableStateProps<T>['selectionBehavior'];
+export type TablePropOnSelectionChange<T> = TableStateProps<T>['onSelectionChange'];
+export type TablePropSelectedKeys<T> = TableStateProps<T>['selectedKeys'];
+export type TablePropDefaultSelectedKeys<T> = TableStateProps<T>['defaultSelectedKeys'];
+export type TablePropDisabledBehavior<T> = TableStateProps<T>['disabledBehavior'];
+export type TablePropDisabledKeys<T> = TableStateProps<T>['disabledKeys'];
+export type TablePropBlockSize = CSSProperties['blockSize'];
+export type TablePropMinBlockSize = CSSProperties['minBlockSize'];
+export type TablePropMaxBlockSize = CSSProperties['maxInlineSize'];
+export type TableProps<T> = ExtendableComponentPropsWithRef<{
+    /** How multiple selection should behave in the collection. */
+    selectionBehavior?: TablePropSelectionBehavior<T>;
+    /** The type of selection that is allowed in the collection. */
+    selectionMode?: TablePropSelectionMode<T>;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: TablePropSelectedKeys<T>;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: TablePropDefaultSelectedKeys<T>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: TablePropOnSelectionChange<T>;
+    /** A list of row keys to disable. */
+    disabledKeys?: TablePropDisabledKeys<T>;
+    /** Whether `disabledKeys` applies to all interactions, or only selection. */
+    disabledBehavior?: TablePropDisabledBehavior<T>;
+    /** Handler that is called when a user performs an action on the row. */
+    onRowAction?: (key: Key) => void;
+    /** Handler that is called when a user performs an action on the cell. */
+    onCellAction?: (key: Key) => void;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * Type of separators in the table.
+     * @default 'none'
+     */
+    divider?: TablePropDivider;
+    /**
+     * Flag indicating a fixed table header.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * The elements that make up the table.
+     * Includes the Table.Header, Table.Body, Table.Column, and Table.Row.
+     */
+    children?: TablePropChildren<T>;
+    /** Ref to the control. */
+    ref?: Ref<HTMLDivElement>;
+    /** Height of the table container. */
+    blockSize?: TablePropBlockSize;
+    /** Minimum height of the table container. */
+    minBlockSize?: TablePropMinBlockSize;
+    /** Maximum height of the table container. */
+    maxBlockSize?: TablePropMaxBlockSize;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        container?: ComponentPropsWithRef<'div'>;
+        table?: ComponentPropsWithRef<'table'>;
+    };
+}, 'div'>;
+export type TableComponent = <T extends object>(props: TableProps<T>) => ReactElement | null;
+export type TableRef = ComponentRef<'table'>;

package/dist/components/Table/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TablePropBlockSize } from './types';
+export declare const normalizeBlockSize: (value: TablePropBlockSize | undefined) => string | undefined;

package/dist/components/Table/utils.js

@@ -0,0 +1,8 @@
+import { isNumber } from "@koobiq/react-core";
+const normalizeBlockSize = (value) => {
+  if (isNumber(value)) return `${value}px`;
+  return value;
+};
+export {
+  normalizeBlockSize
+};

package/dist/components/TagGroup/Tag.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ItemProps as AriaItemProps } from '@koobiq/react-core';
+import type { IconButtonProps } from '../IconButton';
+export type TagProps<T> = AriaItemProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Icon placed before the children. */
+    icon?: ReactNode;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        icon?: ComponentPropsWithRef<'span'>;
+        content?: ComponentPropsWithRef<'span'>;
+        removeIcon?: IconButtonProps;
+    };
+};
+export declare function Tag<T>(_props: TagProps<T>): null;
+export declare namespace Tag {
+    var getCollectionNode: unknown;
+}

package/dist/components/TagGroup/Tag.js

@@ -0,0 +1,10 @@
+"use client";
+import { Item } from "@koobiq/react-primitives";
+const ItemInner = Item;
+function Tag(_props) {
+  return null;
+}
+Tag.getCollectionNode = ItemInner.getCollectionNode;
+export {
+  Tag
+};

package/dist/components/TagGroup/TagGroup.d.ts

@@ -0,0 +1,2 @@
+import type { TagGroupComponent } from './types';
+export declare const TagGroup: TagGroupComponent;

package/dist/components/TagGroup/TagGroup.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useListState, useTagGroup } from "@koobiq/react-primitives";
+import s from "./TagGroup.module.css.js";
+import { TagInner } from "./components/TagInner/TagInner.js";
+function TagGroupRender(props, ref) {
+  const { variant = "theme-fade", style, className, slotProps } = props;
+  const domRef = useDOMRef(ref);
+  const state = useListState(props);
+  const { gridProps } = useTagGroup(props, state, domRef);
+  const rootProps = mergeProps(
+    { className: clsx(s.base, className), style, ref: domRef },
+    gridProps,
+    slotProps?.root
+  );
+  return /* @__PURE__ */ jsx("div", { ...rootProps, children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TagInner, { item, variant, state }, item.key)) });
+}
+const TagGroup = forwardRef(TagGroupRender);
+export {
+  TagGroup
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-taggroup-20136b";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/TagGroup/components/TagInner/TagInner.d.ts

@@ -0,0 +1,11 @@
+import type { AriaTagProps, ListState } from '@koobiq/react-primitives';
+import type { TagGroupPropVariant } from '../../index';
+export type TagInnerProps<T> = AriaTagProps<T> & {
+    state: ListState<T>;
+    /**
+     * The variant to use.
+     * @default 'theme-fade'
+     */
+    variant?: TagGroupPropVariant;
+};
+export declare function TagInner<T>(props: TagInnerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TagGroup/components/TagInner/TagInner.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useLocalizedStringFormatter, useFocusRing, useHover, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmarkS16 } from "@koobiq/react-icons";
+import { useTag } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.json.js";
+import s from "./TagInner.module.css.js";
+import { matchVariantToCloseButton } from "./utils.js";
+import { IconButton } from "../../../IconButton/IconButton.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+function TagInner(props) {
+  const { item, state, variant = "theme-fade" } = props;
+  const { slotProps, icon, className, style } = item.props;
+  const ref = useRef(null);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const { focusProps, isFocusVisible, isFocused } = useFocusRing({
+    within: false
+  });
+  const {
+    rowProps,
+    gridCellProps,
+    removeButtonProps: removeButtonPropsAria,
+    allowsRemoving,
+    isDisabled,
+    isPressed
+  } = useTag(props, state, ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const rootProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        isFocused && s.focused,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        textNormalMedium,
+        className
+      ),
+      style,
+      "data-variant": variant,
+      "data-focused": isFocused,
+      "data-pressed": isPressed,
+      "data-hovered": isHovered,
+      "aria-disabled": isDisabled,
+      "data-disabled": isDisabled,
+      "data-focus-visible": isFocusVisible
+    },
+    rowProps,
+    hoverProps,
+    focusProps,
+    slotProps?.root
+  );
+  const removeButtonProps = mergeProps(
+    {
+      tabIndex: -1,
+      isCompact: true,
+      isDisabled,
+      className: s.cancelIcon,
+      variant: matchVariantToCloseButton[variant],
+      "aria-label": stringFormatter.format("close")
+    },
+    removeButtonPropsAria,
+    slotProps?.removeIcon
+  );
+  const contentProps = mergeProps(
+    {
+      className: s.content
+    },
+    slotProps?.content
+  );
+  const iconProps = mergeProps(
+    {
+      className: s.icon
+    },
+    slotProps?.icon
+  );
+  return /* @__PURE__ */ jsx("div", { ref, ...rootProps, children: /* @__PURE__ */ jsxs("div", { ...gridCellProps, children: [
+    isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+    isNotNil(item.rendered) && /* @__PURE__ */ jsx("span", { ...contentProps, children: item.rendered }),
+    allowsRemoving && /* @__PURE__ */ jsx(IconButton, { size: "l", ...removeButtonProps, children: /* @__PURE__ */ jsx(IconXmarkS16, {}) })
+  ] }) });
+}
+export {
+  TagInner
+};

package/dist/components/TagGroup/components/TagInner/TagInner.module.css.js

@@ -0,0 +1,30 @@
+const base = "kbq-taginner-f9f19a";
+const content = "kbq-taginner-content-72ca39";
+const icon = "kbq-taginner-icon-df45be";
+const cancelIcon = "kbq-taginner-cancelIcon-8a3dbe";
+const hovered = "kbq-taginner-hovered-abf199";
+const focused = "kbq-taginner-focused-16f44f";
+const disabled = "kbq-taginner-disabled-0c6073";
+const s = {
+  base,
+  content,
+  icon,
+  cancelIcon,
+  "theme-fade": "kbq-taginner-theme-fade-68b99c",
+  "contrast-fade": "kbq-taginner-contrast-fade-39d7a7",
+  "error-fade": "kbq-taginner-error-fade-6d7d03",
+  "warning-fade": "kbq-taginner-warning-fade-9403c7",
+  hovered,
+  focused,
+  disabled
+};
+export {
+  base,
+  cancelIcon,
+  content,
+  s as default,
+  disabled,
+  focused,
+  hovered,
+  icon
+};

package/dist/components/TagGroup/components/TagInner/index.d.ts

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

package/dist/components/TagGroup/components/TagInner/utils.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonPropVariant } from '../../../IconButton';
+import type { TagGroupPropVariant } from '../../types';
+export declare const matchVariantToCloseButton: Record<TagGroupPropVariant, IconButtonPropVariant>;

package/dist/components/TagGroup/components/TagInner/utils.js

@@ -0,0 +1,9 @@
+const matchVariantToCloseButton = {
+  "theme-fade": "theme",
+  "contrast-fade": "fade-contrast",
+  "error-fade": "error",
+  "warning-fade": "warning"
+};
+export {
+  matchVariantToCloseButton
+};

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

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

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

@@ -0,0 +1,3 @@
+export * from './TagGroup';
+export * from './Tag';
+export * from './types';

package/dist/components/TagGroup/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "close": "Закрыть" },
+  "en-US": { "close": "Close" }
+};
+export {
+  intlMessages as default
+};

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

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { AriaTagGroupProps } from '@koobiq/react-primitives';
+export type TagGroupPropChildren<T extends object> = AriaTagGroupProps<T>['children'];
+export type TagGroupPropItems<T extends object> = AriaTagGroupProps<T>['items'];
+export type TagGroupPropOnRemove<T extends object> = AriaTagGroupProps<T>['onRemove'];
+export type TagGroupPropDisabledKeys<T extends object> = AriaTagGroupProps<T>['disabledKeys'];
+export declare const tagGroupPropVariant: readonly ["theme-fade", "contrast-fade", "error-fade", "warning-fade"];
+export type TagGroupPropVariant = (typeof tagGroupPropVariant)[number];
+export type TagGroupProps<T extends object> = {
+    /** The contents of the collection. */
+    children?: TagGroupPropChildren<T>;
+    /** Item objects in the collection. */
+    items?: TagGroupPropItems<T>;
+    /** Handler that is called when a user deletes a tag.  */
+    onRemove?: TagGroupPropOnRemove<T>;
+    /**
+     * The variant to use.
+     * @default 'theme-fade'
+     */
+    variant?: TagGroupPropVariant;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: TagGroupPropDisabledKeys<T>;
+    /** Ref to the HTML ul-element. */
+    ref?: Ref<HTMLElement>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+    };
+};
+export type TagGroupComponent = <T extends object>(props: TagGroupProps<T>) => ReactElement | null;
+export type TagGroupRef = ComponentRef<'div'>;

package/dist/components/TagGroup/types.js

@@ -0,0 +1,9 @@
+const tagGroupPropVariant = [
+  "theme-fade",
+  "contrast-fade",
+  "error-fade",
+  "warning-fade"
+];
+export {
+  tagGroupPropVariant
+};

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" | "validationState" | "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,14 +1,25 @@
 "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";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 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,
@@ -18,17 +29,51 @@ 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
     },
     other
   );
-  return /* @__PURE__ */ jsx(FieldControl, { inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
     TextareaContextConsumer,
     {
       ...values,
@@ -39,7 +84,7 @@ const Textarea = forwardRef((props, ref) => {
       variant,
       caption,
       slotProps,
-      hiddenLabel,
+      isLabelHidden,
       errorMessage,
       ref
     }