@trackunit/react-components 0.0.157 → 0.0.161

package/components/ActionButton/ActionButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
 declare type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+declare type FieldSize = "small" | "medium";
 interface ActionButtonProps extends CommonProps {
     /**
      * The type of action performed when clicking the button.
@@ -14,6 +15,10 @@ interface ActionButtonProps extends CommonProps {
      * The onClick event.
      */
     onClick?: (e: React.MouseEvent) => void;
+    /**
+     *  The size of the icon.
+     */
+    iconSize?: FieldSize;
 }
 /**
  * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
@@ -21,5 +26,5 @@ interface ActionButtonProps extends CommonProps {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-export declare const ActionButton: ({ type, value }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ type, value, dataTestId, iconSize }: ActionButtonProps) => JSX.Element;
 export {};

package/components/EmailInput/EmailInput.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { BaseInputProps } from "../BaseInput";
+export interface EmailInputProps extends BaseInputProps, CommonProps {
+    /**
+     * A flag to disable the email button.
+     */
+    disableAction?: boolean;
+}
+/**
+ * A Email Input component is used for input of the type Email.
+ *
+ * It has an ActionButton which sends an email to the specified address using "mailto:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input component.
+ */
+export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;

package/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { BaseInputProps } from "../BaseInput";
+export interface PhoneInputProps extends BaseInputProps, CommonProps {
+    /**
+     * A flag to disable the phone button.
+     */
+    disableAction?: boolean;
+}
+/**
+ * A Phone Input component is used for input of the type tel.
+ *
+ * It has an ActionButton which sends an phone call to the specified number using "tel:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input component.
+ */
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;

package/index.js

@@ -501,7 +501,9 @@ const Root$4 = tw.span`
 
 const ActionButton = ({
   type,
-  value
+  value,
+  dataTestId,
+  iconSize
 }) => {
   const getIconName = () => {
     switch (type) {
@@ -537,7 +539,8 @@ const ActionButton = ({
 
   return jsx(ActionContainer, {
     children: jsx(StyledIconButton, {
-      dataTestId: "testIconButtonId",
+      "$fieldSize": iconSize,
+      dataTestId: dataTestId || "testIconButtonId",
       size: "small",
       color: "tertiary",
       icon: jsx(Icon$1, {
@@ -553,6 +556,9 @@ const ActionContainer = tw.div`
 `;
 const StyledIconButton = twx(IconButton)`
   tu-action-button
+${({
+  $fieldSize
+}) => $fieldSize === "small" && tws`tu-action-button--small`}
 `;
 
 /**
@@ -5211,7 +5217,7 @@ const GridArea = ({
 const IntrinsicallyResponsiveGrid = ({
   children,
   occupation = "auto-fill",
-  minColumnWidth = "normal",
+  minColumnWidth = "md",
   gap = "auto",
   dataTestId,
   className
@@ -5243,18 +5249,21 @@ const Layout$2 = tw.span`
   $minColumnWidth
 }) => {
   switch ($minColumnWidth) {
-    case "slim":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--slim`;
+    case "xs":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--xs`;
 
-    case "narrow":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--narrow`;
+    case "sm":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--sm`;
 
-    case "wide":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--wide`;
+    case "lg":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--lg`;
 
-    case "normal":
+    case "xl":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--xl`;
+
+    case "md":
     default:
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--normal`;
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--md`;
   }
 }}
   
@@ -5291,7 +5300,7 @@ const Layout$2 = tw.span`
 
     case "auto":
     default:
-      return tws`gap-3 sm:gap-4 md:gap-6`;
+      return tws`tu-gap-responsive`;
   }
 }};
 `;

package/layout/responsive/IntrinsicallyResponsiveGrid.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
-declare type ColumnWidth = "slim" | "narrow" | "normal" | "wide";
+declare type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
 declare type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
 declare type Occupation = "auto-fill" | "auto-fit";
 interface IntrinsicallyResponsiveGridProps extends CommonProps {

package/package.json

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