@trackunit/react-components 0.0.114 → 0.0.116

package/components/Card/Card.d.ts

@@ -35,8 +35,8 @@ export interface CardProps extends CommonProps {
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 /**
- * The Card component is a container for ui elements, and is the main component of the modal.
- * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
+ * The Card component is a container for UI elements, and is the main component of the modal.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
  *
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component

package/components/Modal/Modal.d.ts

@@ -23,6 +23,10 @@ export interface ModalProps extends CommonProps {
      */
     maxWidth?: ModalWidth;
 }
-/** Preferred usage is with useModal(), so the modal is placed at highest level. */
+/**
+ * - Modals are used to present critical information or request user input needed to complete a user's workflow.
+ * - Modals interrupt a user's workflow by design.
+ * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ */
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/TextAreaField/TextAreaField.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { CommonProps } from "../../common";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { TextAreaProps } from "../TextArea/TextArea";
+import "../TextArea/TextArea.css";
 declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
 export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
     /**

package/index.css

@@ -163,6 +163,31 @@
   }
 }
 
+.tu-textarea {
+  @apply tu-input-base 
+    block
+    overflow-auto
+    appearance-none
+    px-3
+    py-2
+    bg-transparent
+    text-base
+    text-slate-900
+    placeholder-slate-400
+    focus-visible:outline-none
+    w-full 
+    h-20
+    transition;
+
+  &--invalid {
+    @apply tu-input--invalid;
+  }
+
+  &--disabled {
+    @apply tu-input--disabled;
+  }
+}
+
 /* CSS related to the toggle component */
 .tu-toggle {
   @apply rounded-full

package/index.js

@@ -958,8 +958,8 @@ const InputContainer = tw.div`
 
 const ROLE_CARD = "region";
 /**
- * The Card component is a container for ui elements, and is the main component of the modal.
- * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
+ * The Card component is a container for UI elements, and is the main component of the modal.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
  *
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
@@ -2913,7 +2913,11 @@ const Backdrop = tw(animated.div)`
   tu-modal-backdrop
 `;
 
-/** Preferred usage is with useModal(), so the modal is placed at highest level. */
+/**
+ * - Modals are used to present critical information or request user input needed to complete a user's workflow.
+ * - Modals interrupt a user's workflow by design.
+ * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ */
 
 const Modal = React.forwardRef(({
   isOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.114",
+  "version": "0.0.116",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {