@fluidattacks/design 9.4.0 → 9.5.0

package/dist/components/inputs/fields/text-input/index.d.ts

@@ -1,3 +1,3 @@
 import { IInputProps } from '../../types';
-declare const TextInput: ({ disabled, hasIcon, helpLink, helpLinkText, helpText, error, id, indexArray, isValid, isTouched, label, name, maskValue, maxLength, onPaste, placeholder, removeItemArray, register, suggestions, tooltip, type, weight, ...rest }: Readonly<IInputProps>) => JSX.Element;
+declare const TextInput: ({ disabled, hasIcon, helpLink, helpLinkText, helpText, error, id, indexArray, isValid, isTouched, label, name, maskValue, maxLength, onPaste, placeholder, removeItemArray, register, suggestions, tooltip, type, warning, weight, ...rest }: Readonly<IInputProps>) => JSX.Element;
 export { TextInput };

package/dist/components/inputs/fields/text-input/index.js

@@ -1,125 +1,136 @@
-import { jsxs as C, jsx as e } from "react/jsx-runtime";
-import { useState as g, useCallback as y } from "react";
-import { useTheme as J } from "styled-components";
-import { OutlineContainer as L } from "../../outline-container/index.js";
-import { StyledTextInputContainer as P } from "../../styles.js";
-import { Icon as s } from "../../../icon/index.js";
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useState as y, useCallback as w } from "react";
+import { useTheme as P } from "styled-components";
+import { OutlineContainer as Q } from "../../outline-container/index.js";
+import { StyledTextInputContainer as U } from "../../styles.js";
+import { Icon as c } from "../../../icon/index.js";
 import { IconButton as x } from "../../../icon-button/index.js";
-const oo = ({
+const eo = ({
   disabled: t = !1,
-  hasIcon: T = !1,
-  helpLink: S,
+  hasIcon: S = !1,
+  helpLink: T,
   helpLinkText: $,
-  helpText: w,
-  error: z,
-  id: I,
-  indexArray: p = 0,
-  isValid: k,
-  isTouched: R,
-  label: j,
-  name: i,
-  maskValue: d = !1,
-  maxLength: q,
-  onPaste: B,
-  placeholder: D,
-  removeItemArray: u,
-  register: h,
-  suggestions: n,
+  helpText: z,
+  error: I,
+  id: k,
+  indexArray: d = 0,
+  isValid: R,
+  isTouched: j,
+  label: q,
+  name: e,
+  maskValue: u = !1,
+  maxLength: B,
+  onPaste: D,
+  placeholder: M,
+  removeItemArray: h,
+  register: g,
+  suggestions: l,
   tooltip: N,
   type: _ = "text",
-  weight: b,
+  warning: E,
+  weight: F,
   ...f
 }) => {
-  const { required: l, onBlur: E, onChange: F } = f, r = J(), a = t ? void 0 : z, [K, M] = g(""), [c, O] = g(!1), V = d ? c ? "text" : "password" : _, G = y(() => {
-    O((o) => !o);
+  const { required: s, onBlur: K, onChange: O } = f, n = P(), a = t ? void 0 : I, r = t || a ? void 0 : E, [V, b] = y(""), [p, G] = y(!1), H = u ? p ? "text" : "password" : _, J = w(() => {
+    G((o) => !o);
   }, []), v = (o) => {
-    M(o.target.value), F?.(o);
-  }, m = k && R && !t && K.trim() !== "", H = y(
+    b(o.target.value), O?.(o);
+  }, C = R && j && !t && r === void 0 && V.trim() !== "", L = w(
     (o) => {
       o.key === "Enter" && o.preventDefault();
     },
     []
   );
-  return /* @__PURE__ */ C(
-    L,
+  return /* @__PURE__ */ m(
+    Q,
     {
       error: a,
-      helpLink: S,
+      helpLink: T,
       helpLinkText: $,
-      helpText: w,
-      htmlFor: i,
-      label: j,
-      required: l,
+      helpText: z,
+      htmlFor: e,
+      label: q,
+      required: s,
       tooltip: N,
-      weight: b,
+      warning: r,
+      weight: F,
       children: [
-        /* @__PURE__ */ C(
-          P,
+        /* @__PURE__ */ m(
+          U,
           {
             className: `
-          ${t ? "disabled" : ""} ${a ? "error" : ""} ${m ? "success" : ""}
+          ${t ? "disabled" : ""} ${a ? "error" : ""} ${r ? "warning" : ""} ${C ? "success" : ""}
         `,
             children: [
-              T ? /* @__PURE__ */ e(s, { icon: "user", iconSize: "xl", iconType: "fa-light" }) : void 0,
-              /* @__PURE__ */ e(
+              S ? /* @__PURE__ */ i(c, { icon: "user", iconSize: "xl", iconType: "fa-light" }) : void 0,
+              /* @__PURE__ */ i(
                 "input",
                 {
                   "aria-hidden": !1,
                   "aria-invalid": a ? "true" : "false",
-                  "aria-label": i,
-                  "aria-required": l,
+                  "aria-label": e,
+                  "aria-required": s,
                   autoComplete: "off",
-                  "data-testid": `${i}-input`,
+                  "data-testid": `${e}-input`,
                   disabled: t,
-                  id: i,
-                  list: n ? `list_${i}` : void 0,
-                  maxLength: q,
-                  onKeyDown: H,
-                  onPaste: B,
-                  placeholder: D,
-                  type: V,
-                  ...h ? h(i, { required: l, onBlur: E, onChange: v }) : { ...f, onChange: v }
+                  id: e,
+                  list: l ? `list_${e}` : void 0,
+                  maxLength: B,
+                  onKeyDown: L,
+                  onPaste: D,
+                  placeholder: M,
+                  type: H,
+                  ...g ? g(e, { required: s, onBlur: K, onChange: v }) : { ...f, onChange: v }
                 }
               ),
-              a ? /* @__PURE__ */ e(
-                s,
+              a ? /* @__PURE__ */ i(
+                c,
                 {
                   icon: "exclamation-circle",
                   iconClass: "error-icon",
-                  iconColor: r.palette.error[500],
+                  iconColor: n.palette.error[500],
                   iconSize: "lg"
                 }
               ) : void 0,
-              m ? /* @__PURE__ */ e(
-                s,
+              r ? /* @__PURE__ */ i(
+                c,
+                {
+                  icon: "triangle-exclamation",
+                  iconClass: "warning-icon",
+                  iconColor: n.palette.warning[500],
+                  iconSize: "lg"
+                }
+              ) : void 0,
+              C ? /* @__PURE__ */ i(
+                c,
                 {
                   icon: "check-circle",
                   iconClass: "success-icon",
-                  iconColor: r.palette.success[500],
+                  iconColor: n.palette.success[500],
                   iconSize: "lg"
                 }
               ) : void 0,
-              I === "array" && p > 0 ? /* @__PURE__ */ e(
+              k === "array" && d > 0 ? /* @__PURE__ */ i(
                 x,
                 {
-                  color: r.palette.gray[400],
+                  color: n.palette.gray[400],
                   icon: "trash",
                   iconSize: "sm",
                   iconType: "fa-light",
-                  onClick: u ? u(p) : void 0,
+                  onClick: h ? h(d) : void 0,
                   variant: "ghost"
                 }
               ) : void 0,
-              d ? /* @__PURE__ */ e(
+              u ? /* @__PURE__ */ i(
                 x,
                 {
-                  "aria-label": c ? "hide password" : "show password",
+                  "aria-label": p ? "hide password" : "show password",
                   className: "toggle-divider",
-                  icon: c ? "eye-slash" : "eye",
-                  iconColor: r.palette.gray[800],
+                  icon: p ? "eye-slash" : "eye",
+                  iconColor: n.palette.gray[800],
                   iconSize: "lg",
                   iconType: "fa-light",
-                  onClick: G,
+                  onClick: J,
                   py: 0,
                   variant: "ghost"
                 }
@@ -127,11 +138,11 @@ const oo = ({
             ]
           }
         ),
-        n ? /* @__PURE__ */ e("datalist", { id: `list_${i}`, children: n.map((o) => /* @__PURE__ */ e("option", { value: o }, o)) }) : void 0
+        l ? /* @__PURE__ */ i("datalist", { id: `list_${e}`, children: l.map((o) => /* @__PURE__ */ i("option", { value: o }, o)) }) : void 0
       ]
     }
   );
 };
 export {
-  oo as TextInput
+  eo as TextInput
 };

package/dist/components/inputs/outline-container/index.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, PropsWithChildren } from 'react';
 import { IOutlineContainerProps } from '../types';
-declare const OutlineContainer: ({ children, containerRef, disabled, id, error, helpLink, helpLinkText, helpText, htmlFor, label, linkPosition, maxLength, required, tooltip, value, weight, }: Readonly<PropsWithChildren<IOutlineContainerProps & {
+declare const OutlineContainer: ({ children, containerRef, disabled, id, error, helpLink, helpLinkText, helpText, htmlFor, label, linkPosition, maxLength, required, tooltip, value, warning, weight, }: Readonly<PropsWithChildren<IOutlineContainerProps & {
     containerRef?: MutableRefObject<HTMLDivElement | null>;
 }>>) => JSX.Element;
 export { OutlineContainer };

package/dist/components/inputs/outline-container/index.js

@@ -1,109 +1,121 @@
-import { jsxs as e, jsx as i, Fragment as j } from "react/jsx-runtime";
-import { useTheme as z } from "styled-components";
-import { Label as $ } from "../label/index.js";
-import { StyledOutlineContainer as x } from "../styles.js";
-import { Container as s } from "../../container/index.js";
-import { Icon as I } from "../../icon/index.js";
+import { jsxs as n, jsx as i, Fragment as j } from "react/jsx-runtime";
+import { useTheme as k } from "styled-components";
+import { Label as x } from "../label/index.js";
+import { StyledOutlineContainer as I } from "../styles.js";
+import { Container as f } from "../../container/index.js";
+import { Icon as N } from "../../icon/index.js";
 import { Link as O } from "../../link/index.js";
 import { Tag as S } from "../../tag/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
-import { Text as p } from "../../typography/text/index.js";
-const J = ({
-  children: f,
-  containerRef: y,
-  disabled: g,
-  id: v,
+import { Text as l } from "../../typography/text/index.js";
+const L = ({
+  children: g,
+  containerRef: v,
+  disabled: y,
+  id: w,
   error: o,
-  helpLink: r,
+  helpLink: e,
   helpLinkText: h = "Link here",
-  helpText: t,
-  htmlFor: m,
-  label: a,
-  linkPosition: c = "down",
-  maxLength: n,
+  helpText: a,
+  htmlFor: d,
+  label: m,
+  linkPosition: s = "down",
+  maxLength: c,
   required: u,
-  tooltip: w,
-  value: l,
-  weight: b
+  tooltip: b,
+  value: p,
+  warning: z,
+  weight: C
 }) => {
-  const d = z(), C = l ? l.length : 0;
-  return /* @__PURE__ */ e(x, { id: v, ref: y, children: [
-    a === void 0 ? void 0 : /* @__PURE__ */ i(
-      $,
+  const r = k(), $ = p ? p.length : 0, t = o ? void 0 : z;
+  return /* @__PURE__ */ n(I, { id: w, ref: v, children: [
+    m === void 0 ? void 0 : /* @__PURE__ */ i(
+      x,
       {
-        htmlFor: m,
-        label: a,
-        link: c === "up" ? r : void 0,
+        htmlFor: d,
+        label: m,
+        link: s === "up" ? e : void 0,
         required: u,
-        tooltip: w,
-        weight: b
+        tooltip: b,
+        weight: C
       }
     ),
-    f,
-    o || n ? /* @__PURE__ */ e(
-      s,
+    g,
+    o || t || c ? /* @__PURE__ */ n(
+      f,
       {
         display: "flex",
-        justify: o === void 0 ? "end" : "space-between",
+        justify: o === void 0 && t === void 0 ? "end" : "space-between",
         width: "100%",
         children: [
           o && /* @__PURE__ */ i(
-            p,
+            l,
             {
               className: "error-msg",
-              color: d.palette.error[500],
-              "data-testid": `${m}-error`,
+              color: r.palette.error[500],
+              "data-testid": `${d}-error`,
               display: "block",
               size: "md",
               children: o
             }
           ),
-          n && /* @__PURE__ */ i(
+          t && /* @__PURE__ */ i(
+            l,
+            {
+              className: "warning-msg",
+              color: r.palette.warning[700],
+              "data-testid": `${d}-warning`,
+              display: "block",
+              size: "md",
+              children: t
+            }
+          ),
+          c && /* @__PURE__ */ i(
             S,
             {
               priority: "low",
-              tagLabel: `${C}/${n}`,
-              variant: g ? "inactive" : "error"
+              tagLabel: `${$}/${c}`,
+              variant: y ? "inactive" : "error"
             }
           )
         ]
       }
     ) : void 0,
-    t || r ? /* @__PURE__ */ e(
-      s,
+    a || e ? /* @__PURE__ */ n(
+      f,
       {
         alignItems: "center",
         display: "flex",
         gap: 0.25,
         width: "100%",
         children: [
-          t && /* @__PURE__ */ e(j, { children: [
+          a && /* @__PURE__ */ n(j, { children: [
             /* @__PURE__ */ i(
-              I,
+              N,
               {
                 icon: "circle-info",
-                iconColor: d.palette.gray[400],
+                iconColor: r.palette.gray[400],
                 iconSize: "sm",
                 iconType: "fa-light"
               }
             ),
             /* @__PURE__ */ i(
-              p,
+              l,
               {
-                color: d.palette.gray[400],
+                color: r.palette.gray[400],
                 display: "inline-block",
                 size: "md",
-                children: t
+                children: a
               }
             )
           ] }),
-          r && c === "down" ? /* @__PURE__ */ i(O, { href: r, children: h }) : void 0
+          e && s === "down" ? /* @__PURE__ */ i(O, { href: e, children: h }) : void 0
         ]
       }
     ) : void 0
   ] });
 };
 export {
-  J as OutlineContainer
+  L as OutlineContainer
 };

package/dist/components/inputs/styles.js

@@ -1,5 +1,5 @@
 import { styled as o } from "styled-components";
-const n = o.div`
+const a = o.div`
   ${({ theme: t }) => `
     align-items: flex-start;
     display: inline-flex;
@@ -192,6 +192,14 @@ const n = o.div`
       }
     }
 
+    &.warning:not(.disabled) {
+      border: 1px solid ${t.palette.warning[500]};
+
+      .toggle-divider {
+        border-left-color: ${t.palette.warning[500]};
+      }
+    }
+
     &.success:not(.disabled) {
       border: 1px solid ${t.palette.success[500]};
 
@@ -200,7 +208,7 @@ const n = o.div`
       }
     }
 
-    &:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error) {
+    &:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error, .warning) {
       background: ${t.palette.white};
       border: 1px solid ${t.palette.black};
       box-shadow: 0 0 0 1px ${t.palette.black};
@@ -219,7 +227,7 @@ const n = o.div`
       }
     }
 
-    &:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .success) {
+    &:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .warning, .success) {
       background: ${t.palette.white};
       border: 1px solid ${t.palette.gray[600]};
 
@@ -228,18 +236,18 @@ const n = o.div`
       }
     }
   `}
-`, s = o.div`
+`, l = o.div`
   height: 1px;
   background-color: ${({ theme: t }) => t.palette.gray[300]};
   flex-shrink: 0;
   transition: background-color 0.2s ease;
 
-  ${e}:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .success) & {
+  ${e}:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .warning, .success) & {
     background-color: ${({ theme: t }) => t.palette.gray[600]};
     transition: none;
   }
 
-  ${e}:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error) & {
+  ${e}:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error, .warning) & {
     border: 1px solid ${({ theme: t }) => t.palette.black};
   }
 `, p = o.div`
@@ -258,7 +266,7 @@ const n = o.div`
 `;
 export {
   p as ErrorMessage,
-  s as StyledNumberFieldSeparator,
-  n as StyledOutlineContainer,
+  l as StyledNumberFieldSeparator,
+  a as StyledOutlineContainer,
   e as StyledTextInputContainer
 };

package/dist/components/inputs/types.d.ts

@@ -41,6 +41,7 @@ interface ILabelProps {
  * @property {string} [helpLinkText] - The help link text of the input.
  * @property {string} [helpText] - The help text of the input.
  * @property {number} [maxLength] - The max length of the input.
+ * @property {string} [warning] - A non-blocking message shown when there is no error.
  */
 interface IOutlineContainerProps extends ILabelProps {
     disabled?: boolean;
@@ -52,6 +53,7 @@ interface IOutlineContainerProps extends ILabelProps {
     helpText?: string;
     maxLength?: number;
     value?: string;
+    warning?: string;
 }
 /**
  * Input text component props.

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "9.4.0"
+  "version": "9.5.0"
 }