@rescui/textarea 0.11.6-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.11.6-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43

package/lib/public-api.p.css

@@ -1,7 +1,14 @@
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
+}
 @define-mixin rs-textarea-size-s{
   &:not(html){
     --_rs-textarea-vertical-padding:6px;
     --_rs-textarea-horizontal-padding:8px;
+    --_rs-textarea-icon-size:20px;
+    --_rs-textarea-icon-offset:8px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:20px;
@@ -116,6 +123,8 @@
   &:not(html){
     --_rs-textarea-vertical-padding:8px;
     --_rs-textarea-horizontal-padding:8px;
+    --_rs-textarea-icon-size:24px;
+    --_rs-textarea-icon-offset:8px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:24px;
@@ -249,6 +258,8 @@
   &:not(html){
     --_rs-textarea-vertical-padding:12px;
     --_rs-textarea-horizontal-padding:16px;
+    --_rs-textarea-icon-size:28px;
+    --_rs-textarea-icon-offset:16px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:28px;
@@ -392,6 +403,13 @@
     --_rs-textarea-focused-busy-icon-color:rgba(
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
     0.7
+  );
+    --_rs-textarea-focused-clear-icon-color:rgba(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
+    0.7
+  );
+    --_rs-textarea-focused-clear-icon-accent-color:rgb(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
   );
     --_rs-textarea-focused-scrollbar-track-color:rgb(
     calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
@@ -412,6 +430,13 @@
     --_rs-textarea-focused-busy-icon-color:rgba(
     calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
     0.7
+  );
+    --_rs-textarea-focused-clear-icon-color:rgba(
+    calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
+    0.7
+  );
+    --_rs-textarea-focused-clear-icon-accent-color:rgb(
+    calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
   );
     --_rs-textarea-focused-scrollbar-track-color:rgb(
     calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)

package/lib/public-api.pcss

@@ -1,7 +1,14 @@
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
+}
 @define-mixin rs-textarea-size-s{
   &:not(html){
     --_rs-textarea-vertical-padding:6px;
     --_rs-textarea-horizontal-padding:8px;
+    --_rs-textarea-icon-size:20px;
+    --_rs-textarea-icon-offset:8px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:20px;
@@ -116,6 +123,8 @@
   &:not(html){
     --_rs-textarea-vertical-padding:8px;
     --_rs-textarea-horizontal-padding:8px;
+    --_rs-textarea-icon-size:24px;
+    --_rs-textarea-icon-offset:8px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:24px;
@@ -249,6 +258,8 @@
   &:not(html){
     --_rs-textarea-vertical-padding:12px;
     --_rs-textarea-horizontal-padding:16px;
+    --_rs-textarea-icon-size:28px;
+    --_rs-textarea-icon-offset:16px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:28px;
@@ -392,6 +403,13 @@
     --_rs-textarea-focused-busy-icon-color:rgba(
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
     0.7
+  );
+    --_rs-textarea-focused-clear-icon-color:rgba(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
+    0.7
+  );
+    --_rs-textarea-focused-clear-icon-accent-color:rgb(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
   );
     --_rs-textarea-focused-scrollbar-track-color:rgb(
     calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
@@ -412,6 +430,13 @@
     --_rs-textarea-focused-busy-icon-color:rgba(
     calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
     0.7
+  );
+    --_rs-textarea-focused-clear-icon-color:rgba(
+    calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
+    0.7
+  );
+    --_rs-textarea-focused-clear-icon-accent-color:rgb(
+    calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
   );
     --_rs-textarea-focused-scrollbar-track-color:rgb(
     calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)

package/lib/textarea.d.ts

@@ -48,6 +48,10 @@ type TextareaExclusiveProps = {
      * `Blur` textarea callback
      */
     onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Clear textarea callback. The clear button appears when this callback is provided and textarea is not empty.
+     */
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
     /**
      * `mouseEnter` textarea callback
      */
@@ -91,6 +95,9 @@ type TextareaExclusiveProps = {
     label?: React.ReactNode;
     note?: React.ReactNode;
     textareaRef?: React.Ref<HTMLTextAreaElement>;
+    /**
+     * @deprecated Use `onClear` instead.
+     */
     enableClear?: boolean;
     boldLabel?: boolean;
     /**

package/lib/textarea.js

@@ -1,12 +1,15 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
+import { ErrorMessage, shouldRenderErrorMessage } from '@rescui/form-field';
 import cn from 'classnames';
+import CloseOutlineIcon from './_virtual/close-outline.js';
 import LoadingOutlineIcon from './_virtual/loading-outline.js';
-import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
+import { useSafeId } from './use-safe-id.js';
 import styles from './textarea.p.module.css.js';
 const SIZE_STYLES = {
   s: styles.sizeS,
@@ -22,77 +25,340 @@ const MODE_STYLES = {
   rock: styles.rock
 };
 const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-(_ref, ref) => {
-  let {
-    id,
-    className,
-    disabled,
-    error,
-    reserveErrorLine = false,
-    busy,
-    onChange,
-    size = 'm',
-    mode = 'classic',
-    theme: themeFromProps,
-    textareaRef,
-    value,
-    tabIndex,
-    label,
-    boldLabel = true,
-    note,
-    characterCounter,
-    ...restProps
-  } = _ref;
+(t0, ref) => {
+  const $ = c(76);
+  let busy;
+  let characterCounter;
+  let className;
+  let disabled;
+  let error;
+  let id;
+  let label;
+  let note;
+  let onChange;
+  let onClear;
+  let restProps;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let tabIndex;
+  let textareaRef;
+  let themeFromProps;
+  let value;
+
+  if ($[0] !== t0) {
+    const {
+      id: t5,
+      className: t6,
+      disabled: t7,
+      error: t8,
+      reserveErrorLine: t9,
+      busy: t10,
+      onChange: t11,
+      onClear: t12,
+      enableClear: _enableClear,
+      size: t13,
+      mode: t14,
+      theme: t15,
+      textareaRef: t16,
+      value: t17,
+      tabIndex: t18,
+      label: t19,
+      boldLabel: t20,
+      note: t21,
+      characterCounter: t22,
+      ...t23
+    } = t0;
+    id = t5;
+    className = t6;
+    disabled = t7;
+    error = t8;
+    t1 = t9;
+    busy = t10;
+    onChange = t11;
+    onClear = t12;
+    t2 = t13;
+    t3 = t14;
+    themeFromProps = t15;
+    textareaRef = t16;
+    value = t17;
+    tabIndex = t18;
+    label = t19;
+    t4 = t20;
+    note = t21;
+    characterCounter = t22;
+    restProps = t23;
+    $[0] = t0;
+    $[1] = busy;
+    $[2] = characterCounter;
+    $[3] = className;
+    $[4] = disabled;
+    $[5] = error;
+    $[6] = id;
+    $[7] = label;
+    $[8] = note;
+    $[9] = onChange;
+    $[10] = onClear;
+    $[11] = restProps;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = tabIndex;
+    $[17] = textareaRef;
+    $[18] = themeFromProps;
+    $[19] = value;
+  } else {
+    busy = $[1];
+    characterCounter = $[2];
+    className = $[3];
+    disabled = $[4];
+    error = $[5];
+    id = $[6];
+    label = $[7];
+    note = $[8];
+    onChange = $[9];
+    onClear = $[10];
+    restProps = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+    tabIndex = $[16];
+    textareaRef = $[17];
+    themeFromProps = $[18];
+    value = $[19];
+  }
+
+  const reserveErrorLine = t1 === undefined ? false : t1;
+  const size = t2 === undefined ? "m" : t2;
+  const mode = t3 === undefined ? "classic" : t3;
+  const boldLabel = t4 === undefined ? true : t4;
   const theme = useThemeWithUndefined(themeFromProps);
   const isEmpty = !value;
+  const showClearIcon = Boolean(onClear && !isEmpty);
   const [focused, setFocused] = useState(false);
-  const uniqueId = `textarea-${useBackwardCompatibleId()}`;
+  const uniqueId = `textarea-${useSafeId()}`;
   const errorId = `${id ? id : uniqueId}-error`;
-  const hasFooter = Boolean(note) || Boolean(characterCounter) || shouldRenderErrorMessage(error, reserveErrorLine);
-  return /*#__PURE__*/React.createElement("label", {
-    ref: ref,
-    className: cn(styles.labelWrapper, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], !!error && styles.error, disabled ? styles.disabled : styles.enabled, focused && styles.focused, boldLabel && styles.boldLabel, isEmpty ? styles.empty : styles.filled, className),
-    id: id,
-    "data-test": 'textarea'
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: styles.label,
-    "data-test": 'textarea__label',
-    "data-rs-internal": boldLabel ? 'textarea__bold-label' : 'textarea__label'
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper,
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false)
-  }, /*#__PURE__*/React.createElement(TextareaAutosize, { ...restProps,
-    className: styles.inner,
-    disabled: disabled,
-    value: value,
-    onChange: onChange,
-    ref: textareaRef,
-    "aria-errormessage": error ? errorId : undefined,
-    "aria-invalid": Boolean(error),
-    tabIndex: disabled ? -1 : tabIndex,
-    "data-test": 'textarea__input',
-    "data-rs-internal": "textarea__inner"
-  }), busy && /*#__PURE__*/React.createElement("span", {
-    className: styles.busyIcon
-  }, /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
-    "data-test": "textarea__busy-icon",
-    "data-rs-internal": "textarea__busy-icon",
-    "data-render-all-sizes": true
-  }))), hasFooter && /*#__PURE__*/React.createElement("div", {
-    className: styles.footer
-  }, characterCounter && /*#__PURE__*/React.createElement("div", {
-    className: styles.characterCounter
-  }, characterCounter), /*#__PURE__*/React.createElement(ErrorMessage, {
-    id: errorId,
-    className: styles.errorMessage,
-    "data-test": 'textarea__error',
-    reserveLine: reserveErrorLine
-  }, error), note && /*#__PURE__*/React.createElement("div", {
-    className: styles.note,
-    "data-test": 'textarea__note',
-    "data-rs-internal": "textarea__note"
-  }, note)));
+  let t5;
+
+  if ($[20] !== characterCounter || $[21] !== error || $[22] !== note || $[23] !== reserveErrorLine) {
+    t5 = Boolean(note) || Boolean(characterCounter) || shouldRenderErrorMessage(error, reserveErrorLine);
+    $[20] = characterCounter;
+    $[21] = error;
+    $[22] = note;
+    $[23] = reserveErrorLine;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+
+  const hasFooter = t5;
+  const t6 = SIZE_STYLES[size];
+  const t7 = MODE_STYLES[mode];
+  const t8 = THEME_STYLES[theme];
+  const t9 = !!error && styles.error;
+  const t10 = disabled ? styles.disabled : styles.enabled;
+  const t11 = focused && styles.focused;
+  const t12 = boldLabel && styles.boldLabel;
+  const t13 = isEmpty ? styles.empty : styles.filled;
+  let t14;
+
+  if ($[25] !== className || $[26] !== t10 || $[27] !== t11 || $[28] !== t12 || $[29] !== t13 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
+    t14 = cn(styles.labelWrapper, t6, t7, t8, t9, t10, t11, t12, t13, className);
+    $[25] = className;
+    $[26] = t10;
+    $[27] = t11;
+    $[28] = t12;
+    $[29] = t13;
+    $[30] = t6;
+    $[31] = t7;
+    $[32] = t8;
+    $[33] = t9;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+
+  let t15;
+
+  if ($[35] !== boldLabel || $[36] !== label) {
+    t15 = label && /*#__PURE__*/React.createElement("div", {
+      className: styles.label,
+      "data-test": "textarea__label",
+      "data-rs-internal": boldLabel ? "textarea__bold-label" : "textarea__label"
+    }, label);
+    $[35] = boldLabel;
+    $[36] = label;
+    $[37] = t15;
+  } else {
+    t15 = $[37];
+  }
+
+  const t16 = showClearIcon && styles.clearable;
+  let t17;
+
+  if ($[38] !== t16) {
+    t17 = cn(styles.wrapper, t16);
+    $[38] = t16;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+
+  let t18;
+  let t19;
+
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = () => setFocused(true);
+
+    t19 = () => setFocused(false);
+
+    $[40] = t18;
+    $[41] = t19;
+  } else {
+    t18 = $[40];
+    t19 = $[41];
+  }
+
+  const t20 = error ? errorId : undefined;
+  const t21 = Boolean(error);
+  const t22 = disabled ? -1 : tabIndex;
+  let t23;
+
+  if ($[42] !== disabled || $[43] !== focused || $[44] !== onChange || $[45] !== restProps || $[46] !== t20 || $[47] !== t21 || $[48] !== t22 || $[49] !== textareaRef || $[50] !== value) {
+    t23 = /*#__PURE__*/React.createElement(TextareaAutosize, _extends({}, restProps, {
+      className: styles.inner,
+      disabled: disabled,
+      value: value,
+      onChange: onChange,
+      ref: textareaRef,
+      "aria-errormessage": t20,
+      "aria-invalid": t21,
+      tabIndex: t22,
+      "data-test": "textarea__input",
+      "data-rs-internal": "textarea__inner",
+      "data-focused": focused
+    }));
+    $[42] = disabled;
+    $[43] = focused;
+    $[44] = onChange;
+    $[45] = restProps;
+    $[46] = t20;
+    $[47] = t21;
+    $[48] = t22;
+    $[49] = textareaRef;
+    $[50] = value;
+    $[51] = t23;
+  } else {
+    t23 = $[51];
+  }
+
+  let t24;
+
+  if ($[52] !== onClear || $[53] !== showClearIcon) {
+    t24 = showClearIcon && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: styles.clearIcon,
+      onClick: onClear,
+      "aria-label": "Clear textarea",
+      "data-test": "textarea__clear-icon",
+      "data-rs-internal": "textarea__clear-icon",
+      tabIndex: -1
+    }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
+      className: styles.icon,
+      "data-render-all-sizes": true
+    }));
+    $[52] = onClear;
+    $[53] = showClearIcon;
+    $[54] = t24;
+  } else {
+    t24 = $[54];
+  }
+
+  let t25;
+
+  if ($[55] !== busy) {
+    t25 = busy && /*#__PURE__*/React.createElement("span", {
+      className: styles.busyIcon
+    }, /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
+      "data-test": "textarea__busy-icon",
+      "data-rs-internal": "textarea__busy-icon",
+      "data-render-all-sizes": true
+    }));
+    $[55] = busy;
+    $[56] = t25;
+  } else {
+    t25 = $[56];
+  }
+
+  let t26;
+
+  if ($[57] !== t17 || $[58] !== t23 || $[59] !== t24 || $[60] !== t25) {
+    t26 = /*#__PURE__*/React.createElement("div", {
+      className: t17,
+      onFocus: t18,
+      onBlur: t19
+    }, t23, t24, t25);
+    $[57] = t17;
+    $[58] = t23;
+    $[59] = t24;
+    $[60] = t25;
+    $[61] = t26;
+  } else {
+    t26 = $[61];
+  }
+
+  let t27;
+
+  if ($[62] !== characterCounter || $[63] !== error || $[64] !== errorId || $[65] !== hasFooter || $[66] !== note || $[67] !== reserveErrorLine) {
+    t27 = hasFooter && /*#__PURE__*/React.createElement("div", {
+      className: styles.footer
+    }, characterCounter && /*#__PURE__*/React.createElement("div", {
+      className: styles.characterCounter
+    }, characterCounter), /*#__PURE__*/React.createElement(ErrorMessage, {
+      id: errorId,
+      className: styles.errorMessage,
+      "data-test": "textarea__error",
+      reserveLine: reserveErrorLine
+    }, error), note && /*#__PURE__*/React.createElement("div", {
+      className: styles.note,
+      "data-test": "textarea__note",
+      "data-rs-internal": "textarea__note"
+    }, note));
+    $[62] = characterCounter;
+    $[63] = error;
+    $[64] = errorId;
+    $[65] = hasFooter;
+    $[66] = note;
+    $[67] = reserveErrorLine;
+    $[68] = t27;
+  } else {
+    t27 = $[68];
+  }
+
+  let t28;
+
+  if ($[69] !== id || $[70] !== ref || $[71] !== t14 || $[72] !== t15 || $[73] !== t26 || $[74] !== t27) {
+    t28 = /*#__PURE__*/React.createElement("label", {
+      ref: ref,
+      className: t14,
+      id: id,
+      "data-test": "textarea"
+    }, t15, t26, t27);
+    $[69] = id;
+    $[70] = ref;
+    $[71] = t14;
+    $[72] = t15;
+    $[73] = t26;
+    $[74] = t27;
+    $[75] = t28;
+  } else {
+    t28 = $[75];
+  }
+
+  return t28;
 });
 Textarea.displayName = 'Textarea';
 Textarea.propTypes = {
@@ -105,6 +371,7 @@ Textarea.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
+  onClear: PropTypes.func,
   size: PropTypes.oneOf(['s', 'm', 'l']),
   mode: PropTypes.oneOf(['classic', 'rock']),
   theme: PropTypes.oneOf(['light', 'dark']),

package/lib/textarea.p.module.css.js

@@ -1,24 +1,27 @@
 var styles = {
-  "themeLight": "_themeLight_18horc_8",
-  "themeDark": "_themeDark_18horc_11",
-  "sizeS": "_sizeS_18horc_15",
-  "sizeM": "_sizeM_18horc_18",
-  "sizeL": "_sizeL_18horc_21",
-  "classic": "_classic_18horc_25",
-  "rock": "_rock_18horc_28",
-  "labelWrapper": "_labelWrapper_18horc_32",
-  "wrapper": "_wrapper_18horc_40",
-  "error": "_error_18horc_57",
-  "disabled": "_disabled_18horc_63",
-  "enabled": "_enabled_18horc_69",
-  "focused": "_focused_18horc_69",
-  "filled": "_filled_18horc_75",
-  "inner": "_inner_18horc_91",
-  "busyIcon": "_busyIcon_18horc_177",
-  "label": "_label_18horc_32",
-  "footer": "_footer_18horc_208",
-  "characterCounter": "_characterCounter_18horc_227",
-  "errorMessage": "_errorMessage_18horc_236",
-  "note": "_note_18horc_240"
+  "themeLight": "_themeLight_1hf7mcw_8",
+  "themeDark": "_themeDark_1hf7mcw_11",
+  "sizeS": "_sizeS_1hf7mcw_15",
+  "sizeM": "_sizeM_1hf7mcw_18",
+  "sizeL": "_sizeL_1hf7mcw_21",
+  "classic": "_classic_1hf7mcw_25",
+  "rock": "_rock_1hf7mcw_28",
+  "labelWrapper": "_labelWrapper_1hf7mcw_32",
+  "wrapper": "_wrapper_1hf7mcw_40",
+  "error": "_error_1hf7mcw_57",
+  "disabled": "_disabled_1hf7mcw_63",
+  "enabled": "_enabled_1hf7mcw_69",
+  "focused": "_focused_1hf7mcw_69",
+  "filled": "_filled_1hf7mcw_75",
+  "inner": "_inner_1hf7mcw_91",
+  "clearable": "_clearable_1hf7mcw_119",
+  "clearIcon": "_clearIcon_1hf7mcw_184",
+  "icon": "_icon_1hf7mcw_226",
+  "busyIcon": "_busyIcon_1hf7mcw_234",
+  "label": "_label_1hf7mcw_32",
+  "footer": "_footer_1hf7mcw_265",
+  "characterCounter": "_characterCounter_1hf7mcw_284",
+  "errorMessage": "_errorMessage_1hf7mcw_293",
+  "note": "_note_1hf7mcw_297"
 };
 export { styles as default };

package/lib/use-safe-id.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function useFallbackId(): number;
+export declare const useSafeId: typeof React.useId | typeof useFallbackId;
+export {};

package/lib/use-safe-id.js

@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+let nextFallbackId = 0;
+
+function useFallbackId() {
+  const [id] = useState(() => nextFallbackId++);
+  return id;
+}
+
+const useSafeId = React.useId ?? useFallbackId;
+export { useSafeId };

package/llm/components/textarea.md

@@ -18,6 +18,30 @@ import { Textarea } from '@rescui/textarea';
 </div>;
 ```
 
+### With clear button
+
+```tsx
+import { useState } from 'react';
+import { Textarea } from '@rescui/textarea';
+
+const Demo = () => {
+  const [value, setValue] = useState('Text that can be cleared and have a decent length');
+
+  return (
+    <div style={{ maxWidth: 400 }}>
+      <Textarea
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        onClear={() => setValue('')}
+        minRows={3}
+      />
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
 ### With character counter
 
 ```tsx