@1money/component-ui 0.0.1

package/es/components/Input/TextArea/TextArea.js

@@ -0,0 +1,93 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useId } from 'react';
+import { useControlledState, useEventCallback } from '@1money/hooks';
+import { TypographyBody } from '../../Typography';
+import { default as classnames, joinCls } from '../../../utils/classnames';
+import { FieldShell } from '../FieldShell';
+import { useSyncRef } from '../useSyncRef';
+import { INPUT_COUNT_COLOR, INPUT_COUNT_SIZE } from '../constants';
+export var InputTextArea = function InputTextArea(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'input' : _props$prefixCls,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'default' : _props$status,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    info = props.info,
+    errorMsg = props.errorMsg,
+    required = props.required,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 4 : _props$rows,
+    _props$showCount = props.showCount,
+    showCount = _props$showCount === void 0 ? false : _props$showCount,
+    maxLength = props.maxLength,
+    value = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
+    onChange = props.onChange,
+    ref = props.ref,
+    externalId = props.id,
+    rest = __rest(props, ["className", "prefixCls", "size", "status", "disabled", "label", "info", "errorMsg", "required", "rows", "showCount", "maxLength", "value", "defaultValue", "onChange", "ref", "id"]);
+  var autoId = useId();
+  var inputId = externalId !== null && externalId !== void 0 ? externalId : autoId;
+  var classes = classnames(prefixCls);
+  var _useSyncRef = useSyncRef(ref),
+    _useSyncRef2 = _slicedToArray(_useSyncRef, 2),
+    syncRef = _useSyncRef2[1];
+  var _useControlledState = useControlledState(defaultValue, value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    innerValue = _useControlledState2[0],
+    setInnerValue = _useControlledState2[1];
+  var handleChange = useEventCallback(function (event) {
+    var nextValue = event.target.value;
+    setInnerValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+  });
+  return _jsx(FieldShell, {
+    className: className,
+    prefixCls: prefixCls,
+    size: size,
+    status: status,
+    disabled: disabled,
+    label: label,
+    info: info,
+    errorMsg: errorMsg,
+    required: required,
+    inputId: inputId,
+    children: _jsxs("div", {
+      className: classes('textarea-wrapper', joinCls(disabled && classes('control-disabled'))),
+      children: [_jsx("textarea", Object.assign({}, rest, {
+        ref: syncRef,
+        id: inputId,
+        className: classes('textarea'),
+        disabled: disabled,
+        rows: rows,
+        maxLength: maxLength,
+        value: innerValue,
+        onChange: handleChange
+      })), showCount && _jsx(TypographyBody, {
+        as: "div",
+        className: classes('count'),
+        size: INPUT_COUNT_SIZE,
+        color: INPUT_COUNT_COLOR,
+        children: maxLength ? "".concat(innerValue.length, "/").concat(maxLength) : "".concat(innerValue.length)
+      })]
+    })
+  });
+};
+export default /*#__PURE__*/memo(InputTextArea);
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvSW5wdXQvVGV4dEFyZWEvVGV4dEFyZWEuanMiLCJjb21wb25lbnRzL0lucHV0L3NyYy9jb21wb25lbnRzL0lucHV0L1RleHRBcmVhL1RleHRBcmVhLnRzeCJdLCJuYW1lcyI6WyJfX3Jlc3QiLCJzIiwiZSIsInQiLCJwIiwiT2JqZWN0IiwicHJvdG90eXBlIiwiaGFzT3duUHJvcGVydHkiLCJjYWxsIiwiaW5kZXhPZiIsImdldE93blByb3BlcnR5U3ltYm9scyIsImkiLCJsZW5ndGgiLCJwcm9wZXJ0eUlzRW51bWVyYWJsZSIsImpzeCIsIl9qc3giLCJqc3hzIiwiX2pzeHMiLCJtZW1vIiwidXNlSWQiLCJ1c2VDb250cm9sbGVkU3RhdGUiLCJ1c2VFdmVudENhbGxiYWNrIiwiVHlwb2dyYXBoeUJvZHkiLCJkZWZhdWx0IiwiY2xhc3NuYW1lcyIsImpvaW5DbHMiLCJGaWVsZFNoZWxsIiwidXNlU3luY1JlZiIsIklOUFVUX0NPVU5UX0NPTE9SIiwiSU5QVVRfQ09VTlRfU0laRSIsIklucHV0VGV4dEFyZWEiLCJwcm9wcyIsIl9wcm9wcyRjbGFzc05hbWUiLCJjbGFzc05hbWUiLCJfcHJvcHMkcHJlZml4Q2xzIiwicHJlZml4Q2xzIiwiX3Byb3BzJHNpemUiLCJzaXplIiwiX3Byb3BzJHN0YXR1cyIsInN0YXR1cyIsIl9wcm9wcyRkaXNhYmxlZCIsImRpc2FibGVkIiwibGFiZWwiLCJpbmZvIiwiZXJyb3JNc2ciLCJyZXF1aXJlZCIsIl9wcm9wcyRyb3dzIiwicm93cyIsIl9wcm9wcyRzaG93Q291bnQiLCJzaG93Q291bnQiLCJtYXhMZW5ndGgiLCJ2YWx1ZSIsIl9wcm9wcyRkZWZhdWx0VmFsdWUiLCJkZWZhdWx0VmFsdWUiLCJvbkNoYW5nZSIsInJlZiIsImV4dGVybmFsSWQiLCJpZCIsInJlc3QiLCJhdXRvSWQiLCJpbnB1dElkIiwiY2xhc3NlcyIsIl91c2VTeW5jUmVmIiwiX3VzZVN5bmNSZWYyIiwiX3NsaWNlZFRvQXJyYXkiLCJzeW5jUmVmIiwiX3VzZUNvbnRyb2xsZWRTdGF0ZSIsIl91c2VDb250cm9sbGVkU3RhdGUyIiwiaW5uZXJWYWx1ZSIsInNldElubmVyVmFsdWUiLCJoYW5kbGVDaGFuZ2UiLCJldmVudCIsIm5leHRWYWx1ZSIsInRhcmdldCIsImNoaWxkcmVuIiwiYXNzaWduIiwiYXMiLCJjb2xvciIsImNvbmNhdCJdLCJtYXBwaW5ncyI6IjtBQUFBLElBQUlBLE1BQU0sR0FBSSxJQUFJLElBQUksSUFBSSxDQUFDQSxNQUFNLElBQUssVUFBVUMsQ0FBQyxFQUFFQyxDQUFDLEVBQUU7RUFDbEQsSUFBSUMsQ0FBQyxHQUFHLENBQUMsQ0FBQztFQUNWLEtBQUssSUFBSUMsQ0FBQyxJQUFJSCxDQUFDLEVBQUUsSUFBSUksTUFBTSxDQUFDQyxTQUFTLENBQUNDLGNBQWMsQ0FBQ0MsSUFBSSxDQUFDUCxDQUFDLEVBQUVHLENBQUMsQ0FBQyxJQUFJRixDQUFDLENBQUNPLE9BQU8sQ0FBQ0wsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUMvRUQsQ0FBQyxDQUFDQyxDQUFDLENBQUMsR0FBR0gsQ0FBQyxDQUFDRyxDQUFDLENBQUM7RUFDZixJQUFJSCxDQUFDLElBQUksSUFBSSxJQUFJLE9BQU9JLE1BQU0sQ0FBQ0sscUJBQXFCLEtBQUssVUFBVSxFQUMvRCxLQUFLLElBQUlDLENBQUMsR0FBRyxDQUFDLEVBQUVQLENBQUMsR0FBR0MsTUFBTSxDQUFDSyxxQkFBcUIsQ0FBQ1QsQ0FBQyxDQUFDLEVBQUVVLENBQUMsR0FBR1AsQ0FBQyxDQUFDUSxNQUFNLEVBQUVELENBQUMsRUFBRSxFQUFFO0lBQ3BFLElBQUlULENBQUMsQ0FBQ08sT0FBTyxDQUFDTCxDQUFDLENBQUNPLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxJQUFJTixNQUFNLENBQUNDLFNBQVMsQ0FBQ08sb0JBQW9CLENBQUNMLElBQUksQ0FBQ1AsQ0FBQyxFQUFFRyxDQUFDLENBQUNPLENBQUMsQ0FBQyxDQUFDLEVBQzFFUixDQUFDLENBQUNDLENBQUMsQ0FBQ08sQ0FBQyxDQUFDLENBQUMsR0FBR1YsQ0FBQyxDQUFDRyxDQUFDLENBQUNPLENBQUMsQ0FBQyxDQUFDO0VBQ3pCO0VBQ0osT0FBT1IsQ0FBQztBQUNaLENBQUM7QUFDRCxTQUFTVyxHQUFHLElBQUlDLElBQUksRUFBRUMsSUFBSSxJQUFJQyxLQUFLLFFBQVEsbUJBQW1CO0FDWDlELFNBQVNDLElBQUksRUFBRUMsS0FBSyxRQUFRLE9BQU87QUFDbkMsU0FBU0Msa0JBQWtCLEVBQUVDLGdCQUFnQixRQUFRLGVBQWU7QUFDcEUsU0FBU0MsY0FBYyxRQUFRLGtCQUFrQjtBQUNqRCxTQUFTQyxPQUFPLElBQUlDLFVBQVUsRUFBRUMsT0FBTyxRQUFRLDJCQUEyQjtBQUMxRSxTQUFTQyxVQUFVLFFBQVEsZUFBZTtBQUMxQyxTQUFTQyxVQUFVLFFBQVEsZUFBZTtBQUMxQyxTQUFTQyxpQkFBaUIsRUFBRUMsZ0JBQWdCLFFBQVEsY0FBYztBQUlsRSxPQUFPLElBQU1DLGFBQWEsR0FBMkIsU0FBeENBLGFBQWFBLENBQTRCQyxLQUFLLEVBQUk7RUFDN0QsSUFBQUMsZ0JBQUEsR0FtQklELEtBQUssQ0FsQlBFLFNBQVM7SUFBVEEsU0FBUyxHQUFBRCxnQkFBQSxjQUFHLEVBQUUsR0FBQUEsZ0JBQUE7SUFBQUUsZ0JBQUEsR0FrQlpILEtBQUssQ0FqQlBJLFNBQVM7SUFBVEEsU0FBUyxHQUFBRCxnQkFBQSxjQUFHLE9BQU8sR0FBQUEsZ0JBQUE7SUFBQUUsV0FBQSxHQWlCakJMLEtBQUssQ0FoQlBNLElBQUk7SUFBSkEsSUFBSSxHQUFBRCxXQUFBLGNBQUcsT0FBTyxHQUFBQSxXQUFBO0lBQUFFLGFBQUEsR0FnQlpQLEtBQUssQ0FmUFEsTUFBTTtJQUFOQSxNQUFNLEdBQUFELGFBQUEsY0FBRyxTQUFTLEdBQUFBLGFBQUE7SUFBQUUsZUFBQSxHQWVoQlQsS0FBSyxDQWRQVSxRQUFRO0lBQVJBLFFBQVEsR0FBQUQsZUFBQSxjQUFHLEtBQUssR0FBQUEsZUFBQTtJQUNoQkUsS0FBSyxHQWFIWCxLQUFLLENBYlBXLEtBQUs7SUFDTEMsSUFBSSxHQVlGWixLQUFLLENBWlBZLElBQUk7SUFDSkMsUUFBUSxHQVdOYixLQUFLLENBWFBhLFFBQVE7SUFDUkMsUUFBUSxHQVVOZCxLQUFLLENBVlBjLFFBQVE7SUFBQUMsV0FBQSxHQVVOZixLQUFLLENBVFBnQixJQUFJO0lBQUpBLElBQUksR0FBQUQsV0FBQSxjQUFHLENBQUMsR0FBQUEsV0FBQTtJQUFBRSxnQkFBQSxHQVNOakIsS0FBSyxDQVJQa0IsU0FBUztJQUFUQSxTQUFTLEdBQUFELGdCQUFBLGNBQUcsS0FBSyxHQUFBQSxnQkFBQTtJQUNqQkUsU0FBUyxHQU9QbkIsS0FBSyxDQVBQbUIsU0FBUztJQUNUQyxLQUFLLEdBTUhwQixLQUFLLENBTlBvQixLQUFLO0lBQUFDLG1CQUFBLEdBTUhyQixLQUFLLENBTFBzQixZQUFZO0lBQVpBLFlBQVksR0FBQUQsbUJBQUEsY0FBRyxFQUFFLEdBQUFBLG1CQUFBO0lBQ2pCRSxRQUFRLEdBSU52QixLQUFLLENBSlB1QixRQUFRO0lBQ1JDLEdBQUcsR0FHRHhCLEtBQUssQ0FIUHdCLEdBQUc7SUFDQ0MsVUFBVSxHQUVaekIsS0FBSyxDQUZQMEIsRUFBRTtJQUNDQyxJQUFJLEdBQUExRCxNQUFBLENBQ0wrQixLQUFLLEVBbkJILENBQUEsV0FBQSxFQUFBLFdBQUEsRUFBQSxNQUFBLEVBQUEsUUFBQSxFQUFBLFVBQUEsRUFBQSxPQUFBLEVBQUEsTUFBQSxFQUFBLFVBQUEsRUFBQSxVQUFBLEVBQUEsTUFBQSxFQUFBLFdBQUEsRUFBQSxXQUFBLEVBQUEsT0FBQSxFQUFBLGNBQUEsRUFBQSxVQUFBLEVBQUEsS0FBQSxFQUFBLElBQUEsQ0FtQkwsQ0FBUTtFQUVULElBQU00QixNQUFNLEdBQUd4QyxLQUFLLENBQUEsQ0FBRTtFQUN0QixJQUFNeUMsT0FBTyxHQUFHSixVQUFVLEtBQUEsSUFBQSxJQUFWQSxVQUFVLEtBQUEsS0FBQSxDQUFBLEdBQVZBLFVBQVUsR0FBSUcsTUFBTTtFQUNwQyxJQUFNRSxPQUFPLEdBQUdyQyxVQUFVLENBQUNXLFNBQVMsQ0FBQztFQUNyQyxJQUFBMkIsV0FBQSxHQUFvQm5DLFVBQVUsQ0FBc0I0QixHQUFHLENBQUM7SUFBQVEsWUFBQSxHQUFBQyxjQUFBLENBQUFGLFdBQUE7SUFBL0NHLE9BQU8sR0FBQUYsWUFBQTtFQUNoQixJQUFBRyxtQkFBQSxHQUFvQzlDLGtCQUFrQixDQUFDaUMsWUFBWSxFQUFFRixLQUFLLENBQUM7SUFBQWdCLG9CQUFBLEdBQUFILGNBQUEsQ0FBQUUsbUJBQUE7SUFBcEVFLFVBQVUsR0FBQUQsb0JBQUE7SUFBRUUsYUFBYSxHQUFBRixvQkFBQTtFQUVoQyxJQUFNRyxZQUFZLEdBQUdqRCxnQkFBZ0IsQ0FBQyxVQUFDa0QsS0FBdUMsRUFBSTtJQUNoRixJQUFNQyxTQUFTLEdBQUdELEtBQUssQ0FBQ0UsTUFBTSxDQUFDdEIsS0FBSztJQUNwQ2tCLGFBQWEsQ0FBQ0csU0FBUyxDQUFDO0lBQ3hCbEIsUUFBUSxLQUFBLElBQUEsSUFBUkEsUUFBUSxLQUFBLEtBQUEsQ0FBQSxHQUFBLEtBQUEsQ0FBQSxHQUFSQSxRQUFRLENBQUdrQixTQUFTLEVBQUVELEtBQUssQ0FBQztFQUM5QixDQUFDLENBQUM7RUFFRixPQUNFeEQsSUFBQSxDQUFDVyxVQUFVLEVBQUE7SUFDVE8sU0FBUyxFQUFFQSxTQUFTO0lBQ3BCRSxTQUFTLEVBQUVBLFNBQVM7SUFDcEJFLElBQUksRUFBRUEsSUFBSTtJQUNWRSxNQUFNLEVBQUVBLE1BQU07SUFDZEUsUUFBUSxFQUFFQSxRQUFRO0lBQ2xCQyxLQUFLLEVBQUVBLEtBQUs7SUFDWkMsSUFBSSxFQUFFQSxJQUFJO0lBQ1ZDLFFBQVEsRUFBRUEsUUFBUTtJQUNsQkMsUUFBUSxFQUFFQSxRQUFRO0lBQ2xCZSxPQUFPLEVBQUVBLE9BQU87SUFBQWMsUUFBQSxFQUVoQnpELEtBQUEsQ0FBQSxLQUFBLEVBQUE7TUFBS2dCLFNBQVMsRUFBRTRCLE9BQU8sQ0FBQyxrQkFBa0IsRUFBRXBDLE9BQU8sQ0FBQ2dCLFFBQVEsSUFBSW9CLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUM7TUFBQWEsUUFBQSxFQUFBLENBQzNGM0QsSUFBQSxDQUFBLFVBQUEsRUFBQVYsTUFBQSxDQUFBc0UsTUFBQSxDQUFBLENBQUEsQ0FBQSxFQUNNakIsSUFBSSxFQUFBO1FBQ1JILEdBQUcsRUFBRVUsT0FBTztRQUNaUixFQUFFLEVBQUVHLE9BQU87UUFDWDNCLFNBQVMsRUFBRTRCLE9BQU8sQ0FBQyxVQUFVLENBQUM7UUFDOUJwQixRQUFRLEVBQUVBLFFBQVE7UUFDbEJNLElBQUksRUFBRUEsSUFBSTtRQUNWRyxTQUFTLEVBQUVBLFNBQVM7UUFDcEJDLEtBQUssRUFBRWlCLFVBQVU7UUFDakJkLFFBQVEsRUFBRWdCO01BQVksQ0FBQSxDQUFBLENBQ3RCLEVBQ0RyQixTQUFTLElBQ1JsQyxJQUFBLENBQUNPLGNBQWMsRUFBQTtRQUFDc0QsRUFBRSxFQUFDLEtBQUs7UUFBQzNDLFNBQVMsRUFBRTRCLE9BQU8sQ0FBQyxPQUFPLENBQUM7UUFBRXhCLElBQUksRUFBRVIsZ0JBQWdCO1FBQUVnRCxLQUFLLEVBQUVqRCxpQkFBaUI7UUFBQThDLFFBQUEsRUFDbkd4QixTQUFTLE1BQUE0QixNQUFBLENBQU1WLFVBQVUsQ0FBQ3hELE1BQU0sT0FBQWtFLE1BQUEsQ0FBSTVCLFNBQVMsT0FBQTRCLE1BQUEsQ0FBUVYsVUFBVSxDQUFDeEQsTUFBTTtNQUFFLENBQUEsQ0FFNUU7SUFBQSxDQUFBO0VBQ0csQ0FBQSxDQUNLO0FBRWpCLENBQUM7QUFFRCw0QkFBZU0sSUFBSSxDQUFDWSxhQUFhLENBQUMiLCJmaWxlIjoiY29tcG9uZW50cy9JbnB1dC9UZXh0QXJlYS9UZXh0QXJlYS5qcyIsInNvdXJjZXNDb250ZW50IjpbInZhciBfX3Jlc3QgPSAodGhpcyAmJiB0aGlzLl9fcmVzdCkgfHwgZnVuY3Rpb24gKHMsIGUpIHtcbiAgICB2YXIgdCA9IHt9O1xuICAgIGZvciAodmFyIHAgaW4gcykgaWYgKE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChzLCBwKSAmJiBlLmluZGV4T2YocCkgPCAwKVxuICAgICAgICB0W3BdID0gc1twXTtcbiAgICBpZiAocyAhPSBudWxsICYmIHR5cGVvZiBPYmplY3QuZ2V0T3duUHJvcGVydHlTeW1ib2xzID09PSBcImZ1bmN0aW9uXCIpXG4gICAgICAgIGZvciAodmFyIGkgPSAwLCBwID0gT2JqZWN0LmdldE93blByb3BlcnR5U3ltYm9scyhzKTsgaSA8IHAubGVuZ3RoOyBpKyspIHtcbiAgICAgICAgICAgIGlmIChlLmluZGV4T2YocFtpXSkgPCAwICYmIE9iamVjdC5wcm90b3R5cGUucHJvcGVydHlJc0VudW1lcmFibGUuY2FsbChzLCBwW2ldKSlcbiAgICAgICAgICAgICAgICB0W3BbaV1dID0gc1twW2ldXTtcbiAgICAgICAgfVxuICAgIHJldHVybiB0O1xufTtcbmltcG9ydCB7IGpzeCBhcyBfanN4LCBqc3hzIGFzIF9qc3hzIH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XG5pbXBvcnQgeyBtZW1vLCB1c2VJZCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUNvbnRyb2xsZWRTdGF0ZSwgdXNlRXZlbnRDYWxsYmFjayB9IGZyb20gJ0AxbW9uZXkvaG9va3MnO1xuaW1wb3J0IHsgVHlwb2dyYXBoeUJvZHkgfSBmcm9tICcuLi8uLi9UeXBvZ3JhcGh5JztcbmltcG9ydCB7IGRlZmF1bHQgYXMgY2xhc3NuYW1lcywgam9pbkNscyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2NsYXNzbmFtZXMnO1xuaW1wb3J0IHsgRmllbGRTaGVsbCB9IGZyb20gJy4uL0ZpZWxkU2hlbGwnO1xuaW1wb3J0IHsgdXNlU3luY1JlZiB9IGZyb20gJy4uL3VzZVN5bmNSZWYnO1xuaW1wb3J0IHsgSU5QVVRfQ09VTlRfQ09MT1IsIElOUFVUX0NPVU5UX1NJWkUgfSBmcm9tICcuLi9jb25zdGFudHMnO1xuZXhwb3J0IGNvbnN0IElucHV0VGV4dEFyZWEgPSAocHJvcHMpID0+IHtcbiAgICBjb25zdCB7IGNsYXNzTmFtZSA9ICcnLCBwcmVmaXhDbHMgPSAnaW5wdXQnLCBzaXplID0gJ2xhcmdlJywgc3RhdHVzID0gJ2RlZmF1bHQnLCBkaXNhYmxlZCA9IGZhbHNlLCBsYWJlbCwgaW5mbywgZXJyb3JNc2csIHJlcXVpcmVkLCByb3dzID0gNCwgc2hvd0NvdW50ID0gZmFsc2UsIG1heExlbmd0aCwgdmFsdWUsIGRlZmF1bHRWYWx1ZSA9ICcnLCBvbkNoYW5nZSwgcmVmLCBpZDogZXh0ZXJuYWxJZCB9ID0gcHJvcHMsIHJlc3QgPSBfX3Jlc3QocHJvcHMsIFtcImNsYXNzTmFtZVwiLCBcInByZWZpeENsc1wiLCBcInNpemVcIiwgXCJzdGF0dXNcIiwgXCJkaXNhYmxlZFwiLCBcImxhYmVsXCIsIFwiaW5mb1wiLCBcImVycm9yTXNnXCIsIFwicmVxdWlyZWRcIiwgXCJyb3dzXCIsIFwic2hvd0NvdW50XCIsIFwibWF4TGVuZ3RoXCIsIFwidmFsdWVcIiwgXCJkZWZhdWx0VmFsdWVcIiwgXCJvbkNoYW5nZVwiLCBcInJlZlwiLCBcImlkXCJdKTtcbiAgICBjb25zdCBhdXRvSWQgPSB1c2VJZCgpO1xuICAgIGNvbnN0IGlucHV0SWQgPSBleHRlcm5hbElkICE9PSBudWxsICYmIGV4dGVybmFsSWQgIT09IHZvaWQgMCA/IGV4dGVybmFsSWQgOiBhdXRvSWQ7XG4gICAgY29uc3QgY2xhc3NlcyA9IGNsYXNzbmFtZXMocHJlZml4Q2xzKTtcbiAgICBjb25zdCBbLCBzeW5jUmVmXSA9IHVzZVN5bmNSZWYocmVmKTtcbiAgICBjb25zdCBbaW5uZXJWYWx1ZSwgc2V0SW5uZXJWYWx1ZV0gPSB1c2VDb250cm9sbGVkU3RhdGUoZGVmYXVsdFZhbHVlLCB2YWx1ZSk7XG4gICAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlRXZlbnRDYWxsYmFjaygoZXZlbnQpID0+IHtcbiAgICAgICAgY29uc3QgbmV4dFZhbHVlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xuICAgICAgICBzZXRJbm5lclZhbHVlKG5leHRWYWx1ZSk7XG4gICAgICAgIG9uQ2hhbmdlID09PSBudWxsIHx8IG9uQ2hhbmdlID09PSB2b2lkIDAgPyB2b2lkIDAgOiBvbkNoYW5nZShuZXh0VmFsdWUsIGV2ZW50KTtcbiAgICB9KTtcbiAgICByZXR1cm4gKF9qc3goRmllbGRTaGVsbCwgeyBjbGFzc05hbWU6IGNsYXNzTmFtZSwgcHJlZml4Q2xzOiBwcmVmaXhDbHMsIHNpemU6IHNpemUsIHN0YXR1czogc3RhdHVzLCBkaXNhYmxlZDogZGlzYWJsZWQsIGxhYmVsOiBsYWJlbCwgaW5mbzogaW5mbywgZXJyb3JNc2c6IGVycm9yTXNnLCByZXF1aXJlZDogcmVxdWlyZWQsIGlucHV0SWQ6IGlucHV0SWQsIGNoaWxkcmVuOiBfanN4cyhcImRpdlwiLCB7IGNsYXNzTmFtZTogY2xhc3NlcygndGV4dGFyZWEtd3JhcHBlcicsIGpvaW5DbHMoZGlzYWJsZWQgJiYgY2xhc3NlcygnY29udHJvbC1kaXNhYmxlZCcpKSksIGNoaWxkcmVuOiBbX2pzeChcInRleHRhcmVhXCIsIE9iamVjdC5hc3NpZ24oe30sIHJlc3QsIHsgcmVmOiBzeW5jUmVmLCBpZDogaW5wdXRJZCwgY2xhc3NOYW1lOiBjbGFzc2VzKCd0ZXh0YXJlYScpLCBkaXNhYmxlZDogZGlzYWJsZWQsIHJvd3M6IHJvd3MsIG1heExlbmd0aDogbWF4TGVuZ3RoLCB2YWx1ZTogaW5uZXJWYWx1ZSwgb25DaGFuZ2U6IGhhbmRsZUNoYW5nZSB9KSksIHNob3dDb3VudCAmJiAoX2pzeChUeXBvZ3JhcGh5Qm9keSwgeyBhczogXCJkaXZcIiwgY2xhc3NOYW1lOiBjbGFzc2VzKCdjb3VudCcpLCBzaXplOiBJTlBVVF9DT1VOVF9TSVpFLCBjb2xvcjogSU5QVVRfQ09VTlRfQ09MT1IsIGNoaWxkcmVuOiBtYXhMZW5ndGggPyBgJHtpbm5lclZhbHVlLmxlbmd0aH0vJHttYXhMZW5ndGh9YCA6IGAke2lubmVyVmFsdWUubGVuZ3RofWAgfSkpXSB9KSB9KSk7XG59O1xuZXhwb3J0IGRlZmF1bHQgbWVtbyhJbnB1dFRleHRBcmVhKTsiLG51bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/Input/TextArea/TextArea.scss

@@ -0,0 +1,87 @@
+@use '@/styles/api' as theme;
+
+$component: 'input';
+
+.#{theme.$prefix}-#{$component} {
+  &-textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: theme.spacing(gap, 200);
+    align-items: stretch;
+    width: 100%;
+    min-height: 120px;
+    padding: theme.spacing(component-padding, 300) theme.spacing(component-padding, 400);
+    background-color: theme.palette(bg, 'default-secondary');
+    border: 1px solid theme.palette(border, 'default');
+    border-radius: theme.shape(300);
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease,
+      background-color 0.2s ease;
+  }
+
+  &-textarea-wrapper:hover {
+    border-color: theme.palette(border, 'default-tertiary');
+  }
+
+  &-textarea-wrapper:focus-within {
+    border-color: theme.palette(border, 'brand');
+    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
+  }
+
+  &-textarea {
+    @include theme.typography(body, lg);
+
+    flex: 1 1 auto;
+    width: 100%;
+    color: theme.palette(text, 'default');
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+
+    &::placeholder {
+      color: theme.palette(text, 'neutral-secondary');
+    }
+
+    &:not(:placeholder-shown) {
+      font-weight: 500;
+    }
+  }
+
+  &-count {
+    text-align: right;
+  }
+
+  // ── Size ──
+  &-small &-textarea-wrapper {
+    min-height: theme.sizing(component-height, 'lg');
+    padding: theme.spacing(component-padding, 200);
+    border-radius: theme.shape(200);
+  }
+
+  // ── Status ──
+  &-error &-textarea-wrapper {
+    border-color: theme.palette(border, 'danger');
+    box-shadow: 0 0 0 1px theme.palette(border, 'danger');
+  }
+
+  &-warning &-textarea-wrapper {
+    border-color: theme.palette(border, 'warning');
+  }
+
+  &-success &-textarea-wrapper {
+    border-color: theme.palette(border, 'positive');
+  }
+
+  // ── Disabled ──
+  &-disabled &-textarea-wrapper {
+    background-color: theme.palette(bg, 'disabled');
+    border-color: theme.palette(border, 'default');
+    cursor: not-allowed;
+  }
+
+  &-disabled &-textarea {
+    color: theme.palette(text, 'disabled');
+  }
+}

package/es/components/Input/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { InputTextArea } from './TextArea';
+export { default } from './TextArea';

package/es/components/Input/TextArea/index.js

@@ -0,0 +1,3 @@
+export { InputTextArea } from './TextArea';
+export { default } from './TextArea';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvSW5wdXQvc3JjL2NvbXBvbmVudHMvSW5wdXQvVGV4dEFyZWEvaW5kZXgudHMiXSwibmFtZXMiOlsiSW5wdXRUZXh0QXJlYSIsImRlZmF1bHQiXSwibWFwcGluZ3MiOiJBQUFBLFNBQVNBLGFBQWEsUUFBUSxZQUFZO0FBQzFDLFNBQVNDLE9BQU8sUUFBUSxZQUFZIiwiZmlsZSI6ImNvbXBvbmVudHMvSW5wdXQvVGV4dEFyZWEvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/Input/Trade/Trade.css

@@ -0,0 +1 @@
+.om-react-ui-input-trade{display:flex;flex-direction:column;gap:var(--om-spacing-200,8px);width:100%}.om-react-ui-input-trade-main{padding-bottom:var(--om-spacing-200,8px);border-bottom:1px solid var(--om-border-default,#d1d2d2);transition:border-color .2s ease}.om-react-ui-input-trade-value-line{display:flex;gap:var(--om-spacing-200,8px);align-items:center}.om-react-ui-input-trade-symbol{font-size:var(--om-display-lg-font-size);font-family:var(--om-display-lg-font-family);line-height:var(--om-display-lg-line-height);letter-spacing:var(--om-display-lg-letter-spacing);font-weight:var(--om-display-lg-font-weight);flex-shrink:0;color:var(--om-text-brand,#073387)}.om-react-ui-input-trade-input-wrapper{display:flex;flex:1 1 auto;align-items:center;min-width:0}.om-react-ui-input-trade-field{font-size:var(--om-display-lg-font-size);font-family:var(--om-display-lg-font-family);line-height:var(--om-display-lg-line-height);letter-spacing:var(--om-display-lg-letter-spacing);font-weight:var(--om-display-lg-font-weight);flex:1 1 auto;width:100%;min-width:0;color:var(--om-text-brand,#073387);background:transparent;border:none;outline:none}.om-react-ui-input-trade-field::placeholder{color:var(--om-text-brand,#073387)}.om-react-ui-input-trade-unit{font-size:var(--om-display-lg-font-size);font-family:var(--om-display-lg-font-family);line-height:var(--om-display-lg-line-height);letter-spacing:var(--om-display-lg-letter-spacing);font-weight:var(--om-display-lg-font-weight);flex-shrink:0;color:var(--om-text-brand,#073387)}.om-react-ui-input-trade-unit-placeholder{color:var(--om-text-neutral-tertiary,#bbbdc1)}.om-react-ui-input-trade-max{font-size:var(--om-body-sm-font-size);font-family:var(--om-body-sm-font-family);line-height:var(--om-body-sm-line-height);letter-spacing:var(--om-body-sm-letter-spacing);font-weight:var(--om-body-sm-strong-font-weight);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--om-spacing-200,8px);color:var(--om-text-default,#131313);background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border:none;border-radius:var(--om-radius-200,8px);cursor:pointer}.om-react-ui-input-trade-max:hover:not(:disabled){background-color:var(--om-bg-neutral-tertiary-hover,#e3e4e4)}.om-react-ui-input-trade-max:disabled{color:var(--om-text-disabled,#bbbdc1);background-color:var(--om-bg-disabled,#f0f0f0);cursor:not-allowed}.om-react-ui-input-trade-subline{display:flex;gap:var(--om-spacing-100,4px);align-items:center;padding-top:var(--om-spacing-200,8px)}.om-react-ui-input-trade-swap{display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--om-icon-default-tertiary,#646465);background:transparent;border:none;transform:rotate(-90deg);cursor:pointer}.om-react-ui-input-trade-swap:disabled{color:var(--om-icon-disabled,#d1d2d2);cursor:not-allowed}.om-react-ui-input-trade-exchange{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight);color:var(--om-text-brand,#073387)}.om-react-ui-input-trade-error-msg{font-size:var(--om-body-sm-font-size);font-family:var(--om-body-sm-font-family);line-height:var(--om-body-sm-line-height);letter-spacing:var(--om-body-sm-letter-spacing);font-weight:var(--om-body-sm-font-weight);display:flex;gap:var(--om-spacing-100,4px);align-items:center;color:var(--om-text-default-tertiary,#646465)}.om-react-ui-input-trade:focus-within .om-react-ui-input-trade-main{padding-bottom:calc(var(--om-spacing-200, 8px) - 1px);border-bottom:2px solid var(--om-border-brand,#073387)}.om-react-ui-input-trade-error .om-react-ui-input-trade-field,.om-react-ui-input-trade-error .om-react-ui-input-trade-symbol,.om-react-ui-input-trade-error .om-react-ui-input-trade-unit{color:var(--om-text-danger,#ae0000)}.om-react-ui-input-trade-error .om-react-ui-input-trade-field::placeholder{color:var(--om-text-danger,#ae0000)}.om-react-ui-input-trade-error .om-react-ui-input-trade-main{border-bottom-color:var(--om-border-danger,#ae0000)}.om-react-ui-input-trade-error .om-react-ui-input-trade-error-msg{color:var(--om-text-danger,#ae0000)}.om-react-ui-input-trade-disabled .om-react-ui-input-trade-field,.om-react-ui-input-trade-disabled .om-react-ui-input-trade-symbol,.om-react-ui-input-trade-disabled .om-react-ui-input-trade-unit,.om-react-ui-input-trade-disabled .om-react-ui-input-trade-unit-placeholder{color:var(--om-text-disabled,#bbbdc1)}.om-react-ui-input-trade-disabled .om-react-ui-input-trade-field::placeholder{color:var(--om-text-disabled,#bbbdc1)}.om-react-ui-input-trade-disabled .om-react-ui-input-trade-main{border-bottom-color:var(--om-border-disabled,#e3e4e4)}.om-react-ui-input-trade-disabled .om-react-ui-input-trade-error-msg,.om-react-ui-input-trade-disabled .om-react-ui-input-trade-exchange{color:var(--om-text-disabled,#bbbdc1)}

package/es/components/Input/Trade/Trade.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { InputTradeProps } from '../interface';
+export declare const InputTrade: FC<InputTradeProps>;
+declare const _default: import("react").NamedExoticComponent<InputTradeProps>;
+export default _default;

package/es/components/Input/Trade/Trade.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useId } from 'react';
+import { useEventCallback } from '@1money/hooks';
+import { Icons } from '../../Icons';
+import { default as classnames, joinCls } from '../../../utils/classnames';
+import { useAmountInput } from '../useAmountInput';
+var TRADE_PREFIX = 'input';
+export var InputTrade = function InputTrade(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? TRADE_PREFIX : _props$prefixCls,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'default' : _props$status,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$currencySymbol = props.currencySymbol,
+    currencySymbol = _props$currencySymbol === void 0 ? '$' : _props$currencySymbol,
+    _props$currencyUnit = props.currencyUnit,
+    currencyUnit = _props$currencyUnit === void 0 ? 'USD' : _props$currencyUnit,
+    exchangeText = props.exchangeText,
+    errorMsg = props.errorMsg,
+    _props$showMax = props.showMax,
+    showMax = _props$showMax === void 0 ? false : _props$showMax,
+    onMax = props.onMax,
+    onSwap = props.onSwap,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '0' : _props$placeholder,
+    min = props.min,
+    max = props.max,
+    maxFractionDigits = props.maxFractionDigits,
+    negative = props.negative,
+    ref = props.ref;
+  var autoId = useId();
+  var classes = classnames(prefixCls);
+  var _useAmountInput = useAmountInput({
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange,
+      min: min,
+      max: max,
+      maxFractionDigits: maxFractionDigits,
+      negative: negative,
+      disabled: disabled,
+      readOnly: readOnly,
+      ref: ref
+    }),
+    syncRef = _useAmountInput.syncRef,
+    formattedValue = _useAmountInput.formattedValue,
+    hasValue = _useAmountInput.hasValue,
+    handleChange = _useAmountInput.handleChange,
+    handleSelect = _useAmountInput.handleSelect;
+  var handleMax = useEventCallback(function () {
+    if (disabled) return;
+    onMax === null || onMax === void 0 ? void 0 : onMax();
+  });
+  var handleSwap = useEventCallback(function () {
+    if (disabled) return;
+    onSwap === null || onSwap === void 0 ? void 0 : onSwap();
+  });
+  var isError = status === 'error';
+  return _jsxs("div", {
+    className: classes('trade', joinCls(isError && classes('trade-error'), disabled && classes('trade-disabled'), className)),
+    children: [_jsx("div", {
+      className: classes('trade-main'),
+      children: _jsxs("div", {
+        className: classes('trade-value-line'),
+        children: [_jsx("span", {
+          className: classes('trade-symbol'),
+          children: currencySymbol
+        }), _jsx("div", {
+          className: classes('trade-input-wrapper'),
+          children: _jsx("input", {
+            ref: syncRef,
+            id: autoId,
+            className: classes('trade-field'),
+            disabled: disabled,
+            readOnly: readOnly,
+            value: formattedValue,
+            onChange: handleChange,
+            onSelect: handleSelect,
+            placeholder: placeholder,
+            inputMode: "decimal",
+            "aria-invalid": isError ? 'true' : 'false'
+          })
+        }), _jsx("span", {
+          className: classes('trade-unit', joinCls(!hasValue && classes('trade-unit-placeholder'))),
+          children: currencyUnit
+        }), showMax && _jsx("button", {
+          type: "button",
+          className: classes('trade-max'),
+          disabled: disabled,
+          onClick: handleMax,
+          children: "Max"
+        })]
+      })
+    }), (exchangeText || onSwap) && _jsxs("div", {
+      className: classes('trade-subline'),
+      children: [onSwap && _jsx("button", {
+        type: "button",
+        className: classes('trade-swap'),
+        disabled: disabled,
+        onClick: handleSwap,
+        "aria-label": "swap currency",
+        children: _jsx(Icons, {
+          name: "swap",
+          size: 24
+        })
+      }), exchangeText && _jsx("span", {
+        className: classes('trade-exchange'),
+        children: exchangeText
+      })]
+    }), errorMsg && _jsxs("div", {
+      className: classes('trade-error-msg'),
+      children: [isError && _jsx(Icons, {
+        name: "error",
+        size: 16
+      }), _jsx("span", {
+        children: errorMsg
+      })]
+    })]
+  });
+};
+export default /*#__PURE__*/memo(InputTrade);
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvSW5wdXQvVHJhZGUvVHJhZGUuanMiLCJjb21wb25lbnRzL0lucHV0L3NyYy9jb21wb25lbnRzL0lucHV0L1RyYWRlL1RyYWRlLnRzeCJdLCJuYW1lcyI6WyJqc3giLCJfanN4IiwianN4cyIsIl9qc3hzIiwibWVtbyIsInVzZUlkIiwidXNlRXZlbnRDYWxsYmFjayIsIkljb25zIiwiZGVmYXVsdCIsImNsYXNzbmFtZXMiLCJqb2luQ2xzIiwidXNlQW1vdW50SW5wdXQiLCJUUkFERV9QUkVGSVgiLCJJbnB1dFRyYWRlIiwicHJvcHMiLCJfcHJvcHMkY2xhc3NOYW1lIiwiY2xhc3NOYW1lIiwiX3Byb3BzJHByZWZpeENscyIsInByZWZpeENscyIsIl9wcm9wcyRzdGF0dXMiLCJzdGF0dXMiLCJfcHJvcHMkZGlzYWJsZWQiLCJkaXNhYmxlZCIsIl9wcm9wcyRyZWFkT25seSIsInJlYWRPbmx5IiwiX3Byb3BzJGN1cnJlbmN5U3ltYm9sIiwiY3VycmVuY3lTeW1ib2wiLCJfcHJvcHMkY3VycmVuY3lVbml0IiwiY3VycmVuY3lVbml0IiwiZXhjaGFuZ2VUZXh0IiwiZXJyb3JNc2ciLCJfcHJvcHMkc2hvd01heCIsInNob3dNYXgiLCJvbk1heCIsIm9uU3dhcCIsInZhbHVlIiwiZGVmYXVsdFZhbHVlIiwib25DaGFuZ2UiLCJfcHJvcHMkcGxhY2Vob2xkZXIiLCJwbGFjZWhvbGRlciIsIm1pbiIsIm1heCIsIm1heEZyYWN0aW9uRGlnaXRzIiwibmVnYXRpdmUiLCJyZWYiLCJhdXRvSWQiLCJjbGFzc2VzIiwiX3VzZUFtb3VudElucHV0Iiwic3luY1JlZiIsImZvcm1hdHRlZFZhbHVlIiwiaGFzVmFsdWUiLCJoYW5kbGVDaGFuZ2UiLCJoYW5kbGVTZWxlY3QiLCJoYW5kbGVNYXgiLCJoYW5kbGVTd2FwIiwiaXNFcnJvciIsImNoaWxkcmVuIiwiaWQiLCJvblNlbGVjdCIsImlucHV0TW9kZSIsInR5cGUiLCJvbkNsaWNrIiwibmFtZSIsInNpemUi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dGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cyB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xuaW1wb3J0IHsgbWVtbywgdXNlSWQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VFdmVudENhbGxiYWNrIH0gZnJvbSAnQDFtb25leS9ob29rcyc7XG5pbXBvcnQgeyBJY29ucyB9IGZyb20gJy4uLy4uL0ljb25zJztcbmltcG9ydCB7IGRlZmF1bHQgYXMgY2xhc3NuYW1lcywgam9pbkNscyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2NsYXNzbmFtZXMnO1xuaW1wb3J0IHsgdXNlQW1vdW50SW5wdXQgfSBmcm9tICcuLi91c2VBbW91bnRJbnB1dCc7XG5jb25zdCBUUkFERV9QUkVGSVggPSAnaW5wdXQnO1xuZXhwb3J0IGNvbnN0IElucHV0VHJhZGUgPSAocHJvcHMpID0+IHtcbiAgICBjb25zdCB7IGNsYXNzTmFtZSA9ICcnLCBwcmVmaXhDbHMgPSBUUkFERV9QUkVGSVgsIHN0YXR1cyA9ICdkZWZhdWx0JywgZGlzYWJsZWQgPSBmYWxzZSwgcmVhZE9ubHkgPSBmYWxzZSwgY3VycmVuY3lTeW1ib2wgPSAnJCcsIGN1cnJlbmN5VW5pdCA9ICdVU0QnLCBleGNoYW5nZVRleHQsIGVycm9yTXNnLCBzaG93TWF4ID0gZmFsc2UsIG9uTWF4LCBvblN3YXAsIHZhbHVlLCBkZWZhdWx0VmFsdWUsIG9uQ2hhbmdlLCBwbGFjZWhvbGRlciA9ICcwJywgbWluLCBtYXgsIG1heEZyYWN0aW9uRGlnaXRzLCBuZWdhdGl2ZSwgcmVmLCB9ID0gcHJvcHM7XG4gICAgY29uc3QgYXV0b0lkID0gdXNlSWQoKTtcbiAgICBjb25zdCBjbGFzc2VzID0gY2xhc3NuYW1lcyhwcmVmaXhDbHMpO1xuICAgIGNvbnN0IHsgc3luY1JlZiwgZm9ybWF0dGVkVmFsdWUsIGhhc1ZhbHVlLCBoYW5kbGVDaGFuZ2UsIGhhbmRsZVNlbGVjdCwgfSA9IHVzZUFtb3VudElucHV0KHtcbiAgICAgICAgdmFsdWUsXG4gICAgICAgIGRlZmF1bHRWYWx1ZSxcbiAgICAgICAgb25DaGFuZ2UsXG4gICAgICAgIG1pbixcbiAgICAgICAgbWF4LFxuICAgICAgICBtYXhGcmFjdGlvbkRpZ2l0cyxcbiAgICAgICAgbmVnYXRpdmUsXG4gICAgICAgIGRpc2FibGVkLFxuICAgICAgICByZWFkT25seSxcbiAgICAgICAgcmVmLFxuICAgIH0pO1xuICAgIGNvbnN0IGhhbmRsZU1heCA9IHVzZUV2ZW50Q2FsbGJhY2soKCkgPT4ge1xuICAgICAgICBpZiAoZGlzYWJsZWQpXG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIG9uTWF4ID09PSBudWxsIHx8IG9uTWF4ID09PSB2b2lkIDAgPyB2b2lkIDAgOiBvbk1heCgpO1xuICAgIH0pO1xuICAgIGNvbnN0IGhhbmRsZVN3YXAgPSB1c2VFdmVudENhbGxiYWNrKCgpID0+IHtcbiAgICAgICAgaWYgKGRpc2FibGVkKVxuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICBvblN3YXAgPT09IG51bGwgfHwgb25Td2FwID09PSB2b2lkIDAgPyB2b2lkIDAgOiBvblN3YXAoKTtcbiAgICB9KTtcbiAgICBjb25zdCBpc0Vycm9yID0gc3RhdHVzID09PSAnZXJyb3InO1xuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ3RyYWRlJywgam9pbkNscyhpc0Vycm9yICYmIGNsYXNzZXMoJ3RyYWRlLWVycm9yJyksIGRpc2FibGVkICYmIGNsYXNzZXMoJ3RyYWRlLWRpc2FibGVkJyksIGNsYXNzTmFtZSkpLCBjaGlsZHJlbjogW19qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ3RyYWRlLW1haW4nKSwgY2hpbGRyZW46IF9qc3hzKFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBjbGFzc2VzKCd0cmFkZS12YWx1ZS1saW5lJyksIGNoaWxkcmVuOiBbX2pzeChcInNwYW5cIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ3RyYWRlLXN5bWJvbCcpLCBjaGlsZHJlbjogY3VycmVuY3lTeW1ib2wgfSksIF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ3RyYWRlLWlucHV0LXdyYXBwZXInKSwgY2hpbGRyZW46IF9qc3goXCJpbnB1dFwiLCB7IHJlZjogc3luY1JlZiwgaWQ6IGF1dG9JZCwgY2xhc3NOYW1lOiBjbGFzc2VzKCd0cmFkZS1maWVsZCcpLCBkaXNhYmxlZDogZGlzYWJsZWQsIHJlYWRPbmx5OiByZWFkT25seSwgdmFsdWU6IGZvcm1hdHRlZFZhbHVlLCBvbkNoYW5nZTogaGFuZGxlQ2hhbmdlLCBvblNlbGVjdDogaGFuZGxlU2VsZWN0LCBwbGFjZWhvbGRlcjogcGxhY2Vob2xkZXIsIGlucHV0TW9kZTogXCJkZWNpbWFsXCIsIFwiYXJpYS1pbnZhbGlkXCI6IGlzRXJyb3IgPyAndHJ1ZScgOiAnZmFsc2UnIH0pIH0pLCBfanN4KFwic3BhblwiLCB7IGNsYXNzTmFtZTogY2xhc3NlcygndHJhZGUtdW5pdCcsIGpvaW5DbHMoIWhhc1ZhbHVlICYmIGNsYXNzZXMoJ3RyYWRlLXVuaXQtcGxhY2Vob2xkZXInKSkpLCBjaGlsZHJlbjogY3VycmVuY3lVbml0IH0pLCBzaG93TWF4ICYmIChfanN4KFwiYnV0dG9uXCIsIHsgdHlwZTogXCJidXR0b25cIiwgY2xhc3NOYW1lOiBjbGFzc2VzKCd0cmFkZS1tYXgnKSwgZGlzYWJsZWQ6IGRpc2FibGVkLCBvbkNsaWNrOiBoYW5kbGVNYXgsIGNoaWxkcmVuOiBcIk1heFwiIH0pKV0gfSkgfSksIChleGNoYW5nZVRleHQgfHwgb25Td2FwKSAmJiAoX2pzeHMoXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ3RyYWRlLXN1YmxpbmUnKSwgY2hpbGRyZW46IFtvblN3YXAgJiYgKF9qc3goXCJidXR0b25cIiwgeyB0eXBlOiBcImJ1dHRvblwiLCBjbGFzc05hbWU6IGNsYXNzZXMoJ3RyYWRlLXN3YXAnKSwgZGlzYWJsZWQ6IGRpc2FibGVkLCBvbkNsaWNrOiBoYW5kbGVTd2FwLCBcImFyaWEtbGFiZWxcIjogXCJzd2FwIGN1cnJlbmN5XCIsIGNoaWxkcmVuOiBfanN4KEljb25zLCB7IG5hbWU6IFwic3dhcFwiLCBzaXplOiAyNCB9KSB9KSksIGV4Y2hhbmdlVGV4dCAmJiAoX2pzeChcInNwYW5cIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ3RyYWRlLWV4Y2hhbmdlJyksIGNoaWxkcmVuOiBleGNoYW5nZVRleHQgfSkpXSB9KSksIGVycm9yTXNnICYmIChfanN4cyhcImRpdlwiLCB7IGNsYXNzTmFtZTogY2xhc3NlcygndHJhZGUtZXJyb3ItbXNnJyksIGNoaWxkcmVuOiBbaXNFcnJvciAmJiBfanN4KEljb25zLCB7IG5hbWU6IFwiZXJyb3JcIiwgc2l6ZTogMTYgfSksIF9qc3goXCJzcGFuXCIsIHsgY2hpbGRyZW46IGVycm9yTXNnIH0pXSB9KSldIH0pKTtcbn07XG5leHBvcnQgZGVmYXVsdCBtZW1vKElucHV0VHJhZGUpOyIsbnVsbF0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==

package/es/components/Input/Trade/Trade.scss

@@ -0,0 +1,184 @@
+@use '@/styles/api' as theme;
+
+$component: 'input';
+
+.#{theme.$prefix}-#{$component} {
+  &-trade {
+    display: flex;
+    flex-direction: column;
+    gap: theme.spacing(gap, 200);
+    width: 100%;
+  }
+
+  &-trade-main {
+    padding-bottom: theme.spacing(scale, 200);
+    border-bottom: 1px solid theme.palette(border, 'default');
+    transition: border-color 0.2s ease;
+  }
+
+  &-trade-value-line {
+    display: flex;
+    gap: theme.spacing(gap, 200);
+    align-items: center;
+  }
+
+  &-trade-symbol {
+    @include theme.typography(display, lg);
+
+    flex-shrink: 0;
+    color: theme.palette(text, 'brand');
+  }
+
+  &-trade-input-wrapper {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &-trade-field {
+    @include theme.typography(display, lg);
+
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    color: theme.palette(text, 'brand');
+    background: transparent;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: theme.palette(text, 'brand');
+    }
+  }
+
+  &-trade-unit {
+    @include theme.typography(display, lg);
+
+    flex-shrink: 0;
+    color: theme.palette(text, 'brand');
+  }
+
+  &-trade-unit-placeholder {
+    color: theme.palette(text, 'neutral-tertiary');
+  }
+
+  &-trade-max {
+    @include theme.typography(body, sm, $strong: true);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: theme.spacing(component-padding, 200);
+    color: theme.palette(text, 'default');
+    background-color: theme.palette(bg, 'neutral-tertiary');
+    border: none;
+    border-radius: theme.shape(200);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background-color: theme.palette(bg, 'neutral-tertiary-hover');
+    }
+
+    &:disabled {
+      color: theme.palette(text, 'disabled');
+      background-color: theme.palette(bg, 'disabled');
+      cursor: not-allowed;
+    }
+  }
+
+  &-trade-subline {
+    display: flex;
+    gap: theme.spacing(gap, 100);
+    align-items: center;
+    padding-top: theme.spacing(scale, 200);
+  }
+
+  &-trade-swap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: theme.palette(icon, 'default-tertiary');
+    background: transparent;
+    border: none;
+    transform: rotate(-90deg);
+    cursor: pointer;
+
+    &:disabled {
+      color: theme.palette(icon, 'disabled');
+      cursor: not-allowed;
+    }
+  }
+
+  &-trade-exchange {
+    @include theme.typography(body, lg, $strong: true);
+
+    color: theme.palette(text, 'brand');
+  }
+
+  &-trade-error-msg {
+    @include theme.typography(body, sm);
+
+    display: flex;
+    gap: theme.spacing(gap, 100);
+    align-items: center;
+    color: theme.palette(text, 'default-tertiary');
+  }
+
+  // ── Focus ──
+  &-trade:focus-within {
+    .#{theme.$prefix}-#{$component}-trade-main {
+      padding-bottom: calc(#{theme.spacing(scale, 200)} - 1px);
+      border-bottom: 2px solid theme.palette(border, 'brand');
+    }
+  }
+
+  // ── Error ──
+  &-trade-error {
+    .#{theme.$prefix}-#{$component}-trade-symbol,
+    .#{theme.$prefix}-#{$component}-trade-field,
+    .#{theme.$prefix}-#{$component}-trade-unit {
+      color: theme.palette(text, 'danger');
+    }
+
+    .#{theme.$prefix}-#{$component}-trade-field::placeholder {
+      color: theme.palette(text, 'danger');
+    }
+
+    .#{theme.$prefix}-#{$component}-trade-main {
+      border-bottom-color: theme.palette(border, 'danger');
+    }
+
+    .#{theme.$prefix}-#{$component}-trade-error-msg {
+      color: theme.palette(text, 'danger');
+    }
+  }
+
+  // ── Disabled ──
+  &-trade-disabled {
+    .#{theme.$prefix}-#{$component}-trade-symbol,
+    .#{theme.$prefix}-#{$component}-trade-field,
+    .#{theme.$prefix}-#{$component}-trade-unit,
+    .#{theme.$prefix}-#{$component}-trade-unit-placeholder {
+      color: theme.palette(text, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-trade-field::placeholder {
+      color: theme.palette(text, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-trade-main {
+      border-bottom-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-trade-exchange {
+      color: theme.palette(text, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-trade-error-msg {
+      color: theme.palette(text, 'disabled');
+    }
+  }
+}

package/es/components/Input/Trade/index.d.ts

@@ -0,0 +1,2 @@
+export { InputTrade } from './Trade';
+export { default } from './Trade';

package/es/components/Input/Trade/index.js

@@ -0,0 +1,3 @@
+export { InputTrade } from './Trade';
+export { default } from './Trade';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvSW5wdXQvc3JjL2NvbXBvbmVudHMvSW5wdXQvVHJhZGUvaW5kZXgudHMiXSwibmFtZXMiOlsiSW5wdXRUcmFkZSIsImRlZmF1bHQiXSwibWFwcGluZ3MiOiJBQUFBLFNBQVNBLFVBQVUsUUFBUSxTQUFTO0FBQ3BDLFNBQVNDLE9BQU8sUUFBUSxTQUFTIiwiZmlsZSI6ImNvbXBvbmVudHMvSW5wdXQvVHJhZGUvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/Input/constants.d.ts

@@ -0,0 +1,15 @@
+import type { TypographyBodySize, TypographyColor, TypographyLabelSize } from "../Typography";
+export declare const INPUT_SIZES: readonly ["large", "small"];
+export declare const INPUT_STATUSES: readonly ["default", "error", "warning", "success"];
+export declare const SEARCH_TRIGGERS: readonly ["enter", "button", "both"];
+export declare const OTP_DEFAULT_LENGTH = 6;
+export type InputSize = (typeof INPUT_SIZES)[number];
+export type InputStatus = (typeof INPUT_STATUSES)[number];
+export type SearchTrigger = (typeof SEARCH_TRIGGERS)[number];
+export declare const INPUT_LABEL_SIZE: Record<InputSize, TypographyLabelSize>;
+export declare const INPUT_LABEL_COLOR: TypographyColor;
+export declare const INPUT_INFO_SIZE: TypographyBodySize;
+export declare const INPUT_INFO_COLOR: TypographyColor;
+export declare const INPUT_ERROR_MSG_SIZE: TypographyBodySize;
+export declare const INPUT_COUNT_SIZE: TypographyBodySize;
+export declare const INPUT_COUNT_COLOR: TypographyColor;

package/es/components/Input/constants.js

@@ -0,0 +1,16 @@
+export var INPUT_SIZES = ['large', 'small'];
+export var INPUT_STATUSES = ['default', 'error', 'warning', 'success'];
+export var SEARCH_TRIGGERS = ['enter', 'button', 'both'];
+export var OTP_DEFAULT_LENGTH = 6;
+// ── Typography ──
+export var INPUT_LABEL_SIZE = {
+  large: 'lg',
+  small: 'md'
+};
+export var INPUT_LABEL_COLOR = 'default';
+export var INPUT_INFO_SIZE = 'sm';
+export var INPUT_INFO_COLOR = 'default-tertiary';
+export var INPUT_ERROR_MSG_SIZE = 'sm';
+export var INPUT_COUNT_SIZE = 'lg';
+export var INPUT_COUNT_COLOR = 'neutral-secondary';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvSW5wdXQvY29uc3RhbnRzLnRzIl0sIm5hbWVzIjpbIklOUFVUX1NJWkVTIiwiSU5QVVRfU1RBVFVTRVMiLCJTRUFSQ0hfVFJJR0dFUlMiLCJPVFBfREVGQVVMVF9MRU5HVEgiLCJJTlBVVF9MQUJFTF9TSVpFIiwibGFyZ2UiLCJzbWFsbCIsIklOUFVUX0xBQkVMX0NPTE9SIiwiSU5QVVRfSU5GT19TSVpFIiwiSU5QVVRfSU5GT19DT0xPUiIsIklOUFVUX0VSUk9SX01TR19TSVpFIiwiSU5QVVRfQ09VTlRfU0laRSIsIklOUFVUX0NPVU5UX0NPTE9SIl0sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLElBQU1BLFdBQVcsR0FBRyxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQVU7QUFDdEQsT0FBTyxJQUFNQyxjQUFjLEdBQUcsQ0FBQyxTQUFTLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQVU7QUFDakYsT0FBTyxJQUFNQyxlQUFlLEdBQUcsQ0FBQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sQ0FBVTtBQUNuRSxPQUFPLElBQU1DLGtCQUFrQixHQUFHLENBQUM7QUFNbkM7QUFDQSxPQUFPLElBQU1DLGdCQUFnQixHQUEyQztFQUFFQyxLQUFLLEVBQUUsSUFBSTtFQUFFQyxLQUFLLEVBQUU7QUFBSSxDQUFFO0FBQ3BHLE9BQU8sSUFBTUMsaUJBQWlCLEdBQW9CLFNBQVM7QUFDM0QsT0FBTyxJQUFNQyxlQUFlLEdBQXVCLElBQUk7QUFDdkQsT0FBTyxJQUFNQyxnQkFBZ0IsR0FBb0Isa0JBQWtCO0FBQ25FLE9BQU8sSUFBTUMsb0JBQW9CLEdBQXVCLElBQUk7QUFDNUQsT0FBTyxJQUFNQyxnQkFBZ0IsR0FBdUIsSUFBSTtBQUN4RCxPQUFPLElBQU1DLGlCQUFpQixHQUFvQixtQkFBbUIiLCJmaWxlIjoiY29tcG9uZW50cy9JbnB1dC9jb25zdGFudHMuanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/Input/index.d.ts

@@ -0,0 +1,4 @@
+export { Input } from './Input';
+export { default } from './Input';
+export * from './interface';
+export * from './constants';

package/es/components/Input/index.js

@@ -0,0 +1,5 @@
+export { Input } from './Input';
+export { default } from './Input';
+export * from './interface';
+export * from './constants';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvSW5wdXQvaW5kZXgudHMiXSwibmFtZXMiOlsiSW5wdXQiLCJkZWZhdWx0Il0sIm1hcHBpbmdzIjoiQUFBQSxTQUFTQSxLQUFLLFFBQVEsU0FBUztBQUMvQixTQUFTQyxPQUFPLFFBQVEsU0FBUztBQUNqQyxjQUFjLGFBQWE7QUFDM0IsY0FBYyxhQUFhIiwiZmlsZSI6ImNvbXBvbmVudHMvSW5wdXQvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=