@arthurzakharov/ui-kit 3.18.0 → 3.19.0

package/dist/assets/text-area-aZwGK7CT.css

@@ -0,0 +1 @@
+._TextArea_15g66_1{display:flex;flex-direction:column}._Input_15g66_6{resize:none;outline:none;box-sizing:border-box;width:100%;border:none;border-radius:10px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._Input_15g66_6:hover{cursor:pointer}._Input_15g66_6:disabled{opacity:.33}._ErrorMessage_15g66_28{padding-top:var(--rm-ui-padding-xxs)}._FieldGroup_15g66_32{display:flex;flex-direction:column;gap:var(--rm-ui-padding-xs);width:100%}

package/dist/controls/interactives/text-area/text-area.component.d.ts

@@ -1,8 +1,10 @@
 import { Interactive } from '../../utils';
 import { Base } from '../../../utils/types';
+export type TextAreaPlaceholderPosition = 'inside' | 'outside';
 export interface TextAreaProps extends Base, Interactive<string> {
     placeholder?: string;
+    placeholderPosition?: TextAreaPlaceholderPosition;
     rows?: number;
     message?: string;
 }
-export declare const TextArea: ({ id, value, disabled, state, onChange, onFocus, onBlur, placeholder, rows, message, ...base }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextArea: ({ id, value, disabled, state, onChange, onFocus, onBlur, placeholder, placeholderPosition, rows, message, ...base }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/interactives/text-area/text-area.component.js

@@ -1,64 +1,70 @@
-import { jsxs as M, jsx as r } from "react/jsx-runtime";
-import { baseProps as t, clsx as N } from "../../../utils/functions/functions.util.js";
-import { FadeSlide as _ } from "../../../animations/fade-slide/fade-slide.component.js";
-import { Box as I } from "../../primitives/box/box.component.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { baseProps as s, clsx as B } from "../../../utils/functions/functions.util.js";
+import { FadeSlide as C } from "../../../animations/fade-slide/fade-slide.component.js";
+import { Box as G } from "../../primitives/box/box.component.js";
 import "../../../utils/content/content.component.js";
 import "lucide-react";
-import { ErrorMessage as C } from "../../primitives/error-message/error-message.component.js";
+import { ErrorMessage as y } from "../../primitives/error-message/error-message.component.js";
 import "usehooks-ts";
-import { useControlInteraction as k } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
-import '../../../assets/text-area-Dgc2jHSx.css';const B = "_Input_11gck_6", F = "_ErrorMessage_11gck_28", a = {
-  Input: B,
-  ErrorMessage: F
-}, w = ({
+import { Text as b } from "../../../components/text/text.component.js";
+import { useControlInteraction as j } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
+import '../../../assets/text-area-aZwGK7CT.css';const O = "_Input_15g66_6", T = "_ErrorMessage_15g66_28", $ = "_FieldGroup_15g66_32", t = {
+  Input: O,
+  ErrorMessage: T,
+  FieldGroup: $
+}, J = ({
   // Interactive props
-  id: o,
-  value: c,
-  disabled: s = !1,
+  id: a,
+  value: u,
+  disabled: i = !1,
   state: n = "idle",
-  onChange: i,
-  onFocus: l,
-  onBlur: d,
+  onChange: g,
+  onFocus: x,
+  onBlur: f,
   // TextArea props
-  placeholder: p = "",
-  rows: u = 5,
-  message: m = "",
+  placeholder: r = "",
+  placeholderPosition: h = "inside",
+  rows: _ = 5,
+  message: d = "",
   // Base props
-  ...e
+  ...o
 }) => {
-  const { focused: g, emitChange: x, handleFocus: f, handleBlur: h } = k({
-    id: o,
-    disabled: s,
-    onChange: i,
-    onFocus: l,
-    onBlur: d
-  });
-  return /* @__PURE__ */ M(
+  const { focused: F, emitChange: N, handleFocus: E, handleBlur: I } = j({
+    id: a,
+    disabled: i,
+    onChange: g,
+    onFocus: x,
+    onBlur: f
+  }), m = s(o, "data-testid", "textarea"), c = h === "outside", M = c && !!r, l = /* @__PURE__ */ e(G, { state: n, focused: F, className: s(o, "className"), children: /* @__PURE__ */ e(
+    "textarea",
+    {
+      "data-testid": "textarea-input",
+      disabled: i,
+      id: a,
+      rows: _,
+      placeholder: c ? "" : r,
+      value: u,
+      className: t.Input,
+      onChange: (v) => N(v.target.value, "keyboard"),
+      onFocus: () => E(),
+      onBlur: () => I()
+    }
+  ) });
+  return /* @__PURE__ */ p(
     "div",
     {
-      "data-testid": t(e, "data-testid", "textarea"),
-      className: N(a.Container, t(e, "className")),
+      "data-testid": m,
+      className: B(t.Container, s(o, "className")),
       children: [
-        /* @__PURE__ */ r(I, { state: n, focused: g, className: t(e, "className"), children: /* @__PURE__ */ r(
-          "textarea",
-          {
-            "data-testid": "textarea-input",
-            disabled: s,
-            id: o,
-            rows: u,
-            placeholder: p,
-            value: c,
-            className: a.Input,
-            onChange: (E) => x(E.target.value, "keyboard"),
-            onFocus: () => f(),
-            onBlur: () => h()
-          }
-        ) }),
-        /* @__PURE__ */ r(_, { name: "text-message", condition: n === "error" && !!m, children: /* @__PURE__ */ r(C, { "data-testid": "textarea-error-message", text: m, className: a.ErrorMessage }) })
+        M ? /* @__PURE__ */ p("div", { className: t.FieldGroup, children: [
+          /* @__PURE__ */ e(b, { tag: "div", weight: "medium", size: "body", color: "text-primary", "data-testid": `${m}-label`, children: r }),
+          l
+        ] }) : l,
+        /* @__PURE__ */ e(C, { name: "text-message", condition: n === "error" && !!d, children: /* @__PURE__ */ e(y, { "data-testid": "textarea-error-message", text: d, className: t.ErrorMessage }) })
       ]
     }
   );
 };
 export {
-  w as TextArea
+  J as TextArea
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "3.18.0",
+  "version": "3.19.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/assets/text-area-Dgc2jHSx.css

@@ -1 +0,0 @@
-._TextArea_11gck_1{display:flex;flex-direction:column}._Input_11gck_6{resize:none;outline:none;box-sizing:border-box;width:100%;border:none;border-radius:10px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._Input_11gck_6:hover{cursor:pointer}._Input_11gck_6:disabled{opacity:.33}._ErrorMessage_11gck_28{padding-top:var(--rm-ui-padding-xxs)}