@seed-design/react 1.0.6 → 1.1.0

package/lib/components/TextField/TextField.cjs

@@ -7,49 +7,26 @@ const jsxRuntime = require('react/jsx-runtime');
 const reactUseLayoutEffect = require('@radix-ui/react-use-layout-effect');
 const reactPrimitive = require('@seed-design/react-primitive');
 const reactTextField = require('@seed-design/react-text-field');
-const textField = require('@seed-design/css/recipes/text-field');
+const reactField = require('@seed-design/react-field');
+const textInput = require('@seed-design/css/recipes/text-input');
 const clsx = require('clsx');
 const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
 const reactComposeRefs = require('@radix-ui/react-compose-refs');
+const domUtils = require('@seed-design/dom-utils');
 
-const { withProvider, withContext, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(textField.textField);
-const withStateProps = createWithStateProps.createWithStateProps([reactTextField.useTextFieldContext]);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(textInput.textInput);
+const withFieldStateProps = createWithStateProps.createWithStateProps([{ useContext: reactField.useFieldContext, strict: false }]);
+const withStateProps = createWithStateProps.createWithStateProps([
+  reactTextField.useTextFieldContext,
+  { useContext: reactField.useFieldContext, strict: false }
+]);
 const TextFieldRoot = withProvider(
-  reactTextField.TextField.Root,
+  withFieldStateProps(reactTextField.TextField.Root),
   "root"
 );
-const TextFieldHeader = withContext(
-  withStateProps(reactPrimitive.Primitive.div),
-  "header"
-);
-const TextFieldLabel = withContext(
-  reactTextField.TextField.Label,
-  "label"
-);
-const TextFieldIndicator = React.forwardRef(
-  (props, ref) => {
-    const { className, ...otherProps } = props;
-    const classNames = useClassNames();
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { children: " " }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactPrimitive.Primitive.span,
-        {
-          ref,
-          className: clsx(classNames.indicator, className),
-          ...otherProps
-        }
-      )
-    ] });
-  }
-);
-const TextFieldField = withContext(
-  withStateProps(reactPrimitive.Primitive.div),
-  "field"
-);
 const TextFieldPrefixIcon = withContext(
   withStateProps(Icon.InternalIcon),
   "prefixIcon"
@@ -66,15 +43,50 @@ const TextFieldSuffixText = withContext(
   withStateProps(reactPrimitive.Primitive.span),
   "suffixText"
 );
-const TextFieldInput = withContext(
-  reactTextField.TextField.Input,
-  "value"
+const TextFieldInput = React.forwardRef(
+  ({ className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = reactTextField.useTextFieldContext();
+    const fieldContext = reactField.useFieldContext({ strict: false });
+    const mergedProps = domUtils.mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldInput: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldInput` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(reactTextField.TextField.Input, { ref, ...mergedProps, className: clsx(classNames.value, className) });
+  }
 );
+TextFieldInput.displayName = "TextFieldInput";
 const TextFieldTextarea = React.forwardRef(
-  (props, ref) => {
-    const { className, autoresize = true, ...otherProps } = props;
+  ({ className, autoresize = true, ...otherProps }, ref) => {
     const classNames = useClassNames();
-    const { value } = reactTextField.useTextFieldContext();
+    const textFieldContext = reactTextField.useTextFieldContext();
+    const fieldContext = reactField.useFieldContext({ strict: false });
+    const mergedProps = domUtils.mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldTextarea: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldTextarea` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
     const inputRef = React.useRef(null);
     const onHeightChange = React.useCallback(() => {
       if (!inputRef.current) return;
@@ -97,52 +109,20 @@ const TextFieldTextarea = React.forwardRef(
       if (inputRef.current) {
         onHeightChange();
       }
-    }, [onHeightChange, value, inputRef]);
+    }, [onHeightChange, textFieldContext.value, inputRef]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactTextField.TextField.Textarea,
       {
         ref: reactComposeRefs.composeRefs(inputRef, ref),
-        ...otherProps,
+        ...mergedProps,
         className: clsx(classNames.value, className)
       }
     );
   }
 );
-const TextFieldFooter = withContext(
-  withStateProps(reactPrimitive.Primitive.div),
-  "footer"
-);
-const TextFieldDescription = withContext(
-  reactTextField.TextField.Description,
-  "description"
-);
-const TextFieldErrorMessage = withContext(
-  reactTextField.TextField.ErrorMessage,
-  "errorMessage"
-);
-const TextFieldErrorIcon = withContext(
-  withStateProps(Icon.InternalIcon),
-  "errorIcon"
-);
-const TextFieldCharacterCountArea = withContext(withStateProps(reactPrimitive.Primitive.div), "characterCountArea");
-const TextFieldCharacterCount = withContext(
-  reactTextField.TextField.GraphemeCount,
-  "characterCount"
-);
-const TextFieldMaxCharacterCount = withContext(withStateProps(reactPrimitive.Primitive.span), "maxCharacterCount");
+TextFieldTextarea.displayName = "TextFieldTextarea";
 
-exports.TextFieldCharacterCount = TextFieldCharacterCount;
-exports.TextFieldCharacterCountArea = TextFieldCharacterCountArea;
-exports.TextFieldDescription = TextFieldDescription;
-exports.TextFieldErrorIcon = TextFieldErrorIcon;
-exports.TextFieldErrorMessage = TextFieldErrorMessage;
-exports.TextFieldField = TextFieldField;
-exports.TextFieldFooter = TextFieldFooter;
-exports.TextFieldHeader = TextFieldHeader;
-exports.TextFieldIndicator = TextFieldIndicator;
 exports.TextFieldInput = TextFieldInput;
-exports.TextFieldLabel = TextFieldLabel;
-exports.TextFieldMaxCharacterCount = TextFieldMaxCharacterCount;
 exports.TextFieldPrefixIcon = TextFieldPrefixIcon;
 exports.TextFieldPrefixText = TextFieldPrefixText;
 exports.TextFieldRoot = TextFieldRoot;

package/lib/components/TextField/TextField.d.ts

@@ -1,23 +1,11 @@
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { TextField } from '@seed-design/react-text-field';
-import { TextFieldVariantProps } from '@seed-design/css/recipes/text-field';
+import { TextInputVariantProps } from '@seed-design/css/recipes/text-input';
 import { InternalIconProps } from '../private/Icon';
 import type * as React from "react";
-export interface TextFieldRootProps extends TextFieldVariantProps, TextField.RootProps {
+export interface TextFieldRootProps extends TextInputVariantProps, TextField.RootProps {
 }
 export declare const TextFieldRoot: React.ForwardRefExoticComponent<TextFieldRootProps & React.RefAttributes<HTMLDivElement>>;
-export interface TextFieldHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
-}
-export declare const TextFieldHeader: React.ForwardRefExoticComponent<TextFieldHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface TextFieldLabelProps extends TextField.LabelProps {
-}
-export declare const TextFieldLabel: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
-export interface TextFieldIndicatorProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
-}
-export declare const TextFieldIndicator: React.ForwardRefExoticComponent<TextFieldIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
-export interface TextFieldFieldProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
-}
-export declare const TextFieldField: React.ForwardRefExoticComponent<TextFieldFieldProps & React.RefAttributes<HTMLDivElement>>;
 export interface TextFieldPrefixIconProps extends InternalIconProps {
 }
 export declare const TextFieldPrefixIcon: React.ForwardRefExoticComponent<TextFieldPrefixIconProps & React.RefAttributes<SVGSVGElement>>;
@@ -41,25 +29,4 @@ export interface TextFieldTextareaProps extends TextField.TextareaProps {
     autoresize?: boolean;
 }
 export declare const TextFieldTextarea: React.ForwardRefExoticComponent<TextFieldTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export interface TextFieldFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
-}
-export declare const TextFieldFooter: React.ForwardRefExoticComponent<TextFieldFooterProps & React.RefAttributes<HTMLDivElement>>;
-export interface TextFieldDescriptionProps extends TextField.DescriptionProps {
-}
-export declare const TextFieldDescription: React.ForwardRefExoticComponent<TextFieldDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
-export interface TextFieldErrorMessageProps extends TextField.ErrorMessageProps {
-}
-export declare const TextFieldErrorMessage: React.ForwardRefExoticComponent<TextFieldErrorMessageProps & React.RefAttributes<HTMLSpanElement>>;
-export interface TextFieldErrorIconProps extends InternalIconProps {
-}
-export declare const TextFieldErrorIcon: React.ForwardRefExoticComponent<TextFieldErrorIconProps & React.RefAttributes<SVGSVGElement>>;
-export interface TextFieldCharacterCountAreaProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
-}
-export declare const TextFieldCharacterCountArea: React.ForwardRefExoticComponent<TextFieldCharacterCountAreaProps & React.RefAttributes<HTMLDivElement>>;
-export interface TextFieldCharacterCountProps extends TextField.GraphemeCountProps {
-}
-export declare const TextFieldCharacterCount: React.ForwardRefExoticComponent<TextFieldCharacterCountProps & React.RefAttributes<HTMLDivElement>>;
-export interface TextFieldMaxCharacterCountProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
-}
-export declare const TextFieldMaxCharacterCount: React.ForwardRefExoticComponent<TextFieldMaxCharacterCountProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/lib/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAC;AAC/E,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAE5F,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAQvE,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB,EAAE,SAAS,CAAC,SAAS;CAAG;AAEzF,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,6FAG3B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,UAAU;CAAG;AAEpE,eAAO,MAAM,cAAc,8FAG1B,CAAC;AAIF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,kBAAkB,iGAgB9B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpG,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,UAAU;CAAG;AAEpE,eAAO,MAAM,cAAc,8FAG1B,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,aAAa;IACrE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,oGAoD7B,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,6FAG3B,CAAC;AAIF,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,gBAAgB;CAAG;AAEhF,eAAO,MAAM,oBAAoB,mGAGhC,CAAC;AAIF,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB;CAAG;AAElF,eAAO,MAAM,qBAAqB,oGAGjC,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,+FAG9B,CAAC;AAIF,MAAM,WAAW,gCACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,2BAA2B,yGAGc,CAAC;AAIvD,MAAM,WAAW,4BAA6B,SAAQ,SAAS,CAAC,kBAAkB;CAAG;AAErF,eAAO,MAAM,uBAAuB,qGAGnC,CAAC;AAIF,MAAM,WAAW,+BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,0BAA0B,yGAGe,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAE5F,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAcvE,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB,EAAE,SAAS,CAAC,SAAS;CAAG;AAEzF,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,UAAU;CAAG;AAEpE,eAAO,MAAM,cAAc,8FA6B1B,CAAC;AAGF,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,aAAa;IACrE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,oGAuE7B,CAAC"}

package/lib/components/TextField/TextField.js

@@ -1,51 +1,28 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
 import { Primitive } from '@seed-design/react-primitive';
 import { TextField, useTextFieldContext } from '@seed-design/react-text-field';
-import { textField } from '@seed-design/css/recipes/text-field';
+import { useFieldContext } from '@seed-design/react-field';
+import { textInput } from '@seed-design/css/recipes/text-input';
 import clsx from 'clsx';
 import { forwardRef, useRef, useCallback } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 import { composeRefs } from '@radix-ui/react-compose-refs';
+import { mergeProps } from '@seed-design/dom-utils';
 
-const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textField);
-const withStateProps = createWithStateProps([useTextFieldContext]);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textInput);
+const withFieldStateProps = createWithStateProps([{ useContext: useFieldContext, strict: false }]);
+const withStateProps = createWithStateProps([
+  useTextFieldContext,
+  { useContext: useFieldContext, strict: false }
+]);
 const TextFieldRoot = withProvider(
-  TextField.Root,
+  withFieldStateProps(TextField.Root),
   "root"
 );
-const TextFieldHeader = withContext(
-  withStateProps(Primitive.div),
-  "header"
-);
-const TextFieldLabel = withContext(
-  TextField.Label,
-  "label"
-);
-const TextFieldIndicator = forwardRef(
-  (props, ref) => {
-    const { className, ...otherProps } = props;
-    const classNames = useClassNames();
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Primitive.span, { children: " " }),
-      /* @__PURE__ */ jsx(
-        Primitive.span,
-        {
-          ref,
-          className: clsx(classNames.indicator, className),
-          ...otherProps
-        }
-      )
-    ] });
-  }
-);
-const TextFieldField = withContext(
-  withStateProps(Primitive.div),
-  "field"
-);
 const TextFieldPrefixIcon = withContext(
   withStateProps(InternalIcon),
   "prefixIcon"
@@ -62,15 +39,50 @@ const TextFieldSuffixText = withContext(
   withStateProps(Primitive.span),
   "suffixText"
 );
-const TextFieldInput = withContext(
-  TextField.Input,
-  "value"
+const TextFieldInput = forwardRef(
+  ({ className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = useTextFieldContext();
+    const fieldContext = useFieldContext({ strict: false });
+    const mergedProps = mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldInput: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldInput` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
+    return /* @__PURE__ */ jsx(TextField.Input, { ref, ...mergedProps, className: clsx(classNames.value, className) });
+  }
 );
+TextFieldInput.displayName = "TextFieldInput";
 const TextFieldTextarea = forwardRef(
-  (props, ref) => {
-    const { className, autoresize = true, ...otherProps } = props;
+  ({ className, autoresize = true, ...otherProps }, ref) => {
     const classNames = useClassNames();
-    const { value } = useTextFieldContext();
+    const textFieldContext = useTextFieldContext();
+    const fieldContext = useFieldContext({ strict: false });
+    const mergedProps = mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldTextarea: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldTextarea` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
     const inputRef = useRef(null);
     const onHeightChange = useCallback(() => {
       if (!inputRef.current) return;
@@ -93,38 +105,17 @@ const TextFieldTextarea = forwardRef(
       if (inputRef.current) {
         onHeightChange();
       }
-    }, [onHeightChange, value, inputRef]);
+    }, [onHeightChange, textFieldContext.value, inputRef]);
     return /* @__PURE__ */ jsx(
       TextField.Textarea,
       {
         ref: composeRefs(inputRef, ref),
-        ...otherProps,
+        ...mergedProps,
         className: clsx(classNames.value, className)
       }
     );
   }
 );
-const TextFieldFooter = withContext(
-  withStateProps(Primitive.div),
-  "footer"
-);
-const TextFieldDescription = withContext(
-  TextField.Description,
-  "description"
-);
-const TextFieldErrorMessage = withContext(
-  TextField.ErrorMessage,
-  "errorMessage"
-);
-const TextFieldErrorIcon = withContext(
-  withStateProps(InternalIcon),
-  "errorIcon"
-);
-const TextFieldCharacterCountArea = withContext(withStateProps(Primitive.div), "characterCountArea");
-const TextFieldCharacterCount = withContext(
-  TextField.GraphemeCount,
-  "characterCount"
-);
-const TextFieldMaxCharacterCount = withContext(withStateProps(Primitive.span), "maxCharacterCount");
+TextFieldTextarea.displayName = "TextFieldTextarea";
 
-export { TextFieldCharacterCount, TextFieldCharacterCountArea, TextFieldDescription, TextFieldErrorIcon, TextFieldErrorMessage, TextFieldField, TextFieldFooter, TextFieldHeader, TextFieldIndicator, TextFieldInput, TextFieldLabel, TextFieldMaxCharacterCount, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea };
+export { TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea };

package/lib/components/TextField/TextField.namespace.cjs

@@ -6,18 +6,7 @@ const TextField = require('./TextField.cjs');
 
 
 
-exports.CharacterCount = TextField.TextFieldCharacterCount;
-exports.CharacterCountArea = TextField.TextFieldCharacterCountArea;
-exports.Description = TextField.TextFieldDescription;
-exports.ErrorIcon = TextField.TextFieldErrorIcon;
-exports.ErrorMessage = TextField.TextFieldErrorMessage;
-exports.Field = TextField.TextFieldField;
-exports.Footer = TextField.TextFieldFooter;
-exports.Header = TextField.TextFieldHeader;
-exports.Indicator = TextField.TextFieldIndicator;
 exports.Input = TextField.TextFieldInput;
-exports.Label = TextField.TextFieldLabel;
-exports.MaxCharacterCount = TextField.TextFieldMaxCharacterCount;
 exports.PrefixIcon = TextField.TextFieldPrefixIcon;
 exports.PrefixText = TextField.TextFieldPrefixText;
 exports.Root = TextField.TextFieldRoot;

package/lib/components/TextField/TextField.namespace.d.ts

@@ -1,2 +1,2 @@
-export { TextFieldCharacterCount as CharacterCount, TextFieldCharacterCountArea as CharacterCountArea, TextFieldDescription as Description, TextFieldErrorIcon as ErrorIcon, TextFieldErrorMessage as ErrorMessage, TextFieldField as Field, TextFieldFooter as Footer, TextFieldHeader as Header, TextFieldIndicator as Indicator, TextFieldInput as Input, TextFieldTextarea as Textarea, TextFieldLabel as Label, TextFieldMaxCharacterCount as MaxCharacterCount, TextFieldPrefixIcon as PrefixIcon, TextFieldPrefixText as PrefixText, TextFieldRoot as Root, TextFieldSuffixIcon as SuffixIcon, TextFieldSuffixText as SuffixText, type TextFieldCharacterCountAreaProps as CharacterCountAreaProps, type TextFieldCharacterCountProps as CharacterCountProps, type TextFieldDescriptionProps as DescriptionProps, type TextFieldErrorIconProps as ErrorIconProps, type TextFieldErrorMessageProps as ErrorMessageProps, type TextFieldFieldProps as FieldProps, type TextFieldFooterProps as FooterProps, type TextFieldHeaderProps as HeaderProps, type TextFieldIndicatorProps as IndicatorProps, type TextFieldInputProps as InputProps, type TextFieldTextareaProps as TextareaProps, type TextFieldLabelProps as LabelProps, type TextFieldMaxCharacterCountProps as MaxCharacterCountProps, type TextFieldPrefixIconProps as PrefixIconProps, type TextFieldPrefixTextProps as PrefixTextProps, type TextFieldRootProps as RootProps, type TextFieldSuffixIconProps as SuffixIconProps, type TextFieldSuffixTextProps as SuffixTextProps, } from './TextField';
+export { TextFieldRoot as Root, TextFieldInput as Input, TextFieldTextarea as Textarea, TextFieldPrefixIcon as PrefixIcon, TextFieldPrefixText as PrefixText, TextFieldSuffixIcon as SuffixIcon, TextFieldSuffixText as SuffixText, type TextFieldRootProps as RootProps, type TextFieldInputProps as InputProps, type TextFieldTextareaProps as TextareaProps, type TextFieldPrefixIconProps as PrefixIconProps, type TextFieldPrefixTextProps as PrefixTextProps, type TextFieldSuffixIconProps as SuffixIconProps, type TextFieldSuffixTextProps as SuffixTextProps, } from './TextField';
 //# sourceMappingURL=TextField.namespace.d.ts.map

package/lib/components/TextField/TextField.namespace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,IAAI,cAAc,EACzC,2BAA2B,IAAI,kBAAkB,EACjD,oBAAoB,IAAI,WAAW,EACnC,kBAAkB,IAAI,SAAS,EAC/B,qBAAqB,IAAI,YAAY,EACrC,cAAc,IAAI,KAAK,EACvB,eAAe,IAAI,MAAM,EACzB,eAAe,IAAI,MAAM,EACzB,kBAAkB,IAAI,SAAS,EAC/B,cAAc,IAAI,KAAK,EACvB,iBAAiB,IAAI,QAAQ,EAC7B,cAAc,IAAI,KAAK,EACvB,0BAA0B,IAAI,iBAAiB,EAC/C,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,aAAa,IAAI,IAAI,EACrB,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,KAAK,gCAAgC,IAAI,uBAAuB,EAChE,KAAK,4BAA4B,IAAI,mBAAmB,EACxD,KAAK,yBAAyB,IAAI,gBAAgB,EAClD,KAAK,uBAAuB,IAAI,cAAc,EAC9C,KAAK,0BAA0B,IAAI,iBAAiB,EACpD,KAAK,mBAAmB,IAAI,UAAU,EACtC,KAAK,oBAAoB,IAAI,WAAW,EACxC,KAAK,oBAAoB,IAAI,WAAW,EACxC,KAAK,uBAAuB,IAAI,cAAc,EAC9C,KAAK,mBAAmB,IAAI,UAAU,EACtC,KAAK,sBAAsB,IAAI,aAAa,EAC5C,KAAK,mBAAmB,IAAI,UAAU,EACtC,KAAK,+BAA+B,IAAI,sBAAsB,EAC9D,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,kBAAkB,IAAI,SAAS,EACpC,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,GACjD,MAAM,aAAa,CAAC"}
+{"version":3,"file":"TextField.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,IAAI,EACrB,cAAc,IAAI,KAAK,EACvB,iBAAiB,IAAI,QAAQ,EAC7B,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,KAAK,kBAAkB,IAAI,SAAS,EACpC,KAAK,mBAAmB,IAAI,UAAU,EACtC,KAAK,sBAAsB,IAAI,aAAa,EAC5C,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,GACjD,MAAM,aAAa,CAAC"}

package/lib/components/TextField/TextField.namespace.js

@@ -1 +1 @@
-export { TextFieldCharacterCount as CharacterCount, TextFieldCharacterCountArea as CharacterCountArea, TextFieldDescription as Description, TextFieldErrorIcon as ErrorIcon, TextFieldErrorMessage as ErrorMessage, TextFieldField as Field, TextFieldFooter as Footer, TextFieldHeader as Header, TextFieldIndicator as Indicator, TextFieldInput as Input, TextFieldLabel as Label, TextFieldMaxCharacterCount as MaxCharacterCount, TextFieldPrefixIcon as PrefixIcon, TextFieldPrefixText as PrefixText, TextFieldRoot as Root, TextFieldSuffixIcon as SuffixIcon, TextFieldSuffixText as SuffixText, TextFieldTextarea as Textarea } from './TextField.js';
+export { TextFieldInput as Input, TextFieldPrefixIcon as PrefixIcon, TextFieldPrefixText as PrefixText, TextFieldRoot as Root, TextFieldSuffixIcon as SuffixIcon, TextFieldSuffixText as SuffixText, TextFieldTextarea as Textarea } from './TextField.js';

package/lib/components/TextField/TextField.test.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=TextField.test.d.ts.map

package/lib/components/TextField/TextField.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/lib/components/TextField/index.cjs

@@ -3,26 +3,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const TextField = require('./TextField.cjs');
+const useTextFieldWithGraphemes = require('./useTextFieldWithGraphemes.cjs');
 const TextField_namespace = require('./TextField.namespace.cjs');
 
 
 
-exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;
-exports.TextFieldCharacterCountArea = TextField.TextFieldCharacterCountArea;
-exports.TextFieldDescription = TextField.TextFieldDescription;
-exports.TextFieldErrorIcon = TextField.TextFieldErrorIcon;
-exports.TextFieldErrorMessage = TextField.TextFieldErrorMessage;
-exports.TextFieldField = TextField.TextFieldField;
-exports.TextFieldFooter = TextField.TextFieldFooter;
-exports.TextFieldHeader = TextField.TextFieldHeader;
-exports.TextFieldIndicator = TextField.TextFieldIndicator;
 exports.TextFieldInput = TextField.TextFieldInput;
-exports.TextFieldLabel = TextField.TextFieldLabel;
-exports.TextFieldMaxCharacterCount = TextField.TextFieldMaxCharacterCount;
 exports.TextFieldPrefixIcon = TextField.TextFieldPrefixIcon;
 exports.TextFieldPrefixText = TextField.TextFieldPrefixText;
 exports.TextFieldRoot = TextField.TextFieldRoot;
 exports.TextFieldSuffixIcon = TextField.TextFieldSuffixIcon;
 exports.TextFieldSuffixText = TextField.TextFieldSuffixText;
 exports.TextFieldTextarea = TextField.TextFieldTextarea;
+exports.useTextFieldWithGraphemes = useTextFieldWithGraphemes.useTextFieldWithGraphemes;
 exports.TextField = TextField_namespace;

package/lib/components/TextField/index.d.ts

@@ -1,3 +1,4 @@
-export { TextFieldCharacterCount, TextFieldCharacterCountArea, TextFieldDescription, TextFieldErrorIcon, TextFieldErrorMessage, TextFieldField, TextFieldFooter, TextFieldHeader, TextFieldIndicator, TextFieldInput, TextFieldTextarea, TextFieldLabel, TextFieldMaxCharacterCount, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, type TextFieldCharacterCountAreaProps, type TextFieldCharacterCountProps, type TextFieldDescriptionProps, type TextFieldErrorIconProps, type TextFieldErrorMessageProps, type TextFieldFieldProps, type TextFieldFooterProps, type TextFieldHeaderProps, type TextFieldIndicatorProps, type TextFieldInputProps, type TextFieldTextareaProps, type TextFieldLabelProps, type TextFieldMaxCharacterCountProps, type TextFieldPrefixIconProps, type TextFieldPrefixTextProps, type TextFieldRootProps, type TextFieldSuffixIconProps, type TextFieldSuffixTextProps, } from './TextField';
+export { TextFieldRoot, TextFieldInput, TextFieldTextarea, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldSuffixIcon, TextFieldSuffixText, type TextFieldRootProps, type TextFieldInputProps, type TextFieldTextareaProps, type TextFieldPrefixIconProps, type TextFieldPrefixTextProps, type TextFieldSuffixIconProps, type TextFieldSuffixTextProps, } from './TextField';
+export { useTextFieldWithGraphemes, type UseTextFieldWithGraphemesParams, } from './useTextFieldWithGraphemes';
 export * as TextField from './TextField.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/TextField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,0BAA0B,EAC1B,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,gCAAgC,EACrC,KAAK,4BAA4B,EACjC,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,+BAA+B,EACpC,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,yBAAyB,EACzB,KAAK,+BAA+B,GACrC,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAC"}

package/lib/components/TextField/index.js

@@ -1,3 +1,4 @@
-export { TextFieldCharacterCount, TextFieldCharacterCountArea, TextFieldDescription, TextFieldErrorIcon, TextFieldErrorMessage, TextFieldField, TextFieldFooter, TextFieldHeader, TextFieldIndicator, TextFieldInput, TextFieldLabel, TextFieldMaxCharacterCount, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea } from './TextField.js';
+export { TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea } from './TextField.js';
+export { useTextFieldWithGraphemes } from './useTextFieldWithGraphemes.js';
 import * as TextField_namespace from './TextField.namespace.js';
 export { TextField_namespace as TextField };

package/lib/components/TextField/memoize.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function memoize(fn) {
+  const cache = /* @__PURE__ */ new Map();
+  return (arg) => {
+    if (cache.has(arg)) {
+      return cache.get(arg);
+    }
+    const result = fn(arg);
+    cache.set(arg, result);
+    return result;
+  };
+}
+
+exports.memoize = memoize;

package/lib/components/TextField/memoize.d.ts

@@ -0,0 +1,2 @@
+export declare function memoize<Arg, Result>(fn: (arg: Arg) => Result): (arg: Arg) => Result;
+//# sourceMappingURL=memoize.d.ts.map

package/lib/components/TextField/memoize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/memoize.ts"],"names":[],"mappings":"AAAA,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAanF"}

package/lib/components/TextField/memoize.js

@@ -0,0 +1,14 @@
+'use client';
+function memoize(fn) {
+  const cache = /* @__PURE__ */ new Map();
+  return (arg) => {
+    if (cache.has(arg)) {
+      return cache.get(arg);
+    }
+    const result = fn(arg);
+    cache.set(arg, result);
+    return result;
+  };
+}
+
+export { memoize };

package/lib/components/TextField/useTextFieldWithGraphemes.cjs

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const grapheme = require('../../node_modules/unicode-segmenter/grapheme.cjs');
+const memoize = require('./memoize.cjs');
+
+const getGraphemes = (string) => Array.from(grapheme.splitGraphemes(string));
+const memoizedGetGraphemes = memoize.memoize(getGraphemes);
+function useTextFieldWithGraphemes({
+  maxGraphemeCount,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const graphemes = React.useMemo(() => memoizedGetGraphemes(value), [value]);
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      const newGraphemes = memoizedGetGraphemes(newValue);
+      const newSlicedGraphemes = maxGraphemeCount === void 0 ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
+      const newSlicedValue = newSlicedGraphemes.join("");
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.({
+        value: newValue,
+        graphemes: newGraphemes,
+        slicedValue: newSlicedValue,
+        slicedGraphemes: newSlicedGraphemes
+      });
+    },
+    [isControlled, maxGraphemeCount, onValueChange]
+  );
+  return {
+    textFieldRootProps: {
+      value,
+      onValueChange: handleValueChange
+    },
+    counterProps: {
+      current: graphemes.length,
+      max: maxGraphemeCount ?? 0
+    },
+    graphemes
+  };
+}
+
+exports.useTextFieldWithGraphemes = useTextFieldWithGraphemes;

package/lib/components/TextField/useTextFieldWithGraphemes.d.ts

@@ -0,0 +1,23 @@
+export interface UseTextFieldWithGraphemesParams {
+    maxGraphemeCount?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (values: {
+        value: string;
+        graphemes: string[];
+        slicedValue: string;
+        slicedGraphemes: string[];
+    }) => void;
+}
+export declare function useTextFieldWithGraphemes({ maxGraphemeCount, value: controlledValue, defaultValue, onValueChange, }: UseTextFieldWithGraphemesParams): {
+    textFieldRootProps: {
+        value: string;
+        onValueChange: (newValue: string) => void;
+    };
+    counterProps: {
+        current: number;
+        max: number;
+    };
+    graphemes: string[];
+};
+//# sourceMappingURL=useTextFieldWithGraphemes.d.ts.map

package/lib/components/TextField/useTextFieldWithGraphemes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextFieldWithGraphemes.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,EAAE,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,CAAC;KAC3B,KAAK,IAAI,CAAC;CACZ;AAKD,wBAAgB,yBAAyB,CAAC,EACxC,gBAAgB,EAChB,KAAK,EAAE,eAAe,EACtB,YAAiB,EACjB,aAAa,GACd,EAAE,+BAA+B;;;kCAQnB,MAAM;;;;;;;EAgCpB"}