@sytechui/input 2.4.33

package/dist/use-input.d.ts

@@ -0,0 +1,105 @@
+import * as react from 'react';
+import { Ref } from 'react';
+import * as _sytechui_system from '@sytechui/system';
+import { HTMLHeroUIProps, PropGetter } from '@sytechui/system';
+import { InputVariantProps, SlotsToClasses, InputSlots } from '@sytechui/theme';
+import { AriaTextFieldProps } from '@react-types/textfield';
+
+interface Props<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends Omit<HTMLHeroUIProps<"input">, keyof InputVariantProps> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: Ref<T>;
+    /**
+     * Ref to the container DOM node.
+     */
+    baseRef?: Ref<HTMLDivElement>;
+    /**
+     * Ref to the input wrapper DOM node.
+     * This is the element that wraps the input label and the innerWrapper when the labelPlacement="inside"
+     * and the input has start/end content.
+     */
+    wrapperRef?: Ref<HTMLDivElement>;
+    /**
+     * Ref to the input inner wrapper DOM node.
+     * This is the element that wraps the input and the start/end content when passed.
+     */
+    innerWrapperRef?: Ref<HTMLDivElement>;
+    /**
+     * Element to be rendered in the left side of the input.
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Element to be rendered in the right side of the input.
+     * if you pass this prop and the `onClear` prop, the passed element
+     * will have the clear button props and it will be rendered instead of the
+     * default clear button.
+     */
+    endContent?: React.ReactNode;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Input classNames={{
+     *    base:"base-classes",
+     *    label: "label-classes",
+     *    mainWrapper: "main-wrapper-classes",
+     *    inputWrapper: "input-wrapper-classes",
+     *    innerWrapper: "inner-wrapper-classes",
+     *    input: "input-classes",
+     *    clearButton: "clear-button-classes",
+     *    helperWrapper: "helper-wrapper-classes",
+     *    description: "description-classes",
+     *    errorMessage: "error-message-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<InputSlots>;
+    /**
+     * Callback fired when the value is cleared.
+     * if you pass this prop, the clear button will be shown.
+     */
+    onClear?: () => void;
+    /**
+     * React aria onChange event.
+     */
+    onValueChange?: (value: string) => void;
+}
+type UseInputProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> = Props<T> & Omit<AriaTextFieldProps, "onChange"> & InputVariantProps;
+declare function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(originalProps: UseInputProps<T>): {
+    Component: _sytechui_system.As<any>;
+    classNames: SlotsToClasses<"description" | "base" | "label" | "errorMessage" | "input" | "helperWrapper" | "mainWrapper" | "inputWrapper" | "innerWrapper" | "clearButton"> | undefined;
+    domRef: react.RefObject<T>;
+    label: react.ReactNode;
+    description: react.ReactNode;
+    startContent: react.ReactNode;
+    endContent: react.ReactNode;
+    labelPlacement: "inside" | "outside" | "outside-left" | "outside-top";
+    isClearable: boolean | undefined;
+    hasHelper: boolean;
+    hasStartContent: boolean;
+    isLabelOutside: boolean;
+    isOutsideLeft: boolean;
+    isOutsideTop: boolean;
+    isLabelOutsideAsPlaceholder: boolean;
+    shouldLabelBeOutside: boolean;
+    shouldLabelBeInside: boolean;
+    hasPlaceholder: boolean;
+    isInvalid: boolean;
+    errorMessage: react.ReactNode;
+    getBaseProps: PropGetter;
+    getLabelProps: PropGetter;
+    getInputProps: PropGetter;
+    getMainWrapperProps: PropGetter;
+    getInputWrapperProps: PropGetter;
+    getInnerWrapperProps: PropGetter;
+    getHelperWrapperProps: PropGetter;
+    getDescriptionProps: PropGetter;
+    getErrorMessageProps: PropGetter;
+    getClearButtonProps: PropGetter;
+};
+type UseInputReturn = ReturnType<typeof useInput>;
+
+export { type Props, type UseInputProps, type UseInputReturn, useInput };

package/dist/use-input.js

@@ -0,0 +1,458 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-input.ts
+var use_input_exports = {};
+__export(use_input_exports, {
+  useInput: () => useInput
+});
+module.exports = __toCommonJS(use_input_exports);
+var import_system = require("@sytechui/system");
+var import_use_safe_layout_effect = require("@sytechui/use-safe-layout-effect");
+var import_focus = require("@react-aria/focus");
+var import_theme = require("@sytechui/theme");
+var import_react_utils = require("@sytechui/react-utils");
+var import_interactions = require("@react-aria/interactions");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_utils = require("@react-stately/utils");
+var import_react = require("react");
+var import_textfield = require("@react-aria/textfield");
+var import_form = require("@sytechui/form");
+function useInput(originalProps) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const globalContext = (0, import_system.useProviderContext)();
+  const { validationBehavior: formValidationBehavior } = (0, import_form.useSlottedContext)(import_form.FormContext) || {};
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.input.variantKeys);
+  const {
+    ref,
+    as,
+    type,
+    label,
+    baseRef,
+    wrapperRef,
+    description,
+    className,
+    classNames,
+    autoFocus,
+    startContent,
+    endContent,
+    onClear,
+    onChange,
+    validationState,
+    validationBehavior = (_a = formValidationBehavior != null ? formValidationBehavior : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _a : "native",
+    innerWrapperRef: innerWrapperRefProp,
+    onValueChange = () => {
+    },
+    ...otherProps
+  } = props;
+  const handleValueChange = (0, import_react.useCallback)(
+    (value) => {
+      onValueChange(value != null ? value : "");
+    },
+    [onValueChange]
+  );
+  const [isFocusWithin, setFocusWithin] = (0, import_react.useState)(false);
+  const Component = as || "div";
+  const disableAnimation = (_c = (_b = originalProps.disableAnimation) != null ? _b : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _c : false;
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const baseDomRef = (0, import_react_utils.useDOMRef)(baseRef);
+  const inputWrapperRef = (0, import_react_utils.useDOMRef)(wrapperRef);
+  const innerWrapperRef = (0, import_react_utils.useDOMRef)(innerWrapperRefProp);
+  const [inputValue, setInputValue] = (0, import_utils.useControlledState)(
+    props.value,
+    (_d = props.defaultValue) != null ? _d : "",
+    handleValueChange
+  );
+  const isFileTypeInput = type === "file";
+  const hasUploadedFiles = ((_g = (_f = (_e = domRef == null ? void 0 : domRef.current) == null ? void 0 : _e.files) == null ? void 0 : _f.length) != null ? _g : 0) > 0;
+  const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type);
+  const isFilled = !(0, import_shared_utils.isEmpty)(inputValue) || isFilledByDefault || hasUploadedFiles;
+  const isFilledWithin = isFilled || isFocusWithin;
+  const isHiddenType = type === "hidden";
+  const isMultiline = originalProps.isMultiline;
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className, isFilled ? "is-filled" : "");
+  const handleClear = (0, import_react.useCallback)(() => {
+    var _a2;
+    if (isFileTypeInput) {
+      domRef.current.value = "";
+    } else {
+      setInputValue("");
+    }
+    onClear == null ? void 0 : onClear();
+    (_a2 = domRef.current) == null ? void 0 : _a2.focus();
+  }, [setInputValue, onClear, isFileTypeInput]);
+  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
+    if (!domRef.current) return;
+    setInputValue(domRef.current.value);
+  }, [domRef.current]);
+  const {
+    labelProps,
+    inputProps,
+    isInvalid: isAriaInvalid,
+    validationErrors,
+    validationDetails,
+    descriptionProps,
+    errorMessageProps
+  } = (0, import_textfield.useTextField)(
+    {
+      ...originalProps,
+      validationBehavior,
+      autoCapitalize: originalProps.autoCapitalize,
+      value: inputValue,
+      "aria-label": originalProps.label ? originalProps["aria-label"] : (0, import_shared_utils.safeAriaLabel)(originalProps["aria-label"], originalProps.placeholder),
+      inputElementType: isMultiline ? "textarea" : "input",
+      onChange: setInputValue
+    },
+    domRef
+  );
+  if (isFileTypeInput) {
+    delete inputProps.value;
+    delete inputProps.onChange;
+  }
+  const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)({
+    autoFocus,
+    isTextInput: true
+  });
+  const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled: !!(originalProps == null ? void 0 : originalProps.isDisabled) });
+  const { isHovered: isLabelHovered, hoverProps: labelHoverProps } = (0, import_interactions.useHover)({
+    isDisabled: !!(originalProps == null ? void 0 : originalProps.isDisabled)
+  });
+  const { focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible } = (0, import_focus.useFocusRing)();
+  const { focusWithinProps } = (0, import_interactions.useFocusWithin)({
+    onFocusWithinChange: setFocusWithin
+  });
+  const { pressProps: clearPressProps } = (0, import_interactions.usePress)({
+    isDisabled: !!(originalProps == null ? void 0 : originalProps.isDisabled) || !!(originalProps == null ? void 0 : originalProps.isReadOnly),
+    onPress: handleClear
+  });
+  const isInvalid = validationState === "invalid" || isAriaInvalid;
+  const labelPlacement = (0, import_system.useLabelPlacement)({
+    labelPlacement: originalProps.labelPlacement,
+    label
+  });
+  const errorMessage = typeof props.errorMessage === "function" ? props.errorMessage({ isInvalid, validationErrors, validationDetails }) : props.errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" "));
+  const isClearable = !!onClear || originalProps.isClearable;
+  const hasElements = !!label || !!description || !!errorMessage;
+  const hasPlaceholder = !!props.placeholder;
+  const hasLabel = !!label;
+  const hasHelper = !!description || !!errorMessage;
+  const isOutsideLeft = labelPlacement === "outside-left";
+  const isOutsideTop = labelPlacement === "outside-top";
+  const shouldLabelBeOutside = (
+    // label is outside only when some placeholder is there
+    labelPlacement === "outside" || // label is outside regardless of placeholder
+    isOutsideLeft || isOutsideTop
+  );
+  const shouldLabelBeInside = labelPlacement === "inside";
+  const isPlaceholderShown = domRef.current ? (!domRef.current.value || domRef.current.value === "" || !inputValue || inputValue === "") && hasPlaceholder : false;
+  const hasStartContent = !!startContent;
+  const isLabelOutside = shouldLabelBeOutside ? isOutsideLeft || isOutsideTop || hasPlaceholder || labelPlacement === "outside" && hasStartContent : false;
+  const isLabelOutsideAsPlaceholder = labelPlacement === "outside" && !hasPlaceholder && !hasStartContent;
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.input)({
+      ...variantProps,
+      isInvalid,
+      labelPlacement,
+      isClearable,
+      disableAnimation
+    }),
+    [
+      (0, import_shared_utils.objectToDeps)(variantProps),
+      isInvalid,
+      labelPlacement,
+      isClearable,
+      hasStartContent,
+      disableAnimation
+    ]
+  );
+  const getBaseProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ref: baseDomRef,
+        className: slots.base({ class: baseStyles }),
+        "data-slot": "base",
+        "data-filled": (0, import_shared_utils.dataAttr)(
+          isFilled || hasPlaceholder || hasStartContent || isPlaceholderShown || isFileTypeInput
+        ),
+        "data-filled-within": (0, import_shared_utils.dataAttr)(
+          isFilledWithin || hasPlaceholder || hasStartContent || isPlaceholderShown || isFileTypeInput
+        ),
+        "data-focus-within": (0, import_shared_utils.dataAttr)(isFocusWithin),
+        "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
+        "data-readonly": (0, import_shared_utils.dataAttr)(originalProps.isReadOnly),
+        "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
+        "data-hover": (0, import_shared_utils.dataAttr)(isHovered || isLabelHovered),
+        "data-required": (0, import_shared_utils.dataAttr)(originalProps.isRequired),
+        "data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
+        "data-disabled": (0, import_shared_utils.dataAttr)(originalProps.isDisabled),
+        "data-has-elements": (0, import_shared_utils.dataAttr)(hasElements),
+        "data-has-helper": (0, import_shared_utils.dataAttr)(hasHelper),
+        "data-has-label": (0, import_shared_utils.dataAttr)(hasLabel),
+        "data-has-value": (0, import_shared_utils.dataAttr)(!isPlaceholderShown),
+        "data-hidden": (0, import_shared_utils.dataAttr)(isHiddenType),
+        ...focusWithinProps,
+        ...props2
+      };
+    },
+    [
+      slots,
+      baseStyles,
+      isFilled,
+      isFocused,
+      isHovered,
+      isLabelHovered,
+      isInvalid,
+      hasHelper,
+      hasLabel,
+      hasElements,
+      isPlaceholderShown,
+      hasStartContent,
+      isFocusWithin,
+      isFocusVisible,
+      isFilledWithin,
+      hasPlaceholder,
+      focusWithinProps,
+      isHiddenType,
+      originalProps.isReadOnly,
+      originalProps.isRequired,
+      originalProps.isDisabled
+    ]
+  );
+  const getLabelProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        "data-slot": "label",
+        className: slots.label({ class: classNames == null ? void 0 : classNames.label }),
+        ...(0, import_shared_utils.mergeProps)(labelProps, labelHoverProps, props2)
+      };
+    },
+    [slots, isLabelHovered, labelProps, classNames == null ? void 0 : classNames.label]
+  );
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Escape" && inputValue && (isClearable || onClear) && !originalProps.isReadOnly) {
+        setInputValue("");
+        onClear == null ? void 0 : onClear();
+      }
+    },
+    [inputValue, setInputValue, onClear, isClearable, originalProps.isReadOnly]
+  );
+  const getInputProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        "data-slot": "input",
+        "data-filled": (0, import_shared_utils.dataAttr)(isFilled),
+        "data-filled-within": (0, import_shared_utils.dataAttr)(isFilledWithin),
+        "data-has-start-content": (0, import_shared_utils.dataAttr)(hasStartContent),
+        "data-has-end-content": (0, import_shared_utils.dataAttr)(!!endContent),
+        "data-type": type,
+        className: slots.input({
+          class: (0, import_theme.cn)(
+            classNames == null ? void 0 : classNames.input,
+            isFilled ? "is-filled" : "",
+            isMultiline ? "pe-0" : "",
+            type === "password" ? "[&::-ms-reveal]:hidden" : ""
+          )
+        }),
+        ...(0, import_shared_utils.mergeProps)(
+          focusProps,
+          inputProps,
+          (0, import_react_utils.filterDOMProps)(otherProps, {
+            enabled: true,
+            labelable: true,
+            omitEventNames: new Set(Object.keys(inputProps))
+          }),
+          props2
+        ),
+        "aria-readonly": (0, import_shared_utils.dataAttr)(originalProps.isReadOnly),
+        onChange: (0, import_shared_utils.chain)(inputProps.onChange, onChange),
+        onKeyDown: (0, import_shared_utils.chain)(inputProps.onKeyDown, props2.onKeyDown, handleKeyDown),
+        ref: domRef
+      };
+    },
+    [
+      slots,
+      inputValue,
+      focusProps,
+      inputProps,
+      otherProps,
+      isFilled,
+      isFilledWithin,
+      hasStartContent,
+      endContent,
+      classNames == null ? void 0 : classNames.input,
+      originalProps.isReadOnly,
+      originalProps.isRequired,
+      onChange,
+      handleKeyDown
+    ]
+  );
+  const getInputWrapperProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ref: inputWrapperRef,
+        "data-slot": "input-wrapper",
+        "data-hover": (0, import_shared_utils.dataAttr)(isHovered || isLabelHovered),
+        "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
+        "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
+        className: slots.inputWrapper({
+          class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.inputWrapper, isFilled ? "is-filled" : "")
+        }),
+        ...(0, import_shared_utils.mergeProps)(props2, hoverProps),
+        onClick: (e) => {
+          if (domRef.current && e.currentTarget === e.target) {
+            domRef.current.focus();
+          }
+        },
+        style: {
+          cursor: "text",
+          ...props2.style
+        }
+      };
+    },
+    [
+      slots,
+      isHovered,
+      isLabelHovered,
+      isFocusVisible,
+      isFocused,
+      inputValue,
+      classNames == null ? void 0 : classNames.inputWrapper
+    ]
+  );
+  const getInnerWrapperProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        ref: innerWrapperRef,
+        "data-slot": "inner-wrapper",
+        onClick: (e) => {
+          if (domRef.current && e.currentTarget === e.target) {
+            domRef.current.focus();
+          }
+        },
+        className: slots.innerWrapper({
+          class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.innerWrapper, props2 == null ? void 0 : props2.className)
+        })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.innerWrapper]
+  );
+  const getMainWrapperProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        "data-slot": "main-wrapper",
+        className: slots.mainWrapper({
+          class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.mainWrapper, props2 == null ? void 0 : props2.className)
+        })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.mainWrapper]
+  );
+  const getHelperWrapperProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        "data-slot": "helper-wrapper",
+        className: slots.helperWrapper({
+          class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.helperWrapper, props2 == null ? void 0 : props2.className)
+        })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.helperWrapper]
+  );
+  const getDescriptionProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        ...descriptionProps,
+        "data-slot": "description",
+        className: slots.description({ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.description, props2 == null ? void 0 : props2.className) })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.description]
+  );
+  const getErrorMessageProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        ...errorMessageProps,
+        "data-slot": "error-message",
+        className: slots.errorMessage({ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.errorMessage, props2 == null ? void 0 : props2.className) })
+      };
+    },
+    [slots, errorMessageProps, classNames == null ? void 0 : classNames.errorMessage]
+  );
+  const getClearButtonProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        type: "button",
+        tabIndex: -1,
+        disabled: originalProps.isDisabled,
+        "aria-label": "clear input",
+        "data-slot": "clear-button",
+        "data-focus-visible": (0, import_shared_utils.dataAttr)(isClearButtonFocusVisible),
+        className: slots.clearButton({
+          class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.clearButton, props2 == null ? void 0 : props2.className)
+        }),
+        ...(0, import_shared_utils.mergeProps)(clearPressProps, clearFocusProps)
+      };
+    },
+    [slots, isClearButtonFocusVisible, clearPressProps, clearFocusProps, classNames == null ? void 0 : classNames.clearButton]
+  );
+  return {
+    Component,
+    classNames,
+    domRef,
+    label,
+    description,
+    startContent,
+    endContent,
+    labelPlacement,
+    isClearable,
+    hasHelper,
+    hasStartContent,
+    isLabelOutside,
+    isOutsideLeft,
+    isOutsideTop,
+    isLabelOutsideAsPlaceholder,
+    shouldLabelBeOutside,
+    shouldLabelBeInside,
+    hasPlaceholder,
+    isInvalid,
+    errorMessage,
+    getBaseProps,
+    getLabelProps,
+    getInputProps,
+    getMainWrapperProps,
+    getInputWrapperProps,
+    getInnerWrapperProps,
+    getHelperWrapperProps,
+    getDescriptionProps,
+    getErrorMessageProps,
+    getClearButtonProps
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useInput
+});

package/dist/use-input.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useInput
+} from "./chunk-6SGLJYRO.mjs";
+export {
+  useInput
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@sytechui/input",
+  "version": "2.4.33",
+  "description": "The input component is designed for capturing user input within a text field.",
+  "keywords": [
+    "input"
+  ],
+  "author": "HeroUI <support@heroui.com>",
+  "homepage": "https://heroui.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heroui-inc/heroui.git",
+    "directory": "packages/components/input"
+  },
+  "bugs": {
+    "url": "https://github.com/heroui-inc/heroui/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@sytechui/theme": ">=2.4.24",
+    "@sytechui/system": ">=2.4.18"
+  },
+  "dependencies": {
+    "@react-aria/focus": "3.21.5",
+    "@react-aria/interactions": "3.27.1",
+    "@react-aria/textfield": "3.18.5",
+    "@react-stately/utils": "3.11.0",
+    "@react-types/shared": "3.33.1",
+    "@react-types/textfield": "3.12.8",
+    "react-textarea-autosize": "^8.5.3",
+    "@sytechui/react-utils": "2.1.14",
+    "@sytechui/form": "2.1.32",
+    "@sytechui/shared-utils": "2.1.12",
+    "@sytechui/shared-icons": "2.1.10",
+    "@sytechui/use-safe-layout-effect": "2.1.8"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}