@scaleflex/ui-tw 0.0.135 → 0.0.137

package/dropdown-menu/dropdown-menu.component.d.ts

@@ -12,8 +12,9 @@ declare function DropdownMenuItem({ className, inset, variant, size, ...props }:
     variant?: 'default' | 'destructive';
     size?: DropdownMenuItemSize;
 }): React.JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, size, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+declare function DropdownMenuCheckboxItem({ className, children, checked, size, closeOnSelect, onSelect, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
     size?: DropdownMenuItemSize;
+    closeOnSelect?: boolean;
 }): React.JSX.Element;
 declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
 declare function DropdownMenuRadioItem({ className, children, size, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {

package/dropdown-menu/dropdown-menu.component.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["className", "sideOffset", "collisionPadding"],
   _excluded2 = ["className", "inset", "variant", "size"],
-  _excluded3 = ["className", "children", "checked", "size"],
+  _excluded3 = ["className", "children", "checked", "size", "closeOnSelect", "onSelect"],
   _excluded4 = ["className", "children", "size"],
   _excluded5 = ["className", "size"],
   _excluded6 = ["className"],
@@ -14,7 +14,7 @@ var _excluded = ["className", "sideOffset", "collisionPadding"],
   _excluded10 = ["className", "collisionPadding"];
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Slot } from '@radix-ui/react-slot';
-import { DropdownMenuItemSize, dropdownMenuButtonTriggerOptions, dropdownMenuCheckboxItemSizeOptions, dropdownMenuIconSizeOptions, dropdownMenuItemIconSizeOptions, dropdownMenuItemIndicatorSizeOptions, dropdownMenuItemSizeOptions, dropdownMenuShortcutSizeOptions } from '@scaleflex/ui-tw/dropdown-menu/dropdown-menu.constants';
+import { DropdownMenuItemSize, dropdownMenuButtonTriggerOptions, dropdownMenuCheckboxItemSizeOptions, dropdownMenuIconSizeOptions, dropdownMenuItemIconSizeOptions, dropdownMenuItemIndicatorSizeOptions, dropdownMenuItemSizeOptions, dropdownMenuRadioItemSizeOptions, dropdownMenuShortcutSizeOptions } from '@scaleflex/ui-tw/dropdown-menu/dropdown-menu.constants';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -36,6 +36,14 @@ var dropdownMenuCheckboxItemVariants = cva('', {
     size: DropdownMenuItemSize.Sm
   }
 });
+var dropdownMenuRadioItemVariants = cva('', {
+  variants: {
+    size: dropdownMenuRadioItemSizeOptions
+  },
+  defaultVariants: {
+    size: DropdownMenuItemSize.Sm
+  }
+});
 var dropdownMenuButtonTriggerVariants = cva('', {
   variants: {
     size: dropdownMenuButtonTriggerOptions
@@ -147,15 +155,24 @@ function DropdownMenuCheckboxItem(_ref7) {
     checked = _ref7.checked,
     _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? DropdownMenuItemSize.Sm : _ref7$size,
+    _ref7$closeOnSelect = _ref7.closeOnSelect,
+    closeOnSelect = _ref7$closeOnSelect === void 0 ? false : _ref7$closeOnSelect,
+    _onSelect = _ref7.onSelect,
     props = _objectWithoutProperties(_ref7, _excluded3);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.CheckboxItem, _extends({
     "data-slot": "dropdown-menu-checkbox-item",
-    className: cn('relative flex cursor-pointer items-center gap-2 rounded-sm pr-2 pl-2 outline-hidden select-none', dropdownMenuItemVariants({
+    className: cn('relative flex cursor-pointer items-center gap-2 rounded-sm outline-hidden select-none', dropdownMenuCheckboxItemVariants({
       size: size
     }), 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'data-[state=checked]:bg-accent data-[state=checked]:text-primary focus:bg-secondary', "[&_svg:not([class*='text-'])]:text-muted-foreground data-[state=checked]:[&_svg:not([class*='text-'])]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0", dropdownMenuIconVariants({
       size: size
     }), className),
-    checked: checked
+    checked: checked,
+    onSelect: function onSelect(event) {
+      if (!closeOnSelect) {
+        event.preventDefault();
+      }
+      _onSelect === null || _onSelect === void 0 || _onSelect(event);
+    }
   }, props), children, /*#__PURE__*/React.createElement("span", {
     className: cn('pointer-events-none absolute flex items-center justify-center', dropdownMenuItemIndicatorVariants({
       size: size
@@ -180,7 +197,7 @@ function DropdownMenuRadioItem(_ref9) {
     props = _objectWithoutProperties(_ref9, _excluded4);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioItem, _extends({
     "data-slot": "dropdown-menu-radio-item",
-    className: cn('relative flex cursor-pointer items-center gap-2 rounded-sm outline-hidden select-none', dropdownMenuCheckboxItemVariants({
+    className: cn('relative flex cursor-pointer items-center gap-2 rounded-sm outline-hidden select-none', dropdownMenuRadioItemVariants({
       size: size
     }), 'focus:bg-secondary data-[state=checked]:bg-accent data-[state=checked]:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground data-[state=checked]:[&_svg:not([class*='text-'])]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0", dropdownMenuIconVariants({
       size: size

package/dropdown-menu/dropdown-menu.constants.d.ts

@@ -9,9 +9,14 @@ export declare const dropdownMenuItemSizeOptions: {
     readonly lg: "px-5 py-2.5 data-[inset]:pl-12 text-lg";
 };
 export declare const dropdownMenuCheckboxItemSizeOptions: {
-    readonly sm: "px-3 py-1.5 pl-8 text-sm";
-    readonly md: "px-4 py-2 pl-8 text-base";
-    readonly lg: "px-5 py-2.5 pl-8 text-lg";
+    readonly sm: "py-1.5 pl-3 pr-8 text-sm";
+    readonly md: "py-2 pl-4 pr-9 text-base";
+    readonly lg: "py-2.5 pl-5 pr-10 text-lg";
+};
+export declare const dropdownMenuRadioItemSizeOptions: {
+    readonly sm: "py-1.5 pl-8 pr-3 text-sm";
+    readonly md: "py-2 pl-9 pr-4 text-base";
+    readonly lg: "py-2.5 pl-10 pr-5 text-lg";
 };
 export declare const dropdownMenuButtonTriggerOptions: {
     readonly sm: "px-3 py-1.5 gap-1 text-sm";

package/dropdown-menu/dropdown-menu.constants.js

@@ -5,7 +5,8 @@ export var DropdownMenuItemSize = {
   Lg: 'lg'
 };
 export var dropdownMenuItemSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'px-3 py-1.5 data-[inset]:pl-8 text-sm'), DropdownMenuItemSize.Md, 'px-4 py-2 data-[inset]:pl-10 text-base'), DropdownMenuItemSize.Lg, 'px-5 py-2.5 data-[inset]:pl-12 text-lg');
-export var dropdownMenuCheckboxItemSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'px-3 py-1.5 pl-8 text-sm'), DropdownMenuItemSize.Md, 'px-4 py-2 pl-8 text-base'), DropdownMenuItemSize.Lg, 'px-5 py-2.5 pl-8 text-lg');
+export var dropdownMenuCheckboxItemSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'py-1.5 pl-3 pr-8 text-sm'), DropdownMenuItemSize.Md, 'py-2 pl-4 pr-9 text-base'), DropdownMenuItemSize.Lg, 'py-2.5 pl-5 pr-10 text-lg');
+export var dropdownMenuRadioItemSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'py-1.5 pl-8 pr-3 text-sm'), DropdownMenuItemSize.Md, 'py-2 pl-9 pr-4 text-base'), DropdownMenuItemSize.Lg, 'py-2.5 pl-10 pr-5 text-lg');
 export var dropdownMenuButtonTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'px-3 py-1.5 gap-1 text-sm'), DropdownMenuItemSize.Md, 'px-4 py-2 gap-2 text-base'), DropdownMenuItemSize.Lg, 'px-5 py-2.5 gap-2 text-lg');
 export var dropdownMenuItemIndicatorSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'right-2 size-3.5'), DropdownMenuItemSize.Md, 'right-3 size-4'), DropdownMenuItemSize.Lg, 'right-3 size-5');
 export var dropdownMenuItemIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'size-3.5'), DropdownMenuItemSize.Md, 'size-4'), DropdownMenuItemSize.Lg, 'size-5');

package/input/input.component.d.ts

@@ -3,5 +3,5 @@ import type { InputProps } from './input.types';
 declare const inputVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare function Input({ className, type, size, disabled, readOnly, icon: Icon, suffix, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, type, size, disabled, readOnly, icon: Icon, suffix, clearable, onClear, value, ...props }: InputProps): React.JSX.Element;
 export { Input, inputVariants };

package/input/input.component.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "type", "size", "disabled", "readOnly", "icon", "suffix"];
+var _excluded = ["className", "type", "size", "disabled", "readOnly", "icon", "suffix", "clearable", "onClear", "value"];
+import { buttonVariants } from '@scaleflex/ui-tw/button';
+import { ButtonVariant } from '@scaleflex/ui-tw/button/button.constants';
 import { getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
 import React from 'react';
-import { InputType, inputIconSizeOptions, inputSizeOptions, inputSuffixSizeOptions, inputWithIconSizeOptions } from './input.constants';
+import { InputType, inputClearButtonSizeOptions, inputClearablePaddingOptions, inputIconSizeOptions, inputSizeOptions, inputSuffixSizeOptions, inputWithIconSizeOptions } from './input.constants';
 var inputVariants = cva('', {
   variants: {
     size: inputSizeOptions
@@ -52,19 +55,25 @@ function Input(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     Icon = _ref.icon,
     suffix = _ref.suffix,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    onClear = _ref.onClear,
+    value = _ref.value,
     props = _objectWithoutProperties(_ref, _excluded);
-  var hasAddon = Icon || suffix;
+  var showClearButton = clearable && value && !readOnly && !disabled;
+  var hasAddon = Icon || suffix || clearable;
   var inputElement = /*#__PURE__*/React.createElement("input", _extends({
     type: type,
     "data-slot": "input",
     disabled: disabled,
     readOnly: readOnly,
+    value: value,
     className: cn.apply(void 0, ['flex w-full min-w-0'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants({
       size: size,
       className: hasAddon ? undefined : className
-    }), hasAddon && inputWithIconVariants({
+    }), (Icon || suffix) && !clearable && inputWithIconVariants({
       size: size
-    })]))
+    }), clearable && inputClearablePaddingOptions[size]]))
   }, props));
   if (!hasAddon) {
     return inputElement;
@@ -75,10 +84,23 @@ function Input(_ref) {
     className: cn(inputIconSizeVariants({
       size: size
     }), 'text-muted-foreground absolute top-1/2 -translate-y-1/2 transform', disabled && 'opacity-50')
-  }), suffix && /*#__PURE__*/React.createElement("span", {
+  }), suffix && !showClearButton && /*#__PURE__*/React.createElement("span", {
     className: cn(inputSuffixSizeVariants({
       size: size
     }), 'text-muted-foreground absolute top-1/2 -translate-y-1/2 transform', disabled && 'opacity-50')
-  }, suffix));
+  }, suffix), showClearButton && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    tabIndex: 0,
+    onClick: onClear,
+    "data-clear-icon": "true",
+    "aria-label": "Clear",
+    className: cn(buttonVariants({
+      size: inputClearButtonSizeOptions[size],
+      variant: ButtonVariant.GhostSecondary
+    }), 'absolute top-1/2 right-2 -translate-y-1/2')
+  }, /*#__PURE__*/React.createElement(XIcon, {
+    "data-clear-icon": true,
+    className: "text-muted-foreground/70 hover:text-muted-foreground shrink-0"
+  })));
 }
 export { Input, inputVariants };

package/input/input.constants.d.ts

@@ -3,6 +3,11 @@ export declare const inputSizeOptions: {
     readonly md: "py-3 px-4 h-10 text-base ";
     readonly lg: "py-3 px-4 h-12 text-lg ";
 };
+export declare const inputClearButtonSizeOptions: {
+    readonly sm: "icon-xs";
+    readonly md: "icon-sm";
+    readonly lg: "icon-md";
+};
 export declare const inputItemSizeOptions: {
     readonly sm: "py-2 px-3 min-h-8 text-sm";
     readonly md: "py-2 px-4 min-h-10 text-base ";
@@ -28,3 +33,8 @@ export declare const inputWithIconSizeOptions: {
     md: string;
     lg: string;
 };
+export declare const inputClearablePaddingOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};

package/input/input.constants.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ButtonSize } from '@scaleflex/ui-tw/button';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 export var inputSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 h-8 text-sm'), FormSize.Md, 'py-3 px-4 h-10 text-base '), FormSize.Lg, 'py-3 px-4 h-12 text-lg ');
+export var inputClearButtonSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, ButtonSize.IconXs), FormSize.Md, ButtonSize.IconSm), FormSize.Lg, ButtonSize.IconMd);
 export var inputItemSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 min-h-8 text-sm'), FormSize.Md, 'py-2 px-4 min-h-10 text-base '), FormSize.Lg, 'py-2.5 px-4 min-h-12 text-lg ');
 export var InputType = {
   Text: 'text',
@@ -9,4 +11,5 @@ export var InputType = {
 };
 export var inputIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'right-2 size-3'), FormSize.Md, 'right-3 size-4'), FormSize.Lg, 'right-4 size-5');
 export var inputSuffixSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'right-2 text-xs'), FormSize.Md, 'right-3 text-sm'), FormSize.Lg, 'right-4 text-base');
-export var inputWithIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-6'), FormSize.Md, 'pr-8'), FormSize.Lg, 'pr-10');
+export var inputWithIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-6'), FormSize.Md, 'pr-8'), FormSize.Lg, 'pr-10');
+export var inputClearablePaddingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-9'), FormSize.Md, 'pr-11'), FormSize.Lg, 'pr-12');

package/input/input.types.d.ts

@@ -6,4 +6,6 @@ export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     'aria-invalid'?: boolean;
     icon?: LucideIcon;
     suffix?: string;
+    clearable?: boolean;
+    onClear?: () => void;
 }

package/label/label.component.js

@@ -34,7 +34,7 @@ function Label(_ref) {
       className: className
     }))
   }, props), noTruncate ? children : /*#__PURE__*/React.createElement("span", {
-    className: cn('truncate')
+    className: cn('min-w-0 flex-1 truncate')
   }, children), (icon || tooltip || disabledTooltip) && /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     icon: icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.135",
+  "version": "0.0.137",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,7 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.135",
+    "@scaleflex/icons-tw": "^0.0.137",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/textarea/textarea.component.d.ts

@@ -3,5 +3,5 @@ import type { TextareaProps } from './textarea.types';
 declare const textareaVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare function Textarea({ className, size, disabled, readOnly, ...props }: TextareaProps): React.JSX.Element;
+declare function Textarea({ className, size, disabled, readOnly, clearable, onClear, value, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea, textareaVariants };

package/textarea/textarea.component.js

@@ -1,12 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "disabled", "readOnly"];
+var _excluded = ["className", "size", "disabled", "readOnly", "clearable", "onClear", "value"];
+import { buttonVariants } from '@scaleflex/ui-tw/button';
+import { ButtonVariant } from '@scaleflex/ui-tw/button/button.constants';
 import { focusRingClassNames, getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
 import React from 'react';
-import { textareaSizeOptions } from './textarea.constants';
+import { textareaClearButtonSizeOptions, textareaClearablePaddingOptions, textareaSizeOptions } from './textarea.constants';
 var textareaVariants = cva('', {
   variants: {
     size: textareaSizeOptions
@@ -23,14 +26,39 @@ function Textarea(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    onClear = _ref.onClear,
+    value = _ref.value,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("textarea", _extends({
+  var showClearButton = clearable && value && !readOnly && !disabled;
+  var textareaElement = /*#__PURE__*/React.createElement("textarea", _extends({
     "data-slot": "textarea",
     disabled: disabled,
     readOnly: readOnly,
+    value: value,
     className: cn('flex field-sizing-content w-full resize-y', getBaseInputClasses(), readOnlyClassNames, selectionHighlightClassNames, focusRingClassNames, textareaVariants({
       size: size
-    }), className)
+    }), clearable && textareaClearablePaddingOptions[size], clearable ? undefined : className)
   }, props));
+  if (!clearable) {
+    return textareaElement;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('relative', className)
+  }, textareaElement, showClearButton && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    tabIndex: 0,
+    onClick: onClear,
+    "data-clear-icon": "true",
+    "aria-label": "Clear",
+    className: cn(buttonVariants({
+      size: textareaClearButtonSizeOptions[size],
+      variant: ButtonVariant.GhostSecondary
+    }), 'absolute top-2 right-2')
+  }, /*#__PURE__*/React.createElement(XIcon, {
+    "data-clear-icon": true,
+    className: "text-muted-foreground/70 hover:text-muted-foreground shrink-0"
+  })));
 }
 export { Textarea, textareaVariants };

package/textarea/textarea.constants.d.ts

@@ -3,6 +3,16 @@ export declare const textareaSizeOptions: {
     readonly md: "py-3 px-4 text-base min-h-16 max-h-48";
     readonly lg: "py-3 px-4 text-lg min-h-20 max-h-60";
 };
+export declare const textareaClearButtonSizeOptions: {
+    readonly sm: "icon-xs";
+    readonly md: "icon-sm";
+    readonly lg: "icon-md";
+};
+export declare const textareaClearablePaddingOptions: {
+    readonly sm: "pr-9";
+    readonly md: "pr-11";
+    readonly lg: "pr-12";
+};
 export declare const textareaWithActionsSizeOptions: {
     readonly sm: "pb-10 scroll-pb-10";
     readonly md: "pb-12 scroll-pb-12";

package/textarea/textarea.constants.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ButtonSize } from '@scaleflex/ui-tw/button';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 export var textareaSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 text-sm min-h-14 max-h-44'), FormSize.Md, 'py-3 px-4 text-base min-h-16 max-h-48'), FormSize.Lg, 'py-3 px-4 text-lg min-h-20 max-h-60');
+export var textareaClearButtonSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, ButtonSize.IconXs), FormSize.Md, ButtonSize.IconSm), FormSize.Lg, ButtonSize.IconMd);
+export var textareaClearablePaddingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-9'), FormSize.Md, 'pr-11'), FormSize.Lg, 'pr-12');
 export var textareaWithActionsSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pb-10 scroll-pb-10'), FormSize.Md, 'pb-12 scroll-pb-12'), FormSize.Lg, 'pb-14 scroll-pb-14');
 export var textareaBottomActionAreaPadding = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-8'), FormSize.Md, 'h-10'), FormSize.Lg, 'h-12');

package/textarea/textarea.types.d.ts

@@ -3,6 +3,8 @@ import type { ComponentProps, ReactElement } from 'react';
 export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'> {
     size?: FormSizeType;
     'aria-invalid'?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 export interface TextareaWithActionsProps extends TextareaProps {
     leftToolbar?: ReactElement;