@traefik-labs/faency 12.0.7

package/dist/components/TextField/TextField.vanilla.cjs

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Label_vanilla = require("../Label/Label.vanilla.cjs");
+const Box_vanilla = require("../Box/Box.vanilla.cjs");
+const Input_vanilla = require("../Input/Input.vanilla.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const AdornmentGroup = stitches_config.styled("div", {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center"
+});
+const StyledExclamationTriangleIcon = stitches_config.styled(reactIcons.ExclamationTriangleIcon, {
+  "& + *": {
+    marginLeft: "$1"
+  }
+});
+const StyledEyeOpenIcon = stitches_config.styled(reactIcons.EyeOpenIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const StyledEyeClosedIcon = stitches_config.styled(reactIcons.EyeClosedIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const StyledCrossCircledIcon = stitches_config.styled(reactIcons.CrossCircledIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const TextFieldVanilla = React.forwardRef(
+  ({
+    state,
+    clearable,
+    label: LabelOrComponent,
+    id,
+    type,
+    disabled,
+    readOnly,
+    onBlur,
+    onFocus,
+    css,
+    ...props
+  }, forwardedRef) => {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => inputRef.current);
+    const [inputHasFocus, setInputHasFocus] = React.useState(false);
+    const [innerType, setInnerType] = React.useState(type);
+    const isPasswordVisible = React.useMemo(() => innerType !== "password", [innerType]);
+    const invalid = React.useMemo(() => state === "invalid", [state]);
+    const labelVariant = React.useMemo(() => {
+      if (disabled) {
+        return "subtle";
+      }
+      if (invalid) {
+        return "invalid";
+      }
+      if (inputHasFocus) {
+        return "contrast";
+      }
+      return "default";
+    }, [invalid, disabled, inputHasFocus]);
+    const LabelNode = React.useMemo(() => {
+      if (LabelOrComponent === void 0 || LabelOrComponent === null) {
+        return null;
+      }
+      if (typeof LabelOrComponent === "string") {
+        return /* @__PURE__ */ jsxRuntime.jsx(Label_vanilla.LabelVanilla, { variant: labelVariant, htmlFor: id, children: LabelOrComponent });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(LabelOrComponent, { variant: labelVariant, htmlFor: id });
+    }, [LabelOrComponent, labelVariant, id]);
+    const isPasswordType = React.useMemo(() => type === "password", [type]);
+    const typeOrInnerType = React.useMemo(
+      () => isPasswordType ? innerType : type,
+      [isPasswordType, type, innerType]
+    );
+    const hasInnerAdornment = React.useMemo(
+      () => clearable || isPasswordType || invalid,
+      [clearable, isPasswordType, invalid]
+    );
+    const hasAdornmentGroup = React.useMemo(
+      () => clearable && invalid || clearable && isPasswordType || invalid && isPasswordType,
+      [clearable, invalid, isPasswordType]
+    );
+    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);
+    const handleClear = React.useCallback(() => {
+      const { current } = inputRef;
+      if (current) {
+        current.clear();
+      }
+    }, [inputRef]);
+    const handleFocus = React.useCallback(
+      (e) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+        setInputHasFocus(true);
+      },
+      [onFocus, setInputHasFocus]
+    );
+    const handleBlur = React.useCallback(
+      (e) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+        setInputHasFocus(false);
+      },
+      [onBlur, setInputHasFocus]
+    );
+    const togglePasswordVisibility = React.useCallback(() => {
+      setInnerType((prevInnerType) => prevInnerType === "password" ? void 0 : "password");
+    }, [setInnerType]);
+    const EndAdornmentWrapper = React.useMemo(
+      () => hasAdornmentGroup ? AdornmentGroup : React.Fragment,
+      [hasAdornmentGroup]
+    );
+    const PasswordVisibilityToggleIcon = React.useMemo(
+      () => isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon,
+      [isPasswordVisible]
+    );
+    const passwordAction = React.useMemo(
+      () => isPasswordVisible ? "Hide password" : "Show password",
+      [isPasswordVisible]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box_vanilla.BoxVanilla, { css, children: [
+      LabelNode,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input_vanilla.InputVanilla,
+        {
+          id,
+          ref: inputRef,
+          endAdornment: hasInnerAdornment && /* @__PURE__ */ jsxRuntime.jsxs(EndAdornmentWrapper, { children: [
+            invalid && /* @__PURE__ */ jsxRuntime.jsx(StyledExclamationTriangleIcon, { role: "alert", "aria-label": "Invalid" }),
+            isPasswordType && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: passwordAction, children: /* @__PURE__ */ jsxRuntime.jsx(
+              PasswordVisibilityToggleIcon,
+              {
+                "aria-label": passwordAction,
+                onClick: togglePasswordVisibility
+              }
+            ) }),
+            clearable && !clearDisabled && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: "Clear", children: /* @__PURE__ */ jsxRuntime.jsx(StyledCrossCircledIcon, { "aria-label": "Clear", onClick: handleClear }) })
+          ] }),
+          state,
+          type: typeOrInnerType,
+          disabled,
+          readOnly,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          ...props
+        }
+      )
+    ] });
+  }
+);
+TextFieldVanilla.displayName = "TextFieldVanilla";
+exports.TextFieldVanilla = TextFieldVanilla;
+//# sourceMappingURL=TextField.vanilla.cjs.map

package/dist/components/TextField/TextField.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.vanilla.cjs","sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n  React.ElementRef<typeof InputVanilla>,\n  TextFieldVanillaProps\n>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <LabelVanilla variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </LabelVanilla>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType],\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid],\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType],\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus],\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup],\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible],\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible],\n    );\n\n    return (\n      <BoxVanilla css={css}>\n        {LabelNode}\n        <InputVanilla\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </BoxVanilla>\n    );\n  },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"names":["styled","ExclamationTriangleIcon","EyeOpenIcon","EyeClosedIcon","CrossCircledIcon","LabelVanilla","jsx","jsxs","BoxVanilla","InputVanilla","Tooltip"],"mappings":"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"}

package/dist/components/TextField/TextField.vanilla.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeClosedIcon, EyeOpenIcon, ExclamationTriangleIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { LabelVanilla } from "../Label/Label.vanilla.js";
+import { BoxVanilla } from "../Box/Box.vanilla.js";
+import { InputVanilla } from "../Input/Input.vanilla.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+const AdornmentGroup = styled("div", {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center"
+});
+const StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {
+  "& + *": {
+    marginLeft: "$1"
+  }
+});
+const StyledEyeOpenIcon = styled(EyeOpenIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const StyledEyeClosedIcon = styled(EyeClosedIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const StyledCrossCircledIcon = styled(CrossCircledIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const TextFieldVanilla = React.forwardRef(
+  ({
+    state,
+    clearable,
+    label: LabelOrComponent,
+    id,
+    type,
+    disabled,
+    readOnly,
+    onBlur,
+    onFocus,
+    css,
+    ...props
+  }, forwardedRef) => {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => inputRef.current);
+    const [inputHasFocus, setInputHasFocus] = React.useState(false);
+    const [innerType, setInnerType] = React.useState(type);
+    const isPasswordVisible = React.useMemo(() => innerType !== "password", [innerType]);
+    const invalid = React.useMemo(() => state === "invalid", [state]);
+    const labelVariant = React.useMemo(() => {
+      if (disabled) {
+        return "subtle";
+      }
+      if (invalid) {
+        return "invalid";
+      }
+      if (inputHasFocus) {
+        return "contrast";
+      }
+      return "default";
+    }, [invalid, disabled, inputHasFocus]);
+    const LabelNode = React.useMemo(() => {
+      if (LabelOrComponent === void 0 || LabelOrComponent === null) {
+        return null;
+      }
+      if (typeof LabelOrComponent === "string") {
+        return /* @__PURE__ */ jsx(LabelVanilla, { variant: labelVariant, htmlFor: id, children: LabelOrComponent });
+      }
+      return /* @__PURE__ */ jsx(LabelOrComponent, { variant: labelVariant, htmlFor: id });
+    }, [LabelOrComponent, labelVariant, id]);
+    const isPasswordType = React.useMemo(() => type === "password", [type]);
+    const typeOrInnerType = React.useMemo(
+      () => isPasswordType ? innerType : type,
+      [isPasswordType, type, innerType]
+    );
+    const hasInnerAdornment = React.useMemo(
+      () => clearable || isPasswordType || invalid,
+      [clearable, isPasswordType, invalid]
+    );
+    const hasAdornmentGroup = React.useMemo(
+      () => clearable && invalid || clearable && isPasswordType || invalid && isPasswordType,
+      [clearable, invalid, isPasswordType]
+    );
+    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);
+    const handleClear = React.useCallback(() => {
+      const { current } = inputRef;
+      if (current) {
+        current.clear();
+      }
+    }, [inputRef]);
+    const handleFocus = React.useCallback(
+      (e) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+        setInputHasFocus(true);
+      },
+      [onFocus, setInputHasFocus]
+    );
+    const handleBlur = React.useCallback(
+      (e) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+        setInputHasFocus(false);
+      },
+      [onBlur, setInputHasFocus]
+    );
+    const togglePasswordVisibility = React.useCallback(() => {
+      setInnerType((prevInnerType) => prevInnerType === "password" ? void 0 : "password");
+    }, [setInnerType]);
+    const EndAdornmentWrapper = React.useMemo(
+      () => hasAdornmentGroup ? AdornmentGroup : React.Fragment,
+      [hasAdornmentGroup]
+    );
+    const PasswordVisibilityToggleIcon = React.useMemo(
+      () => isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon,
+      [isPasswordVisible]
+    );
+    const passwordAction = React.useMemo(
+      () => isPasswordVisible ? "Hide password" : "Show password",
+      [isPasswordVisible]
+    );
+    return /* @__PURE__ */ jsxs(BoxVanilla, { css, children: [
+      LabelNode,
+      /* @__PURE__ */ jsx(
+        InputVanilla,
+        {
+          id,
+          ref: inputRef,
+          endAdornment: hasInnerAdornment && /* @__PURE__ */ jsxs(EndAdornmentWrapper, { children: [
+            invalid && /* @__PURE__ */ jsx(StyledExclamationTriangleIcon, { role: "alert", "aria-label": "Invalid" }),
+            isPasswordType && /* @__PURE__ */ jsx(Tooltip, { content: passwordAction, children: /* @__PURE__ */ jsx(
+              PasswordVisibilityToggleIcon,
+              {
+                "aria-label": passwordAction,
+                onClick: togglePasswordVisibility
+              }
+            ) }),
+            clearable && !clearDisabled && /* @__PURE__ */ jsx(Tooltip, { content: "Clear", children: /* @__PURE__ */ jsx(StyledCrossCircledIcon, { "aria-label": "Clear", onClick: handleClear }) })
+          ] }),
+          state,
+          type: typeOrInnerType,
+          disabled,
+          readOnly,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          ...props
+        }
+      )
+    ] });
+  }
+);
+TextFieldVanilla.displayName = "TextFieldVanilla";
+export {
+  TextFieldVanilla
+};
+//# sourceMappingURL=TextField.vanilla.js.map

package/dist/components/TextField/TextField.vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.vanilla.js","sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n  React.ElementRef<typeof InputVanilla>,\n  TextFieldVanillaProps\n>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <LabelVanilla variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </LabelVanilla>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType],\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid],\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType],\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus],\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup],\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible],\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible],\n    );\n\n    return (\n      <BoxVanilla css={css}>\n        {LabelNode}\n        <InputVanilla\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </BoxVanilla>\n    );\n  },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"names":[],"mappings":"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"}

package/dist/components/Textarea/Textarea.cjs

@@ -0,0 +1,280 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Box = require("../Box/Box.cjs");
+const Label = require("../Label/Label.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+const FOCUS_SHADOW = Elevation.elevationVariants[1].boxShadow;
+const StyledTextarea = stitches_config.styled("textarea", {
+  // Reset
+  appearance: "none",
+  overflow: "auto",
+  // force overflow auto behaviour cross-browser
+  borderWidth: "0",
+  boxSizing: "border-box",
+  fontFamily: "$rubik",
+  margin: "0",
+  outline: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  // Custom
+  p: "$3",
+  position: "relative",
+  flexGrow: 1,
+  // make sure to grow fully inside TextareaWrapper
+  backgroundColor: "transparent",
+  borderRadius: "inherit",
+  // inherit border radius from TextareaWrapper
+  boxShadow: "inset 0 0 0 1px $colors$textareaBorder",
+  color: "$textareaText",
+  fontVariantNumeric: "tabular-nums",
+  transition: "box-shadow .1s ease-in-out",
+  "&:-webkit-autofill,&:autofill": {
+    boxShadow: "inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg"
+  },
+  "&:-webkit-autofill::first-line,&:autofill::first-line": {
+    fontFamily: "$rubik",
+    color: "$hiContrast"
+  },
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`
+  },
+  "&::placeholder": {
+    color: "$textareaPlaceholder"
+  },
+  "&:read-only:not(:disabled)": {
+    boxShadow: "none"
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    opacity: 0.7,
+    color: "$textareaDisabledText"
+  },
+  variants: {
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        "&:disabled": {
+          boxShadow: "none"
+        },
+        backgroundColor: "transparent",
+        "&:focus-visible": {
+          backgroundColor: "$loContrast"
+        }
+      }
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$textareaInvalidBorder",
+        "&:focus-visible": {
+          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`
+        },
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$textareaInvalidBorder"
+            }
+          }
+        }
+      }
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "@hover": {
+          "&:hover:not(:read-only)": {
+            cursor: "text"
+          }
+        },
+        "&:focus-visible:not(:read-only)": {
+          cursor: "text"
+        }
+      },
+      text: {
+        cursor: "text"
+      }
+    },
+    resize: {
+      none: {
+        resize: "none"
+      },
+      both: {
+        resize: "both"
+      },
+      vertical: {
+        resize: "vertical"
+      },
+      horizontal: {
+        resize: "horizontal"
+      }
+    },
+    endAdornment: {
+      true: {
+        paddingBottom: "$5",
+        paddingRight: "$5"
+      }
+    }
+  },
+  defaultVariants: {
+    cursor: "default",
+    resize: "both"
+  },
+  compoundVariants: [
+    {
+      variant: "ghost",
+      state: "invalid",
+      css: {
+        boxShadow: "inset 0 0 0 1px $colors$textareaInvalidBorder"
+      }
+    }
+  ]
+});
+const TextareaWrapper = stitches_config.styled("div", {
+  // Reset
+  outline: "none",
+  lineHeight: 0,
+  position: "relative",
+  display: "inline-flex",
+  // helps matching resizable content size
+  backgroundColor: "$textareaBg",
+  color: "$textareaPlaceholder",
+  borderRadius: "$3",
+  "&::before": {
+    boxSizing: "border-box",
+    borderRadius: "inherit",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    borderRadius: "inherit",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  "&:focus-visible": {
+    "&::before": {
+      backgroundColor: "$textareaFocusBg"
+    },
+    "&::after": {
+      backgroundColor: "$primary",
+      opacity: 0.15
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      "&::before": {
+        backgroundColor: "$textareaHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$primary",
+        opacity: 0.05
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.7,
+        color: "$textareaDisabledText",
+        "@hover": {
+          "&:hover": {
+            "&::before": {
+              backgroundColor: "inherit"
+            },
+            "&::after": {
+              backgroundColor: "inherit"
+            }
+          }
+        }
+      }
+    },
+    state: {
+      invalid: {
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$textareaInvalidBorder"
+            }
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+const AdornmentWrapperEnd = stitches_config.styled("div", {
+  position: "absolute",
+  bottom: "$2",
+  right: "$3",
+  minWidth: "$5",
+  minHeight: "$5",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const Textarea = React.forwardRef(
+  ({ state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props }, forwardedRef) => {
+    const [hasFocus, setHasFocus] = React.useState(false);
+    const invalid = React.useMemo(() => state === "invalid", [state]);
+    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);
+    const labelVariant = React.useMemo(() => {
+      if (disabled) {
+        return "subtle";
+      }
+      if (invalid) {
+        return "invalid";
+      }
+      if (hasFocus) {
+        return "contrast";
+      }
+      return "default";
+    }, [invalid, disabled, hasFocus]);
+    const handleFocus = React.useCallback(
+      (e) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+        setHasFocus(true);
+      },
+      [onFocus, setHasFocus]
+    );
+    const handleBlur = React.useCallback(
+      (e) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+        setHasFocus(false);
+      },
+      [onBlur, setHasFocus]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { css: rootCss, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { variant: labelVariant, htmlFor: id, css: { display: "block" }, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(TextareaWrapper, { state, disabled, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StyledTextarea,
+          {
+            id,
+            ref: forwardedRef,
+            css,
+            disabled,
+            state,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            endAdornment: hasEndAdornment,
+            ...props
+          }
+        ),
+        hasEndAdornment && /* @__PURE__ */ jsxRuntime.jsx(AdornmentWrapperEnd, { children: endAdornment })
+      ] })
+    ] });
+  }
+);
+exports.Textarea = Textarea;
+//# sourceMappingURL=Textarea.cjs.map