@kaio-xyz/design-system 1.1.67 → 1.1.69

package/dist/index.cjs.js

@@ -381,34 +381,40 @@ var Button = React.forwardRef(function (_a, ref) {
 });
 Button.displayName = "Button";
 
-var style$r = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
-
-var Hint = function (_a) {
-    var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
-    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$r.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$r.children, children: children })] })));
-};
-
-var style$q = {"field":"text-field-module__field__iZ0TF","label":"text-field-module__label__ClJkz","container":"text-field-module__container__IKtNZ","fieldWrapper":"text-field-module__fieldWrapper__nQ7l8","textField":"text-field-module__textField__756eR","hint":"text-field-module__hint__Ad6VA"};
-
-var TextField = React.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
-    var _f = React.useState(false), isAutofilled = _f[0], setIsAutofilled = _f[1];
+var useFieldAutofill = function () {
+    var _a = React.useState(false), isAutofilled = _a[0], setIsAutofilled = _a[1];
     var internalRef = React.useRef(null);
-    React.useImperativeHandle(ref, function () { return internalRef.current; });
     React.useEffect(function () {
         var input = internalRef.current;
         if (!input)
             return;
         var handleAnimationStart = function (e) {
-            if (e.animationName.indexOf('onAutoFillStart') !== -1)
+            var animationEvent = e;
+            if (animationEvent.animationName.indexOf('onAutoFillStart') !== -1)
                 setIsAutofilled(true);
-            if (e.animationName.indexOf('onAutoFillCancel') !== -1)
+            if (animationEvent.animationName.indexOf('onAutoFillCancel') !== -1)
                 setIsAutofilled(false);
         };
         input.addEventListener('animationstart', handleAnimationStart);
         return function () { return input.removeEventListener('animationstart', handleAnimationStart); };
     }, []);
-    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$q.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$q.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$q.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({}, attributes, { id: id, ref: internalRef, type: "text", value: value, defaultValue: defaultValue, placeholder: " ", className: style$q.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly })), label && (jsxRuntime.jsx("label", { className: style$q.label, htmlFor: id, "data-floating": floatingLabel, children: label })), button ? button : null, hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$q.hint, children: hint })] }) }) }));
+    return { isAutofilled: isAutofilled, internalRef: internalRef };
+};
+
+var style$r = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
+
+var Hint = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
+    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$r.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$r.children, children: children })] })));
+};
+
+var style$q = {"field":"text-field-module__field__iZ0TF","label":"text-field-module__label__ClJkz","container":"text-field-module__container__IKtNZ","fieldWrapper":"text-field-module__fieldWrapper__nQ7l8","textField":"text-field-module__textField__756eR","hint":"text-field-module__hint__Ad6VA"};
+
+var TextField = React.forwardRef(function (_a, ref) {
+    var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, _f = _a.type, type = _f === void 0 ? "text" : _f, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur", "type"]);
+    var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
+    React.useImperativeHandle(ref, function () { return internalRef.current; });
+    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$q.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$q.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$q.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({}, attributes, { id: id, ref: internalRef, type: type, value: value, defaultValue: defaultValue, placeholder: " ", className: style$q.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly })), label && (jsxRuntime.jsx("label", { className: style$q.label, htmlFor: id, "data-floating": floatingLabel, children: label })), button ? button : null, hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$q.hint, children: hint })] }) }) }));
 });
 TextField.displayName = "TextField";
 
@@ -942,6 +948,14 @@ var Tabs = {
     TriggerWithCounter: TriggerWithCounter,
 };
 
+var TextArea = React.forwardRef(function (_a, ref) {
+    var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, _f = _a.rows, rows = _f === void 0 ? 3 : _f, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur", "rows"]);
+    var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
+    React.useImperativeHandle(ref, function () { return internalRef.current; });
+    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$q.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$q.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$q.fieldWrapper, children: [jsxRuntime.jsx("textarea", __assign({}, attributes, { id: id, ref: internalRef, value: value, defaultValue: defaultValue, placeholder: " ", className: style$q.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly, rows: rows })), label && (jsxRuntime.jsx("label", { className: style$q.label, htmlFor: id, "data-floating": floatingLabel, children: label })), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$q.hint, children: hint })] }) }) }));
+});
+TextArea.displayName = "TextArea";
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Badge = Badge;
@@ -971,6 +985,7 @@ exports.Step = Step;
 exports.Stepper = Stepper;
 exports.Table = Table;
 exports.Tabs = Tabs;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.Timeframes = Timeframes;
 exports.Tooltip = Tooltip;