@x-plat/design-system 0.5.63 → 0.5.65

package/dist/components/TextArea/index.cjs

@@ -57,51 +57,23 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var TextArea = import_react.default.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, ...textareaProps } = props;
-    const localRef = import_react.default.useRef(null);
-    const setRefs = (el) => {
-      localRef.current = el;
-      if (!ref) return;
-      if (typeof ref === "function") {
-        ref(el);
-      } else if (ref && typeof ref === "object" && "current" in ref) {
-        ref.current = el;
-      }
-    };
-    const handleOnChange = (e) => {
-      const val = e.target.value;
-      if (onChange) {
-        const event = {
-          ...e,
-          target: { value: val }
-        };
-        onChange(event);
-      }
-    };
-    import_react.default.useEffect(() => {
-      const el = localRef.current;
-      if (!el) return;
-      el.style.height = "0px";
-      const nextHeight = Math.min(el.scrollHeight, 400);
-      el.style.height = `${nextHeight}px`;
-    }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+    const {
+      className,
+      size = "md",
+      resize = "vertical",
+      rows = 3,
+      disabled,
+      ...textareaProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
       {
-        className: clsx_default(
-          "lib-xplat-textarea",
-          disabled ? "disabled" : void 0
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "textarea",
-          {
-            ...textareaProps,
-            ref: setRefs,
-            disabled,
-            value,
-            onChange: handleOnChange
-          }
-        )
+        ...textareaProps,
+        ref,
+        rows,
+        disabled,
+        className: clsx_default("lib-xplat-textarea", size, disabled && "disabled"),
+        style: { resize }
       }
     ) });
   }

package/dist/components/TextArea/index.css

@@ -1,48 +1,46 @@
 /* src/components/TextArea/textArea.scss */
-.lib-xplat-textarea-wrapper {
+.lib-xplat-textarea-wrap {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-space-2);
+  width: 100%;
 }
-.lib-xplat-textarea-wrapper .lib-xplat-textarea {
-  display: flex;
-  align-items: center;
+.lib-xplat-textarea-wrap .lib-xplat-textarea {
+  width: 100%;
   border: 1px solid var(--semantic-border-default);
   border-radius: var(--spacing-radius-md);
-  min-height: var(--spacing-control-height-md);
-  overflow: hidden;
   background-color: var(--semantic-surface-neutral-default);
-  width: 100%;
+  color: var(--semantic-text-subtle);
+  font-family: inherit;
+  outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
-.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
+.lib-xplat-textarea-wrap .lib-xplat-textarea.sm {
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+}
+.lib-xplat-textarea-wrap .lib-xplat-textarea.md {
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+}
+.lib-xplat-textarea-wrap .lib-xplat-textarea.lg {
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+}
+.lib-xplat-textarea-wrap .lib-xplat-textarea:hover:not(.disabled):not(:focus) {
   border-color: var(--semantic-border-strong);
 }
-.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
+.lib-xplat-textarea-wrap .lib-xplat-textarea:focus {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
-.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+.lib-xplat-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
   border-color: var(--semantic-border-strong);
 }
-.lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
+.lib-xplat-textarea-wrap .lib-xplat-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
-  border: none;
-  outline: none;
-  flex: 1;
-  padding-left: var(--spacing-space-4);
-  padding-right: var(--spacing-space-4);
-  width: 100%;
-  color: var(--semantic-text-subtle);
   resize: none;
-  height: 1.5em;
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
-  font-family: inherit;
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
-  cursor: not-allowed;
 }

package/dist/components/TextArea/index.d.cts

@@ -1,6 +1,13 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
 
-declare const TextArea: React.ForwardRefExoticComponent<TextareaAttributes & React.RefAttributes<HTMLTextAreaElement>>;
+type TextAreaSize = "sm" | "md" | "lg";
+type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+interface TextAreaProps extends Omit<TextareaAttributes, "size"> {
+    size?: TextAreaSize;
+    resize?: TextAreaResize;
+    rows?: number;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 export { TextArea };

package/dist/components/TextArea/index.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
 
-declare const TextArea: React.ForwardRefExoticComponent<TextareaAttributes & React.RefAttributes<HTMLTextAreaElement>>;
+type TextAreaSize = "sm" | "md" | "lg";
+type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+interface TextAreaProps extends Omit<TextareaAttributes, "size"> {
+    size?: TextAreaSize;
+    resize?: TextAreaResize;
+    rows?: number;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 export { TextArea };

package/dist/components/TextArea/index.js

@@ -21,51 +21,23 @@ var clsx_default = clsx;
 import { jsx } from "react/jsx-runtime";
 var TextArea = React.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, ...textareaProps } = props;
-    const localRef = React.useRef(null);
-    const setRefs = (el) => {
-      localRef.current = el;
-      if (!ref) return;
-      if (typeof ref === "function") {
-        ref(el);
-      } else if (ref && typeof ref === "object" && "current" in ref) {
-        ref.current = el;
-      }
-    };
-    const handleOnChange = (e) => {
-      const val = e.target.value;
-      if (onChange) {
-        const event = {
-          ...e,
-          target: { value: val }
-        };
-        onChange(event);
-      }
-    };
-    React.useEffect(() => {
-      const el = localRef.current;
-      if (!el) return;
-      el.style.height = "0px";
-      const nextHeight = Math.min(el.scrollHeight, 400);
-      el.style.height = `${nextHeight}px`;
-    }, [value]);
-    return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx(
-      "div",
+    const {
+      className,
+      size = "md",
+      resize = "vertical",
+      rows = 3,
+      disabled,
+      ...textareaProps
+    } = props;
+    return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx(
+      "textarea",
       {
-        className: clsx_default(
-          "lib-xplat-textarea",
-          disabled ? "disabled" : void 0
-        ),
-        children: /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            ...textareaProps,
-            ref: setRefs,
-            disabled,
-            value,
-            onChange: handleOnChange
-          }
-        )
+        ...textareaProps,
+        ref,
+        rows,
+        disabled,
+        className: clsx_default("lib-xplat-textarea", size, disabled && "disabled"),
+        style: { resize }
       }
     ) });
   }