@scaleflex/ui-tw 0.0.148 → 0.0.149

package/color-picker/color-picker.component.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { Button } from '@scaleflex/ui-tw/button';
 import { ColorPalette } from '@scaleflex/ui-tw/color-palette';
-import { Dialog, DialogFormBody, DialogFormContent, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogTrigger } from '@scaleflex/ui-tw/dialog';
+import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogIcon, DialogTitle, DialogTrigger } from '@scaleflex/ui-tw/dialog';
 import { inputVariants } from '@scaleflex/ui-tw/input';
 import { getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -73,10 +73,11 @@ function ColorPicker(_ref) {
       backgroundColor: value
     },
     "aria-label": "Open color picker"
-  })), /*#__PURE__*/React.createElement(DialogFormContent, {
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    variant: "centered",
     className: cn('w-[316px]', className),
     overlayClassName: overlayClassName
-  }, /*#__PURE__*/React.createElement(DialogFormHeader, null, /*#__PURE__*/React.createElement(DialogFormIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogFormTitle, null, title || 'Pick color')), /*#__PURE__*/React.createElement(DialogFormBody, {
+  }, /*#__PURE__*/React.createElement(DialogHeader, null, /*#__PURE__*/React.createElement(DialogIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogTitle, null, title || 'Pick color')), /*#__PURE__*/React.createElement(DialogBody, {
     className: "space-y-4"
   }, /*#__PURE__*/React.createElement(HexColorPicker, {
     color: tempValue,
@@ -100,7 +101,7 @@ function ColorPicker(_ref) {
     value: tempValue,
     colors: presetColors,
     onSelect: setTempValue
-  })), /*#__PURE__*/React.createElement(DialogFormFooter, null, /*#__PURE__*/React.createElement(DialogTrigger, {
+  })), /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(DialogTrigger, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "outline",

package/command/command.component.js

@@ -16,7 +16,7 @@ var _excluded = ["className"],
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
 import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
 import { Checkbox } from '@scaleflex/ui-tw/checkbox';
-import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@scaleflex/ui-tw/dialog';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
 import { crossSizeOptions } from '@scaleflex/ui-tw/search/search.constants';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
@@ -46,11 +46,12 @@ function CommandDialog(_ref2) {
     description = _ref2$description === void 0 ? 'Search for a command to run...' : _ref2$description,
     children = _ref2.children,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(Dialog, props, /*#__PURE__*/React.createElement(DialogFormHeader, {
-    className: "sr-only"
-  }, /*#__PURE__*/React.createElement(DialogFormTitle, null, title), /*#__PURE__*/React.createElement(DialogFormDescription, null, description)), /*#__PURE__*/React.createElement(DialogWideContent, {
+  return /*#__PURE__*/React.createElement(Dialog, props, /*#__PURE__*/React.createElement(DialogContent, {
+    maxWidth: "5xl",
     className: "overflow-hidden p-0"
-  }, /*#__PURE__*/React.createElement(Command, {
+  }, /*#__PURE__*/React.createElement(DialogHeader, {
+    className: "sr-only"
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, title), /*#__PURE__*/React.createElement(DialogDescription, null, description)), /*#__PURE__*/React.createElement(Command, {
     className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
   }, children)));
 }

package/confirm-dialog/confirm-dialog.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ConfirmDialogProps } from './confirm-dialog.types';
+declare function ConfirmDialog({ open, onOpenChange, title, description, body, variant, confirmLabel, cancelLabel, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+export { ConfirmDialog };

package/confirm-dialog/confirm-dialog.component.js

@@ -0,0 +1,44 @@
+import { Button } from '@scaleflex/ui-tw/button';
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogTitle, DialogWarningIcon } from '@scaleflex/ui-tw/dialog';
+import React from 'react';
+function ConfirmDialog(_ref) {
+  var open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    title = _ref.title,
+    description = _ref.description,
+    body = _ref.body,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'warning' : _ref$variant,
+    _ref$confirmLabel = _ref.confirmLabel,
+    confirmLabel = _ref$confirmLabel === void 0 ? 'Confirm' : _ref$confirmLabel,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? 'Cancel' : _ref$cancelLabel,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel;
+  var handleCancel = function handleCancel() {
+    onCancel === null || onCancel === void 0 || onCancel();
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+  };
+  var handleConfirm = function handleConfirm() {
+    onConfirm === null || onConfirm === void 0 || onConfirm();
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+  };
+  var buttonVariant = variant === 'destructive' ? 'error-primary' : variant === 'warning' ? 'warning-primary' : 'primary';
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: open,
+    onOpenChange: onOpenChange
+  }, /*#__PURE__*/React.createElement(DialogContent, {
+    variant: "centered"
+  }, /*#__PURE__*/React.createElement(DialogHeader, null, variant === 'destructive' && /*#__PURE__*/React.createElement(DialogErrorIcon, null), variant === 'warning' && /*#__PURE__*/React.createElement(DialogWarningIcon, null), /*#__PURE__*/React.createElement(DialogTitle, null, title), description && /*#__PURE__*/React.createElement(DialogDescription, null, description)), body && /*#__PURE__*/React.createElement(DialogBody, {
+    className: "text-center"
+  }, body), /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(Button, {
+    className: "flex-1",
+    variant: "outline",
+    onClick: handleCancel
+  }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
+    className: "flex-1",
+    variant: buttonVariant,
+    onClick: handleConfirm
+  }, confirmLabel))));
+}
+export { ConfirmDialog };

package/confirm-dialog/confirm-dialog.types.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+export type ConfirmDialogVariant = 'default' | 'warning' | 'destructive';
+export interface ConfirmDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: string;
+    description?: string;
+    body?: React.ReactNode;
+    variant?: ConfirmDialogVariant;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}

package/confirm-dialog/confirm-dialog.types.js

@@ -0,0 +1 @@
+export {};

package/confirm-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './confirm-dialog.component';
+export type { ConfirmDialogProps, ConfirmDialogVariant } from './confirm-dialog.types';

package/confirm-dialog/index.js

@@ -0,0 +1 @@
+export { ConfirmDialog } from './confirm-dialog.component';

package/dialog/dialog.component.d.ts

@@ -1,23 +1,46 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
-import type { DialogFormContentProps, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps } from './dialog.types';
+import type { DialogContentProps, DialogHeaderProps, DialogTitleProps } from './dialog.types';
 declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogWideContent({ className, children, overlayClassName, headerSize, maxWidth, ...props }: DialogWideContentProps): React.JSX.Element;
-declare function DialogFormContent({ className, children, overlayClassName, maxWidth, ...props }: DialogFormContentProps): React.JSX.Element;
-declare function DialogWideHeader({ className, size, ...props }: DialogWideHeaderProps): React.JSX.Element;
-declare function DialogFormHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogWideBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogWideTitle({ className, size, align, ...props }: DialogWideTitleProps): React.JSX.Element;
-declare function DialogFormTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
-declare function DialogFormDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
-declare function DialogFormIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormWarningIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormErrorIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogWideFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter, };
+declare function DialogContent({ className, children, overlayClassName, variant, headerSize, maxWidth, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, size, ...props }: DialogHeaderProps): React.JSX.Element;
+declare function DialogTitle({ className, size, align, ...props }: DialogTitleProps): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogWarningIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogErrorIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogContent>` (variant defaults to `'default'`) */
+declare function DialogWideContent(props: DialogContentProps): React.JSX.Element;
+/** @deprecated Use `<DialogContent variant="centered">` */
+declare function DialogFormContent(props: DialogContentProps): React.JSX.Element;
+/** @deprecated Use `<DialogHeader>` */
+declare function DialogWideHeader(props: DialogHeaderProps): React.JSX.Element;
+/** @deprecated Use `<DialogHeader>` inside `<DialogContent variant="centered">` */
+declare function DialogFormHeader(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogTitle>` */
+declare function DialogWideTitle(props: DialogTitleProps): React.JSX.Element;
+/** @deprecated Use `<DialogTitle>` inside `<DialogContent variant="centered">` */
+declare function DialogFormTitle(props: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+/** @deprecated Use `<DialogDescription>` */
+declare function DialogFormDescription(props: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+/** @deprecated Use `<DialogBody>` */
+declare function DialogWideBody(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogBody>` inside `<DialogContent variant="centered">` */
+declare function DialogFormBody(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogFooter>` */
+declare function DialogWideFooter(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogFooter>` inside `<DialogContent variant="centered">` */
+declare function DialogFormFooter(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogIcon>` */
+declare function DialogFormIcon(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogWarningIcon>` */
+declare function DialogFormWarningIcon(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogErrorIcon>` */
+declare function DialogFormErrorIcon(props: ComponentProps<'div'>): React.JSX.Element;
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon, DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle, };

package/dialog/dialog.component.js

@@ -2,27 +2,39 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["className"],
-  _excluded2 = ["className", "children", "overlayClassName", "headerSize", "maxWidth"],
-  _excluded3 = ["className", "children", "overlayClassName", "maxWidth"],
-  _excluded4 = ["className", "size"],
+  _excluded2 = ["className", "children", "overlayClassName", "variant", "headerSize", "maxWidth"],
+  _excluded3 = ["className", "size"],
+  _excluded4 = ["className", "size", "align"],
   _excluded5 = ["className"],
   _excluded6 = ["className"],
   _excluded7 = ["className"],
-  _excluded8 = ["className", "size", "align"],
+  _excluded8 = ["className"],
   _excluded9 = ["className"],
-  _excluded10 = ["className"],
-  _excluded11 = ["className"],
-  _excluded12 = ["className"],
-  _excluded13 = ["className"],
-  _excluded14 = ["className"],
-  _excluded15 = ["className"];
+  _excluded10 = ["className"];
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Button } from '@scaleflex/ui-tw/button';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { CircleAlertIcon, XIcon } from 'lucide-react';
-import React from 'react';
-import { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
+import React, { createContext, useContext } from 'react';
+import { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogHeaderDefaultVariants, dialogTitleDefaultVariants } from './dialog.constants';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+var DialogVariantContext = /*#__PURE__*/createContext({
+  variant: 'default',
+  headerSize: 'md'
+});
+function useDialogVariant() {
+  return useContext(DialogVariantContext);
+}
+
+// ---------------------------------------------------------------------------
+// Primitives (unchanged)
+// ---------------------------------------------------------------------------
+
 function Dialog(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(DialogPrimitive.Root, _extends({
@@ -55,28 +67,41 @@ function DialogOverlay(_ref5) {
     className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className)
   }, props));
 }
-function DialogWideContent(_ref6) {
+
+// ---------------------------------------------------------------------------
+// Unified components
+// ---------------------------------------------------------------------------
+
+function DialogContent(_ref6) {
   var className = _ref6.className,
     children = _ref6.children,
     overlayClassName = _ref6.overlayClassName,
+    _ref6$variant = _ref6.variant,
+    variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
     _ref6$headerSize = _ref6.headerSize,
     headerSize = _ref6$headerSize === void 0 ? 'md' : _ref6$headerSize,
-    _ref6$maxWidth = _ref6.maxWidth,
-    maxWidth = _ref6$maxWidth === void 0 ? '2xl' : _ref6$maxWidth,
+    maxWidth = _ref6.maxWidth,
     props = _objectWithoutProperties(_ref6, _excluded2);
-  return /*#__PURE__*/React.createElement(DialogPortal, {
+  var resolvedMaxWidth = maxWidth === 'none' ? undefined : maxWidth !== null && maxWidth !== void 0 ? maxWidth : variant === 'centered' ? 'md' : '4xl';
+  var isCentered = variant === 'centered';
+  return /*#__PURE__*/React.createElement(DialogVariantContext.Provider, {
+    value: {
+      variant: variant,
+      headerSize: headerSize
+    }
+  }, /*#__PURE__*/React.createElement(DialogPortal, {
     "data-slot": "dialog-portal"
   }, /*#__PURE__*/React.createElement(DialogOverlay, {
     className: overlayClassName
   }), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', maxWidth && dialogContentWidthVariants({
-      maxWidth: maxWidth
+    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', resolvedMaxWidth && dialogContentWidthVariants({
+      maxWidth: resolvedMaxWidth
     }), className)
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,
-    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", dialogCloseButtonPositionVariants({
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", isCentered ? 'top-3' : dialogCloseButtonPositionVariants({
       headerSize: headerSize
     }), focusRingClassNames)
   }, /*#__PURE__*/React.createElement(Button, {
@@ -84,141 +109,221 @@ function DialogWideContent(_ref6) {
     size: "icon-sm"
   }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Close")))));
+  }, "Close"))))));
 }
-function DialogFormContent(_ref7) {
+function DialogHeader(_ref7) {
   var className = _ref7.className,
-    children = _ref7.children,
-    overlayClassName = _ref7.overlayClassName,
-    _ref7$maxWidth = _ref7.maxWidth,
-    maxWidth = _ref7$maxWidth === void 0 ? 'md' : _ref7$maxWidth,
+    size = _ref7.size,
     props = _objectWithoutProperties(_ref7, _excluded3);
-  return /*#__PURE__*/React.createElement(DialogPortal, {
-    "data-slot": "dialog-portal"
-  }, /*#__PURE__*/React.createElement(DialogOverlay, {
-    className: overlayClassName
-  }), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
-    "data-slot": "dialog-content",
-    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', maxWidth && dialogContentWidthVariants({
-      maxWidth: maxWidth
+  var _useDialogVariant = useDialogVariant(),
+    variant = _useDialogVariant.variant,
+    headerSize = _useDialogVariant.headerSize;
+  var isCentered = variant === 'centered';
+  if (isCentered) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-slot": "dialog-header",
+      className: cn('text-foreground flex flex-col items-center justify-center p-6 pt-8 text-center', className)
+    }, props));
+  }
+  var resolvedSize = size !== null && size !== void 0 ? size : headerSize;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "dialog-header",
+    className: cn(dialogHeaderDefaultVariants({
+      size: resolvedSize
     }), className)
-  }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
-    "data-state": "open",
-    asChild: true,
-    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", focusRingClassNames)
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "ghost-secondary",
-    size: "icon-sm"
-  }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
-    className: "sr-only"
-  }, "Close")))));
+  }, props));
 }
-function DialogWideHeader(_ref8) {
+function DialogTitle(_ref8) {
   var className = _ref8.className,
-    _ref8$size = _ref8.size,
-    size = _ref8$size === void 0 ? 'md' : _ref8$size,
+    size = _ref8.size,
+    align = _ref8.align,
     props = _objectWithoutProperties(_ref8, _excluded4);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-header",
-    className: cn(dialogWideHeaderVariants({
-      size: size
+  var _useDialogVariant2 = useDialogVariant(),
+    variant = _useDialogVariant2.variant,
+    headerSize = _useDialogVariant2.headerSize;
+  var isCentered = variant === 'centered';
+  if (isCentered) {
+    return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
+      "data-slot": "dialog-title",
+      className: cn('text-foreground text-lg leading-7 font-medium', className)
+    }, props));
+  }
+  var resolvedSize = size !== null && size !== void 0 ? size : headerSize;
+  var resolvedAlign = align !== null && align !== void 0 ? align : 'center';
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
+    "data-slot": "dialog-title",
+    className: cn(dialogTitleDefaultVariants({
+      size: resolvedSize,
+      align: resolvedAlign
     }), className)
   }, props));
 }
-function DialogFormHeader(_ref9) {
+function DialogDescription(_ref9) {
   var className = _ref9.className,
     props = _objectWithoutProperties(_ref9, _excluded5);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-header",
-    className: cn('text-foreground flex flex-col items-center justify-center p-6 pt-8 text-center', className)
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
+    "data-slot": "dialog-description",
+    className: cn('text-muted-foreground text-sm', className)
   }, props));
 }
-function DialogWideBody(_ref10) {
+function DialogBody(_ref10) {
   var className = _ref10.className,
     props = _objectWithoutProperties(_ref10, _excluded6);
+  var _useDialogVariant3 = useDialogVariant(),
+    variant = _useDialogVariant3.variant;
+  var isCentered = variant === 'centered';
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-body",
-    className: cn('p-6', className)
+    className: cn(isCentered ? 'px-6' : 'p-6', className)
   }, props));
 }
-function DialogFormBody(_ref11) {
+function DialogFooter(_ref11) {
   var className = _ref11.className,
     props = _objectWithoutProperties(_ref11, _excluded7);
+  var _useDialogVariant4 = useDialogVariant(),
+    variant = _useDialogVariant4.variant;
+  var isCentered = variant === 'centered';
+  if (isCentered) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-slot": "dialog-footer",
+      className: cn('flex justify-end gap-3 p-6', className)
+    }, props));
+  }
   return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-body",
-    className: cn('px-6', className)
+    "data-slot": "dialog-footer",
+    className: cn('border-border flex flex-col-reverse gap-3 border-t p-6 sm:flex-row sm:justify-end', className)
   }, props));
 }
-function DialogWideTitle(_ref12) {
+function DialogIcon(_ref12) {
   var className = _ref12.className,
-    _ref12$size = _ref12.size,
-    size = _ref12$size === void 0 ? 'md' : _ref12$size,
-    _ref12$align = _ref12.align,
-    align = _ref12$align === void 0 ? 'center' : _ref12$align,
     props = _objectWithoutProperties(_ref12, _excluded8);
-  return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
-    "data-slot": "dialog-title",
-    className: cn(dialogWideTitleVariants({
-      size: size,
-      align: align
-    }), className)
-  }, props));
-}
-function DialogFormTitle(_ref13) {
-  var className = _ref13.className,
-    props = _objectWithoutProperties(_ref13, _excluded9);
-  return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
-    "data-slot": "dialog-title",
-    className: cn('text-foreground text-lg leading-7 font-medium', className)
-  }, props));
-}
-function DialogFormDescription(_ref14) {
-  var className = _ref14.className,
-    props = _objectWithoutProperties(_ref14, _excluded10);
-  return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
-    "data-slot": "dialog-description",
-    className: cn('text-muted-foreground text-sm', className)
-  }, props));
-}
-function DialogFormIcon(_ref15) {
-  var className = _ref15.className,
-    props = _objectWithoutProperties(_ref15, _excluded11);
   return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "dialog-icon",
     className: cn('bg-accent mb-2 flex h-16 w-16 items-center justify-center rounded-full', "[&_svg:not([class*='text-'])]:text-primary [&_svg:not([class*='size-'])]:size-9", className)
   }, props));
 }
-function DialogFormWarningIcon(_ref16) {
-  var className = _ref16.className,
-    props = _objectWithoutProperties(_ref16, _excluded12);
-  return /*#__PURE__*/React.createElement(DialogFormIcon, _extends({
+function DialogWarningIcon(_ref13) {
+  var className = _ref13.className,
+    props = _objectWithoutProperties(_ref13, _excluded9);
+  return /*#__PURE__*/React.createElement(DialogIcon, _extends({
     className: cn(className, 'bg-warning-10')
   }, props), /*#__PURE__*/React.createElement(CircleAlertIcon, {
     className: "text-warning"
   }));
 }
-function DialogFormErrorIcon(_ref17) {
-  var className = _ref17.className,
-    props = _objectWithoutProperties(_ref17, _excluded13);
-  return /*#__PURE__*/React.createElement(DialogFormIcon, _extends({
+function DialogErrorIcon(_ref14) {
+  var className = _ref14.className,
+    props = _objectWithoutProperties(_ref14, _excluded10);
+  return /*#__PURE__*/React.createElement(DialogIcon, _extends({
     className: cn(className, 'bg-destructive-10')
   }, props), /*#__PURE__*/React.createElement(CircleAlertIcon, {
     className: "text-destructive"
   }));
 }
-function DialogWideFooter(_ref18) {
-  var className = _ref18.className,
-    props = _objectWithoutProperties(_ref18, _excluded14);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-footer",
-    className: cn('border-border flex flex-col-reverse gap-3 border-t p-6 sm:flex-row sm:justify-end', className)
-  }, props));
+
+// ---------------------------------------------------------------------------
+// Deprecated wrappers
+// ---------------------------------------------------------------------------
+
+var warnedComponents = new Set();
+function warnOnce(name, message) {
+  if (process.env.NODE_ENV !== 'production' && !warnedComponents.has(name)) {
+    warnedComponents.add(name);
+    console.warn("[Dialog] ".concat(name, " is deprecated. ").concat(message));
+  }
 }
-function DialogFormFooter(_ref19) {
-  var className = _ref19.className,
-    props = _objectWithoutProperties(_ref19, _excluded15);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-footer",
-    className: cn('flex justify-end gap-3 p-6', className)
-  }, props));
+
+/** @deprecated Use `<DialogContent>` (variant defaults to `'default'`) */
+function DialogWideContent(props) {
+  warnOnce('DialogWideContent', 'Use <DialogContent> instead.');
+  return /*#__PURE__*/React.createElement(DialogContent, _extends({
+    maxWidth: "5xl"
+  }, props, {
+    variant: "default"
+  }));
+}
+
+/** @deprecated Use `<DialogContent variant="centered">` */
+function DialogFormContent(props) {
+  warnOnce('DialogFormContent', 'Use <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogContent, _extends({}, props, {
+    variant: "centered"
+  }));
+}
+
+/** @deprecated Use `<DialogHeader>` */
+function DialogWideHeader(props) {
+  warnOnce('DialogWideHeader', 'Use <DialogHeader> instead.');
+  return /*#__PURE__*/React.createElement(DialogHeader, props);
+}
+
+/** @deprecated Use `<DialogHeader>` inside `<DialogContent variant="centered">` */
+function DialogFormHeader(props) {
+  warnOnce('DialogFormHeader', 'Use <DialogHeader> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogHeader, props);
+}
+
+/** @deprecated Use `<DialogTitle>` */
+function DialogWideTitle(props) {
+  warnOnce('DialogWideTitle', 'Use <DialogTitle> instead.');
+  return /*#__PURE__*/React.createElement(DialogTitle, props);
+}
+
+/** @deprecated Use `<DialogTitle>` inside `<DialogContent variant="centered">` */
+function DialogFormTitle(props) {
+  warnOnce('DialogFormTitle', 'Use <DialogTitle> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogTitle, props);
+}
+
+/** @deprecated Use `<DialogDescription>` */
+function DialogFormDescription(props) {
+  warnOnce('DialogFormDescription', 'Use <DialogDescription> instead.');
+  return /*#__PURE__*/React.createElement(DialogDescription, props);
+}
+
+/** @deprecated Use `<DialogBody>` */
+function DialogWideBody(props) {
+  warnOnce('DialogWideBody', 'Use <DialogBody> instead.');
+  return /*#__PURE__*/React.createElement(DialogBody, props);
+}
+
+/** @deprecated Use `<DialogBody>` inside `<DialogContent variant="centered">` */
+function DialogFormBody(props) {
+  warnOnce('DialogFormBody', 'Use <DialogBody> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogBody, props);
+}
+
+/** @deprecated Use `<DialogFooter>` */
+function DialogWideFooter(props) {
+  warnOnce('DialogWideFooter', 'Use <DialogFooter> instead.');
+  return /*#__PURE__*/React.createElement(DialogFooter, props);
+}
+
+/** @deprecated Use `<DialogFooter>` inside `<DialogContent variant="centered">` */
+function DialogFormFooter(props) {
+  warnOnce('DialogFormFooter', 'Use <DialogFooter> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogFooter, props);
+}
+
+/** @deprecated Use `<DialogIcon>` */
+function DialogFormIcon(props) {
+  warnOnce('DialogFormIcon', 'Use <DialogIcon> instead.');
+  return /*#__PURE__*/React.createElement(DialogIcon, props);
+}
+
+/** @deprecated Use `<DialogWarningIcon>` */
+function DialogFormWarningIcon(props) {
+  warnOnce('DialogFormWarningIcon', 'Use <DialogWarningIcon> instead.');
+  return /*#__PURE__*/React.createElement(DialogWarningIcon, props);
+}
+
+/** @deprecated Use `<DialogErrorIcon>` */
+function DialogFormErrorIcon(props) {
+  warnOnce('DialogFormErrorIcon', 'Use <DialogErrorIcon> instead.');
+  return /*#__PURE__*/React.createElement(DialogErrorIcon, props);
 }
-export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter };
+export {
+// Unified API
+Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon,
+// Deprecated
+DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle };

package/dialog/dialog.constants.d.ts

@@ -1,12 +1,21 @@
 export declare const dialogContentWidthVariants: (props?: ({
-    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
+    maxWidth?: "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const dialogWideHeaderVariants: (props?: ({
+export declare const dialogHeaderDefaultVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const dialogCloseButtonPositionVariants: (props?: ({
     headerSize?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const dialogTitleDefaultVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    align?: "center" | "left" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+/** @deprecated Use `dialogHeaderDefaultVariants` instead */
+export declare const dialogWideHeaderVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+/** @deprecated Use `dialogTitleDefaultVariants` instead */
 export declare const dialogWideTitleVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
     align?: "center" | "left" | null | undefined;

package/dialog/dialog.constants.js

@@ -2,16 +2,20 @@ import { cva } from 'class-variance-authority';
 export var dialogContentWidthVariants = cva('', {
   variants: {
     maxWidth: {
-      sm: 'max-w-sm',
       md: 'max-w-md',
-      lg: 'max-w-2xl',
-      xl: 'max-w-4xl',
-      '2xl': 'max-w-5xl',
+      lg: 'max-w-lg',
+      xl: 'max-w-xl',
+      '2xl': 'max-w-2xl',
+      '3xl': 'max-w-3xl',
+      '4xl': 'max-w-4xl',
+      '5xl': 'max-w-5xl',
+      '6xl': 'max-w-6xl',
+      '7xl': 'max-w-7xl',
       full: 'max-w-[calc(100%-2rem)]'
     }
   }
 });
-export var dialogWideHeaderVariants = cva('border-border text-foreground relative flex items-center border-b', {
+export var dialogHeaderDefaultVariants = cva('border-border text-foreground relative flex items-center border-b', {
   variants: {
     size: {
       sm: 'h-14 justify-start py-3 pr-4 pl-6',
@@ -33,7 +37,7 @@ export var dialogCloseButtonPositionVariants = cva('', {
     headerSize: 'md'
   }
 });
-export var dialogWideTitleVariants = cva('', {
+export var dialogTitleDefaultVariants = cva('', {
   variants: {
     size: {
       sm: 'text-base leading-6 font-normal',
@@ -48,4 +52,9 @@ export var dialogWideTitleVariants = cva('', {
     size: 'md',
     align: 'center'
   }
-});
+});
+
+/** @deprecated Use `dialogHeaderDefaultVariants` instead */
+export var dialogWideHeaderVariants = dialogHeaderDefaultVariants;
+/** @deprecated Use `dialogTitleDefaultVariants` instead */
+export var dialogWideTitleVariants = dialogTitleDefaultVariants;

package/dialog/dialog.types.d.ts

@@ -1,23 +1,32 @@
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import type { ComponentProps } from 'react';
-export type DialogSize = 'sm' | 'md';
-export type DialogAlign = 'center' | 'left';
-export type DialogContentWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-export interface DialogWideContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+export type DialogVariant = 'default' | 'centered';
+export type DialogHeaderSize = 'sm' | 'md';
+export type DialogTitleAlign = 'center' | 'left';
+export type DialogContentWidth = 'none' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+export interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
     overlayClassName?: string;
-    headerSize?: DialogSize;
-    /** Preset max-width. Pass `undefined` to use className for custom width. */
+    variant?: DialogVariant;
+    headerSize?: DialogHeaderSize;
+    /** Preset max-width. Pass `'none'` to skip the preset and use className for custom width. */
     maxWidth?: DialogContentWidth;
 }
-export interface DialogFormContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
-    overlayClassName?: string;
-    /** Preset max-width. Pass `undefined` to use className for custom width. */
-    maxWidth?: DialogContentWidth;
-}
-export interface DialogWideHeaderProps extends ComponentProps<'div'> {
-    size?: DialogSize;
+export interface DialogHeaderProps extends ComponentProps<'div'> {
+    size?: DialogHeaderSize;
 }
-export interface DialogWideTitleProps extends ComponentProps<typeof DialogPrimitive.Title> {
-    size?: DialogSize;
-    align?: DialogAlign;
+export interface DialogTitleProps extends ComponentProps<typeof DialogPrimitive.Title> {
+    size?: DialogHeaderSize;
+    align?: DialogTitleAlign;
 }
+/** @deprecated Use `DialogHeaderSize` instead */
+export type DialogSize = DialogHeaderSize;
+/** @deprecated Use `DialogTitleAlign` instead */
+export type DialogAlign = DialogTitleAlign;
+/** @deprecated Use `DialogContentProps` instead */
+export type DialogWideContentProps = DialogContentProps;
+/** @deprecated Use `DialogContentProps` instead */
+export type DialogFormContentProps = DialogContentProps;
+/** @deprecated Use `DialogHeaderProps` instead */
+export type DialogWideHeaderProps = DialogHeaderProps;
+/** @deprecated Use `DialogTitleProps` instead */
+export type DialogWideTitleProps = DialogTitleProps;

package/dialog/index.d.ts

@@ -1,3 +1,3 @@
-export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter, } from './dialog.component';
-export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
-export type { DialogAlign, DialogContentWidth, DialogFormContentProps, DialogSize, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon, DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle, } from './dialog.component';
+export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogHeaderDefaultVariants, dialogTitleDefaultVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
+export type { DialogAlign, DialogContentProps, DialogContentWidth, DialogFormContentProps, DialogHeaderProps, DialogHeaderSize, DialogSize, DialogTitleAlign, DialogTitleProps, DialogVariant, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';

package/dialog/index.js

@@ -1,2 +1,6 @@
-export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter } from './dialog.component';
-export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
+export {
+// Unified API
+Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon,
+// Deprecated
+DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle } from './dialog.component';
+export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogHeaderDefaultVariants, dialogTitleDefaultVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';

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, wrapperClassName, type, size, disabled, readOnly, icon: Icon, suffix, clearable, onClear, value, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, wrapperClassName, type, size, disabled, readOnly, icon: Icon, suffix, clearable, onClear, value, defaultValue, maxCharCount, onChange, ...props }: InputProps): React.JSX.Element;
 export { Input, inputVariants };

package/input/input.component.js

@@ -1,16 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "wrapperClassName", "type", "size", "disabled", "readOnly", "icon", "suffix", "clearable", "onClear", "value"];
+var _excluded = ["className", "wrapperClassName", "type", "size", "disabled", "readOnly", "icon", "suffix", "clearable", "onClear", "value", "defaultValue", "maxCharCount", "onChange"];
 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 { useCharCount } from '@scaleflex/ui-tw/utils/use-char-count';
 import { cva } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 import React from 'react';
-import { InputType, inputClearButtonSizeOptions, inputClearablePaddingOptions, inputIconSizeOptions, inputSizeOptions, inputSuffixSizeOptions, inputWithIconSizeOptions } from './input.constants';
+import { InputType, inputCharCountPaddingOptions, inputCharCountPositionOptions, inputCharCountWithClearPaddingOptions, inputCharCountWithClearPositionOptions, inputClearButtonSizeOptions, inputClearablePaddingOptions, inputIconSizeOptions, inputSizeOptions, inputSuffixSizeOptions, inputWithIconSizeOptions } from './input.constants';
 var inputVariants = cva('', {
   variants: {
     size: inputSizeOptions
@@ -60,21 +61,39 @@ function Input(_ref) {
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
     onClear = _ref.onClear,
     value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    maxCharCount = _ref.maxCharCount,
+    onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
   var showClearButton = clearable && value && !readOnly && !disabled;
-  var hasAddon = Icon || suffix || clearable;
+  var hasAddon = Icon || suffix || clearable || maxCharCount;
+  var _useCharCount = useCharCount({
+      value: value,
+      defaultValue: defaultValue,
+      maxCharCount: maxCharCount,
+      readOnly: readOnly,
+      onChange: onChange
+    }),
+    currentLength = _useCharCount.currentLength,
+    showCharCount = _useCharCount.showCharCount,
+    handleChange = _useCharCount.handleChange,
+    charCountColorClass = _useCharCount.charCountColorClass;
   var inputElement = /*#__PURE__*/React.createElement("input", _extends({
     type: type,
     "data-slot": "input",
     disabled: disabled,
     readOnly: readOnly,
     value: value,
+    defaultValue: defaultValue,
+    onChange: handleChange,
     className: cn.apply(void 0, ['flex w-full min-w-0'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants({
       size: size
-    }), (Icon || suffix) && !clearable && inputWithIconVariants({
+    }), (Icon || suffix) && !clearable && !maxCharCount && inputWithIconVariants({
       size: size
-    }), clearable && inputClearablePaddingOptions[size], className]))
-  }, props));
+    }), maxCharCount && clearable && inputCharCountWithClearPaddingOptions[size], maxCharCount && !clearable && inputCharCountPaddingOptions[size], clearable && !maxCharCount && inputClearablePaddingOptions[size], className]))
+  }, props, maxCharCount !== undefined && maxCharCount > 0 && {
+    maxLength: maxCharCount
+  }));
   if (!hasAddon) {
     return inputElement;
   }
@@ -84,11 +103,13 @@ function Input(_ref) {
     className: cn(inputIconSizeVariants({
       size: size
     }), 'text-muted-foreground absolute top-1/2 -translate-y-1/2 transform', disabled && 'opacity-50')
-  }), suffix && !showClearButton && /*#__PURE__*/React.createElement("span", {
+  }), suffix && !showCharCount && /*#__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), showClearButton && /*#__PURE__*/React.createElement("button", {
+  }, suffix), showCharCount && (!clearable || currentLength > 0) && /*#__PURE__*/React.createElement("span", {
+    className: cn('absolute top-1/2 -translate-y-1/2 transform', clearable ? inputCharCountWithClearPositionOptions[size] : inputCharCountPositionOptions[size], charCountColorClass, disabled && 'opacity-50')
+  }, currentLength, "/", maxCharCount), showClearButton && /*#__PURE__*/React.createElement("button", {
     type: "button",
     tabIndex: 0,
     onClick: onClear,

package/input/input.constants.d.ts

@@ -19,22 +19,42 @@ export declare const InputType: {
     readonly Number: "number";
 };
 export declare const inputIconSizeOptions: {
-    sm: string;
-    md: string;
-    lg: string;
+    readonly sm: "right-2 size-3";
+    readonly md: "right-3 size-4";
+    readonly lg: "right-4 size-5";
 };
 export declare const inputSuffixSizeOptions: {
-    sm: string;
-    md: string;
-    lg: string;
+    readonly sm: "right-2 text-xs";
+    readonly md: "right-3 text-sm";
+    readonly lg: "right-4 text-base";
 };
 export declare const inputWithIconSizeOptions: {
-    sm: string;
-    md: string;
-    lg: string;
+    readonly sm: "pr-6";
+    readonly md: "pr-8";
+    readonly lg: "pr-10";
 };
 export declare const inputClearablePaddingOptions: {
-    sm: string;
-    md: string;
-    lg: string;
+    readonly sm: "pr-9";
+    readonly md: "pr-11";
+    readonly lg: "pr-12";
+};
+export declare const inputCharCountPaddingOptions: {
+    readonly sm: "pr-12";
+    readonly md: "pr-14";
+    readonly lg: "pr-16";
+};
+export declare const inputCharCountPositionOptions: {
+    readonly sm: "right-2 text-xs";
+    readonly md: "right-3 text-xs";
+    readonly lg: "right-4 text-sm";
+};
+export declare const inputCharCountWithClearPositionOptions: {
+    readonly sm: "right-9 text-xs";
+    readonly md: "right-11 text-xs";
+    readonly lg: "right-12 text-sm";
+};
+export declare const inputCharCountWithClearPaddingOptions: {
+    readonly sm: "pr-18";
+    readonly md: "pr-22";
+    readonly lg: "pr-24";
 };

package/input/input.constants.js

@@ -12,4 +12,8 @@ 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 inputClearablePaddingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-9'), FormSize.Md, 'pr-11'), FormSize.Lg, 'pr-12');
+export var inputClearablePaddingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-9'), FormSize.Md, 'pr-11'), FormSize.Lg, 'pr-12');
+export var inputCharCountPaddingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-12'), FormSize.Md, 'pr-14'), FormSize.Lg, 'pr-16');
+export var inputCharCountPositionOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'right-2 text-xs'), FormSize.Md, 'right-3 text-xs'), FormSize.Lg, 'right-4 text-sm');
+export var inputCharCountWithClearPositionOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'right-9 text-xs'), FormSize.Md, 'right-11 text-xs'), FormSize.Lg, 'right-12 text-sm');
+export var inputCharCountWithClearPaddingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-18'), FormSize.Md, 'pr-22'), FormSize.Lg, 'pr-24');

package/input/input.types.d.ts

@@ -9,4 +9,5 @@ export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     clearable?: boolean;
     onClear?: () => void;
     wrapperClassName?: string;
+    maxCharCount?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.148",
+  "version": "0.0.149",
   "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.148",
+    "@scaleflex/icons-tw": "^0.0.149",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/textarea/components/textarea-with-actions.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["leftToolbar", "rightToolbar", "className", "onBlur"];
-import { textareaBottomActionAreaPadding, textareaWithActionsSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.constants';
+import { textareaBottomActionAreaPadding, textareaCharCountTextSizeOptions, textareaWithActionsSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { useCharCount } from '@scaleflex/ui-tw/utils/use-char-count';
 import { cva } from 'class-variance-authority';
 import React, { useRef } from 'react';
 import { Textarea } from '../';
@@ -23,8 +24,25 @@ function TextareaWithActions(_ref) {
     textareaProps = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = textareaProps || {},
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? FormSize.Md : _ref2$size;
+    size = _ref2$size === void 0 ? FormSize.Md : _ref2$size,
+    maxCharCount = _ref2.maxCharCount,
+    value = _ref2.value,
+    defaultValue = _ref2.defaultValue,
+    disabled = _ref2.disabled,
+    readOnly = _ref2.readOnly,
+    onChange = _ref2.onChange;
   var textareaRef = useRef(null);
+  var _useCharCount = useCharCount({
+      value: value,
+      defaultValue: defaultValue,
+      maxCharCount: maxCharCount,
+      readOnly: readOnly,
+      onChange: onChange
+    }),
+    currentLength = _useCharCount.currentLength,
+    showCharCount = _useCharCount.showCharCount,
+    handleChange = _useCharCount.handleChange,
+    charCountColorClass = _useCharCount.charCountColorClass;
   var handleActionClick = function handleActionClick(e) {
     var _textareaRef$current;
     e.preventDefault();
@@ -37,23 +55,30 @@ function TextareaWithActions(_ref) {
     }
     onBlur === null || onBlur === void 0 || onBlur(e);
   };
+  var hasBottomArea = leftToolbar || rightToolbar || showCharCount;
   return /*#__PURE__*/React.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React.createElement(Textarea, _extends({}, textareaProps, {
+    maxCharCount: undefined,
+    onChange: handleChange,
     className: cn(className, textareaWithActionsVariants({
       size: size
     })),
     ref: textareaRef,
     onBlur: handleBlur
-  })), (leftToolbar || rightToolbar) && /*#__PURE__*/React.createElement("div", {
+  }, maxCharCount !== undefined && maxCharCount > 0 && {
+    maxLength: maxCharCount
+  })), hasBottomArea && /*#__PURE__*/React.createElement("div", {
     "data-action-area": "true",
     className: cn('bg-background absolute right-2.5 bottom-0.25 left-1.5', textareaBottomActionAreaPadding[size]),
     onClick: handleActionClick,
     tabIndex: -1
   }, leftToolbar && /*#__PURE__*/React.createElement("div", {
     className: "absolute bottom-1.5 left-0 flex items-center gap-0.5"
-  }, leftToolbar), rightToolbar && /*#__PURE__*/React.createElement("div", {
+  }, leftToolbar), /*#__PURE__*/React.createElement("div", {
     className: "absolute right-0 bottom-1.5 flex items-center gap-0.5"
-  }, rightToolbar)));
+  }, showCharCount && /*#__PURE__*/React.createElement("span", {
+    className: cn(textareaCharCountTextSizeOptions[size], rightToolbar && 'mr-1', charCountColorClass, disabled && 'opacity-50')
+  }, currentLength, "/", maxCharCount), rightToolbar)));
 }
 export { TextareaWithActions };

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, clearable, onClear, value, ...props }: TextareaProps): React.JSX.Element;
+declare function Textarea({ className, size, disabled, readOnly, clearable, onClear, value, defaultValue, maxCharCount, onChange, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea, textareaVariants };

package/textarea/textarea.component.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "disabled", "readOnly", "clearable", "onClear", "value"];
+var _excluded = ["className", "size", "disabled", "readOnly", "clearable", "onClear", "value", "defaultValue", "maxCharCount", "onChange"];
 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 { useCharCount } from '@scaleflex/ui-tw/utils/use-char-count';
 import { cva } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 import React from 'react';
-import { textareaClearButtonSizeOptions, textareaClearablePaddingOptions, textareaSizeOptions } from './textarea.constants';
+import { textareaCharCountPaddingOptions, textareaCharCountPositionOptions, textareaClearButtonSizeOptions, textareaClearablePaddingOptions, textareaSizeOptions } from './textarea.constants';
 var textareaVariants = cva('', {
   variants: {
     size: textareaSizeOptions
@@ -30,23 +31,44 @@ function Textarea(_ref) {
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
     onClear = _ref.onClear,
     value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    maxCharCount = _ref.maxCharCount,
+    onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
   var showClearButton = clearable && value && !readOnly && !disabled;
+  var hasAddon = clearable || maxCharCount;
+  var _useCharCount = useCharCount({
+      value: value,
+      defaultValue: defaultValue,
+      maxCharCount: maxCharCount,
+      readOnly: readOnly,
+      onChange: onChange
+    }),
+    currentLength = _useCharCount.currentLength,
+    showCharCount = _useCharCount.showCharCount,
+    handleChange = _useCharCount.handleChange,
+    charCountColorClass = _useCharCount.charCountColorClass;
   var textareaElement = /*#__PURE__*/React.createElement("textarea", _extends({
     "data-slot": "textarea",
     disabled: disabled,
     readOnly: readOnly,
     value: value,
+    defaultValue: defaultValue,
+    onChange: handleChange,
     className: cn('flex field-sizing-content w-full resize-y', getBaseInputClasses(), readOnlyClassNames, selectionHighlightClassNames, focusRingClassNames, textareaVariants({
       size: size
-    }), clearable && textareaClearablePaddingOptions[size], clearable ? undefined : className)
-  }, props));
-  if (!clearable) {
+    }), maxCharCount && textareaCharCountPaddingOptions[size], clearable && textareaClearablePaddingOptions[size], hasAddon ? undefined : className)
+  }, props, maxCharCount !== undefined && maxCharCount > 0 && {
+    maxLength: maxCharCount
+  }));
+  if (!hasAddon) {
     return textareaElement;
   }
   return /*#__PURE__*/React.createElement("div", {
     className: cn('relative', className)
-  }, textareaElement, showClearButton && /*#__PURE__*/React.createElement("button", {
+  }, textareaElement, showCharCount && (!clearable || currentLength > 0) && /*#__PURE__*/React.createElement("span", {
+    className: cn('absolute', textareaCharCountPositionOptions[size], charCountColorClass, disabled && 'opacity-50')
+  }, currentLength, "/", maxCharCount), showClearButton && /*#__PURE__*/React.createElement("button", {
     type: "button",
     tabIndex: 0,
     onClick: onClear,

package/textarea/textarea.constants.d.ts

@@ -23,3 +23,18 @@ export declare const textareaBottomActionAreaPadding: {
     readonly md: "h-10";
     readonly lg: "h-12";
 };
+export declare const textareaCharCountPositionOptions: {
+    readonly sm: "bottom-1.5 right-3 text-xs";
+    readonly md: "bottom-1.5 right-4 text-xs";
+    readonly lg: "bottom-1.5 right-4 text-sm";
+};
+export declare const textareaCharCountPaddingOptions: {
+    readonly sm: "pb-7";
+    readonly md: "pb-8";
+    readonly lg: "pb-9";
+};
+export declare const textareaCharCountTextSizeOptions: {
+    readonly sm: "text-xs";
+    readonly md: "text-xs";
+    readonly lg: "text-sm";
+};

package/textarea/textarea.constants.js

@@ -5,4 +5,7 @@ export var textareaSizeOptions = _defineProperty(_defineProperty(_defineProperty
 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');
+export var textareaBottomActionAreaPadding = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-8'), FormSize.Md, 'h-10'), FormSize.Lg, 'h-12');
+export var textareaCharCountPositionOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'bottom-1.5 right-3 text-xs'), FormSize.Md, 'bottom-1.5 right-4 text-xs'), FormSize.Lg, 'bottom-1.5 right-4 text-sm');
+export var textareaCharCountPaddingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pb-7'), FormSize.Md, 'pb-8'), FormSize.Lg, 'pb-9');
+export var textareaCharCountTextSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'text-xs'), FormSize.Md, 'text-xs'), FormSize.Lg, 'text-sm');

package/textarea/textarea.types.d.ts

@@ -5,6 +5,7 @@ export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'>
     'aria-invalid'?: boolean;
     clearable?: boolean;
     onClear?: () => void;
+    maxCharCount?: number;
 }
 export interface TextareaWithActionsProps extends TextareaProps {
     leftToolbar?: ReactElement;

package/utils/use-char-count.d.ts

@@ -0,0 +1,21 @@
+type ChangeEvent = {
+    currentTarget: {
+        value: string;
+    };
+};
+interface UseCharCountOptions<E extends ChangeEvent> {
+    value?: string | number | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    maxCharCount?: number;
+    readOnly?: boolean;
+    onChange?: (e: E) => void;
+}
+export declare function useCharCount<E extends ChangeEvent>({ value, defaultValue, maxCharCount, readOnly, onChange, }: UseCharCountOptions<E>): {
+    currentLength: number;
+    isNearLimit: boolean;
+    isAtLimit: boolean;
+    showCharCount: boolean;
+    handleChange: ((e: E) => void) | undefined;
+    charCountColorClass: string;
+};
+export {};

package/utils/use-char-count.js

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+var NEAR_LIMIT_RATIO = 0.1;
+var MIN_NEAR_LIMIT_THRESHOLD = 1;
+function getStringLength(val) {
+  if (val == null) return 0;
+  if (typeof val === 'string') return val.length;
+  return String(val).length;
+}
+export function useCharCount(_ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    maxCharCount = _ref.maxCharCount,
+    readOnly = _ref.readOnly,
+    onChange = _ref.onChange;
+  var hasValidMaxCharCount = maxCharCount !== undefined && maxCharCount > 0;
+  var isControlled = value !== undefined;
+  var _useState = useState(function () {
+      return getStringLength(defaultValue);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalLength = _useState2[0],
+    setInternalLength = _useState2[1];
+  var currentLength = isControlled ? getStringLength(value) : internalLength;
+  var nearLimitThreshold = hasValidMaxCharCount ? Math.max(MIN_NEAR_LIMIT_THRESHOLD, Math.round(maxCharCount * NEAR_LIMIT_RATIO)) : 0;
+  var isNearLimit = hasValidMaxCharCount && currentLength >= maxCharCount - nearLimitThreshold;
+  var isAtLimit = hasValidMaxCharCount && currentLength >= maxCharCount;
+  var showCharCount = hasValidMaxCharCount && !readOnly;
+  var handleChange = hasValidMaxCharCount ? function (e) {
+    if (!isControlled) {
+      setInternalLength(e.currentTarget.value.length);
+    }
+    onChange === null || onChange === void 0 || onChange(e);
+  } : onChange;
+  var charCountColorClass = isAtLimit ? 'text-destructive-foreground' : isNearLimit ? 'text-warning-foreground' : 'text-muted-foreground';
+  return {
+    currentLength: currentLength,
+    isNearLimit: isNearLimit,
+    isAtLimit: isAtLimit,
+    showCharCount: showCharCount,
+    handleChange: handleChange,
+    charCountColorClass: charCountColorClass
+  };
+}